/* ============================================================
   LOANLEDGER · v5 SYSTEM — canonical stylesheet (ll-v5.css)
   The one token + component base. Dark-first (v5 north star);
   [data-theme="light"] override for app/console (T2/T1) surfaces.
   Import this on every page. Immersion is dialed by surface class,
   not by forking the tokens.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ---------- TOKENS · dark (default, v5) ---------- */
:root{
  /* surfaces */
  --bg:#0f1419;--bg-2:#12171f;--card:#121821;--card-2:#0f151d;--inset:#1a212c;--sunk:#0c1119;
  color-scheme:dark;
  /* ink */
  --ink:#f4f6f8;--text:#c4cad2;--muted:#9aa3b0;--dim:#566173;
  /* brand + spectrum */
  --gold:#e6a52a;--goldHi:#f5c451;
  --green:#3fd08a;--greenHi:#5fe0a0;
  --blue:#3b82f6;--blueHi:#7fb2ff;
  --violet:#b57bff;--violetHi:#c9a3ff;
  --red:#ef5d6a;--redHi:#ff7d88;
  /* product accents (semantic — used across every surface) */
  --ledger:var(--blueHi);--signals:var(--violet);--warden:var(--goldHi);--admin:var(--redHi);
  /* soft tints */
  --gold-soft:rgba(230,165,42,.13);--green-soft:rgba(63,208,138,.13);--red-soft:rgba(239,93,106,.13);
  --blue-soft:rgba(59,130,246,.15);--violet-soft:rgba(181,123,255,.15);
  /* borders */
  --border:#222b38;--border-2:#171e29;--border-strong:rgba(230,165,42,.42);
  --row-hover:rgba(255,255,255,.035);--input-bg:rgba(0,0,0,.28);
  /* type */
  --font:'DM Sans',system-ui,-apple-system,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  /* radius / motion / elevation */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
  --t-fast:130ms;--t-base:220ms;--t-slow:420ms;--ease:cubic-bezier(.22,1,.36,1);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 8px 26px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
  --sh-lg:0 30px 70px -20px rgba(0,0,0,.7);
  --glow-gold:0 0 30px -6px rgba(245,196,81,.5);
  /* gradients */
  --grad-gold:linear-gradient(150deg,#f5c451,#e6a52a 55%,#c07f16);
  --grad-gold-text:var(--grad-gold);
  --sidebar-w:250px;--sidebar-collapsed:66px;--topbar-h:58px;
}
/* ---------- TOKENS · light (T2 app / T1 console) ---------- */
[data-theme="light"]{
  --bg:#e7e9ee;--bg-2:#eef0f4;--card:#ffffff;--card-2:#fbfcfe;--inset:#eceef3;--sunk:#f4f6f9;
  color-scheme:light;
  --ink:#161b22;--text:#39414d;--muted:#69707c;--dim:#9aa2ae;
  --gold:#bf8413;--goldHi:#a87610;
  /* light “hi” goes DARKER (toward ink), never lighter — goldHi is used as text/accents on light surfaces */
  /* product accents — light needs its own ink-weight values (dark's glow golds wash out on light):
     warden = bronze ink, ~4.7:1 on --bg. Literal (not var-chained) so page-level --goldHi overrides can't lighten it.
     admin = the rust ink --red (dark's glow --redHi washes out on light). */
  --warden:#8a5f0d;
  --admin:var(--red);
  --green:#2f8a58;--greenHi:#39a066;
  --blue:#2563eb;--blueHi:#3b7ae0;
  --violet:#7c53d4;--violetHi:#9068e0;
  --red:#c2410c;--redHi:#d6531d;
  --gold-soft:#f5ecdb;--green-soft:#e6f1ea;--red-soft:#f7eae2;
  --blue-soft:#e9eff9;--violet-soft:#efeafa;
  --border:#d5d9e0;--border-2:#e4e7ec;--border-strong:rgba(191,132,19,.4);
  --row-hover:#f6f8fb;--input-bg:#ffffff;
  --sh-sm:0 1px 2px rgba(22,38,61,.05);
  --sh-md:0 4px 14px rgba(22,38,61,.08),0 1px 2px rgba(22,38,61,.05);
  --sh-lg:0 22px 54px rgba(22,38,61,.14);
  --glow-gold:0 6px 18px rgba(191,132,19,.28);
  /* gradient TEXT deepens on light (plate gradients stay bright — they carry espresso ink) */
  --grad-gold-text:linear-gradient(150deg,#b8860f,#96690c 55%,#7a540a);
}

/* ---------- BASE ---------- */
html{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{min-height:100vh;}
.num{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;color:inherit;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:content-box;}
:focus-visible{outline:2px solid var(--goldHi);outline-offset:2px;border-radius:3px;}

/* ---------- TYPE HELPERS ---------- */
.kicker{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.mono-label{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.05;text-wrap:balance;}
.h2{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.12;}
.h3{font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.lead{font-size:1.02rem;color:var(--muted);line-height:1.55;text-wrap:pretty;}
.gold-text{background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- IMMERSION TIERS (surface classes) ---------- */
.tier{border-radius:var(--r-lg);position:relative;overflow:hidden;}
/* T3 — immersive cosmic. FORCED-DARK ISLAND: cosmic surfaces are always dark, so they
   re-pin the ink ladder + gradient text locally — readable in BOTH themes by construction. */
.tier-immersive{background:radial-gradient(120% 90% at 50% -10%,#101826,#080b12 60%);border:1px solid var(--border-2);
  --ink:#f4f6f8;--text:#c4cad2;--muted:#9aa3b0;--dim:#566173;
  --card:#121821;--card-2:#0f151d;--inset:#1a212c;--sunk:#0c1119;
  --border:#222b38;--border-2:#171e29;--row-hover:rgba(255,255,255,.035);
  --goldHi:#f5c451;--gold:#e6a52a;
  --grad-gold-text:linear-gradient(150deg,#f5c451,#e6a52a 55%,#c07f16);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 8px 26px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
  color:var(--text);color-scheme:dark;}
.tier-immersive .starfield{position:absolute;inset:0;pointer-events:none;opacity:.7;}
.tier-immersive .st{position:absolute;border-radius:50%;background:#fff;opacity:var(--o,.5);animation:ll-tw var(--d,3s) ease-in-out infinite alternate;}
@keyframes ll-tw{to{opacity:.15;}}
/* T2 — ambient app */
.tier-ambient{background:var(--bg-2);border:1px solid var(--border-2);}
.tier-ambient::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 15% -10%,rgba(230,165,42,.06),transparent 60%);}
/* T1 — utility console */
.tier-utility{background:var(--sunk);border:1px solid var(--border-2);}
@media(prefers-reduced-motion:reduce){.tier-immersive .st{animation:none;}}

/* ---------- BUTTONS & CTAS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--font);font-weight:600;font-size:.85rem;padding:.6rem 1.05rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);color:var(--text);transition:transform var(--t-fast) var(--ease),border-color var(--t-base),background var(--t-base),box-shadow var(--t-base);white-space:nowrap;box-shadow:var(--sh-sm);}
.btn svg{width:15px;height:15px;}
.btn:hover{transform:translateY(-1px);border-color:var(--border-strong);color:var(--ink);}
.btn:active{transform:translateY(0) scale(.98);}
.btn.primary{background:var(--grad-gold);border-color:transparent;color:#2a1c02;font-weight:700;box-shadow:var(--glow-gold);}
.btn.primary:hover{color:#2a1c02;filter:brightness(1.05);}
.btn.ghost{background:transparent;}
.btn.soft{background:var(--gold-soft);border-color:transparent;color:var(--goldHi);}
.btn.danger{color:var(--red);border-color:transparent;background:var(--red-soft);}
.btn.danger:hover{color:var(--redHi);}
.btn.lg{padding:.8rem 1.5rem;font-size:.96rem;}
.btn.sm{padding:.42rem .75rem;font-size:.78rem;}
.btn .arw{transition:transform var(--t-base) var(--ease);}
.btn:hover .arw{transform:translateX(3px);}
.btn.loading{color:transparent!important;pointer-events:none;position:relative;}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:ll-spin .7s linear infinite;color:var(--ink);}
.link-arw{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.86rem;color:var(--goldHi);cursor:pointer;}
.link-arw .arw{transition:transform var(--t-base) var(--ease);}
.link-arw:hover .arw{transform:translateX(4px);}

/* ---------- CHIPS / TOGGLES / TABS / FILTER ---------- */
.chip{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--border);padding:.34rem .72rem;border-radius:var(--r-pill);cursor:pointer;transition:all var(--t-fast);}
.chip:hover{color:var(--ink);border-color:var(--border-strong);}
.chip.on{color:#2a1c02;background:var(--grad-gold);border-color:transparent;font-weight:700;}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:2px;}
.seg button{font-weight:600;font-size:.8rem;color:var(--muted);background:none;border:none;padding:.42rem .9rem;border-radius:var(--r-pill);transition:all var(--t-fast);}
.seg button.on{background:var(--grad-gold);color:#2a1c02;font-weight:700;}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border-2);}
.tabs a{font-size:.86rem;font-weight:600;color:var(--muted);padding:.6rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all var(--t-fast);}
.tabs a:hover{color:var(--ink);}
.tabs a.on{color:var(--goldHi);border-bottom-color:var(--goldHi);}

/* ---------- INPUTS ---------- */
.field{font-family:var(--font);font-size:.88rem;color:var(--ink);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:.6rem .85rem;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%;}
.field::placeholder{color:var(--dim);}
.field:focus{border-color:var(--goldHi);box-shadow:0 0 0 3px var(--gold-soft);}
.search{position:relative;}
.search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim);}
.search .field{padding-left:2.35rem;}

/* ---------- CARDS ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border-2);}
.card-b{padding:1.1rem 1.25rem;}
.panel{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
/* product card */
.scard{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;overflow:hidden;transition:transform var(--t-base) var(--ease),border-color var(--t-base);box-shadow:var(--sh-md);}
.scard:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--ac,var(--gold)) 55%,transparent);}
.scard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--gold));}
.scard .tag{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ac,var(--gold));}
.scard h3{font-size:1.15rem;font-weight:800;color:var(--ink);margin:.5rem 0 .35rem;letter-spacing:-.01em;}
.scard p{font-size:.88rem;color:var(--muted);line-height:1.55;}
.scard .lk{display:inline-flex;margin-top:1rem;font-weight:700;font-size:.82rem;color:var(--ac,var(--gold));}

