/* ============================================================
   光影课堂 · 样式表
   设计语言：暗房 + 金色时刻。暗色为主，浅色可切换。
   ============================================================ */

:root{
  --bg:#f6f6f7; --bg-2:#ecedef; --surface:#ffffff; --surface-2:#f2f3f5;
  --border:#dfe1e6; --border-2:#c9ccd3;
  --text:#171a1f; --dim:#5f6672; --faint:#8a919d;
  --accent:#b57b16; --accent-soft:rgba(181,123,22,.12);
  --accent-2:#2f6fb0; --good:#2e8a55; --mid:#b3861d; --bad:#c0453f;
  --shadow:0 1px 2px rgba(16,18,22,.06),0 8px 24px rgba(16,18,22,.08);
  --radius:14px; --radius-s:9px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --nav-w:264px;
}
:root[data-theme="dark"]{
  --bg:#0e1014; --bg-2:#0a0c0f; --surface:#161a21; --surface-2:#1d222b;
  --border:#272d38; --border-2:#39414f;
  --text:#e7eaef; --dim:#9aa3b2; --faint:#6d7684;
  --accent:#e0a94a; --accent-soft:rgba(224,169,74,.14);
  --accent-2:#67a9e8; --good:#4cb37a; --mid:#dda43e; --bad:#e0665f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
}

/* 跟随系统：未显式指定主题时，由 prefers-color-scheme 决定（显式选亮色时不生效） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bg:#0e1014; --bg-2:#0a0c0f; --surface:#161a21; --surface-2:#1d222b;
  --border:#272d38; --border-2:#39414f;
  --text:#e7eaef; --dim:#9aa3b2; --faint:#6d7684;
  --accent:#e0a94a; --accent-soft:rgba(224,169,74,.14);
  --accent-2:#67a9e8; --good:#4cb37a; --mid:#dda43e; --bad:#e0665f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
}
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

#app{display:flex;flex-direction:column;height:100%}

/* ---------------- 顶栏 ---------------- */
.pa-top{
  display:flex;align-items:center;gap:14px;height:58px;flex:0 0 58px;
  padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);
  position:relative;z-index:30;
}
.pa-top__menu{display:none;background:none;border:0;color:var(--text);font-size:20px;cursor:pointer;padding:4px 8px}
.pa-top__brand{display:flex;align-items:center;gap:10px}
.pa-top__logo{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),#8a5a12);color:#1a1206;font-size:17px;font-weight:700;
}
.pa-top__brand b{display:block;font-size:15px;letter-spacing:.04em}
.pa-top__brand em{display:block;font-size:11px;font-style:normal;color:var(--faint);letter-spacing:.14em}
.pa-top__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.pa-ring{
  --pct:0;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--border) 0);
}
.pa-ring i{position:absolute;inset:3px;border-radius:50%;background:var(--surface)}
.pa-top__pct{position:relative;font-size:10.5px;font-weight:700;font-family:var(--mono)}

/* ---------------- 主体布局 ---------------- */
.pa-body{flex:1;display:flex;min-height:0;position:relative}
.pa-nav{
  width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--bg-2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.pa-nav__scroll{flex:1 1 auto;overflow-y:auto;min-height:0;padding:4px 0 18px}

/* 顶部：互动课 / 讲义 两个入口 */
.pa-nav__tabs{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:12px 12px 10px;border-bottom:1px solid var(--border)}
.pa-nav__tab{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 6px;border-radius:var(--radius-s);font-size:13px;color:var(--dim);
  background:var(--surface);border:1px solid var(--border);transition:.14s}
.pa-nav__tab:hover{color:var(--text);border-color:var(--border-2)}
.pa-nav__tab.is-on{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:600}
.pa-nav__tab small{font-size:10.5px;opacity:.8;font-family:var(--mono)}
.pa-main{flex:1;overflow-y:auto;scroll-behavior:smooth}
.pa-scrim{display:none}

.pa-nav__home{display:block;margin:0 12px 12px;padding:9px 12px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);font-size:13.5px}
.pa-nav__home:hover{border-color:var(--accent)}
.pa-nav__group{margin-bottom:14px}
.pa-nav__title{
  font-size:11px;letter-spacing:.16em;color:var(--faint);padding:8px 20px 6px;text-transform:uppercase;
}
.pa-nav__list{list-style:none;margin:0;padding:0}
.pa-nav__item{
  display:flex;align-items:center;gap:9px;padding:7px 18px 7px 16px;font-size:13.5px;color:var(--dim);
  border-left:2px solid transparent;
}
.pa-nav__item:hover{color:var(--text);background:var(--surface)}
.pa-nav__item.is-active{color:var(--text);background:var(--accent-soft);border-left-color:var(--accent);font-weight:600}
.pa-nav__item.is-done .pa-nav__icon{color:var(--good)}
.pa-nav__icon{width:16px;text-align:center;opacity:.85}
.pa-nav__txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-nav__pct{font-size:10.5px;font-family:var(--mono);color:var(--faint)}
.pa-nav__foot{flex:0 0 auto;padding:12px 14px;border-top:1px solid var(--border);
  background:var(--bg-2);font-size:11.5px;color:var(--faint);
  display:flex;flex-direction:column;gap:8px}
