/* Shared design system for Salman's site.
   One file, used by every section, so a new page inherits the whole look by linking this.
   Trading is the first section; others drop in beside it without touching this file. */

:root{
  /* Deep-space ground with an electric violet-and-cyan signature (retheme 23 Sep 2026, he asked for a futuristic,
     less old-fashioned look). Every text colour below passes the 4.5:1 readability standard on every surface. */
  --bg:#05060B;
  --bg-2:#090B14;
  --surface:#0D1020;
  --surface-2:#141830;
  --line:#232846;
  --line-soft:#181C33;
  --ink:#EEF1FF;
  --ink-2:#AAB2D3;
  --ink-3:#7C84A8;
  /* Signature: violet for structure and emphasis, cyan and pink only inside gradients and glows. Never for money. */
  --accent:#A78BFA;
  --accent-2:#22D3EE;
  --accent-3:#F472B6;
  --accent-soft:rgba(167,139,250,.14);
  --glow:0 0 0 1px rgba(167,139,250,.28), 0 0 34px -6px rgba(167,139,250,.55);
  /* Money colours are semantic and kept apart from the violet, so a colour always means a number. */
  --up:#34D399;
  --up-soft:rgba(52,211,153,.13);
  --down:#FB7185;
  --down-soft:rgba(251,113,133,.13);
  --radius:16px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.95);
  /* --serif is the display face for headings; the name is kept so every page keeps working. */
  --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
/* Daylight. The same site in warm paper and ink, so it is readable outdoors and on a bright phone.
   Chosen by the little sun/moon button in the top bar; the choice is remembered on that device. */
:root[data-theme="light"]{
  --bg:#F6F7FE;
  --bg-2:#EEF0FB;
  --surface:#FFFFFF;
  --surface-2:#F0F2FC;
  --line:#DDE1F2;
  --line-soft:#E8EBF7;
  --ink:#0B0F24;
  --ink-2:#454C6B;
  --ink-3:#5F6788;
  --accent:#6D28D9;
  --accent-2:#0E7490;
  --accent-3:#DB2777;
  --accent-soft:rgba(109,40,217,.10);
  --glow:0 0 0 1px rgba(109,40,217,.22), 0 0 28px -8px rgba(109,40,217,.40);
  --up:#047857;
  --up-soft:rgba(4,120,87,.10);
  --down:#BE123C;
  --down-soft:rgba(190,18,60,.10);
  --shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -26px rgba(30,20,80,.35);
}
:root[data-theme="light"] .topbar{background:rgba(246,247,254,.78)}
:root[data-theme="light"] .aura i{opacity:.32}
:root[data-theme="light"] .grain{background:radial-gradient(120% 80% at 50% 0%,transparent 45%,rgba(246,247,254,.9) 100%)}
:root[data-theme="light"] .tile::after{background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(109,40,217,.12),transparent 60%)}

/* Dark is the home look and stays the default, so the site keeps its own character. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-size:15px}
img{max-width:100%}

.wrap{max-width:900px;margin:0 auto;padding-inline:20px;padding-block:0 72px}
@media (max-width:480px){.wrap{padding-inline:16px}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(5,6,11,.66);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid var(--line-soft)}
.topbar .inner{max-width:900px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:18px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .mark{width:20px;height:20px;border-radius:5px;background:linear-gradient(145deg,var(--accent),var(--accent-2));
  display:inline-block;flex:none}
.navlinks{margin-left:auto;display:flex;gap:6px;align-items:center}
.navlinks a{color:var(--ink-2);text-decoration:none;font-size:.86rem;font-weight:500;padding:6px 11px;border-radius:8px}
.navlinks a:hover{color:var(--ink);background:var(--surface-2)}
.navlinks a.on{color:var(--bg);background:var(--accent);font-weight:600}
/* Keyboard focus ring for anything without its own; :where() keeps it weaker than every specific rule. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navlinks a:focus-visible,.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.08;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;margin:0}
h3{font-size:.98rem;font-weight:650;margin:0}
p{margin:0}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  font-family:var(--sans)}
.lede{color:var(--ink-2);font-size:1rem;max-width:62ch}
.muted{color:var(--ink-3);font-size:.82rem}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.up{color:var(--up)} .down{color:var(--down)} .neutral{color:var(--ink-2)}

section.block{padding-top:38px;display:flex;flex-direction:column;gap:14px}
.headrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.headrow .muted{margin-left:auto}

/* ---------- surfaces ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:18px}
.pill{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-3)}
.pill.u{background:var(--up-soft);color:var(--up)}
.pill.d{background:var(--down-soft);color:var(--down)}
.pill.a{background:var(--accent-soft);color:var(--accent)}

/* ---------- home cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:9px;padding:20px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card .big{font-family:var(--mono);font-size:1.7rem;font-weight:600;letter-spacing:-.03em}
.card.soon{opacity:.62;pointer-events:none;border-style:dashed}

footer{margin-top:52px;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--ink-3);font-size:.78rem;
  display:flex;flex-direction:column;gap:5px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- sign-in, sign-up and profile ---------- */
.narrow{max-width:460px;margin:0 auto;padding-inline:20px;padding-block:0 72px}
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:11px;margin-bottom:18px}
.tabs button{flex:1;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);
  font-family:var(--sans);font-size:.87rem;font-weight:600;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--bg)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

form.auth{display:flex;flex-direction:column;gap:14px}
/* a hidden panel must really be hidden - display:flex above would otherwise keep showing it */
form.auth[hidden]{display:none}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.field input{width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.3}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field .hint{font-size:.76rem;color:var(--ink-3)}
button.go{padding:13px 16px;border:0;border-radius:10px;color:var(--bg);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--glow);
  font-family:var(--sans);font-size:.95rem;font-weight:700;cursor:pointer}
