/* ── 1. DESIGN TOKENS (exact from main.css) ─────────────────── */
:root {
  --bg-0:       #f8fafc;
  --bg-panel:   #ffffff;
  --bg-elevated:#ffffff;
  --bg-2:       #f1f5f9;
  --bg-card:    #ffffff;
  --code-bg:    #0b1220;
  --border:        #e2e8f0;
  --border-subtle: rgba(15,23,42,0.08);
  --border-teal:   rgba(20,184,166,0.22);
  --border-blue:   rgba(59,130,246,0.2);
  --text-1:    #0f172a;
  --text-2:    #475569;
  --text-3:    #64748b;
  --text-code: #7DD3FC;
  --blue:        #3B82F6;
  --blue-dim:    rgba(59,130,246,0.1);
  --teal:        #14B8A6;
  --teal-dim:    rgba(20,184,166,0.1);
  --violet:      #8B5CF6;
  --violet-dim:  rgba(139,92,246,0.1);
  --amber:       #F59E0B;
  --amber-dim:   rgba(245,158,11,0.1);
  --coral:       #F97316;
  --coral-dim:   rgba(249,115,22,0.1);
  --green:       #10B981;
  --green-dim:   rgba(16,185,129,0.1);
  --red:         #EF4444;
  --red-dim:     rgba(239,68,68,0.1);
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --font-icon: 'Material Symbols Rounded';
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --s1:0.25rem;--s2:0.5rem;--s3:0.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:20px;--r-full:9999px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
  --shadow-md: 0 4px 20px rgba(15,23,42,0.08);
  --shadow-lg: 0 8px 32px rgba(15,23,42,0.10);
  --glow-blue: 0 0 40px rgba(59,130,246,0.12);
  --max-w: 1280px;
  --header-h: 60px;
  --ease: cubic-bezier(0.4,0,0.2,1);
}

/* ── 2. RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg-0);color:var(--text-1);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg-0);min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:600;line-height:1.2;color:var(--text-1);letter-spacing:-0.02em}
p{color:var(--text-2);line-height:1.75}
a{color:var(--teal);text-decoration:none;transition:color 0.18s var(--ease)}
a:hover{color:var(--text-1)}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;border:none;background:none;font:inherit}
code,pre,kbd{font-family:var(--font-mono)}
code:not(pre code){background:rgba(15,23,42,0.06);color:#0E7490;padding:0.15em 0.4em;border-radius:var(--r-sm);font-size:0.85em;border:1px solid rgba(15,23,42,0.12)}
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6);overflow-x:auto;line-height:1.65;font-size:var(--text-sm);margin:var(--s8) 0;position:relative}
pre code{background:transparent;color:var(--text-code);padding:0;border:none;font-size:1em}
ul,ol{padding-left:var(--s6)}
li{color:var(--text-2);line-height:1.75;margin-bottom:var(--s2)}

/* ── 3. MATERIAL SYMBOLS ───────────────────────────────────────── */
.ms{font-family:'Material Symbols Rounded';font-weight:300;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;-webkit-font-smoothing:antialiased;vertical-align:middle}
.ms--sm{font-size:16px}
.ms--lg{font-size:24px}
.ms--fill{font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 20}

