/* ============================================================
   《动画史》课程网站 · 设计系统
   基调：电子杂志 × 课程色谱（米白 / 陶土 / 赭石）
   字体：Noto Serif SC（标题）/ Noto Sans SC（正文）/ ui-monospace（元数据）
   ============================================================ */
:root{
  --bg:#F6F1E7;
  --bg-soft:#EDE4D3;
  --paper:#FBF7EE;
  --ink:#33291F;
  --ink-2:#4A3D30;
  --primary:#A4552F;
  --ochre:#B98A4E;
  --muted:#8C7D6B;
  --hairline:#D9CDB8;
  --dark:#2E2721;
  --dark-2:#241E19;
  --serif:"Noto Serif SC","Source Han Serif SC","思源宋体",serif;
  --sans:"Noto Sans SC","MiSans","PingFang SC","Microsoft YaHei UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary);color:var(--paper)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* 纸张纹理（极轻噪点） */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .38 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:var(--primary);text-transform:uppercase;font-weight:600;
}
.hairline{height:1px;background:var(--hairline);border:0}
.hairline-accent{position:relative}
.hairline-accent::after{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:var(--primary)}

/* ============ 首页 ============ */
.site-head{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:28px 48px 0;
}
.site-head .brand{font-family:var(--serif);font-weight:700;font-size:20px}
.site-head .brand small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:12px;letter-spacing:.1em}
.site-head nav a{font-size:13px;color:var(--muted);margin-left:20px}
.site-head nav a:hover{color:var(--primary);text-decoration:none}

.hero{
  position:relative;z-index:1;
  padding:72px 48px 56px;max-width:1200px;margin:0 auto;
}
.hero h1{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(44px,6.4vw,88px);line-height:1.12;letter-spacing:.01em;
  margin:18px 0 8px;
}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero .sub{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.12em}
.hero .method{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--hairline);
  font-family:var(--serif);font-size:19px;color:var(--ink-2);max-width:720px;line-height:1.8;
}
.hero .meta-row{
  margin-top:22px;display:flex;gap:28px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;
}
.hero .meta-row b{color:var(--ink);font-weight:600}

