/* ============================================================
   topic-shared.css — SemiMatrix Topic Pages v2
   Shared across all topic-*.html files
   ============================================================ */

@import url('/styles/content-page-common.css');

:root {
  --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.12);
  --grid-overlay: rgba(6,182,212,0.022);
  --content-nav-active: var(--accent);
  --content-nav-active-dim: var(--accent-dim);
  --content-badge-color: var(--green);
  --content-progress-gradient: linear-gradient(90deg, var(--blue), var(--accent), var(--green));
  --content-accent-hover: rgba(6,182,212,0.35);
  --content-scroll-hover-bg: var(--accent-dim);
  --content-process-margin: 28px 0;
  --content-process-padding: 20px 0;
  --content-process-gap: 20px;
  --content-process-num-size: 36px;
  --content-process-num-bg: var(--accent-dim);
  --content-process-num-border: rgba(6,182,212,0.3);
  --content-process-num-color: var(--accent);
  --content-process-title-size: 15px;
  --content-process-desc-line-height: 1.65;
  --content-grid-margin: 24px 0;
  --content-card-padding: 18px;
  --content-card-title-size: 14px;
  --content-table-margin: 24px 0;
  --content-table-th-padding: 11px 16px;
  --content-table-td-padding: 12px 16px;
  --content-code-margin: 24px 0;
  --content-code-padding: 20px;
  --content-nav-margin-top: 64px;
  --content-nav-padding-top: 32px;
  --content-related-padding: 14px;
  --content-related-line-height: 1.45;
  --content-param-section-margin: 24px;
  --content-param-row-padding: 9px 0;
  --topic-shell-gap: 30px;
  --topic-main-max: 920px;
  --topic-prose-max: 72ch;
}
/* ===== PAGE LAYOUT ===== */
.topic-wrap {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--topic-shell-gap);
  min-height: 100vh;
  padding-top: 64px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative; z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

/* ===== LEFT SIDEBAR (TOC) ===== */
.topic-toc {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 100% !important;
  overflow: visible !important;
}

.topic-toc-inner {
  position: sticky; top: 80px;
  height: calc(100vh - 100px);
  overflow-y: auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  background: linear-gradient(180deg, rgba(8,15,20,0.9), rgba(12,23,32,0.84));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 24px 0 28px;
  overflow-x: hidden;
}
.topic-toc-inner::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103,232,249,0.75), transparent);
  pointer-events: none;
}
.topic-toc-inner::-webkit-scrollbar { width:4px; }
.topic-toc-inner::-webkit-scrollbar-track { background:transparent; }
.topic-toc-inner::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.toc-section { margin-bottom:24px; padding:0 20px; }
.toc-label {
  font-family:var(--mono); font-size:9px; color:var(--sub);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:10px;
  padding-bottom:6px; border-bottom:1px solid var(--border);
}
.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  border-left: 1px solid var(--border);
  margin-left: 8px;
}
.toc-list a {
  font-size: 12.5px;
  color: var(--text-mid);
  text-decoration: none;
  padding: 8px 12px 8px 16px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  border-radius: 0 8px 8px 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  line-height: 1.4;
  position: relative;
}
.toc-list a::after {
  content: '';
  position: absolute;
  left: -1.5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.toc-list a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}
.toc-list a.active {
  color: var(--accent);
  background: rgba(6, 182, 212, 0.08);
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}
.toc-list a.active::after {
  transform: translateY(-50%) scale(1);
}
.toc-list a.sub {
  padding-left: 24px;
  font-size: 11.5px;
}
.toc-list a.sub.active {
  padding-left: 26px;
}

.diff-chips { display:flex; flex-wrap:wrap; gap:4px; }
.diff-chip {
  font-family:var(--mono); font-size:9px; padding:3px 8px;
  border-radius:4px; letter-spacing:0.5px;
}
.diff-basic  { background:var(--green-dim);  color:var(--green);  border:1px solid rgba(16,185,129,0.25); }
.diff-mid    { background:var(--accent-dim); color:var(--accent); border:1px solid rgba(6,182,212,0.25); }
.diff-adv    { background:var(--blue-dim);   color:var(--blue);   border:1px solid rgba(96,165,250,0.25); }

