/* ===== BCI Science Hub · Shared Styles ===== */
:root{
  --bg:#f6f8fc; --surface:#ffffff; --surface-2:#eef3fb; --ink:#16203a; --ink-soft:#4a5878;
  --line:#dde5f1; --brand:#2f6df6; --brand-2:#15c2b8; --accent:#ff7a59;
  --ok:#1f9d55; --warn:#e0a106; --na:#9aa6bd; --fut:#7a5cf0;
  --shadow:0 6px 24px rgba(23,42,83,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* Hero */
.hero{background:radial-gradient(1200px 480px at 80% -10%,rgba(47,109,246,.18),transparent),
  linear-gradient(135deg,#10204a,#1b3a78 60%,#16547a);color:#fff;padding:48px 0 40px;position:relative;overflow:hidden}
.hero h1{font-size:36px;margin:0 0 10px;letter-spacing:.5px}
.hero p{margin:0;color:#cdd9f3;font-size:15.5px;max-width:760px}
.hero .tag{display:inline-block;margin-top:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:6px 14px;border-radius:999px;font-size:13px;color:#eaf1ff}
/* Settings button + dropdown panel (fixed top-right) */
.settings{position:fixed;top:16px;right:16px;z-index:1000}
.settings-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:#2f6df6;color:#fff;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(20,40,80,.28);transition:transform .15s ease,background .15s ease}
.settings-btn:hover{transform:scale(1.08);background:#1f5be0}
.settings-btn:active{transform:scale(.95)}
.settings-panel{position:absolute;top:54px;right:0;width:208px;background:#fff;color:#16203a;
  border:1px solid #e2e8f2;border-radius:14px;box-shadow:0 14px 38px rgba(20,40,80,.24);
  padding:14px;display:flex;flex-direction:column;gap:14px}
.settings-panel[hidden]{display:none}
.settings-row{display:flex;flex-direction:column;gap:8px}
.settings-label{font-size:13px;font-weight:700;color:#46557a}
.seg{display:flex;background:#eef1f7;border-radius:10px;padding:3px;gap:3px}
.seg-btn{flex:1;border:none;background:transparent;color:#46557a;font-size:13px;padding:7px 0;
  border-radius:8px;cursor:pointer;font-weight:600;transition:all .15s ease}
.seg-btn:hover{background:#e2e7f1}
.seg-btn.active{background:#2f6df6;color:#fff;box-shadow:0 2px 7px rgba(47,109,246,.4)}
body.dark .settings-btn{background:#26406e;border-color:rgba(120,140,190,.45);color:#dbe4f5}
body.dark .settings-btn:hover{background:#2e4e84}
body.dark .settings-panel{background:#17213c;color:#dbe4f5;border-color:#2c3a60}
body.dark .settings-label{color:#9fb0d4}
body.dark .seg{background:#0f1830}
body.dark .seg-btn{color:#9fb0d4}
body.dark .seg-btn:hover{background:#1d2c4f}
body.dark .seg-btn.active{background:#3f7bff;color:#fff}

/* Legend — works on ANY background */
.legend{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 6px}
.chip{display:inline-flex;align-items:center;gap:8px;
  background:#ffffff;border:1px solid #d4ddf0;
  padding:8px 16px;border-radius:999px;font-size:13px;color:#1a2744;
  box-shadow:0 3px 10px rgba(20,40,80,.12);font-weight:500;
  line-height:1.3}
.chip .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;display:inline-block}
.chip .ok{background:var(--ok)} .chip .warn{background:var(--warn)} .chip .na{background:var(--na)} .chip .fut{background:var(--fut)}
body.dark .chip{background:#1c2b50;border-color:#2e4375;color:#d0daf0}

/* Nav */
nav.toc{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(20,40,80,.05)}
nav.toc ul{display:flex;gap:6px;overflow:auto;margin:0;padding:10px 20px;list-style:none;max-width:1140px;margin:0 auto}
nav.toc a{display:block;padding:8px 12px;border-radius:10px;font-size:13.5px;color:var(--ink-soft);white-space:nowrap;font-weight:600}
nav.toc a:hover{background:var(--surface-2);text-decoration:none}
nav.toc a.active{background:var(--brand);color:#fff}

/* Sections */
section{padding:46px 0 8px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.sec-num{font-size:13px;font-weight:800;color:#fff;background:var(--brand);width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
h2{font-size:26px;margin:0}
h3{font-size:19px;margin:26px 0 12px;color:var(--ink)}
h4{font-size:15px;margin:16px 0 8px;color:var(--brand)}
p{color:var(--ink-soft)}
.lead{color:var(--ink-soft);max-width:880px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}

.player{border-left:4px solid var(--brand)}
.player h4{margin-top:0}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.m{font-size:12px;background:var(--surface-2);border:1px solid var(--line);padding:4px 10px;border-radius:8px;color:var(--ink-soft)}
.badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;color:#fff}
.b-ok{background:var(--ok)} .b-warn{background:var(--warn)} .b-na{background:var(--na)} .b-fut{background:var(--fut)}

table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);font-size:14px}
thead th{background:var(--surface-2);text-align:left;padding:12px 14px;font-size:13px;color:var(--ink);border-bottom:2px solid var(--line)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f9fbfe}
.table-scroll{overflow-x:auto;margin:8px 0 18px}
.nowrap{white-space:nowrap}

.callout{border:1px solid #f3d28a;background:#fff8e8;border-radius:12px;padding:14px 18px;margin:14px 0;font-size:14px;color:#7a5a12}
.callout b{color:#a36a00}
.note{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:18px 22px;margin:18px 0;font-size:14.5px;color:var(--ink);line-height:1.75}
body.dark .note{background:#1a2b52;border-color:#3355aa;color:#dce6f9}

ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;margin-bottom:10px;box-shadow:var(--shadow)}
ol.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:8px;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}

details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 16px;margin:8px 0;box-shadow:var(--shadow)}
summary{cursor:pointer;padding:12px 0;font-weight:700;color:var(--ink)}
details ol{padding-left:20px;color:var(--ink-soft);font-size:13.5px}
details li{margin:6px 0}

footer{margin-top:40px;background:#0f1d3f;color:#aab8da;padding:34px 0;font-size:13px}
footer a{color:#8fd0ff}
.top{display:block;text-align:center;padding:14px;color:var(--brand);font-weight:700}

/* Dark mode */
body.dark{--bg:#0e1526;--surface:#16203a;--surface-2:#1d2a47;--ink:#eaf0fb;--ink-soft:#a9b6d2;--line:#27365a}
body.dark .hero{background:radial-gradient(1200px 480px at 80% -10%,rgba(47,109,246,.28),transparent),linear-gradient(135deg,#0a1430,#13294f 60%,#0f3a55)}
body.dark nav.toc{background:rgba(14,21,38,.92)}
body.dark tbody tr:hover{background:#1a2845}
body.dark .callout{background:#3a2f12;border-color:#6b531f;color:#f0d79a}

/* Page-specific: mini-hero for subpages */
.hero-mini{padding:32px 0 28px}
.hero-mini h1{font-size:28px}
.hero-mini p{font-size:14.5px}

/* ===== Source citation ===== */
.src{display:inline-block;font-size:11.5px;color:var(--ink-soft);background:var(--surface-2);
  border:1px solid var(--line);padding:2px 9px;border-radius:6px;margin-top:8px}
.src::before{content:"📎 来源：";font-weight:700;color:var(--brand)}
.src a{font-weight:600}
body.dark .src{background:#1d2a47;border-color:#2c4a7a}

/* ===== Difficulty level badges ===== */
.lv{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;color:#fff;margin-left:8px;vertical-align:middle}
.lv-learn{background:var(--ok)}
.lv-mid{background:var(--brand)}
.lv-research{background:var(--fut)}

/* ===== Tiered learning sections ===== */
.tier{padding:24px 20px 8px;margin-top:32px;scroll-margin-top:64px;border-radius:12px}
.tier-green{border-left:4px solid var(--ok);background:rgba(31,157,85,.04)}
.tier-blue{border-left:4px solid var(--brand);background:rgba(47,109,246,.04)}
.tier-purple{border-left:4px solid var(--fut);background:rgba(122,92,240,.04)}
body.dark .tier-green{background:rgba(31,157,85,.08)}
body.dark .tier-blue{background:rgba(47,109,246,.08)}
body.dark .tier-purple{background:rgba(122,92,240,.08)}
.tier-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tier-tag{font-size:13px;font-weight:800;color:#fff;padding:5px 14px;border-radius:999px}
.tier-green .tier-tag{background:var(--ok)}
.tier-blue .tier-tag{background:var(--brand)}
.tier-purple .tier-tag{background:var(--fut)}
.tier-desc{font-size:13px;color:var(--ink-soft);margin:0}

/* Force heading colors to match parent tier */
.tier-green h3,.tier-green h4,.tier-green h5,.tier-green h6{color:var(--ok)!important}
.tier-blue h3,.tier-blue h4,.tier-blue h5,.tier-blue h6{color:var(--brand)!important}
.tier-purple h3,.tier-purple h4,.tier-purple h5,.tier-purple h6{color:var(--fut)!important}

/* learning-path cards on guide page */
.path-card{display:block;text-decoration:none;color:inherit;transition:transform .12s ease}
.path-card:hover{text-decoration:none;transform:translateY(-2px)}

/* ===== Tier filter tab bar (Learn / Intermediate / Research) ===== */
.tier-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px;position:sticky;top:56px;z-index:20;
  background:var(--surface);padding:9px;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow)}
.tt-btn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);
  font-size:13.5px;font-weight:700;padding:8px 18px;border-radius:999px;cursor:pointer;transition:all .15s ease}
.tt-btn:hover{background:var(--surface)}
.tt-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
body.dark .tier-tabs{background:#16203a}
body.dark .tt-btn{background:#1d2a47;color:#a9b6d2}
body.dark .tt-btn:hover{background:#243355}
/* Hidden tier when filtered out — !important overrides any section display rule */
.tier-hidden{display:none !important}

/* Prevent long URLs / links from blowing out the layout on small screens */
a, .src, td, th, p{overflow-wrap:anywhere}
img{max-width:100%;height:auto}

/* ===== Mobile adaptation ===== */
@media (max-width: 820px){
  .g2, .g3{grid-template-columns:1fr}
  .hero{padding:36px 0 30px}
  .hero h1{font-size:27px}
  .hero p{font-size:14px}
  .sec-head{gap:10px}
  .sec-num{width:26px;height:26px;font-size:12px}
  h2{font-size:22px}
  h3{font-size:17px}
  section{padding:34px 0 6px}
  .card{padding:18px 18px}
  .tier{padding:22px 16px 6px}
}

@media (max-width: 560px){
  .wrap{padding:0 14px}
  nav.toc ul{padding:8px 14px;gap:4px}
  nav.toc a{padding:7px 10px;font-size:12.5px}

  .hero{padding:30px 0 24px}
  .hero h1{font-size:23px;letter-spacing:0;line-height:1.25}
  .hero p{font-size:13.5px}
  .hero .tag{font-size:12px;padding:5px 12px;margin-top:12px}

  .hero-mini{padding:26px 0 22px}
  .hero-mini h1{font-size:22px}

  section{padding:28px 0 4px}
  .sec-head{flex-wrap:wrap;gap:8px;margin-bottom:14px}
  h2{font-size:20px}
  h3{font-size:16px;margin:20px 0 10px}

  .card{padding:15px 15px;margin-bottom:12px}
  .tier{padding:18px 12px 4px;margin-top:24px}
  .grid{gap:12px}
  .g2, .g3{gap:12px}

  .settings{top:10px;right:10px}
  .settings-btn{width:40px;height:40px;font-size:18px}
  .settings-panel{width:184px;top:48px;right:0}

  .tier-tabs{top:52px;padding:7px;gap:6px}
  .tt-btn{padding:7px 14px;font-size:12.5px}

  .legend{gap:7px;margin:16px 0 4px}
  .chip{padding:6px 12px;font-size:12px}

  table{font-size:12.5px}
  thead th{padding:9px 10px;font-size:11.5px}
  tbody td{padding:9px 10px}

  .src{font-size:10.5px;padding:2px 7px}
  .src::before{content:"📎";margin-right:2px}
  ol.steps li{padding:10px 12px 10px 46px}
  ol.steps li::before{width:24px;height:24px;left:12px;top:10px;font-size:13px}

  .note, .callout{padding:14px 15px}
  details{padding:4px 13px}
}

@media (max-width: 380px){
  .hero h1{font-size:21px}
  .hero p{font-size:13px}
  h2{font-size:18px}
  h3{font-size:15px}
  .tt-btn{padding:6px 11px;font-size:12px}
  nav.toc a{padding:6px 9px;font-size:12px}
}