.book-mode[hidden]{display:none}.book-mode{margin-top:22px;border:1px solid #294263;border-radius:20px;background:#0b1728;padding:20px;color:#eaf4ff}.book-mode__head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.book-mode__head h2{margin:0;font-size:1.25rem}.book-mode__head p{margin:5px 0 0;color:#91a7bf;font-size:.9rem}.book-mode__badge{white-space:nowrap;background:#122741;border:1px solid #315172;border-radius:999px;padding:7px 11px;color:#70dfed;font-size:.8rem;font-weight:700}.book-mode__options{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);gap:12px;margin:16px 0}.book-mode__options label{display:grid;gap:6px;color:#91a7bf;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.book-mode__options select,.book-mode__options textarea{width:100%;box-sizing:border-box;background:#10243b;color:#fff;border:1px solid #315172;border-radius:10px;padding:10px;font:inherit;resize:vertical}.book-mode__wide{grid-column:1/-1}.book-mode__progress{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;margin:12px 0}.book-mode__track{height:8px;border-radius:999px;background:#14273e;overflow:hidden}.book-mode__bar{height:100%;width:0;background:linear-gradient(90deg,#45d8e8,#6279ff);transition:width .2s ease}.book-mode__progress span{font-size:.8rem;color:#91a7bf;min-width:42px;text-align:right}.book-mode__status{display:flex;align-items:center;gap:9px;min-height:24px;color:#72e0ee;font-size:.88rem;margin:8px 0 14px}.book-mode__spinner{width:16px;height:16px;border:2px solid rgba(114,224,238,.25);border-top-color:#72e0ee;border-radius:50%;animation:bookSpin .8s linear infinite}.book-mode__spinner[hidden]{display:none}.book-mode__sections{max-height:300px;overflow:auto;border:1px solid #203b59;border-radius:12px;background:#081522}.book-mode__row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #17304a}.book-mode__row:last-child{border-bottom:0}.book-mode__num{color:#617d9d;font-variant-numeric:tabular-nums}.book-mode__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dcecff}.book-mode__state{font-size:.75rem;color:#8fa7c1}.book-mode__state[data-state="done"]{color:#6ce4bd}.book-mode__state[data-state="working"]{color:#72e0ee}.book-mode__state[data-state="error"]{color:#ff9aae}.book-mode__actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.book-mode__actions button{border:1px solid #365276;background:#172b46;color:#fff;border-radius:12px;padding:11px 12px;font-weight:750;cursor:pointer}.book-mode__actions button:first-child{background:linear-gradient(90deg,#45d8e8,#6279ff);color:#07111f;border:0}.book-mode__actions button:disabled{opacity:.5;cursor:wait}.book-mode__saved{display:block;margin-top:9px;color:#6ce4bd;font-size:.76rem;text-align:right}.book-mode__note{color:#748ba5;font-size:.76rem;line-height:1.45;margin:11px 0 0}@keyframes bookSpin{to{transform:rotate(360deg)}}@media(max-width:900px){.book-mode__actions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.book-mode__head{display:block}.book-mode__badge{display:inline-block;margin-top:10px}.book-mode__options,.book-mode__actions{grid-template-columns:1fr}.book-mode__wide{grid-column:auto}}
/* Saved books strip. The state label sits first and stays quiet unless a save
   has actually failed, since "Saved" after every chapter is noise. */
.book-mode__saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.book-mode__saved[hidden] { display: none; }
.book-mode__saved-state { color: var(--muted); font-size: 12px; }
.book-mode__saved-state[data-state="error"] { color: #ff9aae; }
button.book-mode__saved-item {
  border: 1px solid var(--line); border-radius: 999px; background: #0e1928;
  color: var(--ink); padding: 6px 12px; font-size: 12px; cursor: pointer; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.book-mode__saved-item:hover { border-color: #42d7e866; background: #122033; }
span.book-mode__saved-item { color: var(--muted); font-size: 12px; }
@media (max-width: 620px) { button.book-mode__saved-item { max-width: 100%; } }

/* Per-chapter playback. A book is far over the player's 30,000 character
   limit, so the chapter is the unit that can actually be listened to. */
button.book-mode__play {
  border: 1px solid #42d7e866; border-radius: 999px; background: #0e1928;
  color: var(--cyan); padding: 4px 12px; font-size: 12px; cursor: pointer; margin-left: 10px;
}
button.book-mode__play:hover { background: #122033; border-color: var(--cyan); }
@media (max-width: 620px) { button.book-mode__play { padding: 4px 10px; margin-left: 6px; } }

/* The moment a book finishes: what to do with it, in one place. */
.book-complete { position: fixed; inset: 0; z-index: 1700; display: grid; place-items: center; padding: 24px; background: #020812dc; backdrop-filter: blur(10px); }
.book-complete[hidden] { display: none; }
.book-complete__card { position: relative; width: min(560px, 100%); border: 1px solid #42d7e84d; border-radius: 24px; padding: 30px; background: linear-gradient(145deg, #132238, #091421); box-shadow: 0 40px 120px #000d; }
.book-complete__close { position: absolute; top: 14px; right: 18px; border: 0; background: transparent; color: var(--muted); font-size: 28px; cursor: pointer; line-height: 1; }
.book-complete__eyebrow { margin: 0 0 6px; color: var(--cyan); font-size: 11px; letter-spacing: .16em; }
.book-complete__card h2 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 30px); }
.book-complete__summary { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.book-complete__actions { display: grid; gap: 10px; }
.book-complete__actions button { border: 1px solid var(--line); border-radius: 14px; background: #0e1928; color: var(--ink); padding: 14px 18px; font-size: 15px; cursor: pointer; transition: .18s; }
.book-complete__actions button:hover { border-color: #42d7e866; background: #122033; }
.book-complete__actions .book-complete__primary { border: 0; background: linear-gradient(100deg, var(--cyan), var(--blue)); color: #06111d; font-weight: 850; }
/* The hover rule above is more specific than the primary rule (0,2,1 against
   0,2,0), so it was replacing the gradient with dark navy while the near-black
   primary text colour stayed — black on dark, unreadable. The primary needs its
   own hover at matching specificity. */
.book-complete__actions .book-complete__primary:hover,
.book-complete__actions .book-complete__primary:focus-visible {
  border: 0;
  background: linear-gradient(100deg, #63e4f3, #7a93ff);
  color: #06111d;
  box-shadow: 0 10px 28px #42d7e833;
}
.book-complete__actions button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.book-complete__actions button:active { transform: translateY(1px); }
.book-complete__saved { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.book-complete__saved[data-state="saved"] { color: #76e0b6; }
.book-complete__saved[data-state="error"] { color: #ff9aae; }
@media (max-width: 620px) { .book-complete__card { padding: 22px; border-radius: 18px; } }

/* The screen after a manuscript is dropped: the book is already translating,
   and this says how far along it is. Same card language as the completion
   modal it hands over to, so the run reads as one thing start to finish. */

.book-mode__stop { margin-left: auto; border: 1px solid #ff9aae55; border-radius: 12px; background: #2a1420; color: #ffb9c6; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.book-mode__stop[hidden] { display: none; }
.book-mode__stop:hover:not(:disabled) { border-color: #ff9aae; background: #3a1a29; }
.book-mode__stop:disabled { opacity: .6; cursor: default; }

/* Anything scrolled to by other modules keeps the same breathing room. */
.book-mode__options, .book-stage-card, #bookSections { scroll-margin-top: 96px; }