/* 本周课程卡 */
.current{
  position:relative;z-index:1;max-width:1200px;margin:8px auto 0;padding:0 48px;
}
.current-card{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  background:var(--dark);color:var(--paper);
  padding:40px 44px;border-radius:6px;
  box-shadow:0 24px 60px -28px rgba(46,39,33,.55);
}
.current-card .tag{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--dark);background:var(--ochre);padding:4px 12px;border-radius:2px;margin-bottom:16px;
}
.current-card h2{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.35;margin-bottom:10px}
.current-card p{color:#CBBFA9;font-size:14px;max-width:560px}
.current-card .enter{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--primary);color:#fff;font-size:15px;font-weight:600;
  padding:16px 34px;border-radius:4px;white-space:nowrap;transition:transform .2s,background .2s;
}
.current-card .enter:hover{background:#8F4A29;text-decoration:none;transform:translateX(4px)}

/* 16 单元地图 */
.syllabus{position:relative;z-index:1;max-width:1200px;margin:64px auto 40px;padding:0 48px}
.syllabus h3{font-family:var(--serif);font-size:24px;font-weight:700;margin-bottom:6px}
.syllabus .hint{color:var(--muted);font-size:13px;margin-bottom:28px}
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.unit{
  display:block;background:var(--paper);border:1px solid var(--hairline);border-radius:5px;
  padding:18px 20px 16px;transition:border-color .2s, transform .2s, box-shadow .2s;
  color:var(--ink);
}
.unit:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(46,39,33,.4);border-color:var(--ochre)}
.unit .no{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.15em;display:flex;justify-content:space-between}
.unit .badge{font-size:10px;letter-spacing:.08em;padding:2px 8px;border-radius:2px;font-family:var(--sans)}
.badge.live{background:var(--primary);color:#fff}
.badge.pending{background:var(--bg-soft);color:var(--ochre)}
.badge.planned{background:transparent;color:var(--muted);border:1px dashed var(--hairline)}
.unit h4{font-family:var(--serif);font-size:16px;font-weight:700;margin:10px 0 8px;line-height:1.5}
.unit p{font-size:12.5px;color:var(--muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.unit .chap{font-size:11px;color:var(--ochre);margin-top:10px;font-family:var(--mono)}
.unit.locked{opacity:.62;cursor:default}
.unit.locked:hover{transform:none;box-shadow:none;border-color:var(--hairline)}

.site-foot{
  position:relative;z-index:1;margin-top:80px;border-top:1px solid var(--hairline);
  padding:26px 48px 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.05em;
}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--primary)}

/* ============ 播放器 ============ */
.player-body{overflow:hidden;height:100vh;background:var(--dark-2)}
#stage-wrap{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
}
#stage{
  width:1280px;height:720px;position:relative;flex:none;
  background:var(--bg);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.7);
  transform-origin:center center;
}
.slide{position:absolute;inset:0;display:none;overflow:hidden;background:var(--bg)}
.slide.active{display:block}
.slide.dark{background:var(--dark);color:var(--paper)}
.slide.dark .kicker{color:var(--ochre)}
.slide.dark .s-title{color:var(--paper)}
.slide.dark .s-body{color:#D8CCB8}
.slide.dark .hairline{background:#4A3F33}

.s-pad{position:absolute;inset:0;padding:56px 64px 64px}
.s-title{font-family:var(--serif);font-weight:900;color:var(--ink);line-height:1.2}
.s-body{color:var(--ink-2)}
.s-footer{
  position:absolute;left:64px;right:64px;bottom:26px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;
}
.slide.dark .s-footer{color:#7A6C58}

/* 播放器组件 */
.frame{border:1px solid var(--hairline);background:var(--paper)}
.frame .cap{font-size:11px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--hairline);font-family:var(--mono)}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame.contain img{object-fit:contain;background:var(--paper)}

.bili-shell{
  position:relative;background:#000;border:1px solid var(--hairline);
}
.bili-shell iframe{display:block;width:100%;height:100%;border:0}
.bili-bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 12px;background:var(--paper);border:1px solid var(--hairline);border-top:0;
  font-size:12px;color:var(--muted);
}
.bili-bar .t{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bili-bar .tag{font-family:var(--mono);font-size:10px;color:var(--ochre);letter-spacing:.1em;flex:none}
.bili-bar a{flex:none;font-size:11px}

.card{
  background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:18px 20px;
}
.card h5{font-family:var(--serif);font-size:16px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.card p{font-size:13px;color:var(--ink-2);line-height:1.65}
.card .c-kick{font-family:var(--mono);font-size:10px;color:var(--ochre);letter-spacing:.15em;margin-bottom:8px}
.slide.dark .card{background:#3A3128;border-color:#4A3F33}
.slide.dark .card h5{color:var(--paper)}
.slide.dark .card p{color:#CBBFA9}

.chip{
  display:inline-block;font-size:12px;color:var(--primary);border:1px solid var(--primary);
  border-radius:999px;padding:3px 14px;margin:0 8px 8px 0;background:rgba(164,85,47,.06);
}

table.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
table.cmp th{
  font-family:var(--serif);font-size:15px;text-align:left;padding:12px 14px;
  background:var(--dark);color:var(--paper);font-weight:700;
}
table.cmp td{padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink-2);line-height:1.6}
table.cmp tr td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
table.cmp tr:nth-child(even) td{background:rgba(237,228,211,.35)}

.bigquote{font-family:var(--serif);font-weight:700;line-height:1.5}

/* 播放器导航 */
#pnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;
  display:flex;justify-content:center;padding:14px;
}
#pnav .bar{
  pointer-events:auto;display:flex;align-items:center;gap:14px;
  background:rgba(36,30,25,.92);color:#D8CCB8;border:1px solid #4A3F33;
  border-radius:999px;padding:8px 18px;font-family:var(--mono);font-size:12px;
  backdrop-filter:blur(6px);
}
#pnav button{
  background:none;border:0;color:#D8CCB8;cursor:pointer;font-size:15px;padding:2px 8px;border-radius:4px;
}
#pnav button:hover{color:#fff;background:#4A3F33}
#progress{position:fixed;top:0;left:0;height:3px;background:var(--primary);z-index:50;transition:width .35s}

/* ESC 总览 */
#overview{
  position:fixed;inset:0;z-index:60;background:rgba(36,30,25,.97);display:none;
  overflow-y:auto;padding:48px;
}
#overview.open{display:block}
#overview .ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;max-width:1400px;margin:0 auto}
#overview .ov-item{
  cursor:pointer;border:1px solid #4A3F33;border-radius:4px;overflow:hidden;background:var(--bg);
  transition:transform .15s,border-color .15s;
}
#overview .ov-item:hover{transform:scale(1.03);border-color:var(--ochre)}
#overview .ov-item.cur{outline:3px solid var(--primary)}
#overview .ov-item canvas{width:100%;display:block}
#overview .ov-cap{font-family:var(--mono);font-size:10px;color:#8C7D6B;padding:6px 8px;background:var(--dark)}
#overview h4{color:#D8CCB8;font-family:var(--mono);font-weight:400;letter-spacing:.2em;font-size:12px;margin-bottom:20px}

