/* ===================================================================
   Life & Times — Credit & Budget

   Palette follows the "Pipeline Progress" design: warm charcoal ground,
   brown-black cards, amber as the single accent, cement as a material for
   the Pipeline slab. Every colour lives in a variable, so this file is the
   only place the theme is decided.

   Why the page stays dark: the design puts dark cards on a light cement
   page. Flipping this app's ground to light would strand every rule that
   paints text directly on the background (.section-title, loose paragraphs)
   at ~1.2:1 contrast. So the cement appears where it is drawn deliberately
   — the Pipeline slab — and the shell keeps dark-on-dark, which every
   existing rule was written against.
   =================================================================== */

:root{
  --bg:#141009;
  --bg2:#0f0c07;
  --surface:#1b1710;
  --surface2:#2b251c;
  --line:#2a231a;
  --line2:#3a3124;

  --txt:#f2ead9;
  --txt2:#a89b82;
  --txt3:#7c7360;

  /* Five distinguishable hues, warmed to sit on brown. The allocation
     waterfall coats rows in these, so they must stay tellable apart. */
  --green:#8fd18a;
  --green-d:#5c9e59;
  --cyan:#6fb7ae;
  --blue:#7f9fd4;
  --violet:#c0a0d8;
  --amber:#ffbe3d;
  --red:#ff8a5c;
  --red-d:#d4562a;

  /* Materials */
  --steel:#9a938a;
  /* Cement is very slightly translucent so the floating money ghosts through
     the Pipeline slab instead of vanishing behind it — the slab covers most of
     the viewport on the landing page. At 94% the effective background is still
     ~#e2e0da, so --ink text holds about 13:1. */
  --cement:linear-gradient(160deg,rgba(238,236,231,.94),rgba(224,222,214,.94));
  --ink:#211d16;          /* text on cement */
  --ink2:#57524a;
  --ink3:#726c60;

  --ok:var(--green);
  --warn:var(--amber);
  --bad:var(--red);

  --r:16px;
  --r-sm:10px;
  --r-lg:22px;
  --shadow:0 10px 40px -12px rgba(0,0,0,.75);
  --grad:linear-gradient(135deg,#ffd071,#f4a825);
  --sans:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Condensed uppercase is the design's headline voice. Arial Narrow ships on
     Windows, so this degrades without a webfont request. */
  --cond:'Barlow Condensed','Oswald','Arial Narrow','Segoe UI Semibold',sans-serif;
  --mono:'Space Mono','SF Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60rem 40rem at 12% -10%,rgba(255,190,61,.08),transparent 60%),
    radial-gradient(50rem 40rem at 100% 0%,rgba(244,168,37,.05),transparent 55%),
    radial-gradient(50rem 50rem at 50% 110%,rgba(201,120,26,.05),transparent 60%);
}
.hidden{display:none !important}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
a{color:#f0a92b}
a:hover{color:#ffc860}

/* ============================ LOCK ============================ */
.lock{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:radial-gradient(60rem 50rem at 50% 0%,rgba(32,25,15,.88),rgba(20,16,9,.93) 70%);
}
.lock-card{width:100%;max-width:360px;text-align:center}
.lock-logo{display:flex;justify-content:center;margin-bottom:14px}
.lock-title{font-family:var(--cond);font-size:30px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.lock-sub{color:var(--txt2);margin-top:6px;font-size:14px}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:28px 0 24px;min-height:16px}
.pin-dots i{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line2);background:transparent;transition:.18s;
}
.pin-dots i.on{background:var(--grad);border-color:transparent;transform:scale(1.12)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:0 auto}
.keypad button{
  aspect-ratio:1.45;border-radius:var(--r);font-size:22px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);transition:.12s;
}
.keypad button:active{background:var(--surface2);transform:scale(.95)}
.keypad .kp-alt{font-size:13px;font-weight:500;color:var(--txt2)}
.lock-err{color:var(--red);font-size:13px;min-height:20px;margin-top:16px}
.lock-note{color:var(--txt3);font-size:12px;margin-top:4px;line-height:1.6}
.lock-reset{color:var(--txt3);font-size:12px;margin-top:18px;text-decoration:underline}
.lock-reset:hover{color:var(--txt2)}
.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-9px)}
  40%,80%{transform:translateX(9px)}
}