button.go:hover{filter:brightness(1.08)}
button.go:disabled{opacity:.55;cursor:default}
button.go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.quiet{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
button.quiet:hover{background:var(--surface-2);color:var(--ink)}

.msg{padding:11px 13px;border-radius:0 10px 10px 0;font-size:.88rem;display:none}
.msg.show{display:block}
.msg.bad{background:var(--down-soft);border-left:3px solid var(--down);color:var(--ink)}
.msg.good{background:var(--up-soft);border-left:3px solid var(--up);color:var(--ink)}

.kv{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--surface)}
.kv div{display:flex;gap:14px;justify-content:space-between;align-items:baseline;padding:13px 16px;
  border-top:1px solid var(--line-soft)}
.kv div:first-child{border-top:none}
.kv .k{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);flex:none}
.kv .v{font-family:var(--mono);font-size:.9rem;text-align:right;word-break:break-word}

/* Small phones: three links plus the name were running off the right edge of the top bar. */
@media (max-width:430px){
  .topbar .inner{padding-inline:16px;gap:10px}
  .brand{font-size:.92rem;gap:7px}
  .brand .mark{width:18px;height:18px}
  .navlinks{gap:2px}
  .navlinks a{padding:6px 8px;font-size:.79rem}
  /* On a phone the account button is just the round initial, the way most apps do it. */
  .chip{padding:4px}
  .chip .nm{display:none}
}

/* ---------- the account button in the top bar ---------- */
.acct{position:relative}
.chip{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:999px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:.84rem;font-weight:600}
.chip:hover{border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip .dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));color:var(--bg);
  font-family:var(--serif);font-weight:700;font-size:.82rem}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:6px;z-index:30;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px}
.menu[hidden]{display:none}
.menu .hd{padding:8px 10px 9px;font-size:.74rem;color:var(--ink-3);border-bottom:1px solid var(--line-soft);
  margin-bottom:4px;word-break:break-word}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;border:0;
  background:transparent;color:var(--ink-2);text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:.87rem;font-weight:500}
.menu a:hover,.menu button:hover{background:var(--surface-2);color:var(--ink)}
.menu button.so{color:var(--down)}

/* ---------- password box with an eye, and the small print under it ---------- */
.pw{position:relative;display:flex}
.pw input{padding-right:46px}
.eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:34px;border:0;
  border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.eye:hover{color:var(--ink);background:var(--surface-2)}
.eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.eye svg{width:19px;height:19px;display:block}
.caps{display:none;font-size:.76rem;color:var(--accent)}
.caps.show{display:block}
.linkish{background:none;border:0;padding:0;color:var(--accent);font-family:var(--sans);font-size:.83rem;
  font-weight:600;cursor:pointer;text-align:left}
.linkish:hover{text-decoration:underline}
.remember{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-2);cursor:pointer}
.remember input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.rowsplit{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- keyboard and screen-reader help ---------- */
/* Hidden until someone tabs to it, then it jumps straight past the menu to the page itself. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:11px 16px;border-radius:0 0 10px 0;
  background:var(--accent);color:var(--bg);font-weight:700;font-size:.9rem;text-decoration:none}
.skip:focus{left:0}

/* ---------- the sun / moon switch ---------- */
.themeBtn{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);padding:0}
.themeBtn:hover{color:var(--ink);border-color:var(--accent);background:var(--surface-2)}
.themeBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themeBtn svg{width:17px;height:17px}
@media (max-width:430px){.themeBtn{width:30px;height:30px}.themeBtn svg{width:15px;height:15px}}

/* ---------- how far down the page you are ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:40;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-2),var(--accent))}

/* ---------- phone menu ----------
   On a phone the section links fold away behind a menu button, the way most sites do it.
   The sun/moon switch and the account button stay in the bar. The button itself is added by theme.js. */
.menuBtn{display:none;width:36px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;place-items:center;padding:0;flex:none}
.menuBtn:hover{border-color:var(--accent)}
.menuBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menuBtn svg{width:18px;height:18px}
.mobileNav{display:none}
/* the menu button takes over below 860px, so six links never squash (24 Sep 2026) */
@media (max-width:860px){
  .menuBtn{display:grid}
  .navlinks > a:not(#account){display:none}
  .topbar.open .mobileNav{display:flex}
  .mobileNav{flex-direction:column;gap:2px;padding:6px 16px 14px;border-top:1px solid var(--line-soft);
    max-width:900px;margin:0 auto}
  .mobileNav a{padding:12px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem}
  .mobileNav a.on{background:var(--accent-soft);color:var(--accent)}
  .mobileNav a:hover{background:var(--surface-2);color:var(--ink)}
}

/* ---------- the futuristic backdrop, shared by every page (drawn by assets/fx.js) ----------
   A faint grid fading out from the top, two slow violet/cyan glows and a live particle network. */
/* ---------- backdrop: a faint grid fading out from the top, and two slow glows ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.backdrop .grid{position:absolute;inset:-1px;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 75%);
  opacity:.55}
/* soft gradients instead of a 100px blur filter: the same glow for a fraction of the drawing work (24 Sep 2026) */
.backdrop .glow{position:absolute;border-radius:50%;will-change:transform}
.backdrop .g1{width:86vw;height:66vw;left:7vw;top:-34vw;background:radial-gradient(closest-side,rgba(167,139,250,.24),rgba(167,139,250,.09) 55%,transparent);animation:float1 24s ease-in-out infinite}
.backdrop .g2{width:54vw;height:54vw;right:-20vw;top:calc(28vh - 12vw);background:radial-gradient(closest-side,rgba(52,211,153,.09),transparent);animation:float2 30s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3vw,3vh,0) scale(1.06)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4vw,-4vh,0)}}
:root[data-theme="light"] .backdrop .g1{background:radial-gradient(closest-side,rgba(109,40,217,.16),rgba(109,40,217,.06) 55%,transparent)}
:root[data-theme="light"] .backdrop .grid{opacity:.8}

