@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#100E0B}
.sg{
--bg:#100E0B;--surface:#181510;--surface-2:#141109;--surface-3:rgba(248,242,232,.028);--raise:#231F18;
--line:rgba(240,232,218,.09);--line-soft:rgba(240,232,218,.05);
--text:#EDE7DC;--muted:#A69C8D;--faint:#6C6456;
--accent:#F2A93B;--accent-hover:#FCBB56;--accent-press:#D9962F;--accent-soft:rgba(242,169,59,.1);--on-accent:#1A1206;--accent-ink:#F2A93B;
--success:#4FB89E;--success-soft:rgba(79,184,158,.12);
--warning:#F2A93B;--warning-soft:rgba(242,169,59,.12);
--danger:#DD6A5C;--danger-hover:#E87C6F;--danger-soft:rgba(221,106,92,.12);
--info:#7FA8D9;--info-soft:rgba(127,168,217,.12);
--c-product:#7FA8D9;--c-capital:#F2A93B;--c-growth:#4FB89E;--c-media:#DD8AA0;--c-ops:#A395DE;
--linkedin:#0A66C2;--linkedin-hover:#1A76D2;
--serif:'Instrument Serif','Newsreader',Georgia,'Times New Roman',serif;
--font:'Hanken Grotesk','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
--mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--fs-display:62px;--fs-h1:38px;--fs-h2:25px;--fs-h3:16px;--fs-body:15px;--fs-caption:13px;--fs-micro:11px;--fs-data:13px;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;
--r-xs:3px;--r-sm:6px;--r-md:9px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
--e-1:0 1px 2px rgba(0,0,0,.3);--e-2:0 12px 40px -18px rgba(0,0,0,.7);--e-3:0 30px 80px -28px rgba(0,0,0,.82);
--glow-accent:0 0 0 1px rgba(242,169,59,.2),0 8px 26px -14px rgba(242,169,59,.26);
--dur-1:120ms;--dur-2:200ms;--dur-3:320ms;
--ease:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.22,.9,.25,1.25);
--ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;
font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
display:flex;align-items:stretch;
}
.sg--light{
--bg:#F4EFE7;--surface:#FFFFFF;--surface-2:#FAF6EF;--surface-3:rgba(40,28,14,.03);--raise:#F6F1E8;
--line:rgba(40,30,16,.1);--line-soft:rgba(40,30,16,.055);
--text:#1E1811;--muted:#6E6355;--faint:#A79C8B;
--accent-soft:rgba(242,169,59,.15);--on-accent:#1A1206;--accent-ink:#996009;
--e-1:0 1px 2px rgba(40,30,16,.06);--e-2:0 12px 40px -18px rgba(40,30,16,.16);--e-3:0 30px 80px -28px rgba(40,30,16,.2);
--glow-accent:0 0 0 1px rgba(242,169,59,.35),0 8px 26px -14px rgba(242,169,59,.3);
--ring:0 0 0 2px var(--surface),0 0 0 4px var(--accent);
}
/* --- typography --- */
.t-display{font-family:var(--serif);font-size:var(--fs-display);line-height:1.08;font-weight:400;letter-spacing:-.01em;margin:0}
.t-h1{font-family:var(--serif);font-size:var(--fs-h1);line-height:1.12;font-weight:400;letter-spacing:-.01em;margin:0}
.t-h2{font-family:var(--serif);font-size:var(--fs-h2);line-height:1.24;font-weight:400;letter-spacing:-.005em;margin:0}
.t-h3{font-size:var(--fs-h3);line-height:1.35;font-weight:600;letter-spacing:-.01em;margin:0}
.t-body{font-size:var(--fs-body);line-height:1.62;font-weight:400;margin:0}
.t-cap{font-size:var(--fs-caption);line-height:1.5;color:var(--muted);margin:0}
.t-micro{font-size:var(--fs-micro);line-height:1.4;margin:0}
.t-data{font-family:var(--mono);font-size:var(--fs-data);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.t-label{font-family:var(--font);font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0}
.t-serif-it{font-family:var(--serif);font-style:italic;font-weight:400}
.mut{color:var(--muted)}.fnt{color:var(--faint)}.acc{color:var(--accent-ink)}
/* --- layout --- */
.sg-nav{position:sticky;top:0;align-self:flex-start;width:236px;flex:none;height:100vh;overflow-y:auto;border-right:1px solid var(--line);background:var(--surface-2);padding:var(--sp-5) var(--sp-3) var(--sp-6)}
.sg-brand{display:flex;align-items:center;gap:10px;padding:0 var(--sp-3) var(--sp-5)}
.sg-brand-mark{width:30px;height:30px;position:relative;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;color:var(--accent)}
.sg-brand-mark::after{content:"R"}
.sg-navtitle{font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:var(--sp-5) var(--sp-3) var(--sp-2)}
.sg-navlink{display:block;padding:7px var(--sp-3);border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-size:var(--fs-caption);font-weight:400;transition:background var(--dur-1) var(--ease),color var(--dur-1);letter-spacing:-.01em}
.sg-navlink:hover{background:var(--surface-3);color:var(--text)}
.sg-main{flex:1;min-width:0;max-width:1120px;margin:0 auto;padding:var(--sp-8) var(--sp-7) var(--sp-8)}
.sg-hero{border-bottom:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-8);position:relative;margin-bottom:var(--sp-8)}
.sg-hero-scan{display:none}
.sg-sec{margin-top:var(--sp-8);scroll-margin-top:var(--sp-4)}
.sg-sec-head{display:flex;align-items:baseline;gap:var(--sp-4);padding-bottom:var(--sp-4);margin-bottom:var(--sp-6);border-bottom:1px solid var(--line)}
.sg-sec-num{font-family:var(--serif);color:var(--accent);font-size:var(--fs-h2);line-height:1;font-weight:400;font-style:italic}
.sg-sub{margin:var(--sp-7) 0 var(--sp-5);display:flex;align-items:center;gap:var(--sp-4)}
.sg-sub::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.sg-note{font-size:var(--fs-caption);color:var(--muted);max-width:64ch;margin-top:var(--sp-2)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.stage{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:flex-start}
.stage.pad-lg{padding:var(--sp-7)}
.state-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);min-width:120px}
.state-tag{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);letter-spacing:.04em}
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.vp-frame{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden}
.vp-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint)}
.vp-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.varlabel{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);margin-top:6px}
/* token swatches */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.sw{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.sw-chip{height:64px}
.sw-meta{padding:10px 12px}
.sw-name{font-size:var(--fs-caption);font-weight:600}
.sw-var{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);margin-top:2px}
.sw-hex{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint)}
.scale-row{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.scale-spec{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);white-space:nowrap;min-width:160px}
.space-bar{background:var(--accent-soft);border-left:2px solid var(--accent);height:20px}
.radbox{border:1px solid var(--line);background:var(--surface-3);display:flex;align-items:flex-end;justify-content:center;padding:8px;height:74px}
.radchip{width:100%;height:44px;background:var(--accent-soft);border:1px solid var(--accent)}
.elbox{height:88px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted)}
/* theme toggle */
.sg-theme{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:5px 6px;cursor:pointer;color:var(--muted);font-size:var(--fs-caption);font-weight:600;font-family:var(--font)}
.sg-theme:hover{color:var(--text);border-color:var(--faint)}
.sg-theme-ic{width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:inset -6px -3px 0 var(--surface)}
.sg--light .sg-theme-ic{background:var(--info);box-shadow:none}
/* === buttons === */
.btn{--bh:40px;height:var(--bh);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border-radius:var(--r-md);font-family:var(--font);font-size:var(--fs-body);font-weight:600;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform var(--dur-1) var(--ease),background var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1),color var(--dur-1);user-select:none}
.btn:active,.btn.is-active{transform:scale(.97)}
.btn:focus-visible,.btn.is-focus{outline:none;box-shadow:var(--ring)}
.btn[disabled],.btn.is-disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.btn.sm{--bh:32px;padding:0 13px;font-size:var(--fs-caption)}
.btn.lg{--bh:48px;padding:0 24px;font-size:var(--fs-h3)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow-accent)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--accent-hover)}
.btn-primary:active,.btn-primary.is-active{background:var(--accent-press)}
.btn-secondary{background:var(--raise);color:var(--text);border-color:var(--line)}
.sg--light .btn-secondary{background:var(--surface)}
.btn-secondary:hover,.btn-secondary.is-hover{border-color:var(--faint);background:var(--surface-3)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover,.btn-ghost.is-hover{background:var(--surface-3);color:var(--text)}
.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn-danger:hover,.btn-danger.is-hover{background:var(--danger);color:#fff}
.btn-linkedin{background:var(--linkedin);color:#fff}
.btn-linkedin:hover,.btn-linkedin.is-hover{background:var(--linkedin-hover)}
.icon-btn{width:40px;height:40px;padding:0;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;transition:all var(--dur-1) var(--ease)}
.icon-btn:hover,.icon-btn.is-hover{background:var(--surface-3);color:var(--text);border-color:var(--line)}
.icon-btn:focus-visible,.icon-btn.is-focus{outline:none;box-shadow:var(--ring)}
.icon-btn.sm{width:32px;height:32px}
.btn .ic,.icon-btn .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.spin{animation:sgspin .7s linear infinite}
@keyframes sgspin{to{transform:rotate(360deg)}}
.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 2px;animation:sgdot 1s var(--ease) infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes sgdot{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.motion-track{height:8px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;margin-bottom:10px}
.motion-ball{position:absolute;top:-4px;left:0;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:var(--glow-accent);transition:left var(--md) var(--me)}
.motion-demo:hover .motion-ball{left:calc(100% - 16px)}
/* === chips & badges === */
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:var(--fs-caption);font-weight:600;cursor:pointer;transition:all var(--dur-1) var(--ease);white-space:nowrap;user-select:none;font-family:var(--font)}
.chip:hover,.chip.is-hover{border-color:var(--faint);color:var(--text)}
.chip:focus-visible,.chip.is-focus{outline:none;box-shadow:var(--ring)}
.chip .cdot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.chip .cx{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;opacity:.6}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.sg--light .chip.on{background:var(--text);color:var(--surface)}
.chip.on .cx{opacity:.7}
.chip.count::after{content:attr(data-count);font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);margin-left:2px}
.chip.on.count::after{color:var(--bg);opacity:.6}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--line-soft);color:var(--muted);font-size:var(--fs-micro);font-weight:600;font-family:var(--mono);letter-spacing:.02em}
.tag .cdot{width:6px;height:6px}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:var(--r-pill);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-family:var(--mono)}
.badge .bdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-new{background:var(--accent-soft);color:var(--accent)}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-neutral{background:var(--surface-3);color:var(--muted);border:1px solid var(--line-soft)}
.count-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.count-badge.coral{background:var(--danger);color:#fff}
/* === avatars === */
.av{position:relative;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--raise),var(--surface-2));display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-caption);color:var(--text);flex:none;border:1px solid var(--line)}
.av.sm{width:30px;height:30px;font-size:var(--fs-micro)}
.av.lg{width:56px;height:56px;font-size:var(--fs-h3)}
.av-status{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--surface)}
.av-status.online{background:var(--success)}
.av-status.incity{background:var(--accent)}
.av-status.away{background:var(--faint)}
.av-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color var(--dur-1)}
.av-chip:hover{border-color:var(--faint)}
/* === cards === */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-1);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2),transform var(--dur-2)}
.card.hoverable:hover{border-color:var(--faint);box-shadow:var(--e-2);transform:translateY(-2px)}
.card.unread{border-left:3px solid var(--accent)}
.card.read{opacity:.62}
.card-w{width:360px;max-width:100%}
.card-w.wide{width:440px}
/* contact compact */
.c-compact{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.c-compact .c-body{flex:1;min-width:0}
.c-compact .c-name{font-weight:600;font-size:var(--fs-body);display:flex;align-items:center;gap:8px}
.c-compact .c-meta{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-strength{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);display:flex;align-items:center;gap:5px}
.strength-bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.strength-bars i{width:3px;background:var(--line);border-radius:1px}
.strength-bars i.on{background:var(--success)}
/* contact expanded */
.c-dossier{padding:var(--sp-5)}
.c-dossier-top{display:flex;gap:var(--sp-4);align-items:flex-start}
.c-dossier-name{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em}
.c-dossier-role{color:var(--muted);font-size:var(--fs-caption);margin-top:2px}
.c-facts{display:grid;grid-template-columns:auto 1fr;gap:8px var(--sp-4);margin:var(--sp-4) 0;padding:var(--sp-4) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.c-facts dt{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:700;padding-top:2px}
.c-facts dd{margin:0;font-size:var(--fs-caption)}
.c-facts dd.data{font-family:var(--mono);color:var(--text)}
/* signal card */
.sig{padding:var(--sp-4)}
.sig-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sig-src{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-family:var(--mono);color:var(--muted);letter-spacing:.02em}
.sig-src .srcdot{width:16px;height:16px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff}
.src-li{background:#0A66C2}.src-x{background:#111}.src-fb{background:#1877F2}
.sig--light .src-x,.sg--light .src-x{background:#222}
.sig-type{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-xs)}
.st-post{background:var(--surface-3);color:var(--muted)}
.st-job{background:var(--info-soft);color:var(--info)}
.st-ask{background:var(--accent-soft);color:var(--accent)}
.st-offer{background:var(--success-soft);color:var(--success)}
.sig-quote{font-size:var(--fs-body);line-height:1.5;margin:8px 0 12px}
.sig-actions{display:flex;align-items:center;gap:2px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line-soft)}
.sig-time{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint)}
/* match card */
.match{padding:var(--sp-5);position:relative;overflow:hidden}
.match-glow{position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);pointer-events:none}
.match-score{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);color:var(--accent)}
.match-score b{font-size:30px;font-weight:800;line-height:1}
.match-pair{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 0}
.match-vs{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.match-vs svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.match-person{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.match-person .mp-name{font-weight:600;font-size:var(--fs-caption)}
.match-person .mp-tag{font-size:var(--fs-micro);color:var(--muted)}
.match-reason{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-caption);line-height:1.5;color:var(--text);margin:var(--sp-4) 0}
.match-reason b{color:var(--accent)}
.match-draft{background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-caption);color:var(--muted);font-style:italic;line-height:1.5}
/* group card */
.group{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.group-stack{display:flex}
.group-stack .av{margin-left:-10px;border:2px solid var(--surface)}
.group-stack .av:first-child{margin-left:0}
.group-more{margin-left:-10px;width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted)}
/* interest card */
.interest{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.interest-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.kw-row{display:flex;flex-wrap:wrap;gap:6px}
.kw{font-family:var(--mono);font-size:var(--fs-micro);background:var(--surface-3);border:1px solid var(--line-soft);border-radius:var(--r-xs);padding:3px 8px;color:var(--text)}
.interest-foot{display:flex;align-items:center;justify-content:space-between;padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
/* event card */
.event{display:flex;gap:var(--sp-4);padding:var(--sp-4);align-items:center}
.event-date{flex:none;width:56px;text-align:center;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:8px 0}
.event-date .ed-day{font-family:var(--mono);font-size:22px;font-weight:800;line-height:1;color:var(--text)}
.event-date .ed-mon{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-top:3px}
/* switch (used in interest/forms) */
.switch{position:relative;width:40px;height:24px;border-radius:var(--r-pill);background:var(--line);border:none;cursor:pointer;transition:background var(--dur-2) var(--ease);flex:none;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform var(--dur-2) var(--ease-spring),background var(--dur-2)}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(16px);background:var(--on-accent)}
.switch:focus-visible{outline:none;box-shadow:var(--ring)}
/* === navigation === */
.appbar{display:flex;align-items:center;gap:var(--sp-4);padding:10px var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);flex-wrap:wrap}
.appbar-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em}
.appbar-brand .m{width:22px;height:22px;border-radius:6px;background:radial-gradient(circle at 30% 30%,var(--accent),#B97C1E);box-shadow:var(--glow-accent)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:3px}
.seg button{height:30px;padding:0 14px;border:none;background:transparent;color:var(--muted);font-family:var(--font);font-size:var(--fs-caption);font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all var(--dur-1) var(--ease);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button.on{background:var(--raise);color:var(--text);box-shadow:var(--e-1)}
.seg.mini button{padding:0 10px}
.seg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.bell{position:relative}
.bell .count-badge{position:absolute;top:-4px;right:-4px}
.searchbar{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--faint)}
.searchbar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.searchbar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:var(--fs-caption)}
.searchbar input::placeholder{color:var(--faint)}
.searchbar kbd{font-family:var(--mono);font-size:10px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
/* sidebar tabs */
.sidenav{width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3)}
.snav-item{display:flex;align-items:center;gap:11px;padding:9px var(--sp-3);border-radius:var(--r-md);color:var(--muted);cursor:pointer;font-weight:500;font-size:var(--fs-caption);transition:all var(--dur-1) var(--ease);position:relative}
.snav-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.snav-item:hover{background:var(--surface-3);color:var(--text)}
.snav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.snav-item.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--accent)}
.snav-item .count-badge{margin-left:auto}
/* mobile tab bar */
.tabbar{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;box-shadow:var(--e-2)}
.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border:none;background:transparent;color:var(--faint);cursor:pointer;font-family:var(--font);font-size:10px;font-weight:600;border-radius:var(--r-md);transition:color var(--dur-1)}
.tabbar-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.tabbar-item.on{color:var(--accent)}
.tabbar-fab{flex:none;width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-accent);cursor:pointer;margin:-14px 4px 0}
.tabbar-fab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4}
/* === forms === */
.field{display:flex;flex-direction:column;gap:6px;max-width:340px}
.field-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.input{height:42px;padding:0 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--text);font-family:var(--font);font-size:var(--fs-body);outline:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1)}
.input::placeholder{color:var(--faint)}
.input:hover{border-color:var(--faint)}
.input:focus,.input.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input:disabled,.input.is-disabled{opacity:.45;cursor:not-allowed}
.input.is-error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.input.is-success{border-color:var(--success)}
textarea.input{height:auto;padding:11px 13px;resize:vertical;line-height:1.5;font-family:var(--font)}
.select-wrap{position:relative}
.select-wrap svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2;pointer-events:none}
select.input{width:100%;appearance:none;padding-right:36px;cursor:pointer}
.field-msg{font-size:var(--fs-micro);display:flex;align-items:center;gap:5px}
.field-msg.err{color:var(--danger)}
.field-msg.ok{color:var(--success)}
.field-msg.hint{color:var(--muted)}
/* checkbox */
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--fs-caption);color:var(--text);user-select:none}
.check .box{width:20px;height:20px;border-radius:var(--r-xs);border:1.5px solid var(--line);background:var(--surface-2);display:flex;align-items:center;justify-content:center;transition:all var(--dur-1) var(--ease);flex:none}
.check .box svg{width:12px;height:12px;stroke:var(--on-accent);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:all var(--dur-1) var(--ease-spring)}
.check.on .box{background:var(--accent);border-color:var(--accent)}
.check.on .box svg{opacity:1;transform:scale(1)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);max-width:340px}
/* inline add */
.inline-add{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 13px;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted);background:var(--surface-2);max-width:340px;transition:border-color var(--dur-1)}
.inline-add:focus-within{border-color:var(--accent);border-style:solid}
.inline-add input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:var(--fs-caption)}
.inline-add input::placeholder{color:var(--faint)}
/* global search overlay */
.gsearch{width:440px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-3);overflow:hidden}
.gsearch-in{display:flex;align-items:center;gap:10px;padding:14px var(--sp-4);border-bottom:1px solid var(--line-soft)}
.gsearch-in svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2}
.gsearch-in input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:var(--fs-h3);font-family:var(--font)}
.gsearch-group{padding:8px 0}
.gsearch-cat{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:700;padding:6px var(--sp-4)}
.gsearch-row{display:flex;align-items:center;gap:10px;padding:8px var(--sp-4);cursor:pointer;font-size:var(--fs-caption)}
.gsearch-row:hover,.gsearch-row.on{background:var(--surface-3)}
.gsearch-row .gk{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint)}
/* === notifications === */
.notif-panel{width:380px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-3);overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px var(--sp-4);border-bottom:1px solid var(--line-soft)}
.notif-list{max-height:340px;overflow-y:auto}
.notif{display:flex;gap:11px;padding:13px var(--sp-4);border-bottom:1px solid var(--line-soft);position:relative;cursor:pointer;transition:background var(--dur-1)}
.notif:hover{background:var(--surface-3)}
.notif.unread{background:var(--accent-soft)}
.notif.unread::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.notif.unread{padding-left:22px}
.notif-ic{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex:none;background:var(--surface-2)}
.notif-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.notif-txt{flex:1;min-width:0}
.notif-txt .nt{font-size:var(--fs-caption);line-height:1.45}
.notif-txt .nm{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);margin-top:3px}
.notif-txt b{color:var(--text);font-weight:600}
/* toast */
.toast{display:flex;align-items:center;gap:12px;padding:13px var(--sp-4);background:var(--raise);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-2);min-width:320px;max-width:420px;transition:opacity var(--dur-3) var(--ease)}
.toast .ti{width:20px;height:20px;flex:none;stroke-width:2;fill:none}
.toast.success .ti{stroke:var(--success)}
.toast.info .ti{stroke:var(--info)}
.toast.danger .ti{stroke:var(--danger)}
.toast-body{flex:1;font-size:var(--fs-caption)}
.toast-body .tt{font-weight:600}
.toast-body .ts{color:var(--muted);margin-top:1px}
.toast-x{color:var(--faint);cursor:pointer;flex:none}
.toast-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
/* empty state */
.empty{text-align:center;padding:var(--sp-7) var(--sp-5);border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2);max-width:360px}
.empty-orb{width:64px;height:64px;margin:0 auto var(--sp-4);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--surface-3),transparent);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint)}
.empty-orb svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
/* === graph & map === */
.graph-stage{position:relative;width:100%;height:360px;background:radial-gradient(130% 120% at 50% 38%,var(--surface),var(--bg));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.graph-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 58% at 50% 44%,transparent,rgba(0,0,0,.4));pointer-events:none}
.graph-stage svg.edges{position:absolute;inset:0;width:100%;height:100%}
.gnode{--nc:var(--muted);position:absolute;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--nc);background:var(--surface);border:1.5px solid var(--nc);box-shadow:0 8px 22px -8px rgba(0,0,0,.7);cursor:pointer;transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2);z-index:1}
.gnode:hover{transform:translate(-50%,-50%) scale(1.08)}
.gnode.selected{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 1px var(--accent),0 0 30px -4px var(--accent);z-index:2}
.gnode.match{border-color:var(--accent)}
.gnode.match::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--accent);animation:matchpulse 2.2s var(--ease-out) infinite}
@keyframes matchpulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.glegend{position:absolute;left:16px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px 16px;z-index:3}
.glegend .lg{display:flex;align-items:center;gap:7px;font-size:var(--fs-micro);color:var(--muted);letter-spacing:.01em}
.glegend .ld{width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px 0 currentColor}
/* map */
.map-stage{position:relative;width:100%;height:360px;background:radial-gradient(130% 120% at 50% 30%,var(--surface),var(--bg));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.map-stage svg.grat{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.map-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 45%,transparent,rgba(0,0,0,.3));pointer-events:none}
.marker{position:absolute;transform:translate(-50%,-100%);cursor:pointer;z-index:1}
.marker-pin{--nc:var(--muted);width:40px;height:40px;border-radius:50%;background:var(--surface);border:1.5px solid var(--nc);box-shadow:0 10px 24px -8px rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;position:relative;color:var(--nc)}
.marker-pin::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:var(--surface);border-right:1.5px solid var(--nc);border-bottom:1.5px solid var(--nc)}
.marker-pin span{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--nc)}
.marker.incity{z-index:2}
.marker.incity .marker-pin{--nc:var(--accent);box-shadow:0 0 0 5px var(--accent-soft),0 0 26px -6px var(--accent),0 10px 24px -8px rgba(0,0,0,.75)}
.map-popup{position:absolute;transform:translate(-50%,calc(-100% - 50px));width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-3);padding:var(--sp-4);z-index:5}
.map-popup::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
/* in-city prompt */
.incity-prompt{width:360px;max-width:100%;background:linear-gradient(150deg,var(--surface),var(--surface-2));border:1px solid var(--accent);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--glow-accent);position:relative;overflow:hidden}
.incity-prompt::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
/* === panels & workflow === */
.sheet{width:400px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e-3);overflow:hidden}
.sheet-hero{padding:var(--sp-5);background:linear-gradient(160deg,var(--surface),var(--surface-2));border-bottom:1px solid var(--line-soft);position:relative}
.sheet-close{position:absolute;top:14px;right:14px}
.sheet-body{padding:var(--sp-5)}
.sheet-cta{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-soft);display:flex;gap:8px}
.mycard{background:linear-gradient(150deg,#16233a,var(--surface-2));border:1px solid var(--accent);position:relative;overflow:hidden}
.sg--light .mycard{background:linear-gradient(150deg,#fff,#fff6e8)}
.mycard::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.mycard-share{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-md);padding:11px var(--sp-3);font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted)}
/* stepper */
.stepper{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-4)}
.step-dot{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);font-weight:600;color:var(--faint)}
.step-dot .sn{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-micro);flex:none}
.step-line{flex:1;height:1px;background:var(--line)}
#introWorkflow[data-step="1"] .step-1{color:var(--accent)}
#introWorkflow[data-step="1"] .step-1 .sn{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
#introWorkflow[data-step="2"] .step-dot{color:var(--success)}
#introWorkflow[data-step="2"] .step-dot .sn{border-color:var(--success);background:var(--success-soft);color:var(--success)}
#introWorkflow[data-step="2"] .step-line{background:var(--success)}
#introWorkflow[data-step="1"] .wf-sent{display:none}
#introWorkflow[data-step="2"] .wf-draft{display:none}
/*==ADD==*/
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}
@media (max-width:1000px){.sg-nav{display:none}.sg-main{padding:var(--sp-5)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}.t-display{font-size:30px}.sg-main{padding:var(--sp-4)}}