/* ============================================================
   Yanu Control — "Private Wealth Terminal"
   Dark, premium, hairline. No generic AI gradients.
   ============================================================ */
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#0a0b0e; --bg2:#0d0f13; --panel:#14161d; --panel2:#191c24; --raise:#1f232c;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --ink:#eef1f6; --muted:#99a2b2; --faint:#69707e;
  --gold:#e7b24e; --gold2:#f2c879; --goldsoft:rgba(231,178,78,.12);
  --teal:#39d3be; --green:#62d28d; --red:#f47169; --redsoft:rgba(244,113,105,.12);
  --font:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  --r:14px; --r2:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.45; letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(231,178,78,.10), transparent 60%),
    radial-gradient(700px 500px at -6% 8%, rgba(57,211,190,.07), transparent 55%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--goldsoft)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100dvh}
.rail{
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:6px;
  padding:22px 16px;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),rgba(13,15,19,.4));
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px}
.brand .mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;
  color:#1a1407;background:linear-gradient(150deg,var(--gold2),var(--gold));
  box-shadow:0 6px 20px -8px rgba(231,178,78,.6); font-size:17px;
}
.brand b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.brand span{display:block;font-size:11px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav-link{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r2);
  color:var(--muted);font-size:14px;font-weight:500;border:1px solid transparent;position:relative;transition:.18s;
}
.nav-link svg{width:19px;height:19px;flex:none;opacity:.85}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.nav-link.active{color:var(--ink);background:var(--panel);border-color:var(--line)}
.nav-link.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:3px;background:var(--gold)}
.rail .spacer{flex:1}
.usercard{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel)}
.usercard .av{width:30px;height:30px;border-radius:50%;background:var(--goldsoft);color:var(--gold2);display:grid;place-items:center;font-weight:700;font-size:13px;border:1px solid var(--line2)}
.usercard .who{flex:1;min-width:0}
.usercard .who small{display:block;font-size:11px;color:var(--faint)}
.usercard .who b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);transition:.18s}
.iconbtn:hover{color:var(--ink);border-color:var(--line2);background:rgba(255,255,255,.04)}
.iconbtn svg{width:16px;height:16px}

/* ---------- Main ---------- */
.main{min-width:0;padding:28px 30px 64px;max-width:1180px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.topbar h1{font-size:24px;font-weight:700;letter-spacing:-.03em}
.topbar p{color:var(--faint);font-size:13px;margin-top:3px}
.topbar .now{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;border:1px solid var(--line);padding:7px 11px;border-radius:9px;background:var(--panel)}
.view{display:none;animation:rise .35s cubic-bezier(.2,.7,.2,1)}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Panels / grid ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.panel-h h3{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.panel-b{padding:18px}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}

/* ---------- Hero (finance) ---------- */
.hero{position:relative;background:
  radial-gradient(120% 140% at 100% 0%, rgba(231,178,78,.10), transparent 55%),var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:24px 26px;overflow:hidden;margin-bottom:16px}
.hero .lbl{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.hero .big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(34px,6vw,52px);font-weight:500;letter-spacing:-.03em;margin:8px 0 2px;line-height:1}
.hero .big .cur{color:var(--gold2);font-size:.5em;font-weight:500;margin-right:.28em;vertical-align:.18em}
.hero .sub{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:13px}
.hero .delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12.5px;padding:3px 9px;border-radius:99px;border:1px solid var(--line2)}
.hero .delta.up{color:var(--green);background:rgba(98,210,141,.08)}
.hero .spark{position:absolute;right:0;bottom:0;width:55%;max-width:420px;height:90px;opacity:.9;pointer-events:none}
.hero .spark path.line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(231,178,78,.4))}
.hero .spark path.fill{fill:url(#sg);opacity:.5}

/* ---------- KPI ---------- */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;transition:.2s}
.kpi:hover{border-color:var(--line2);transform:translateY(-2px)}
.kpi .t{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;margin-bottom:10px}
.kpi .t .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.kpi .t .dot.teal{background:var(--teal)}.kpi .t .dot.red{background:var(--red)}.kpi .t .dot.green{background:var(--green)}
.kpi .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:24px;font-weight:500;letter-spacing:-.03em}
.kpi .v small{color:var(--faint);font-size:13px;margin-right:3px}