@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

.backdrop .g2{background:radial-gradient(closest-side,rgba(34,211,238,.13),transparent)}
.backdrop .grid{background-image:linear-gradient(rgba(167,139,250,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(167,139,250,.08) 1px,transparent 1px)}
:root[data-theme="light"] .backdrop .grid{background-image:linear-gradient(rgba(109,40,217,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(109,40,217,.07) 1px,transparent 1px)}
#stars{position:absolute;inset:0;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){.backdrop .glow{animation:none}}

/* ---------- neon edge: a slowly turning violet / cyan / pink border for special panels ---------- */
.neon{border:1px solid transparent !important;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             conic-gradient(from var(--ang),var(--accent),var(--accent-2),var(--accent-3),var(--accent)) border-box !important;
  animation:neonSpin 9s linear infinite;
  box-shadow:0 0 60px -24px rgba(167,139,250,.6),var(--shadow)}
@keyframes neonSpin{to{--ang:360deg}}

/* ---------- smooth fades when moving between pages (browsers that support it; others just switch) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

@media (prefers-reduced-motion:reduce){
  .neon{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- loading shimmer: grey placeholders with a light sweeping across, shown until real data arrives ---------- */
.skelGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:34px}
.skel{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.12),transparent);animation:skelSweep 1.3s ease-in-out infinite}
.skel.card{height:200px}
.skel.wide{grid-column:1/-1;height:64px}
@keyframes skelSweep{to{transform:translateX(100%)}}

/* ---------- inner pages: the headline carries the signature gradient, like the home page ---------- */
.wrap .hero h1,.narrow .hero h1{background:linear-gradient(95deg,var(--ink) 0%,var(--ink) 30%,var(--accent) 70%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* ---------- the soft glow that follows the mouse (added by fx.js on desktop only) ---------- */
.cursorGlow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  pointer-events:none;z-index:-1;transform:translate3d(-9999px,-9999px,0);will-change:transform;
  background:radial-gradient(circle,rgba(167,139,250,.11),rgba(34,211,238,.04) 35%,transparent 62%)}
:root[data-theme="light"] .cursorGlow{background:radial-gradient(circle,rgba(109,40,217,.07),transparent 60%)}

/* ---------- quick jump (Ctrl+K) ---------- */
.palette{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
  background:rgba(5,6,11,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.palette[hidden]{display:none}
:root[data-theme="light"] .palette{background:rgba(11,15,36,.25)}
html.palOpen{overflow:hidden}
.pal{width:100%;max-width:620px;border-radius:18px;overflow:hidden;box-shadow:var(--glow),0 40px 90px -30px rgba(0,0,0,.8);
  border:1px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3)) border-box;
  animation:palIn .18s ease-out}
@keyframes palIn{from{transform:translateY(-8px) scale(.98);opacity:0}}
.palHead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.palHead svg{width:18px;height:18px;color:var(--accent);flex:none}
.palHead input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--sans);font-size:1.02rem}
.palHead input::placeholder{color:var(--ink-3)}
.pal kbd{font-family:var(--mono);font-size:.68rem;padding:2px 6px;border-radius:5px;border:1px solid var(--line);
  color:var(--ink-3);background:var(--bg-2)}
.palList{max-height:min(52vh,420px);overflow:auto;padding:6px}
.palItem{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:11px 12px;border-radius:10px;cursor:pointer}
.palItem .pl{color:var(--ink);font-size:.93rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palItem .ph{flex:none;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.palItem.on,.palItem:hover{background:var(--accent-soft)}
.palItem.on .pl{color:var(--accent)}
.palNone{padding:22px;text-align:center;color:var(--ink-3);font-size:.9rem}
.palFoot{display:flex;gap:16px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line-soft);color:var(--ink-3);font-size:.74rem}
.palFoot span{display:inline-flex;align-items:center;gap:5px}
@media (max-width:640px){.palFoot{display:none}.palette{padding-top:9vh}}
@media (prefers-reduced-motion:reduce){.pal{animation:none}}

/* ---------- offline notice ---------- */
.offline{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--glow);
  color:var(--ink);font-size:.84rem;font-weight:600;white-space:nowrap}
.offline[hidden]{display:none}
.offline::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--down);box-shadow:0 0 10px var(--down)}

/* ---------- keyboard shortcuts list ---------- */
.keysBox .keysTitle{flex:1;font-family:var(--serif);font-weight:600;color:var(--ink)}
.keysBox .palItem{cursor:default}
.keysBox .palItem:hover{background:none}
.keysBox .ph{letter-spacing:0;text-transform:none}