/* ── 4. LAYOUT ─────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--s6)}
.page-layout{display:grid;grid-template-columns:1fr 272px;gap:var(--s8);align-items:start;padding:var(--s8) 0 var(--s16)}
.page-main{min-width:0}
.page-toc{position:sticky;top:calc(var(--header-h) + var(--s4));min-width:0}
@media(max-width:1024px){.page-layout{grid-template-columns:1fr}.page-toc{display:none}}

/* ── 5. PREVIEW BAR ────────────────────────────────────────────── */
.pvbar{background:#0b1220;color:#cbd5e1;display:flex;align-items:center;gap:var(--s4);padding:8px 20px;font-size:13px;border-bottom:1px solid #1e293b;flex-wrap:wrap;position:sticky;top:0;z-index:9999}
.pvbar-label{color:#94a3b8;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.pvseg{display:inline-flex;background:#1e293b;border-radius:var(--r-lg);padding:3px;gap:3px}
.pvseg button{background:transparent;color:#94a3b8;font:inherit;font-size:12px;font-weight:600;padding:5px 14px;border-radius:var(--r-md);cursor:pointer;transition:all .15s}
.pvseg button.on.free{background:#0ea5e9;color:#fff}
.pvseg button.on.pro{background:#8B5CF6;color:#fff}
#pv-who{font-weight:700;color:#e2e8f0;font-family:var(--font-mono)}
.pvbar-spacer{flex:1}
.pvbar-file{color:#475569;font-family:var(--font-mono);font-size:11px}

/* ── 6. SITE HEADER ────────────────────────────────────────────── */
.site-header{background:rgba(7,11,20,0.97);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,0.07);height:var(--header-h);display:flex;align-items:center;position:sticky;top:41px;z-index:200}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s6);height:100%;display:flex;align-items:center;gap:var(--s4);width:100%}
.site-branding{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;text-decoration:none}
.logo-pulse{width:7px;height:7px;background:var(--teal);border-radius:50%;flex-shrink:0;animation:logopulse 3s ease-in-out infinite}
@keyframes logopulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
.site-title{font-size:var(--text-base);font-weight:700;color:#f1f5f9;letter-spacing:-0.02em}
.site-title span{color:var(--teal)}
.header-badge{font-family:var(--font-mono);font-size:9px;font-weight:500;color:var(--violet);background:var(--violet-dim);border:1px solid rgba(139,92,246,0.2);padding:2px 7px;border-radius:var(--r-full);letter-spacing:.08em;text-transform:uppercase}
.main-nav{flex:1;display:flex;align-items:center;gap:0;padding:0 var(--s3)}
.main-nav a{font-size:var(--text-sm);font-weight:500;color:rgba(255,255,255,.55);padding:var(--s2) var(--s3);border-radius:var(--r-md);transition:all .15s;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:#f1f5f9;background:rgba(255,255,255,.04)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.btn-header{display:flex;align-items:center;gap:6px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--r-full);transition:background .2s,transform .2s;text-decoration:none}
.btn-header:hover{background:#60A5FA;color:#fff;transform:translateY(-1px)}
@media(max-width:768px){.main-nav{display:none}.header-badge{display:none}}

/* ── 7. READING PROGRESS ───────────────────────────────────────── */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:transparent;z-index:9998;pointer-events:none}
.reading-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .1s linear;box-shadow:0 0 10px rgba(59,130,246,.6)}

/* ── 8. BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-sm);color:var(--text-3);padding:var(--s6) 0 var(--s4);font-family:var(--font-mono);flex-wrap:wrap}
.breadcrumb a{color:var(--text-3)}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb-sep{color:var(--border);user-select:none}

/* ── 9. SECTION ANATOMY ────────────────────────────────────────── */
.guc-section{margin-bottom:var(--s10);scroll-margin-top:calc(var(--header-h)+60px)}
.sec-header{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6)}
.sec-header h2{font-size:var(--text-xl);margin:0;letter-spacing:-.02em}
.sec-icon{width:36px;height:36px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.sec-icon--blue{background:var(--blue-dim);color:var(--blue)}
.sec-icon--teal{background:var(--teal-dim);color:var(--teal)}
.sec-icon--amber{background:var(--amber-dim);color:var(--amber)}
.sec-icon--red{background:var(--red-dim);color:var(--red)}
.sec-icon--violet{background:var(--violet-dim);color:var(--violet)}
.sec-icon--green{background:var(--green-dim);color:var(--green)}
.pro-pill{display:inline-flex;align-items:center;gap:4px;background:var(--violet-dim);border:1px solid rgba(139,92,246,.22);color:var(--violet);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-full);margin-left:auto}

/* ── 10. HERO SECTION ──────────────────────────────────────────── */
.guc-hero{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s8);margin-bottom:var(--s8);box-shadow:var(--shadow-md)}
.guc-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s6)}
.guc-hero-left{flex:1;min-width:240px}
.guc-hero-left h1{font-family:var(--font-mono);font-size:var(--text-3xl);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--s3);color:var(--text-1)}
.guc-hero-tagline{font-size:var(--text-base);color:var(--text-2);line-height:1.6;max-width:52ch}
.guc-hero-right{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-end;flex-shrink:0}
.risk-badge{display:inline-flex;align-items:center;gap:var(--s2);padding:6px 14px;border-radius:var(--r-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(239,68,68,.3);background:var(--red-dim);color:var(--red)}
.risk-badge::before{content:'';display:block;width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulsedot 2s ease-in-out infinite}
@keyframes pulsedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
.evidence-badge{display:inline-flex;align-items:center;gap:var(--s2);padding:4px 10px;border-radius:var(--r-full);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--blue-dim);border:1px solid rgba(59,130,246,.25);color:var(--blue)}
.evidence-badge::before{content:'';display:block;width:5px;height:5px;background:var(--blue);border-radius:50%}

