:root{
  --bg:#1b1b1f; --card:#242429; --text:#eee; --muted:#9a9aa2;
  --accent:#5aa9e6; --good:#3ecf8e; --bad:#e6615a; --warn:#e6b85a;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; justify-content:center; padding:40px 20px;
}
.wrap{max-width:680px; width:100%}
.card{
  background:var(--card); border-radius:16px; padding:32px;
  width:100%; box-shadow:0 10px 40px rgba(0,0,0,.3); margin-bottom:24px;
}
.page-title{font-size:1.1rem; color:var(--muted); font-weight:500; margin-top:0}
.page-title.small{font-size:1rem}

/* --- index.php book menu --- */
.book-list{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.book-item{
  display:flex; align-items:center; gap:12px;
  background:#1b1b1f; padding:16px 18px; border-radius:10px;
  color:var(--text); text-decoration:none; border:2px solid transparent;
  transition:border-color .15s;
}
.book-item:hover{border-color:var(--accent)}
.book-icon{font-size:1.3rem}
.book-name{flex:1; font-size:1.05rem}
.progress-tag{font-size:.8rem; color:var(--muted)}
.muted{color:var(--muted)}

/* --- topbar on reader.php --- */
.topbar{
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
}
.back-link{color:var(--accent); text-decoration:none; font-size:.95rem}
.back-link:hover{text-decoration:underline}
.book-title-bar{color:var(--muted); font-size:.95rem}

/* --- pronunciation card --- */
.sentence{
  font-size:1.5rem; line-height:1.5; padding:20px; border-radius:10px;
  background:#1b1b1f; margin:20px 0; border:2px solid transparent;
}
.sentence.active{border-color:var(--accent)}
.clickable-word{
  cursor:pointer; border-radius:4px; padding:0 2px; transition:background .12s, color .12s;
}
.clickable-word:hover{background:#33333d; color:var(--accent)}
button{
  background:var(--accent); color:#fff; border:none; padding:12px 20px;
  border-radius:8px; font-size:1rem; cursor:pointer; margin-right:10px; margin-bottom:8px;
}
button:disabled{opacity:.4; cursor:not-allowed}
button.secondary{background:#3a3a42}
#mic.listening{background:var(--warn); animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.transcript{
  margin-top:20px; padding:16px; border-radius:8px; background:#1b1b1f;
  min-height:24px; font-size:1.05rem;
}
.diff-word{padding:1px 3px; border-radius:3px}
.match{color:var(--good)}
.miss{color:var(--bad); text-decoration:underline wavy var(--bad)}
.score{font-size:.95rem; color:var(--muted); margin-top:10px}
.translation{
  margin-top:16px; padding:14px; border-radius:8px; background:#20303a;
  color:#bcdcff; display:none;
}
.translation.show{display:block}
.status{font-size:.9rem; color:var(--muted); min-height:20px; margin-top:6px}
.footer-note{font-size:.8rem; color:var(--muted); line-height:1.5; padding:0 4px}

/* --- full story text panel --- */
.story-text{
  font-size:1.05rem; line-height:1.9; color:#c9c9d1; max-height:520px; overflow-y:auto;
  padding-right:6px;
}
.story-text p{margin:0 0 14px}
.story-sentence{
  cursor:pointer; padding:1px 2px; border-radius:4px; transition:background .12s;
}
.story-sentence:hover{background:#33333d}
.story-sentence.current{
  background:var(--accent); color:#fff;
}
.story-sentence.done{
  color:#5f5f68;
}