/* SOC Console Theme — shared palette, base styles, and component classes */
/* Used by all pages in ChickenLoner.github.io */

/* ── CSS variables ────────────────────────────────────────── */
:root {
  --soc-bg:    #0d1117;
  --soc-bg-1:  #161b22;
  --soc-bg-2:  #1c2433;
  --soc-line:  #253040;
  --soc-line2: #374d6c;
  --soc-ink:   #eef3ff;
  --soc-ink2:  #c4ceea;
  --soc-ink3:  #8a9bbf;
  --soc-ink4:  #5e718a;
  --soc-cy:    #22e1ff;
  --soc-cy2:   #06b8d9;
  --soc-am:    #ffb547;
  --soc-gn:    #3ddc84;
  --soc-rd:    #ff5577;
  --soc-vi:    #a78bfa;
  --soc-am-star:     #ffb547;
  --soc-retired-bg:  #ffb547;
  --soc-retired-txt: #1a1a1a;
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--soc-bg); color: var(--soc-ink); font-family: system-ui, -apple-system, sans-serif; margin: 0; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes socbp  { 50% { opacity:.3; } }
.animate-fadeIn { animation: fadeIn 0.45s ease-out; }
.animate-spin   { animation: spin 0.8s linear infinite; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--soc-bg); }
::-webkit-scrollbar-thumb        { background: var(--soc-line2); border-radius: 3px; transition: background .15s; }
::-webkit-scrollbar-thumb:hover  { background: var(--soc-cy2); }
::-webkit-scrollbar-corner       { background: var(--soc-bg); }
* { scrollbar-color: var(--soc-line2) var(--soc-bg); scrollbar-width: thin; }

/* ── Top bar ──────────────────────────────────────────────── */
.soc-tb { position:sticky;top:0;z-index:50;background:rgba(13,17,23,.94);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid var(--soc-line); }
.soc-tb-row { display:flex;align-items:center;gap:14px;padding:9px 22px;font-size:12px;flex-wrap:wrap; }
.soc-live { display:inline-flex;align-items:center;gap:6px;color:var(--soc-gn);font-weight:600;letter-spacing:.06em;font-family:'JetBrains Mono',monospace; }
.soc-live::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--soc-gn);box-shadow:0 0 8px var(--soc-gn);animation:socbp 1.6s ease infinite; }
.soc-crumb { color:var(--soc-ink3);display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px; }
.soc-crumb b { color:var(--soc-ink);font-weight:600; }
.soc-clock { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-ink3); }

/* ── Severity badges ──────────────────────────────────────── */
.sev { display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;white-space:nowrap; }
.sev .dot { width:6px;height:6px;border-radius:50%;background:currentcolor;flex-shrink:0; }
.sev.green  { background:rgba(61,220,132,.12);color:var(--soc-gn);border:1px solid rgba(61,220,132,.3); }
.sev.red    { background:rgba(255,85,119,.12);color:var(--soc-rd);border:1px solid rgba(255,85,119,.3); }
.sev.cyan   { background:rgba(34,225,255,.1);color:var(--soc-cy);border:1px solid rgba(34,225,255,.25); }
.sev.amber  { background:rgba(255,181,71,.12);color:var(--soc-am);border:1px solid rgba(255,181,71,.3); }
.sev.violet { background:rgba(167,139,250,.1);color:var(--soc-vi);border:1px solid rgba(167,139,250,.25); }

/* ── Search / filter ──────────────────────────────────────── */
.soc-search-bar { display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--soc-line2);border-radius:4px;background:var(--soc-bg-1);height:38px;flex:1; }
.soc-search-bar input { background:transparent;border:none;outline:none;color:var(--soc-ink);font-size:13px;width:100%; }
.soc-search-bar input::placeholder { color: var(--soc-ink4); }
.soc-select { padding:0 12px;height:38px;border:1px solid var(--soc-line2);border-radius:4px;background:var(--soc-bg-1);color:var(--soc-ink2);font-size:13px;outline:none;cursor:pointer;font-family:inherit; }

/* ── Result count ─────────────────────────────────────────── */
.soc-result-count { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-ink3); }
.soc-result-count b { color: var(--soc-cy); }

/* ── Section heading (hub pages) ──────────────────────────── */
h2.soc-section { font-size:11.5px;font-family:'JetBrains Mono',monospace;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--soc-ink2);margin:0 0 12px;display:flex;align-items:center;gap:12px; }
h2.soc-section::before { content:"";width:4px;height:14px;flex-shrink:0;background:var(--soc-cy);box-shadow:rgba(34,225,255,.7) 0 0 8px; }
h2.soc-section .meta { margin-left:auto;color:var(--soc-ink3);font-weight:400;letter-spacing:.06em;font-size:10px; }
/* Per-hub accent overrides applied inline via page-specific style */

/* ── Section label (IR detail pages) ─────────────────────── */
h2.soc-section-lbl { font-size:11.5px;font-family:'JetBrains Mono',monospace;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--soc-ink2);margin:0 0 12px;display:flex;align-items:center;gap:12px; }
h2.soc-section-lbl::before { content:"";width:4px;height:14px;background:var(--soc-rd);box-shadow:rgba(255,85,119,.7) 0 0 8px;flex-shrink:0; }

/* ── Stats (hub pages) ────────────────────────────────────── */
.soc-stat-grid { display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--soc-line); }
.soc-stat-cell { padding:14px 20px;border-right:1px solid var(--soc-line);background:rgba(255,255,255,.01); }
.soc-stat-cell:last-child { border-right: none; }
.soc-stat-lbl { font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--soc-ink3);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px; }
.soc-stat-lbl::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--soc-cy); }
.soc-stat-cell.am .soc-stat-lbl::before { background: var(--soc-am); }
.soc-stat-val { font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--soc-ink);font-family:'JetBrains Mono',monospace; }

/* ── Page hero (hub pages) ────────────────────────────────── */
.soc-page-hero { border:1px solid var(--soc-line2);border-radius:6px;overflow:hidden; }
.soc-page-hero-strap { display:flex;align-items:center;gap:12px;padding:7px 18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-ink3);border-bottom:1px solid var(--soc-line);background:rgba(0,0,0,.25); }
.soc-page-hero-strap .seg { display:flex;align-items:center;gap:6px; }
.soc-page-hero-strap .seg b { color:var(--soc-ink2);font-weight:500; }
.soc-page-hero-strap .seg .v { color:var(--soc-cy);font-weight:600; }
.soc-page-hero-body { display:flex;align-items:center;gap:16px;padding:18px 22px; }
.soc-page-hero-icon { width:44px;height:44px;border-radius:8px;display:grid;place-items:center;flex-shrink:0; }
.soc-page-hero-title { font-size:22px;font-weight:800;color:var(--soc-ink);margin:0;letter-spacing:-.01em; }
.soc-page-hero-sub { font-size:12px;color:var(--soc-ink3);font-family:'JetBrains Mono',monospace;margin:4px 0 0; }

/* ── Footer ───────────────────────────────────────────────── */
.soc-ft { margin-top:32px;padding:16px 0;text-align:center;color:var(--soc-ink4);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;border-top:1px solid var(--soc-line); }

