/* ══════════════════════════════════════════════════════════
   秋安居课程 · 影音库
   设计基调：宣纸暖白 / 墨色文字 / 朱檀点缀 / 克制留白
   ══════════════════════════════════════════════════════════ */

:root{
  --paper:      #F7F4EE;
  --surface:    #FFFFFF;
  --surface-2:  #FBF9F5;
  --surface-3:  #F2EDE4;
  --line:       #E7E0D4;
  --line-2:     #D8CFC0;

  --ink:        #26231F;
  --ink-2:      #6B645A;
  --ink-3:      #9C9385;

  --accent:     #8A4B32;
  --accent-2:   #A96345;
  --accent-sf:  #F6EDE8;

  --ok:         #4E7C59;
  --ok-sf:      #EDF4EE;
  --warn:       #B0813A;
  --warn-sf:    #FAF2E4;
  --bad:        #B4544A;
  --bad-sf:     #FBEDEB;

  --serif: "Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",Georgia,serif;
  --sans: system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  --r:   12px;
  --r-s: 8px;
  --sh: 0 1px 2px rgba(38,35,31,.05), 0 4px 16px rgba(38,35,31,.04);
  --sh-h:0 2px 6px rgba(38,35,31,.07), 0 10px 30px rgba(38,35,31,.07);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0; letter-spacing:.02em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--ink-2)}
.small{font-size:12.5px}

/* ── 顶栏 ─────────────────────────────────── */
.topbar{
  height:64px; display:flex; align-items:center; gap:24px;
  padding:0 22px; background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  color:#fff; display:grid; place-items:center;
  font-family:var(--serif); font-size:20px;
  box-shadow:0 2px 8px rgba(138,75,50,.25);
}
.brand-text h1{font-size:16.5px; line-height:1.3}
.brand-text p{margin:0; font-size:11.5px; color:var(--ink-3)}

.topbar-stats{display:flex; gap:8px; flex:1; flex-wrap:wrap; overflow:hidden}
.stat{
  display:flex; align-items:baseline; gap:6px;
  padding:5px 12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; white-space:nowrap;
}
.stat b{font-size:15px; font-family:var(--serif); font-weight:600}
.stat span{font-size:11.5px; color:var(--ink-2)}

.topbar-actions{display:flex; align-items:center; gap:10px; flex-shrink:0}
.search{position:relative}
.search .ico{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:15px;height:15px; fill:none; stroke:var(--ink-3); stroke-width:2;
}
.search input{
  width:190px; padding:7px 10px 7px 30px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--surface-2); font-size:13px; color:var(--ink); outline:none;
  font-family:var(--sans); transition:border-color .15s, background .15s;
}
.search input:focus{border-color:var(--accent-2); background:var(--surface)}

/* ── 布局 ─────────────────────────────────── */
.layout{
  display:grid; grid-template-columns:322px 1fr;
  gap:0; height:calc(100vh - 64px);
}

/* ── 侧栏：时间轴 ─────────────────────────── */
.sidebar{
  border-right:1px solid var(--line);
  background:var(--surface-2);
  display:flex; flex-direction:column; min-height:0;
}
.side-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; border-bottom:1px solid var(--line);
}
.side-title{font-family:var(--serif); font-size:13.5px; font-weight:600; letter-spacing:.06em}
.chk{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2); cursor:pointer; user-select:none}
.chk input{accent-color:var(--accent); width:13px; height:13px}

.timeline{overflow-y:auto; padding:8px 10px 40px; flex:1}
.timeline::-webkit-scrollbar{width:8px}
.timeline::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:4px; border:2px solid var(--surface-2)}

.daygroup{margin-bottom:4px}
.dayhead{
  display:flex; align-items:baseline; gap:8px;
  padding:12px 8px 6px; position:sticky; top:0;
  background:linear-gradient(var(--surface-2) 78%, transparent);
  z-index:2;
}
.dayhead .d-date{font-family:var(--serif); font-size:14px; font-weight:600}
.dayhead .d-week{font-size:11.5px; color:var(--ink-3)}
.dayhead .d-count{margin-left:auto; font-size:11px; color:var(--ink-3)}