.guc-fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s6)}
.guc-fact{background:var(--bg-panel);padding:var(--s4)}
.guc-fact dt{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s1);font-family:var(--font-mono)}
.guc-fact dd{font-size:var(--text-sm);font-weight:600;color:var(--text-1);font-family:var(--font-mono)}

.guc-decision-bar{display:flex;gap:var(--s4);flex-wrap:wrap;padding:var(--s4) var(--s5);background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.15);border-radius:var(--r-lg)}
.decision-item{flex:1;min-width:200px}
.decision-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-family:var(--font-mono);margin-bottom:var(--s1)}
.decision-val{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}

.symptom-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.symptom-tag{font-family:var(--font-mono);font-size:11px;padding:3px 10px;border:1px solid var(--border);border-radius:var(--r-full);color:var(--text-3);background:var(--bg-2)}

/* ── 11. WHAT IT DOES ──────────────────────────────────────────── */
.explainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s6)}
@media(max-width:640px){.explainer-grid{grid-template-columns:1fr}}
.explainer-col h3{font-size:var(--text-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s3);font-family:var(--font-mono)}
.check-list,.cross-list{display:flex;flex-direction:column;gap:var(--s2)}
.check-item,.cross-item{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--text-sm);color:var(--text-2);line-height:1.55}
.check-item .ms{color:var(--green);font-size:16px;flex-shrink:0;margin-top:1px}
.cross-item .ms{color:var(--red);font-size:16px;flex-shrink:0;margin-top:1px}
.misconception-card{margin-top:var(--s6);background:var(--amber-dim);border:1px solid rgba(245,158,11,.22);border-radius:var(--r-lg);padding:var(--s5)}
.misconception-card .mc-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--s2)}
.misconception-card p{font-size:var(--text-sm);color:var(--text-2);margin:0;line-height:1.6}
.diagram-card{margin-top:var(--s6);background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6)}
.diagram-card .d-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4)}

/* ── 12. LAB EVIDENCE ──────────────────────────────────────────── */
.evidence-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);margin-bottom:var(--s6)}
.ev-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
.ev-card-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s2)}
.ev-card-val{font-size:var(--text-sm);font-weight:600;color:var(--text-1);font-family:var(--font-mono)}
.lab-validated-banner{display:flex;align-items:center;gap:var(--s3);background:var(--blue-dim);border:1px solid rgba(59,130,246,.22);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.lab-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--bg-panel);border:1px solid rgba(59,130,246,.3);padding:4px 12px;border-radius:var(--r-full);white-space:nowrap}
.lab-banner-text{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}
.lab-banner-text strong{color:var(--text-1)}

/* ── 13. PERF CURVE ────────────────────────────────────────────── */
.curve-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-sm)}
.curve-meta-row{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.curve-shape-pill{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--r-full);border:1px solid rgba(59,130,246,.22);background:var(--blue-dim);color:var(--blue);letter-spacing:.06em;text-transform:uppercase}
.curve-flip-pill{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--r-full);border:1px solid rgba(16,185,129,.22);background:var(--green-dim);color:var(--green);letter-spacing:.06em}
.chart-wrap{position:relative;height:300px;margin:var(--s4) 0}
.curve-finding{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-top:var(--s5)}
.finding-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--s2)}
.finding-text{font-size:var(--text-sm);color:var(--text-2);line-height:1.6}
.curve-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin-top:var(--s5)}
.curve-table th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600;padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);font-family:var(--font-mono)}
.curve-table td{padding:8px 10px;border-bottom:1px solid rgba(226,232,240,.5);color:var(--text-2);font-family:var(--font-mono);font-size:var(--text-sm)}
.curve-table tr:last-child td{border-bottom:none}
.curve-table .flip-row td{background:var(--green-dim);color:var(--green)}
.curve-table .disk-row td{color:var(--text-3)}
.honesty-note{margin-top:var(--s4);border-left:3px solid var(--amber);padding:var(--s3) var(--s4);background:var(--amber-dim);border-radius:0 var(--r-md) var(--r-md) 0}
.honesty-note .hn-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--s1)}
.honesty-note p{font-size:var(--text-sm);color:var(--text-2);margin:0;line-height:1.6}

