:root{
  /* CLEAR GLASS ON BLACK (item 80 recolor, §5ag — Francisco's order
     Oct 16, supersedes phase 2's warm-charcoal palette on color; the
     glass directive itself stands). Reference: his Muse-app
     screenshot — true BLACK page, CLEAR translucent glass (content
     faintly visible through the surfaces), WHITE text, BLUE action
     buttons, floating glass pill tab bar. Glass values chosen to
     read CLEAR on black: white-tinted translucent fills (cards
     white .07, strong surfaces white .11) with the family blur
     (18px) + saturate (1.35) and a soft white rim. The warm glass
     of phase 2 and the cream encouragement cards (§5ad) are
     RETIRED; the encouragement surfaces wear the same clear glass
     as everything else. BLUE (#0a84ff, ACE's send blue) stays the
     action color; alarm reds stay in the CLAY family, in glass. */
  --bg:#000000; --card:rgba(255,255,255,.07); --card-solid:#1d1d20;
  --line:rgba(255,255,255,.10); --gold:#d4a94e; --gold2:#f2cd7e;
  --txt:#ffffff; --dim:#a1a1a6; --green:#5fc97e; --red:#dd7a5c; --blue:#0a84ff;
  --glass:rgba(255,255,255,.07); --glass-strong:rgba(255,255,255,.11);
  --glass-line:rgba(255,255,255,.14); --input:rgba(255,255,255,.09);
  --track:rgba(255,255,255,.14); --gold-tint:rgba(212,169,78,.14); --clay:#c05a38;
  /* Clean-face glow tokens (item 45, §5n): ONE gold family for every glow in
     the app — laser lines, lit bars, focus rings. Soft = ambient halo,
     line = the thin bright core of a laser line. Never introduce a second
     glow color per element; status colors keep their own (green/red). */
  --glow-soft:rgba(212,169,78,.16); --glow-mid:rgba(212,169,78,.38); --glow-line:rgba(242,205,126,.85);
  --glow-green:rgba(95,201,126,.45); --glow-red:rgba(221,122,92,.45);
  --laser:linear-gradient(90deg,transparent,var(--glow-line),transparent);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; font-size:16px; line-height:1.5;
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(255,255,255,.05), transparent 60%),
    var(--bg)}
/* Safe area (phone-found fix, Oct 16): viewport-fit=cover + the
   translucent status bar let content slide UNDER the iPhone clock,
   battery, and Dynamic Island — the KINU wordmark rendered beneath
   the time. Every view lives inside .wrap, so the top padding
   carries env(safe-area-inset-top): nothing in the app can ever
   sit under the status bar again, on any device (inset is 0 where
   there is no notch/island). */
.wrap{max-width:520px; margin:0 auto; padding:calc(20px + env(safe-area-inset-top)) 16px 96px}
.hidden{display:none!important}
h2{font-size:1.35rem; margin:.4em 0 .7em} h3{font-size:1rem; margin:1.35em 0 .55em; color:var(--gold2); letter-spacing:.01em}
.dim{color:var(--dim)} .small{font-size:.82rem} .center{text-align:center}
.brand{font-size:1.6rem; font-weight:800; letter-spacing:.14em; text-align:center; margin:.6em 0}
.brand.sm{font-size:1.05rem; margin:0; text-align:left}
.brand-paw{color:var(--gold); vertical-align:-5px}
.brand.sm .brand-paw{vertical-align:-4px}
.topbar{display:flex; justify-content:flex-end; align-items:center; margin-bottom:10px; position:relative; min-height:26px}
/* The wordmark sits CENTERED in the header bar (his ask, Oct 16),
   fully below the safe area — the month rides at the right. */
.topbar .brand.sm{position:absolute; left:50%; transform:translateX(-50%); margin:0}
.card{background:var(--card); border:1px solid var(--glass-line); border-radius:16px; padding:16px; margin:12px 0}
/* The glass treatment (ACE face / Muse app): every card-like surface is
   CLEAR translucent glass — backdrop blur + saturate, a soft white rim
   on the border, an inset top highlight, and a low shadow. */
.card,.catrow,.billrow,.debtcard,.goalrow,.pick,.billform,.debtform{
  -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -18px rgba(0,0,0,.55)}