.toc-progress-item { margin-bottom:8px; }
.toc-progress-label { font-size:11px; color:var(--sub); margin-bottom:4px; display:flex; justify-content:space-between; }
.toc-progress-label span:last-child { font-family:var(--mono); color:var(--accent); }
.toc-mini-bar { height:2px; background:var(--border); border-radius:99px; overflow:hidden; }
.toc-mini-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--blue)); border-radius:99px; transition:width 1s ease; }

/* ===== MAIN CONTENT ===== */
.topic-main {
  grid-column: 2;
  grid-row: 1;
  padding: 44px 0 96px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.topic-breadcrumb {
  font-family:var(--mono); font-size:11px; color:var(--sub);
  margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.topic-breadcrumb a { color:var(--sub); text-decoration:none; transition:color 0.2s; }
.topic-breadcrumb a:hover { color:var(--accent); }
.topic-breadcrumb .bc-sep { color:var(--border-b); }

/* Hero */
.topic-hero {
  margin-bottom: 42px;
  padding: 38px 40px 34px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(6,182,212,0.12), transparent 38%),
    linear-gradient(180deg, rgba(10,18,26,0.9), rgba(8,15,20,0.82));
  box-shadow: var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.topic-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-overlay) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:0.5;
  pointer-events:none;
}
.topic-eyebrow {
  font-family:var(--mono); font-size:10px; color:var(--accent);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.topic-eyebrow::before {
  content:''; width:20px; height:1px; background:var(--accent); flex-shrink:0;
}
.topic-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700; line-height: 1.08;
  color: var(--text); margin-bottom: 18px;
  letter-spacing: -0.5px;
  max-width: 12ch;
}
.topic-title .accent { color:var(--accent); }
.topic-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.topic-chip {
  font-family:var(--mono); font-size:10px; color:var(--text-mid);
  border:1px solid var(--border); padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,0.025);
  display:flex; align-items:center; gap:5px; letter-spacing:0.5px;
}
.topic-chip::before { content:''; width:5px; height:5px; background:var(--accent); border-radius:50%; }
.topic-desc {
  font-size:16px;
  color:var(--text-mid);
  line-height:1.85;
  max-width:var(--topic-prose-max);
}

.topic-digest {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr);
  gap: 16px;
}

.topic-digest-stats,
.topic-digest-outline {
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(14px);
  padding: 18px 20px;
}

.topic-digest-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.topic-digest-stat {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.018);
}

.digest-label,
.digest-outline-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 8px;
}

.topic-digest-stat strong {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

.topic-digest-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topic-digest-list a {
  display: block;
  text-decoration: none;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: var(--tr);
}

.topic-digest-list a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border-left-color: var(--accent);
}

.topic-body {
  width: 100%;
}