/* ── 14. FAILURE TIMELINE ──────────────────────────────────────── */
.incident-header{background:var(--red-dim);border:1px solid rgba(239,68,68,.22);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s6)}
.inc-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:var(--s2)}
.inc-trigger{font-size:var(--text-sm);color:var(--text-2);font-family:var(--font-mono)}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:var(--s6)}
.timeline::before{content:'';position:absolute;left:11px;top:24px;bottom:24px;width:1px;background:var(--border)}
.tl-step{display:flex;align-items:flex-start;gap:var(--s4);padding-bottom:var(--s6);position:relative}
.tl-step:last-child{padding-bottom:0}
.tl-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:calc(-1 * var(--s6));border:2px solid var(--bg-0);z-index:1;font-size:12px;font-weight:700;font-family:var(--font-mono)}
.tl-dot--trigger{background:var(--amber);color:#fff}
.tl-dot--pressure{background:var(--coral);color:#fff}
.tl-dot--oom{background:var(--red);color:#fff}
.tl-dot--restart{background:var(--text-3);color:#fff}
.tl-dot--drop{background:var(--text-1);color:#fff}
.tl-body{flex:1;padding-top:2px}
.tl-title{font-size:var(--text-sm);font-weight:700;color:var(--text-1);margin-bottom:var(--s1)}
.tl-desc{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin-bottom:var(--s2)}
.evidence-toggle{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-mono);font-size:11px;color:var(--text-3);cursor:pointer;padding:4px 0;user-select:none;transition:color .15s}
.evidence-toggle:hover{color:var(--blue)}
.evidence-toggle .ms{font-size:14px;transition:transform .2s}
details.ev-detail[open] .evidence-toggle .ms{transform:rotate(90deg)}
.ev-log{background:var(--code-bg);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:var(--s4);margin-top:var(--s2);overflow-x:auto}
.ev-log code{font-family:var(--font-mono);font-size:11px;color:#86efac;display:block;line-height:1.7;white-space:pre}
.ev-log code .err{color:#fca5a5}
.ev-log code .dim{color:#475569}
.ev-log code .hi{color:#fbbf24}

/* ── 15. SAFE USAGE GUIDE ──────────────────────────────────────── */
.safe-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:640px){.safe-grid{grid-template-columns:1fr}}
.safe-col{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm)}
.safe-col--do{border-top:3px solid var(--green)}
.safe-col--avoid{border-top:3px solid var(--red)}
.safe-col-header{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.safe-col-icon{width:32px;height:32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.safe-col-icon--do{background:var(--green-dim);color:var(--green)}
.safe-col-icon--avoid{background:var(--red-dim);color:var(--red)}
.safe-col h3{font-size:var(--text-sm);font-weight:700;margin:0;color:var(--text-1)}
.safe-list{display:flex;flex-direction:column;gap:var(--s3)}
.safe-item{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--text-sm);color:var(--text-2);line-height:1.55}
.safe-item .ms{font-size:16px;flex-shrink:0;margin-top:2px}
.safe-item--do .ms{color:var(--green)}
.safe-item--avoid .ms{color:var(--red)}
.safe-item--warn .ms{color:var(--amber)}

/* ── 16. BEFORE / AFTER ────────────────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.ba-card{border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm)}
.ba-card--low{background:var(--bg-panel);border:1px solid var(--border)}
.ba-card--sweet{background:var(--green-dim);border:1px solid rgba(16,185,129,.22)}
.ba-card--danger{background:var(--red-dim);border:1px solid rgba(239,68,68,.22)}
.ba-setting{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:700;color:var(--text-1);margin-bottom:var(--s1)}
.ba-card--sweet .ba-setting{color:var(--green)}
.ba-card--danger .ba-setting{color:var(--red)}
.ba-method{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3);margin-bottom:var(--s3);padding:3px 8px;background:rgba(15,23,42,.05);border-radius:var(--r-sm);display:inline-block}
.ba-latency{font-size:var(--text-2xl);font-weight:700;color:var(--text-1);margin-bottom:var(--s2)}
.ba-card--sweet .ba-latency{color:var(--green)}
.ba-card--danger .ba-latency{color:var(--red)}
.ba-note{font-size:var(--text-xs);color:var(--text-2);line-height:1.5}
.ba-source{font-family:var(--font-mono);font-size:10px;color:var(--text-3);margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--border)}
.ba-verdict{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-full);margin-bottom:var(--s3)}
.ba-verdict--low{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,.22)}
.ba-verdict--sweet{background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.22)}
.ba-verdict--danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.22)}

/* ── 17. VERSION MATRIX ────────────────────────────────────────── */
.ver-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ver-table th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-family:var(--font-mono);background:var(--bg-2)}
.ver-table td{padding:10px 14px;border-bottom:1px solid rgba(226,232,240,.5);color:var(--text-2);font-family:var(--font-mono);font-size:var(--text-sm)}
.ver-table tr:last-child td{border-bottom:none}
.ver-table .changed{color:var(--amber);font-weight:700}
.ver-table .same{color:var(--text-3)}
.ver-table-wrap{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.change-highlight{background:rgba(245,158,11,.06)}

/* ── 18. PARAMETER INTERACTIONS ────────────────────────────────── */
.interaction-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
@media(max-width:768px){.interaction-layout{grid-template-columns:1fr}}
.int-cards{display:flex;flex-direction:column;gap:var(--s3)}
.int-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4) var(--s5);box-shadow:var(--shadow-sm);transition:box-shadow .15s}
.int-card:hover{box-shadow:var(--shadow-md)}
.int-param{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;color:var(--blue);margin-bottom:var(--s1)}
.int-effect-pill{display:inline-flex;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-full);margin-bottom:var(--s2)}
.int-effect-pill--multi{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.22)}
.int-effect-pill--add{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,.22)}
.int-effect-pill--comp{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(59,130,246,.22)}
.int-formula{font-family:var(--font-mono);font-size:11px;background:var(--bg-2);padding:4px 8px;border-radius:var(--r-sm);color:var(--text-2);display:block;margin-bottom:var(--s2)}
.int-detail{font-size:var(--text-xs);color:var(--text-3);line-height:1.5}
.int-tested{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-full);margin-top:var(--s2)}
.int-tested--yes{background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.22)}
.int-tested--no{background:var(--bg-2);color:var(--text-3);border:1px solid var(--border)}

