:root {--secondary:#e8eddf;--primary:#416e54;--primary-foreground:#fffef9}
/* System appearance is the default; theme.js applies a saved choice before paint. */
:root {color-scheme:light;--bg:#f5f5ed;--surface:#fffef9;--ink:#22382f;--muted:#59675e;--green:#416e54;--green-dark:#294f39;--line:#e0e5da;--peach:#f0dfc6;--red:#b04432}
.welcome-brand .brand-mark {display:block;object-fit:cover;overflow:hidden}
:root[data-theme="dark"] {
    color-scheme:dark;
    --bg:#13231d;--surface:#1c3027;--ink:#edf2e8;--muted:#adbbb0;
    --green:#a8c99a;--green-dark:#b8d3aa;--line:#395044;--peach:#524732;--red:#f39b8c;
    --background:var(--bg);--foreground:var(--ink);--card:var(--surface);--card-foreground:var(--ink);
    --popover:var(--surface);--popover-foreground:var(--ink);--primary:#b8d3aa;--primary-foreground:#13231d;
    --secondary:#2c4235;--secondary-foreground:var(--ink);--muted-foreground:var(--muted);
    --accent-foreground:var(--ink);--border:var(--line);--input:var(--line);--ring:#b8d3aa;--destructive:var(--red);--sage:var(--secondary);
  }
:root[data-theme="dark"] html,:root[data-theme="dark"] body {background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] #custom-voice-panel textarea {background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] button {color:inherit}
:root[data-theme="dark"] .primary,:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .listen-controls #listen-toggle,:root[data-theme="dark"] .controls .play,:root[data-theme="dark"] .art-play,:root[data-theme="dark"] .plan-featured .btn.primary,:root[data-theme="dark"] .reader-toolbar [aria-selected=true] {background:var(--primary);color:var(--primary-foreground)}
:root[data-theme="dark"] .primary:hover,:root[data-theme="dark"] .btn.primary:hover,:root[data-theme="dark"] .listen-controls #listen-toggle:hover {background:#c7dfbb}
:root[data-theme="dark"] .continue-card {background:var(--secondary);color:var(--ink)}
:root[data-theme="dark"] .continue-card p,:root[data-theme="dark"] .continue-card .muted {color:var(--muted)}
:root[data-theme="dark"] .voice-reading-passage,:root[data-theme="dark"] .voice-card,:root[data-theme="dark"] .settings-callout,:root[data-theme="dark"] .dropzone,:root[data-theme="dark"] .book-cover,:root[data-theme="dark"] .cover,:root[data-theme="dark"] .player-cover,:root[data-theme="dark"] .mini,:root[data-theme="dark"] .message,:root[data-theme="dark"] .sync-notice,:root[data-theme="dark"] .reader-source,:root[data-theme="dark"] .highlight-anchor,:root[data-theme="dark"] .highlight-library-link,:root[data-theme="dark"] .highlight-tabs,:root[data-theme="dark"] .highlight-time.bm-seek,:root[data-theme="dark"] .account-chip:hover,:root[data-theme="dark"] .lib-filters,:root[data-theme="dark"] .art-page {background:var(--secondary);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .dropzone:hover,:root[data-theme="dark"] .dropzone.dragover,:root[data-theme="dark"] .lib-row:hover,:root[data-theme="dark"] .icon-button:hover,:root[data-theme="dark"] .voice-card.selected,:root[data-theme="dark"] .reader-passage.is-speaking {background:#344e3d;border-color:var(--green)}
:root[data-theme="dark"] .highlight-card,:root[data-theme="dark"] .folio-sheet,:root[data-theme="dark"] .settings-sheet,:root[data-theme="dark"] .account-hub,:root[data-theme="dark"] .sheet,:root[data-theme="dark"] .google-sign-in,:root[data-theme="dark"] #share-dialog,:root[data-theme="dark"] .signin-google {background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .folio-backdrop {background:#0009}
:root[data-theme="dark"] .google-sign-in:hover,:root[data-theme="dark"] .signin-google:hover {background:var(--secondary)}
:root[data-theme="dark"] .welcome {background:radial-gradient(ellipse at 75% 25%,#2c423580,transparent 60%),var(--bg)}
:root[data-theme="dark"] .welcome .welcome-copy p,:root[data-theme="dark"] .welcome .welcome-footnote,:root[data-theme="dark"] .welcome-kicker,:root[data-theme="dark"] .art-audio-label,:root[data-theme="dark"] .muted,:root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .book small,:root[data-theme="dark"] .times {color:var(--muted)}
:root[data-theme="dark"] .welcome h1 em,:root[data-theme="dark"] .controls button,:root[data-theme="dark"] a {color:var(--green-dark)}
:root[data-theme="dark"] .art-halo {background:var(--secondary)}
:root[data-theme="dark"] .art-audio {background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .signin-apple {background:#edf2e8;color:#13231d}
:root[data-theme="dark"] .book,:root[data-theme="dark"] .download,:root[data-theme="dark"] .highlight,:root[data-theme="dark"] .highlight textarea,:root[data-theme="dark"] .tools select {border-color:var(--line)}
:root[data-theme="dark"] .tabs [aria-pressed=true] {border-color:var(--green)}
:root[data-theme="dark"] .seek,:root[data-theme="dark"] progress,:root[data-theme="dark"] input[type=checkbox],:root[data-theme="dark"] input[type=radio] {accent-color:var(--green)}
:root[data-theme="dark"] .error {color:var(--red)}

/* Controls inherit the chosen palette rather than a browser or component default. */

html body input.input,html body input[type=search],html body input[type=number],html body textarea,html body select {background:var(--surface);color:var(--ink);border-color:var(--line)}
html body input::placeholder,html body textarea::placeholder {color:var(--muted);opacity:1}
html body .lib-filters {background:var(--secondary);padding:4px;gap:4px}
html body .lib-filters button {color:var(--muted);opacity:1;background:transparent}
html body .lib-filters button.is-active {background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #0001}
.theme-toggle {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:22px;cursor:pointer}
.theme-toggle:focus-visible {outline:2px solid var(--green);outline-offset:3px}
.welcome-brand .theme-toggle {margin-left:auto}.welcome-brand:has(.theme-toggle) .welcome-kicker {display:none}
.native-workspace .topbar .brand,.native-workspace .topbar .beta,.native-workspace .lib-back {display:none}
.native-workspace .topbar {padding:8px 20px;justify-content:flex-end;border-bottom:1px solid var(--line)}
.native-workspace .topbar .account-chip {margin-left:0}
@media(max-width:650px) {
 .lib-header {display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center}
 .lib-header .lib-title {font-size:36px}.lib-header .lib-count {grid-column:2;grid-row:2;text-align:left;margin:0;font-size:13px}
 .lib-header .lib-add {grid-column:3;grid-row:1 / span 2;min-height:44px;padding:10px 16px}
 .native-workspace .lib-header {grid-template-columns:1fr auto}.native-workspace .lib-header .lib-count {grid-column:1}.native-workspace .lib-header .lib-add {grid-column:2}
 .lib-toolbar {gap:12px}.lib-toolbar .lib-filters {width:100%;display:flex}.lib-filters button {flex:1}
 .topbar .account-chip-label {font-size:13px}.topbar .brand {font-size:25px}
}

:root[data-theme="dark"] .hero > p,:root[data-theme="dark"] .account-card p {color:var(--muted)}
.topbar > .theme-toggle {margin-left:auto}.topbar:has(.theme-toggle) .account-chip {margin-left:0}
.native-workspace .topbar > .theme-toggle {margin-left:0;margin-right:0;order:1}
.native-workspace .topbar:has(#account-chip:not([hidden])) .account-chip {margin-left:0}
:root[data-theme="dark"] .lib-badge,:root[data-theme="dark"] .lib-badge.quiet {background:var(--secondary);color:var(--ink)}
:root[data-theme="dark"] .lib-badge.warn {background:var(--peach);color:#f0dcb9}
/* Hosted iPhone screens share these components with the web player. */
:root[data-theme="dark"] .book-stats span,
:root[data-theme="dark"] .job-panel .review-text {background:var(--secondary);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] #player-panel {background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] #player-panel .player-expand,
:root[data-theme="dark"] #player-panel .player-title,
:root[data-theme="dark"] #player-panel .icon-button {color:var(--ink)}
:root[data-theme="dark"] #player-panel .player-sub {color:var(--muted)}
:root[data-theme="dark"] #player-panel .player-line {background:var(--line)}
:root[data-theme="dark"] #player-panel .mini-toggle {background:var(--primary);color:var(--primary-foreground)}
:root[data-theme="dark"] #player-panel .mini-toggle:hover {background:#c7dfbb;color:var(--primary-foreground)}
/* App navigation belongs to the native bar, including club pages. */
.native-workspace .club-top{display:none!important}
.native-book-page #player-panel{display:none!important}
.native-book-page #share-dialog{margin-top:18px}
/* Embedded Settings uses the app's Back/title bar and fills the page. */
.native-workspace .settings-header{display:none!important}
.native-workspace #settings-sheet{width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}
.native-workspace #folio-overlay:has(#settings-sheet:not([hidden])){padding:0;align-items:stretch}
.native-workspace #folio-overlay:has(#settings-sheet:not([hidden])) .folio-backdrop{display:none}
/* Pair icon ink with its surface in both palettes, including hover/playing states. */
:root .voice-card .preview-button{background:var(--primary);color:var(--primary-foreground);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center}
:root .voice-card .preview-button:hover,:root .voice-card .preview-button:active{background:var(--primary);color:var(--primary-foreground);filter:brightness(.94)}
:root .voice-card .preview-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
:root[data-theme="dark"] .controls .play,:root[data-theme="dark"] .mini > button:not(.mini-open){background:var(--primary);color:var(--primary-foreground)}

/* Settings: paired selection colors and responsive category navigation. */
html .settings-sheet{width:min(940px,calc(100vw - 48px));max-width:940px;height:min(760px,calc(100dvh - 48px))}
html .settings-main{grid-template-columns:230px minmax(0,1fr);overflow:hidden}
.settings-navigation{min-height:0;overflow:auto;background:var(--bg);border-right:1px solid var(--line)}
html .settings-nav{display:flex;flex-direction:column;overflow:visible;border:0;background:transparent;padding:16px 12px;gap:20px}
.settings-nav-group{display:grid;gap:4px}
html .settings-group-label{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 10px 5px}
html .settings-nav .settings-nav-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:46px;padding:11px 12px;white-space:normal;text-align:left;border:1px solid transparent;color:var(--ink);background:transparent}
html .settings-nav .settings-nav-item:hover{background:var(--secondary);color:var(--ink)}
html .settings-nav .settings-nav-item.is-active,html .settings-nav .settings-nav-item.is-active:hover{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.settings-nav-item svg{flex-shrink:0}.settings-selected{margin-left:auto}
.settings-menu-toggle{display:none}
html .settings-body{padding:30px;overflow:auto;min-width:0;outline-offset:-3px}
html .settings-section .section-heading{margin-bottom:8px}
html .settings-description{color:var(--muted);margin:0 0 24px;font-size:14px}
.settings-profile-card{display:flex;align-items:center;gap:14px;background:var(--secondary);border:1px solid var(--line);border-radius:16px;padding:18px}
.settings-profile-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:var(--surface);border-radius:50%;color:var(--green)}
.settings-profile-card>div{min-width:0}.settings-profile-card strong{display:block;font-size:15px;overflow-wrap:anywhere}
.settings-profile-label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
html .settings-section form{margin:12px 0}
html .settings-section form .btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;justify-content:center;min-height:46px}
html .settings-plan-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border:1px solid var(--line);border-radius:14px;margin-top:24px;color:var(--ink);text-decoration:none}
.settings-plan-link small{display:block;color:var(--muted);margin-top:5px}
html .settings-section button.account-sign-out{width:100%;margin:0;color:var(--red)}
html .settings-section button.account-sign-out:hover{background:var(--secondary)}
html .settings-section .developer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html .settings-section .developer-link{display:flex;margin-top:12px;justify-content:center}
@media(max-width:650px){
 html .settings-sheet{width:100%;max-width:100%;height:calc(100dvh - 24px - env(safe-area-inset-top));max-height:calc(100dvh - 24px - env(safe-area-inset-top))}
 html .settings-main{display:flex;flex-direction:column;overflow:hidden}
 .settings-navigation{flex-shrink:0;max-height:60%;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}
 html .settings-menu-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 22px;min-height:64px;border:0;border-radius:0;background:var(--bg);color:var(--ink);text-align:left}
 .settings-menu-toggle small{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.settings-menu-toggle strong{font-size:15px}
 .is-expanded .settings-menu-toggle>svg{transform:rotate(180deg)}
 html .settings-navigation:not(.is-expanded) .settings-nav{display:none}
 html .settings-nav{padding:4px 14px 16px;gap:14px}
 .settings-nav-group{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-group-label{grid-column:1/-1}
 html .settings-nav .settings-nav-item{font-size:13px;padding:10px;gap:7px}
 html .settings-body{padding:24px 22px max(28px,env(safe-area-inset-bottom));flex:1;overflow:auto}
 .settings-profile-card{padding:14px;gap:10px}.settings-profile-icon{width:36px;height:36px}
}
/* A shared application shell across web destinations and native hosted content. */
.folio-navigation{display:none}
.app-ready .folio-navigation{display:flex;flex-direction:column;position:fixed;z-index:110;left:0;top:0;bottom:0;width:190px;padding:30px 16px;background:var(--surface);border-right:1px solid var(--line);gap:8px}
html .folio-navigation a{display:flex;align-items:center;gap:12px;padding:13px 14px;min-height:48px;border-radius:12px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:600}
html .folio-navigation a[aria-current=page]{background:var(--primary);color:var(--primary-foreground)}
html .folio-navigation .navigation-brand{font:36px Georgia,serif;color:var(--ink);margin:0 0 26px}
.app-ready:not(.clubs-page){padding-left:190px}
.app-ready .topbar{padding:18px 32px;justify-content:flex-end;border:0}
.app-ready .topbar .brand,.app-ready .topbar .beta,.app-ready #account-chip,.app-ready #header-library,.app-ready #library-link{display:none!important}
.app-ready .hero,.app-ready #workspace>.library-section,.app-ready #continue-listening,.app-ready #offline-shelf,.app-ready .lib-back,.app-ready .library-shortcuts>a{display:none!important}
.app-ready #workspace>.workspace-intro{margin:0 0 24px}.app-ready .workspace-intro h1{font-size:36px;line-height:1.2}
.app-ready main{padding-top:8px;max-width:1040px}
.app-ready #upload-panel{margin-top:0}.app-ready .lib-header{margin-top:0}
.app-ready:has(#settings-sheet:not([hidden])) #folio-overlay{left:190px;top:64px;bottom:0;padding:0;align-items:stretch;background:var(--bg);z-index:100}
.app-ready:has(#settings-sheet:not([hidden])) .folio-backdrop{display:none}
.app-ready #settings-sheet{width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
.app-ready #settings-sheet .overlay-close{display:none}
.app-ready #settings-sheet .settings-header{padding:20px 30px;border:0}
.app-ready #settings-sheet .settings-header h2{font-size:36px}
.app-ready #settings-sheet .settings-body{background:var(--surface);border-radius:20px 0 0 0}
.clubs-page.app-ready{padding-left:190px}.app-ready .club-top{justify-content:flex-end;border:0}.app-ready .club-top .brand,.app-ready .club-top nav{display:none}
.clubs-page.app-ready .club-app{max-width:1040px;padding:12px 32px 60px}.clubs-page .club-heading h1{font-size:36px}
/* Native content never carries a second application header, even in older clients. */
.native-page .topbar,.native-page .club-top,.native-page .folio-navigation,.native-page footer{display:none!important}
.native-inline .workspace-intro,.native-inline .hero,.native-inline .club-heading:has(h1){display:none!important}
.native-inline main,.native-inline .club-app{padding:16px!important;margin:0!important;max-width:none!important}
.native-inline #upload-panel{padding:0!important;margin:0!important;border:0;background:transparent;box-shadow:none}
.native-workspace body{padding-left:0!important}
.native-workspace .folio-navigation{display:none!important}
.native-workspace.app-ready #folio-overlay,.native-workspace .app-ready #folio-overlay{left:0!important;top:0!important}
@media(max-width:650px){
 .app-ready:not(.clubs-page),.clubs-page.app-ready{padding-left:0;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
 .app-ready .folio-navigation{top:auto;right:0;bottom:0;width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-right:0;border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
 html .folio-navigation .navigation-brand{display:none}
 html .folio-navigation a{flex-direction:column;gap:4px;padding:7px 3px;min-height:52px;font-size:11px}
 .app-ready .topbar,.app-ready .club-top{height:64px;padding:10px 20px;margin:0}
 .app-ready main,.clubs-page.app-ready .club-app{padding:8px 20px 24px}
 .app-ready:has(#settings-sheet:not([hidden])) #folio-overlay{left:0;top:64px;bottom:calc(76px + env(safe-area-inset-bottom))}
 .app-ready #settings-sheet .settings-header{padding:12px 22px 18px}
 .app-ready #settings-sheet .settings-header h2,.app-ready .workspace-intro h1,.clubs-page .club-heading h1{font-size:32px}
 .app-ready #settings-sheet .settings-body{border-radius:0}
 .app-ready .player-panel[data-mode=mini]{bottom:calc(80px + env(safe-area-inset-bottom))}
 .native-workspace .app-ready #folio-overlay{bottom:0!important}
}
.app-ready #root>.legal-footer{display:none}
@media(min-width:651px){.app-ready #player-panel[data-mode=mini]{left:190px;width:calc(100% - 190px)}}
@media(max-width:650px){.settings-navigation{max-height:75%}}