/* ============================ SHELL ============================ */
.app{position:relative;z-index:1;min-height:100%;padding-bottom:88px}
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:rgba(20,16,9,.86);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.topbar-left{display:flex;align-items:center;gap:12px}
.brand{font-family:var(--cond);font-weight:700;letter-spacing:.02em;font-size:21px;text-transform:uppercase}
.phase-chip{
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,190,61,.12);color:var(--amber);border:1px solid rgba(255,190,61,.35);
}
.topbar-right{display:flex;gap:8px}
.icon-btn{
  position:relative;width:38px;height:38px;border-radius:11px;font-size:16px;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);transition:.15s;
}
.icon-btn:hover{background:var(--surface2)}
.dot-badge{
  position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--surface);
}
.view{padding:20px 18px 24px;max-width:1180px;margin:0 auto}

/* ============================ TABBAR ============================ */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:45;
  display:grid;grid-template-columns:repeat(6,1fr);
  background:rgba(20,16,9,.94);backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar button{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;color:var(--txt3);transition:.15s;border-radius:10px;
}
.tabbar button i{font-style:normal;font-size:19px;line-height:1}
.tabbar button span{font-size:10.5px;font-weight:600;letter-spacing:.2px}
.tabbar button.active{color:var(--amber)}

/* ============================ CARDS ============================ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;margin-bottom:14px;
}
.card-lg{border-radius:var(--r-lg);padding:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.card-head h2{font-family:var(--cond);font-size:20px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.card-head h3{font-family:var(--cond);font-size:18px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.muted{color:var(--txt2)}
.dim{color:var(--txt3)}
.tiny{font-size:12px}
.sm{font-size:13px}
.mono{font-family:var(--mono)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.mt{margin-top:14px}
.mt-sm{margin-top:8px}
.mb{margin-bottom:14px}
.center{text-align:center}
.right{text-align:right}
.section-title{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--txt2);margin:22px 0 10px;
}
.section-title:first-child{margin-top:0}

/* ============================ HERO ============================ */
.hero{
  border-radius:var(--r-lg);padding:24px;margin-bottom:16px;
  background:linear-gradient(150deg,#241d12,#17130d 60%);
  border:1px solid var(--line2);position:relative;overflow:hidden;
}
.hero::after{
  content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,190,61,.18),transparent 70%);
}
.hero-label{font-size:12px;color:var(--txt2);font-weight:600;letter-spacing:.3px}
.hero-num{font-family:var(--mono);font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:6px 0 4px}
.hero-sub{font-size:13px;color:var(--txt2);position:relative;z-index:1}
.hero-strip{
  display:flex;gap:20px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);position:relative;z-index:1;flex-wrap:wrap;
}
.hero-strip div span{display:block;font-size:11px;color:var(--txt3);font-weight:600}
.hero-strip div strong{font-size:16px;font-weight:700}