/* ── 19. OPS METADATA ──────────────────────────────────────────── */
.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3)}
.ops-badge{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-sm)}
.ops-badge-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s2)}
.ops-badge-val{font-size:var(--text-sm);font-weight:700;display:flex;align-items:center;gap:var(--s2)}

/* ── 20. MONITORING ────────────────────────────────────────────── */
.monitoring-grid{display:flex;flex-direction:column;gap:var(--s5)}
.mon-block{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.mon-block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s5);background:var(--bg-2);border-bottom:1px solid var(--border)}
.mon-block-title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.copy-btn{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;color:var(--text-3);padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-panel);cursor:pointer;transition:all .15s}
.copy-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
.copy-btn .ms{font-size:13px}
.mon-block pre{margin:0;border:none;border-radius:0;background:var(--code-bg)}

/* ── 21. RAW EVIDENCE ──────────────────────────────────────────── */
.raw-ev-section{display:flex;flex-direction:column;gap:var(--s4)}
.raw-ev-block{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.raw-ev-block summary{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--text-1);list-style:none;background:var(--bg-panel)}
.raw-ev-block summary::-webkit-details-marker{display:none}
.raw-ev-block summary .ms{font-size:14px;color:var(--text-3);transition:transform .2s;flex-shrink:0}
details[open].raw-ev-block summary .ms.chev{transform:rotate(90deg)}
.raw-ev-block summary .ev-type{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-full);background:var(--bg-2);color:var(--text-3);border:1px solid var(--border)}
.raw-ev-block pre{margin:0;border:none;border-radius:0;border-top:1px solid var(--border)}

