/* ═══════════════════════════════════════════════════════════════
   Yuzu Mac App — design system v3
   Ottessa (titles) · Instrument Sans (body) · JetBrains Mono (data)
   NO Fraunces. Bolder palette: ink + yuzu + lime, high contrast.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Ottessa'; font-weight:200 800; font-style:normal; font-display:swap;
  src:url('assets/fonts/Ottessa-Variable-Demo.woff2') format('woff2'),
      url('assets/fonts/Ottessa-Variable-Demo.woff') format('woff');
}
@font-face{ font-family:'Netto'; font-weight:100 900; font-style:normal; font-display:swap; src:url('assets/fonts/Netto-Variable-Demo.woff2') format('woff2'); }
@font-face{ font-family:'NettoIcons'; font-weight:100 900; font-style:normal; font-display:swap; src:url('assets/fonts/Netto-Icons-Variable-Demo.woff2') format('woff2'); }
@font-face{
  font-family:'Ottessa'; font-weight:200 800; font-style:italic; font-display:swap;
  src:url('assets/fonts/Ottessa-Variable-Italic-Demo.woff2') format('woff2');
}

:root{
  --ink:#14110B; --ink-soft:#3A3527; --ink-muted:#6F6A55;
  --yuzu:#F0D948; --yuzu-deep:#E6C400;
  --lime:#A6E22E; --lime-deep:#7FC216; --lime-soft:#EAF7C8;
  --leaf:#234023; --leaf-2:#2C4A2A;
  --red:#E5402E; --amber:#D98A12;
  --win:#FFFFFF; --surface:#F7F6F2; --surface-2:#F0EEE8;
  --line:rgba(20,17,11,0.08); --line-2:rgba(20,17,11,0.14);
  --font-title:'Ottessa','Instrument Sans',sans-serif;
  --font-icons:'NettoIcons','Instrument Sans',sans-serif;
  --font-sans:'Instrument Sans',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --r-pill:999px;
  --blur:26px; --tint:0.16; --grain:0.16;
}
*{ box-sizing:border-box; margin:0; padding:0; }
.title{ font-family:var(--font-title); font-weight:700; letter-spacing:-0.02em; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
.eyebrow{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-muted); }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

html,body{ height:100%; }
body{ font-family:var(--font-sans); color:var(--ink); -webkit-font-smoothing:antialiased; overflow:hidden; letter-spacing:-0.006em; }

/* ───────── DESKTOP + GRADIENT WALLPAPER ───────── */
.desktop{ position:fixed; inset:0; overflow:hidden; }
.wallpaper{ position:absolute; inset:-80px;
  background:
    radial-gradient(60% 52% at 16% 12%, #F6DCE8 0%, transparent 58%),
    radial-gradient(56% 50% at 86% 12%, #DCC6F0 0%, transparent 56%),
    radial-gradient(72% 64% at 82% 102%, #9DB4E6 0%, transparent 60%),
    radial-gradient(60% 56% at 6% 96%, #EBC9DA 0%, transparent 58%),
    linear-gradient(160deg,#ECE6F0 0%,#D7D6E6 50%,#C0C7DC 100%); }
.bgwin{ position:absolute; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 40px 90px -34px rgba(20,30,15,0.5); }
.bgwin .bar{ height:30px; background:#f6f7f4; display:flex; align-items:center; gap:6px; padding:0 12px; }
.bgwin .bar i{ width:11px; height:11px; border-radius:50%; }
.dot-r{ background:#ff5f57; } .dot-y{ background:#febc2e; } .dot-g{ background:#28c840; }
.bgwin .body{ padding:16px; display:flex; flex-direction:column; gap:9px; }
.bgwin .ln{ height:9px; border-radius:5px; background:rgba(20,30,15,0.08); }
.bgwin.a{ left:3%; top:24%; width:300px; height:220px; }
.bgwin.a .cover{ height:96px; border-radius:10px; background:linear-gradient(135deg,#b3a8d6,#cdd4e6); margin-bottom:10px; }
.bgwin.b{ right:3.5%; bottom:7%; width:330px; height:240px; }
.bgwin.b .hero{ height:118px; border-radius:10px; background:linear-gradient(135deg,#c2b3d8,#dfe2ee); margin-bottom:10px; }

.backdrop{ position:absolute; inset:0; transition:filter .6s var(--ease); will-change:filter; }
body.focus .backdrop{ filter:blur(var(--blur)); }
.tint{ position:absolute; inset:0; background:#15131c; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
body.focus .tint{ opacity:var(--tint); }
.grain{ position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode:overlay; transition:opacity .6s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.focus .grain{ opacity:var(--grain); }

/* ───────── MENU BAR (decorative only) ───────── */
.menubar{ position:absolute; top:0; left:0; right:0; height:26px; z-index:60; display:flex; align-items:center; gap:18px; padding:0 14px;
  background:rgba(16,20,10,0.4); backdrop-filter:blur(22px) saturate(1.3); color:rgba(255,255,255,0.92); font-size:13.5px; pointer-events:none;
  font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0; }
.menubar .apple{ width:15px; height:15px; opacity:0.95; }
.menubar .wbar-drag{ }
.macdock{ position:absolute; left:50%; bottom:9px; transform:translateX(-50%); z-index:58; display:flex; align-items:flex-end; gap:10px; padding:7px 11px;
  background:rgba(255,255,255,0.3); backdrop-filter:blur(34px) saturate(1.6); border:0.5px solid rgba(255,255,255,0.55); border-radius:21px; box-shadow:0 20px 50px -16px rgba(15,25,10,0.55); }
.macdock .app{ width:50px; height:50px; border-radius:13px; position:relative; overflow:hidden; box-shadow:0 5px 13px -3px rgba(15,25,10,0.45), inset 0 1px 0 rgba(255,255,255,0.5); transition:transform .18s var(--ease); display:flex; align-items:center; justify-content:center; }
.macdock .app::after{ content:''; position:absolute; left:0; right:0; top:0; height:46%; background:linear-gradient(rgba(255,255,255,0.42),transparent); pointer-events:none; }
.macdock .app svg{ position:relative; z-index:1; }
/* video play buttons use their inline SVG */
.macdock .app:hover{ transform:translateY(-9px) scale(1.06); }
.macdock .app.yuzu{ background:var(--leaf); cursor:pointer; } .macdock .app.yuzu img{ width:34px; height:34px; }
.macdock .app .run{ position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:rgba(20,17,11,0.55); }
.macdock .sep{ width:1px; height:42px; background:rgba(20,17,11,0.18); margin:0 2px; align-self:center; }
.menubar .mb-app{ font-weight:700; }
.menubar .mb-item{ opacity:0.85; }
.menubar .right{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:12.5px; }
.menubar .ic{ width:15px; height:15px; opacity:0.9; }
.menubar .mset{ pointer-events:auto; cursor:pointer; width:19px; height:19px; border-radius:5px; display:flex; align-items:center; justify-content:center; }
.menubar .mset img{ width:15px; height:15px; }
.menubar .mset:hover{ background:rgba(255,255,255,0.22); }
.menubar #menuVault{ width:auto; gap:6px; padding:0 8px; }

/* ───────── WINDOW ───────── */
.window{ position:absolute; top:calc((100vh - min(700px,78vh)) / 2 + 6px); left:50%; transform:translateX(-50%); width:min(1120px,82vw); height:min(700px,78vh); z-index:20;
  background:var(--win); border-radius:24px; overflow:hidden; display:flex;
  box-shadow:0 70px 150px -36px rgba(15,25,10,0.62), 0 0 0 0.5px rgba(20,17,11,0.10); transition:box-shadow .6s, width .4s var(--ease), height .4s var(--ease), top .4s var(--ease); }
.window.minimized{ transform:translate(-50%,130vh) scale(.4)!important; opacity:0; pointer-events:none; transition:transform .5s var(--ease), opacity .5s; }
.window.maxed{ width:97vw!important; height:92vh!important; top:34px!important; }
.wlights{ position:absolute; top:18px; left:18px; z-index:9; display:flex; gap:8px; }
.wlights i{ width:12px; height:12px; border-radius:50%; cursor:pointer; }
.wlights .r{ background:#ff5f57; } .wlights .y{ background:#febc2e; } .wlights .g{ background:#28c840; }
body.focus .window{ box-shadow:0 90px 190px -32px rgba(8,16,4,0.74), 0 0 0 0.5px rgba(255,255,255,0.35); }

/* ───────── DOCK (vertical nav rail inside window) ───────── */
/* ───────── FLOATING DOCK (radical, glass) ───────── */
.fdock{ position:absolute; right:16px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px;
  background:rgba(255,255,255,0.55); backdrop-filter:blur(30px) saturate(1.7); border:0.5px solid rgba(255,255,255,0.7); border-radius:24px;
  box-shadow:0 28px 58px -18px rgba(30,30,55,0.42), inset 0 1px 0 rgba(255,255,255,0.7); }
.fdock .logo{ width:48px; height:48px; border-radius:15px; background:none; display:flex; align-items:center; justify-content:center; margin-bottom:6px; cursor:pointer; transition:background .2s, transform .15s; }
.fdock .logo:hover{ background:rgba(20,17,11,0.06); transform:scale(1.05); }
.fdock .logo.on{ background:var(--ink); }
.fdock .logo img{ width:30px; height:30px; }
.fdock .di{ width:48px; height:48px; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:rgba(20,17,11,0.4); position:relative; transition:background .2s,color .2s,transform .15s; }
.fdock .di .l{ font-size:8px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; }
.fdock .di:hover{ background:rgba(20,17,11,0.06); color:var(--ink); transform:scale(1.05); }
.fdock .di.on{ background:var(--ink); color:var(--yuzu); }
.fdock .di .badge{ position:absolute; top:5px; right:8px; min-width:15px; height:15px; padding:0 4px; border-radius:99px; background:var(--red); color:#fff; font-size:8.5px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); }
.fdock .av{ width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--yuzu); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:700; margin-top:8px; }

/* ───────── MAIN STAGE ───────── */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--win); position:relative; }
.wbar{ height:52px; display:flex; align-items:center; gap:12px; padding:0 24px 0 86px; flex-shrink:0; }
.wbar .focus-toggle{ margin-left:auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.wbar .focus-toggle:hover{ background:var(--surface); color:var(--ink); }
.wbar .winsearch{ width:230px; height:32px; border-radius:var(--r-pill); background:var(--surface); display:flex; align-items:center; gap:8px; padding:0 13px; font-size:12.5px; color:var(--ink-muted); cursor:text; transition:width .35s var(--ease); }
.wbar .winsearch.expanded{ width:380px; }

.stage{ flex:1; min-height:0; position:relative; overflow:hidden; }
.view{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); overflow-y:auto; padding-right:84px; }
.view.on{ opacity:1; pointer-events:auto; }
.view::-webkit-scrollbar{ width:10px; } .view::-webkit-scrollbar-thumb{ background:rgba(20,17,11,0.12); border-radius:99px; border:3px solid #fff; }
.inner{ max-width:760px; margin:0 auto; padding:8px 44px 60px; }
.page-h{ font-family:var(--font-title); font-weight:700; font-size:30px; letter-spacing:-0.03em; }
.page-sub{ font-size:14px; color:var(--ink-muted); margin-top:7px; }
.seclab{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); margin:30px 0 14px; }
.seclab::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:2px; background:var(--lime-deep); margin-right:9px; vertical-align:1px; }
.pstep.goal .pnode{ background:var(--yuzu); color:var(--ink); }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:12px 22px; border-radius:var(--r-pill); transition:background .18s, color .18s, transform .12s; }
.btn:active{ transform:scale(.97); }
.btn-ink{ background:var(--ink); color:#fff; } .btn-ink:hover{ background:#000; }
.btn-lime{ background:var(--lime); color:var(--ink); } .btn-lime:hover{ background:var(--lime-deep); color:#fff; }
.btn-yuzu{ background:var(--yuzu); color:var(--ink); } .btn-yuzu:hover{ background:var(--yuzu-deep); }
.btn-quiet{ color:var(--ink-muted); } .btn-quiet:hover{ color:var(--ink); }
.btn-sm{ padding:8px 15px; font-size:12.5px; }

/* ───────── TODAY ───────── */
.today-top{ padding-top:6px; }
.today-h{ font-family:var(--font-title); font-weight:700; font-size:42px; letter-spacing:-0.035em; line-height:1.02; margin-top:12px; }
.today-h .mut{ color:var(--ink-muted); }
.today-sub{ font-size:15px; color:var(--ink-soft); margin-top:14px; }

/* stacking deck */
.deck-wrap{ margin-top:30px; }
.deck{ position:relative; height:262px; }
.deck .dcard{ padding:17px 22px; }
.deck .dcard .move{ font-size:18px; }
.deck .dcard .why{ font-size:13px; line-height:1.45; margin-top:7px; }
.deck .dcard .crow{ margin-top:16px; }
.dcard{ position:absolute; left:0; right:0; top:0; border:1px solid var(--line); border-radius:22px; background:#fff; padding:26px 28px;
  box-shadow:0 2px 4px rgba(20,17,11,0.03), 0 36px 70px -40px rgba(20,17,11,0.5); transform-origin:top center;
  transition:transform .5s var(--ease), opacity .5s var(--ease); will-change:transform,opacity; }
.dcard.gone{ pointer-events:none; }
.dcard.swipe-right{ box-shadow:0 0 0 2px var(--lime), 0 36px 70px -40px rgba(20,17,11,0.5); }
.dcard.swipe-left{ box-shadow:0 0 0 2px var(--red), 0 36px 70px -40px rgba(20,17,11,0.5); }
.dcard.swipe-right::after{ content:'APPROVE \2192'; position:absolute; top:16px; right:18px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.08em; color:var(--lime-deep); background:var(--lime-soft); padding:4px 10px; border-radius:99px; }
.dcard.swipe-left::after{ content:'\2190 SKIP'; position:absolute; top:16px; left:18px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.08em; color:var(--red); background:#FCE7E3; padding:4px 10px; border-radius:99px; }
.dcard .ctop{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.dcard .zu{ width:34px; height:34px; border-radius:50%; background:var(--yuzu); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dcard .zu img{ width:27px; height:27px; }
.dcard .ctag{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); }
.dcard .pin{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; }
.pin.hot{ background:#FCE7E3; color:var(--red); } .pin.go{ background:var(--lime-soft); color:var(--lime-deep); } .pin.warn{ background:#FBF1DA; color:var(--amber); }
.dcard .deal{ font-size:13px; color:var(--ink-muted); } .dcard .deal b{ color:var(--ink); }
.dcard .move{ font-family:var(--font-title); font-weight:700; font-size:23px; letter-spacing:-0.02em; line-height:1.2; margin:7px 0 0; }
.dcard .why{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin-top:11px; }
.dcard .crow{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.dcard .imp{ margin-left:auto; font-size:14px; font-weight:700; }
.deck-foot{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.deck-dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background .3s, width .3s; }
.deck-dot.on{ background:var(--ink); width:20px; border-radius:99px; }
.deck-done{ text-align:center; padding:50px 20px; border:1px dashed var(--line-2); border-radius:22px; }
.deck-done .ic{ width:54px; height:54px; border-radius:50%; background:var(--lime); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.deck-done .t{ font-family:var(--font-title); font-weight:700; font-size:22px; letter-spacing:-0.02em; }
.deck-done .s{ font-size:14px; color:var(--ink-muted); margin-top:8px; }

/* command / chat bar */
.command{ position:absolute; left:0; right:0; bottom:0; padding:16px 44px 22px; background:linear-gradient(to top,#fff 64%,rgba(255,255,255,0)); }
.cbar{ max-width:760px; margin:0 auto; display:flex; align-items:center; gap:11px; border:1px solid var(--line-2); border-radius:var(--r-pill); padding:10px 11px 10px 20px; background:#fff; box-shadow:0 16px 44px -18px rgba(20,17,11,0.32); }
.cbar .ph{ flex:1; font-size:14.5px; color:var(--ink-muted); }
.command .cbar-frame{ max-width:760px; margin:0 auto; }
.view[data-view="today"] .command .cbar{ max-width:400px; margin:0; padding:6px 7px 6px 18px; transition:max-width .4s var(--ease); }
.view[data-view="today"] .command .cbar .send{ width:32px; height:32px; }
.view[data-view="today"] .command .cbar .rec{ width:30px; height:30px; }
.view[data-view="today"] .command .cbar.expanded{ max-width:100%; }
.view[data-view="today"] .command{ background:linear-gradient(to top,#fff 86%, rgba(255,255,255,0)); }

/* ── VAULT IDE ── */
.view.vaultview{ overflow:hidden; padding-right:0; }
.vide{ height:100%; display:flex; }
.vtree{ width:240px; background:var(--surface); border-right:1px solid var(--line); padding:12px 10px; overflow-y:auto; flex-shrink:0; }
.vtree-h{ display:flex; align-items:center; gap:8px; font-family:var(--font-title); font-weight:700; font-size:17px; padding:4px 8px 12px; }
.vtree-h .vx{ margin-left:auto; color:var(--ink-muted); width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.vtree-h .vx:hover{ background:rgba(20,17,11,0.08); color:var(--ink); }
.vt-sec{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); padding:13px 8px 5px; }
.vt-item{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; font-size:13px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.vt-item:hover{ background:rgba(20,17,11,0.05); }
.vt-item.on{ background:var(--ink); color:var(--yuzu); }
.vt-item .vt-i{ font-size:12px; opacity:0.7; width:14px; text-align:center; }
.vmain{ flex:1; min-width:0; display:flex; flex-direction:column; background:#FBFAF7; }
.vmain-h{ padding:15px 22px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; display:flex; gap:7px; }
.vmain-h .vbreadcrumb{ color:var(--ink-muted); font-weight:500; }
.vgraph{ flex:1; position:relative; overflow:hidden; }
.vgraph svg{ width:100%; height:100%; display:block; }
.vdetail{ width:284px; background:#fff; border-left:1px solid var(--line); padding:16px; overflow-y:auto; flex-shrink:0; }
.vd-h{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin:6px 0 10px; }
.vd-card{ background:var(--surface); border-radius:12px; padding:14px; margin-bottom:12px; }
.vd-card .nm{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.vd-card .st{ font-size:9.5px; font-weight:700; color:var(--lime-deep); background:var(--lime-soft); padding:2px 8px; border-radius:99px; margin-left:auto; }
.vd-card .row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:5px 0; color:var(--ink-soft); }
.vd-card .row b{ font-family:var(--font-mono); color:var(--ink); font-weight:600; }
.vd-tool{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); padding:4px 0; display:flex; align-items:center; gap:7px; }
.vd-tool::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--lime-deep); }

/* ── VAULT as a separate window ── */
.vaultwin{ position:fixed; top:78px; left:50%; transform:translateX(-50%) scale(.98); width:min(1000px,88vw); height:min(620px,78vh); z-index:46;
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 70px 150px -30px rgba(15,25,10,0.62), 0 0 0 0.5px rgba(20,17,11,0.14);
  display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.vaultwin.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1); }
.vw-bar{ height:42px; display:flex; align-items:center; gap:12px; padding:0 15px; border-bottom:1px solid var(--line); flex-shrink:0; }
.vw-lights{ display:flex; gap:8px; } .vw-lights i{ width:12px; height:12px; border-radius:50%; } .vw-lights .r{ background:#ff5f57; cursor:pointer; } .vw-lights .y{ background:#febc2e; } .vw-lights .g{ background:#28c840; }
.vw-title{ font-size:13px; font-weight:600; }
.vaultwin .vide{ flex:1; min-height:0; height:auto; }

/* ── deal lifecycle / pattern projection ── */
.lifecard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-soft); }
.lifesvg{ width:100%; height:150px; display:block; }
.lifelbl{ font-family:var(--font-mono); font-size:10px; fill:var(--ink-muted); }
.life-x{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--ink-muted); margin-top:2px; }
.life-legend{ display:flex; gap:18px; margin-top:12px; font-size:11.5px; color:var(--ink-soft); align-items:center; }
.life-legend .sw{ display:inline-flex; align-items:center; gap:6px; }
.life-legend .sw i{ width:16px; height:0; border-top:1.5px dashed var(--ink-muted); }
.life-legend .sw .bd{ width:13px; height:11px; background:rgba(240,217,72,0.4); border-radius:2px; }
.life-facts{ margin-top:15px; padding-top:13px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--ink-soft); }
.life-facts b{ color:var(--ink); font-family:var(--font-mono); font-size:11.5px; }

/* ── deals: list/cohorts toggle ── */
.dl-toggle{ display:flex; gap:2px; padding:3px; background:var(--surface); border-radius:99px; }
.dl-toggle button{ padding:6px 14px; border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.dl-toggle button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.1); }
.cohorts{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:0; margin-top:18px; height:520px; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft); }
.coh{ padding:18px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.coh:nth-child(2n){ border-right:0; }
.coh:nth-child(n+3){ border-bottom:0; }
.dl-switch{ font-size:13px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:5px; }
.dl-switch:hover{ color:var(--leaf); }
.coh.def{ background:linear-gradient(160deg,#FBEAE6,#F8F2E9); }
.coh.rocket{ background:linear-gradient(160deg,#FBF3D6,#F5F1E5); }
.coh.spend{ background:#F4F3EE; }
.coh.grow{ background:#EDF2E7; }
.coh .ch{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.coh .ch i{ font-family:var(--font-sans); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-muted); margin-left:8px; }
.coh .crow{ display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid rgba(20,17,11,0.06); font-size:13.5px; }
.coh .crow:first-of-type{ border-top:0; margin-top:8px; }
.coh .crow .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.coh .crow .nm{ font-weight:600; flex:1; }
.coh .crow .arr{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.coh .empty{ font-size:12.5px; color:var(--ink-muted); margin-top:10px; }

/* ── events ── */
.ev-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ev-stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 16px; box-shadow:var(--shadow-soft); }
.ev-stat .k{ font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); }
.ev-stat .v{ font-family:var(--font-title); font-weight:700; font-size:26px; margin-top:8px; }
.ev-stat .s{ font-size:11.5px; color:var(--ink-muted); margin-top:6px; }
.ev-list{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px 18px; box-shadow:var(--shadow-soft); margin-top:18px; }
.ev-row{ display:grid; grid-template-columns:auto 1fr 90px 48px 44px; gap:14px; align-items:center; padding:14px 0; border-top:1px solid var(--line); }
.ev-row:first-of-type{ border-top:0; }
.ev-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime-deep); }
.ev-row .t{ font-size:14px; }
.ev-bar{ width:90px; height:6px; border-radius:99px; background:rgba(20,17,11,0.1); overflow:hidden; }
.ev-bar i{ display:block; height:100%; background:var(--lime-deep); }
.ev-row .frac{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); text-align:right; }
.ev-row .pct{ font-family:var(--font-mono); font-size:12px; font-weight:700; text-align:right; }

/* ── people ── */
.ppl-head,.ppl-row{ display:grid; grid-template-columns:1.5fr 1.3fr 1fr 0.8fr 1.2fr 1fr; gap:14px; align-items:center; }
.ppl-head{ padding:0 4px 10px; }
.ppl-head span{ font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); }
.ppl-row{ padding:13px 4px; border-top:1px solid var(--line); }
.ppl-row .who{ display:flex; align-items:center; gap:11px; }
.ppl-row .av{ width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--yuzu); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:700; flex-shrink:0; }
.ppl-row .nm{ font-size:14px; font-weight:600; } .ppl-row .role{ font-size:11.5px; color:var(--ink-muted); }
.ppl-row .deal{ font-size:13px; font-weight:600; } .ppl-row .dmeta{ font-size:11px; color:var(--ink-muted); }
.ppl-row .rel,.ppl-row .inf{ font-size:13px; }
.ppl-row .act .n{ font-size:13px; font-weight:600; }
.ppl-row .related{ font-size:12.5px; color:var(--ink-soft); }
.ppl-row{ cursor:pointer; }
.pp-overlay{ position:fixed; inset:0; z-index:48; background:rgba(20,17,11,0.16); opacity:0; pointer-events:none; transition:opacity .3s; }
.pp-overlay.open{ opacity:1; pointer-events:auto; }
.pp-panel{ position:fixed; top:0; right:0; bottom:0; width:380px; z-index:49; background:#fff; box-shadow:-24px 0 70px -24px rgba(20,17,11,0.45); transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; }
.pp-panel.open{ transform:none; }
.pp-head{ padding:24px 22px 18px; border-bottom:1px solid var(--line); position:relative; }
.pp-x{ position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-muted); }
.pp-x:hover{ background:var(--surface); color:var(--ink); }
.pp-av{ width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--yuzu); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:18px; font-weight:700; margin-bottom:12px; }
.pp-nm{ font-family:var(--font-title); font-weight:700; font-size:22px; letter-spacing:-0.02em; }
.pp-role{ font-size:13px; color:var(--ink-muted); margin-top:3px; }
.pp-sec{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); padding:18px 22px 6px; }
.pp-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 22px; font-size:13px; color:var(--ink-soft); }
.pp-row b{ color:var(--ink); font-weight:600; }
.pp-link{ padding:8px 22px; font-size:13px; color:var(--leaf); cursor:pointer; }
.pp-link:hover{ background:var(--surface); }
.pp-related{ padding:6px 22px 30px; font-size:13px; color:var(--ink-soft); }
.cbar .rec{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.cbar .rec:hover{ background:var(--surface); color:var(--ink); }

/* person/event intel — contained centered modal, not a viewport-edge slab */
.pp-panel{ position:fixed; top:50%; left:50%; right:auto; bottom:auto; width:440px; max-height:82vh; overflow-y:auto; border-radius:22px; transform:translate(-50%,-46%) scale(.96); box-shadow:0 44px 130px -28px rgba(20,17,11,0.55); opacity:0; pointer-events:none; transition:opacity .26s ease, transform .32s cubic-bezier(.2,.7,.3,1); }
.pp-panel.open{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.pp-overlay{ background:rgba(20,17,11,0.34); backdrop-filter:blur(2px); }
.pp-head{ border-radius:22px 22px 0 0; }

/* Deals sub-tabs (Deals / Events / People) — left gutter, top-aligned */
.view[data-view="deals"] .inner, .view[data-view="events"] .inner, .view[data-view="people"] .inner{ padding-left:140px; }
.subnav{ position:absolute; left:30px; top:50%; transform:translateY(-50%); z-index:22; display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.subtab{ background:none; border:0; cursor:pointer; padding:0; text-align:left; font-family:var(--font-title); font-weight:600; font-size:18px; letter-spacing:-0.01em; color:rgba(20,17,11,0.3); transition:color .15s; }
.subtab:hover{ color:rgba(20,17,11,0.55); }
.subtab.on{ color:var(--ink); }
.view[data-view="deals"] .page-h, .view[data-view="events"] .page-h, .view[data-view="people"] .page-h{ display:none; }
.cbar .send{ width:38px; height:38px; border-radius:50%; background:var(--yuzu); color:var(--ink); display:flex; align-items:center; justify-content:center; }
.cbar .send:hover{ background:var(--yuzu-deep); }

/* ───────── DEALS ───────── */
.drow{ display:flex; align-items:center; gap:16px; padding:19px 4px; border-top:1px solid var(--line); cursor:pointer; }
.drow:last-child{ border-bottom:1px solid var(--line); }
.drow .dd{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.drow .nm{ font-size:16.5px; font-weight:600; letter-spacing:-0.01em; }
.drow .ch{ font-size:13px; color:var(--ink-muted); margin-top:2px; }
.drow .arr{ margin-left:auto; font-size:16px; font-weight:700; width:66px; text-align:right; }
.drow .state{ font-size:13px; font-weight:500; color:var(--ink-soft); width:128px; text-align:right; }
.drow .chev{ color:var(--line-2); }

/* ───────── DEAL DETAIL ───────── */
.dback{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-muted); margin-bottom:14px; }
.dhead{ display:flex; align-items:flex-end; gap:16px; }
.dhead .nm{ font-family:var(--font-title); font-weight:700; font-size:38px; letter-spacing:-0.03em; }
.dhead .arr{ margin-left:auto; font-size:17px; font-weight:700; }
.dmeta{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.dmeta .pill{ font-size:11.5px; font-weight:500; color:var(--ink-soft); background:var(--surface); padding:5px 11px; border-radius:99px; }
.dmeta .pill.go{ background:var(--lime-soft); color:var(--lime-deep); font-weight:600; }
.read{ background:var(--surface); border-radius:18px; padding:20px 22px; margin-top:22px; display:flex; gap:13px; }
.read .zu{ width:34px; height:34px; border-radius:50%; background:var(--yuzu); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; } .read .zu img{ width:27px; height:27px; }
.read .who{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:5px; }
.read p{ font-size:15.5px; line-height:1.55; } .read p b{ background:var(--yuzu); padding:0 3px; border-radius:3px; }
.coach{ display:flex; flex-direction:column; gap:9px; }
.citem{ display:flex; align-items:center; gap:13px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; }
.citem.go{ background:var(--ink); color:#fff; border-color:var(--ink); }
.citem .mk{ width:28px; height:28px; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; flex-shrink:0; }
.citem.go .mk{ background:var(--yuzu); color:var(--ink); }
.citem .t{ font-size:14px; font-weight:500; line-height:1.4; }
.citem .b{ margin-left:auto; }
/* path */
.path{ position:relative; }
.pstep{ display:grid; grid-template-columns:22px 1fr; gap:14px; padding-bottom:18px; }
.pstep:last-child{ padding-bottom:0; }
.pnode{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; }
.prail{ display:flex; flex-direction:column; align-items:center; }
.pline{ flex:1; width:2px; background:var(--line); margin-top:2px; }
.pstep.done .pnode{ background:var(--leaf); color:#fff; } .pstep.now .pnode{ background:var(--yuzu); box-shadow:0 0 0 4px rgba(240,217,72,0.3); }
.pstep.next .pnode{ background:#fff; border:2px solid var(--line-2); } .pstep.next .pline{ background:repeating-linear-gradient(var(--ink-muted) 0 3px,transparent 3px 7px); opacity:.4; }
.pstep .pl{ font-size:14px; font-weight:600; } .pstep.next .pl{ color:var(--ink-muted); font-weight:500; }
.pstep .pw{ font-family:var(--font-mono); font-size:10px; color:var(--ink-muted); margin-top:3px; text-transform:uppercase; }

/* tldr card */
.tldr{ border:1px solid var(--line); border-radius:16px; overflow:hidden; max-width:420px; }
.tldr .v{ aspect-ratio:16/9; background:linear-gradient(135deg,var(--leaf),var(--ink)); position:relative; display:flex; align-items:center; justify-content:center; }
.tldr .v .yz{ position:absolute; right:0; top:0; width:58px; height:100%; background:var(--yuzu); }
.tldr .v .play{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; color:var(--ink); z-index:1; }
.tldr .v .lbl{ position:absolute; left:14px; top:13px; color:#fff; } .tldr .v .lbl .a{ font-weight:600; font-size:13.5px; } .tldr .v .lbl .b{ font-size:11px; opacity:.8; }
.tldr .v .dur{ position:absolute; left:14px; bottom:11px; font-family:var(--font-mono); font-size:11px; color:#fff; }
.tldr .m{ padding:13px 15px; display:flex; align-items:center; gap:10px; }

/* ───────── LIBRARY ───────── */
.libgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lcard{ border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .2s; }
.lcard:hover{ transform:translateY(-3px); }
.lcard .v{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--leaf),var(--ink)); position:relative; display:flex; align-items:center; justify-content:center; }
.lcard .v .yz{ position:absolute; right:0; top:0; width:46px; height:100%; background:var(--yuzu); }
.lcard .v .play{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; color:var(--ink); z-index:1; }
.lcard .v .dur{ position:absolute; left:12px; bottom:10px; font-family:var(--font-mono); font-size:11px; color:#fff; }
.lcard .m{ padding:13px 15px; } .lcard .m .t{ font-size:14px; font-weight:600; } .lcard .m .s{ font-size:12px; color:var(--ink-muted); margin-top:3px; }

/* ───────── LEADERBOARD ───────── */
.lb{ display:flex; flex-direction:column; }
.lbrow{ display:grid; grid-template-columns:40px 1fr auto auto; gap:16px; align-items:center; padding:15px 8px; border-top:1px solid var(--line); }
.lbrow:last-child{ border-bottom:1px solid var(--line); }
.lbrow.you{ background:var(--lime-soft); border-radius:14px; border-color:transparent; }
.lbrow .rk{ font-family:var(--font-title); font-weight:700; font-size:20px; text-align:center; color:var(--ink-muted); }
.lbrow.top1 .rk{ color:var(--lime-deep); }
.lbrow .who{ display:flex; align-items:center; gap:12px; }
.lbrow .av{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--yuzu); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; }
.lbrow .nm{ font-size:14.5px; font-weight:600; } .lbrow .yu{ font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:0.1em; color:var(--lime-deep); }
.lbrow .mo{ font-family:var(--font-title); font-weight:700; font-size:18px; } .lbrow .k{ font-family:var(--font-mono); font-size:9px; color:var(--ink-muted); text-transform:uppercase; text-align:right; }
.lbrow .won{ font-size:14px; font-weight:600; width:64px; text-align:right; }

/* ───────── ASK (chat) ───────── */
.chat{ display:flex; flex-direction:column; height:100%; }
.chatscroll{ flex:1; overflow-y:auto; padding:20px 96px 20px 44px; }
/* deal → chat mode */
.view.dealview{ overflow:hidden; padding-right:0; }
.dealview #dealDetail{ height:100%; overflow-y:auto; transition:padding .42s var(--ease); }
.dealview.chatmode #dealDetail{ max-width:none; margin:0; padding-left:52%; padding-right:40px; }
.deal-chat{ position:absolute; top:18px; bottom:18px; left:30px; right:auto; width:48%; z-index:25; background:none; display:flex; flex-direction:column;
  opacity:0; transform:translateX(-26px); pointer-events:none; transition:opacity .42s var(--ease), transform .42s var(--ease); }
.dealview.chatmode .deal-chat{ opacity:1; transform:none; pointer-events:auto; }
.dc-head{ padding:2px 4px 12px; border:0; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-muted); }
.dc-head .zu{ width:26px; height:26px; border-radius:50%; background:var(--yuzu); display:flex; align-items:center; justify-content:center; overflow:hidden; } .dc-head .zu img{ width:21px; height:21px; }
.dc-head .x{ margin-left:auto; color:var(--ink-muted); } .dc-head .x:hover{ color:var(--ink); }
.dc-scroll{ flex:1; overflow-y:auto; padding:4px 2px 8px; display:flex; flex-direction:column; gap:12px; }
.dc-scroll::-webkit-scrollbar{ width:8px; } .dc-scroll::-webkit-scrollbar-thumb{ background:rgba(20,17,11,0.12); border-radius:99px; border:2px solid #fff; }
.dc-scroll .earlier{ text-align:center; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); padding:2px 0 4px; }
.dc-scroll .msg{ max-width:100%; }
.dc-scroll .msg .bub{ font-size:13.5px; line-height:1.5; background:#fff; border-radius:15px; padding:10px 14px; box-shadow:0 10px 26px -16px rgba(20,17,11,0.4); }
.dc-scroll .msg.me .bub{ background:var(--ink); color:#fff; }
.dc-scroll .msg.faded{ opacity:0.4; }
.dc-compose{ margin-top:8px; padding:9px 9px 9px 16px; border:1px solid var(--line-2); border-radius:99px; background:rgba(255,255,255,0.82); backdrop-filter:blur(12px); box-shadow:0 12px 28px -14px rgba(20,17,11,0.32); display:flex; align-items:center; gap:9px; }
.dc-compose .ph{ flex:1; font-size:13px; color:var(--ink-muted); }
.dc-compose .send{ width:30px; height:30px; border-radius:50%; background:var(--yuzu); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chatscroll .inner2{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.msg{ display:flex; gap:11px; max-width:84%; }
.msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.msg .av{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.msg .av.zu{ background:var(--yuzu); } .msg .av.zu img{ width:24px; height:24px; }
.msg .av.me{ background:var(--ink); color:var(--yuzu); font-family:var(--font-mono); font-size:10px; font-weight:700; }
.msg .bub{ font-size:14.5px; line-height:1.55; } .msg.me .bub{ background:var(--surface); border-radius:14px; padding:10px 14px; }
.msg .bub b{ font-weight:600; }
.msg .tool{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); background:var(--surface); border-radius:9px; padding:7px 11px; margin-top:9px; }
.msg .tool .d{ width:6px; height:6px; border-radius:50%; background:var(--lime-deep); }

/* ───────── FOCUS PANEL (white glass) ───────── */
.focus-panel{ position:absolute; top:40px; right:20px; z-index:55; width:280px; display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:translateX(18px); pointer-events:none; transition:opacity .45s var(--ease), transform .45s var(--ease); }
body.focus .focus-panel{ opacity:1; transform:none; pointer-events:auto; }
body.focus.nopanel .focus-panel{ opacity:0; transform:translateX(18px); pointer-events:none; }
.fp-x{ position:absolute; top:-9px; right:-9px; z-index:3; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); box-shadow:0 6px 16px -5px rgba(20,17,11,0.45); }
.fp-x:hover{ background:var(--ink); color:#fff; }
.fp-card{ background:rgba(255,255,255,0.72); backdrop-filter:blur(36px) saturate(1.7); border:0.5px solid rgba(255,255,255,0.7); border-radius:20px; box-shadow:0 24px 56px -20px rgba(15,20,8,0.5), inset 0 1px 0 rgba(255,255,255,0.8); padding:14px; }
.fp-top{ display:flex; gap:10px; }
.fp-app{ flex:1; display:flex; align-items:center; gap:11px; padding:12px 14px; }
.fp-app .ai{ width:34px; height:34px; border-radius:9px; background:var(--leaf); display:flex; align-items:center; justify-content:center; } .fp-app .ai img{ width:24px; height:24px; }
.fp-app .t .a{ font-size:13px; font-weight:600; } .fp-app .t .b{ font-size:11px; color:var(--ink-muted); }
.fp-power{ width:52px; display:flex; align-items:center; justify-content:center; }
.fp-power button{ width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 4px 14px -4px rgba(20,17,11,0.4); display:flex; align-items:center; justify-content:center; } .fp-power button:hover{ background:var(--ink); color:#fff; }
.fp-mode{ display:flex; align-items:center; gap:12px; padding:13px 16px; }
.fp-mode .dm{ width:18px; height:18px; border-radius:50%; border:2px solid var(--ink); }
.fp-mode .lab{ font-size:14px; font-weight:600; } .fp-mode .val{ margin-left:auto; display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-soft); } .fp-mode .val .pip{ width:7px; height:7px; border-radius:50%; background:var(--lime-deep); }
.sliders{ display:flex; flex-direction:column; }
.sld{ display:flex; align-items:center; gap:13px; padding:9px 6px; }
.sld .si{ width:20px; display:flex; justify-content:center; color:var(--ink-soft); }
.sld .name{ font-size:13.5px; font-weight:500; width:42px; }
.sld input{ -webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:99px; background:rgba(20,17,11,0.16); outline:none; }
.sld input::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px -1px rgba(20,17,11,0.5); cursor:grab; }
.sld input::-moz-range-thumb{ width:18px; height:18px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 6px -1px rgba(20,17,11,0.5); }
.fp-start{ display:flex; align-items:center; gap:11px; width:100%; padding:14px; background:var(--ink); color:#fff; border-radius:18px; box-shadow:0 18px 44px -16px rgba(20,17,11,0.7); }
.fp-start .rc{ width:34px; height:34px; border-radius:50%; background:var(--lime); display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0; }
.fp-start .t{ text-align:left; } .fp-start .t .a{ font-size:14px; font-weight:600; } .fp-start .t .b{ font-size:11.5px; color:rgba(255,255,255,0.6); }
.fp-start:hover{ background:#000; }

/* ── avatar photo ── */
.fdock .av,.lbrow .av,.prof-head .pic,.post .av,.train-block .who .av{ overflow:hidden; }
.av img,.prof-head .pic img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }

/* ── MISC HUB ── */
.view.miscview{ overflow:hidden; padding-right:84px; }
.misc-nav{ position:absolute; left:30px; top:50%; transform:translateY(-50%); z-index:22; display:flex; flex-direction:column; gap:5px; }
.misc-nav .mn{ font-family:var(--font-sans); font-size:15.5px; font-weight:400; letter-spacing:-0.005em; color:rgba(20,17,11,0.34); padding:1px 0; background:none; white-space:nowrap; }
.misc-nav .mn svg{ display:none; }
.misc-nav .mn:hover{ color:var(--ink); }
.misc-nav .mn.on{ font-family:var(--font-sans); font-size:15.5px; font-weight:700; color:var(--ink); }
.misc-stage{ height:100%; overflow-y:auto; padding:8px 0 0; }
.misc-stage::-webkit-scrollbar{ width:10px; } .misc-stage::-webkit-scrollbar-thumb{ background:rgba(20,17,11,0.12); border-radius:99px; border:3px solid #fff; }
.msub{ display:none; } .msub.on{ display:block; }
.msub-in{ max-width:760px; margin:0 auto; padding:8px 44px 60px; }
.dealview.chatmode .talk-lbl,.dealview.chatmode #dealMsgBar{ display:none; }
.dealview .talk-lbl{ display:none; }
.dealview #dealMsgBar{ position:fixed; left:24px; right:auto; bottom:20px; width:152px; z-index:24; box-shadow:var(--shadow-pop); padding:7px 8px 7px 14px; overflow:hidden; }
.dealview #dealMsgBar .ph{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.dealview #dealMsgBar .send{ width:30px; height:30px; }
.posts{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.post{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow-soft); }
.post .ph{ display:flex; align-items:center; gap:10px; }
.post .av{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--yuzu); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; }
.post .av.zu{ background:var(--yuzu); } .post .av.zu img{ width:27px; height:27px; }
.post .nm{ font-size:14px; font-weight:700; } .post .tm{ font-size:11.5px; color:var(--ink-muted); }
.post .body{ font-size:14.5px; line-height:1.5; margin-top:11px; }
.post .chip{ display:inline-block; margin-top:11px; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--lime-deep); background:var(--lime-soft); padding:4px 10px; border-radius:99px; }
.post .foot{ margin-top:13px; }
.post .kudos2{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border:1px solid var(--line-2); padding:6px 13px; border-radius:99px; cursor:pointer; }
.post .kudos2:hover,.post .kudos2.on{ background:var(--yuzu); border-color:var(--yuzu); color:var(--ink); }
.train-block{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-soft); margin-top:14px; }
.train-block .who{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.train-block .who .av{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; flex-shrink:0; }
.train-block .who .av.mgr{ background:var(--leaf); color:#fff; } .train-block .who .av.zu{ background:var(--yuzu); } .train-block .who .av.zu img{ width:26px; height:26px; }
.train-block .who .nm{ font-size:13.5px; font-weight:700; } .train-block .who .r{ font-size:11px; color:var(--ink-muted); }
.train-block .note{ font-size:14.5px; line-height:1.55; } .train-block .note b{ background:var(--yuzu); padding:0 3px; border-radius:3px; }
.train-vids{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.tvid{ border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; }
.tvid .v{ aspect-ratio:16/9; background:linear-gradient(135deg,#7B8BC9,#2C3A66); position:relative; display:flex; align-items:center; justify-content:center; }
.tvid .v .play{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.tvid .v .dur{ position:absolute; right:10px; bottom:8px; font-family:var(--font-mono); font-size:11px; color:#fff; }
.tvid .m{ padding:11px 13px; } .tvid .t{ font-size:13px; font-weight:600; } .tvid .s{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; }
.train-streak{ display:flex; align-items:center; gap:14px; background:var(--lime-soft); border-radius:14px; padding:16px 18px; margin-top:14px; }
.train-streak .flame{ width:46px; height:46px; border-radius:50%; background:var(--lime); display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0; }
.train-streak .v{ font-family:var(--font-title); font-weight:700; font-size:24px; } .train-streak .k{ font-size:12px; color:var(--ink-soft); margin-top:2px; }

/* ── PROFILE ── */
.prof-head{ display:flex; align-items:center; gap:18px; margin:8px 0 22px; }
.prof-head .pic{ width:74px; height:74px; border-radius:50%; background:var(--ink); color:var(--yuzu); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:22px; font-weight:700; flex-shrink:0; }
.prof-head .nm{ font-family:var(--font-title); font-weight:700; font-size:30px; letter-spacing:-0.02em; }
.prof-head .r{ font-size:13.5px; color:var(--ink-muted); margin-top:3px; }
.prof-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.pstat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 14px; box-shadow:var(--shadow-soft); }
.pstat.hl{ background:var(--lime-soft); border-color:transparent; }
.pstat .v{ font-family:var(--font-title); font-weight:700; font-size:25px; letter-spacing:-0.02em; }
.pstat .k{ font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); margin-top:6px; }
.prof-grid{ display:flex; gap:3px; flex-wrap:wrap; }
.prof-grid .col{ display:flex; flex-direction:column; gap:3px; }
.prof-grid .cell{ width:13px; height:13px; border-radius:3px; background:rgba(20,17,11,0.06); }
.prof-grid .cell.l1{ background:#C9E89B; } .prof-grid .cell.l2{ background:#A6E22E; } .prof-grid .cell.l3{ background:var(--lime-deep); }
.prof-badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pbadge{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 12px; text-align:center; box-shadow:var(--shadow-soft); }
.pbadge .em{ width:46px; height:46px; border-radius:50%; background:var(--yuzu); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; margin-bottom:9px; }
.pbadge.lock{ opacity:0.5; } .pbadge.lock .em{ background:rgba(20,17,11,0.06); color:var(--ink-muted); }
.pbadge .nm{ font-size:12.5px; font-weight:600; } .pbadge .ds{ font-size:10.5px; color:var(--ink-muted); margin-top:3px; }
.fdock .av{ cursor:pointer; transition:transform .15s; } .fdock .av:hover{ transform:scale(1.06); }

/* ── SETTINGS ── */
.set-in{ max-width:580px; margin:0 auto; padding:8px 44px 60px; height:100%; overflow-y:auto; }
.set-row{ display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line); }
.set-row .ic{ width:36px; height:36px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; }
.set-row .t{ flex:1; } .set-row .t .a{ font-size:14.5px; font-weight:600; } .set-row .t .b{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; }
.toggle{ width:44px; height:26px; border-radius:99px; background:var(--line-2); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle.on{ background:var(--lime-deep); }
.toggle::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.toggle.on::after{ left:21px; }
.seg{ display:flex; gap:3px; padding:3px; background:var(--surface); border-radius:99px; flex-shrink:0; }
.seg button{ padding:6px 13px; border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.1); }

/* ── LIBRARY workspace (email / linkedin / materials) ── */
.mailrow{ display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:14px 8px; border-top:1px solid var(--line); cursor:pointer; }
.mailrow:hover{ background:var(--surface); } .mailrow:first-of-type{ border-top:0; }
.mailrow .dot{ width:8px; height:8px; border-radius:50%; }
.mailrow .subj{ font-size:14px; font-weight:600; } .mailrow .prev{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; }
.mailrow .tm{ font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); white-space:nowrap; }
.composer-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow-soft); }
.composer-card .top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.composer-card .av{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; } .composer-card .av img{ width:100%; height:100%; object-fit:cover; }
.composer-card .nm{ font-size:13.5px; font-weight:700; } .composer-card .r{ font-size:11.5px; color:var(--ink-muted); }
.composer-card .ph{ font-size:14.5px; color:var(--ink-muted); min-height:54px; line-height:1.5; }
.composer-card .foot{ display:flex; align-items:center; gap:8px; justify-content:flex-end; border-top:1px solid var(--line); padding-top:12px; margin-top:6px; }
.matcard{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 16px; box-shadow:var(--shadow-soft); cursor:pointer; margin-bottom:10px; }
.matcard:hover{ transform:translateY(-1px); }
.matcard .ic{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.matcard .t{ font-size:14px; font-weight:600; } .matcard .s{ font-size:12px; color:var(--ink-muted); margin-top:2px; }
.matcard .go{ margin-left:auto; color:var(--line-2); }