.hero{text-align:center; position:relative; overflow:hidden; box-shadow:0 10px 30px -18px var(--glow-mid)}
.hero::before{content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--laser); box-shadow:0 0 10px 1px var(--glow-mid)}
.bignum{font-size:2.4rem; font-weight:800; margin:.1em 0; text-shadow:0 0 22px var(--glow-soft)}
.bignum.neg{color:var(--red)} .bignum.pos{color:var(--green)}
/* mascot */
.mascot-card{display:flex; gap:14px; align-items:center}
#mascot-card{position:relative; overflow:hidden}
.mascot-face{line-height:1; position:relative; flex:0 0 auto; transition:filter .3s}
.mascot-face .outfit{position:absolute; top:-14px; right:-6px; font-size:.68rem; font-weight:700; letter-spacing:.03em; color:var(--gold2); background:var(--card-solid); border:1px solid var(--gold); border-radius:20px; padding:3px 9px; white-space:nowrap; z-index:3}
.mood-happy{animation:bounce 1s ease infinite}
.mood-celebrate{animation:spinbounce 1.2s ease infinite}
.mood-sad{filter:grayscale(.7) brightness(.75)}
.mood-note{animation:nod 2s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spinbounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes nod{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.bubble{background:var(--glass-strong); border:1px solid var(--glass-line); border-radius:14px; padding:10px 12px; font-size:.92rem; flex:1;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3)}
/* OFFLINE BAR (Crucible #5, §5ap) — shown only while Kinu serves the
   saved on-phone copy: sticky above every view, in the clay glass
   family (it is a "take care" notice, not an error), no emoji. */
.offline-bar{position:sticky; top:calc(6px + env(safe-area-inset-top)); z-index:30; margin:8px 10px 0;
  background:rgba(133,62,36,.34); border:1px solid rgba(201,111,74,.55); color:#f8d9c2; border-radius:14px; padding:10px 14px; font-size:.88rem;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3)}
/* PROTECT CASH — alarm reds desaturated toward clay, in glass (phase 2) */
.protect-banner{background:rgba(133,62,36,.34); border:1px solid rgba(201,111,74,.55); color:#f8d9c2; border-radius:14px; padding:12px 14px; margin-bottom:10px; font-size:.9rem;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3)}
.protect-warn{background:rgba(133,62,36,.34); border:1px solid rgba(201,111,74,.55); color:#f8d9c2; border-radius:12px; padding:10px 12px; margin:10px 0; font-size:.88rem;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3)}
/* waterfall */
.wfrow{display:flex; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--line); font-size:.93rem}
.wfrow:last-child{border-bottom:none}
.wfrow b{font-weight:700}
.wfrow.hero{background:rgba(38,66,44,.45); border:1px solid rgba(95,201,126,.4); border-radius:10px; padding:10px 12px; margin-top:8px}
.wfrow.hero b{color:var(--green)}
.card.mission{border-color:var(--gold); background:rgba(212,169,78,.13); display:flex; gap:10px; align-items:center; box-shadow:0 8px 26px -16px var(--glow-mid)}
.mission-ic{color:var(--gold); flex:0 0 auto; display:flex}
.pet .outfit.dimmed{filter:grayscale(1); opacity:.35}
/* real guide art — turnaround sheets are law, never alter their look */
.guide{position:relative; width:104px; height:104px; flex:0 0 auto; cursor:pointer;
  animation:guidesway 5.5s ease-in-out infinite; transform-origin:50% 92%}
@keyframes guidesway{0%,100%{rotate:-2.2deg}50%{rotate:2.2deg}}
.guide-breathe{width:100%; height:100%; animation:guidebreathe 3.2s ease-in-out infinite}
@keyframes guidebreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.guide-img{width:100%; height:100%; object-fit:contain; display:block;
  animation:guideblink 5s infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
@keyframes guideblink{0%,91%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.93)}}
.guide .outfit{position:absolute; top:-10px; right:-10px; z-index:2; font-size:.68rem; font-weight:700; letter-spacing:.03em; color:var(--gold2);
  background:var(--card-solid); border:1px solid var(--gold); border-radius:20px;
  padding:4px 10px; display:flex; align-items:center; justify-content:center; white-space:nowrap}
.guide .outfit.dimmed{filter:grayscale(1); opacity:.35}
.guide.guide-sad .guide-img{filter:grayscale(.65) brightness(.8) drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.guide.tap-happy{animation:guidehappy .55s ease 2}
@keyframes guidehappy{0%,100%{transform:translateY(0) scale(1) rotate(0)}40%{transform:translateY(-14px) scale(1.07) rotate(-3deg)}}
.mood-alert .guide{animation:guidesway 5.5s ease-in-out infinite, guidealert .8s ease infinite}
@keyframes guidealert{0%,100%{margin-left:0}25%{margin-left:-3px}75%{margin-left:3px}}
.heart-pop{position:absolute; left:50%; top:-6px; font-size:1.3rem; animation:heartup 1.1s ease-out forwards; pointer-events:none}
@keyframes heartup{0%{transform:translate(-50%,0) scale(.6); opacity:0}25%{opacity:1}100%{transform:translate(-50%,-46px) scale(1.15); opacity:0}}
/* celebration confetti — automatic, fires once per celebration arrival */
.confetti{position:absolute; top:30%; width:8px; height:12px; border-radius:2px; z-index:5; pointer-events:none; animation:confall 1.7s ease-in forwards}
@keyframes confall{0%{transform:translateY(-8px) rotate(0); opacity:1}100%{transform:translateY(110px) rotate(540deg); opacity:0}}
/* dual-companion mode (admin): Rex + Mochi side by side, sibling dynamic */
#mascot-face.duo{display:flex; gap:12px; align-items:flex-end; justify-content:center}
#mascot-face.duo .guide{width:78px; height:78px}
#mascot-face.duo.mood-celebrate, #mascot-face.duo.mood-happy, #mascot-face.duo.mood-note{animation:none}
#mascot-face.duo.mood-celebrate .guide{animation:spinbounce 1.2s ease infinite}
#mascot-face.duo.mood-happy .guide{animation:bounce 1s ease infinite}
#mascot-face.duo.mood-note .guide{animation:nod 2s ease infinite}
#mascot-face.duo.mood-sad .guide{filter:grayscale(.7) brightness(.75)}
#mascot-face.duo .guide{transition:translate .8s ease}
#mascot-face.duo .duo-nuzzle-l{translate:16px 0}
#mascot-face.duo .duo-nuzzle-r{translate:-16px 0}
#mascot-face.duo .duo-bow{animation:duobow 1.4s ease}
@keyframes duobow{0%,100%{transform:translateY(0)}35%{transform:translateY(10px) scaleY(.93)}}
#mascot-face.duo .duo-look{animation:duolook 1.2s ease}
@keyframes duolook{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(7deg)}}
.banter{margin:5px 0; line-height:1.45}
.banter .who{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; border-radius:8px; padding:1px 8px; margin-right:6px}
.banter .who.rex{background:rgba(212,169,78,.15); color:var(--gold2)}
.banter .who.mochi{background:rgba(227,184,200,.13); color:#e3b8c8}
/* accounts (Plaid) */
.rowline{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 2px}
.acct-card{display:flex; align-items:center; gap:12px}
.acct-ic{color:var(--gold2); display:flex; align-items:center; flex:0 0 auto}
.acct-main{flex:1; min-width:0}
.acct-name{font-weight:700}
.acct-bal{text-align:right; font-weight:700}
.txn-row{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line)}
.txn-main{flex:1; min-width:0}
.txn-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* live projections (item 47): plain-words line under an account or on
   Home — a thin gold laser accent (item-45 glow family), nothing more */
.proj-note{font-size:.82rem; line-height:1.5; color:var(--dim); border-left:2px solid var(--glow-line); padding:2px 0 2px 10px; margin:6px 2px 10px}
.acct-proj{margin:-4px 14px 12px 14px}
.txn-amt{font-weight:700}
.txn-amt.out{color:#e8e8ea}
.txn-amt.in{color:#8fce6e}
.pill{font-size:.68rem; font-weight:700; letter-spacing:.04em; border-radius:20px; padding:2px 9px; white-space:nowrap}
.pill.pend{background:rgba(212,169,78,.16); color:var(--gold2)}
.pill.proc{background:rgba(46,84,52,.45); color:#8fce6e}
/* legacy layered CSS pet — retired in favor of real art (kept selectors harmless) */
.pet{display:none}
.mood-alert{border-color:rgba(201,111,74,.6)!important}
/* categories */
.catrow{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0}
.catrow .e{width:42px; height:42px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--gold-tint); border:1px solid var(--gold); border-radius:12px; color:var(--gold2); font-weight:800; font-size:1.05rem}
.catrow .nm{flex:1} .catrow .nm b{display:block}
.bar{height:7px; background:var(--track); border-radius:4px; margin-top:6px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,#3f9d5f,var(--green)); border-radius:4px; box-shadow:0 0 8px var(--glow-green)}
.bar i[style*="--gold"]{background:linear-gradient(90deg,#b8892f,var(--gold2)); box-shadow:0 0 8px var(--glow-mid)}
.bar.over i{background:linear-gradient(90deg,var(--clay),var(--red)); box-shadow:0 0 8px var(--glow-red)}
.bar.debtbar{height:9px}
.bar.debtbar i{background:linear-gradient(90deg,#b8892f,var(--gold2)); box-shadow:0 0 10px var(--glow-mid)}
/* free-to-spend budget bars (item 79): the fill is what's LEFT of the
   category's budget — it drains as he spends. Green plenty, yellow
   low, red nearly gone, empty track at zero; over budget = empty
   bar with a red outline. Status colors keep the §5n glow family. */
.spendrow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:11px; font-size:.95rem}
.spendname{font-weight:600}
.spendamt{color:var(--dim); font-size:.88rem; white-space:nowrap}
.spendamt.over{color:var(--red); font-weight:700}
.spendbar{height:9px; background:var(--track); border:1px solid transparent; border-radius:5px; margin-top:5px; overflow:hidden}
.spendbar i{display:block; height:100%; border-radius:5px}
.spendbar.ok i{background:linear-gradient(90deg,#3f9d5f,var(--green)); box-shadow:0 0 8px var(--glow-green)}
.spendbar.low i{background:linear-gradient(90deg,#b8892f,#e8c766); box-shadow:0 0 8px rgba(232,199,102,.45)}
.spendbar.crit i{background:linear-gradient(90deg,var(--clay),var(--red)); box-shadow:0 0 8px var(--glow-red)}
.spendbar.empty i{background:transparent}
.spendbar.over{border-color:var(--red); box-shadow:0 0 10px var(--glow-red)}
.spendbar.over i{background:transparent}
.amt{font-weight:700; white-space:nowrap}
.amt.over{color:var(--red)} .amt.ok{color:var(--green)}
/* bills */
.billrow{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0}
.billrow .when{margin-left:auto; text-align:right; font-size:.85rem}
.billrow.paid{opacity:.55}
.pill{font-size:.72rem; padding:3px 9px; border-radius:20px; background:var(--glass-strong); color:var(--dim)}
.pill.soon{background:rgba(212,169,78,.16); color:var(--gold2)}
.pill.now{background:rgba(150,70,42,.45); color:#f2b294}
/* forms */
label{display:block; margin:12px 0 4px; font-size:.9rem; color:var(--dim)}
/* Glass inputs (phase 2, recolored §5ag): a clear translucent fill
   over the black page, never a solid block. The phone's own
   keyboard can't be skinned; page-side surfaces carry the glass. */
input,select,textarea{width:100%; background:var(--input); border:1px solid var(--glass-line); color:var(--txt); border-radius:12px; padding:13px; font-size:16px; font-family:inherit;
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--glow-soft), 0 0 12px var(--glow-soft)}
/* Glass buttons (phase 2, recolored §5ag): standard buttons are clear
   glass; the ACTION button (class .gold in the markup — Ask Kinu's
   Ask, Log's Save, approve-step, sign-in, connect) is BLUE glass,
   ACE's send blue. Gold stays the brand/selection color (chips,
   seg, glows — §5n). */
.btn{background:var(--glass-strong); color:var(--txt); border:1px solid var(--glass-line); border-radius:12px; padding:13px 18px; font-size:1rem; font-weight:600; cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn.gold{background:linear-gradient(180deg,#0a84ff,#0071e3); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px -8px rgba(10,132,255,.55)}
.btn.big{width:100%; margin-top:14px; font-size:1.1rem}
.btn.danger{background:rgba(150,70,42,.4); color:#f2b294; border-color:rgba(201,111,74,.5); width:100%; margin-top:20px}
.rowform{display:flex; gap:8px; margin:10px 0} .rowform input{flex:1} .rowform .btn{flex:0 0 auto}
.seg{display:flex; background:var(--glass-strong); border:1px solid var(--glass-line); border-radius:12px; overflow:hidden; margin:8px 0;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3)}
.seg button{flex:1; background:none; border:none; color:var(--dim); padding:12px; font-size:1rem; font-weight:600}
.seg button.on{background:var(--gold); color:#000000; box-shadow:0 4px 14px -6px var(--glow-mid)}
.chiprow{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0}
.chip{background:var(--input); border:1px solid var(--glass-line); color:var(--txt); border-radius:20px; padding:9px 14px; font-size:.95rem;
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3)}
.chip.on{background:var(--gold); color:#000000; border-color:var(--gold); font-weight:700; box-shadow:0 4px 14px -6px var(--glow-mid)}
/* plan */
.planline{display:flex; justify-content:space-between; padding:10px 2px; border-bottom:1px solid var(--line); font-size:.98rem}
.planline b{font-size:1.02rem}
.debtcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0}
.debtcard .top{display:flex; justify-content:space-between; font-weight:700}
.apr{background:rgba(150,70,42,.45); color:#f2b294; border-radius:8px; padding:2px 8px; font-size:.8rem}
.goalrow{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0}
.goalrow .top{display:flex; justify-content:space-between; align-items:center}
/* setup */
.stepdots{text-align:center; color:var(--dim); font-size:.85rem; margin-bottom:8px}
.bigpick{display:flex; gap:12px; margin:14px 0}
.pick{flex:1; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:18px 8px; text-align:center; font-size:1rem; color:var(--txt)}
.pick .big{font-size:3rem; display:block; margin-bottom:6px}
.pick-img{width:88px; height:88px; object-fit:contain; display:block; margin:0 auto 8px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.pick.on{border-color:var(--gold); background:var(--gold-tint); box-shadow:0 10px 28px -14px var(--glow-mid)}
.billform,.debtform{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0}
.billform .grid{display:grid; grid-template-columns:1fr 1fr 70px; gap:8px}
.debtform .grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mini{font-size:.8rem; padding:7px 10px}
/* tabbar */
/* Tab bar (§5ag): a FLOATING clear-glass pill, like the Muse app in
   his screenshot — inset from the screen edges, rounded, rimmed,
   floating over the black page on a low shadow. */
#tabbar{position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:flex; background:rgba(22,22,25,.68); -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35); border:1px solid var(--glass-line); border-radius:26px; padding:8px 6px; z-index:10; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px -12px rgba(0,0,0,.7)}
#tabbar::before{content:""; position:absolute; top:-1px; left:14%; right:14%; height:1px; background:var(--laser); opacity:.5; pointer-events:none; border-radius:2px}
#tabbar button{flex:1; background:none; border:none; color:var(--dim); font-size:1.3rem; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; padding-top:4px}
#tabbar button span{font-size:.68rem}
#tabbar button.on{color:var(--gold)}
#tabbar button.on svg{filter:drop-shadow(0 0 6px var(--glow-mid))}
#tabbar button.on::before{content:""; position:absolute; top:-5px; left:24%; right:24%; height:2px; border-radius:2px; background:var(--gold2); box-shadow:0 0 10px 1px var(--glow-mid), 0 0 3px var(--glow-line)}
/* Log is a verb, not a place (layout build): the center tab is a
   raised BLUE circle — the one strong action color in the bar,
   matching the Muse-app reference he approved. */
#tabbar button.tab-log .fab{width:46px; height:46px; border-radius:50%; background:linear-gradient(180deg,#2f9bff,#0a84ff); color:#fff; display:flex; align-items:center; justify-content:center; margin-top:-24px; border:1px solid rgba(255,255,255,.28); box-shadow:0 10px 22px -8px rgba(10,132,255,.65), inset 0 1px 0 rgba(255,255,255,.35)}
#tabbar button.tab-log.on::before{left:34%; right:34%}
.entryrow{display:flex; gap:8px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:.92rem; align-items:center}
.entryrow .a{margin-left:auto; font-weight:700}
.a.out{color:var(--red)} .a.in{color:var(--green)}
.no-motion .guide-breathe{animation:none}

/* ---------- icons + facts UI (design law, Oct 15) ---------- */
.ic{vertical-align:-4px; flex:0 0 auto}
.catrow .e{color:var(--gold); display:flex; align-items:center}
.catrow .e .ic{width:26px; height:26px}
.e-inline{color:var(--gold); margin-right:2px}
.e-inline .ic{vertical-align:-5px}
.entryrow .e{color:var(--gold); display:flex; align-items:center}
.card.mission .ic{color:var(--gold)}
.acct-ic{color:var(--gold); display:flex; align-items:center; font-size:1rem}
.acct-ic .ic{width:30px; height:30px}
.acct-hero{color:var(--gold)}
.acct-hero .ic{width:44px; height:44px}
.outfit-badge{position:absolute; top:-12px; right:-8px; z-index:2; width:34px; height:34px; border-radius:50%; background:var(--gold-tint); border:1px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center}
.outfit-badge .star-ic{width:18px; height:18px}
.outfit-badge.dimmed{filter:grayscale(1); opacity:.35}
.goalrow .top .outfit-badge{position:static; width:26px; height:26px}
.goalrow .top .outfit-badge .star-ic{width:14px; height:14px}
.fin-h{font-size:.95rem; margin:16px 0 6px; color:var(--gold2)}
.finrow{display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.finrow:last-child{border-bottom:none}
.finrow.sub{padding:6px 2px 6px 14px; border-bottom:1px dashed var(--line)}
.split-panel{padding:10px 2px 12px; border-bottom:1px solid var(--line)}
.acct-ghead{display:flex; align-items:center; gap:10px; margin:16px 2px 8px}
.acct-gname{font-weight:700; font-size:1.02rem}
.acct-gtotal{margin-left:auto; font-weight:700}
.acct-ghead .btn{margin-left:8px}
.fin-main{flex:1; min-width:180px}
.fin-freq{width:auto; flex:0 0 auto; padding:9px 10px; font-size:.92rem}
.fin-desig{width:auto; max-width:100%; padding:7px 9px; font-size:.9rem}
.guide{cursor:default}
/* Audit build (Oct 15): data-age stamps. (The per-item explanation
   link styles that lived here were removed with the links themselves
   in item 66 — no such element renders anywhere anymore.) */
.age-warn{color:var(--gold2); font-weight:600}
.age-bad{color:var(--red); font-weight:700}
/* Ask Kinu (item 51) */
.ask-headline{font-weight:700; font-size:1.05rem; margin-top:10px}
.ask-headline.ask-yes{color:var(--green)}
.ask-headline.ask-no{color:var(--gold2)}
.ask-line{margin:6px 0 0; line-height:1.55}
.ask-answer:empty{margin:0}
/* Companion completeness (item 46): guide strip on every main screen,
   earned-accessory chips, Recovery Quest steps. Same calm card system —
   one gold glow family, no new hues. */
.companion-strip{display:flex; gap:12px; align-items:center}
.companion-strip .mascot-face{display:flex; gap:8px}
.companion-strip .guide{width:56px; height:56px}
.companion-strip .mascot-face.duo .guide{width:48px; height:48px}
.strip-main{flex:1; min-width:0}
.strip-line{line-height:1.45; margin-top:2px}
.acc-card h3 .ic{color:var(--gold)}
.acc-row{display:flex; flex-wrap:wrap; gap:8px}
.acc-chip{display:inline-flex; align-items:center; gap:6px; background:var(--gold-tint); border:1px solid var(--gold); color:var(--gold2); border-radius:20px; padding:5px 11px; font-size:.85rem; font-weight:600}
.acc-chip .star-ic{width:14px; height:14px; color:var(--gold)}
.acc-chip.dimmed{filter:grayscale(1); opacity:.45}
.acc-mini{margin-top:6px; display:flex; flex-wrap:wrap; gap:6px}
.acc-mini .acc-chip{font-size:.75rem; padding:3px 9px}
.quest-card{border-color:var(--gold)}
.quest-steps{margin:10px 0 0; padding-left:22px; line-height:1.6}
.quest-steps li{margin:5px 0}
/* Win streak dots (item 80 phase 5): gold = a win week, open = a
   rest week. There is deliberately no third state — a streak here
   can pause, never break, so no dot ever reads as a failure. */
.streak-dots{display:flex; gap:7px; align-items:center}
.streak-dot{width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28); background:transparent; flex:none}
.streak-dot.win{background:linear-gradient(180deg,var(--gold2),var(--gold)); border-color:var(--gold); box-shadow:0 0 8px var(--glow-mid)}
.streak-dot.current{outline:1.5px solid rgba(255,255,255,.35); outline-offset:2px}
/* Advice — the mentor card (item 43) */
.advice-title{font-weight:700; font-size:1.02rem; margin:2px 0 6px}
.advice-body{margin:0 0 8px; line-height:1.55; font-size:.95rem}
.advice-src{margin:0 0 10px}
/* Two-view signals (item 60 + 60-AMEND): one dot, one plain sentence.
   Bank = coverage (pay vs bills + debts); Plan = balance (every cent
   has a job). Status colors keep their own glow (§5n family). */
.signal-card{display:flex; gap:12px; align-items:flex-start}
.signal-dot{width:12px; height:12px; border-radius:50%; flex:0 0 auto; margin-top:5px}
.signal-dot.ok{background:var(--green); box-shadow:0 0 10px var(--glow-green)}
.signal-dot.bad{background:var(--red); box-shadow:0 0 10px var(--glow-red)}
/* Paced recommendation steps (item 67): one calm card, the same gold
   family — the active step gets the gold edge, a finished step the
   green edge. No new hues, no badges, no blast styling. */
.rec-card{border-color:var(--gold)}
.rec-done-card{border-color:rgba(95,201,126,.45)}
/* Login gate — the front door (item 62): same laser-line treatment as
   the hero card, one gold family, no decoration beyond it. */
.gate-card{position:relative; overflow:hidden}
.gate-card::before{content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--laser); box-shadow:0 0 10px 1px var(--glow-mid)}
.gate-or{display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:var(--dim); font-size:.82rem}
.gate-or::before,.gate-or::after{content:""; flex:1; height:1px; background:var(--line)}

/* Month story (item 74): plain stacked lines inside the story card. */
.storyline{padding:3px 2px; line-height:1.55; font-size:.98rem}

/* ---------- ENCOURAGEMENT SURFACES (item 80 recolor, §5ag) ----------
   The cream glass of §5ad is RETIRED. The encouragement surfaces —
   the Month Story card, the recommended-step card, the companion
   strip, the mascot card — wear the SAME clear glass as every other
   card (the shared .card glass rule above), with white primary text
   and neutral grey dim text inherited from the base tokens. Their
   identity is carried by their gold/green edge classes (.rec-card /
   .rec-done-card / .quest-card) and the laser/glow family, not by a
   separate palette. Rex/Mochi art untouched. */

/* ---------- layout groups (item 80 layout build) ----------
   Plan's five groups and Manage's groups share one quiet header:
   small, letterspaced, dim — a signpost, never a card. The danger
   header carries the clay-red family. The Details fold is a glass
   card whose summary reads as its title; it starts shut. */
.grouphead{font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin:26px 2px 10px}
.grouphead.danger-head{color:var(--red)}
.built-details>summary{cursor:pointer; font-weight:600; color:var(--txt); padding:2px 0; list-style:none}
.built-details>summary::-webkit-details-marker{display:none}
.built-details>summary::after{content:"Show"; float:right; font-size:.78rem; font-weight:400; color:var(--blue)}
.built-details[open ]>summary::after{content:"Hide"}
.stack-context{margin:0 2px 10px}

/* ---------- FIGURE TIERS + RING + CHANGE STRIP (layout round 2) ----------
   One type hierarchy for money figures (Coin Part D + Advisor's hero
   discipline): Tier 0 hero ~44px, ONE per view (Bank: the accounts
   total; Plan: the cushion ring's center; Debts: the debt-free DAY —
   Log and Manage get none). Tier 1 card leads ~25px, Tier 2 row
   figures ~17px, Tier 3 deltas dim. Tabular numerals on every money
   figure, so columns align and a settling figure never jitters.
   Story prose numbers stay text size (§5aa) — untouched. */
.fig-hero{font-size:2.75rem; font-weight:800; line-height:1.08; font-variant-numeric:tabular-nums}
.fig-hero .cents{font-size:55%; font-weight:700; vertical-align:.85em}
.fig-lead{font-size:1.55rem; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums}
.fig-row{font-size:1.08rem; font-weight:600; font-variant-numeric:tabular-nums}
.fig-delta{font-size:.82rem; font-weight:500; color:var(--dim); font-variant-numeric:tabular-nums}
.planline b,.acct-bal,.txn-amt,.amt,.wfrow b,.spendamt,.acct-gtotal,.billrow .when,.debtcard .top{font-variant-numeric:tabular-nums}
.acct-bal,.txn-amt{font-size:1.08rem}
/* The settle: a changed figure counts from its last filed value to
   its new filed value, once, ~800ms, with a soft neutral glow — the
   same glow whether the number rose or fell; red never appears. */
.fig-settle{animation:figsettle .9s ease-out}
@keyframes figsettle{0%{text-shadow:0 0 16px rgba(255,255,255,.5)}100%{text-shadow:0 0 0 rgba(255,255,255,0)}}
/* The cushion hero ring: green laser arc (the app's own progress
   green, #3f9d5f -> #5fc97e — the .spendbar.ok gradient) with a
   brighter dot riding the arc's leading edge. The ring is the
   feeling; the exact dollars in its center are the fact. */
.ring-card{position:relative; overflow:hidden}
.ring-wrap{position:relative; width:164px; height:164px; margin:4px auto 2px}
.ring-svg{display:block; filter:drop-shadow(0 0 6px var(--glow-green))}
.ring-dot{filter:drop-shadow(0 0 5px rgba(228,255,239,.95))}
.ring-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none}
.ring-closed .ring-svg{animation:ringpulse 1.2s ease-out 1}
@keyframes ringpulse{0%{filter:drop-shadow(0 0 4px var(--glow-green))}40%{filter:drop-shadow(0 0 24px rgba(95,201,126,.9))}100%{filter:drop-shadow(0 0 6px var(--glow-green))}}
/* "Since you were last here": one slim strip, shown only when filed
   data actually changed, read once, then gone. Information, not
   decoration — it survives reduced motion; the animations don't. */
.strip-card{border-color:rgba(95,201,126,.38)}
/* PHASE 6 — the goal ladder: one row per rung. The rung being stood
   on carries the compact 46px ring; future rungs are greyed but
   named — a hollow marker, dimmed text, no invented numbers. */
.ladder-row{display:flex; gap:12px; align-items:flex-start; padding:8px 0; border-top:1px solid rgba(255,255,255,.07)}
.ladder-row:first-of-type{border-top:none}
.ladder-mark{flex:0 0 46px; width:46px; height:46px; display:flex; align-items:center; justify-content:center}
.ladder-dot{width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.18); display:block}
.ladder-main{flex:1; min-width:0; padding-top:2px}
.ladder-row.is-after .ladder-main b{color:var(--dim)}
/* ---------- HOME front door + story sections (simplification pass, Oct 19, 2026) ---------- */
.qhead{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.qhead h3{margin:0}
.qhead .ic{color:var(--gold2); flex:0 0 auto}
.handledline{display:flex; gap:9px; margin-top:11px; line-height:1.55}
.handledline>div{min-width:0}
.handledcheck{color:var(--green); flex:0 0 auto; margin-top:2px; display:flex}
.protect-inline{margin-top:12px; background:rgba(133,62,36,.34); border:1px solid rgba(201,111,74,.55); color:#f8d9c2; border-radius:12px; padding:10px 12px; font-size:.9rem; line-height:1.55}
.storyhead{font-size:.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold2); margin:16px 2px 2px}
@media (prefers-reduced-motion: reduce){
  .fig-settle,.ring-closed .ring-svg{animation:none}
}