/* ---------- pop-up notes (made by fx.js from each page's message box) ---------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:13px 14px 13px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--down);box-shadow:var(--glow),var(--shadow);
  color:var(--ink);font-size:.9rem;animation:toastIn .26s cubic-bezier(.2,.8,.2,1)}
.toast.good{border-left-color:var(--up)}
.toast .tx{flex:1}
.toast button{flex:none;background:none;border:0;color:var(--ink-3);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px}
.toast button:hover{color:var(--ink)}
.toast.out{animation:toastOut .26s ease forwards}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}}
@keyframes toastOut{to{transform:translateY(8px);opacity:0}}
/* the original box stays for screen readers but no longer pushes the page around */
.msg.toasted{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0);white-space:nowrap;padding:0!important;border:0!important;margin:0!important}
@media (max-width:640px){.toasts{left:16px;right:16px;width:auto;bottom:72px}}
@media (prefers-reduced-motion:reduce){.toast,.toast.out{animation:none}}

/* ---------- the browser's own scrollbars and form controls follow the chosen look ---------- */
:root{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ---------- profile photo in the round account button ---------- */
.chip .dot.pic{background:none;overflow:hidden}
.chip .dot.pic img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---------- printing (Ctrl+P): plain black on white, no effects, menus or buttons, cards kept whole ---------- */
@media print{
  :root,:root[data-theme]{--bg:#fff;--bg-2:#fff;--surface:#fff;--surface-2:#fff;--line:#bbb;--line-soft:#ddd;
    --ink:#000;--ink-2:#222;--ink-3:#444;--accent:#000;--accent-2:#000;--accent-3:#000;--accent-soft:transparent;
    --glow:none;--shadow:none;--up:#000;--down:#000;color-scheme:light}
  html,body{background:#fff!important;color:#000}
  .backdrop,.cursorGlow,.toasts,.offline,.topbar,.skip,.palette,.skel,.skelGrid,.toolbar,.dropHint,footer,
    button,input,select,textarea,canvas,.aura,.grain{display:none!important}
  *,*::before,*::after{box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  .wrap .hero h1,.narrow .hero h1{background:none;color:#000;-webkit-text-fill-color:#000}
  .block,.panel,.unit,.acc,.mail,.cell,.tile,.card,tr{break-inside:avoid;page-break-inside:avoid}
  .unit,.acc,.mail,.cell,.tile,.panel{border:1px solid #bbb!important;background:#fff!important;transform:none!important}
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}
  a{color:#000;text-decoration:underline}
  .wrap a[href^="http"]::after,.narrow a[href^="http"]::after{content:" (" attr(href) ")";font-size:.72em;word-break:break-all;color:#444}
  @page{margin:14mm}
}

/* =====================================================================================================================
   DESIGN-1 (30 Sep 2026): one shared design system, so every page looks like the same product.
   Salman: "i need website template more upgrading and good". Nothing was taken away: every animation, glow and effect
   above still runs. This block only adds shared building pieces (spacing, type sizes, cards, buttons, switches, lamps,
   the phone tab bar, empty states) that new and old pages can use, and polishes the top bar.
   New class names start with "u-" (or are new words like .tabbar) so they never clash with a page's own styles.
   ===================================================================================================================== */
:root{
  /* spacing scale: 4, 8, 12, 16, 24, 32, 48, 64 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* type scale */
  --t-xs:.72rem;--t-sm:.84rem;--t-md:.95rem;--t-lg:1.15rem;--t-xl:1.5rem;--t-2xl:2rem;--t-3xl:clamp(2rem,7vw,3rem);
  --r-sm:10px;--r-md:14px;--r-lg:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --tabbar-h:64px;
  --warn:#FBBF24;--warn-soft:rgba(251,191,36,.14);
}
:root[data-theme="light"]{--warn:#B45309;--warn-soft:rgba(180,83,9,.10)}

/* a slightly richer top bar: soft accent pill for the current page, a hairline glow under the bar */
.topbar{border-bottom-color:transparent;box-shadow:0 1px 0 var(--line-soft),0 12px 28px -22px rgba(167,139,250,.55)}
:root[data-theme="light"] .topbar{box-shadow:0 1px 0 var(--line-soft),0 12px 28px -24px rgba(109,40,217,.35)}
.navlinks a{transition:background .18s var(--ease),color .18s var(--ease)}
.navlinks a.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line)}
.navlinks a.on:hover{background:var(--accent-soft);color:var(--accent)}

/* ---------- cards: one look for every "thing in a box" ---------- */
.u-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:var(--s4);transition:border-color .18s var(--ease),transform .18s var(--ease)}
a.u-card{color:inherit;text-decoration:none;display:block}
a.u-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.u-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.u-stack{display:flex;flex-direction:column;gap:var(--s3)}
.u-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.u-eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.u-title{font-family:var(--serif);font-weight:600;font-size:var(--t-lg);letter-spacing:-.01em}
.u-note{color:var(--ink-3);font-size:var(--t-sm);line-height:1.45}

/* big numbers with green / red */
.u-big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.03em;line-height:1.05;
  font-size:var(--t-2xl)}
.u-big.up{color:var(--up)} .u-big.down{color:var(--down)}
.u-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:var(--mono);
  font-size:var(--t-xs);font-weight:600;background:var(--surface-2);color:var(--ink-2)}
.u-chip.up{background:var(--up-soft);color:var(--up)}
.u-chip.down{background:var(--down-soft);color:var(--down)}
.u-chip.warn{background:var(--warn-soft);color:var(--warn)}

/* ---------- buttons ---------- */
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:var(--t-md);font-weight:650;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .12s var(--ease),filter .18s var(--ease)}
.u-btn:hover{border-color:var(--accent)}
.u-btn:active{transform:scale(.98)}
.u-btn:disabled{opacity:.55;cursor:default}
.u-btn.primary{border-color:transparent;color:var(--bg);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--glow)}
.u-btn.primary:hover{filter:brightness(1.08)}
.u-btn.danger{border-color:transparent;color:#fff;background:linear-gradient(135deg,#E11D48,#F43F5E);
  box-shadow:0 0 0 1px rgba(244,63,94,.4),0 0 30px -6px rgba(244,63,94,.55)}
.u-btn.danger:hover{filter:brightness(1.08)}
.u-btn.ok{border-color:transparent;color:#052E1B;background:linear-gradient(135deg,#34D399,#6EE7B7)}
:root[data-theme="light"] .u-btn.ok{color:#fff;background:linear-gradient(135deg,#047857,#059669)}
.u-btn.ghost{background:transparent}
.u-btn.big{min-height:56px;font-size:var(--t-lg);border-radius:var(--r-lg);width:100%}

/* ---------- on / off switch ---------- */
.u-sw{position:relative;flex:none;width:52px;height:30px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;padding:0;transition:background .2s var(--ease),border-color .2s var(--ease)}
.u-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink-3);
  transition:transform .2s var(--ease),background .2s var(--ease)}
.u-sw[aria-checked="true"]{background:var(--warn-soft);border-color:var(--warn)}
.u-sw[aria-checked="true"]::after{transform:translateX(22px);background:var(--warn)}
.u-sw:disabled{opacity:.5;cursor:default}
.u-sw:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- health lamp: green running, amber late, red needs a look ---------- */
.u-lamp{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ink-3);position:relative}
.u-lamp.ok{background:var(--up);box-shadow:0 0 0 0 rgba(52,211,153,.5);animation:lampPulse 2.6s ease-out infinite}
.u-lamp.late{background:var(--warn);box-shadow:0 0 10px -1px var(--warn)}
.u-lamp.bad{background:var(--down);box-shadow:0 0 12px -1px var(--down)}
@keyframes lampPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@media (prefers-reduced-motion:reduce){.u-lamp.ok{animation:none}}