/* ── 22. PRO GATE ──────────────────────────────────────────────── */
.pro-gate{background:linear-gradient(135deg,rgba(139,92,246,.05),rgba(59,130,246,.05));border:1px solid rgba(139,92,246,.2);border-radius:var(--r-xl);padding:var(--s8);text-align:center}
.pro-gate-icon{font-size:32px;margin-bottom:var(--s3)}
.pro-gate h3{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--s3);color:var(--text-1)}
.pro-gate p{font-size:var(--text-sm);color:var(--text-2);max-width:40ch;margin:0 auto var(--s5)}
.pro-gate-features{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-bottom:var(--s5)}
.pro-gate-feat{font-family:var(--font-mono);font-size:11px;padding:4px 12px;border-radius:var(--r-full);border:1px solid rgba(139,92,246,.22);background:var(--violet-dim);color:var(--violet)}
.btn-pro-cta{display:inline-flex;align-items:center;gap:var(--s2);background:var(--violet);color:#fff;font-size:var(--text-sm);font-weight:700;padding:10px 24px;border-radius:var(--r-full);transition:background .2s,transform .2s;text-decoration:none}
.btn-pro-cta:hover{background:#7C3AED;color:#fff;transform:translateY(-1px)}

/* ── 23. TOC SIDEBAR ───────────────────────────────────────────── */
.toc-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm)}
.toc-title{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4);display:block}
.toc-nav{display:flex;flex-direction:column;gap:0}
.toc-link{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs);color:var(--text-3);padding:6px var(--s2);border-left:2px solid transparent;border-radius:0;transition:all .15s;line-height:1.4}
.toc-link:hover{color:var(--teal);border-left-color:var(--teal);background:var(--teal-dim);border-radius:0 var(--r-sm) var(--r-sm) 0}
.toc-link.active{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.toc-link .ms{font-size:14px;flex-shrink:0}
.toc-link .toc-pro{font-size:9px;font-weight:700;color:var(--violet);background:var(--violet-dim);border:1px solid rgba(139,92,246,.2);padding:1px 5px;border-radius:var(--r-full);margin-left:auto}
.toc-divider{height:1px;background:var(--border);margin:var(--s2) 0}

.param-meta-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--shadow-sm);margin-top:var(--s4)}
.param-meta-title{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4);display:block}
.param-meta-rows{display:flex;flex-direction:column;gap:var(--s3)}
.param-meta-row{display:flex;flex-direction:column;gap:var(--s1)}
.pm-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pm-val{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--text-1)}
.pm-val--risk{color:var(--red)}
.pm-val--good{color:var(--green)}

/* ── 24. KEY FINDINGS (AI CITATION BLOCKS) ─────────────────────── */
.ai-citation-block{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);margin:var(--s6) 0}
.ai-citation-block h3{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4)}
.findings-list{display:flex;flex-direction:column;gap:var(--s3)}
.finding-item{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--text-sm);color:var(--text-2);line-height:1.55}
.finding-num{font-family:var(--font-mono);font-size:10px;font-weight:700;min-width:20px;height:20px;border-radius:50%;background:var(--blue-dim);color:var(--blue);border:1px solid rgba(59,130,246,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.finding-num--risk{background:var(--red-dim);color:var(--red);border-color:rgba(239,68,68,.22)}
.finding-num--rec{background:var(--green-dim);color:var(--green);border-color:rgba(16,185,129,.22)}

/* ── 25. FOOTER ────────────────────────────────────────────────── */
.site-footer{background:rgba(7,11,20,0.97);border-top:1px solid rgba(255,255,255,.07);padding:var(--s10) 0;margin-top:var(--s16)}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s6);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:var(--s3)}
.footer-brand-dot{width:6px;height:6px;background:var(--teal);border-radius:50%}
.footer-brand-name{font-size:var(--text-sm);font-weight:700;color:rgba(241,245,249,.8);letter-spacing:-.01em}
.footer-text{font-size:var(--text-xs);color:rgba(100,116,139,.8);font-family:var(--font-mono)}

/* ── 26. FREE vs PRO VISIBILITY ───────────────────────────────── */
/* Pro content: hidden by default (free), visible only for is-pro body class */
.pro-only{display:none}
body.is-pro .pro-only{display:block}
.pro-gate{display:block}
body.is-pro .pro-gate{display:none}