/* ── Global text elements ─────────────────────────────────── */
strong { color: var(--soc-ink); }
p { font-size:14px;color:var(--soc-ink2);line-height:1.75;margin:0 0 10px; }
a { color: var(--soc-cy); }
a:hover { text-decoration: underline; }
ul { list-style-type:disc;padding-left:20px;margin:8px 0; }
ol { list-style-type:decimal;padding-left:20px;margin:8px 0; }
li { font-size:14px;color:var(--soc-ink2);line-height:1.7;margin-bottom:4px; }
figure { margin: 14px 0; }
figure img { border:1px solid var(--soc-line);border-radius:5px;max-width:100%;display:block;background:var(--soc-bg-2);margin:0 auto; }
figcaption { text-align:center;font-size:11px;color:var(--soc-ink3);margin-top:6px;font-style:italic; }
code { font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(34,225,255,.06);color:var(--soc-cy);padding:1px 6px;border-radius:3px;border:1px solid rgba(34,225,255,.15); }

/* ── Tailwind class overrides (dark SOC theme) ────────────── */
.bg-white, .bg-white\/80 { background: var(--soc-bg-1) !important; }
.bg-gray-50              { background: var(--soc-bg)   !important; }
.bg-gray-100             { background: var(--soc-bg-2) !important; }
.bg-gray-800             { background: var(--soc-bg-2) !important; }
.bg-gray-900             { background: var(--soc-bg)   !important; }
.border-gray-100,
.border-gray-200         { border-color: var(--soc-line) !important; }
.divide-gray-100 > * + *,
.divide-gray-200 > * + * { border-color: var(--soc-line) !important; }
.text-gray-900,
.text-gray-800           { color: var(--soc-ink)  !important; }
.text-gray-700           { color: var(--soc-ink2) !important; }
.text-gray-600           { color: var(--soc-ink3) !important; }
.text-gray-500           { color: var(--soc-ink4) !important; }
.text-gray-400           { color: var(--soc-ink4) !important; }
.text-blue-500,
.text-blue-600           { color: var(--soc-cy)   !important; }
.text-indigo-500,
.text-indigo-600,
.text-indigo-700         { color: var(--soc-cy)   !important; }
.text-yellow-500         { color: var(--soc-am-star) !important; }
.text-amber-600,
.text-amber-700,
.text-yellow-700,
.text-yellow-800,
.text-orange-600,
.text-orange-700         { color: var(--soc-am)   !important; }
.text-green-500,
.text-green-600,
.text-green-700,
.text-green-800          { color: var(--soc-gn)   !important; }
.text-red-500,
.text-red-600,
.text-red-800            { color: var(--soc-rd)   !important; }
.text-purple-500,
.text-violet-500         { color: var(--soc-vi)   !important; }
.bg-blue-50,
.bg-indigo-50            { background: rgba(34,225,255,.05) !important; }
.bg-indigo-100           { background: rgba(34,225,255,.10) !important; }
.border-blue-200,
.border-blue-400,
.border-indigo-200       { border-color: rgba(34,225,255,.2) !important; }
.bg-green-50,
.bg-green-100            { background: rgba(61,220,132,.05) !important; }
.border-green-200,
.border-green-400        { border-color: rgba(61,220,132,.2) !important; }
.bg-amber-50,
.bg-orange-50,
.bg-yellow-50            { background: rgba(255,181,71,.06) !important; }
.border-amber-200,
.border-amber-400,
.border-orange-200,
.border-orange-400,
.border-yellow-200       { border-color: rgba(255,181,71,.3) !important; }
.bg-red-50               { background: rgba(255,85,119,.05) !important; }
.border-red-200          { border-color: rgba(255,85,119,.2) !important; }
.bg-purple-50            { background: rgba(167,139,250,.06) !important; }
.bg-gray-200             { background: var(--soc-bg-2) !important; }
.shadow-sm               { box-shadow: none !important; }
.hover\:bg-gray-50:hover { background: var(--soc-bg-2) !important; }
.ring-blue-500,
.focus\:ring-blue-500:focus { --tw-ring-color: var(--soc-cy) !important; }
input, textarea, select  { background-color: var(--soc-bg-1) !important; border-color: var(--soc-line2) !important; color: var(--soc-ink) !important; }
input::placeholder,
textarea::placeholder    { color: var(--soc-ink3) !important; }

/* ── Dark mode base (legacy Tailwind dark: prefix) ────────── */
.dark.min-h-screen { background: linear-gradient(135deg, var(--soc-bg) 0%, var(--soc-bg-1) 50%, var(--soc-bg) 100%) !important; }
.dark nav, .dark nav.sticky { background-color: rgba(13,17,23,0.96) !important; border-bottom-color: var(--soc-line) !important; }

/* ═══════════════════════════════════════════════════════════
   CONTENT PAGES — Review, Research, IR Report detail pages
   ══════════════════════════════════════════════════════════ */

/* ── Cover (reviews & research) ──────────────────────────── */
.res-cover { position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--soc-line);margin-bottom:20px; }
.res-cover img { width:100%;max-height:340px;object-fit:cover;display:block; }
.res-cover-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(13,17,23,.92) 0%,rgba(13,17,23,.35) 55%,transparent 100%); }
.res-cover-content { position:absolute;bottom:0;left:0;right:0;padding:24px; }
.res-cover-title { font-size:22px;font-weight:800;color:var(--soc-ink);letter-spacing:-.01em;margin:0 0 12px;line-height:1.3; }
.res-cover-badges { display:flex;flex-wrap:wrap;gap:8px; }

/* ── Meta grid (reviews & research) ──────────────────────── */
.res-meta-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;padding:16px 18px; }
.res-meta-lbl { font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--soc-ink3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px; }
.res-meta-val { font-size:13px;font-weight:600;color:var(--soc-ink); }
.res-meta-link { font-size:13px;font-weight:600;color:var(--soc-cy);text-decoration:none; }
.res-meta-link:hover { text-decoration: underline; }

/* ── TOC (reviews & research) ─────────────────────────────── */
.res-toc { background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;padding:16px 18px;margin-top:20px;margin-bottom:24px; }
.res-toc-title { font-size:12px;font-weight:600;color:var(--soc-ink2);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px; }
.res-toc-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px; }
.res-toc-item { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;color:var(--soc-ink3);font-size:12px;text-decoration:none;transition:.15s; }
.res-toc-item:hover { background:rgba(34,225,255,.05);color:var(--soc-cy); }
.res-toc-num { font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--soc-ink4);width:20px;flex-shrink:0; }

/* ── Article sections (reviews & research) ────────────────── */
.res-section { scroll-margin-top:60px;margin-bottom:32px; }
.res-section-title { display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--soc-ink);padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--soc-line); }
.res-section-icon { width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:rgba(34,225,255,.1);border:1px solid rgba(34,225,255,.25);flex-shrink:0; }
.res-subsection { font-size:14px;font-weight:700;color:var(--soc-ink2);margin:22px 0 12px;padding-left:10px;border-left:3px solid var(--soc-cy); }
.res-section ul { list-style-type:disc;padding-left:20px;margin:8px 0; }
.res-section ol { list-style-type:decimal;padding-left:20px;margin:8px 0; }
.res-section li { font-size:14px;color:var(--soc-ink2);line-height:1.7;margin-bottom:4px; }

