/* Tokens copied verbatim from reference/prototype.html.
   Task 4 ports the full stylesheet; this file only needs the tokens
   plus enough for the login page to look presentable. */
:root{
  --bg:#fbfafc; --surface:#ffffff; --ink:#26222b; --muted:#6f6878;
  --accent:#6d4a8f; --accent-soft:#f0eaf6; --line:#e4dfe9;
  --card:#f6f4f9; --good:#2e6b4f; --warn:#8a5a1e;
  --qa-user:#efe9f5; --shadow:0 1px 3px rgba(38,34,43,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17141b; --surface:#1f1b25; --ink:#e8e4ee; --muted:#9d95a8;
    --accent:#b79ad6; --accent-soft:#2c2436; --line:#332d3d;
    --card:#241f2d; --good:#7fc9a4; --warn:#d9a866;
    --qa-user:#2c2436; --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#17141b; --surface:#1f1b25; --ink:#e8e4ee; --muted:#9d95a8;
  --accent:#b79ad6; --accent-soft:#2c2436; --line:#332d3d;
  --card:#241f2d; --good:#7fc9a4; --warn:#d9a866;
  --qa-user:#2c2436; --shadow:0 1px 3px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.68;
}

.serif{font-family:"Noto Serif SC","Songti SC","STSong",Georgia,serif}
.wrap{max-width:46rem; margin:0 auto; padding:0 1.25rem 6rem}

/* ---- 页头 ---- */
header.mast{border-bottom:1px solid var(--line); padding:2.2rem 0 1.4rem; margin-bottom:2.2rem}
.eyebrow{display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; font-size:.78rem; letter-spacing:.08em; color:var(--muted)}
.eyebrow .course{color:var(--accent); font-weight:600}
.demo-badge{font-size:.7rem; letter-spacing:.05em; background:var(--accent-soft); color:var(--accent); border:1px solid var(--line); padding:.1rem .5rem; border-radius:99px}
h1{font-size:1.55rem; line-height:1.5; margin:.7rem 0 .5rem; text-wrap:balance; font-weight:700}
h1 .sub{display:block; font-size:1.02rem; color:var(--muted); font-weight:500; margin-top:.2rem}
.meta{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.progress{margin-top:1rem; height:3px; background:var(--line); border-radius:2px; overflow:hidden}
.progress i{display:block; height:100%; width:3.4%; background:var(--accent)}

/* ---- 正文 ---- */
h2{font-size:1.32rem; font-weight:700; margin:2.2rem 0 .8rem; line-height:1.55; text-wrap:balance; scroll-margin-top:1.5rem; color:var(--accent)}
h2 span.no{margin-right:.45em; font-variant-numeric:tabular-nums; opacity:.65}
h2.plain{font-size:1.22rem}
p{margin:.7rem 0}
strong{font-weight:650}
.tablebox{overflow-x:auto; margin:1.2rem 0; border:1px solid var(--line); border-radius:8px}
table{border-collapse:collapse; width:100%; font-size:.86rem; line-height:1.6; background:var(--surface)}
th,td{padding:.55rem .8rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--card); font-weight:600; white-space:nowrap}
tr:last-child td{border-bottom:none}
td{font-variant-numeric:tabular-nums}
.note{border-left:3px solid var(--accent); background:var(--accent-soft); padding:.7rem 1rem; border-radius:0 8px 8px 0; margin:1.2rem 0; font-size:.92rem}
.takeaway{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.3rem; margin:1.4rem 0; font-size:.98rem}
.takeaway .label{font-size:.72rem; letter-spacing:.12em; color:var(--accent); font-weight:600; display:block; margin-bottom:.4rem}

