/* TakaTrack prototype. Visual language inspired by shahriaemon.com: navy ink, cobalt, blueprint grid,
   Bricolage Grotesque display, Hanken Grotesk body, JetBrains Mono labels. */
:root{
  --paper:#f5f6f9; --card:#ffffff; --tint:#eceff6; --tint2:#e3e7f1;
  --ink:#0c1222; --ink2:#3a4256; --ink3:#555d72; --ink4:#666d82; --btn:#1f3fe0; --green-ink:#07714d;
  --rule:rgba(12,18,34,.10); --rule2:rgba(12,18,34,.18);
  --cobalt:#1f3fe0; --cobalt-ink:#1631b8; --wash:#e7ebfd;
  --green:#0b8f63; --green-wash:#e2f4ec; --amber:#a8650c; --amber-wash:#fbf0dd; --red:#c2413a; --red-wash:#fbe8e6;
  --night:#0b1020; --night2:#131a2f; --night-text:#e8ebf5; --night-mute:#a3abc2;
  --grid:rgba(31,63,224,.06); --grid-major:rgba(31,63,224,.10);
  --shadow:0 1px 2px rgba(12,18,34,.04),0 4px 16px rgba(12,18,34,.05);
  --shadow-lg:0 10px 40px rgba(12,18,34,.16),0 2px 6px rgba(12,18,34,.06);
  --r:16px; --r-sm:10px;
  --display:"Bricolage Grotesque","Noto Sans Bengali","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk","Noto Sans Bengali",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0b1020; --card:#131a2f; --tint:#1a2240; --tint2:#212a4c;
  --ink:#e8ebf5; --ink2:#c3c8da; --ink3:#a3abc2; --ink4:#959db4; --btn:#3653ea; --green-ink:#2fc28d;
  --rule:rgba(232,235,245,.09); --rule2:rgba(232,235,245,.18);
  --cobalt:#6b84ff; --cobalt-ink:#93a6ff; --wash:rgba(107,132,255,.16);
  --green:#2fc28d; --green-wash:rgba(47,194,141,.14); --amber:#e3a043; --amber-wash:rgba(227,160,67,.14); --red:#ef6b63; --red-wash:rgba(239,107,99,.14);
  --night:#060a16; --night2:#0e1426;
  --grid:rgba(107,132,255,.05); --grid-major:rgba(107,132,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:400 15px/1.45 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{outline:none}
a{color:var(--cobalt);text-decoration:none}
svg.lucide{width:18px;height:18px;stroke-width:1.9;flex:none}
.num{font-variant-numeric:tabular-nums}
.disp{font-family:var(--display);letter-spacing:-.025em;font-weight:700}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.muted{color:var(--ink3)} .faint{color:var(--ink4)}
.good{color:var(--green)} .bad{color:var(--red)} .warn{color:var(--amber)} .blue{color:var(--cobalt)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row{display:flex;align-items:center;gap:10px;min-width:0}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.grow{flex:1;min-width:0}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.right{text-align:right}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- blueprint ---------- */
.blueprint{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);background-size:16px 16px,16px 16px,80px 80px,80px 80px}

/* ---------- primitives ---------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.pad{padding:16px} .pad-lg{padding:20px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 6px}
.card-hd h3{margin:0;font:700 16px/1.2 var(--display);letter-spacing:-.015em}
.link{display:inline-flex;align-items:center;gap:4px;color:var(--cobalt);font-weight:600;font-size:13px}
.link svg{width:15px;height:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--rule2);background:var(--card);font-weight:600;font-size:14px;white-space:nowrap;transition:transform .12s var(--ease),background .15s,border-color .15s;color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:hover{border-color:var(--ink4)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:#fff;box-shadow:0 4px 14px rgba(31,63,224,.28)}
.btn.primary:hover{background:var(--cobalt-ink)}
:root[data-theme="dark"] .btn.primary:hover{background:#2a45d8}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.btn.danger.solid{background:var(--red);color:#fff;border-color:var(--red)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--tint)}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.xs{height:28px;padding:0 9px;font-size:12px;border-radius:8px;gap:5px}
.btn.xs svg{width:14px;height:14px}
.btn.block{width:100%;height:50px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.iconbtn{width:38px;height:38px;border-radius:11px;display:inline-grid;place-items:center;color:var(--ink2);flex:none}
.iconbtn:hover{background:var(--tint)}
.iconbtn.sm{width:30px;height:30px;border-radius:8px}
.iconbtn.sm svg{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--rule2);background:var(--card);font-size:13px;font-weight:500;white-space:nowrap;color:var(--ink2)}
.chip svg{width:15px;height:15px}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.blue{background:var(--wash);border-color:transparent;color:var(--cobalt-ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.hscroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hscroll::-webkit-scrollbar{display:none}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--rule2);font:500 11px/1 var(--mono);letter-spacing:.03em;color:var(--ink2);background:var(--card);white-space:nowrap}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}
.pill svg{width:13px;height:13px}
.pill.paid{background:var(--green-wash);color:var(--green-ink)}
.pill.due{background:var(--amber-wash);color:var(--amber)}
.pill.overdue{background:var(--red-wash);color:var(--red)}
.pill.ai{background:var(--wash);color:var(--cobalt)}
.pill.neutral{background:var(--tint);color:var(--ink2)}
.ci{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.ci.sm{width:30px;height:30px;border-radius:9px} .ci.sm svg{width:16px;height:16px}
.ci.lg{width:48px;height:48px;border-radius:14px} .ci.lg svg{width:22px;height:22px}
.dotc{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.bar{height:8px;border-radius:999px;background:var(--tint);overflow:hidden;position:relative}
.bar>i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--cobalt);transition:width .5s var(--ease)}
.bar.full>i{background:var(--ink3)} .bar.pace>i{background:var(--amber)} .bar.over>i{background:var(--red)}
.bar .pacemark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber);border-radius:2px}
.kbd{font:500 11px var(--mono);border:1px solid var(--rule2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink3)}
.divider{height:1px;background:var(--rule);margin:0}
.empty{padding:28px 16px;text-align:center;color:var(--ink3)}
.empty svg{width:28px;height:28px;color:var(--ink4);margin-bottom:6px}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font-size:13px;font-weight:600;color:var(--ink2)}
.inp{height:46px;border:1px solid var(--rule2);border-radius:12px;padding:0 14px;background:var(--card);width:100%;min-width:0;transition:border-color .15s,box-shadow .15s;font-size:15px}
.inp:focus,.ta:focus{border-color:var(--cobalt);box-shadow:0 0 0 4px var(--wash)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d6579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.ta{border:1px solid var(--rule2);border-radius:14px;padding:14px;background:var(--card);width:100%;min-height:96px;resize:none;line-height:1.5;font-size:16px}
.hint{font-size:12.5px;color:var(--ink3)}
.amount-inp{display:flex;align-items:baseline;gap:6px;border-bottom:2px solid var(--rule2);padding:4px 0 8px}
.amount-inp:focus-within{border-color:var(--cobalt)}
.amount-inp span{font:700 30px var(--display);color:var(--ink3)}
.amount-inp input{border:0;background:transparent;font:700 44px/1.1 var(--display);letter-spacing:-.03em;width:100%;min-width:0;padding:0}
.seg{display:flex;background:var(--tint);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;height:36px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--ink3);white-space:nowrap;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px}
.seg button svg{width:15px;height:15px}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(12,18,34,.12)}
.switch{width:46px;height:28px;border-radius:999px;background:var(--rule2);position:relative;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch.on{background:var(--green)} .switch.on::after{transform:translateX(18px)}
.selchip{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 28px 0 10px;border-radius:10px;border:1px solid var(--rule2);background:var(--card);font-size:13px;font-weight:600;max-width:100%;color:var(--ink)}
.selchip svg{width:15px;height:15px;color:var(--ink3)}
.selchip select,.selchip input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;font-size:16px}
.selchip::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);transform:translateY(-70%) rotate(45deg)}
.selchip.btnchip::after{display:none}
.selchip.warn{border-color:var(--amber);background:var(--amber-wash)}
.grid-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gp-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;border:1px solid transparent;font-size:11.5px;font-weight:600;color:var(--ink2);text-align:center;line-height:1.2}
.gp-item.on{border-color:var(--c,var(--cobalt));background:color-mix(in srgb,var(--c,var(--cobalt)) 8%,var(--card))}
.gp-item span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:30px;height:30px;border-radius:50%;background:var(--c);border:3px solid var(--card);box-shadow:0 0 0 1px var(--rule2)}
.swatch.on{box-shadow:0 0 0 2px var(--ink)}
.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.iconpick button{height:42px;border-radius:11px;display:grid;place-items:center;color:var(--ink2);border:1px solid var(--rule)}
.iconpick button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.alias{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 6px 0 10px;border-radius:999px;background:var(--tint);font-size:13px}
.alias button{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:var(--ink3)}
.alias button svg{width:13px;height:13px}
.alias-add{height:28px;border:1px dashed var(--rule2);border-radius:999px;padding:0 10px;background:transparent;font-size:13px;width:120px}

/* ---------- list rows ---------- */
.lrow{display:flex;align-items:center;gap:12px;padding:11px 16px;min-width:0;position:relative;width:100%;text-align:left}
.lrow+.lrow{border-top:1px solid var(--rule)}
button.lrow:hover,.lrow.click:hover{background:color-mix(in srgb,var(--tint) 60%,transparent)}
.lrow .t{font-weight:600;font-size:15px}
.lrow .s{font-size:12.5px;color:var(--ink3)}
.lrow .amt{font:700 16px var(--display);letter-spacing:-.01em;white-space:nowrap}
.dayhd{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 6px;position:sticky;top:0;z-index:2;background:var(--paper)}
.selbox{width:22px;height:22px;border-radius:7px;border:1.6px solid var(--rule2);display:grid;place-items:center;flex:none;background:var(--card);color:transparent}
.selbox svg{width:15px;height:15px}
.selbox.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* ---------- hero (night card) ---------- */
.hero{position:relative;overflow:hidden;border-radius:22px;color:var(--night-text);background:var(--night);padding:20px;border:1px solid #1b2340}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(107,132,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(107,132,255,.09) 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(120deg,#000 0%,transparent 75%);pointer-events:none}
.hero::after{content:"";position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(31,63,224,.55),transparent 65%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .mono{color:var(--night-mute)}
.hero .big{font:700 46px/1 var(--display);letter-spacing:-.035em;margin:8px 0 6px;color:#fff}
.hero .sub{color:var(--night-mute);font-size:14px}
.hero .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(232,235,245,.12)}
.hero .stats b{display:block;font:700 17px var(--display);color:#fff;letter-spacing:-.01em}
.hero .stats b.neg{color:#ff8d86}
.hero .hbar{height:8px;border-radius:999px;background:rgba(232,235,245,.12);overflow:hidden;margin-top:16px;display:flex}
.hero .hbar i{display:block;height:100%;background:linear-gradient(90deg,#4f6bff,#8aa0ff)}
.hero .hbar i.carry{background:#ff8d86}

/* ---------- toast / overlay / sheets ---------- */
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:90;background:var(--ink);color:var(--paper);border-radius:14px;padding:11px 12px 11px 16px;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);transition:all .3s var(--ease);pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast button{color:#8aa0ff;font-weight:700;font-size:14px}
:root[data-theme="dark"] .toast button{color:var(--cobalt)}
.scrim{position:absolute;inset:0;background:rgba(6,10,22,.42);z-index:60;opacity:0;animation:fadein .2s var(--ease) forwards}
@keyframes fadein{to{opacity:1}}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-radius:24px 24px 0 0;max-height:92%;display:flex;flex-direction:column;animation:sheetup .32s var(--ease);box-shadow:var(--shadow-lg)}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--rule2);margin:8px auto 2px;flex:none}
.sheet-hd{display:flex;align-items:center;gap:8px;padding:8px 12px 10px 20px;flex:none}
.sheet-hd h2{margin:0;font:700 20px/1.2 var(--display);letter-spacing:-.02em;flex:1;min-width:0}
.sheet-bd{overflow-y:auto;padding:4px 20px 20px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch}
.sheet-ft{padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);display:flex;gap:10px;flex:none;background:var(--card)}
.sheet.full{top:0;max-height:none;border-radius:0}

/* ---------- AI review cards ---------- */
.rv{border:1px solid var(--rule);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--card);animation:rvin .35s var(--ease) both}
.rv.check{border-color:color-mix(in srgb,var(--amber) 55%,transparent);background:color-mix(in srgb,var(--amber-wash) 50%,var(--card))}
.rv.off{opacity:.5}
@keyframes rvin{from{opacity:0;transform:translateY(8px)}}
.rv .amt-edit{font:700 24px var(--display);letter-spacing:-.02em;border:0;background:transparent;width:120px;text-align:right;padding:0;border-bottom:1px dashed var(--rule2)}
.rv .quote{font-size:12.5px;color:var(--ink3);font-style:italic}
.note{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;border-radius:12px;padding:10px 12px;background:var(--wash);color:var(--cobalt-ink)}
.note svg{width:16px;height:16px;margin-top:1px}
.note.warn{background:var(--amber-wash);color:var(--amber)} .note.bad{background:var(--red-wash);color:var(--red)} .note.good{background:var(--green-wash);color:var(--green)}
.shimmer{height:120px;border-radius:16px;background:linear-gradient(100deg,var(--tint) 30%,var(--card) 50%,var(--tint) 70%);background-size:300% 100%;animation:sh 1.1s linear infinite}
@keyframes sh{from{background-position:100% 0}to{background-position:0 0}}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--cobalt);animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- budget editor ---------- */
.bl-edit{display:grid;grid-template-columns:auto minmax(0,1fr) 130px auto;grid-template-areas:"move name amt del" "move cats cats del";column-gap:10px;row-gap:6px;align-items:center;padding:12px 16px}
.bl-edit+.bl-edit{border-top:1px solid var(--rule)}
.bl-edit .inp{height:40px}
.bl-edit .amt{text-align:right;font:700 15px var(--display)}
.bl-move{grid-area:move;display:flex;flex-direction:column}
.bl-name{grid-area:name;min-width:0} .bl-amt{grid-area:amt} .bl-cats{grid-area:cats;min-width:0} .bl-del{grid-area:del}
[data-mode="mobile"] .bl-edit{grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"name amt" "cats cats" "move del";padding:14px 14px}
[data-mode="mobile"] .bl-move{flex-direction:row;gap:2px}
[data-mode="mobile"] .bl-del{justify-self:end}
.bl-total{position:sticky;z-index:5;box-shadow:var(--shadow-lg)}
.catmap{display:flex;flex-wrap:wrap;gap:5px}
.catmap .chip{height:26px;font-size:12px;padding:0 9px}
.vline{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--rule2);font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--card)}
.vchip.on{background:var(--wash);color:var(--cobalt-ink);border-color:transparent}
.option{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--rule2);border-radius:14px;text-align:left;width:100%}
.option.on{border-color:var(--cobalt);background:color-mix(in srgb,var(--wash) 55%,var(--card))}
.option .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--rule2);flex:none;margin-top:1px}
.option.on .radio{border:6px solid var(--cobalt)}