/* ---------- Table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;color:var(--faint);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:0 14px 11px}
.tbl td{padding:12px 14px;border-top:1px solid var(--line)}
.tbl tr:first-child td{border-top:0}
.tbl tbody tr{transition:.15s}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.02em}
.tbl .amt.in{color:var(--green)} .tbl .amt.out{color:var(--red)}
.tbl .meta{color:var(--faint);font-size:12px}
.empty{padding:34px 14px;text-align:center;color:var(--faint);font-size:13px}
.empty svg{width:30px;height:30px;opacity:.4;margin-bottom:8px;display:block;margin-inline:auto}
.tbl .rowdel{text-align:right;width:1%;white-space:nowrap}
.iconbtn.del{width:28px;height:28px;opacity:.55}
.iconbtn.del:hover{opacity:1;color:var(--red);border-color:var(--redsoft);background:var(--redsoft)}
.tbl tbody tr .iconbtn.del{visibility:hidden}
.tbl tbody tr:hover .iconbtn.del{visibility:visible}

/* ---------- Pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:500;border:1px solid var(--line2);color:var(--muted)}
.pill.ok{color:var(--green);background:rgba(98,210,141,.09);border-color:rgba(98,210,141,.25)}
.pill.gold{color:var(--gold2);background:var(--goldsoft);border-color:rgba(231,178,78,.3)}
.pill.dim{color:var(--faint)}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border-radius:10px;
  font-size:13.5px;font-weight:500;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);transition:.18s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:var(--line2);background:var(--raise);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.primary{background:linear-gradient(150deg,var(--gold2),var(--gold));color:#1a1407;border-color:transparent;font-weight:700;box-shadow:0 8px 24px -10px rgba(231,178,78,.7)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:var(--redsoft)}
.btn.danger:hover{background:var(--redsoft)}
.btn.sm{padding:7px 11px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Fields ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:12.5px;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);
  font-family:inherit;font-size:14px;transition:.15s;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldsoft)}
.field.mono input{font-family:var(--mono)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Sheet / modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(4,5,7,.66);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.22s;z-index:40}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:50;top:0;right:0;height:100dvh;width:min(440px,100%);background:var(--bg2);border-left:1px solid var(--line2);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.sheet.show{transform:none}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.sheet-h h3{font-size:16px;font-weight:700}
.sheet-b{padding:22px;overflow:auto;flex:1}
.sheet-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px}

/* ---------- LLM provider rows ---------- */
.prov{display:flex;align-items:center;gap:14px;padding:15px 18px;border-top:1px solid var(--line)}
.prov:first-child{border-top:0}
.prov .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--muted);flex:none}
.prov .ic svg{width:18px;height:18px}
.prov .info{flex:1;min-width:0}
.prov .info b{font-size:14px;font-weight:500}
.prov .info small{display:block;color:var(--faint);font-size:12px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prov.on{background:linear-gradient(90deg,var(--goldsoft),transparent 60%)}

/* ---------- Vault cards ---------- */
.vault{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:.2s}
.vcard:hover{border-color:var(--line2);transform:translateY(-2px)}
.vcard .top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.vcard .logo{width:36px;height:36px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--gold2)}
.vcard .top b{font-size:14px}.vcard .top small{display:block;color:var(--faint);font-size:12px}
.vcard .acts{display:flex;gap:7px;margin-top:13px}

/* ---------- Toast / skeleton ---------- */
.toasts{position:fixed;z-index:80;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;width:min(380px,92vw)}
.toast{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:11px;background:var(--raise);border:1px solid var(--line2);font-size:13.5px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);animation:rise .25s}
.toast.ok{border-color:rgba(98,210,141,.4)} .toast.err{border-color:rgba(244,113,105,.45)}
.toast .d{width:8px;height:8px;border-radius:50%;background:var(--green)} .toast.err .d{background:var(--red)}
.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 37%,var(--panel) 63%);background-size:400% 100%;animation:sh 1.3s infinite;border-radius:8px;height:14px}
@keyframes sh{to{background-position:-135% 0}}

.mobile-only{display:none}
/* ---------- Responsive ---------- */
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .main{padding:18px 16px 96px}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .topbar .now{display:none}
  .mobile-only{display:flex}
  .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;
    padding:9px 8px calc(9px + env(safe-area-inset-bottom));background:rgba(13,15,19,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--faint);font-size:10.5px;font-weight:500;padding:4px 14px;border-radius:10px}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.active{color:var(--gold2)}
  .sheet{width:100%;border-left:0;border-top:1px solid var(--line2);top:auto;bottom:0;height:auto;max-height:90dvh;border-radius:18px 18px 0 0;transform:translateY(100%)}
  .sheet.show{transform:none}
}
.tabbar{display:none}