/* ---- 数据卡（折叠） ---- */
details.datacard{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:.8rem 0; box-shadow:var(--shadow); background:var(--surface)}
details.datacard summary.dc-head{background:var(--card); padding:.7rem 1rem; font-weight:600; font-size:.92rem; cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:.6em}
details.datacard summary.dc-head::before{content:"▸"; color:var(--accent); transition:transform .15s; flex:none}
details.datacard[open] summary.dc-head::before{transform:rotate(90deg)}
details.datacard[open] summary.dc-head{border-bottom:1px solid var(--line)}
details.datacard summary.dc-head::-webkit-details-marker{display:none}
details.datacard summary.dc-head:focus-visible{outline:2px solid var(--accent)}
.datacard .dc-head .tag{font-size:.7rem; letter-spacing:.1em; color:var(--accent)}
.datacard .tablebox{border:none; border-radius:0; margin:0}
.datacard .dc-note{padding:.5rem 1rem .7rem; font-size:.8rem; color:var(--muted); border-top:1px solid var(--line)}
.fine{font-size:.8rem; color:var(--muted)}

details{border:1px solid var(--line); border-radius:8px; margin:.8rem 0; background:var(--surface)}
details summary{cursor:pointer; padding:.6rem 1rem; font-size:.88rem; font-weight:600; color:var(--muted)}
details[open] summary{border-bottom:1px solid var(--line); color:var(--ink)}
details .inner{padding:.8rem 1.2rem; font-size:.85rem; color:var(--muted)}
blockquote{margin:.6rem 0; padding-left:1rem; border-left:3px solid var(--line); font-style:normal}
.refs{font-size:.85rem; color:var(--muted)}
.refs li{margin:.5rem 0}
.refs .grade{color:var(--accent); font-weight:600}
a{color:var(--accent)}
hr{border:none; border-top:1px solid var(--line); margin:2.6rem 0}

/* ---- 右侧悬浮目录 ---- */
nav.toc{
  display:none; position:fixed; top:5.5rem; right:1.25rem; width:13rem;
  font-size:.8rem; line-height:1.5; z-index:5;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:.8rem .4rem; max-height:calc(100vh - 8rem); overflow-y:auto;
}
@media (min-width:1220px){ nav.toc{display:block} }
nav.toc .toc-title{font-size:.7rem; letter-spacing:.14em; color:var(--muted); padding:0 .8rem .5rem; font-weight:600}
nav.toc a{
  display:block; padding:.32rem .8rem; color:var(--muted); text-decoration:none;
  border-left:2px solid transparent; border-radius:0 6px 6px 0;
}
nav.toc a:hover{color:var(--ink); background:var(--card)}
nav.toc a.active{color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); font-weight:600}
nav.toc a .n{font-variant-numeric:tabular-nums; margin-right:.4em; opacity:.7}
nav.toc .toc-sep{border-top:1px solid var(--line); margin:.5rem .8rem}
nav.toc a:focus-visible{outline:2px solid var(--accent)}

/* ---- 问答区 ---- */
#qa{scroll-margin-top:2rem}
#qa h2{display:flex; align-items:baseline; gap:.6rem}
#qa h2 .count{font-size:.8rem; color:var(--muted); font-weight:400; font-variant-numeric:tabular-nums}
.qa-intro{font-size:.85rem; color:var(--muted); margin-bottom:1.2rem}
.qa-record{border:1px solid var(--line); border-radius:10px; margin:1rem 0; overflow:hidden; background:var(--surface)}
.qa-q{padding:.8rem 1rem; background:var(--qa-user); font-weight:600; font-size:.94rem; display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.qa-q .who{font-size:.74rem; color:var(--muted); font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums}
.qa-a{padding:.9rem 1rem; font-size:.92rem}
.qa-a .ai-label{display:inline-block; font-size:.68rem; letter-spacing:.06em; color:var(--accent); border:1px solid var(--line); border-radius:99px; padding:.05rem .5rem; margin-bottom:.5rem}
.qa-a .cite{margin-top:.6rem; padding:.5rem .8rem; background:var(--card); border-radius:6px; font-size:.8rem; color:var(--muted)}
.qa-del{float:right; background:none; border:none; color:var(--muted); font-size:.72rem; cursor:pointer; padding:.2rem .4rem}
.qa-del:hover{color:var(--warn)}
.qa-del:focus-visible{outline:2px solid var(--accent)}

.askbox{position:relative; margin-top:1.6rem; border:1.5px solid var(--accent); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); padding:.6rem}
.askbox textarea{
  width:100%; border:none; resize:vertical; min-height:3.2rem; background:transparent;
  font:inherit; font-size:.94rem; color:var(--ink); padding:.4rem .6rem; outline:none;
}
.askrow{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 .4rem .2rem}
.askrow .hint{font-size:.74rem; color:var(--muted)}
.askbox button.send{
  background:var(--accent); color:var(--bg); border:none; border-radius:8px;
  padding:.45rem 1.2rem; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
}
.askbox button.send:disabled{opacity:.5; cursor:default}
.askbox button.send:focus-visible{outline:2px solid var(--ink)}
.thinking{font-size:.85rem; color:var(--muted); padding:.6rem .4rem; display:none}
.thinking.on{display:block}
.ask-error{font-size:.85rem; color:var(--warn); padding:.4rem .4rem 0}