/* ============================ STATS ============================ */
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:15px;
}
.stat-label{font-family:var(--mono);font-size:10.5px;color:var(--txt2);font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.stat-value{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:5px}
.stat-note{font-size:11.5px;color:var(--txt2);margin-top:3px}
.v-ok{color:var(--green)} .v-warn{color:var(--amber)} .v-bad{color:var(--red)}
.v-cyan{color:var(--cyan)} .v-violet{color:var(--violet)}

/* ============================ BARS ============================ */
.bar{height:8px;border-radius:999px;background:var(--bg2);overflow:hidden;margin-top:8px}
.bar > span{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .5s ease}
.bar.thin{height:5px}
.bar-red > span{background:linear-gradient(90deg,var(--red),#fb923c)}
.bar-amber > span{background:linear-gradient(90deg,var(--amber),#fb923c)}
.bar-violet > span{background:linear-gradient(90deg,var(--violet),var(--blue))}

/* ============================ GAUGE ============================ */
.gauge{display:flex;flex-direction:column;align-items:center;gap:6px}
.gauge svg{transform:rotate(-90deg)}
.gauge-wrap{position:relative;display:grid;place-items:center}
.gauge-mid{position:absolute;text-align:center}
.gauge-mid b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1}
.gauge-mid small{font-size:11px;color:var(--txt3);font-weight:600}

/* ============================ LISTS ============================ */
.list{display:flex;flex-direction:column}
.item{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);
}
.item:last-child{border-bottom:none}
.item-ic{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface2);font-size:16px;
}
.item-main{flex:1;min-width:0}
.item-main b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-main small{color:var(--txt3);font-size:11.5px}
.item-end{text-align:right;flex:0 0 auto}
.item-end b{display:block;font-size:14px;font-weight:700}
.item-end small{color:var(--txt3);font-size:11px}
.item.clickable{cursor:pointer;border-radius:10px;padding-left:8px;padding-right:8px;margin:0 -8px}
.item.clickable:hover{background:var(--surface2)}

/* ============================ PILLS / BADGES ============================ */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--surface2);color:var(--txt2);border:1px solid var(--line2);
  white-space:nowrap;
}
.pill-ok{background:rgba(143,209,138,.14);color:var(--green);border-color:rgba(143,209,138,.3)}
.pill-warn{background:rgba(255,190,61,.14);color:var(--amber);border-color:rgba(255,190,61,.32)}
.pill-bad{background:rgba(255,138,92,.14);color:var(--red);border-color:rgba(255,138,92,.32)}
.pill-info{background:rgba(127,159,212,.14);color:var(--blue);border-color:rgba(127,159,212,.3)}
.pill-violet{background:rgba(192,160,216,.14);color:var(--violet);border-color:rgba(192,160,216,.3)}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;
  background:var(--surface2);border:1px solid var(--line2);transition:.15s;
}
.btn:hover{background:var(--line)}
.btn-primary{background:var(--grad);color:var(--ink);border-color:transparent;font-weight:700}
.btn-primary:hover{filter:brightness(1.08);background:var(--grad)}
.btn-danger{background:rgba(255,138,92,.14);color:var(--red);border-color:rgba(255,138,92,.32)}
.btn-danger:hover{background:rgba(255,138,92,.24)}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ============================ FORMS ============================ */
.field{margin-bottom:14px}
.field label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--txt3);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line2);color:var(--txt);
  outline:none;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(74,222,128,.1);
}
.field textarea{resize:vertical;min-height:80px}
.field input[type=range]{
  padding:0;height:6px;border:none;background:var(--line2);
  border-radius:999px;accent-color:var(--green);cursor:pointer;
}
.field input[type=range]:focus{box-shadow:none}
.field input[type=file]{padding:9px 11px;font-size:13px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-hint{font-size:11.5px;color:var(--txt3);margin-top:5px;line-height:1.5}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;padding:8px 0}
.check input{width:18px;height:18px;accent-color:var(--green);cursor:pointer;flex:0 0 auto}
.check span{font-size:13.5px}

/* ============================ ADVISOR ============================ */
.advisor{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:70;
  background:rgba(23,19,13,.98);backdrop-filter:blur(24px);
  border-left:1px solid var(--line2);
  display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--shadow);
}
.advisor.open{transform:translateX(0)}
.advisor-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.advisor-who{display:flex;align-items:center;gap:11px}
.advisor-av{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(135deg,rgba(255,208,113,.22),rgba(244,168,37,.18));
  border:1px solid rgba(255,190,61,.38);
}
.advisor-who strong{display:block;font-size:14.5px}
.advisor-who small{color:var(--txt3);font-size:11.5px}
.advisor-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.advisor-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:9px}