/* ── Code blocks (research) ───────────────────────────────── */
.res-code-wrap { border:1px solid var(--soc-line);border-radius:5px;overflow:hidden;margin:14px 0; }
.res-code-lang { background:var(--soc-bg-2);color:var(--soc-ink3);font-family:'JetBrains Mono',monospace;font-size:10px;padding:6px 12px;border-bottom:1px solid var(--soc-line);letter-spacing:.06em; }
.res-code-body { background:var(--soc-bg);padding:16px;overflow-x:auto; }
.res-code-body code { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-ink2);line-height:1.7;white-space:pre;background:none;border:none;padding:0; }

/* ── Tables (research) ────────────────────────────────────── */
.res-table-wrap { overflow-x:auto;border:1px solid var(--soc-line);border-radius:5px;margin:14px 0; }
.res-table { width:100%;border-collapse:collapse;font-size:12px; }
.res-table thead { background: var(--soc-bg-2); }
.res-table thead th { padding:8px 12px;text-align:left;font-weight:600;color:var(--soc-ink2);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--soc-line2);white-space:nowrap; }
.res-table tbody tr { border-bottom: 1px solid var(--soc-line); }
.res-table tbody tr:last-child { border-bottom: none; }
.res-table tbody tr:hover { background: rgba(34,225,255,.03); }
.res-table tbody td { padding:8px 12px;color:var(--soc-ink2);vertical-align:top;line-height:1.5; }
.res-table tbody td code { font-family:'JetBrains Mono',monospace;font-size:10px;background:rgba(34,225,255,.06);color:var(--soc-cy);padding:1px 5px;border-radius:3px;border:1px solid rgba(34,225,255,.15); }

/* ── Callouts (research) ──────────────────────────────────── */
.res-callout { border-radius:5px;border:1px solid;padding:14px 16px;display:flex;gap:12px;margin:14px 0;font-size:14px;line-height:1.6; }
.res-callout.info    { background:rgba(34,225,255,.05);border-color:rgba(34,225,255,.2);color:var(--soc-ink2); }
.res-callout.warning { background:rgba(255,181,71,.06);border-color:rgba(255,181,71,.25);color:var(--soc-ink2); }
.res-callout.tip     { background:rgba(61,220,132,.05);border-color:rgba(61,220,132,.2);color:var(--soc-ink2); }
.res-callout-icon { flex-shrink:0;margin-top:1px; }

/* ── Figures (research) ───────────────────────────────────── */
.res-figure { margin: 14px 0; }
.res-figure img { border:1px solid var(--soc-line);border-radius:5px;max-width:100%;display:block;background:var(--soc-bg-2);margin:0 auto; }
.res-figure figcaption { text-align:center;font-size:11px;color:var(--soc-ink3);margin-top:6px;font-style:italic; }

/* ── Inline code ──────────────────────────────────────────── */
.res-c { font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(34,225,255,.06);color:var(--soc-cy);padding:1px 6px;border-radius:3px;border:1px solid rgba(34,225,255,.15); }

/* ── Cover (IR reports) ───────────────────────────────────── */
.ir-cover { position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--soc-line);margin-bottom:20px; }
.ir-cover img { width:100%;max-height:340px;object-fit:cover;display:block; }
.ir-cover-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(13,17,23,.9) 0%,rgba(13,17,23,.3) 60%,transparent 100%); }
.ir-cover-content { position:absolute;bottom:0;left:0;right:0;padding:24px; }
.ir-cover-title { font-size:22px;font-weight:800;color:var(--soc-ink);letter-spacing:-.01em;margin:0 0 10px; }

/* ── Meta grid (IR reports) ───────────────────────────────── */
.ir-meta-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;padding:16px 18px; }
.ir-meta-lbl { font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--soc-ink3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px; }
.ir-meta-val { font-size:13px;font-weight:600;color:var(--soc-ink); }

/* ── TOC (IR reports) ─────────────────────────────────────── */
.ir-toc { background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;padding:16px 18px; }
.ir-toc-title { font-size:12px;font-weight:600;color:var(--soc-ink2);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px; }
.ir-toc-item { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;color:var(--soc-ink3);font-size:12px;text-decoration:none;transition:.15s; }
.ir-toc-item:hover { background:rgba(34,225,255,.05);color:var(--soc-cy); }
.ir-toc-num { font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--soc-ink4);width:20px; }

/* ── Article sections (IR reports) ───────────────────────── */
.ir-section { scroll-margin-top: 60px; }
.ir-section-title { display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--soc-ink);padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--soc-line); }
.ir-section-icon { width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:rgba(255,85,119,.1);border:1px solid rgba(255,85,119,.25);flex-shrink:0; }
.ir-subsection { font-size:14px;font-weight:700;color:var(--soc-ink2);margin:22px 0 12px;padding-left:10px;border-left:3px solid var(--soc-rd); }
.ir-h4 { font-size:13px;font-weight:600;color:var(--soc-am);margin:18px 0 8px; }
.ir-p { font-size:14px;color:var(--soc-ink2);line-height:1.75;margin:0 0 10px; }
.ir-li { font-size:14px;color:var(--soc-ink2);line-height:1.7;margin-bottom:4px;list-style-type:disc; }
.ir-section ul { list-style-type:disc;padding-left:20px; }
.ir-section ul ul { list-style-type:circle; }

/* ── Finding card (IR reports) ────────────────────────────── */
.ir-finding { background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;padding:20px 22px; }
.ir-finding-header { display:flex;align-items:flex-start;gap:12px;margin-bottom:14px; }
.ir-finding-num { background:rgba(255,85,119,.12);color:var(--soc-rd);border:1px solid rgba(255,85,119,.3);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:3px 10px;border-radius:3px;white-space:nowrap;letter-spacing:.06em; }
.ir-finding-num.vi { background:rgba(167,139,250,.12);color:var(--soc-vi);border-color:rgba(167,139,250,.3); }
.ir-finding-title { font-size:14px;font-weight:700;color:var(--soc-ink);line-height:1.4; }

/* ── Tables (IR reports) ──────────────────────────────────── */
.ir-table-wrap { overflow-x:auto;border:1px solid var(--soc-line);border-radius:5px;margin:14px 0; }
.ir-table { width:100%;border-collapse:collapse;font-size:12px; }
.ir-table thead { background: var(--soc-bg-2); }
.ir-table thead th { padding:8px 12px;text-align:left;font-weight:600;color:var(--soc-ink2);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--soc-line2);white-space:nowrap; }
.ir-table tbody tr { border-bottom: 1px solid var(--soc-line); }
.ir-table tbody tr:last-child { border-bottom: none; }
.ir-table tbody tr:hover { background: rgba(34,225,255,.03); }
.ir-table tbody td { padding:8px 12px;color:var(--soc-ink2);vertical-align:top;line-height:1.5; }
.ir-table tbody td code { font-family:'JetBrains Mono',monospace;font-size:10px;background:rgba(34,225,255,.06);color:var(--soc-cy);padding:1px 5px;border-radius:3px;border:1px solid rgba(34,225,255,.15); }