/* ---------- card visual ---------- */
.ccard{position:relative;border-radius:18px;padding:18px;color:#fff;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.ccard::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(200deg,#000,transparent 70%)}
.ccard>*{position:relative}
.ccard .mono{color:rgba(255,255,255,.7)}
.ccard .cn{font:700 20px var(--display);letter-spacing:-.01em}
.ccard .num4{font:500 13px var(--mono);letter-spacing:.14em;opacity:.85}

/* ---------- chat ---------- */
.bubble{max-width:88%;padding:12px 14px;border-radius:16px;font-size:14.5px;line-height:1.5}
.bubble.me{align-self:flex-end;background:var(--cobalt);color:#fff;border-bottom-right-radius:6px}
.bubble.ai{align-self:flex-start;background:var(--card);border:1px solid var(--rule);border-bottom-left-radius:6px}
.bubble.ai p{margin:0 0 8px} .bubble.ai p:last-child{margin:0}
.bubble.ai ul{margin:4px 0 8px;padding-left:18px}

/* ====================================================================== */
/* MOBILE                                                                  */
/* ====================================================================== */
.m-stage{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:56px;padding:32px}
.m-aside{max-width:300px}
.m-aside h1{font:700 40px/1.02 var(--display);letter-spacing:-.035em;margin:14px 0 12px}
.m-aside h1 em{font-style:normal;color:var(--cobalt)}
.m-aside p{color:var(--ink2);margin:0 0 16px}
.m-aside ul{padding:0;margin:0 0 20px;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink2)}
.m-aside li{display:flex;gap:8px;align-items:flex-start}
.m-aside li svg{width:16px;height:16px;color:var(--cobalt);margin-top:2px}
.device{position:relative;width:392px;height:848px;border-radius:56px;background:#05070f;padding:12px;box-shadow:0 30px 80px rgba(12,18,34,.28),0 0 0 2px #20263a inset;flex:none}
.device::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:118px;height:34px;border-radius:20px;background:#05070f;z-index:100}
.screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--paper);isolation:isolate}
.statusbar{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 34px;font:600 15px var(--body);z-index:50;pointer-events:none;color:var(--ink)}
.statusbar .sb-r{display:flex;gap:6px;align-items:center}
.statusbar svg{width:16px;height:16px}
.m-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:50px 0 108px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-scroll::-webkit-scrollbar{display:none}
.m-head{display:flex;align-items:center;gap:10px;padding:10px 16px 12px}
.m-head h1{margin:0;font:700 28px/1.1 var(--display);letter-spacing:-.03em;flex:1;min-width:0}
.m-head .back{margin-left:-8px}
.m-body{padding:0 16px;display:flex;flex-direction:column;gap:14px}
.monthsw{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:3px;box-shadow:var(--shadow)}
.monthsw button{height:30px;min-width:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink2)}
.monthsw button:hover{background:var(--tint)}
.monthsw .ml{padding:0 8px;font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:88px;padding:8px 10px 26px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:40;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--rule)}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink4)}
.tabbar button svg{width:23px;height:23px;stroke-width:1.8}
.tabbar button.on{color:var(--cobalt)}
.tabbar .fab{width:54px;height:54px;border-radius:18px;background:var(--cobalt);color:#fff;display:grid;place-items:center;margin:-22px auto 0;box-shadow:0 8px 22px rgba(31,63,224,.45)}
.tabbar .fab svg{width:26px;height:26px;stroke-width:2.2}
.quick{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:16px;background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);width:100%;text-align:left}
.quick .ph{flex:1;color:var(--ink4);font-size:14.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.quick .go{width:36px;height:36px;border-radius:11px;background:var(--cobalt);color:#fff;display:grid;place-items:center}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:8px 2px -4px}
.sec-title h2{margin:0;font:700 18px var(--display);letter-spacing:-.02em}
.searchbox{display:flex;align-items:center;gap:8px;height:44px;border-radius:13px;background:var(--card);border:1px solid var(--rule);padding:0 12px;flex:1;min-width:0}
.searchbox input{border:0;background:transparent;flex:1;min-width:0;font-size:15px;height:100%}
.searchbox svg{color:var(--ink4)}
.bulkbar{position:absolute;left:10px;right:10px;bottom:24px;z-index:45;background:var(--ink);color:var(--paper);border-radius:18px;padding:10px;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-lg);animation:sheetup .25s var(--ease)}
.bulkbar .cnt{font-weight:700;padding:0 6px;flex:1;font-size:14px;white-space:nowrap}
.bulkbar button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;padding:4px 7px;border-radius:10px;color:var(--paper)}
.bulkbar button svg{width:19px;height:19px}
.bulkbar button:hover{background:rgba(255,255,255,.1)}
.menu-row{display:flex;align-items:center;gap:12px;padding:13px 16px;width:100%;text-align:left}
.menu-row+.menu-row{border-top:1px solid var(--rule)}
.menu-row .t{font-weight:600}
.menu-row .chev{color:var(--ink4)}
.menu-row:hover{background:var(--tint)}
.chainlink{display:flex;align-items:center;justify-content:center;gap:6px;font:500 11.5px var(--mono);color:var(--red);padding:2px 0}
.chainlink svg{width:14px;height:14px}

