:root{
  /* Light palette inspired by churchofjesuschrist.org: white surfaces,
     deep brand navy for text and emphasis, warm Moroni gold for the
     primary action accent, muted sage for completion. */
  --bg:#ffffff;       /* pure white background */
  --panel:#fafaf7;    /* warm off-white panel surfaces */
  --panel2:#f0ede5;   /* slightly darker warm gray for interactive surfaces */
  --text:#1a2e44;     /* deep brand navy — primary text */
  --sub:#6b7280;      /* cool gray — secondary text */
  --accent:#d4a857;   /* Moroni gold — play / progress / brand accent */
  --accent2:#b48738;  /* deeper gold — gradient companion */
  --done:#5a8d6e;     /* deeper sage — completion (readable on white) */
  --line:#e5e0d8;     /* warm light border / divider */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app{display:grid;grid-template-columns:380px 1fr;height:100vh;height:100dvh}

/* sidebar */
#sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;gap:14px;padding:18px;border-bottom:1px solid var(--line)}
.cover{width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,#ede4d0,#c4b693);display:flex;align-items:center;justify-content:center;font-size:30px;flex:0 0 auto;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.brand h1{font-size:17px;margin:0 0 2px}
.sub{color:var(--sub);margin:0;font-size:12px}
.overall{margin-top:8px}
.overall .bar{height:5px;background:var(--panel2);border-radius:5px;overflow:hidden}
.overall .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.overall small{color:var(--sub);font-size:11px}
.resume{margin:12px 14px 0;padding:11px 14px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:#1a1206;font-weight:700;text-align:left}
.resume small{display:block;font-weight:500;opacity:.8;font-size:11px}
.hidden{display:none}

#toc{overflow:auto;padding:8px 6px 24px;flex:1;-webkit-overflow-scrolling:touch}
.book{margin:4px 8px}
.book>summary{list-style:none;cursor:pointer;padding:9px 10px;border-radius:8px;color:var(--text);
  font-weight:600;display:flex;justify-content:space-between;align-items:center}
.book>summary::-webkit-details-marker{display:none}
.book>summary:hover{background:var(--panel2)}
.book .bcount{color:var(--sub);font-weight:500;font-size:12px}
.chap{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 16px;margin:1px 0;border-radius:7px;cursor:pointer;color:var(--sub);min-height:44px}
.chap:hover{background:var(--panel2);color:var(--text)}
.chap.active{background:rgba(212,168,87,.16);color:var(--text)}
.chap .thumb{width:34px;height:34px;border-radius:6px;background:#e6dfd1 center/cover no-repeat;flex:0 0 auto}
.chap .dot{width:8px;height:8px;border-radius:50%;background:#c9c2b3;flex:0 0 auto}
.chap.done .dot{background:var(--done)}
.chap.partial .dot{background:var(--accent)}
.chap .nm{flex:1}
.chap .du{font-size:11px;color:var(--sub)}

/* main */
#main{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:24px 30px;text-align:center;min-width:0;overflow:hidden}
.nowart{width:140px;height:140px;border-radius:14px;background:linear-gradient(135deg,#ede4d0,#c4b693);
  background-size:cover;background-position:center;box-shadow:0 14px 40px rgba(0,0,0,.12);flex:0 0 auto}
.nowmeta{flex:0 0 auto}
.nowbook{color:var(--accent);font-weight:700;letter-spacing:.4px;text-transform:uppercase;font-size:13px}
.nowchapter{font-size:22px;font-weight:700;margin-top:2px;padding:0 12px;word-wrap:break-word}

/* ===== Karaoke transcript panel ===== */
.transcript{
  width:min(720px,95%);
  flex:1 1 auto;
  min-height:120px;
  max-height:42vh;
  overflow-y:auto;
  scroll-behavior:smooth;
  padding:20px 16px;
  background:linear-gradient(180deg,rgba(212,168,87,.05),rgba(212,168,87,.01));
  border:1px solid var(--line);
  border-radius:14px;
  text-align:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--panel2) transparent;
}
.transcript::-webkit-scrollbar{width:6px}
.transcript::-webkit-scrollbar-thumb{background:var(--panel2);border-radius:3px}
.transcript .cue{
  padding:9px 6px;
  margin:2px 0;
  font-size:15px;
  line-height:1.45;
  color:var(--sub);
  opacity:.45;
  cursor:pointer;
  transition:opacity .2s ease, color .2s ease, font-size .2s ease, font-weight .2s ease;
  border-radius:8px;
}
.transcript .cue:hover{background:rgba(0,0,0,.04);opacity:.85}
.transcript .cue.active{
  color:var(--text);
  opacity:1;
  font-weight:700;
  font-size:19px;
  line-height:1.4;
}
.transcript .cue.played{opacity:.6}
.transcript .cue.muted{
  color:var(--sub);opacity:.6;cursor:default;font-style:italic;
}
.transcript .cue.muted:hover{background:none;opacity:.6}

/* seek + controls */
.seekwrap{display:flex;align-items:center;gap:12px;width:min(720px,90%);flex:0 0 auto}
.t{color:var(--sub);font-variant-numeric:tabular-nums;font-size:13px;min-width:42px}
#seek{flex:1;-webkit-appearance:none;height:6px;border-radius:6px;background:var(--panel2);outline:none;min-width:0}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 4px rgba(212,168,87,.22)}
#seek::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.controls{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;flex:0 0 auto}
.controls button{background:var(--panel2);color:var(--text);border:0;border-radius:50%;width:50px;height:50px;font-size:18px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.controls button:hover{background:#e6dfd1}
.controls button:active{transform:scale(.94)}
.controls button small{position:absolute;bottom:7px;font-size:8px;color:var(--sub)}
.controls .play{width:68px;height:68px;font-size:26px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a1206}
.extra{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;color:var(--sub);font-size:13px;width:min(720px,95%);flex:0 0 auto}
.extra label{display:flex;gap:7px;align-items:center}
.extra select,.extra input{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:5px 8px;font:inherit}
.ghost{background:transparent;border:1px solid var(--line);color:var(--sub);border-radius:7px;padding:6px 10px;cursor:pointer;font:inherit}
.ghost:hover{color:var(--text);border-color:var(--sub)}
.hint{color:#8a8a82;font-size:12px;margin:0;padding:0 8px;flex:0 0 auto}

/* ===== Mobile drawer hamburger ===== */
.nav-toggle{
  display:none;
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  left:calc(12px + env(safe-area-inset-left));
  width:44px;height:44px;
  border:0;border-radius:10px;
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;z-index:30;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;margin:4px auto;transition:transform .22s ease,opacity .22s ease}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;animation:bdfade .22s ease}
@keyframes bdfade{from{opacity:0}to{opacity:1}}

/* ===== Mobile (≤780px) ===== */
@media(max-width:780px){
  .nav-toggle{display:block}
  body.nav-open .nav-backdrop{display:block}
  #app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
  #main{flex:1 1 auto;padding:60px 14px 18px;gap:12px;overflow:hidden;justify-content:flex-start}

  #sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(88vw,340px);max-width:340px;
    z-index:25;transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.7,.25,1);
    border-right:1px solid var(--line);box-shadow:6px 0 24px rgba(0,0,0,.12);
    padding-top:calc(env(safe-area-inset-top));
  }
  body.nav-open #sidebar{transform:translateX(0)}
  .brand{padding:14px 14px 12px;gap:11px;padding-left:64px}
  .cover{width:48px;height:48px;font-size:22px}
  .brand h1{font-size:15px;line-height:1.2}
  .chap{padding:10px 10px 10px 14px;min-height:48px}

  .nowart{width:88px;height:88px;border-radius:12px}
  .nowchapter{font-size:18px;line-height:1.25}
  .nowbook{font-size:11px}
  .transcript{
    width:100%;
    max-height:none;
    flex:1 1 auto;
    padding:14px 12px;
    font-size:14px;
  }
  .transcript .cue{font-size:14px;padding:7px 4px}
  .transcript .cue.active{font-size:17px;line-height:1.35}

  .seekwrap{width:100%;gap:8px}
  .t{font-size:12px;min-width:36px}
  .controls{gap:8px}
  .controls button{width:44px;height:44px;font-size:16px}
  .controls .play{width:60px;height:60px;font-size:23px}
  .controls button small{font-size:7px;bottom:5px}
  .extra{gap:10px 14px;font-size:12px;width:100%}
  .extra label{flex:1 1 calc(50% - 14px);justify-content:space-between}
  .extra label:last-of-type{flex:1 1 100%}
  .ghost{flex:1 1 100%}
  .hint{font-size:11px}
}

/* ===== Very narrow (≤360px) ===== */
@media(max-width:360px){
  .nowart{width:72px;height:72px}
  .transcript .cue.active{font-size:16px}
  .controls{gap:7px}
  .controls button{width:40px;height:40px;font-size:15px}
  .controls .play{width:54px;height:54px;font-size:20px}
}

/* ===== Landscape phone ===== */
@media(max-height:520px) and (orientation:landscape){
  #main{padding-top:14px;justify-content:center;gap:8px}
  .nav-toggle{top:10px;left:10px;width:40px;height:40px}
  .nowart{display:none}
  .nowchapter{font-size:16px;margin-top:0}
  .transcript{max-height:none;flex:1 1 auto}
  .transcript .cue.active{font-size:16px}
  .controls button{width:42px;height:42px;font-size:15px}
  .controls .play{width:54px;height:54px;font-size:20px}
  .hint{display:none}
}