@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ink: #15182a; --muted: #55596b; --muted-strong: #3f4354; --paper: #f7f5f0; --surface: #fff;
  --navy: #101426; --navy-2: #1d2342; --coral: #c84838; --coral-dark: #a6382c;
  --coral-soft: #fff0ed; --coral-on-dark: #ff9987; --on-dark-muted: #d8dbea;
  --gold: #d99a2d; --mint: #29776c; --line: rgba(21,24,42,.16);
  --shadow: 0 20px 60px rgba(23,25,42,.12); --shadow-soft: 0 10px 30px rgba(23,25,42,.09);
  --radius: 22px; --player-h: 92px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.5 "DM Sans", system-ui, sans-serif; padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom)); -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
h1,h2,h3,.brand { font-family: "Manrope", sans-serif; letter-spacing: -.035em; }
h1,h2,h3,p { margin-top: 0; }
.muted { color: var(--muted); }.small { font-size: .86rem; }.center { text-align: center; }
.eyebrow { margin: 0 0 8px; color: var(--coral-dark); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; left:18px; top:12px; z-index:200; padding:10px 14px; border-radius:10px; background:white; color:var(--ink); font-weight:800; transform:translateY(-160%); box-shadow:var(--shadow); }
.skip-link:focus { transform:translateY(0); }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline:3px solid #1769d2; outline-offset:3px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { display:block; width:36px; height:36px; border-radius:11px; object-fit:cover; box-shadow:0 8px 20px rgba(16,20,38,.24); }