/* 播放器 block */
.blk-h{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);margin-top:4px}
.slide.dark .blk-h{color:var(--paper)}
.blk-p{font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.slide.dark .blk-p{color:#D8CCB8}
.blk-p strong,.blk-ul strong{color:var(--primary)}
.slide.dark .blk-p strong,.slide.dark .blk-ul strong{color:var(--ochre)}
.blk-ul{list-style:none}
.blk-ul li{font-size:14px;line-height:1.7;color:var(--ink-2);padding-left:20px;position:relative;margin-bottom:8px}
.blk-ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--ochre)}
.slide.dark .blk-ul li{color:#D8CCB8}
.blk-quote{font-size:20px;color:var(--ink);border-left:3px solid var(--primary);padding-left:20px}
.slide.dark .blk-quote{color:var(--paper);border-color:var(--ochre)}
.blk-cards{display:grid;gap:14px}
.blk-chips{margin:4px 0}

/* 讲稿抽屉 */
#note-drawer{
  position:fixed;left:50%;transform:translate(-50%,110%);bottom:0;z-index:70;
  width:min(880px,92vw);max-height:38vh;overflow-y:auto;
  background:rgba(36,30,25,.97);color:#D8CCB8;border:1px solid #4A3F33;border-bottom:0;
  border-radius:10px 10px 0 0;padding:20px 28px;transition:transform .35s;
  font-size:13.5px;line-height:1.8;
}
#note-drawer.open{transform:translate(-50%,0)}
#note-drawer .note-kick{font-family:var(--mono);font-size:10px;color:var(--ochre);letter-spacing:.2em;margin-bottom:8px}

/* toast */
#toast{
  position:fixed;top:24px;left:50%;transform:translate(-50%,-80px);z-index:80;
  background:var(--dark);color:var(--paper);padding:12px 26px;border-radius:999px;
  font-size:13px;border:1px solid var(--ochre);transition:transform .4s;pointer-events:none;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
}
#toast.show{transform:translate(-50%,0)}

/* ============ 管理后台 ============ */
.admin-wrap{max-width:980px;margin:0 auto;padding:56px 28px 80px;position:relative;z-index:1}
.admin-wrap h1{font-family:var(--serif);font-size:34px;font-weight:900;margin:14px 0 6px}
.admin-wrap .sub{color:var(--muted);font-size:13px;margin-bottom:34px}
.login-box{
  max-width:400px;margin:60px auto;background:var(--paper);border:1px solid var(--hairline);
  border-radius:6px;padding:34px 36px;
}
.login-box input, .slot input[type=text]{
  width:100%;padding:11px 14px;border:1px solid var(--hairline);border-radius:4px;
  font-size:14px;background:#fff;color:var(--ink);font-family:var(--sans);outline:none;
}
.login-box input:focus, .slot input:focus{border-color:var(--primary)}
.btn{
  display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:4px;
  padding:11px 26px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;
  font-family:var(--sans);
}
.btn:hover{background:#8F4A29}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--hairline)}
.btn.ghost:hover{color:var(--ink);border-color:var(--muted)}
.slot{
  background:var(--paper);border:1px solid var(--hairline);border-radius:5px;
  padding:20px 22px;margin-bottom:14px;
}
.slot .s-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.slot .s-label{font-family:var(--serif);font-weight:700;font-size:15px}
.slot .s-note{font-size:12px;color:var(--muted);margin:6px 0 12px}
.slot .s-row{display:grid;grid-template-columns:110px 1fr 130px 92px;gap:10px;align-items:center}
.slot .s-row label{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.slot .saved{opacity:0;color:#3E7C4F;font-size:12px;transition:opacity .3s}
.slot .saved.on{opacity:1}
.admin-msg{margin:14px 0;font-size:13px;min-height:20px}
.admin-msg.err{color:#A4342A}
.admin-msg.ok{color:#3E7C4F}

@media (max-width:860px){
  .site-head,.hero,.current,.syllabus,.site-foot{padding-left:22px;padding-right:22px}
  .current-card{grid-template-columns:1fr}
  .slot .s-row{grid-template-columns:1fr;gap:6px}
}