/* ===========================================================
   ENG3U Course — shared stylesheet
   =========================================================== */
:root{
  --paper:#F7F4EE;
  --surface:#FFFFFF;
  --surface-2:#FCFAF6;
  --ink:#241E2D;
  --ink-soft:#544C5E;
  --muted:#8B8392;
  --line:#E8E1D6;
  --line-strong:#DCD3C6;
  --brand:#6B3FA0;
  --brand-deep:#532E80;
  --brand-soft:#F1EAF8;
  --brand-tint:#FAF7FD;
  --accent:#B5781B;
  --accent-soft:#FBF1DE;
  --en:#3D5A8A;
  --en-soft:#EEF2FA;
  --ok:#3F8A5B;
  --ok-soft:#E9F5EE;
  --radius:16px;
  --radius-sm:11px;
  --maxread:950px;
  --sans:"Manrope","Noto Sans SC",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --zh:"Noto Sans SC",system-ui,sans-serif;
  --enfont:var(--serif);
}
[data-accent="teal"]{ --brand:#1F7A6B; --brand-deep:#155F53; --brand-soft:#E3F2EF; --brand-tint:#F2FAF8; --en:#2E6E8E; --en-soft:#EAF3F7; }
[data-accent="terracotta"]{ --brand:#B5532E; --brand-deep:#8F3F22; --brand-soft:#F7E7E0; --brand-tint:#FCF4F0; --en:#5E6B8A; --en-soft:#EEF0F6; }
[data-enfont="sans"]{ --enfont:var(--sans); }

*{box-sizing:border-box;}
html,body{height:100%; overflow:hidden;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--zh); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--brand-soft); }
a{color:var(--brand); text-decoration:none;}

#progress{position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--accent)); z-index:80; transition:width .12s linear;}

/* ---------- App shell ---------- */
.app{display:grid; grid-template-columns:300px minmax(0,1fr); height:100vh;}

/* ---------- Sidebar ---------- */
.side{
  height:100vh; overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--line);
  padding:26px 22px 40px; display:flex; flex-direction:column; gap:22px;
}
.brand{display:flex; align-items:center; gap:11px;}
.brand .mark{width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  display:grid; place-items:center; color:#fff; font-family:var(--serif);
  font-size:21px; font-weight:600; box-shadow:0 4px 14px -4px var(--brand);}
.brand .t{font-family:var(--sans); line-height:1.25;}
.brand .t b{font-weight:700; font-size:15px; letter-spacing:.01em; display:block;}
.brand .t span{font-size:12px; color:var(--muted); font-weight:600;}
a.brand{color:inherit;}

.unit-tag{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brand); background:var(--brand-soft);
  padding:5px 10px; border-radius:7px; width:fit-content;}
.unit-h{font-family:var(--serif); font-size:18px; font-weight:600; margin:-8px 0 0; line-height:1.3;}
.unit-h small{display:block; font-family:var(--sans); font-size:12.5px; color:var(--muted); font-weight:600; margin-top:3px;}

.prog{font-family:var(--sans);}
.prog .bar{height:7px; border-radius:99px; background:var(--line); overflow:hidden;}
.prog .bar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .4s;}
.prog .lab{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);
  font-weight:600; margin-top:7px;}

.nav{display:flex; flex-direction:column; gap:2px;}
.nav a{display:flex; gap:11px; align-items:flex-start; padding:9px 11px; border-radius:10px;
  font-family:var(--sans); font-size:13.5px; line-height:1.35; color:var(--ink-soft); font-weight:600;}
.nav a:hover{background:var(--surface-2);}
.nav a .dot{flex:none; width:19px; height:19px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; font-size:10px; font-weight:700; border:1.5px solid var(--line-strong);
  color:var(--muted); background:var(--surface);}