/* Section headings */
.topic-body h2 {
  font-family:var(--display); font-size:26px; font-weight:700; color:var(--text);
  margin:0 0 24px; padding: 14px 20px;
  position: relative;
  display: flex;
  align-items: center;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, rgba(6,182,212,0.08), rgba(6,182,212,0.01) 90%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: inset 12px 0 24px -12px rgba(6, 182, 212, 0.2);
}
.topic-body h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.topic-body h2 .h2-num {
  font-family:var(--mono); font-size:11px; color:var(--accent);
  border:1px solid rgba(6,182,212,0.45); background:rgba(6,182,212,0.18);
  padding:4px 10px; border-radius:6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
  text-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
}
.topic-body h3 {
  font-family:var(--display); font-size:19px; font-weight:600;
  color: #e2e8f0; margin:36px 0 16px;
  display: block;
  position: relative;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  text-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
}
.topic-body p {
  font-size:16px;
  line-height:1.9;
  color:var(--text);
  margin-bottom:20px;
  max-width: var(--topic-prose-max);
}
.topic-body strong {
  color: #38bdf8;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}
.topic-body ul {
  margin:0 0 22px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-left:0;
  list-style:none;
  max-width: var(--topic-prose-max);
}
.topic-body ul li {
  font-size:15px; line-height:1.8; color:var(--text);
  padding-left:22px; position:relative;
}
.topic-body ul li::before {
  content:'';
  position:absolute;
  left:4px;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.topic-body section {
  position: relative;
  scroll-margin-top: 100px;
  background: linear-gradient(180deg, rgba(10, 18, 26, 0.5) 0%, rgba(6, 10, 14, 0.75) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 22px !important;
  padding: 36px 40px !important;
  margin-bottom: 40px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.topic-body section:hover {
  border-color: rgba(6, 182, 212, 0.3) !important;
  background: linear-gradient(180deg, rgba(12, 22, 32, 0.65) 0%, rgba(8, 14, 20, 0.82) 100%) !important;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5), 
    0 0 24px rgba(6, 182, 212, 0.05),
    inset 0 1px 0 rgba(6, 182, 212, 0.15) !important;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .topic-body section {
    padding: 20px 18px !important;
    margin-bottom: 20px !important;
    border-radius: 12px !important;
  }
}

.section-anchor {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--sub);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: var(--tr);
}

.topic-body section:hover .section-anchor,
.section-anchor:focus-visible {
  opacity: 0.6;
}

.section-anchor:hover {
  color: var(--accent) !important;
  opacity: 1 !important;
}

/* Equation blocks */
.eq-block {
  background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(10,18,26,0.5)) !important;
  border: 1px solid rgba(6,182,212,0.22) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25), inset 0 0 20px rgba(6,182,212,0.04) !important;
  padding: 24px !important; margin:24px 0; font-family:var(--mono);
  position:relative; overflow:hidden;
  transition: all 0.3s ease;
}
.eq-block:hover {
  border-color: rgba(6,182,212,0.4) !important;
  box-shadow: 0 20px 48px rgba(6,182,212,0.1), inset 0 0 20px rgba(6,182,212,0.08) !important;
  transform: translateY(-2px);
}
.eq-block::before {
  content:''; position:absolute; top:0; right:0; bottom:0; width:120px;
  background:linear-gradient(270deg, rgba(6,182,212,0.06), transparent);
  pointer-events: none;
}
.eq-label { font-size:9px; color:var(--accent); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:12px; font-weight: 600; }
.eq-main { font-size:19px; color:var(--text); letter-spacing:0.5px; line-height:1.6; text-align: center; margin: 14px 0; text-shadow: 0 0 12px rgba(6, 182, 212, 0.4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eq-main .v { color:var(--accent); }
.eq-main .vr { color:#f472b6; }
.eq-desc { font-size:12px; color:var(--text-mid); margin-top:10px; line-height:1.6; }

/* Diagram box */
.diagram-box {
  background: linear-gradient(180deg, rgba(8,15,20,0.8), rgba(5,10,14,0.95)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3) !important;
  padding:32px; margin:28px 0;
  position:relative; overflow:hidden;
  transition: all 0.3s ease;
}
.diagram-box:hover {
  border-color: rgba(6,182,212,0.25) !important;
  box-shadow: 0 20px 56px rgba(6,182,212,0.08) !important;
}
.diagram-box::after {
  content:attr(data-label);
  position:absolute; top:12px; right:16px;
  font-family:var(--mono); font-size:9px; color:var(--sub);
  letter-spacing:2px; text-transform:uppercase;
}

/* Progress bars */
.progress-section {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 24px; margin:28px 0;
}
.progress-section-label {
  font-family:var(--mono); font-size:10px; color:var(--sub);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;
}
.progress-items { display:flex; flex-direction:column; gap:12px; }
.progress-row { display:flex; align-items:center; gap:12px; }
.progress-name { font-size:12px; color:var(--text-mid); width:150px; flex-shrink:0; }
.progress-bar-bg { flex:1; height:4px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--blue)); border-radius:99px; width:0; transition:width 1s ease; }
.progress-val { font-family:var(--mono); font-size:11px; color:var(--accent); width:38px; text-align:right; }

/* Topic navigation */
.topic-nav {
  display:grid;
  grid-template-columns:1fr 1.05fr 1fr;
  gap:14px;
  margin:40px 0 0;
}
.topic-nav-btn,
.topic-nav-card {
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  background:var(--card);
  text-decoration:none;
  display:block;
  transition:var(--tr);
}
.topic-nav-btn:hover,
.topic-nav-card:hover {
  border-color:rgba(6,182,212,0.35);
  background:var(--bg3);
}
.topic-nav-btn.next { text-align:right; }
.nav-direction {
  font-family:var(--mono);
  font-size:10px;
  color:var(--sub);
  letter-spacing:2px;
  margin-bottom:6px;
}
.nav-title {
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  color:var(--text);
  line-height:1.3;
}
.topic-nav-progress {
  background:linear-gradient(135deg, rgba(6,182,212,0.08), rgba(59,130,246,0.05));
}
.topic-nav-meta {
  margin-top:10px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--accent);
  letter-spacing:1px;
}

