:root{color-scheme:dark;--bg:#07090d;--surface:#11151c;--surface2:#171d26;--line:#293241;--text:#f3f6fa;--muted:#9aa8b8;--blue:#1685e7;--blue2:#62bcff;--orange:#ef8a19;--danger:#ff6b6b;--ok:#48d597;--shadow:0 18px 55px rgba(0,0,0,.35);font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0,#0b2542 0,transparent 35%),var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--blue2);font-size:.72rem;font-weight:700}.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px}.login-card{width:min(440px,100%);background:linear-gradient(145deg,rgba(23,29,38,.96),rgba(11,14,20,.98));border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.brand-logo{width:100%;max-height:160px;object-fit:contain;border-radius:16px;margin-bottom:18px}.login-card h1{font-size:2rem;margin:.35rem 0}.login-card form{display:grid;gap:14px;margin-top:24px}.fineprint{font-size:.78rem;color:var(--muted);line-height:1.5;margin-top:20px}.message{min-height:1.5rem;color:var(--danger)}label{display:grid;gap:7px;font-size:.84rem;color:#c8d1db;font-weight:600}input,select,textarea{width:100%;background:#090d13;border:1px solid #354154;color:var(--text);border-radius:11px;padding:12px 13px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,133,231,.15)}textarea{resize:vertical}.primary,.secondary,.ghost{border-radius:11px;padding:11px 16px;border:1px solid transparent;font-weight:700}.primary{background:linear-gradient(135deg,#0877d1,#1697ff);color:white;box-shadow:0 7px 22px rgba(8,119,209,.25)}.secondary{background:var(--surface2);color:var(--text);border-color:#354154}.ghost{background:transparent;color:var(--muted);border-color:#354154}.compact{padding:8px 11px;font-size:.82rem}.full{width:100%}.link-button{background:transparent;border:0;color:var(--blue2);font-weight:700}.app-shell{min-height:100dvh}.topbar{position:sticky;top:0;z-index:20;background:rgba(7,9,13,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-left))}.brand-compact{display:flex;align-items:center;gap:11px}.brand-compact img{width:40px;height:40px;border-radius:10px;object-fit:cover}.brand-compact div{display:grid}.brand-compact strong{font-size:.94rem}.brand-compact span{font-size:.7rem;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:8px}.pill{display:inline-flex;align-items:center;border:1px solid #3b4655;background:#111821;border-radius:999px;padding:6px 10px;font-size:.72rem;color:#c7d0da}.pill.online{border-color:rgba(72,213,151,.5);color:var(--ok)}.pill.offline{border-color:rgba(255,107,107,.4);color:#ff9d9d}.main{width:min(1180px,100%);margin:0 auto;padding:26px 18px calc(100px + env(safe-area-inset-bottom))}.page{display:none;animation:fade .18s ease}.page.active{display:block}@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}.page-heading h2{margin:.25rem 0 0;font-size:clamp(1.55rem,4vw,2.35rem)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.two-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi,.panel{background:linear-gradient(145deg,rgba(23,29,38,.94),rgba(14,18,24,.96));border:1px solid var(--line);border-radius:17px;box-shadow:0 8px 25px rgba(0,0,0,.18)}.kpi{padding:18px;display:grid;gap:8px}.kpi span{color:var(--muted);font-size:.78rem}.kpi strong{font-size:1.5rem}.panel{padding:19px;margin-bottom:16px}.panel h3{margin:0 0 13px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.panel-head h3{margin:0}.card-list{display:grid;gap:10px}.project-card{border:1px solid #2d3745;background:#0c1118;border-radius:14px;padding:15px;display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center}.project-card h4{margin:0 0 5px}.project-card p{margin:0;color:var(--muted);font-size:.82rem}.project-card .value{text-align:right}.project-card .value strong{display:block}.empty-state{color:var(--muted);padding:22px;text-align:center}.mobile-callout{border-color:rgba(22,133,231,.45);background:linear-gradient(135deg,rgba(8,119,209,.14),rgba(17,21,28,.96))}.toolbar{display:flex;gap:10px;margin-bottom:15px}.toolbar input{flex:1}.form-grid{display:grid;gap:14px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.span-two{grid-column:span 2}.table-scroll{overflow:auto;border:1px solid #2c3541;border-radius:12px}table{border-collapse:collapse;width:100%;min-width:760px}th,td{padding:10px;border-bottom:1px solid #28313d;text-align:left;font-size:.82rem}th{position:sticky;top:0;background:#151b24;color:#aeb9c6}td input{padding:8px;min-width:74px}.remove-row{background:transparent;border:0;color:#ff8d8d;font-size:1.2rem}.results-panel{border-color:rgba(239,138,25,.35)}.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.result-grid div{background:#0b1017;border:1px solid #27313e;border-radius:12px;padding:13px;display:grid;gap:6px}.result-grid span{font-size:.75rem;color:var(--muted)}.result-grid strong{font-size:1.1rem}.sticky-actions{position:sticky;bottom:76px;display:flex;justify-content:flex-end;gap:10px;background:rgba(7,9,13,.9);backdrop-filter:blur(12px);padding:12px;border-radius:14px;border:1px solid var(--line)}.photo-input input{padding:18px}.photo-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photo-preview img{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.timeline{display:grid;gap:9px}.timeline-item{border-left:3px solid var(--blue);padding:8px 12px;background:#0b1017;border-radius:0 10px 10px 0;font-size:.82rem}.timeline-item.error{border-color:var(--danger)}.timeline-item.success{border-color:var(--ok)}.account-card{display:flex;justify-content:space-between;align-items:center}.definition-list{display:grid;grid-template-columns:minmax(140px,.45fr) 1fr;gap:10px;margin:0}.definition-list dt{color:var(--muted)}.definition-list dd{margin:0;word-break:break-word}.warning{border-color:rgba(239,138,25,.5)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(8,11,16,.97);backdrop-filter:blur(18px);border-top:1px solid var(--line);display:flex;justify-content:center;padding:6px max(7px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))}.bottom-nav button{width:min(150px,20%);background:transparent;border:0;color:#7e8b9b;display:grid;place-items:center;gap:2px;padding:7px 2px;font-size:.66rem}.bottom-nav button span{font-size:1.2rem}.bottom-nav button.active{color:var(--blue2)}.toast{position:fixed;z-index:50;left:50%;bottom:92px;transform:translateX(-50%);max-width:min(440px,90vw);background:#18212c;border:1px solid #3c4a5b;border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
@media(max-width:760px){.top-actions .pill{display:none}.topbar{height:61px}.brand-compact strong{font-size:.82rem}.brand-compact span{display:none}.main{padding:18px 12px 100px}.page-heading{align-items:center}.page-heading h2{font-size:1.55rem}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.two,.form-grid.four{grid-template-columns:1fr}.span-two{grid-column:auto}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card{grid-template-columns:1fr}.project-card .value{text-align:left}.toolbar{flex-direction:column}.account-card{display:grid;gap:16px}.definition-list{grid-template-columns:1fr}.definition-list dd{padding-bottom:9px;border-bottom:1px solid var(--line)}.photo-preview{grid-template-columns:repeat(2,1fr)}.sticky-actions{bottom:72px}.bottom-nav button{font-size:.6rem}.login-card{padding:22px}}@media(min-width:761px){.bottom-nav{left:50%;width:min(760px,95%);transform:translateX(-50%);bottom:12px;border:1px solid var(--line);border-radius:18px;padding:5px}.main{padding-bottom:110px}}

/* ── estimating waterfall ─────────────────────────────────────────────
   Read top to bottom in the order the money moves. Subtotals are picked out
   so the eye can find where cost becomes price. */
.waterfall{display:grid;gap:1px;background:#27313e;border:1px solid #2c3541;border-radius:12px;overflow:hidden}
.wf-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
        background:#0b1017;padding:9px 13px;font-size:.84rem;color:var(--muted)}
.wf-row strong{font-variant-numeric:tabular-nums;color:#c7d0da;font-weight:600}
.wf-row.wf-strong{background:#111823;color:var(--text)}
.wf-row.wf-strong strong{color:var(--text);font-size:.95rem}
.wf-row.wf-strong:last-child strong{color:var(--ok)}
td.line-total{font-variant-numeric:tabular-nums;color:#c7d0da;white-space:nowrap}
th.num,td.num{text-align:right}
.empty-state{padding:14px;text-align:center;color:var(--muted);font-size:.82rem}
@media(max-width:760px){
  .wf-row{font-size:.8rem;padding:8px 11px}
  .form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Download links in the document list are buttons in all but name. */
.project-card .value a{display:inline-block;margin:2px 0 2px 6px}
.bottom-nav button{width:min(150px,17%)}
#variationSummary{font-size:.82rem}
#variationSummary dt{color:var(--muted)}
#variationSummary dd{font-variant-numeric:tabular-nums}
#captureList .project-card .value{display:flex;align-items:center;gap:8px}
#assemblyHint{color:var(--muted)}

/* ── desktop navigation ───────────────────────────────────────────────
   A floating tab bar is a phone pattern. On a laptop it hovered over the
   form with the sticky save bar stacked just above it, so two detached
   bars sat on top of the content with the form visible behind them.

   Above 900px the same markup becomes an ordinary tab strip under the
   header: icon beside label, full width, anchored. No DOM change, so the
   navigation code stays one implementation rather than two. */
@media(min-width:900px){
  .bottom-nav{
    top:68px;bottom:auto;left:0;right:0;width:100%;transform:none;
    border:0;border-top:0;border-bottom:1px solid var(--line);border-radius:0;
    padding:0;justify-content:center;gap:2px;
  }
  .bottom-nav button{
    width:auto;min-width:112px;grid-auto-flow:column;align-items:center;
    gap:9px;padding:12px 18px;font-size:.82rem;
    border-bottom:2px solid transparent;
  }
  .bottom-nav button span{font-size:1rem}
  .bottom-nav button.active{border-bottom-color:var(--blue2)}

  /* Room for the strip at the top, and enough at the bottom that the last row
     of a table can always be scrolled clear of the save bar. Without this the
     final line of an estimate sits permanently underneath it. */
  .main{padding-top:78px;padding-bottom:104px}

  /* One bar over the content instead of two, sitting where a save bar
     belongs rather than hovering mid-form. */
  .sticky-actions{bottom:16px}
  .toast{bottom:28px}
}

/* A sticky bar necessarily covers whatever it scrolls over, so it has to look
   like a bar rather than a translucent panel. At 90% opacity the inputs behind
   it showed through as half-legible ghosts, which reads as a rendering fault
   rather than a deliberate overlay. Opaque, with a shadow to lift it. */
.sticky-actions{
  background:var(--bg);
  box-shadow:0 -12px 30px rgba(7,9,13,.85);
}

/* Demonstration mode is a hole in authentication, so it is styled as a warning
   rather than a hint. */
.demo-warning{
  margin-top:14px;padding:11px 13px;border-radius:11px;font-size:.8rem;line-height:1.5;
  color:#ffd9a3;background:rgba(239,138,25,.12);border:1px solid rgba(239,138,25,.45);
}

.three-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.three-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}