.nav a.done .dot{background:var(--ok); border-color:var(--ok); color:#fff;}
.nav a.active{background:var(--brand-soft); color:var(--brand-deep);}
.nav a.active .dot{border-color:var(--brand); color:#fff; background:var(--brand);}
.nav a .code{font-size:11px; color:var(--muted); font-weight:700; display:block; letter-spacing:.02em;}
.nav a.active .code{color:var(--brand);}
.nav a .zh{font-weight:600;}
.nav .grp{font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:14px 11px 5px;}

/* ---------- Main ---------- */
.main{min-width:0; height:100vh; display:flex; flex-direction:column; position:relative;}
.topbar{flex:none; z-index:60; background:rgba(247,244,238,.86);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
  padding:13px clamp(20px,5vw,56px); display:flex; align-items:center; gap:16px;}
.crumb{font-family:var(--sans); font-size:12.5px; color:var(--muted); font-weight:600;
  display:flex; gap:7px; align-items:center; min-width:0;}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--brand);}
.crumb b{color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.crumb .sep{color:var(--line-strong);}
.topbar .spacer{flex:1;}

.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:3px; gap:2px; font-family:var(--sans);}
.seg button{border:0; background:none; cursor:pointer; font-family:inherit; font-weight:700;
  font-size:12.5px; color:var(--muted); padding:6px 12px; border-radius:7px; transition:.15s;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--brand); color:#fff; box-shadow:0 2px 8px -3px var(--brand);}

.iconbtn{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--surface);
  cursor:pointer; display:grid; place-items:center; color:var(--ink-soft);}
.iconbtn:hover{color:var(--brand); border-color:var(--brand-soft);}
.iconbtn svg{width:18px;height:18px;}

.pop{position:absolute; top:58px; right:clamp(20px,5vw,56px); z-index:70; width:248px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 50px -24px rgba(40,30,55,.35); padding:16px; display:none;
  font-family:var(--sans);}