/* real phone: drop the frame */
@media (max-width:540px){
  .m-stage{padding:0;display:block}
  .m-aside{display:none}
  .device{width:100%;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:var(--paper)}
  .device::before{display:none}
  .screen{border-radius:0}
  .statusbar{display:none}
  .m-scroll{padding-top:env(safe-area-inset-top)}
  .tabbar{height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
}
@media (max-width:1000px) and (min-width:541px){ .m-aside{display:none} }

/* ====================================================================== */
/* DESKTOP                                                                 */
/* ====================================================================== */
.d-app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;position:relative}
.d-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid var(--rule);background:var(--card)}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--cobalt);color:#fff;display:grid;place-items:center;font:700 19px var(--display);box-shadow:0 4px 12px rgba(31,63,224,.35)}
.brand b{font:700 19px var(--display);letter-spacing:-.025em}
.d-add{display:flex;align-items:center;gap:10px;height:42px;border-radius:12px;background:var(--cobalt);color:#fff;font-weight:600;padding:0 12px;margin-bottom:16px;box-shadow:0 6px 18px rgba(31,63,224,.28)}
.d-add .kbd{margin-left:auto;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35)}
.d-nav{display:flex;flex-direction:column;gap:2px}
.d-nav .mono{padding:14px 10px 6px}
.d-nav button{display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border-radius:10px;font-weight:500;font-size:14px;color:var(--ink2);text-align:left}
.d-nav button svg{color:var(--ink3)}
.d-nav button:hover{background:var(--tint)}
.d-nav button.on{background:var(--wash);color:var(--cobalt-ink);font-weight:700}
.d-nav button.on svg{color:var(--cobalt)}
.d-nav .cnt{margin-left:auto;font:500 11px var(--mono);color:var(--ink4)}
.d-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--rule)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1f3fe0,#0b1020);color:#fff;display:grid;place-items:center;font:700 14px var(--display);flex:none}
.d-main{min-width:0;display:flex;flex-direction:column}
.d-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:16px 32px;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.d-top h1{margin:0;font:700 26px/1.1 var(--display);letter-spacing:-.03em}
.d-top .crumb{font-size:13px;color:var(--ink3);margin-top:2px}
.d-search{display:flex;align-items:center;gap:8px;height:40px;width:300px;border-radius:12px;border:1px solid var(--rule);background:var(--card);padding:0 12px;color:var(--ink4);font-size:14px}
.d-search input{border:0;background:transparent;flex:1;min-width:0;height:100%}
.d-content{padding:24px 32px 48px;max-width:1440px;width:100%}
.d-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.d-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{padding:16px}
.kpi .v{font:700 26px/1.1 var(--display);letter-spacing:-.03em;margin-top:8px}
.kpi .s{font-size:12.5px;color:var(--ink3);margin-top:4px}
.hero.d .big{font-size:58px}
.lines-d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.line-d{padding:14px 16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px;text-align:left;width:100%}
.line-d:nth-child(odd){border-right:1px solid var(--rule)}
.line-d:hover{background:color-mix(in srgb,var(--tint) 55%,transparent)}
/* data grid */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fbtn{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--rule2);background:var(--card);font-size:13px;font-weight:600;color:var(--ink2)}
.fbtn.on{border-color:var(--cobalt);color:var(--cobalt-ink);background:var(--wash)}
.fbtn svg{width:15px;height:15px}
.fbtn select{position:absolute;inset:0;opacity:0;cursor:pointer}
.grid-wrap{overflow:clip}
table.dg{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}
.dg th{position:sticky;top:var(--toph,82px);z-index:5;background:var(--tint);text-align:left;font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:0 10px;height:38px;border-bottom:1px solid var(--rule2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none}
.dg th.sort{cursor:pointer}
.dg th.sort:hover{color:var(--ink)}
.dg th.sorted{color:var(--cobalt)}
.dg th svg{width:12px;height:12px;vertical-align:-1px}
.dg td{height:46px;padding:0 10px;border-bottom:1px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--card)}
.dg tr:hover td{background:color-mix(in srgb,var(--tint) 50%,var(--card))}
.dg tr.sel td{background:color-mix(in srgb,var(--wash) 70%,var(--card))}
.dg tr.cursor td:first-child{box-shadow:inset 3px 0 0 var(--cobalt)}
.dg td.ed{cursor:text}
.dg td.ed:hover{box-shadow:inset 0 0 0 1px var(--rule2);border-radius:6px}
.dg td.editing{padding:4px 6px;box-shadow:none}
.dg .cell{height:36px;width:100%;border:1.5px solid var(--cobalt);border-radius:8px;padding:0 8px;background:var(--card);font-size:13.5px;box-shadow:0 0 0 4px var(--wash)}
.dg tfoot td{background:var(--tint);font-weight:700;border-bottom:0;height:44px}
.dg .amt{text-align:right;font:700 14.5px var(--display);letter-spacing:-.005em}
.dg .rowact{opacity:0;transition:opacity .15s}
.dg tr:hover .rowact{opacity:1}
.bulk-d{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--ink);color:var(--paper);animation:fadein .2s}
.bulk-d .btn{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.22);height:32px;font-size:13px}
.bulk-d .btn:hover{background:rgba(255,255,255,.1)}
.bulk-d select{color:var(--ink)}
.modal{position:absolute;z-index:70;left:50%;top:7vh;transform:translateX(-50%);width:min(760px,calc(100% - 48px));max-height:86vh;display:flex;flex-direction:column;background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);animation:modalin .25s var(--ease);border:1px solid var(--rule)}
.modal.wide{width:min(1040px,calc(100% - 48px))}
.modal.narrow{width:min(520px,calc(100% - 48px))}
@keyframes modalin{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.98)}}
.modal .sheet-hd{padding:16px 16px 12px 24px;border-bottom:1px solid var(--rule)}
.modal .sheet-bd{padding:20px 24px}
.modal .sheet-ft{padding:14px 24px;border-radius:0 0 22px 22px}
.d-app .scrim,.d-app .toast{position:fixed}
.d-app .toast{bottom:28px}
.d-app .modal{position:fixed}
.chart-bars{display:flex;align-items:flex-end;gap:18px;height:200px;padding:10px 4px 0}
.cb-grp{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.cb-pair{display:flex;align-items:flex-end;gap:5px;height:100%;width:100%;justify-content:center}
.cb-pair i{display:block;width:22px;border-radius:6px 6px 2px 2px}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* auth */
.auth-m{position:absolute;inset:0;overflow-y:auto;padding:84px 24px 40px;display:flex;flex-direction:column;gap:18px}
.auth-mark{width:52px;height:52px;border-radius:15px;background:var(--cobalt);color:#fff;display:grid;place-items:center;font:700 28px var(--display);box-shadow:0 10px 24px rgba(31,63,224,.35)}
.auth-m h1,.auth-d h1{font:700 32px/1.08 var(--display);letter-spacing:-.035em;margin:0}
.auth-m .lead,.auth-d .lead{color:var(--ink2);margin:6px 0 0}
.auth-d{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-d .art{background:var(--night);color:var(--night-text);padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-d .art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(107,132,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(107,132,255,.08) 1px,transparent 1px);background-size:22px 22px}
.auth-d .art>*{position:relative}
.auth-d .art h2{font:700 52px/1.02 var(--display);letter-spacing:-.04em;margin:0;color:#fff}
.auth-d .art h2 em{font-style:normal;color:#8aa0ff}
.auth-d .form{display:grid;place-items:center;padding:48px}
.auth-d .form>div{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px}
.mailmock{border:1px solid var(--rule);border-radius:16px;padding:16px;background:var(--card);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.proto-flag{position:fixed;right:14px;bottom:14px;z-index:200;font:500 11px var(--mono);letter-spacing:.05em;background:var(--card);border:1px solid var(--rule2);border-radius:999px;padding:6px 12px;color:var(--ink3);display:flex;gap:8px;align-items:center;box-shadow:var(--shadow)}
.proto-flag a{color:var(--cobalt)}
@media (max-width:540px){ .proto-flag{display:none} }
.side-flag{font:500 10.5px/1.5 var(--mono);letter-spacing:.03em;color:var(--ink4);padding:10px 10px 12px;display:flex;gap:6px;align-items:flex-start}
.side-flag svg{width:13px;height:13px;margin-top:1px}

/* ---------- audit fixes ---------- */
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:6px}
.inp:focus-visible,.ta:focus-visible,.dg .cell:focus-visible{outline:none}
.searchbox:focus-within,.d-search:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 4px var(--wash)}
.selchip:focus-within,.fbtn:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--wash)}
.dg td.ed:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
.dg th.sort:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
:root[data-theme="dark"] .ci{color:color-mix(in srgb,var(--c) 50%,#fff);background:color-mix(in srgb,var(--c) 28%,transparent)}
:root[data-theme="dark"] .dotc{background:color-mix(in srgb,var(--c) 60%,#fff)}
.bar.zero>i{background:var(--ink4)}
.sheet-top{height:50px;flex:none}
.sheet-hd h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-ft{flex-wrap:wrap}
.sheet-ft .btn{flex:1 1 auto;min-width:0}
.sheet-ft>.grow{flex:1 1 0}
.rv .amt-edit{width:96px}
.bm-inline{display:none;margin-right:2px}
.iconbtn[disabled]{opacity:.3;pointer-events:none}
@media (max-width:380px){ .sheet-hd .seg button svg{display:none} .sheet-hd .seg button{padding:0 6px} .sheet-hd{padding-left:16px} .sheet-bd{padding-left:16px;padding-right:16px} .sheet-ft{padding-left:16px;padding-right:16px} }
/* mobile tap targets */
[data-mode="mobile"] .monthsw button{height:40px;min-width:40px}
[data-mode="mobile"] .link.tap{min-height:44px;padding:0 8px;margin:-10px -8px}
[data-mode="mobile"] .catmap .chip{height:34px;font-size:12.5px}
[data-mode="mobile"] .iconbtn.sm{width:38px;height:38px}
[data-mode="mobile"] .bl-total{bottom:0!important}
@media (max-width:540px){ .sheet-top{height:env(safe-area-inset-top)} }
/* desktop at smaller widths */
@media (max-width:1279px){
  .d-app{grid-template-columns:76px minmax(0,1fr)}
  .d-side{padding:18px 10px;align-items:stretch}
  .brand{justify-content:center;padding:2px 0 18px} .brand b{display:none}
  .d-add{font-size:0;justify-content:center;padding:0} .d-add svg{margin:0} .d-add .kbd{display:none}
  .d-nav button{font-size:0;justify-content:center;padding:0} .d-nav button svg{margin:0} .d-nav .mono,.d-nav .cnt{display:none}
  .d-nav{gap:4px}
  .side-flag{display:none}
  .d-user{justify-content:center;padding:6px;border:0} .d-user .grow,.d-user>svg{display:none}
  .d-grid{grid-template-columns:minmax(0,1fr) 320px}
  .lines-d{grid-template-columns:1fr} .line-d:nth-child(odd){border-right:0}
}
@media (max-width:1179px){
  .dg .c-bm{display:none} .bm-inline{display:inline-flex}
  .d-content{padding:20px 24px 40px} .d-top{padding:14px 24px}
  .toolbar .hint{display:none}
}
@media (max-width:1100px){ .d-grid{grid-template-columns:minmax(0,1fr) 300px} .d-search{width:220px} }
@media (max-width:380px){ .hide-xs{display:none} }

/* layout fixes: no dead space on desktop, no cramped numbers on mobile */
.sumgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sumgrid>div{min-width:0}
.sumgrid .disp{white-space:nowrap}
[data-mode="mobile"] .sumgrid{grid-template-columns:1fr 1fr;gap:14px 12px}
[data-mode="mobile"] .sumgrid>:last-child{grid-column:1/-1}
[data-mode="mobile"] .sumgrid .disp{font-size:22px!important}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.flushgrid{gap:0}
.flushgrid>.lrow{border-top:1px solid var(--rule)}
.flushgrid>.lrow:nth-child(-n+2){border-top:0}
.flushgrid>.lrow:nth-child(odd){border-right:1px solid var(--rule)}
.minibars{display:flex;align-items:flex-end;gap:10px;height:110px}
.minibars .mb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.minibars i{display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px}
.minibars span{font:500 10.5px var(--mono);color:var(--ink3)}
.d-content{max-width:none}
@media (max-width:1100px){ .grid2{grid-template-columns:1fr} }

/* ---------- real app shell ---------- */
.device.app-full{width:100%;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:var(--paper)}
.device.app-full::before{display:none}
.app-full .screen{border-radius:0}
.app-full .m-scroll{padding-top:env(safe-area-inset-top)}
.app-full .tabbar{height:calc(64px + env(safe-area-inset-bottom));padding:6px 10px env(safe-area-inset-bottom)}
.app-full .tabbar .fab{margin-top:-14px}
.app-full .auth-m{padding-top:calc(env(safe-area-inset-top) + 48px);max-width:460px;margin:0 auto}
.app-full .sheet-top{height:env(safe-area-inset-top)}
.app-full .bulkbar{bottom:calc(14px + env(safe-area-inset-bottom))}
.app-full .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
.syncpill{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));z-index:300;background:var(--ink);color:var(--paper);font:600 12.5px var(--body);border-radius:999px;padding:7px 14px;box-shadow:var(--shadow-lg)}
.side-flag:empty{display:none}