:root{
  --bg:#020b18;
  --bg2:#03142a;
  --panel:#031a31;
  --panel2:#071d37;
  --panel3:#051224;
  --blue:#15a7ff;
  --blue2:#2dc9ff;
  --gold:#ffc928;
  --gold2:#ffb100;
  --green:#78df16;
  --purple:#d84cff;
  --red:#e9232a;
  --cyan:#79dfff;
  --text:#eef6ff;
  --muted:#bfd8f5;
  --shadow:0 18px 42px rgba(0,0,0,.45);
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(31,157,255,.25), transparent 14%),
    radial-gradient(circle at 72% 70%, rgba(255,192,40,.15), transparent 18%),
    linear-gradient(180deg,#020b18 0%,#03142a 65%,#02070f 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}

.page-wrap{
  max-width:1540px;
  margin:0 auto;
  padding:16px;
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:20px;
}

.stage-card,
.sidebar,
.drawer-card,
.modal-card{
  background:linear-gradient(180deg, rgba(3,29,57,.95), rgba(2,13,25,.96));
  border:2px solid rgba(25,164,255,.42);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 0 1px rgba(0,0,0,.25),var(--shadow);
}

.sidebar{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:calc(100vh - 32px);
  position:sticky;
  top:16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(30,145,255,.18), transparent 22%),
    linear-gradient(180deg,rgba(0,24,48,.98),rgba(1,13,27,.98));
}

.sidebar-brand img{
  width:100%;
  max-width:260px;
  margin:0 auto;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.48));
}

.sidebar-nav{display:grid;gap:14px}