.pop.open{display:block;}
.pop h4{margin:0 0 9px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.pop .row{display:flex; gap:8px; margin-bottom:16px;}
.pop .row:last-child{margin-bottom:0;}
.opt{flex:1; border:1px solid var(--line); background:var(--surface-2); border-radius:9px; padding:9px 6px;
  cursor:pointer; font-family:inherit; font-weight:700; font-size:12px; color:var(--ink-soft); text-align:center;}
.opt.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-deep);}
.sw{flex:1; height:34px; border-radius:9px; cursor:pointer; border:2px solid transparent; position:relative;}
.sw.on{border-color:var(--ink);}
.sw.plum{background:linear-gradient(135deg,#6B3FA0,#532E80);}
.sw.teal{background:linear-gradient(135deg,#1F7A6B,#155F53);}
.sw.terracotta{background:linear-gradient(135deg,#B5532E,#8F3F22);}

/* ---------- Article ---------- */
.scroll{flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth;}
article{max-width:var(--maxread); margin:0 auto; padding:40px clamp(20px,5vw,56px) 120px;}
.eyebrow{font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--brand); text-transform:uppercase; margin-bottom:12px;}
h1.title{font-family:var(--serif); font-weight:600; font-size:clamp(31px,4.4vw,45px);
  line-height:1.1; letter-spacing:-.015em; margin:0 0 6px;}
h1.title .zh{display:block; font-size:.56em; color:var(--ink-soft); font-weight:500; margin-top:9px;}
.lede{font-family:var(--serif); font-size:18.5px; line-height:1.65; color:var(--ink-soft);
  max-width:62ch; margin:18px 0 0;}
.meta{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--sans); font-size:12.5px;
  color:var(--muted); font-weight:600; margin-top:22px; padding-bottom:26px; border-bottom:1px solid var(--line);}
.meta span{display:inline-flex; align-items:center; gap:6px;}
.meta svg{width:15px;height:15px;}

/* goals card */
.goals{background:var(--brand-tint); border:1px solid var(--brand-soft); border-radius:var(--radius);
  padding:22px 24px; margin:30px 0;}
.goals h3{font-family:var(--sans); font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brand); margin:0 0 14px; font-weight:700; display:flex; align-items:center; gap:8px;}
.goals ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.goals li{display:flex; gap:12px; align-items:flex-start;}
.goals li .n{flex:none; width:24px; height:24px; border-radius:7px; background:var(--brand); color:#fff;
  font-family:var(--sans); font-weight:700; font-size:12px; display:grid; place-items:center; margin-top:1px;}
.goals li .en{font-family:var(--serif); font-size:16px;}
.goals li .zh{font-size:14px; color:var(--ink-soft);}

/* concept cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin:18px 0; overflow:hidden; transition:box-shadow .2s, border-color .2s;}
.card:hover{box-shadow:0 12px 30px -22px rgba(40,30,55,.4);}
.card > .head{display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer; user-select:none; flex-wrap:wrap;}
.card .kicker{flex:none; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; background:var(--brand); padding:5px 10px; border-radius:7px;}
.card.cam .kicker{background:#4B4453;}
.card.lim .kicker{background:#5B6E97;}
.card.omni .kicker{background:var(--accent);}
.card .head h2{font-family:var(--serif); font-size:21px; font-weight:600; margin:0; flex:1; line-height:1.25; min-width:200px;}
.card .head h2 .zh{color:var(--ink-soft); font-weight:500;}
.card .cue{font-family:var(--sans); font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.45;
  flex-basis:100%; padding:0 22px 14px; margin-top:-4px;}
.chev{flex:none; color:var(--muted); transition:transform .25s; width:20px; height:20px;}
.card.collapsed .chev{transform:rotate(-90deg);}
.card .body{padding:0 22px 8px;}
.card.collapsed .body, .card.collapsed .cue{display:none;}

/* bilingual blocks */
.bi{display:grid; gap:0; border-top:1px solid var(--line); }
.block{padding:18px 0; min-width:0; overflow-wrap:anywhere;}
.block pre, article pre{overflow-x:auto; max-width:100%;}
.block table, article table{display:block; max-width:100%; overflow-x:auto;}
.block + .block{border-top:1px dashed var(--line);}
.block .tag{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:6px; margin-bottom:10px;}
.block.en .tag{color:var(--en); background:var(--en-soft);}
.block.zh .tag{color:var(--brand); background:var(--brand-soft);}
.block.en p, .block.en li{font-family:var(--enfont); font-size:17.5px; line-height:1.66;}
.block.zh p, .block.zh li{font-size:16px; line-height:1.78;}
.block p{margin:0 0 11px;} .block p:last-child{margin-bottom:0;}
.block ul{margin:4px 0 11px; padding-left:22px;} .block li{margin:4px 0;}
.block b{color:var(--ink);}

/* 宽屏双语:概念卡内英中左右双栏(仅双语模式;窄屏或单语自动回退单栏) */
@media(min-width:1100px){
  body.lang-both .bi{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px;}
  body.lang-both .bi .block + .block{border-top:0;}
  body.lang-both .bi .block.en{border-right:1px dashed var(--line); padding-right:32px;}
}

/* figure / inline image */
figure.fig{margin:14px 0 4px; }
figure.fig img{width:100%; border-radius:11px; border:1px solid var(--line); display:block; background:var(--surface-2);}
figure.fig video{width:100%; border-radius:11px; border:1px solid var(--line); display:block; background:#000;}
.vidlink a{font-family:var(--sans); font-weight:700;}
figure.fig figcaption{font-family:var(--sans); font-size:12px; color:var(--muted); margin-top:8px; line-height:1.5;}

/* tip (讲解) */
.tip{margin-top:12px; background:var(--accent-soft); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0; padding:11px 15px; font-size:14px; line-height:1.7; color:#6B4A12;}
.tip b{color:var(--accent);}

/* language visibility */
body.lang-en .block.zh{display:none;}
body.lang-zh .block.en{display:none;}
body.lang-en .goals li .zh{display:none;}
body.lang-zh .goals li .en{display:none;}
body.lang-en .check .txt .zh{display:none;}
body.lang-zh .check .txt .en{display:none;}
body.lang-en .title .zh, body.lang-en h2 .zh{display:none;}
/* 双语 scaffolding(导语/线索/讲解/题干/解析/总结/章节标题/meta):
   默认(双语·中文)显示中文,EN 模式切英文 */
.s-en{display:none;}
body.lang-en .s-zh{display:none;}
body.lang-en .s-en{display:revert;}

/* inline term */
.term{border-bottom:1.5px dotted var(--brand); cursor:help; color:var(--brand-deep); font-weight:500; position:relative;}
.term:hover{background:var(--brand-soft);}
.term .tip-pop{position:absolute; bottom:130%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:#fff; font-family:var(--sans); font-weight:500; font-size:12.5px; line-height:1.5;
  padding:9px 12px; border-radius:9px; width:230px; opacity:0; visibility:hidden; transition:.18s; z-index:30;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4); pointer-events:none; text-align:left;}
.term .tip-pop b{color:#E7C77A;}
.term .tip-pop::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink);}
.term:hover .tip-pop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

/* spectrum visual */
.viz{background:linear-gradient(160deg,#2A2336,#3A3047); color:#EDE8F2; border-radius:var(--radius);
  padding:30px 30px 34px; margin:34px 0;}
.viz h3{font-family:var(--sans); font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:#C9B9E6; margin:0 0 4px; font-weight:700;}
.viz .vsub{font-family:var(--serif); font-size:19px; margin:0 0 24px; color:#fff;}
.scale{position:relative; height:8px; border-radius:99px; margin:34px 6px 0;
  background:linear-gradient(90deg,#5B6470,#7E6BB0,#D29A3A);}
.scale .node{position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18);}
.scalecap{display:flex; justify-content:space-between; font-family:var(--sans); font-size:11px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9D8FB8; margin:10px 6px 0;}
.scalelabels{display:flex; justify-content:space-between; margin:18px 6px 0; gap:12px;}
.scalelabels .col{flex:1; text-align:center;}
.scalelabels .col b{font-family:var(--serif); font-size:16px; color:#fff; display:block;}
.scalelabels .col span{font-family:var(--sans); font-size:12px; color:#B9AECB; line-height:1.5; display:block; margin-top:4px;}
.axis{display:flex; gap:12px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);}
.axis .a{flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:14px 15px;}
.axis .a .p{font-family:var(--serif); font-size:23px; color:#fff; line-height:1;}
.axis .a b{font-family:var(--sans); font-size:13px; color:#E7DEF5; display:block; margin:8px 0 4px; font-weight:700;}
.axis .a span{font-family:var(--sans); font-size:12px; color:#A89BC2; line-height:1.5;}

/* summary key points */
.summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin:34px 0;}
.summary > h3{font-family:var(--serif); font-size:22px; margin:0 0 4px; font-weight:600;}
.summary > .ssub{font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:600; margin:0 0 20px;}
.kp{display:grid; gap:14px;}
.kp .item{display:flex; gap:13px; align-items:flex-start;}
.kp .item .ic{flex:none; width:30px; height:30px; border-radius:9px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:15px;}
.kp .item p{margin:0; font-size:14.5px; line-height:1.65;}
.kp .item p b{color:var(--ink);}
.points{margin-top:22px; padding-top:20px; border-top:1px solid var(--line);}
.points h4{font-family:var(--sans); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:700;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:6px 13px;}

/* section heading */
.sec-h{display:flex; align-items:center; gap:14px; margin:54px 0 8px;}
.sec-h .num{font-family:var(--serif); font-size:14px; font-weight:600; color:#fff; background:var(--brand);
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;}
.sec-h h2{font-family:var(--serif); font-size:27px; font-weight:600; margin:0; line-height:1.1;}
.sec-h h2 .zh{font-size:.62em; color:var(--muted); font-weight:500; margin-left:6px;}
.sec-intro{font-family:var(--sans); color:var(--muted); font-size:14px; margin:0 0 22px; padding-left:44px;}

/* quiz */
.quiz{display:grid; gap:16px;}
.q{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
.q .qh{display:flex; gap:12px; align-items:center; margin-bottom:8px;}
.q .qn{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft); padding:4px 10px; border-radius:7px;}
.q .qtype{font-family:var(--sans); font-size:11px; font-weight:700; color:var(--muted);}
.q .qtext{font-family:var(--serif); font-size:17px; line-height:1.6; margin:0 0 16px;}
.q .qtext em{color:var(--ink-soft);}
.opts{display:grid; gap:9px;}
.opts button{display:flex; gap:11px; align-items:center; text-align:left; width:100%; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:11px; padding:12px 15px; transition:.15s;}
.opts button:hover:not(:disabled){border-color:var(--brand); background:var(--brand-tint);}
.opts button .key{flex:none; width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line-strong);
  display:grid; place-items:center; font-weight:700; font-size:12px; color:var(--muted); background:var(--surface);}
.opts button.correct{border-color:var(--ok); background:var(--ok-soft); color:#2C6B43;}
.opts button.correct .key{background:var(--ok); border-color:var(--ok); color:#fff;}
.opts button.wrong{border-color:#C9524B; background:#FBECEA; color:#9A3B35;}
.opts button.wrong .key{background:#C9524B; border-color:#C9524B; color:#fff;}
.opts button:disabled{cursor:default;}
.explain{margin-top:14px; font-size:14px; line-height:1.7; color:var(--ink-soft); background:var(--surface-2);
  border-radius:11px; padding:13px 16px; display:none;}
.explain.show{display:block;}
.explain b{color:var(--ink);}
.reveal{margin-top:6px; font-family:var(--sans); font-weight:700; font-size:13px; color:var(--brand);
  background:none; border:0; cursor:pointer; padding:8px 0; display:inline-flex; align-items:center; gap:6px;}
.reveal:hover{color:var(--brand-deep);}
.reveal svg{transition:transform .2s;}
.answer{display:none; margin-top:12px; border-top:1px dashed var(--line); padding-top:14px;
  font-size:14.5px; line-height:1.72;}
.answer.show{display:block;}
.answer .alab{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ok); margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.answer .ex{margin-top:12px; padding:12px 15px; background:var(--surface-2); border-radius:10px; font-size:13.5px;}
.answer .ex em{color:var(--brand-deep); font-style:italic;}
.answer b{color:var(--ink);}

/* checklist */
.check{background:var(--ok-soft); border:1px solid #CDE7D6; border-radius:var(--radius); padding:24px 26px; margin:18px 0;}
.check h3{font-family:var(--sans); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ok);
  margin:0 0 4px; font-weight:700;}
.check .csub{font-family:var(--serif); font-size:18px; margin:0 0 18px; color:var(--ink);}
.check label{display:flex; gap:13px; align-items:flex-start; padding:13px 0; cursor:pointer; border-top:1px solid #D5EADD;}
.check label:first-of-type{border-top:0;}
.check input{position:absolute; opacity:0; pointer-events:none;}
.check .box{flex:none; width:24px; height:24px; border-radius:8px; border:2px solid #A7CDB6; background:var(--surface);
  display:grid; place-items:center; margin-top:1px; transition:.15s;}
.check .box svg{width:14px; height:14px; color:#fff; opacity:0; transform:scale(.5); transition:.15s;}
.check input:checked + .box{background:var(--ok); border-color:var(--ok);}
.check input:checked + .box svg{opacity:1; transform:scale(1);}
.check .txt .en{font-family:var(--serif); font-size:16px;}
.check .txt .zh{font-size:13.5px; color:var(--ink-soft);}
.check input:checked ~ .txt{opacity:.6;}

/* resource links / chips */
.res-list{display:grid; gap:10px; margin:16px 0;}
.res{display:flex; gap:13px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:13px 16px; font-family:var(--sans); transition:.15s;}
.res:hover{border-color:var(--brand); box-shadow:0 10px 26px -20px rgba(40,30,55,.5);}
.res .ic{flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff;}
.res .ic svg{width:19px;height:19px;}
.res.pdf .ic{background:#C0492F;} .res.doc .ic{background:#2B6CB0;}
.res.video .ic{background:#9A2D2D;} .res.quiz .ic{background:var(--brand);}
.res .tx{flex:1; min-width:0;}
.res .tx b{display:block; font-size:14px; color:var(--ink); font-weight:700;}
.res .tx span{font-size:12px; color:var(--muted); font-weight:600;}
.res .go{flex:none; color:var(--muted);} .res:hover .go{color:var(--brand);}
.res .go svg{width:16px;height:16px;}

/* video card (preview image link) */
.video-card{position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  margin:16px 0; background:#000;}
.video-card img{width:100%; display:block; opacity:.9; transition:.2s;}
.video-card:hover img{opacity:1; transform:scale(1.02);}
.video-card .play{position:absolute; inset:0; display:grid; place-items:center;}
.video-card .play i{width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.55);
  display:grid; place-items:center; backdrop-filter:blur(2px); border:2px solid rgba(255,255,255,.85);}
.video-card .play i::before{content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff; margin-left:4px;}
.video-card .cap{position:absolute; left:0; right:0; bottom:0; padding:30px 16px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.8)); color:#fff; font-family:var(--sans);
  font-size:13px; font-weight:600;}

/* book cards (1-1A) */
.books{display:grid; gap:14px; margin:22px 0;}
.book{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
.book .bk-h{display:flex; gap:13px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px;}
.book .bk-h h3{font-family:var(--serif); font-size:21px; margin:0; font-weight:600;}
.book .bk-h .by{font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:600;}
.book .tags{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px;}
.book .gtag{font-family:var(--sans); font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--brand-soft); color:var(--brand-deep);}
.book .gtag.cite{background:var(--accent-soft); color:#7A5210;}
.book .block{padding:0; border:0;} .book .block + .block{border-top:1px dashed var(--line); padding-top:14px; margin-top:14px;}

/* pager */
.pager{display:flex; gap:14px; margin-top:48px;}
.pager a{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; font-family:var(--sans);}
.pager a:hover{border-color:var(--brand); box-shadow:0 12px 30px -22px rgba(40,30,55,.5);}
.pager a .l{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.pager a .n{font-weight:700; font-size:14.5px; color:var(--ink); margin-top:5px; display:block;}
.pager a.next{text-align:right;}
.pager a.disabled{opacity:.4; pointer-events:none;}

.lastmod{font-family:var(--sans); font-size:12px; color:var(--muted); text-align:center; margin-top:40px;}

/* ===========================================================
   HOME / CATALOG  (full-page scroll layouts)
   =========================================================== */
.page{height:100vh; overflow-y:auto; scroll-behavior:smooth;}
.page-top{position:sticky; top:0; z-index:50; background:rgba(247,244,238,.86);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
  padding:14px clamp(20px,6vw,72px); display:flex; align-items:center; gap:16px;}
.page-top .spacer{flex:1;}
.wrap{max-width:1280px; margin:0 auto; padding:0 clamp(20px,6vw,72px);}

.hero{padding:64px 0 30px;}
.hero .eyebrow{margin-bottom:16px;}
.hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(38px,6vw,68px); line-height:1.05;
  letter-spacing:-.02em; margin:0;}
.hero h1 .zh{display:block; color:var(--ink-soft); font-weight:500; font-size:.5em; margin-top:14px;}
.hero p.sub{font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); color:var(--ink-soft);
  max-width:64ch; margin:24px 0 0; line-height:1.6;}
.hero .stats{display:flex; gap:30px; flex-wrap:wrap; margin-top:34px; padding-top:28px; border-top:1px solid var(--line);}
.hero .stat b{font-family:var(--serif); font-size:30px; color:var(--brand); display:block; line-height:1;}
.hero .stat span{font-family:var(--sans); font-size:12.5px; color:var(--muted); font-weight:600; margin-top:6px; display:block;}

.section-label{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); margin:64px 0 6px; display:flex; align-items:center; gap:10px;}
.section-label::after{content:""; flex:1; height:1px; background:var(--line);}
.section-title{font-family:var(--serif); font-size:28px; font-weight:600; margin:0 0 6px;}
.section-desc{font-family:var(--sans); color:var(--muted); font-size:14.5px; max-width:70ch; margin:0 0 26px; line-height:1.6;}

/* course card (catalog) */
.course-card{display:flex; gap:24px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:28px 30px; transition:.2s; color:inherit;}
.course-card:hover{border-color:var(--brand); box-shadow:0 22px 50px -28px rgba(40,30,55,.45); transform:translateY(-2px);}
.course-card .cc-mark{flex:none; width:78px; height:96px; border-radius:12px;
  background:linear-gradient(155deg,var(--brand),var(--brand-deep)); color:#fff; display:flex; flex-direction:column;
  justify-content:flex-end; padding:12px; font-family:var(--serif); box-shadow:0 12px 30px -12px var(--brand);}
.course-card .cc-mark b{font-size:24px; line-height:1;} .course-card .cc-mark span{font-size:10px; opacity:.8; font-family:var(--sans); margin-top:4px;}
.course-card .cc-body{flex:1;}
.course-card .cc-body h3{font-family:var(--serif); font-size:23px; margin:0 0 5px; font-weight:600;}
.course-card .cc-body p{margin:0; font-family:var(--sans); color:var(--muted); font-size:13.5px; font-weight:600;}
.course-card .cc-go{flex:none; color:var(--brand);}

/* unit pedagogy flow (course home) */
.flow{display:grid; gap:14px; margin:26px 0;}
.flow .unit{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;}
.flow .unit .u-n{font-family:var(--serif); font-size:15px; font-weight:600; color:#fff; background:var(--brand);
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;}
.flow .unit h4{font-family:var(--serif); font-size:18px; margin:0 0 6px; font-weight:600;}
.flow .unit h4 .zh{color:var(--ink-soft); font-weight:500; font-size:.85em;}
.flow .unit p{margin:0; font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

/* activity grid (course home) */
.acts{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin:26px 0;}
.act{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 20px; transition:.2s; color:inherit; position:relative; overflow:hidden;}
.act:hover{border-color:var(--brand); box-shadow:0 18px 40px -26px rgba(40,30,55,.45); transform:translateY(-2px);}
.act .a-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.act .a-code{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--brand);
  background:var(--brand-soft); padding:5px 10px; border-radius:7px;}
.act .a-status{font-family:var(--sans); font-size:11px; font-weight:700; display:flex; align-items:center; gap:6px; color:var(--muted);}
.act .a-status .d{width:9px;height:9px;border-radius:50%;background:var(--line-strong);}
.act.done .a-status{color:var(--ok);} .act.done .a-status .d{background:var(--ok);}
.act h4{font-family:var(--serif); font-size:18px; margin:0 0 4px; font-weight:600; line-height:1.25;}
.act .a-zh{font-family:var(--sans); font-size:13px; color:var(--ink-soft); font-weight:600;}
.act .a-desc{font-family:var(--sans); font-size:12.5px; color:var(--muted); line-height:1.55; margin-top:12px;}
.act .a-go{margin-top:auto; padding-top:16px; font-family:var(--sans); font-size:12.5px; font-weight:700; color:var(--brand);
  display:inline-flex; align-items:center; gap:6px;}
.act .cta-badge{position:absolute; top:0; right:0; background:var(--accent); color:#fff; font-family:var(--sans);
  font-size:10px; font-weight:700; letter-spacing:.06em; padding:4px 10px; border-bottom-left-radius:10px;}

.footer{padding:60px 0 80px; margin-top:30px; border-top:1px solid var(--line); color:var(--muted);
  font-family:var(--sans); font-size:12.5px;}

/* ---------- mobile ---------- */
.menu-btn{display:none;}
.scrim{display:none;}
@media(max-width:920px){
  .app{grid-template-columns:1fr;}
  .side{position:fixed; top:0; left:0; z-index:90; width:300px; transform:translateX(-100%); transition:transform .25s;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.4);}
  body.nav-open .side{transform:translateX(0);}
  .scrim{position:fixed; inset:0; background:rgba(36,30,45,.45); z-index:85; opacity:0; pointer-events:none; transition:.25s;}
  body.nav-open .scrim{opacity:1; pointer-events:auto; display:block;}
  .menu-btn{display:grid;}
}
@media(max-width:560px){
  .axis{flex-direction:column;}
  .scalelabels{flex-direction:column; gap:6px; text-align:left;}
  .scalelabels .col{text-align:left;}
  .pager{flex-direction:column;}
  .card .head h2{font-size:19px;}
  .course-card{flex-direction:column; align-items:flex-start; text-align:left;}
  .flow .unit{grid-template-columns:1fr;}
}