.pa-nav__stats{display:flex;flex-direction:column;gap:5px}
.pa-nav__stat{display:flex;align-items:center;gap:8px}
.pa-nav__stat span{flex:0 0 auto;min-width:52px}
.pa-nav__bar{flex:1;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.pa-nav__bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.pa-nav__bar i.is-doc{background:var(--accent-2)}
.pa-nav__acts{display:flex;gap:6px}
.pa-nav__acts .pa-btn{flex:1;padding:5px 8px;font-size:11.5px;justify-content:center}

/* ---------------- 页面容器 ---------------- */
.pa-page{max-width:1080px;margin:0 auto;padding:30px 34px 90px}
.pa-h2{font-size:20px;margin:38px 0 16px;letter-spacing:.02em}

/* ---------------- 首页 ---------------- */
.pa-hero{display:flex;gap:34px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow)}
.pa-hero__txt{flex:1;min-width:280px}
.pa-hero h1{font-size:27px;line-height:1.4;margin:0 0 12px}
.pa-hero p{color:var(--dim);margin:0 0 20px;max-width:56ch}
.pa-hero__btns{display:flex;gap:10px;flex-wrap:wrap}
.pa-hero__stat{display:flex;gap:26px}
.pa-stat{text-align:center}
.pa-stat b{display:block;font-size:26px;font-family:var(--mono);color:var(--accent)}
.pa-stat span{font-size:11.5px;color:var(--faint)}

.pa-road{display:flex;flex-direction:column;gap:14px}
.pa-road__stage{display:flex;gap:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px}
.pa-road__num{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:14px;font-weight:700}
.pa-road__body{flex:1}
.pa-road__body h3{margin:2px 0 12px;font-size:15px;letter-spacing:.04em}
.pa-road__chips{display:flex;flex-wrap:wrap;gap:8px}
.pa-chip{position:relative;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--border-2);font-size:13px;color:var(--dim);overflow:hidden;background:var(--surface-2)}
.pa-chip:hover{color:var(--text);border-color:var(--accent)}
.pa-chip i{position:absolute;left:0;bottom:0;height:2px;background:var(--accent)}
.pa-chip.is-done{color:var(--text);border-color:var(--good)}
.pa-chip.is-done .pa-chip__icon{color:var(--good)}
.pa-chip__icon{opacity:.8}

.pa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pa-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.pa-card__n{font-family:var(--mono);color:var(--accent);font-size:16px;margin-bottom:6px}
.pa-card h4{margin:0 0 8px;font-size:14.5px}
.pa-card p{margin:0;font-size:13px;color:var(--dim);line-height:1.7}
.pa-tip{margin-top:26px;font-size:12.5px;color:var(--faint);border-left:2px solid var(--border-2);padding-left:12px}

/* ---------------- 课程页 ---------------- */
.pa-lesson__head{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:20px}
.pa-lesson__kicker{font-size:11.5px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.pa-lesson__head h1{font-size:26px;margin:8px 0 6px}
.pa-lesson__sub{color:var(--dim);margin:0 0 14px}
.pa-goals{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:6px}
.pa-goals li{position:relative;padding-left:22px;font-size:13.5px;color:var(--dim)}
.pa-goals li:before{content:"◆";position:absolute;left:2px;color:var(--accent);font-size:9px;top:5px}
.pa-doclink{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--accent-2);border-bottom:1px dotted currentColor}

.pa-steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:14px;margin-bottom:18px;scrollbar-width:thin}
.pa-steps__dot{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;flex:0 0 auto;
  background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;color:var(--dim);white-space:nowrap}
.pa-steps__dot b{font-family:var(--mono);opacity:.7}
.pa-steps__dot.is-now{background:var(--accent);color:#1a1206;border-color:var(--accent);font-weight:600}
.pa-steps__dot.is-now b{opacity:1}
.pa-steps__dot.is-done:not(.is-now){border-color:var(--good);color:var(--good)}

.pa-step__title{display:flex;align-items:center;gap:10px;font-size:19px;margin:6px 0 16px}
.pa-step__tag{font-size:11px;padding:3px 9px;border-radius:6px;background:var(--surface-2);
  color:var(--dim);border:1px solid var(--border);letter-spacing:.08em;font-weight:600}
.pa-step__tag--sim{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.pa-step__tag--quiz{color:var(--accent-2);border-color:var(--accent-2)}
.pa-step__tag--task{color:var(--good);border-color:var(--good)}

.pa-lesson__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--border)}