/* ---------- empty and loading states ---------- */
.u-empty{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;padding:var(--s6) var(--s4);
  color:var(--ink-3);font-size:var(--t-sm);border:1px dashed var(--line);border-radius:var(--r-lg);background:transparent}
.u-empty svg{width:28px;height:28px;color:var(--accent);opacity:.8}
.u-empty b{color:var(--ink);font-size:var(--t-md);font-family:var(--serif)}
.u-load{height:84px;border-radius:var(--r-lg)}

/* ---------- pop-up "Are you sure?" ---------- */
.u-veil{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(5,6,11,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:veilIn .18s ease-out}
:root[data-theme="light"] .u-veil{background:rgba(11,15,36,.35)}
.u-veil[hidden]{display:none}
.u-dlg{width:100%;max-width:420px;padding:var(--s5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--glow),0 40px 90px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:var(--s3);animation:dlgIn .22s var(--ease)}
.u-dlg h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:600}
.u-dlg p{color:var(--ink-2);font-size:var(--t-md)}
.u-dlg .u-row{justify-content:flex-end;margin-top:var(--s2)}
@keyframes veilIn{from{opacity:0}}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.u-veil,.u-dlg{animation:none}}

/* ---------- phone tab bar (built by theme.js on narrow screens; replaces the cramped row of links) ---------- */
.tabbar{display:none}
@media (max-width:860px){
  body.hasTabbar{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
  body.hasTabbar .menuBtn{display:none}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;align-items:stretch;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));padding:6px 6px env(safe-area-inset-bottom,0px);
    background:rgba(9,11,20,.86);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
    border-top:1px solid var(--line)}
  :root[data-theme="light"] .tabbar{background:rgba(255,255,255,.88)}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;border:0;background:transparent;color:var(--ink-3);text-decoration:none;cursor:pointer;
    font-family:var(--sans);font-size:.66rem;font-weight:650;letter-spacing:.02em;border-radius:12px;padding:4px 2px;
    -webkit-tap-highlight-color:transparent;transition:color .18s var(--ease),background .18s var(--ease)}
  .tabbar svg{width:22px;height:22px;flex:none}
  .tabbar a.on,.tabbar button.on{color:var(--accent);background:var(--accent-soft)}
  .tabbar a:focus-visible,.tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .moreSheet{position:fixed;left:8px;right:8px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 8px);z-index:75;
    padding:8px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--glow),var(--shadow);
    display:grid;grid-template-columns:1fr 1fr;gap:6px;animation:dlgIn .2s var(--ease)}
  .moreSheet[hidden]{display:none}
  .moreSheet a{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:12px;color:var(--ink);text-decoration:none;
    font-weight:600;font-size:.92rem;background:var(--surface-2)}
  .moreSheet a.on{color:var(--accent);background:var(--accent-soft)}
  .moreSheet svg{width:20px;height:20px;color:var(--accent);flex:none}
  .toasts{bottom:calc(var(--tabbar-h) + 16px)}
}

/* ---------- the "Ask" helper (assets/assistant.js): a round button that opens a small chat ---------- */
.asker{position:fixed;right:16px;bottom:16px;z-index:70;font-family:var(--sans)}
@media (max-width:860px){
  .asker{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);right:12px}
  /* icon-only on a phone, so it covers as little of the page as possible */
  .askFab{width:46px;height:46px;padding:0;justify-content:center;opacity:.94}
  .askFab span{display:none}
}
.askFab{display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border-radius:999px;border:0;cursor:pointer;
  color:var(--bg);font-weight:700;font-size:.9rem;font-family:var(--sans);background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:var(--glow),0 12px 30px -10px rgba(0,0,0,.7);transition:transform .15s var(--ease),filter .18s var(--ease)}