.entry{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-s);
  cursor:pointer; border:1px solid transparent;
  transition:background .14s, border-color .14s;
}
.entry:hover{background:var(--surface); border-color:var(--line)}
.entry.active{
  background:var(--accent-sf); border-color:#E4CFC4;
  box-shadow:0 1px 3px rgba(138,75,50,.08);
}
.entry .dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--ink-3);
}
.entry .dot.ok{background:var(--ok)}
.entry .dot.warn{background:var(--warn)}
.entry .dot.bad{background:var(--bad)}
.entry .e-main{flex:1; min-width:0}
.entry .e-slot{font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:6px}
.entry .e-sub{font-size:11px; color:var(--ink-3); margin-top:1px}
.entry.active .e-slot{color:var(--accent)}
.entry.off{opacity:.42}
.entry.off:hover{opacity:.7}
.entry .e-dur{font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex-shrink:0}

/* ── 主区 ─────────────────────────────────── */
.main{overflow-y:auto; padding:22px 26px 60px; min-width:0}
.main::-webkit-scrollbar{width:10px}
.main::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:5px; border:3px solid var(--paper)}

.player-shell{
  background:#12100E; border-radius:var(--r);
  box-shadow:0 12px 40px rgba(38,35,31,.16);
  overflow:hidden; margin-bottom:18px;
}
.player-wrap{position:relative; aspect-ratio:16/9; background:#0B0A09}
.player-wrap video{width:100%; height:100%; display:block; background:#0B0A09}
.player-idle{
  position:absolute; inset:0; display:grid; place-content:center;
  justify-items:center; gap:14px; color:#8C8278; pointer-events:none;
}
.player-idle.hide{display:none}
.idle-mark{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(145deg,#3A322C,#221D19);
  display:grid; place-items:center; font-family:var(--serif);
  font-size:30px; color:#7A6E62;
}
.player-idle p{margin:0; font-size:13px; letter-spacing:.04em}

/* ── 正在播放信息 ─────────────────────────── */
.nowplaying{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px; margin-bottom:22px;
  box-shadow:var(--sh); display:none;
}
.nowplaying.show{display:block}
.np-head{display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap}
.np-head h2{font-size:19px}
.badge{
  font-size:11.5px; padding:2px 10px; border-radius:99px;
  background:var(--ok-sf); color:var(--ok); border:1px solid #D7E5DA;
  white-space:nowrap;
}
.badge.warn{background:var(--warn-sf); color:var(--warn); border-color:#EDDFC2}
.badge.bad{background:var(--bad-sf); color:var(--bad); border-color:#EFD5D2}
.np-meta{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-bottom:12px}
.np-meta span{display:flex; align-items:center; gap:5px}
.np-meta b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.np-links{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-s); font-size:12.5px;
  border:1px solid var(--line-2); background:var(--surface-2);
  color:var(--ink); cursor:pointer; transition:all .14s; font-family:var(--sans);
}
.btn:hover{border-color:var(--accent-2); background:var(--accent-sf); color:var(--accent)}
.btn .ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ── 全库网格 ─────────────────────────────── */
.gallery-title{
  font-family:var(--serif); font-size:14px; font-weight:600;
  letter-spacing:.06em; margin:0 0 12px; padding-left:2px;
  display:flex; align-items:center; gap:10px;
}
.gallery-title::after{content:""; flex:1; height:1px; background:var(--line)}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:12px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; cursor:pointer; transition:all .16s; box-shadow:var(--sh);
}
.card:hover{border-color:#DCC9BE; box-shadow:var(--sh-h); transform:translateY(-1px)}
.card.active{border-color:var(--accent-2); background:var(--accent-sf)}
.card.off{opacity:.42}
.card.off:hover{opacity:.7}
.card .c-date{font-size:11px; color:var(--ink-3); letter-spacing:.04em}
.card .c-slot{font-family:var(--serif); font-size:16px; font-weight:600; margin:3px 0 8px}
.card .c-foot{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--ink-2)}
.card .c-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px}
.card .c-dot.ok{background:var(--ok)}
.card .c-dot.warn{background:var(--warn)}
.card .c-dot.bad{background:var(--bad)}

/* ── toast ────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--ink); color:#F7F4EE; font-size:12.5px;
  padding:9px 18px; border-radius:99px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:99;
}
.toast.show{opacity:.94; transform:translate(-50%,0)}

/* ── 空态 ─────────────────────────────────── */
.empty{padding:40px 10px; text-align:center; color:var(--ink-3); font-size:13px}

/* ── 响应式 ───────────────────────────────── */
@media (max-width:900px){
  .layout{grid-template-columns:1fr; height:auto}
  .sidebar{border-right:none; border-bottom:1px solid var(--line); max-height:42vh}
  .main{padding:16px 14px 60px}
  .topbar{gap:12px; padding:0 14px}
  .brand-text p{display:none}
  .search input{width:130px}
  .topbar-stats{display:none}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}