/* ---------------- 正文排版 ---------------- */
.pa-prose{max-width:74ch;color:var(--text)}
.pa-prose p{margin:0 0 14px}
.pa-prose h3{font-size:16px;margin:26px 0 10px}
.pa-prose h4{font-size:14.5px;margin:20px 0 8px;color:var(--accent)}
.pa-prose ul,.pa-prose ol{padding-left:22px;margin:0 0 14px}
.pa-prose li{margin-bottom:6px}
.pa-prose code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:2px 6px;border-radius:5px;border:1px solid var(--border)}
.pa-prose blockquote{margin:16px 0;padding:12px 16px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 var(--radius-s) var(--radius-s) 0;color:var(--dim)}
.pa-prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
.pa-prose th,.pa-prose td{border:1px solid var(--border);padding:8px 11px;text-align:left;vertical-align:top}
.pa-prose th{background:var(--surface-2);font-weight:600;color:var(--dim)}
.pa-prose strong,.pa-prose b{color:var(--text)}
.pa-prose hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* 术语提示：<b class="term" title="解释">景深</b> */
.term{border-bottom:1px dashed var(--accent);cursor:help;font-weight:600}

/* ---------------- 互动模块通用外观 ---------------- */
.pa-simwrap{margin:20px 0 8px}
.pa-lab{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.9fr);gap:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.pa-lab--wide{grid-template-columns:1fr}
.pa-stage{min-width:0;display:flex;flex-direction:column;gap:10px}
.pa-panel{min-width:0;display:flex;flex-direction:column;gap:14px;max-height:600px;overflow-y:auto;padding-right:4px}
.pa-canvas{display:block;width:100%;border-radius:var(--radius-s);background:#000;border:1px solid var(--border)}

.pa-group{border:1px solid var(--border);border-radius:var(--radius-s);padding:12px;background:var(--surface-2)}
.pa-group__title{font-size:12px;letter-spacing:.1em;color:var(--faint);margin-bottom:4px;text-transform:uppercase}
.pa-group__hint{font-size:12px;color:var(--dim);margin-bottom:10px;line-height:1.6}
.pa-group__body{display:flex;flex-direction:column;gap:12px}

.pa-ctl{display:block}
.pa-ctl--row{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.pa-ctl__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.pa-ctl__label{font-size:12.5px;color:var(--dim)}
.pa-ctl__val{font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:600}
.pa-ctl__hint{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.55}

.pa-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
.pa-range::-webkit-slider-runnable-track{height:4px;background:var(--border-2);border-radius:2px}
.pa-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);margin-top:-6px;border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pa-range::-moz-range-track{height:4px;background:var(--border-2);border-radius:2px}
.pa-range::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--surface);border-radius:50%;background:var(--accent)}

.pa-seg{display:flex;gap:4px;flex-wrap:wrap}
.pa-seg--grid{display:grid;gap:4px}
.pa-seg__btn{flex:1;min-width:44px;padding:6px 8px;font-size:12px;border-radius:7px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--dim);transition:.12s}
.pa-seg__btn:hover{border-color:var(--border-2);color:var(--text)}
.pa-seg__btn.is-on{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:600}