/* Welcome and account */
.auth-view { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(380px,.85fr); padding: 0; background: var(--navy); color: white; }
.auth-story { position: relative; display:flex; flex-direction:column; min-height: 100svh; overflow: hidden; padding: 36px clamp(28px,6vw,88px); background: radial-gradient(circle at 75% 25%, rgba(200,72,56,.3), transparent 25%), radial-gradient(circle at 30% 80%, rgba(141,212,200,.16), transparent 28%), linear-gradient(145deg,#101426,#1c2344); }
.auth-story::after { content:""; position:absolute; right:-9vw; bottom:-14vw; width:44vw; aspect-ratio:1; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow: 0 0 0 7vw rgba(255,255,255,.025),0 0 0 14vw rgba(255,255,255,.018); }
.auth-copy { position: relative; z-index: 1; max-width: 720px; margin-top:auto; margin-bottom:clamp(26px,7vh,68px); }
.auth-copy h1 { max-width: 700px; margin-bottom: 22px; font-size: clamp(2.7rem,5vw,5.4rem); line-height: .99; }
.auth-copy>p:not(.eyebrow) { max-width: 580px; color: var(--on-dark-muted); font-size: 1.1rem; }
.auth-story .eyebrow,.continue-card .eyebrow { color:var(--coral-on-dark); }
.auth-story :focus-visible,.player :focus-visible { outline-color:#fff; }
.feature-row { display: flex; gap: 12px; margin-top: 46px; }
.feature-row>div { min-width: 150px; padding: 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.feature-icon { display: grid; width: 33px; height: 33px; margin-bottom: 18px; place-items: center; border-radius: 10px; background: var(--coral); font-size: .8rem; }
.feature-row strong,.feature-row small { display:block; }.feature-row small { color:var(--on-dark-muted); font-size:.78rem; }
.auth-panel { display: grid; place-items: center; padding: 40px; background: #f4f1ea; color: var(--ink); }
.auth-card { width:min(100%,430px); padding:36px; border:1px solid var(--line); border-radius:28px; background:white; box-shadow:var(--shadow); }
.auth-card h2 { margin-bottom:6px; font-size:2rem; }.auth-card label { display:block; margin:18px 0 7px; font-size:.82rem; font-weight:700; }
input,textarea,select { width:100%; min-height:48px; padding:11px 13px; border:1px solid rgba(21,24,42,.24); border-radius:13px; background:#fffdfa; color:var(--ink); }
input::placeholder,textarea::placeholder { color:#777a88; opacity:1; }
input:focus,textarea:focus,select:focus { border-color:var(--coral-dark); box-shadow:0 0 0 3px rgba(200,72,56,.16); }
.primary { min-height:49px; margin-top:22px; border:0; border-radius:14px; background:var(--coral); color:#fff; font-weight:800; box-shadow:0 10px 25px rgba(200,72,56,.24); }
.primary:hover { background:var(--coral-dark); }.primary:not(.inline) { width:100%; }.primary.inline { width:auto; padding:0 22px; }
.error { color:#b72f26; font-size:.9rem; }.advanced { margin-top:22px; border-top:1px solid var(--line); padding-top:15px; color:var(--muted); font-size:.85rem; }.advanced summary { cursor:pointer; }.advanced small { display:block; margin-top:7px; }

/* App frame */
.site-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; height:76px; padding:0 max(28px,calc((100vw - 1220px)/2)); border-bottom:1px solid var(--line); background:rgba(247,245,240,.88); backdrop-filter:blur(18px); }
.desktop-nav { display:flex; gap:6px; margin:auto; }.nav-link { min-height:42px; padding:0 18px; border:0; border-radius:12px; background:transparent; font-weight:700; color:var(--muted); }.nav-link.active { background:white; color:var(--ink); box-shadow:0 5px 18px rgba(23,25,42,.07); }
.avatar { display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; }
#app { width:min(1220px,calc(100% - 48px)); margin:0 auto; }.main-view,.detail-view { padding:54px 0 72px; }
.page-title { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; }.page-title h1 { margin:0; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; }.page-title.compact { margin-bottom:24px; }
.secondary-cta,.back-button { min-height:44px; padding:0 17px; border:1px solid var(--line); border-radius:13px; background:white; font-weight:700; }
.content-section { margin-top:50px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:17px; }.section-heading h2 { margin:0; font-size:1.55rem; }

/* Home */
.continue-card { display:grid; grid-template-columns:160px 1fr auto; gap:30px; align-items:center; min-height:240px; padding:30px; overflow:hidden; border-radius:30px; background:linear-gradient(120deg,var(--navy),#29315b); color:white; box-shadow:var(--shadow); }
.continue-card::after { content:""; position:absolute; }.continue-card .cover-feature { width:160px; aspect-ratio:2/3; border-radius:14px; object-fit:cover; box-shadow:0 18px 35px rgba(0,0,0,.3); background:var(--navy-2); }
.continue-copy h2 { margin:5px 0 6px; font-size:clamp(1.6rem,3vw,2.6rem); }.continue-copy p { color:rgba(255,255,255,.65); }.continue-progress { height:5px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.16); }.continue-progress i { display:block; height:100%; background:var(--coral); }
.round-play { display:grid; width:68px; height:68px; place-items:center; border:0; border-radius:50%; background:var(--coral); color:#fff; font-size:1.2rem; box-shadow:0 12px 30px rgba(255,115,92,.3); }
.cover-shelf { display:grid; grid-auto-flow:column; grid-auto-columns:170px; gap:20px; overflow-x:auto; padding:2px 2px 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.shelf-book { padding:0; border:0; background:transparent; text-align:left; scroll-snap-align:start; }.shelf-book img,.cover-placeholder { display:block; width:100%; aspect-ratio:2/3; margin-bottom:12px; border-radius:16px; object-fit:cover; background:linear-gradient(145deg,#292f52,#12162a); box-shadow:0 12px 25px rgba(23,25,42,.15); }.cover-placeholder { display:grid; place-items:center; color:rgba(255,255,255,.75); font:800 2rem "Manrope"; }
.shelf-book strong,.shelf-book small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.shelf-book small { color:var(--muted); }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.status-card { display:flex; gap:14px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:18px; background:white; }.status-dot { width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px rgba(245,189,94,.15); }.status-dot.ready { background:var(--mint); box-shadow:0 0 0 6px rgba(141,212,200,.16); }.status-card strong,.status-card small { display:block; }.status-card small { color:var(--muted); }

/* Library */
.library-tools { margin-bottom:25px; }.search-box { display:flex; align-items:center; gap:8px; max-width:580px; padding:0 14px; border:1px solid var(--line); border-radius:15px; background:white; }.search-box input { border:0; background:transparent; box-shadow:none; }
.filter-row { display:flex; gap:8px; margin-top:14px; overflow:auto; }.filter { min-height:40px; padding:0 16px; white-space:nowrap; border:1px solid var(--line); border-radius:999px; background:transparent; font-size:.86rem; font-weight:700; }.filter.active { border-color:var(--navy); background:var(--navy); color:white; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:30px 22px; }.library-book { padding:0; border:0; background:transparent; text-align:left; }.library-book .cover-wrap { position:relative; }.library-book img,.library-book .cover-placeholder { width:100%; }.library-book h3 { margin:12px 0 3px; overflow:hidden; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }.library-book p { margin:0; color:var(--muted); font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.progress-line { position:absolute; left:9px; right:9px; bottom:9px; height:5px; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.45); backdrop-filter:blur(4px); }.progress-line i { display:block; height:100%; background:var(--coral); }
.status-chip { position:absolute; top:10px; right:10px; padding:5px 9px; border-radius:999px; background:rgba(16,20,38,.8); color:white; font-size:.66rem; font-weight:800; text-transform:uppercase; backdrop-filter:blur(8px); }
.empty-state { padding:70px 20px; border:1px dashed var(--line); border-radius:24px; text-align:center; color:var(--muted); }.empty-state span { font-size:2rem; }.empty-state h3 { margin:8px 0 2px; color:var(--ink); }

/* Detail, notes, reader */
.detail-view { max-width:920px; margin:auto; }.book-hero { display:grid; grid-template-columns:230px 1fr; gap:42px; align-items:center; margin:34px 0 42px; }.cover-xl { width:230px; aspect-ratio:2/3; object-fit:cover; border-radius:22px; background:var(--navy); box-shadow:0 24px 50px rgba(23,25,42,.2); }.book-hero h1 { margin:10px 0 7px; font-size:clamp(2.1rem,5vw,4rem); line-height:1.02; }.book-hero .author { font-size:1.1rem; }.book-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.book-actions .danger-button { margin-top:22px; }.status-pill { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(141,212,200,.23); color:#27776b; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.tabs { display:flex; gap:25px; border-bottom:1px solid var(--line); }.tab { min-height:50px; padding:0 3px; border:0; border-bottom:3px solid transparent; background:transparent; font-weight:800; color:var(--muted); }.tab.active { border-color:var(--coral); color:var(--ink); }
.chapter-list { list-style:none; margin:18px 0 0; padding:0; }.chapter-row { display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; width:100%; padding:15px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; }.chapter-row:hover { background:rgba(255,255,255,.55); }.chapter-row .num,.chapter-row .dur { color:var(--muted); font-size:.85rem; }.chapter-row.current { color:var(--coral-dark); }
.notes-list { display:grid; gap:12px; margin-top:18px; }.note-card { padding:18px; border:1px solid var(--line); border-radius:18px; background:white; }.note-card .meta { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.78rem; text-transform:capitalize; }.note-card .jump { margin-left:auto; border:0; background:transparent; color:var(--coral-dark); font-weight:800; }.note-card blockquote { margin:12px 0 8px; padding-left:13px; border-left:3px solid var(--coral); color:#545667; font-style:italic; }
.reader-view { max-width:780px; margin:auto; padding:25px 0 80px; }.reader-header { display:flex; align-items:center; gap:20px; position:sticky; top:76px; z-index:5; padding:10px 0; background:rgba(247,245,240,.94); backdrop-filter:blur(12px); }.reader { padding-top:30px; font-family:Georgia,serif; font-size:1.2rem; line-height:1.85; }.reader p { margin:0 0 1.15em; }
::highlight(sentence) { background:rgba(245,189,94,.3); } ::highlight(word) { color:var(--coral-dark); font-weight:700; }
.settings-card { display:flex; gap:16px; align-items:center; max-width:650px; padding:22px; margin-bottom:15px; border:1px solid var(--line); border-radius:20px; background:white; }.settings-card.block { display:block; }.settings-card h2,.settings-card h3,.settings-card p { margin:0; }.settings-avatar { display:grid; width:58px; height:58px; place-items:center; border-radius:50%; background:var(--navy); color:#fff; font-size:1.3rem; font-weight:800; }.danger-button { min-height:47px; padding:0 18px; border:1px solid #e8b5b0; border-radius:13px; background:white; color:#a92d23; font-weight:800; }

/* Persistent player */
.player { position:fixed; left:50%; bottom:18px; z-index:50; display:grid; grid-template-columns:minmax(200px,1fr) 48px 56px 48px 48px 48px; gap:8px; align-items:center; width:min(900px,calc(100% - 36px)); min-height:76px; padding:9px 14px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(16,20,38,.96); color:white; box-shadow:0 20px 55px rgba(16,20,38,.35); backdrop-filter:blur(18px); }
.player-main { display:flex; align-items:center; min-width:0; padding:0; border:0; background:transparent; color:white; text-align:left; }.cover-sm { width:52px; height:52px; margin-right:11px; border-radius:11px; object-fit:cover; background:var(--navy-2); }.player-titles { min-width:0; }.player-titles strong,.player-titles small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-titles small { color:rgba(255,255,255,.55); }
.player-icon,.play { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:white; }.player-icon small { font-size:.58rem; }.play { width:52px; height:52px; background:var(--coral); font-size:1.05rem; }
#seek { position:absolute; left:19px; right:19px; bottom:2px; width:calc(100% - 38px); min-height:0; padding:0; accent-color:var(--coral); }.player-extras { position:absolute; left:0; right:0; bottom:calc(100% + 8px); display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:15px; border-radius:18px; background:var(--navy); box-shadow:var(--shadow); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s; }.player.controls-open .player-extras { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }.player #player-more[aria-expanded="true"] { background:rgba(255,255,255,.13); }.player-extras button { min-width:38px; min-height:38px; border:0; border-radius:10px; background:rgba(255,255,255,.08); color:white; }.player-extras label { display:flex; align-items:center; gap:5px; }.player-extras select { width:auto; min-height:38px; padding:5px; }.player-extras #time-left { margin-right:auto; }.player-extras span { font-size:.75rem; color:rgba(255,255,255,.6); }
#record.recording { background:#cb3d33; }.toast { position:fixed; left:50%; bottom:112px; z-index:90; transform:translateX(-50%); padding:10px 17px; border-radius:999px; background:var(--navy); color:white; box-shadow:var(--shadow); }
dialog { width:min(92vw,500px); padding:25px; border:0; border-radius:22px; color:var(--ink); box-shadow:var(--shadow); } dialog::backdrop { background:rgba(16,20,38,.6); backdrop-filter:blur(4px); } dialog menu { display:flex; justify-content:flex-end; gap:10px; margin:15px 0 0; padding:0; } dialog menu button { min-height:44px; padding:0 16px; border:0; border-radius:12px; }
.mobile-nav { display:none; }

/* Visual QA: stronger hierarchy, accessible states, and stable interaction targets */
.site-header { box-shadow:0 1px 0 rgba(255,255,255,.7); }
.nav-link,.secondary-cta,.back-button,.avatar,.filter,.tab,.danger-button,
.player-icon,.play,.player-extras button,.shelf-book,.library-book,.round-play {
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,
             transform .16s ease,box-shadow .16s ease;
}
.nav-link:hover,.secondary-cta:hover,.back-button:hover { background:#fff; color:var(--ink); box-shadow:var(--shadow-soft); }
.nav-link.active { color:var(--ink); }
.avatar:hover { background:var(--navy-2); transform:translateY(-1px); }
.continue-card { position:relative; isolation:isolate; }
.continue-card::before { content:""; position:absolute; z-index:-1; right:-120px; bottom:-180px; width:390px; aspect-ratio:1; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 64px rgba(255,255,255,.025),0 0 0 128px rgba(255,255,255,.018); }
.continue-copy { padding:0; border:0; border-radius:12px; background:transparent; color:white; text-align:left; }
.continue-copy h2 { margin:5px 0 6px; }
.continue-copy p { color:var(--on-dark-muted); }
.continue-progress { height:6px; background:rgba(255,255,255,.25); }
.continue-progress i { background:var(--coral-on-dark); }
.round-play { box-shadow:0 12px 30px rgba(200,72,56,.3); }
.round-play:hover,.play:hover { background:var(--coral-dark); transform:scale(1.04); }
.shelf-book { border-radius:16px; }
.shelf-book:hover,.library-book:hover { transform:translateY(-4px); }
.shelf-book:hover img,.shelf-book:focus-visible img,
.library-book:hover img,.library-book:focus-visible img { box-shadow:0 18px 34px rgba(23,25,42,.22); }
.status-card { min-height:76px; box-shadow:0 4px 16px rgba(23,25,42,.04); }
.status-dot { flex:0 0 auto; box-shadow:0 0 0 6px rgba(217,154,45,.17); }
.status-dot.ready { box-shadow:0 0 0 6px rgba(41,119,108,.13); }
.search-box { box-shadow:0 4px 16px rgba(23,25,42,.04); }
.search-box:focus-within { border-color:var(--coral-dark); box-shadow:0 0 0 3px rgba(200,72,56,.16); }
.search-box input { outline:0; }
.filter-row { padding:3px; }
.filter { min-height:44px; background:rgba(255,255,255,.5); }
.filter:hover { border-color:rgba(21,24,42,.35); background:white; }
.filter.active { background:var(--navy); color:white; }
.library-book { padding-bottom:10px; border-radius:18px; }
.library-book .cover-wrap { display:block; }
.progress-line { height:6px; background:rgba(255,255,255,.72); }
.status-chip { border:1px solid rgba(255,255,255,.25); background:rgba(16,20,38,.94); font-size:.68rem; }
.empty-state { background:rgba(255,255,255,.46); }
.book-hero .author { color:var(--muted-strong); }
.status-pill { background:#e6f3f0; color:#1f665d; }
.tab:hover { color:var(--ink); }
.chapter-row { min-height:56px; border-radius:10px; }
.chapter-row:hover { background:rgba(255,255,255,.82); }
.chapter-row.current { background:var(--coral-soft); color:var(--coral-dark); font-weight:700; }
.note-card { box-shadow:0 4px 16px rgba(23,25,42,.04); }
.note-card blockquote { color:var(--muted-strong); }
.danger-button:hover { border-color:#c84838; background:#fff3f1; color:#8f281f; }
.player { border-color:rgba(255,255,255,.2); }
.player-main { min-height:52px; border-radius:11px; }
.player-titles small { color:var(--on-dark-muted); }
.player-icon:hover,.player-extras button:hover { background:rgba(255,255,255,.16); }
.player-extras { border:1px solid rgba(255,255,255,.16); }
.player-extras button { min-width:44px; min-height:44px; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:rgba(255,255,255,.1); }
.player-extras label { color:var(--on-dark-muted); font-size:.78rem; }
.player-extras select { min-height:44px; padding:5px 9px; border-color:rgba(255,255,255,.35); background:#fff; color:var(--ink); }
.player-extras span { color:var(--on-dark-muted); font-size:.78rem; }
.toast { border:1px solid rgba(255,255,255,.2); font-weight:700; }
dialog { background:#fff; }
dialog h3 { margin-bottom:8px; font-size:1.45rem; }
dialog p { color:var(--muted-strong); }
dialog textarea { resize:vertical; }
dialog menu button:not(.primary):not(.danger-button) { border:1px solid var(--line); background:#f7f5f0; color:var(--ink); font-weight:700; }

@media (max-width:760px) {
  :root { --player-h:148px; }
  .auth-view { display:block; background:#f4f1ea; }.auth-story { display:block; min-height:430px; padding:24px; }.auth-copy { margin-top:70px; margin-bottom:0; }.auth-copy h1 { font-size:2.65rem; }.feature-row { display:none; }.auth-panel { padding:0 18px 45px; }.auth-card { margin-top:-34px; padding:25px; position:relative; z-index:2; }
  .site-header { height:62px; padding:0 18px; }.desktop-nav { display:none; }.site-header .avatar { margin-left:auto; }
  #app { width:calc(100% - 32px); }.main-view,.detail-view { padding:34px 0 100px; }.page-title { align-items:start; }.page-title .secondary-cta { display:none; }
  .continue-card { grid-template-columns:100px 1fr; gap:18px; min-height:190px; padding:20px; }.continue-card .cover-feature { width:100px; }.continue-copy { padding-right:54px; }.continue-copy h2 { font-size:1.35rem; }.continue-card .round-play { position:absolute; right:20px; top:50%; display:grid; width:50px; height:50px; transform:translateY(-50%); }.continue-card .round-play:hover { transform:translateY(-50%) scale(1.04); }
  .status-grid { grid-template-columns:1fr; }.cover-shelf { grid-auto-columns:142px; }.library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 15px; }
  .book-hero { grid-template-columns:110px 1fr; gap:18px; align-items:start; margin:25px 0 30px; }.cover-xl { width:110px; border-radius:14px; }.book-hero h1 { font-size:1.55rem; }.book-actions { align-items:stretch; flex-direction:column; gap:0; }.book-actions .primary,.book-actions .danger-button { width:100%; min-height:46px; margin-top:8px; padding:0 10px; font-size:.88rem; }.book-hero .muted { font-size:.84rem; }
  .reader-header { top:62px; }.reader { font-size:1.08rem; }
  .mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around; padding:7px 15px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(247,245,240,.96); backdrop-filter:blur(16px); }.mobile-nav button { display:grid; gap:1px; place-items:center; min-width:70px; min-height:49px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-size:.7rem; font-weight:800; }.mobile-nav button span { font-size:1.1rem; }.mobile-nav button.active { background:var(--coral-soft); color:var(--coral-dark); }
  .player { bottom:calc(70px + env(safe-area-inset-bottom)); grid-template-columns:minmax(70px,1fr) 42px 48px 42px 42px; gap:4px; width:calc(100% - 20px); min-height:72px; padding:8px 10px; border-radius:18px; }.player .desktop-control { display:none; }.cover-sm { width:46px; height:46px; }.player-titles strong { font-size:.82rem; }.player-titles small { font-size:.72rem; }.player-icon { width:42px; height:44px; }.play { width:48px; height:48px; }.player-extras { padding:12px; }
  .toast { bottom:160px; }
}

@media (max-width:420px) {
  .auth-copy h1 { font-size:clamp(2rem,11vw,2.65rem); }
  .continue-card { grid-template-columns:82px 1fr; gap:14px; padding:16px; }
  .continue-card .cover-feature { width:82px; }
  .player { grid-template-columns:minmax(54px,1fr) 40px 48px 40px; }
  .player #fwd30 { display:none; }
  .library-grid { gap:22px 13px; }
}

@media (hover:none) {
  .shelf-book:hover,.library-book:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; } }