/* ---------- KPI TILE ---------- */
.kpi{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:1.15rem 1.3rem;box-shadow:var(--sh-sm);overflow:hidden;}
.kpi::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--ac,var(--gold)),transparent 72%);}
.kpi::after{content:"";position:absolute;top:-34%;right:-12%;width:120px;height:120px;border-radius:50%;background:var(--ac,var(--gold));opacity:.06;filter:blur(22px);}
.kpi .kl{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.kpi .kv{font-family:var(--mono);font-weight:700;font-size:1.8rem;color:var(--ink);margin-top:.45rem;line-height:1;letter-spacing:-.03em;}
.kpi .kv .cur{font-size:1rem;color:var(--dim);font-weight:600;}
.kpi .ks{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.78rem;color:var(--muted);}
.delta{font-family:var(--mono);font-weight:700;font-size:.78rem;}
.delta.up{color:var(--green);}.delta.down{color:var(--red);}

/* ---------- DATA ROWS ---------- */
.lrow{display:flex;align-items:center;gap:1rem;padding:.9rem 1.15rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.lrow.over{border-color:color-mix(in oklab,var(--red) 45%,var(--border));}
.lrow .who{display:flex;flex-direction:column;gap:.15rem;}
.lrow .nm{font-size:.92rem;font-weight:700;color:var(--ink);}
.lrow .nm .id{font-family:var(--mono);font-size:.7rem;color:var(--dim);font-weight:600;}
.lrow .due{font-size:.76rem;color:var(--muted);}
.lrow .due .late{color:var(--red);font-weight:700;}.lrow .due .soon{color:var(--gold);font-weight:700;}
.lrow .amt{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:.96rem;color:var(--ink);}
.lrow .acts{display:flex;gap:.4rem;}
.brow{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:1rem;padding:.9rem 1.15rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.bav{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.74rem;flex:none;}
.bwho{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.bname{font-size:.88rem;font-weight:700;color:var(--ink);}
.baka{font-family:var(--mono);font-size:.62rem;color:var(--gold);font-weight:600;}
.bhandle{font-family:var(--mono);font-size:.68rem;color:var(--dim);}
.bsig{font-size:.72rem;color:var(--muted);text-align:right;line-height:1.3;}
.bout{font-family:var(--mono);font-weight:700;font-size:.88rem;color:var(--ink);text-align:right;}
.btouch{font-size:.66rem;color:var(--dim);text-align:right;}
.bchev{width:18px;height:18px;color:var(--dim);}
/* signal row */
.srow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;padding:.85rem 1.15rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.srow .cnt{display:flex;gap:.5rem;font-family:var(--mono);font-size:.72rem;font-weight:700;}
.srow .cnt .up{color:var(--green);}.srow .cnt .dn{color:var(--red);}
.srow .sub{font-family:var(--mono);font-size:.66rem;color:var(--dim);}

/* ---------- BADGES / PILLS / STAMPS / RISK ---------- */
.badge{display:inline-flex;align-items:center;gap:.32rem;font-size:.66rem;font-weight:700;padding:.2rem .52rem;border-radius:5px;}
.badge .d{width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge.active{color:var(--blueHi);background:var(--blue-soft);}
.badge.repaid{color:var(--green);background:var(--green-soft);}
.badge.overdue{color:var(--red);background:var(--red-soft);}
.badge.late{color:var(--gold);background:var(--gold-soft);}
.pill{font-family:var(--mono);font-size:.6rem;font-weight:700;padding:.14rem .5rem;border-radius:var(--r-pill);}
.pill.due{background:var(--green-soft);color:var(--green);}
.pill.late{background:var(--red-soft);color:var(--red);}
.risk{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;padding:.24rem .58rem;border-radius:var(--r-pill);white-space:nowrap;}
.risk .d{width:6px;height:6px;border-radius:50%;background:currentColor;}
.risk.def{color:var(--red);background:var(--red-soft);}
.risk.flag{color:var(--gold);background:var(--gold-soft);}
.risk.unv{color:var(--muted);background:var(--inset);}
.risk.good{color:var(--green);background:var(--green-soft);}
.stamp{font-family:var(--mono);font-weight:800;font-size:.6rem;letter-spacing:.09em;color:#fff;background:#d23b48;border:1.5px solid #ff7a85;border-radius:5px;padding:.2rem .5rem;text-transform:uppercase;}
.stamp.match{background:linear-gradient(180deg,#ffe49a,#f0a92a);color:#2a1c02;border-color:#ffe49a;}

/* ---------- STATES ---------- */
@keyframes ll-spin{to{transform:rotate(360deg);}}
@keyframes ll-shimmer{100%{background-position:-200% 0;}}
.spinner{width:16px;height:16px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:ll-spin .7s linear infinite;display:inline-block;}
.skel{border-radius:var(--r-sm);background:linear-gradient(100deg,var(--inset) 30%,var(--row-hover) 50%,var(--inset) 70%);background-size:200% 100%;animation:ll-shimmer 1.4s linear infinite;}
.skel-line{height:12px;}.skel-line.lg{height:16px;}.skel-line.sm{height:9px;}
@media(prefers-reduced-motion:reduce){.skel,.spinner{animation-duration:2s;}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1.5rem;}
.empty .ill{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;margin-bottom:1.1rem;background:var(--gold-soft);color:var(--goldHi);}
.empty .ill svg{width:32px;height:32px;}
.empty h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;}
.empty p{font-size:.86rem;color:var(--muted);max-width:42ch;line-height:1.55;margin-bottom:1.2rem;text-wrap:pretty;}

/* ---------- OVERLAYS ---------- */
.annbar{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.6rem 1rem;font-size:.82rem;font-weight:600;color:#2a1c02;background:var(--grad-gold);}
.annbar .link-arw{color:#2a1c02;}
.toast{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--r-sm);box-shadow:var(--sh-lg);font-size:.85rem;color:var(--ink);max-width:340px;}
.toast.warn{border-left-color:var(--gold);}.toast.err{border-left-color:var(--red);}
.modal-scrim{position:absolute;inset:0;background:rgba(4,7,12,.68);backdrop-filter:blur(3px);display:grid;place-items:center;}
.modal{width:min(440px,92%);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;}
.modal .m-b{padding:1.5rem;}
.modal h3{font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em;}
.modal p{font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:1.3rem;}
.modal .m-acts{display:flex;gap:.6rem;justify-content:flex-end;}
.coach{position:relative;background:var(--ink);color:var(--bg);border-radius:var(--r-md);padding:.9rem 1.05rem;max-width:260px;box-shadow:var(--sh-lg);font-size:.82rem;line-height:1.5;}
.coach b{font-weight:800;}
.coach::after{content:"";position:absolute;left:24px;bottom:-7px;width:14px;height:14px;background:var(--ink);transform:rotate(45deg);}

/* ---------- UTILITIES ---------- */
.stack{display:flex;flex-direction:column;gap:.7rem;}
.row-x{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:820px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.grid-3,.grid-4{grid-template-columns:1fr;}}