/* Quiz */
.quiz-section {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; margin:40px 0;
}
.quiz-header { font-family:var(--mono); font-size:9px; color:var(--green); letter-spacing:3px; margin-bottom:18px; }
.quiz-q { font-size:14px; color:var(--text); margin-bottom:14px; font-weight:600; line-height:1.5; }
.quiz-options { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.quiz-opt {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:7px; padding:11px 16px; font-size:13px;
  color:var(--text-mid); cursor:pointer; transition:var(--tr);
  text-align:left; font-family:var(--body);
}
.quiz-opt:hover { border-color:var(--accent-dim); color:var(--text); background:var(--card); }
.quiz-opt.correct { border-color:var(--green); background:var(--green-dim); color:var(--green); }
.quiz-opt.wrong { border-color:var(--red); background:var(--red-dim); color:var(--red); }
.quiz-result { font-family:var(--mono); font-size:11px; margin-top:8px; min-height:18px; }

/* ===== RIGHT SIDEBAR ===== */
.topic-sidebar-right {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  margin-top: 48px;
  padding: 32px 36px !important;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,15,20,0.92), rgba(12,23,32,0.84));
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 32px;
  align-items: start;
}
.topic-sidebar-right::-webkit-scrollbar { display:none; }

.career-card {
  margin-top:20px; padding:14px; border-radius:8px;
  border:1px solid var(--border); text-decoration:none;
  display:block; transition:var(--tr); background:var(--card);
}
.career-card:hover { border-color:rgba(6,182,212,0.35); }

.table-scroll-shell {
  margin: 28px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,15,20,0.88), rgba(10,18,26,0.84));
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.table-scroll-shell .topic-table,
.table-scroll-shell .fab-table {
  margin: 0;
  min-width: 620px;
}

.topic-sidebar-right .sr-label:first-child {
  margin-top: 0 !important;
}
.topic-sidebar-right .career-card {
  margin-top: 0 !important;
}
.topic-sidebar-right .param-section {
  margin-top: 0 !important;
}

body.topic-mobile-open {
  overflow: hidden;
}

.topic-mobile-bar,
.topic-mobile-sheet {
  display: none;
}

.topic-mobile-bar {
  position: sticky;
  top: 64px;
  z-index: 120;
  padding: 12px 24px 0;
}

.topic-mobile-trigger {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,15,20,0.94), rgba(12,23,32,0.9));
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.topic-mobile-kicker,
.topic-mobile-panel-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
}

.topic-mobile-current {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.15;
  color: var(--text);
}

.topic-mobile-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0;
}

.topic-mobile-count,
.topic-mobile-progress {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}

.topic-mobile-progress {
  color: var(--accent);
}

.topic-mobile-sheet {
  position: fixed;
  inset: 64px 0 0;
  z-index: 520;
}

.topic-mobile-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0,0,0,0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.topic-mobile-panel {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,15,20,0.98), rgba(12,23,32,0.95));
  box-shadow: var(--shadow-float);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.topic-mobile-sheet.is-open .topic-mobile-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.topic-mobile-sheet.is-open .topic-mobile-panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.topic-mobile-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
}

.topic-mobile-panel-title {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.1;
  color: var(--text);
}

.topic-mobile-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-mid);
  cursor: pointer;
}