.askFab:hover{filter:brightness(1.08)}
.askFab:active{transform:scale(.97)}
.askFab svg{width:20px;height:20px}
.askFab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.askBox{position:absolute;right:0;bottom:60px;width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);display:flex;flex-direction:column;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--glow),0 30px 70px -24px rgba(0,0,0,.85);
  overflow:hidden;animation:dlgIn .2s var(--ease)}
.askBox[hidden]{display:none}
.askHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.askHead b{font-family:var(--serif);font-size:1rem}
.askHead button{border:0;background:transparent;color:var(--ink-3);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.askHead button:hover{color:var(--ink);background:var(--surface-2)}
.askLog{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.askMsg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:.9rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.askMsg.me{align-self:flex-end;background:var(--accent-soft);color:var(--ink);border-bottom-right-radius:4px}
.askMsg.ai{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:4px}
.askMsg.wait{color:var(--ink-3)}
.askTips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.askTips button{border:1px solid var(--line);background:transparent;color:var(--ink-2);font-family:var(--sans);font-size:.78rem;font-weight:600;
  padding:6px 11px;border-radius:999px;cursor:pointer}
.askTips button:hover{border-color:var(--accent);color:var(--ink)}
.askForm{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line-soft)}
.askForm input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
  font-family:var(--sans);font-size:1rem}
.askForm input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.askForm button{flex:none;padding:0 16px;border-radius:12px;border:0;cursor:pointer;font-weight:700;font-family:var(--sans);color:var(--bg);
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.askForm button:disabled{opacity:.55;cursor:default}
.askFoot{padding:0 14px 10px;color:var(--ink-3);font-size:.7rem}

/* ---- AI-2 (1 Oct 2026): "typing" dots for the chat's Thinking state, and inline Explain buttons anywhere ---- */
.askMsg.wait{display:flex;align-items:center;gap:7px}
.aiDots{display:inline-flex;gap:3px}
.aiDots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:aiDot 1.1s ease-in-out infinite}
.aiDots i:nth-child(2){animation-delay:.15s}
.aiDots i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.aiDots i{animation:none;opacity:.7}}

.aiExplain[hidden]{display:none}
.aiExplainBtn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--accent-soft),transparent);color:var(--accent);font-family:var(--sans);
  font-size:.86rem;font-weight:700;cursor:pointer}
.aiExplainBtn::before{content:"º8"}
.aiExplainBtn:hover{border-color:var(--accent)}
.aiExplainBtn:disabled{opacity:.55;cursor:default}
.aiExplainBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aiExplainOut{margin-top:10px;padding:12px 14px;border-radius:var(--r-md,14px);background:var(--surface-2);
  border:1px solid var(--line);font-size:.9rem;line-height:1.5;color:var(--ink);white-space:pre-wrap}
.aiExplainOut[hidden]{display:none}
.aiExplainOut.wait{color:var(--ink-3);display:flex;align-items:center;gap:7px}
.aiExplainOut.bad{color:var(--down);background:var(--down-soft);border-color:transparent}
.aiExplainOut.in{animation:aiIn .32s var(--ease,ease) both}
@keyframes aiIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.aiExplainOut.in{animation:none}}
@media print{.asker,.tabbar,.moreSheet{display:none!important}}

/* ---------- "Today" panel on Home ---------- */
.todayPanel{margin-top:var(--s5);padding:var(--s5);text-align:left;display:flex;flex-direction:column;gap:var(--s4)}
.todayGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.todayGrid > div{display:flex;flex-direction:column;gap:6px;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line-soft);min-width:0}
.todayGrid .k{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.todayGrid .v{font-family:var(--mono);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.todayGrid .n{font-size:var(--t-sm);color:var(--ink-2);overflow-wrap:anywhere}
.needsYou{display:flex;flex-direction:column;gap:var(--s2)}
.needsYou a,.needsYou div{display:flex;align-items:center;gap:var(--s3);padding:10px 14px;border-radius:var(--r-md);text-decoration:none;
  color:var(--ink);font-size:var(--t-md);background:var(--warn-soft);border:1px solid transparent}
.needsYou .bad{background:var(--down-soft)}
.needsYou a:hover{border-color:var(--accent)}
.needsYou .ok{background:var(--up-soft)}

@media (max-width:520px){
  .todayPanel{padding:var(--s4)}
  .todayGrid{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .todayGrid > div{padding:var(--s3)}
  .todayGrid .v{font-size:1.12rem}
  .todayGrid .n{font-size:.78rem}
}


/* =====================================================================================================================
   DESIGN-2 (30 Sep 2026): the premium app look. Salman asked for "the best one till date".
   What this block adds (nothing above is removed and every animation still runs):
     - the app shell: a slim left sidebar on desktop (collapses to icons), the top bar shrinks to title + theme + avatar
     - glass cards, a hover lift, a shimmer while numbers load, calmer focus rings
     - the Home dashboard pieces (.dsh, .d-money, .d-tile, .d-bot)
   Names: .sidebar / .sb* / .pageTitle / .dsh* / .d-* / .glass / .shim, so they never clash with a page's own classes.
   ===================================================================================================================== */
:root{
  --sb-w:248px;
  --glass:rgba(17,21,42,.62);
  --glass-line:rgba(255,255,255,.075);
  --glass-hi:rgba(255,255,255,.035);
  --brand-grad:linear-gradient(135deg,var(--accent),var(--accent-2));
}
:root[data-theme="light"]{
  --glass:rgba(255,255,255,.8);
  --glass-line:rgba(31,27,80,.10);
  --glass-hi:rgba(255,255,255,.6);
}
html.sbMini{--sb-w:76px}

/* ---------- glass cards ---------- */
.glass{position:relative;background:linear-gradient(180deg,var(--glass-hi),transparent 60%),var(--glass);
  border:1px solid var(--glass-line);border-radius:20px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--surface)}}
a.glass{color:inherit;text-decoration:none;display:block}

/* every existing "card" gets rounder corners and a gentle lift; their own colours are left alone */
.panel,.card,.tile,.cell,.card2,.chartbox,.u-card,.gate,.box{border-radius:18px}
a.card,a.tile,a.cell,a.card2,a.u-card,.cell{transition:transform .22s var(--ease),border-color .2s var(--ease),box-shadow .22s var(--ease)}
a.card:hover,a.tile:hover,a.card2:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(167,139,250,.55)}