.nav-pill{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border-radius:20px;
  border:2px solid rgba(91,175,255,.36);
  background:linear-gradient(180deg,#0d5da8,#08427d);
  color:#eef8ff;
  font-size:1.02rem;
  font-weight:700;
  box-shadow:0 10px 22px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav-pill .nav-icon{font-size:1.6rem;line-height:1}
.nav-pill.is-gold{
  background:linear-gradient(180deg,#6a4100,#513000);
  border-color:rgba(255,201,40,.72);
  box-shadow:0 0 24px rgba(255,201,40,.18),inset 0 0 0 1px rgba(255,244,195,.08);
}
.nav-pill.is-green{background:linear-gradient(180deg,#0a4e1a,#083511);border-color:rgba(111,235,65,.45)}
.nav-pill.is-cyan{background:linear-gradient(180deg,#0c5590,#0a3a67);border-color:rgba(91,206,255,.42)}
.nav-pill.is-purple{background:linear-gradient(180deg,#59236a,#431851);border-color:rgba(227,122,255,.42)}
.nav-pill.is-active,.nav-pill:hover{transform:translateY(-1px)}

.sidebar-art{
  margin-top:auto;
  min-height:220px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 78%, rgba(255,195,42,.55), transparent 16%),
    linear-gradient(180deg,#08142a 0%,#101d3f 40%,#111415 100%);
  border:1px solid rgba(255,191,59,.28);
}
.sidebar-art::before{
  content:'';
  position:absolute;
  inset:auto 8% 44px 8%;
  height:74px;
  background:radial-gradient(circle at 50% 100%, rgba(255,195,42,.8), rgba(255,195,42,0) 58%);
  border-radius:50%;
}
.sidebar-art::after{
  content:'';
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  height:86px;
  background:
    linear-gradient(180deg,rgba(22,14,6,0),rgba(19,11,4,.95)),
    radial-gradient(circle at 18% 40%, rgba(111,162,70,.65), transparent 24%),
    radial-gradient(circle at 84% 50%, rgba(85,142,58,.7), transparent 28%);
}
.art-book{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:140px;
  height:96px;
  border-radius:10px 10px 16px 16px;
  background:linear-gradient(180deg,#f4e0b8,#c89845);
  box-shadow:0 10px 18px rgba(0,0,0,.38);
}
.art-book::before,.art-book::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:49%;
  background:linear-gradient(180deg,#f6e7c5,#c6974e);
}
.art-book::before{left:0;border-radius:10px 0 10px 16px;transform:skewY(6deg)}
.art-book::after{right:0;border-radius:0 10px 16px 10px;transform:skewY(-6deg)}

.main-stage{display:grid;gap:18px}

.topbar{
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(180deg, rgba(5,33,64,.95), rgba(2,18,36,.96));
}
.topbar-title{display:flex;align-items:center;gap:18px;min-width:0}
.topbar-book-icon{font-size:2.1rem}
.topbar-line{
  font-size:1.35rem;
  font-weight:700;
  display:flex;
  gap:18px;
  align-items:center;
  white-space:nowrap;
  overflow:auto;
}
.gold-text{color:var(--gold)}
.dot{opacity:.7}
.subhead{font-size:.85rem;color:var(--muted);margin-top:2px;letter-spacing:.08em;text-transform:uppercase}
.topbar-actions{display:flex;gap:12px}

.topbar-book-picker{
  border:0;
  background:linear-gradient(180deg,#0d5da8,#08427d);
  color:#eef8ff;
  font-weight:800;
  font-size:1.05rem;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid rgba(91,206,255,.35);
  box-shadow:0 8px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.06);
  cursor:pointer;
  white-space:nowrap;
}
.topbar-book-picker:hover{transform:translateY(-1px)}

.icon-btn{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:20px;
  border:2px solid rgba(100,189,255,.42);
  background:linear-gradient(180deg,#0a2c55,#081d38);
  font-size:1.6rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.content-grid{
  padding:18px;
  display:grid;
  grid-template-columns:430px minmax(0,1fr);
  gap:24px;
  align-items:stretch;
}

.portrait-card{
  overflow:hidden;
  border-radius:28px;
  border:3px solid rgba(30,196,255,.8);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,210,113,.24), transparent 22%),
    linear-gradient(180deg,#092242,#07152b);
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 22px rgba(31,196,255,.35), var(--shadow);
}
.portrait-image{width:100%;height:100%;object-fit:cover;object-position:center top;aspect-ratio:4/5}

.reader-card{
  border-radius:28px;
  padding:16px 16px 18px;
  border:2px solid rgba(70,175,255,.38);
  background:linear-gradient(180deg,#04172f,#020f20);
}

.reader-card-top{
  display:grid;
  grid-template-columns:74px 1fr 74px;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
}

.reader-book-chapter{
  display:grid;
  grid-template-columns:minmax(160px,0.9fr) minmax(220px,1.1fr);
  gap:14px;
  align-items:center;
}

.book-pill{
  height:72px;
  border-radius:999px;
  border:2px solid rgba(255,190,55,.55);
  background:linear-gradient(180deg,#6a4100,#513000);
  color:#fff1d2;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  font-weight:800;
  padding:0 22px;
  box-shadow:0 0 18px rgba(255,190,55,.16);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.book-pill:hover{transform:translateY(-1px)}

.chapter-nav{
  height:56px;
  border-radius:999px;
  border:2px solid rgba(91,206,255,.48);
  background:linear-gradient(180deg,#0d5da8,#0a3e73);
  color:#cbecff;
  font-size:2rem;
  font-weight:800;
}

.chapter-pill{
  height:72px;
  border-radius:999px;
  border:2px solid rgba(75,186,255,.55);
  background:linear-gradient(180deg,#0c63b8,#0a447d);
  display:grid;
  place-items:center;
  font-size:2rem;
  font-weight:800;
  color:#f4fbff;
  box-shadow:0 0 18px rgba(31,164,255,.22);
}

.reader-scroll{
  position:relative;
  min-height:540px;
  max-height:600px;
  overflow:auto;
  padding:22px 28px;
  border-radius:24px;
  border:2px solid rgba(255,190,55,.44);
  background:radial-gradient(circle at 50% 100%, rgba(18,89,154,.18), transparent 24%),linear-gradient(180deg,#021326,#041322 100%);
  font-size:1.18rem;
  line-height:1.72;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,184,46,.8) rgba(255,255,255,.08);
}
.reader-scroll::-webkit-scrollbar{width:10px}
.reader-scroll::-webkit-scrollbar-thumb{background:rgba(255,184,46,.8);border-radius:999px}
.reader-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.reader-scroll::before{
  content:'';
  position:absolute;
  left:18px;
  top:22px;
  bottom:22px;
  width:6px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold), rgba(255,201,40,.15));
}
.verse-line{margin:0 0 18px;padding-left:26px;font-size:1.14em}
.verse-num{color:var(--gold);font-weight:800}

.control-bar{
  padding:16px 22px;
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:18px;
  align-items:center;
}
.play-circle-wrap{display:flex;align-items:center;justify-content:center}
.play-circle{
  width:92px;
  height:92px;
  border-radius:50%;
  border:3px solid rgba(26,173,255,.75);
  background:linear-gradient(180deg,#0c5db1,#083968);
  color:white;
  font-size:2.5rem;
  box-shadow:0 0 16px rgba(26,173,255,.25);
}
.audio-core{display:grid;gap:16px}
.range-row{display:grid;grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr) 180px;gap:18px;align-items:center}
.fake-slider,.gold-slider{
  height:16px;
  border-radius:999px;
  background:rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.fake-slider span{
  position:absolute;
  left:0;top:0;bottom:0;
  width:55%;
  background:linear-gradient(90deg,#18b4ff,#f4da33);
  border-radius:inherit;
}
.gold-slider span{
  position:absolute;
  left:0;top:0;bottom:0;
  width:60%;
  background:linear-gradient(90deg,#ffd452,#f4cf2d);
}
.mini-icon{
  width:68px;
  height:56px;
  border-radius:18px;
  border:0;
  background:linear-gradient(180deg,#0d2646,#07192e);
  font-size:1.6rem;
  color:#dbf1ff;
}
.stop-btn{
  height:74px;
  border-radius:22px;
  border:3px solid rgba(255,67,67,.55);
  background:linear-gradient(180deg,#e9282f,#b5141b);
  color:white;
  font-size:1.25rem;
  font-weight:800;
  box-shadow:0 0 16px rgba(255,55,55,.22);
}

.narrator-strip{display:flex;align-items:center;gap:14px;font-size:1.05rem;color:#ffd458;padding:0 6px}
.status-dot{width:14px;height:14px;border-radius:50%;background:#69e310;box-shadow:0 0 10px rgba(105,227,16,.58)}
.sep{opacity:.8}
.bookmark-fab{
  margin-left:auto;
  width:52px;height:52px;
  border-radius:50%;
  border:0;
  background:linear-gradient(180deg,#0a2b52,#06223f);
  color:#ffd458;
  font-size:1.4rem;
}

.narrator-panel{
  padding:22px 24px;
  display:grid;
  gap:16px;
  overflow:hidden;
}
.panel-kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#ffd476;font-weight:800}
.narrator-copy h2{margin:4px 0 0;font-size:1.8rem}

.plan-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan-btn{
  padding:14px 16px;
  border-radius:18px;
  border:2px solid rgba(91,175,255,.35);
  background:linear-gradient(180deg,#0d5da8,#08427d);
  color:#eef8ff;
  font-weight:800;
}
.plan-btn.is-active{
  background:linear-gradient(180deg,#ffd252,#e8ab08);
  color:#221100;
  border-color:rgba(255,214,122,.8);
}

.voice-form-row{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(240px,.88fr);
  gap:14px;
  align-items:end;
}
.voice-form-row.form-books-row{
  grid-template-columns:minmax(0,1fr) 160px;
  gap:14px;
  align-items:end;
}
.voice-field{display:grid;gap:8px;min-width:0}
.voice-field span{font-size:.82rem;color:var(--muted);font-weight:700}
.voice-field select{
  width:100%;
  min-width:0;
  max-width:100%;
  padding:16px 18px;
  border-radius:20px;
  border:2px solid rgba(255,190,55,.28);
  background:rgba(74,31,12,.45);
  color:#fff1df;
}

.plan-copy,.usage-note{margin:0;color:#c3d2e7;line-height:1.6}
.deep-meter-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;color:#ffd458;font-weight:800}
.deep-meter{height:14px;border-radius:999px;background:rgba(0,0,0,.4);overflow:hidden}
.deep-meter span{display:block;height:100%;width:78%;background:linear-gradient(90deg,#ffd458,#18b4ff)}

.drawer-layer{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(1,7,15,.65);
  backdrop-filter:blur(6px);
  display:grid;
  place-items:center;
  padding:18px;
}
.drawer-card{
  width:min(980px,100%);
  padding:18px 20px;
  background:linear-gradient(180deg,#061c34,#041427);
}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.drawer-head h3{margin:0}
.close-drawer{
  width:48px;
  height:48px;
  border-radius:16px;
  border:0;
  background:linear-gradient(180deg,#0e3d72,#082649);
  color:#fff;
  font-size:1.2rem;
}
.drawer-content{max-height:min(70vh,720px);overflow:auto}
.book-grid,.chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.drawer-link{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(89,188,255,.25);
}
.drawer-link.is-current{background:linear-gradient(180deg,#0f5dad,#0b3a69);border-color:rgba(91,206,255,.58)}

.search-box{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px;margin-bottom:16px}
.search-box-wide{grid-template-columns:minmax(0,1fr) 140px}
.search-box input{
  padding:16px 18px;
  border-radius:16px;
  border:2px solid rgba(91,188,255,.28);
  background:rgba(255,255,255,.04);
  color:white;
}
.search-scope{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 8px;
  color:var(--muted);
  font-weight:600;
}
.search-scope input{
  width:18px;
  height:18px;
  accent-color:var(--gold);
}
.search-hint{
  margin:0 0 14px;
  color:#9fc8f0;
  font-size:.92rem;
  line-height:1.5;
}

.drawer-action-btn{
  padding:14px 18px;
  border-radius:16px;
  border:0;
  background:linear-gradient(180deg,#0d5da8,#08427d);
  color:#fff;
  font-weight:800;
}
.drawer-action-btn.secondary{
  background:linear-gradient(180deg,#3f2a11,#241204);
  border:1px solid rgba(255,190,55,.3);
  color:#ffe8b8;
}
.drawer-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.results-list,.notes-list{display:grid;gap:12px}
.result-card,.note-item{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(89,188,255,.18);
}
.result-card em{color:#ffd458;font-style:normal;font-weight:800}
.note-item blockquote{margin:8px 0;padding-left:12px;border-left:3px solid rgba(255,210,90,.4);color:#ffe6b2}
.note-meta{font-size:.82rem;color:#8bd4ff;font-weight:700;margin-bottom:6px}

.selection-toolbar{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:95;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  border-radius:18px;
  background:rgba(2,18,36,.95);
  border:1px solid rgba(91,188,255,.38);
  box-shadow:var(--shadow);
}
.selection-toolbar button{
  padding:12px 14px;
  border-radius:14px;
  border:0;
  background:linear-gradient(180deg,#0d5da8,#08427d);
  color:#fff;
  font-weight:800;
}

.modal[hidden],.drawer-layer[hidden],.selectionToolbar[hidden],.selection-toolbar[hidden]{display:none !important}
.modal{
  position:fixed;
  inset:0;
  z-index:110;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,4,10,.7);
  backdrop-filter:blur(6px);
}
.modal-card{
  width:min(680px,100%);
  padding:22px;
  background:linear-gradient(180deg,#061c34,#041427);
}
.modal-card h3{margin:0 0 14px}
.modal-body{display:grid;gap:10px}
.modal-body textarea{
  min-height:130px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(91,188,255,.22);
  background:rgba(255,255,255,.04);
  color:#fff;
}
.modal-body blockquote{
  margin:0;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
}
.modal-actions{margin-top:16px;display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

.highlight{
  background:linear-gradient(180deg,rgba(255,229,140,.95),rgba(255,198,52,.85));
  color:#15100a;
  padding:0 .14em;
  border-radius:8px;
}
.bookmarked-line{
  outline:2px solid rgba(101,227,16,.55);
  outline-offset:2px;
  border-radius:8px;
}

body.is-speaking .portrait-card{
  box-shadow:0 0 0 2px rgba(33,196,255,.58),0 0 26px rgba(255,208,85,.22),var(--shadow);
}

@media (max-width:1180px){
  .page-wrap{grid-template-columns:1fr}
  .sidebar{position:relative;min-height:auto}
  .sidebar-art{display:none}
  .content-grid{grid-template-columns:1fr 1fr}
  .portrait-card{max-width:520px}
}

@media (max-width:900px){
  .topbar{padding:14px 16px}
  .topbar-line{font-size:1.05rem}
  .content-grid{grid-template-columns:1fr;gap:18px}
  .portrait-card{max-width:100%}
  .reader-scroll{min-height:360px;max-height:none}
  .control-bar{grid-template-columns:1fr}
  .play-circle-wrap{justify-content:flex-start}
  .range-row{grid-template-columns:1fr}
  .stop-btn,.mini-icon{width:100%}
  .voice-form-row,.voice-form-row.form-books-row{grid-template-columns:1fr}
  .reader-book-chapter{grid-template-columns:1fr}
  .book-pill,.chapter-pill{width:100%}
  .search-box{grid-template-columns:1fr}
  .plan-switch{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .page-wrap{padding:10px;gap:12px}
  .sidebar{padding:12px}
  .sidebar-nav{grid-template-columns:1fr 1fr;gap:10px}
  .nav-pill{padding:14px 16px;font-size:.95rem}
  .topbar-title{gap:12px}
  .icon-btn{width:52px;height:52px;border-radius:16px;font-size:1.3rem}
  .book-pill{
    height:58px;
    font-size:1.1rem;
    padding:0 16px;
  }
  .chapter-pill{
    font-size:1.2rem;
    height:58px;
  }
  .reader-card-top{grid-template-columns:56px 1fr 56px}
  .chapter-nav{height:50px;font-size:1.5rem}
  .reader-scroll{padding:18px 18px 20px}
  .verse-line{padding-left:18px;font-size:1.03em}
  .narrator-strip{flex-wrap:wrap}
  .bookmark-fab{margin-left:0}
  .selection-toolbar{left:10px;right:10px;transform:none;justify-content:center}
  .plan-switch{grid-template-columns:1fr}
  .topbar-line{white-space:normal;overflow:visible;gap:10px;flex-wrap:wrap}
  .topbar-book-picker{
    width:100%;
    justify-content:center;
  }
  .subhead{display:none}
}