:root{
  --bg0:#171310; --bg1:#0e0b09;
  --surface:#221b15; --surface2:#2b231c; --surface3:#34291f;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --text:#f3eadf; --muted:#a99b8b; --faint:#6f6357;
  --accent:#e0a85e; --accent2:#d2785a; --ok:#86b06a;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(224,168,94,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(210,120,90,.08), transparent 55%),
    linear-gradient(160deg,var(--bg0),var(--bg1));
  background-attachment:fixed; min-height:100vh;
  padding-bottom:128px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:28px 20px 8px}
.top{display:grid; grid-template-columns:360px 1fr; gap:30px; align-items:start}

/* ---------- HERO / COVER ---------- */
.hero{position:sticky; top:24px}
.cover{
  position:relative; overflow:hidden; border-radius:20px; padding:30px 26px 26px;
  background:linear-gradient(165deg,#2e2418,#1d1610 70%);
  border:1px solid var(--line2); box-shadow:var(--shadow);
}
.cover::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 200px at 110% -10%, rgba(224,168,94,.18), transparent 60%)}
.cover-emblem{color:var(--accent); opacity:.92; margin-bottom:14px}
.cover-badge{
  display:inline-block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(224,168,94,.4); border-radius:999px;
  padding:4px 11px; margin-bottom:14px;
}
.cover-title{
  font-family:var(--serif); font-weight:600; font-size:46px; line-height:1.02;
  margin:0 0 10px; letter-spacing:.01em;
  background:linear-gradient(180deg,#fff7ec,#e6c7a0); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.cover-authors{margin:0 0 16px; color:var(--muted); font-size:14px}
.cover-meta{display:flex; align-items:center; gap:8px; color:var(--faint); font-size:13px; margin-bottom:20px}
.cover-meta .dot{opacity:.6}
.cover-actions{display:flex; gap:10px; margin-bottom:20px}
.btn{
  font:inherit; font-weight:600; font-size:14px; border-radius:11px; padding:11px 16px;
  cursor:pointer; border:1px solid transparent; transition:.15s transform,.15s background,.15s border;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--accent),#cf9347); color:#221603; border-color:rgba(0,0,0,.15)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line2)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.cover-progress{display:flex; align-items:center; gap:10px}
.cover-progress-bar{flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden}
.cover-progress-bar i{display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent2),var(--accent)); border-radius:99px; transition:width .4s}
.cover-progress-label{font-size:12px; color:var(--faint); white-space:nowrap}