.bubble{
  position:relative;padding:13px 15px;border-radius:18px 18px 18px 5px;
  background:linear-gradient(150deg,rgba(43,37,28,.95),rgba(27,23,16,.95));
  border:1px solid var(--line2);font-size:13.5px;line-height:1.6;
}
.bubble-urgent{border-color:rgba(255,138,92,.45);background:linear-gradient(150deg,rgba(58,22,14,.75),rgba(32,18,12,.85))}
.bubble-warn{border-color:rgba(255,190,61,.38);background:linear-gradient(150deg,rgba(56,42,12,.6),rgba(28,22,10,.85))}
.bubble-good{border-color:rgba(143,209,138,.38);background:linear-gradient(150deg,rgba(22,44,26,.6),rgba(14,26,16,.85))}
.bubble b{color:var(--txt)}
.bubble-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.bubble-book{
  font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--violet);
  background:rgba(192,160,216,.13);border:1px solid rgba(192,160,216,.27);
  padding:2px 7px;border-radius:999px;
}
.bubble-act{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.scrim.on{opacity:1;pointer-events:auto}

/* ============================ MODAL ============================ */
.modal-wrap{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-wrap.on{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:480px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  transform:translateY(14px) scale(.98);transition:.2s;
}
.modal-wrap.on .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px}
.modal-head h3{font-size:16px;font-weight:700}
.modal-body{padding:0 20px;overflow-y:auto;flex:1}
.modal-foot{padding:16px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ============================ TOAST ============================ */
.toast-wrap{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:90vw}
.toast{
  padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:600;
  background:var(--surface2);border:1px solid var(--line2);box-shadow:var(--shadow);
  animation:toastIn .25s ease;
}
.toast-ok{border-color:rgba(74,222,128,.4);color:var(--green)}
.toast-bad{border-color:rgba(248,113,113,.4);color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================ TIMELINE / STEPS ============================ */
.steps{position:relative;padding-left:28px}
.steps::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line2)}
.step{position:relative;padding:0 0 18px}
.step:last-child{padding-bottom:0}
.step::before{
  content:'';position:absolute;left:-24px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line2);
}
.step.done::before{background:var(--green);border-color:var(--green)}
.step.now::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(251,191,36,.16)}
.step b{display:block;font-size:14px;margin-bottom:3px}
.step p{font-size:12.5px;color:var(--txt2);line-height:1.55}

/* ============================ TABLE ============================ */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:440px}
th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--txt3);padding:0 10px 9px 0;border-bottom:1px solid var(--line2);white-space:nowrap;
}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:var(--mono);padding-right:0}

/* ============================ SEGMENTED ============================ */
.seg{display:flex;gap:4px;background:var(--bg2);padding:4px;border-radius:12px;border:1px solid var(--line);overflow-x:auto}
.seg button{
  flex:1;padding:8px 12px;border-radius:9px;font-size:12.5px;font-weight:700;
  color:var(--txt3);white-space:nowrap;transition:.15s;
}
.seg button.active{background:var(--surface2);color:var(--txt)}

/* ============================ EMPTY ============================ */
.empty{text-align:center;padding:34px 18px;color:var(--txt3)}
.empty .em{font-size:34px;display:block;margin-bottom:10px;opacity:.65}
.empty p{font-size:13px;line-height:1.6;max-width:320px;margin:0 auto}

/* ============================ ALERT BOX ============================ */
.alert{
  border-radius:14px;padding:14px 16px;font-size:13px;line-height:1.6;
  border:1px solid var(--line2);background:var(--surface2);margin-bottom:14px;
}
.alert b{display:block;margin-bottom:4px;font-size:13.5px}
.alert-bad{border-color:rgba(248,113,113,.35);background:rgba(60,20,26,.35)}
.alert-warn{border-color:rgba(251,191,36,.3);background:rgba(56,42,12,.3)}
.alert-ok{border-color:rgba(74,222,128,.3);background:rgba(16,48,30,.3)}
.alert-info{border-color:rgba(79,140,255,.3);background:rgba(16,30,60,.35)}

/* ============================ WATERFALL ============================ */
.wf{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.wf-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;background:var(--bg2);border:1px solid transparent}
.wf-row.hl{border-color:var(--line2);background:var(--surface2)}
.wf-tag{width:5px;align-self:stretch;border-radius:999px;flex:0 0 5px}
.wf-main{flex:1;min-width:0}
.wf-main b{display:block;font-size:13.5px;font-weight:600}
.wf-main small{font-size:11px;color:var(--txt3)}
.wf-amt{font-family:var(--mono);font-weight:700;font-size:14px;white-space:nowrap}

/* ============================ RESPONSIVE ============================ */
@media (max-width:720px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .hero-num{font-size:38px}
  .view{padding:16px 14px 20px}
  .card{padding:16px}
  .tbl-scroll{margin:0 -16px;padding:0 16px}
  .field-row{grid-template-columns:1fr}
  .advisor{width:100%}
}
@media (max-width:400px){
  .g2{grid-template-columns:1fr}
  .hero-num{font-size:33px}
}
@media (min-width:900px){
  .app{padding-bottom:24px}
  .tabbar{
    position:sticky;top:66px;bottom:auto;
    max-width:1180px;margin:16px auto 0;border-radius:var(--r);
    border:1px solid var(--line);padding:6px;
    background:rgba(27,23,16,.85);
  }
  .tabbar button{flex-direction:row;gap:8px;padding:10px}
  .tabbar button span{font-size:13px}
  .tabbar button.active{background:var(--surface2)}
  .view{padding-top:16px}
}