/* ── Code blocks (IR reports) ─────────────────────────────── */
.ir-code-wrap { border:1px solid var(--soc-line);border-radius:5px;overflow:hidden;margin:14px 0; }
.ir-code-lang { background:var(--soc-bg-2);color:var(--soc-ink3);font-family:'JetBrains Mono',monospace;font-size:10px;padding:6px 12px;border-bottom:1px solid var(--soc-line);letter-spacing:.06em; }
.ir-code-body { background:var(--soc-bg);padding:16px;overflow-x:auto; }
.ir-code-body code { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-ink2);line-height:1.7;white-space:pre;background:none;border:none;padding:0; }

/* ── Figures (IR reports) ─────────────────────────────────── */
.ir-figure { margin: 14px 0; }
.ir-figure img { border:1px solid var(--soc-line);border-radius:5px;max-width:100%;display:block;background:var(--soc-bg-2); }
.ir-figure figcaption { text-align:center;font-size:11px;color:var(--soc-ink3);margin-top:6px;font-style:italic; }

/* ── Inline code (IR reports) ─────────────────────────────── */
.ir-c { font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(34,225,255,.06);color:var(--soc-cy);padding:1px 6px;border-radius:3px;border:1px solid rgba(34,225,255,.15); }

/* ── IOC panels (IR reports) ──────────────────────────────── */
.ir-ioc-panel { background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:5px;padding:16px 18px;margin-bottom:10px; }
.ir-ioc-title { display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--soc-ink);margin-bottom:10px; }
.ir-ioc-row { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-ink3);margin-bottom:6px;line-height:1.5; }

/* ═══════════════════════════════════════════════════════════
   HUB PAGE CARDS — unique per hub, included for completeness
   ══════════════════════════════════════════════════════════ */

/* ── Review cards ─────────────────────────────────────────── */
.rev-card { display:flex;flex-direction:column;background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s; }
.rev-card:hover { border-color:var(--soc-line2);box-shadow:0 0 0 1px var(--soc-line2),0 8px 32px rgba(0,0,0,.4); }
.rev-card-body { padding:16px;display:flex;flex-direction:column;gap:10px;flex:1; }
.rev-card-header { display:flex;align-items:flex-start;gap:12px; }
.rev-card-badge { width:48px;height:48px;border-radius:6px;object-fit:contain;background:var(--soc-bg-2);border:1px solid var(--soc-line);padding:4px;flex-shrink:0; }
.rev-card-title { font-size:14px;font-weight:700;color:var(--soc-ink);line-height:1.4;transition:color .15s; }
.rev-card:hover .rev-card-title { color: var(--soc-am); }
.rev-card-rating { display:flex;align-items:center;gap:5px;margin-top:4px; }
.rev-card-rating-val { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--soc-am);font-weight:600; }
.rev-card-meta { display:flex;align-items:center;gap:8px;font-size:11px;color:var(--soc-ink3);font-family:'JetBrains Mono',monospace;flex-wrap:wrap; }
.rev-card-excerpt { font-size:12px;color:var(--soc-ink3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.rev-card-tags { display:flex;flex-wrap:wrap;gap:6px; }
.rev-tag { font-size:10px;font-weight:600;padding:2px 8px;border-radius:3px;background:rgba(255,181,71,.1);color:var(--soc-am);border:1px solid rgba(255,181,71,.2);font-family:'JetBrains Mono',monospace;letter-spacing:.04em; }
.rev-card-cta { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--soc-am);margin-top:auto;padding-top:10px;border-top:1px solid var(--soc-line); }

/* ── Research cards ───────────────────────────────────────── */
.res-card { display:flex;flex-direction:column;background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s; }
.res-card:hover { border-color:var(--soc-line2);box-shadow:0 0 0 1px var(--soc-line2),0 8px 32px rgba(0,0,0,.4); }
.res-card-cover { aspect-ratio:16/9;overflow:hidden;background:var(--soc-bg-2); }
.res-card-cover img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.res-card:hover .res-card-cover img { transform: scale(1.04); }
.res-card-body { padding:16px;display:flex;flex-direction:column;gap:10px;flex:1; }
.res-card-meta { display:flex;align-items:center;gap:8px;font-size:11px;color:var(--soc-ink3);font-family:'JetBrains Mono',monospace;flex-wrap:wrap; }
.res-card-title { font-size:14px;font-weight:700;color:var(--soc-ink);line-height:1.4;transition:color .15s; }
.res-card:hover .res-card-title { color: var(--soc-cy); }
.res-card-summary { font-size:12px;color:var(--soc-ink3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.res-card-tags { display:flex;flex-wrap:wrap;gap:6px; }
.res-tag { font-size:10px;font-weight:600;padding:2px 8px;border-radius:3px;background:rgba(255,181,71,.1);color:var(--soc-am);border:1px solid rgba(255,181,71,.2);font-family:'JetBrains Mono',monospace;letter-spacing:.04em; }
.res-card-cta { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--soc-cy);margin-top:auto;padding-top:10px;border-top:1px solid var(--soc-line); }

/* ── IR report cards ──────────────────────────────────────── */
.ir-card { display:flex;flex-direction:column;background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s; }
.ir-card:hover { border-color:var(--soc-line2);box-shadow:0 0 0 1px var(--soc-line2),0 8px 32px rgba(0,0,0,.4); }
.ir-card-cover { aspect-ratio:16/9;overflow:hidden;background:var(--soc-bg-2); }
.ir-card-cover img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.ir-card:hover .ir-card-cover img { transform: scale(1.04); }
.ir-card-body { padding:16px;display:flex;flex-direction:column;gap:10px;flex:1; }
.ir-card-meta { display:flex;align-items:center;gap:8px;font-size:11px;color:var(--soc-ink3);font-family:'JetBrains Mono',monospace;flex-wrap:wrap; }
.ir-card-title { font-size:14px;font-weight:700;color:var(--soc-ink);line-height:1.4;transition:color .15s; }
.ir-card:hover .ir-card-title { color: var(--soc-cy); }
.ir-card-summary { font-size:12px;color:var(--soc-ink3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.ir-card-tags { display:flex;flex-wrap:wrap;gap:6px; }
.ir-tag { font-size:10px;font-weight:600;padding:2px 8px;border-radius:3px;background:rgba(255,181,71,.1);color:var(--soc-am);border:1px solid rgba(255,181,71,.2);font-family:'JetBrains Mono',monospace;letter-spacing:.04em; }
.ir-card-cta { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--soc-rd);margin-top:auto;padding-top:10px;border-top:1px solid var(--soc-line); }

/* ═══════════════════════════════════════════════════════════
   LAB PAGES — Cloud Labs and SIEM Labs shared classes
   ══════════════════════════════════════════════════════════ */

/* ── Hero stats strip ─────────────────────────────────────── */
.soc-hero-stats { display:flex;border-top:1px solid var(--soc-line); }
.soc-hs-cell { flex:1;padding:12px 18px;border-right:1px solid var(--soc-line);background:rgba(255,255,255,.01); }
.soc-hs-cell:last-child { border-right: none; }
.soc-hs-lbl { font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--soc-ink3);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:5px;margin-bottom:3px; }
.soc-hs-lbl::before { content:"";width:5px;height:5px;border-radius:50%; }
.soc-hs-val { font-size:18px;font-weight:700;color:var(--soc-ink);font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums; }

/* ── Filter panel ─────────────────────────────────────────── */
.soc-filter-panel { background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:14px;margin-bottom:16px; }
.soc-filter-label { font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--soc-ink4);margin-bottom:7px; }
.soc-pills { display:flex;flex-wrap:wrap;gap:6px; }
.soc-pill { padding:4px 11px;border-radius:3px;font-size:11px;font-weight:600;border:1px solid var(--soc-line2);background:transparent;color:var(--soc-ink3);cursor:pointer;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;transition:all .12s; }
.soc-toggle { padding:4px 11px;border-radius:3px;font-size:11px;font-weight:600;border:1px solid var(--soc-line2);background:transparent;color:var(--soc-ink3);cursor:pointer;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;transition:all .12s; }
.soc-toggle.active { background:rgba(61,220,132,.1);border-color:rgba(61,220,132,.4);color:var(--soc-gn); }
.soc-search-icon { color:var(--soc-ink4);flex-shrink:0; }

/* ── Data table ───────────────────────────────────────────── */
.soc-table-wrap { background:var(--soc-bg-1);border:1px solid var(--soc-line);border-radius:6px;overflow:hidden;overflow-x:auto; }
.soc-table { width:100%;border-collapse:collapse;font-size:12px; }
.soc-table thead th { padding:10px 14px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--soc-ink3);border-bottom:1px solid var(--soc-line);background:rgba(0,0,0,.2);white-space:nowrap; }
.soc-table tbody tr { border-bottom:1px solid var(--soc-line);transition:background .1s; }
.soc-table tbody tr:last-child { border-bottom: none; }
.soc-table td { padding:10px 14px;color:var(--soc-ink2); }
.soc-table td.lab-name { color:var(--soc-ink);font-weight:500; }