.pa-switch{width:38px;height:21px;border-radius:999px;background:var(--border-2);position:relative;transition:.15s;flex:0 0 38px}
.pa-switch.is-on{background:var(--accent)}
.pa-switch__dot{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.pa-switch.is-on .pa-switch__dot{left:19px}

.pa-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:13.5px;cursor:pointer;transition:.14s}
.pa-btn:hover{border-color:var(--accent);color:var(--accent)}
.pa-btn--primary{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:600}
.pa-btn--primary:hover{filter:brightness(1.08);color:#1a1206}
.pa-btn--primary.is-done{background:var(--good);border-color:var(--good);color:#04120a}
.pa-btn--ghost{background:transparent;font-size:12.5px;padding:6px 12px}

.pa-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.pa-readout__item{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:7px 9px}
.pa-readout__k{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.pa-readout__v{display:block;font-family:var(--mono);font-size:14px;margin-top:2px}
.pa-readout__v.is-good{color:var(--good)} .pa-readout__v.is-warn{color:var(--mid)} .pa-readout__v.is-bad{color:var(--bad)}

.pa-note{font-size:12.5px;line-height:1.65;padding:10px 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--dim)}
.pa-note--good{border-color:var(--good);color:var(--good);background:rgba(76,179,122,.08)}
.pa-note--warn{border-color:var(--mid);color:var(--mid);background:rgba(221,164,62,.08)}
.pa-note--bad{border-color:var(--bad);color:var(--bad);background:rgba(224,102,95,.08)}

.pa-score{display:flex;align-items:center;gap:10px;font-size:12px}
.pa-score__label{width:56px;color:var(--dim);flex:0 0 auto}
.pa-score__track{flex:1;height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.pa-score__fill{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.pa-score__fill.is-good{background:var(--good)} .pa-score__fill.is-mid{background:var(--mid)} .pa-score__fill.is-low{background:var(--bad)}
.pa-score__num{font-family:var(--mono);width:26px;text-align:right}

.pa-details{border:1px solid var(--border);border-radius:var(--radius-s);padding:10px 12px;background:var(--surface-2);margin:10px 0}
.pa-details summary{cursor:pointer;font-size:13px;color:var(--accent)}
.pa-details__body{margin-top:10px;font-size:13px;color:var(--dim);line-height:1.7}

.pa-trylist{margin-top:16px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:var(--radius-s);padding:14px 18px}
.pa-trylist h4{margin:0 0 8px;font-size:13px;color:var(--accent);letter-spacing:.08em}
.pa-trylist ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--text)}
.pa-trylist li{margin-bottom:6px}

/* ---------------- 测验 ---------------- */
.pa-quiz{display:flex;flex-direction:column;gap:22px;max-width:74ch}
.pa-quiz__q{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.pa-quiz__title{display:flex;gap:4px;margin-bottom:14px;font-size:15px;line-height:1.65}
.pa-quiz__opts{display:flex;flex-direction:column;gap:8px}
.pa-quiz__opt{display:flex;align-items:flex-start;gap:11px;text-align:left;padding:11px 14px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:13.5px;cursor:pointer;transition:.13s;line-height:1.6}
.pa-quiz__opt:hover{border-color:var(--accent)}
.pa-quiz__opt i{font-style:normal;font-family:var(--mono);color:var(--faint);flex:0 0 14px}
.pa-quiz__opt.is-right{border-color:var(--good);background:rgba(76,179,122,.1)}
.pa-quiz__opt.is-right i{color:var(--good)}
.pa-quiz__opt.is-wrong{border-color:var(--bad);background:rgba(224,102,95,.1)}
.pa-quiz__opt.is-wrong i{color:var(--bad)}
.pa-quiz__why{margin-top:13px;padding:11px 14px;border-radius:8px;background:var(--accent-soft);
  border-left:3px solid var(--accent);font-size:13px;color:var(--dim);line-height:1.7}
.pa-quiz__score{font-size:13.5px;color:var(--dim);padding:12px 16px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border)}
.pa-quiz__score.is-good{color:var(--good);border-color:var(--good)}
.pa-quiz__score.is-mid{color:var(--mid);border-color:var(--mid)}
.pa-quiz__score.is-low{color:var(--bad);border-color:var(--bad)}
.pa-quiz__prev{font-size:11.5px;color:var(--faint)}

/* ---------------- 作业 ---------------- */
.pa-task{max-width:74ch;display:flex;flex-direction:column;gap:18px}
.pa-task__spec{width:100%;border-collapse:collapse;font-size:13.5px}
.pa-task__spec th{width:96px;text-align:left;padding:9px 12px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--accent);font-weight:600;vertical-align:top}
.pa-task__spec td{padding:9px 12px;border:1px solid var(--border);line-height:1.7}
.pa-task__block h4{margin:0 0 10px;font-size:13.5px;color:var(--accent)}
.pa-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pa-check label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer;line-height:1.65}
.pa-check input{margin-top:4px;accent-color:var(--accent);width:15px;height:15px;flex:0 0 15px}
.pa-note-area{width:100%;min-height:90px;padding:12px 14px;border-radius:var(--radius-s);resize:vertical;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:13.5px;line-height:1.7}
.pa-note-area:focus{outline:none;border-color:var(--accent)}

/* ---------------- 响应式 ---------------- */
@media (max-width:1000px){
  .pa-lab{grid-template-columns:1fr}
  .pa-panel{max-height:none}
}
@media (max-width:820px){
  body{font-size:15px}
  .pa-top__menu{display:block}
  .pa-nav{position:absolute;top:0;bottom:0;left:0;z-index:20;transform:translateX(-100%);transition:transform .22s}
  body.nav-open .pa-nav{transform:none;box-shadow:var(--shadow)}
  body.nav-open .pa-scrim{display:block;position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:10}
  .pa-page{padding:22px 18px 80px}
  .pa-hero{padding:22px}
  .pa-hero h1{font-size:22px}
  .pa-hero__stat{gap:18px}
  .pa-lesson__foot{flex-wrap:wrap}
}