/* ========================= FLOATING MONEY ========================= */
/* Straight from the Pipeline Progress design: dollar signs drift up the whole
   viewport and each one flares green on its own cycle, so the glows never land
   in sync. Fixed-position at z-index 0 — .app is z-index 1 and paints over it,
   so this needs no involvement from any view. */
.money-rain{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.money-rain i{
  position:absolute; bottom:-14%;
  font-family:var(--mono); font-weight:700; font-style:normal;
  /* Lifted from the design's #a9690f, which was tuned for its light cement
     page and reads as near-black on this app's #141009 ground. */
  color:#c9781a;
  /* Promote to its own layer — 16 of these animating on the main thread would
     be felt on the Pipeline tab, which is already animating the liquid. */
  will-change:transform,opacity;
}

@keyframes billFloat{
  0%{   transform:translate3d(0,0,0) rotate(-10deg); opacity:0; }
  9%{   opacity:.5; }
  86%{  opacity:.26; }
  100%{ transform:translate3d(46px,-118vh,0) rotate(16deg); opacity:0; }
}

/* The glow. Sits dark amber almost the whole cycle, then flares. */
@keyframes billFlash{
  0%,84%,100%{ color:#c9781a; text-shadow:none; }
  88%,96%{
    color:#3dff7a;
    text-shadow:0 0 14px rgba(61,255,122,.85), 0 0 30px rgba(61,255,122,.45);
  }
}

/* Negative delays start each one mid-flight, so the screen is already populated
   on load instead of filling from empty over the first 30 seconds. */
.money-rain i:nth-child(1) { left:3%;  font-size:26px; animation:billFloat 21s linear  -1s infinite, billFlash  9s ease-in-out  -2s infinite; }
.money-rain i:nth-child(2) { left:9%;  font-size:40px; animation:billFloat 28s linear  -9s infinite, billFlash 11s ease-in-out  -6s infinite; }
.money-rain i:nth-child(3) { left:15%; font-size:18px; animation:billFloat 17s linear  -4s infinite, billFlash  8s ease-in-out  -1s infinite; }
.money-rain i:nth-child(4) { left:21%; font-size:33px; animation:billFloat 24s linear -14s infinite, billFlash 13s ease-in-out  -9s infinite; }
.money-rain i:nth-child(5) { left:28%; font-size:22px; animation:billFloat 19s linear  -7s infinite, billFlash 10s ease-in-out  -4s infinite; }
.money-rain i:nth-child(6) { left:34%; font-size:44px; animation:billFloat 31s linear -19s infinite, billFlash 12s ease-in-out  -7s infinite; }
.money-rain i:nth-child(7) { left:41%; font-size:20px; animation:billFloat 16s linear  -2s infinite, billFlash  9s ease-in-out  -5s infinite; }
.money-rain i:nth-child(8) { left:47%; font-size:30px; animation:billFloat 26s linear -11s infinite, billFlash 14s ease-in-out  -3s infinite; }
.money-rain i:nth-child(9) { left:54%; font-size:24px; animation:billFloat 22s linear -16s infinite, billFlash  8s ease-in-out  -6s infinite; }
.money-rain i:nth-child(10){ left:60%; font-size:38px; animation:billFloat 29s linear  -5s infinite, billFlash 11s ease-in-out  -8s infinite; }
.money-rain i:nth-child(11){ left:66%; font-size:19px; animation:billFloat 18s linear -12s infinite, billFlash 10s ease-in-out  -2s infinite; }
.money-rain i:nth-child(12){ left:72%; font-size:35px; animation:billFloat 25s linear -21s infinite, billFlash 13s ease-in-out -10s infinite; }
.money-rain i:nth-child(13){ left:78%; font-size:23px; animation:billFloat 20s linear  -6s infinite, billFlash  9s ease-in-out  -7s infinite; }
.money-rain i:nth-child(14){ left:84%; font-size:42px; animation:billFloat 30s linear -15s infinite, billFlash 12s ease-in-out  -1s infinite; }
.money-rain i:nth-child(15){ left:90%; font-size:21px; animation:billFloat 17s linear -10s infinite, billFlash  8s ease-in-out  -4s infinite; }
.money-rain i:nth-child(16){ left:95%; font-size:28px; animation:billFloat 27s linear -23s infinite, billFlash 15s ease-in-out -11s infinite; }

/* ============================ PIPELINE ============================ */
/* The cement slab. This is where the design's light ground lives — bounded,
   deliberate, and the only light surface in the app. */
.pl{
  position:relative;border-radius:var(--r-lg);padding:26px 24px 30px;color:var(--ink);
  background:
    radial-gradient(140px 100px at 18% 26%,rgba(0,0,0,.045),transparent 62%),
    radial-gradient(180px 130px at 68% 58%,rgba(0,0,0,.05),transparent 62%),
    radial-gradient(120px 90px at 88% 22%,rgba(0,0,0,.04),transparent 62%),
    radial-gradient(160px 120px at 40% 82%,rgba(0,0,0,.045),transparent 62%),
    var(--cement);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6);
}

.pl-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid rgba(0,0,0,.14);padding-bottom:20px;margin-bottom:22px;
}
.pl-kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:8px;
}
.pl-title{
  font-family:var(--cond);font-weight:700;font-size:clamp(30px,5.5vw,44px);line-height:.98;
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink);
}
.pl-sub{color:var(--ink2);font-size:14.5px;margin-top:6px;max-width:520px}
.pl-readout{display:flex;gap:26px;flex-wrap:wrap}
.pl-stat{text-align:right}
.pl-stat span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink3);
}
.pl-stat b{
  font-family:var(--cond);font-weight:700;font-size:23px;text-transform:uppercase;color:#a9690f;
}
.pl-stat b.pl-big{font-family:var(--mono);font-size:32px;line-height:1.1}