.topic-mobile-panel-body {
  padding: 14px 0 18px;
}

.topic-mobile-panel-body .topic-toc-inner {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.topic-mobile-panel-body .topic-toc-inner::before {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px) {
  .topic-wrap { grid-template-columns: 236px 1fr; gap: 24px; }
  .topic-sidebar-right {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1.2fr 1.1fr;
    gap: 24px;
  }
  .topic-sidebar-right .career-card {
    grid-column: 1 / span 2;
    margin-top: 12px !important;
  }
}
@media(max-width:900px) {
  .topic-mobile-bar,
  .topic-mobile-sheet { display: block; }
  .topic-wrap { grid-template-columns: minmax(0, 1fr); }
  .topic-toc { display:none; }
  .topic-main { grid-column: 1; padding: 20px 0 64px; }
  .topic-sidebar-right {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px !important;
  }
  .topic-sidebar-right .career-card {
    grid-column: 1;
  }
  .topic-hero { padding: 28px 22px 24px; border-radius: 22px; }
  .topic-title {
    font-size: clamp(22px, 6vw, 34px);
    line-height: 1.15;
    max-width: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .topic-digest { grid-template-columns: 1fr; }
  .topic-digest-stats { grid-template-columns: 1fr 1fr; }
  .topic-body h2 { margin-top: 54px; }
  .sc-nav { padding: 0 20px; }
  .sc-nav-links { display:none; }
  .sc-hamburger { display:flex; }
  .subtopic-grid { grid-template-columns:1fr; }
  .topic-nav { grid-template-columns:1fr; }
}

@media(max-width:640px) {
  .topic-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .topic-mobile-bar {
    padding-left: 16px;
    padding-right: 16px;
  }
  .topic-mobile-panel {
    left: 12px;
    right: 12px;
  }
  .topic-title { max-width: none; }
  .topic-digest-stats { grid-template-columns: 1fr; }
  .topic-mobile-current {
    font-size: 16px;
  }
}

/* ===== ROADMAP CONTEXT PREMIUM OVERRIDES ===== */
.roadmap-context {
  margin: 28px 0 !important;
  padding: 24px 28px !important;
  border: 1px solid rgba(6, 182, 212, 0.15) !important;
  border-left: 4px solid var(--accent) !important;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(10, 18, 26, 0.4) 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.roadmap-context:hover {
  border-color: rgba(6, 182, 212, 0.35) !important;
  box-shadow: 0 18px 40px rgba(6, 182, 212, 0.08), inset 0 1px 0 rgba(6, 182, 212, 0.1) !important;
  transform: translateY(-2px);
}
.roadmap-context::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 150px;
  background: linear-gradient(270deg, rgba(6, 182, 212, 0.05), transparent);
  pointer-events: none;
}

/* ===== CURRICULUM MAP ACCORDION ===== */
.toc-curriculum {
  margin-top: 20px;
  border-top: 1px dashed var(--border);
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.curriculum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
  user-select: none;
  transition: color 0.2s ease;
}
.curriculum-header:hover {
  color: var(--text);
}
.curriculum-header-icon {
  font-size: 10px;
  transition: transform 0.25s ease;
}
.toc-curriculum.open .curriculum-header-icon {
  transform: rotate(90deg);
}
.curriculum-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}
.toc-curriculum.open .curriculum-body {
  max-height: 360px;
  overflow-y: auto;
  margin-top: 12px;
  padding-bottom: 8px;
}

/* Custom scrollbar for curriculum body */
.curriculum-body::-webkit-scrollbar { width:3px; }
.curriculum-body::-webkit-scrollbar-track { background:transparent; }
.curriculum-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:1.5px; }

.curriculum-category {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.curriculum-cat-title {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--sub);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.curriculum-item {
  display: block;
  font-size: 11.5px;
  color: var(--text-mid);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.curriculum-item:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.curriculum-item.active {
  color: var(--accent);
  background: rgba(6,182,212,0.08);
  font-weight: 600;
  border-left: 2px solid var(--accent);
  padding-left: 6px;
  border-radius: 0 6px 6px 0;
}