/* ── Difficulty badges ────────────────────────────────────── */
.soc-diff { display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;white-space:nowrap; }
.soc-diff.easy   { background:rgba(61,220,132,.1); color:var(--soc-gn);  border:1px solid rgba(61,220,132,.25); }
.soc-diff.medium { background:rgba(255,181,71,.1);  color:var(--soc-am);  border:1px solid rgba(255,181,71,.25); }
.soc-diff.hard   { background:rgba(255,85,119,.1);  color:var(--soc-rd);  border:1px solid rgba(255,85,119,.25); }
.soc-diff.insane { background:rgba(167,139,250,.1); color:var(--soc-vi);  border:1px solid rgba(167,139,250,.25); }
.soc-diff.none   { background:rgba(107,122,156,.08);color:var(--soc-ink3);border:1px solid rgba(107,122,156,.2); }

/* ── Platform badge ───────────────────────────────────────── */
.soc-plat { display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:600;font-family:'JetBrains Mono',monospace;white-space:nowrap;background:rgba(107,122,156,.08);color:var(--soc-ink2);border:1px solid rgba(107,122,156,.2); }

/* ── Footer link ──────────────────────────────────────────── */
.soc-ft a { color:var(--soc-ink3);text-decoration:none; }

/* ── Tailwind utility replacements (used on detail pages, no CDN) ─────────── */