/* shimmer while something loads */
.shim{border-radius:12px;background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%);
  background-size:220% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- the app shell: sidebar ---------- */
.sidebar,.pageTitle{display:none}
.sbHead{display:flex;align-items:center;gap:11px;padding:6px 8px 18px;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-weight:650;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.sbHead .mark{width:28px;height:28px;border-radius:9px;flex:none;background:var(--brand-grad);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 10px 24px -10px rgba(167,139,250,.9)}
.sbLabel{margin:14px 12px 6px;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.sbNav{display:flex;flex-direction:column;gap:3px}
.sbNav a{position:relative;display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:13px;color:var(--ink-2);text-decoration:none;
  font-size:.92rem;font-weight:550;white-space:nowrap;overflow:hidden;transition:background .18s var(--ease),color .18s var(--ease)}
.sbNav a svg{width:20px;height:20px;flex:none;transition:transform .2s var(--ease)}
.sbNav a:hover{background:var(--surface-2);color:var(--ink)}
.sbNav a:hover svg{transform:scale(1.1)}
.sbNav a.on{color:var(--ink);background:linear-gradient(90deg,var(--accent-soft),transparent 110%);box-shadow:inset 0 0 0 1px var(--line)}
.sbNav a.on svg{color:var(--accent)}
.sbNav a.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-grad)}
.sbFoot{margin-top:auto;padding-top:12px}
.sbToggle{display:flex;align-items:center;gap:13px;width:100%;padding:10px 12px;border-radius:13px;border:0;background:transparent;color:var(--ink-3);
  font-family:var(--sans);font-size:.86rem;font-weight:550;cursor:pointer;white-space:nowrap}
.sbToggle:hover{background:var(--surface-2);color:var(--ink)}
.sbToggle svg{width:20px;height:20px;flex:none;transition:transform .25s var(--ease)}
html.sbMini .sbToggle svg{transform:rotate(180deg)}
html.sbMini .sbNav a span,html.sbMini .sbToggle span,html.sbMini .sbHead span:last-child{display:none}
html.sbMini .sbNav a,html.sbMini .sbToggle{justify-content:center;padding-inline:0}
html.sbMini .sbHead{justify-content:center;padding-inline:0}
html.sbMini .sbLabel{display:block;height:1px;margin:10px 14px;padding:0;font-size:0;background:var(--line-soft)}

@media (min-width:861px){
  body:not(.noSb){padding-left:var(--sb-w);transition:padding-left .25s var(--ease)}
  .sidebar{display:flex;flex-direction:column;position:fixed;z-index:40;top:0;left:0;bottom:0;width:var(--sb-w);padding:16px 12px;
    background:linear-gradient(180deg,rgba(14,17,34,.78),rgba(7,9,18,.86));border-right:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
    transition:width .25s var(--ease);overflow-y:auto;overflow-x:hidden}
  :root[data-theme="light"] .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(243,244,253,.92))}
  body:not(.noSb) .topbar .brand{display:none}
  body:not(.noSb) .pageTitle{display:block;font-family:var(--serif);font-weight:650;font-size:1.12rem;letter-spacing:-.01em;white-space:nowrap}
  body:not(.noSb) .navlinks > a:not(#account){display:none}
  body:not(.noSb) .topbar .inner{max-width:1180px;padding-block:11px}
  body:not(.noSb) .topbar{background:rgba(5,6,11,.5)}
  :root[data-theme="light"] body:not(.noSb) .topbar{background:rgba(246,247,254,.7)}
  body:not(.noSb) .wrap{max-width:980px}
}
@media (max-width:860px){
  /* phone: the brand shrinks to its little mark and the page name sits beside it */
  body:not(.noSb) .topbar .brand{font-size:0;gap:0}
  body:not(.noSb) .topbar .brand .mark{width:24px;height:24px;border-radius:8px}
  body:not(.noSb) .pageTitle{display:block;font-family:var(--serif);font-weight:650;font-size:1.05rem;white-space:nowrap;margin-left:-6px}
}
@media print{.sidebar,.pageTitle{display:none!important}body:not(.noSb){padding-left:0!important}}

/* ---------- Home dashboard (signed-in owner) ---------- */
.dsh{padding-top:30px;padding-bottom:12px;display:flex;flex-direction:column;gap:22px}
.dsh[hidden]{display:none}
.dsh h2.dh{font-family:var(--serif);font-size:1.15rem;font-weight:650;letter-spacing:-.01em;margin:6px 2px -8px;display:flex;align-items:center;gap:10px}
.dsh h2.dh .u-chip{margin-left:auto}
.dHead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dHead h1{font-size:clamp(1.8rem,5.4vw,2.6rem);letter-spacing:-.03em}
.dHead h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.dHead p{color:var(--ink-3);font-size:.92rem;margin-top:6px}
.dQuick{display:flex;gap:10px;flex-wrap:wrap}