/* ---------- LIST ---------- */
.list-head{display:flex; align-items:baseline; justify-content:space-between; padding:6px 4px 14px}
.list-head h2{font-size:18px; margin:0; font-weight:600; letter-spacing:.01em}
.list-count{color:var(--faint); font-size:13px}
.chapters{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.chap{
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:14px;
  padding:12px 14px; border-radius:13px; cursor:pointer; border:1px solid transparent;
  transition:background .14s,border-color .14s;
}
.chap:hover{background:rgba(255,255,255,.04)}
.chap-idx{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--surface2); color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums;
  position:relative; border:1px solid var(--line);
}
.chap-title{min-width:0}
.chap-title b{display:block; font-weight:550; font-size:15px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chap-title small{color:var(--faint); font-size:12px}
.chap-dur{color:var(--faint); font-size:13px; font-variant-numeric:tabular-nums}
.chap.done .chap-idx{color:var(--ok); border-color:rgba(134,176,106,.4)}
.chap.done .chap-title b{color:var(--muted)}
.chap.active{background:linear-gradient(90deg,rgba(224,168,94,.16),rgba(224,168,94,.04));
  border-color:rgba(224,168,94,.35)}
.chap.active .chap-title b{color:#fff}
.chap.active .chap-idx{background:var(--accent); color:#231704; border-color:transparent}
/* equalizer on active+playing */
.chap.active.playing .chap-idx{font-size:0}
.eq{display:none; gap:2px; align-items:flex-end; height:14px}
.chap.active.playing .eq{display:flex}
.eq i{width:3px; background:#231704; border-radius:2px; animation:eq .9s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:-.2s} .eq i:nth-child(2){animation-delay:-.5s} .eq i:nth-child(3){animation-delay:-.1s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}

/* ---------- PLAYER BAR ---------- */
.player{position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(22,17,13,.78); backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--line2); box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.player-inner{max-width:1120px; margin:0 auto; padding:12px 20px;
  display:grid; grid-template-columns:minmax(160px,1fr) minmax(320px,2fr) minmax(120px,1fr); gap:18px; align-items:center}
.np{display:flex; align-items:center; gap:12px; min-width:0}
.np-art{width:46px; height:46px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(165deg,var(--accent),var(--accent2)); color:#231704; font-weight:700;
  font-variant-numeric:tabular-nums; box-shadow:0 6px 16px rgba(224,168,94,.25)}
.np-text{min-width:0}
.np-text strong{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.np-text small{color:var(--faint); font-size:12px}
.controls-wrap{display:flex; flex-direction:column; gap:7px}
.controls{display:flex; align-items:center; justify-content:center; gap:6px}
.ctl{position:relative; background:transparent; border:none; color:var(--text); cursor:pointer;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; transition:background .14s,transform .1s}
.ctl:hover{background:rgba(255,255,255,.08)} .ctl:active{transform:scale(.93)}
.ctl svg{width:22px; height:22px; fill:currentColor; stroke:currentColor; stroke-width:0}
.ctl b{position:absolute; font-size:8px; font-weight:700; bottom:9px; left:0; right:0; text-align:center; pointer-events:none}
.ctl[id="back15"] svg,.ctl[id="fwd15"] svg{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ctl-play{width:52px; height:52px; background:linear-gradient(180deg,var(--accent),#cf9347); color:#231603;
  box-shadow:0 8px 20px rgba(224,168,94,.3)}
.ctl-play:hover{filter:brightness(1.07); background:linear-gradient(180deg,var(--accent),#cf9347)}
.ctl-play svg{width:26px; height:26px}
.seek{display:flex; align-items:center; gap:11px}
.t{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:42px}
.t:last-child{text-align:right}
.seekbar,.volbar{-webkit-appearance:none; appearance:none; height:6px; border-radius:99px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,var(--accent) var(--pct,0%), rgba(255,255,255,.14) var(--pct,0%))}
.seekbar{flex:1}
.seekbar::-webkit-slider-thumb,.volbar::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); cursor:pointer}
.seekbar::-moz-range-thumb,.volbar::-moz-range-thumb{width:14px; height:14px; border:none; border-radius:50%; background:#fff}
.extras{display:flex; align-items:center; justify-content:flex-end; gap:14px}
.pill{font:inherit; font-weight:600; font-size:13px; color:var(--text); background:var(--surface2);
  border:1px solid var(--line2); border-radius:99px; padding:7px 13px; cursor:pointer; min-width:46px; transition:.14s}
.pill:hover{background:var(--surface3)}
.vol{display:flex; align-items:center; gap:8px}
.vol-ic{width:20px; height:20px; fill:var(--muted); flex:none}
.volbar{width:84px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .top{grid-template-columns:1fr; gap:22px}
  .hero{position:static}
  .cover-title{font-size:40px}
  .player-inner{grid-template-columns:1fr; gap:10px; padding:10px 14px}
  .np{order:1; justify-content:center}
  .controls-wrap{order:2}
  .extras{order:3; justify-content:space-between}
  .vol{display:none}
  body{padding-bottom:170px}
}
@media (max-width:520px){
  .wrap{padding:18px 14px 8px}
  .cover{padding:24px 20px}
  .ctl{width:38px;height:38px} .ctl-play{width:48px;height:48px}
}