.fab{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:10;
  background:var(--accent); color:var(--bg); border:none; border-radius:99px;
  padding:.65rem 1.2rem; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  box-shadow:0 2px 10px rgba(38,34,43,.25);
  text-decoration:none; display:inline-block;
}
.fab:focus-visible{outline:2px solid var(--ink)}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ---- 课程页讲次列表（原型未覆盖，沿用 tokens 自行设计） ---- */
.course-list{list-style:none; margin:0; padding:0}
.course-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  border-bottom:1px solid var(--line);
}
.course-list a{
  flex:1; display:block; padding:.9rem .2rem; text-decoration:none; color:var(--ink);
  font-size:.98rem;
}
.course-list a:hover{color:var(--accent)}
.course-list-lesson{color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums}
.course-list-date{flex-shrink:0; color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums}

/* ---- 登录页 ---- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.login-card{
  width:100%; max-width:22rem; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:2rem 1.75rem;
}
.login-card h1{font-size:1.3rem; margin:0 0 .3rem}
.login-sub{color:var(--muted); font-size:.88rem; margin:0 0 1.2rem}
.login-error{
  color:var(--warn); background:var(--accent-soft); border-radius:8px;
  padding:.6rem .8rem; font-size:.88rem; margin:0 0 1rem;
}
.login-form{display:flex; flex-direction:column; gap:.4rem}
.login-form label{font-size:.82rem; color:var(--muted); margin-top:.6rem}
.login-form input{
  font:inherit; font-size:.95rem; padding:.55rem .7rem; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--ink);
}
.login-form input:focus-visible{outline:2px solid var(--accent)}
.login-form button{
  margin-top:1.2rem; background:var(--accent); color:var(--bg); border:none;
  border-radius:8px; padding:.65rem; font-size:.95rem; font-weight:600; cursor:pointer;
}
.login-form button:focus-visible{outline:2px solid var(--ink)}

/* ---- 页脚 ---- */
.site-footer{
  text-align:center; color:var(--muted); font-size:.78rem; padding:1.5rem 1rem;
  display:flex; justify-content:center; gap:1rem;
}
.admin-link{color:var(--accent); font-weight:600}

/* ---- 管理页 ---- */
.admin-section{margin:2rem 0}
.admin-section table{font-size:.82rem}
.admin-form{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem;
  margin-top:1rem; padding:1rem; background:var(--card); border-radius:10px;
}
.admin-form label{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--muted)}
.admin-checkbox{flex-direction:row !important; align-items:center; gap:.4rem !important}
.admin-form input[type="text"], .admin-form input[type="file"]{
  font:inherit; font-size:.9rem; padding:.4rem .6rem; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink);
}
.admin-inline-form{display:inline}
.admin-btn{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  background:var(--accent); color:var(--bg); border:none; border-radius:8px;
  padding:.4rem .9rem;
}
.admin-btn:focus-visible{outline:2px solid var(--ink)}
.admin-btn-danger{background:transparent; color:var(--warn); border:1px solid var(--line)}