.d-money{padding:26px 26px 0;overflow:hidden;isolation:isolate}
.d-money::before{content:"";position:absolute;z-index:-1;right:-80px;top:-120px;width:420px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(167,139,250,.32),transparent);pointer-events:none}
.d-money::after{content:"";position:absolute;z-index:-1;left:-100px;bottom:-140px;width:380px;height:300px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(34,211,238,.16),transparent);pointer-events:none}
.mcTop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mcLab{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mcNum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.045em;line-height:1.02;margin-top:8px;
  font-size:clamp(2.5rem,9vw,4rem)}
.mcNote{color:var(--ink-3);font-size:.84rem;margin-top:8px}
.mcChart{position:relative;height:200px;margin:14px -26px 0;touch-action:pan-y}
.mcChart svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.mcChart .grid{stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 5}
.mcChart .line{fill:none;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.mcChart .area{opacity:0;animation:fadeArea .9s ease .5s forwards}
@keyframes fadeArea{to{opacity:1}}
.mcDot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 3px var(--bg),0 0 14px 2px var(--accent-2);pointer-events:none}
.mcDot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent-2);opacity:0;animation:dotPing 2.4s ease-out infinite}
@keyframes dotPing{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.mcTip{position:absolute;top:8px;transform:translateX(-50%);padding:6px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:.78rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:3}
.mcTip small{display:block;color:var(--ink-3);font-family:var(--sans);font-size:.68rem}
.mcChart.hov .mcTip{opacity:1}
.mcCross{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:0;pointer-events:none}
.mcChart.hov .mcCross{opacity:1}
.mcEmpty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:.86rem;text-align:center;padding:0 30px}
@media (max-width:520px){.d-money{padding:20px 18px 0}.mcChart{margin-inline:-18px;height:160px}}

.d-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.d-tile{padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0;transition:transform .22s var(--ease),border-color .2s var(--ease)}
.d-tile:hover{transform:translateY(-3px);border-color:var(--accent)}
.d-tile .ti{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent);margin-bottom:4px}
.d-tile .ti svg{width:18px;height:18px}
.d-tile .k{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.d-tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:1.5rem;letter-spacing:-.03em;overflow-wrap:anywhere}
.d-tile .n{font-size:.8rem;color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width:860px){.d-tiles{grid-template-columns:1fr 1fr;gap:10px}.d-tile{padding:14px}.d-tile .v{font-size:1.25rem}}

.d-bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.d-bot{display:flex;flex-direction:column;gap:12px;padding:18px;transition:transform .22s var(--ease),border-color .2s var(--ease),box-shadow .22s var(--ease)}
.d-bot:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 44px -24px rgba(167,139,250,.6)}
.d-bot .bt{display:flex;align-items:center;gap:12px}
.d-bot .bi{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;color:var(--bg);background:var(--brand-grad)}
.d-bot .bi.gold{background:linear-gradient(135deg,#FBBF24,#F59E0B)}
.d-bot .bi.bees{background:linear-gradient(135deg,#FCD34D,#F472B6)}
.d-bot .bi svg{width:21px;height:21px}
.d-bot .bn{font-family:var(--serif);font-weight:650;font-size:1rem;line-height:1.2;min-width:0;flex:1}
.d-bot .bl{display:block;color:var(--ink-3);font-size:.82rem;margin-top:2px;font-family:var(--sans);font-weight:450}
.d-bot .bb{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.d-bot .br{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:1.4rem;letter-spacing:-.03em}
.d-bot .spark{width:96px;height:34px;flex:none;overflow:visible}
.d-bot .spark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.d-bot .spark.flat path{stroke:var(--ink-3);stroke-dasharray:2 4;opacity:.6}
@media (max-width:520px){.d-bots{grid-template-columns:1fr 1fr;gap:10px}.d-bot{padding:14px}.d-bot .spark{width:56px}.d-bot .br{font-size:1.15rem}.d-bot .bi{width:34px;height:34px}}
@media (max-width:380px){.d-bots{grid-template-columns:1fr}}

.d-low{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.d-low .glass{padding:20px;display:flex;flex-direction:column;gap:12px}
.d-low h3{font-family:var(--serif);font-size:1.02rem;font-weight:650}
.d-low .needsYou{gap:8px}
.d-quick{display:flex;flex-direction:column;gap:10px}
@media (max-width:860px){.d-low{grid-template-columns:1fr}}

/* signed-out visitors: a shorter, tidier front page */
body:not(.isOwner) .hero{padding-top:56px;gap:16px}
body:not(.isOwner) .hero .trust{display:none}
body:not(.isOwner) .hero h1{font-size:clamp(2.3rem,7.4vw,4.2rem)}
body:not(.isOwner) .console{margin-top:32px}
body.isOwner .pub{display:none}
body.isOwner .foot{margin-top:24px}
@media (prefers-reduced-motion:reduce){.mcChart .area{animation:none;opacity:1}.mcDot::after{animation:none}}

.mcChart svg{animation:reveal 1.3s var(--ease) .1s both}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.mcChart svg{animation:none}}

/* DESIGN-2 polish: the title lines up with the page's own left edge; the last line clears the Ask button */
@media (min-width:861px){
  body:not(.noSb) .topbar .inner{max-width:980px}
  body:not(.noSb):has(.wide) .topbar .inner{max-width:1080px}
}
body.isOwner .foot{padding-bottom:72px}
.d-bot:focus-visible,.d-tile:focus-visible,.sbNav a:focus-visible,.sbToggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}