/* Accessibility — skip link */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.focus\:not-sr-only:focus { position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal; }
.focus\:absolute:focus   { position:absolute; }
.focus\:top-4:focus      { top:1rem; }
.focus\:left-4:focus     { left:1rem; }
.focus\:z-\[100\]:focus  { z-index:100; }
.focus\:bg-white:focus   { background:#fff; }
.focus\:px-4:focus       { padding-left:1rem;padding-right:1rem; }
.focus\:py-2:focus       { padding-top:.5rem;padding-bottom:.5rem; }
.focus\:rounded-lg:focus { border-radius:.5rem; }
.focus\:shadow-lg:focus  { box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); }
.focus\:text-blue-600:focus   { color:#2563eb; }
.focus\:font-semibold:focus   { font-weight:600; }

/* Icon sizes */
.w-3\.5 { width:.875rem; }  .h-3\.5 { height:.875rem; }
.w-4    { width:1rem; }     .h-4    { height:1rem; }
.w-5    { width:1.25rem; }  .h-5    { height:1.25rem; }
.w-6    { width:1.5rem; }   .h-6    { height:1.5rem; }
.w-8    { width:2rem; }     .h-8    { height:2rem; }
.w-12   { width:3rem; }     .h-12   { height:3rem; }
.flex-shrink-0 { flex-shrink:0; }

/* Typography */
.leading-relaxed { line-height:1.625; }
.font-semibold   { font-weight:600; }
.font-bold       { font-weight:700; }
.text-sm         { font-size:.875rem;line-height:1.25rem; }
.text-lg         { font-size:1.125rem;line-height:1.75rem; }
.underline       { text-decoration:underline; }
.hover\:underline:hover { text-decoration:underline; }

/* Lists */
.list-disc    { list-style-type:disc; }
.list-decimal { list-style-type:decimal; }
.list-outside { list-style-position:outside; }
.ml-4 { margin-left:1rem; }
.ml-5 { margin-left:1.25rem; }

/* Spacing */
.space-y-1 > * + * { margin-top:.25rem; }
.space-y-2 > * + * { margin-top:.5rem; }
.space-y-3 > * + * { margin-top:.75rem; }
.space-y-4 > * + * { margin-top:1rem; }
.mb-1 { margin-bottom:.25rem; }
.mb-2 { margin-bottom:.5rem; }
.mb-4 { margin-bottom:1rem; }
.mt-0\.5 { margin-top:.125rem; }
.mt-4 { margin-top:1rem; }
.my-4 { margin-top:1rem;margin-bottom:1rem; }
.p-4 { padding:1rem; }
.p-5 { padding:1.25rem; }
.p-6 { padding:1.5rem; }
.gap-2 { gap:.5rem; }
.gap-4 { gap:1rem; }

/* Layout */
.flex           { display:flex; }
.grid           { display:grid; }
.items-center   { align-items:center; }
.justify-center { justify-content:center; }

/* Text colors */
.text-gray-600   { color:#4b5563; }
.text-gray-700   { color:#374151; }
.text-gray-800   { color:#1f2937; }
.text-blue-600   { color:#2563eb; }
.text-green-600  { color:#16a34a; }
.text-green-800  { color:#166534; }
.text-red-600    { color:#dc2626; }
.text-red-800    { color:#991b1b; }
.text-indigo-500 { color:#6366f1; }
.text-indigo-700 { color:#4338ca; }

/* Background colors (light cards intentional on dark theme) */
.bg-white     { background:#fff; }
.bg-green-50  { background:#f0fdf4; }
.bg-red-50    { background:#fef2f2; }
.bg-indigo-100 { background:#e0e7ff; }

/* Borders & shapes */
.border             { border-width:1px;border-style:solid; }
.border-t           { border-top-width:1px;border-top-style:solid; }
.border-t-2         { border-top-width:2px;border-top-style:solid; }
.border-b           { border-bottom-width:1px;border-bottom-style:solid; }
.border-l-4         { border-left-width:4px;border-left-style:solid; }
.border-gray-100    { border-color:#f3f4f6; }
.border-gray-200    { border-color:#e5e7eb; }
.border-green-200   { border-color:#bbf7d0; }
.border-green-400   { border-color:#4ade80; }
.border-red-200     { border-color:#fecaca; }
.border-amber-200   { border-color:#fde68a; }
.border-amber-400   { border-color:#fbbf24; }
.border-orange-200  { border-color:#fed7aa; }
.border-orange-400  { border-color:#fb923c; }
.border-blue-400    { border-color:#60a5fa; }
.rounded            { border-radius:.25rem; }
.rounded-r-xl       { border-top-right-radius:.75rem;border-bottom-right-radius:.75rem; }
.rounded-full       { border-radius:9999px; }
.rounded-xl         { border-radius:.75rem; }
.rounded-2xl        { border-radius:1rem; }
.divide-y > * + *   { border-top-width:1px;border-top-style:solid; }
.divide-gray-100 > * + * { border-color:#f3f4f6; }

/* Effects */
.shadow-sm { box-shadow:0 1px 2px rgba(0,0,0,.05); }
.overflow-hidden { overflow:hidden; }

/* Additional backgrounds */
.bg-gray-50    { background:#f9fafb; }
.bg-gray-100   { background:#f3f4f6; }
.bg-amber-50   { background:#fffbeb; }
.bg-amber-100  { background:#fef3c7; }
.bg-orange-50  { background:#fff7ed; }
.bg-orange-200 { background:#fed7aa; }
.bg-orange-400 { background:#fb923c; }
.bg-blue-50    { background:#eff6ff; }

/* Additional text colors */
.text-xs        { font-size:.75rem;line-height:1rem; }
.text-xl        { font-size:1.25rem;line-height:1.75rem; }
.text-center    { text-align:center; }
.text-left      { text-align:left; }
.text-right     { text-align:right; }
.text-gray-400  { color:#9ca3af; }
.text-gray-500  { color:#6b7280; }
.text-amber-700 { color:#b45309; }
.text-orange-600 { color:#ea580c; }
.text-orange-700 { color:#c2410c; }

/* Additional typography */
.italic          { font-style:italic; }
.uppercase       { text-transform:uppercase; }
.font-mono       { font-family:'JetBrains Mono',ui-monospace,monospace; }
.whitespace-pre-wrap { white-space:pre-wrap; }

/* Additional sizes */
.w-0\.5 { width:.125rem; }
.w-3    { width:.75rem; }  .h-3 { height:.75rem; }
.w-full { width:100%; }
.max-w-full { max-width:100%; }

/* Additional spacing */
.-mt-3  { margin-top:-.75rem; }
.mt-1   { margin-top:.25rem; }
.mt-1\.5 { margin-top:.375rem; }
.mt-6   { margin-top:1.5rem; }
.mt-8   { margin-top:2rem; }
.mb-3   { margin-bottom:.75rem; }
.pb-6   { padding-bottom:1.5rem; }
.px-1   { padding-left:.25rem;padding-right:.25rem; }
.px-1\.5 { padding-left:.375rem;padding-right:.375rem; }
.px-4   { padding-left:1rem;padding-right:1rem; }
.px-5   { padding-left:1.25rem;padding-right:1.25rem; }
.py-0\.5 { padding-top:.125rem;padding-bottom:.125rem; }
.py-2   { padding-top:.5rem;padding-bottom:.5rem; }
.py-4   { padding-top:1rem;padding-bottom:1rem; }
.space-y-1\.5 > * + * { margin-top:.375rem; }
.mx-auto { margin-left:auto;margin-right:auto; }

/* Additional layout */
.block          { display:block; }
.flex-1         { flex:1 1 0%; }
.flex-col       { flex-direction:column; }
.justify-between { justify-content:space-between; }

/* Responsive */
@media (min-width:640px) {
    .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:768px) {
    .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   ACCENT TINT VARS — for hub page inline styles (T2 refactor)
   Dark values match existing hardcoded rgba in hub pages.
   Light values use light-palette rgb equivalents.
   ══════════════════════════════════════════════════════════ */
:root {
  /* cyan tints */
  --soc-cy-tint-lo:  rgba(34,225,255,.04);
  --soc-cy-tint-md:  rgba(34,225,255,.10);
  --soc-cy-tint-hi:  rgba(34,225,255,.15);
  --soc-cy-tint-bdr: rgba(34,225,255,.25);
  --soc-cy-tint-hov: rgba(34,225,255,.15);
  /* amber tints */
  --soc-am-tint-lo:  rgba(255,181,71,.04);
  --soc-am-tint-md:  rgba(255,181,71,.10);
  --soc-am-tint-hi:  rgba(255,181,71,.15);
  --soc-am-tint-bdr: rgba(255,181,71,.25);
  /* violet tints */
  --soc-vi-tint-lo:  rgba(167,139,250,.04);
  --soc-vi-tint-md:  rgba(167,139,250,.10);
  --soc-vi-tint-hi:  rgba(167,139,250,.15);
  --soc-vi-tint-bdr: rgba(167,139,250,.25);
  --soc-vi-tint-hov: rgba(167,139,250,.15);
  --soc-vi-tint-box: rgba(167,139,250,.20);
  /* red tints */
  --soc-rd-tint-lo:  rgba(255,85,119,.04);
  --soc-rd-tint-md:  rgba(255,85,119,.10);
  --soc-rd-tint-bdr: rgba(255,85,119,.25);
  /* green tints */
  --soc-gn-tint-lo:  rgba(61,220,132,.04);
  --soc-gn-tint-md:  rgba(61,220,132,.10);
  --soc-gn-tint-bdr: rgba(61,220,132,.25);
  /* strap / hero */
  --soc-strap-bg: rgba(0,0,0,.25);
  --soc-strap-v:  var(--soc-cy);
  /* misc */
  --soc-neutral-tint-md:  rgba(107,122,156,.08);
  --soc-neutral-tint-bdr: rgba(107,122,156,.20);
  --soc-err-tint-bdr: rgba(255,85,119,.30);
  --soc-err-tint-bg:  rgba(255,85,119,.06);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — html[data-theme="light"]
   html[] selector (0,1,0,1) beats :root (0,1,0,0) in detail
   pages that re-declare :root vars inline.
   ══════════════════════════════════════════════════════════ */

/* ── Palette swap ─────────────────────────────────────────── */
html[data-theme="light"] {
  --soc-bg:    #eef2f9;
  --soc-bg-1:  #ffffff;
  --soc-bg-2:  #f5f8fd;
  --soc-line:  #d8e0ee;
  --soc-line2: #b8c4dc;
  --soc-ink:   #0c1729;
  --soc-ink2:  #2c3d58;
  --soc-ink3:  #4e6080;
  --soc-ink4:  #6b7896;
  --soc-cy:    #0891b2;
  --soc-cy2:   #0e7490;
  --soc-am:    #b45309;
  --soc-gn:    #15803d;
  --soc-rd:    #be1d3a;
  --soc-vi:    #6d28d9;
  --soc-am-star:     #f59e0b;
  --soc-retired-bg:  #f59e0b;
  --soc-retired-txt: #78350f;
  /* tint vars — light palette rgb equivalents */
  --soc-cy-tint-lo:  rgba(8,145,178,.05);
  --soc-cy-tint-md:  rgba(8,145,178,.10);
  --soc-cy-tint-hi:  #cffafe;
  --soc-cy-tint-bdr: rgba(8,145,178,.25);
  --soc-cy-tint-hov: rgba(8,145,178,.15);
  --soc-am-tint-lo:  rgba(180,83,9,.05);
  --soc-am-tint-md:  rgba(180,83,9,.10);
  --soc-am-tint-hi:  #fef3c7;
  --soc-am-tint-bdr: rgba(180,83,9,.25);
  --soc-vi-tint-lo:  rgba(109,40,217,.05);
  --soc-vi-tint-md:  rgba(109,40,217,.10);
  --soc-vi-tint-hi:  #ede9fe;
  --soc-vi-tint-bdr: rgba(109,40,217,.25);
  --soc-vi-tint-hov: rgba(109,40,217,.15);
  --soc-vi-tint-box: rgba(109,40,217,.20);
  --soc-rd-tint-lo:  rgba(190,29,58,.05);
  --soc-rd-tint-md:  rgba(190,29,58,.10);
  --soc-rd-tint-bdr: rgba(190,29,58,.25);
  --soc-gn-tint-lo:  rgba(21,128,61,.05);
  --soc-gn-tint-md:  rgba(21,128,61,.10);
  --soc-gn-tint-bdr: rgba(21,128,61,.25);
  --soc-strap-bg: var(--soc-bg-2);
  --soc-neutral-tint-md:  rgba(107,122,156,.06);
  --soc-neutral-tint-bdr: rgba(107,122,156,.18);
  --soc-err-tint-bdr: rgba(190,29,58,.25);
  --soc-err-tint-bg:  rgba(190,29,58,.05);
}

/* ── Body background ──────────────────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(8,145,178,.10), transparent 70%),
    radial-gradient(900px 500px at -10% 30%,   rgba(109,40,217,.06), transparent 70%),
    var(--soc-bg);
}

/* ── Topbar — white frosted glass ─────────────────────────── */
[data-theme="light"] .soc-tb {
  background: rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(12,23,41,.04);
}

/* ── Hero strap — replace dark overlay with light bg ─────── */
[data-theme="light"] .soc-page-hero-strap,
[data-theme="light"] .soc-hero-strap { background: var(--soc-bg-2); }

/* ── index.html hex grid + dark.min-h-screen ─────────────── */
[data-theme="light"] .dark.min-h-screen {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(8,145,178,.08), transparent 70%),
    radial-gradient(900px 500px at -10% 30%,   rgba(109,40,217,.05), transparent 70%),
    var(--soc-bg) !important;
}
[data-theme="light"] .dark.min-h-screen::before {
  opacity: .25;
  background-image:
    linear-gradient(60deg,  transparent 49.5%, rgba(8,145,178,.08) 50%, transparent 50.5%),
    linear-gradient(-60deg, transparent 49.5%, rgba(8,145,178,.08) 50%, transparent 50.5%),
    linear-gradient(0deg,   transparent 49.5%, rgba(8,145,178,.05) 50%, transparent 50.5%);
}

/* ── Severity badges — pastel soft fills ─────────────────── */
[data-theme="light"] .sev.green  { background: #dcfce7; border-color: rgba(21,128,61,.25); }
[data-theme="light"] .sev.cyan   { background: #cffafe; border-color: rgba(8,145,178,.25); }
[data-theme="light"] .sev.amber  { background: #fef3c7; border-color: rgba(180,83,9,.25);  }
[data-theme="light"] .sev.red    { background: #fee2e6; border-color: rgba(190,29,58,.22); }
[data-theme="light"] .sev.violet { background: #ede9fe; border-color: rgba(109,40,217,.25); }

/* ── Section heading glow — softer on light ──────────────── */
[data-theme="light"] h2.soc-section::before    { box-shadow: rgba(8,145,178,.35)  0 0 6px; }
[data-theme="light"] h2.soc-section-lbl::before { box-shadow: rgba(190,29,58,.35) 0 0 6px; }

/* ── Table header ─────────────────────────────────────────── */
[data-theme="light"] .soc-table thead th { background: var(--soc-bg-2); }

/* ── Research / review section icon ──────────────────────── */
[data-theme="light"] .res-section-icon {
  background: rgba(8,145,178,.10);
  border-color: rgba(8,145,178,.25);
}

/* ── Inline code ──────────────────────────────────────────── */
[data-theme="light"] code,
[data-theme="light"] .res-c,
[data-theme="light"] .ir-c {
  background: rgba(8,145,178,.07);
  border-color: rgba(8,145,178,.18);
}

/* ── Callouts ─────────────────────────────────────────────── */
[data-theme="light"] .res-callout.info    { background: rgba(8,145,178,.06);  border-color: rgba(8,145,178,.20);  }
[data-theme="light"] .res-callout.warning { background: rgba(180,83,9,.06);   border-color: rgba(180,83,9,.20);   }
[data-theme="light"] .res-callout.tip     { background: rgba(21,128,61,.05);  border-color: rgba(21,128,61,.20);  }

/* ── TOC item hover ───────────────────────────────────────── */
[data-theme="light"] .res-toc-item:hover,
[data-theme="light"] .ir-toc-item:hover { background: rgba(8,145,178,.06); color: var(--soc-cy); }

/* ── Table row hover + code cells ────────────────────────── */
[data-theme="light"] .res-table tbody tr:hover,
[data-theme="light"] .ir-table tbody tr:hover  { background: rgba(8,145,178,.03); }
[data-theme="light"] .res-table tbody td code,
[data-theme="light"] .ir-table tbody td code   { background: rgba(8,145,178,.06); border-color: rgba(8,145,178,.15); }

/* ── IR section icon ──────────────────────────────────────── */
[data-theme="light"] .ir-section-icon {
  background: rgba(190,29,58,.10);
  border-color: rgba(190,29,58,.25);
}

/* ── IR finding number ────────────────────────────────────── */
[data-theme="light"] .ir-finding-num    { background: rgba(190,29,58,.08); border-color: rgba(190,29,58,.25); }
[data-theme="light"] .ir-finding-num.vi { background: rgba(109,40,217,.08); border-color: rgba(109,40,217,.25); }

/* ── Cover overlays — use light bg instead of near-black ─── */
[data-theme="light"] .res-cover-overlay {
  background: linear-gradient(to top, rgba(238,242,249,.95) 0%, rgba(238,242,249,.55) 55%, transparent 100%);
}
[data-theme="light"] .ir-cover-overlay {
  background: linear-gradient(to top, rgba(238,242,249,.95) 0%, rgba(238,242,249,.55) 60%, transparent 100%);
}
[data-theme="light"] .res-cover-title,
[data-theme="light"] .ir-cover-title { color: var(--soc-ink); }

/* ── Card hover shadow — lighten for light mode ──────────── */
[data-theme="light"] .rev-card:hover,
[data-theme="light"] .res-card:hover,
[data-theme="light"] .ir-card:hover { box-shadow: 0 0 0 1px var(--soc-line2), 0 8px 24px rgba(12,23,41,.12); }

/* ── Tags ─────────────────────────────────────────────────── */
[data-theme="light"] .rev-tag,
[data-theme="light"] .res-tag,
[data-theme="light"] .ir-tag { background: rgba(180,83,9,.07); border-color: rgba(180,83,9,.20); }

/* ── Difficulty badges ────────────────────────────────────── */
[data-theme="light"] .soc-diff.easy   { background: rgba(21,128,61,.08);  border-color: rgba(21,128,61,.25);  }
[data-theme="light"] .soc-diff.medium { background: rgba(180,83,9,.08);   border-color: rgba(180,83,9,.25);   }
[data-theme="light"] .soc-diff.hard   { background: rgba(190,29,58,.08);  border-color: rgba(190,29,58,.25);  }
[data-theme="light"] .soc-diff.insane { background: rgba(109,40,217,.08); border-color: rgba(109,40,217,.25); }

/* ── Toggle filter ────────────────────────────────────────── */
[data-theme="light"] .soc-toggle.active { background: rgba(21,128,61,.08); border-color: rgba(21,128,61,.30); }

/* ── Theme toggle — pill with sliding knob ───────────────── */
.soc-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 99px;
  border: 1px solid var(--soc-line2);
  background: var(--soc-bg-2);
  color: var(--soc-ink2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
  flex-shrink: 0;
  height: 28px;
  line-height: 1;
}
.soc-theme-btn:hover { border-color: var(--soc-cy); color: var(--soc-cy); }

/* Pill track */
.soc-theme-btn .soc-tb-track {
  position: relative;
  width: 30px; height: 14px;
  border-radius: 99px;
  background: rgba(34,225,255,.18);
  border: 1px solid var(--soc-line2);
  flex-shrink: 0;
  transition: background .25s, border-color .25s;
}
/* Sliding knob */
.soc-theme-btn .soc-tb-knob {
  position: absolute;
  top: 1px; left: 1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--soc-cy);
  box-shadow: 0 0 8px var(--soc-cy);
  transition: transform .25s cubic-bezier(.5,.1,.25,1.3), background .25s;
}
[data-theme="light"] .soc-theme-btn .soc-tb-knob {
  transform: translateX(16px);
  box-shadow: 0 0 0 2px rgba(8,145,178,.18);
}

/* Icon + label visibility */
.soc-theme-btn .soc-tb-ico   { font-size: 13px; line-height: 1; }
.soc-theme-btn .soc-tb-dark  { display: inline; }
.soc-theme-btn .soc-tb-light { display: none; }
[data-theme="light"] .soc-theme-btn .soc-tb-dark  { display: none; }
[data-theme="light"] .soc-theme-btn .soc-tb-light { display: inline; }

/* Light mode overrides */
[data-theme="light"] .soc-theme-btn {
  background: var(--soc-bg-1);
  border-color: var(--soc-line);
}
[data-theme="light"] .soc-theme-btn .soc-tb-track {
  background: rgba(8,145,178,.12);
  border-color: rgba(8,145,178,.25);
}
[data-theme="light"] .soc-theme-btn:hover { border-color: var(--soc-cy); color: var(--soc-cy); }

/* ── Reduced motion — pause badge rail ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .soc-rail-track,
  .badge-marquee-track { animation-play-state: paused; }
}

/* ═══════════════════════════════════════════════════════════
   T3 — Component adjustments for light mode
   ═══════════════════════════════════════════════════════════ */

/* ── Cert credit glyph — cyan wash → light-palette tint ─── */
[data-theme="light"] .soc-credit .glyph {
  background: rgba(8,145,178,.10);
  border-color: rgba(8,145,178,.30);
}
[data-theme="light"] .soc-credit.exp .glyph {
  background: rgba(107,120,150,.10);
  border-color: rgba(107,120,150,.25);
}

/* ── Primary button — fix hover shade for light cyan ─────── */
[data-theme="light"] .soc-btn:hover        { background: var(--soc-cy2); }
[data-theme="light"] .soc-btn.ghost:hover  { background: rgba(8,145,178,.10); }

/* ── Nav bar ──────────────────────────────────────────────── */
[data-theme="light"] .soc-nav { background: rgba(255,255,255,.70) !important; }
[data-theme="light"] .soc-tab.active {
  background: linear-gradient(180deg, transparent, rgba(8,145,178,.07)) !important;
}

/* ── Mobile menu — light surface ─────────────────────────── */
[data-theme="light"] .soc-mobile-menu {
  background: rgba(245,248,253,.98) !important;
  border-top-color: var(--soc-line);
}

/* ── CTA banner — dark-blue surface (intentional, matches reference) */
[data-theme="light"] .soc-cta {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(8,145,178,.18), transparent 65%),
    linear-gradient(135deg, #083344, #0c4a6e);
  color: #e0f7fb;
  box-shadow: 0 10px 30px -16px rgba(8,145,178,.45);
}
[data-theme="light"] .soc-cta h3 { color: #ffffff; }
[data-theme="light"] .soc-cta p  { color: #bae6fd; }
[data-theme="light"] .soc-btn          { background: #67e8f9; border-color: #67e8f9; color: #06414f; }
[data-theme="light"] .soc-btn:hover    { background: #a5f3fc; border-color: #a5f3fc; }
[data-theme="light"] .soc-btn.ghost    { background: transparent; color: #67e8f9; border-color: #67e8f9; }
[data-theme="light"] .soc-btn.ghost:hover { background: rgba(103,232,249,.12); }

/* ── Operator Brief — light surface with cyan tint (matches reference) */
[data-theme="light"] .soc-opnote {
  background: linear-gradient(90deg, rgba(8,145,178,.07), transparent 50%), var(--soc-bg-1);
  box-shadow: 0 1px 0 rgba(12,23,41,.03);
}
[data-theme="light"] .soc-opnote .clear {
  background: rgba(21,128,61,.08);
  color: var(--soc-gn);
  border-color: rgba(21,128,61,.25);
}
[data-theme="light"] .soc-plat {
  border-color: var(--soc-line);
  background: var(--soc-bg-1);
}
[data-theme="light"] .soc-plat:hover { border-color: var(--soc-cy); color: var(--soc-cy); }

/* ── Segment filter controls (certs / labs / achievements) ── */
[data-theme="light"] .soc-seg {
  background: var(--soc-bg-2);
  border-color: var(--soc-line);
}
[data-theme="light"] .soc-seg-btn.active {
  background: #ffffff !important;
  color: var(--soc-cy) !important;
  box-shadow: inset 0 0 0 1px rgba(8,145,178,.40), 0 1px 3px rgba(12,23,41,.08) !important;
}
[data-theme="light"] .soc-seg-count {
  background: rgba(8,145,178,.10);
  color: var(--soc-ink3);
}
[data-theme="light"] .soc-seg-btn.active .soc-seg-count {
  background: rgba(8,145,178,.15);
  color: var(--soc-cy);
}