/* Live engine numbers, dark cells punched into the slab. */
.pl-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin-bottom:26px}
.pl-cell{background:var(--surface);border-radius:12px;padding:13px 15px}
.pl-cell span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt2);
}
.pl-cell b{display:block;font-size:20px;font-weight:700;margin-top:5px}

.pl-pipe{position:relative;width:100%}
.pl-pipe svg{width:100%;height:auto;display:block;overflow:visible}
/* Three strokes of one geometry: outer casing, steel body, dark bore. */
.pl-case{fill:none;stroke:#211d16;stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.pl-steel{fill:none;stroke:url(#plSteel);stroke-width:40;stroke-linecap:round;stroke-linejoin:round}
.pl-bore{fill:none;stroke:#0f0c07;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.pl-fill{
  fill:none;stroke:url(#plLiquid);stroke-width:24;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(244,168,37,.55));
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
#plMaskPath{transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
/* Travelling highlight, clipped to whatever is actually filled. */
.pl-flow{fill:none;stroke:#fff6df;stroke-width:6;stroke-linecap:round;opacity:.55;animation:plFlow 1.5s linear infinite}
@keyframes plFlow{to{stroke-dashoffset:-24}}

.pl-lamp .pl-halo{fill:#ffbe3d;filter:url(#plGlow);transform-box:fill-box;transform-origin:center;opacity:0}
.pl-lamp.lit .pl-halo{opacity:.85;animation:plPulse 2.6s ease-in-out infinite}
@keyframes plPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.5);opacity:.08}}
.pl-lamp .pl-rim{fill:#26211a;stroke:url(#plSteel);stroke-width:6}
.pl-lamp .pl-core{fill:#3a3124;transition:fill .6s ease}
.pl-lamp .pl-spec{fill:#514631;transition:fill .6s ease}
.pl-lamp.lit .pl-core{fill:#ffcf5e}
.pl-lamp.lit .pl-spec{fill:#fff6df}

/* Labels are HTML, not <text> — the condensed/mono two-line stack is far
   easier here, and they must never capture pointer events. */
.pl-labels{position:absolute;inset:0;pointer-events:none}
.pl-label{position:absolute;white-space:nowrap}
.pl-label b{
  display:block;font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:.02em;
  line-height:1;text-transform:uppercase;color:#8a7f6a;transition:color .6s ease;
}
.pl-label.lit b{color:#a9690f}
.pl-label span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3);margin-top:5px;
}

.pl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:22px}
.pl-card{
  background:var(--surface);border-radius:14px;padding:20px;
  border:1px solid rgba(240,169,43,.1);transition:border-color .6s ease,box-shadow .6s ease;
}
.pl-card.active{border-color:rgba(240,169,43,.3)}
.pl-card.lit{border-color:rgba(255,190,61,.55);box-shadow:0 0 34px rgba(244,168,37,.22)}
.pl-card-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.pl-card-n,.pl-card-st{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt2);
}
.pl-card.lit .pl-card-st{color:var(--green)}
.pl-card.active .pl-card-st{color:var(--amber)}
.pl-card.locked .pl-card-st{color:var(--txt3)}
.pl-card-tag{
  font-family:var(--cond);font-weight:700;font-size:25px;text-transform:uppercase;
  line-height:1;color:var(--txt);
}
.pl-card.lit .pl-card-tag{color:var(--amber)}
.pl-card-blurb{color:var(--txt2);font-size:13px;margin:5px 0 15px}
.pl-gates{display:flex;flex-direction:column;gap:10px}
.pl-gate{display:flex;align-items:flex-start;gap:10px}
.pl-box{
  flex:0 0 auto;width:16px;height:16px;margin-top:3px;border-radius:4px;
  border:1.5px solid rgba(240,169,43,.3);background:transparent;transition:all .5s ease;
}
.pl-gate.done .pl-box{border-color:#f4a825;background:#f4a825;box-shadow:0 0 8px rgba(244,168,37,.7)}
.pl-gate-txt{font-size:13.5px;line-height:1.35;color:var(--txt3);transition:color .5s ease}
.pl-gate.done .pl-gate-txt{color:var(--txt)}
.pl-gate-det{display:block;font-family:var(--mono);font-size:10.5px;color:var(--txt3);margin-top:3px}
.pl-soft{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);
}

@media (max-width:700px){
  .pl{padding:20px 14px 24px}
  .pl-label b{font-size:15px}
  .pl-label span{font-size:9px;letter-spacing:.14em}
  .pl-readout{gap:18px}
}

/* ============================ ADVISOR CHAT ============================ */
.advisor-seg{display:flex;gap:6px;padding:10px 16px 0;flex:0 0 auto}
.advisor-seg button{
  flex:1;padding:8px;border-radius:10px;font-family:var(--cond);font-size:14px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);
  background:var(--surface);border:1px solid var(--line);transition:.15s;
}
.advisor-seg button.on{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.advisor-chat-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.advisor-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chat-intro{color:var(--txt2);font-size:13px;line-height:1.6}
.chat-msg{
  max-width:88%;padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.chat-msg.me{align-self:flex-end;background:var(--surface2);border:1px solid var(--line2);color:var(--txt)}
.chat-msg.advisor{align-self:flex-start;background:#221c13;border:1px solid rgba(255,190,61,.3);color:var(--txt)}
/* Fallback answers are labelled. An offline reply dressed up as the agent
   would be worse than no reply at all. */
.chat-tag{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}
.chat-tools{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--txt3);margin-top:8px;
}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chat-chip{
  border:1px solid rgba(255,190,61,.32);background:transparent;color:var(--amber);
  border-radius:999px;padding:7px 13px;font-size:12.5px;transition:.15s;
}
.chat-chip:hover{background:rgba(255,190,61,.1)}
.chat-compose{
  flex:0 0 auto;display:flex;gap:9px;align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
}
.chat-compose input{
  flex:1;min-width:0;height:42px;padding:0 13px;border-radius:11px;
  border:1px solid var(--line2);background:var(--surface2);color:var(--txt);font-size:14px;
}
.chat-compose input:disabled{opacity:.5}
.chat-compose button{flex:0 0 auto;height:42px}
.chat-typing{display:inline-flex;gap:5px;align-items:center}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:plDot 1.1s ease-in-out infinite}
.chat-typing i:nth-child(2){animation-delay:.16s}
.chat-typing i:nth-child(3){animation-delay:.32s}
@keyframes plDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* Honour the OS setting — the flowing liquid is decoration, not information. */
@media (prefers-reduced-motion:reduce){
  .pl-fill,#plMaskPath{transition:none}
  .pl-flow,.pl-lamp.lit .pl-halo,.chat-typing i{animation:none}
  .money-rain{display:none}
}

/* print */
@media print{
  .topbar,.tabbar,.advisor,.scrim,.modal-wrap,.toast-wrap,.money-rain{display:none !important}
  body{background:#fff;color:#000}
  .card{border-color:#ccc;background:#fff;break-inside:avoid}
}