/* Shared interface colors. Book pages keep their own reading preferences. */
:root {
  --panel-bg:#f7f5f0; --panel-surface:#fffefa; --panel-raised:#eef1e9; --panel-hover:#e3ebdf;
  --panel-ink:#203b34; --panel-muted:#556358; --panel-line:#cfd7ce; --panel-control-line:#737f75;
  --panel-accent:#285749; --panel-on-accent:#fffefa; --panel-selected:#e3ecdf; --panel-focus:#954323;
  --panel-danger:#913d31; --panel-danger-bg:#ffede6; --panel-warning:#74501d; --panel-warning-bg:#faf0d4;
  --panel-shadow:0 10px 36px #173d3712;
  --panel-mobile-nav:var(--panel-surface);
}
html[data-panel-theme=light] {color-scheme:light}
html[data-panel-theme=dark] {
  color-scheme:dark;
  --panel-bg:#111916; --panel-surface:#1a2520; --panel-raised:#24322b; --panel-hover:#304038;
  --panel-ink:#edf3ec; --panel-muted:#b1c0b5; --panel-line:#415248; --panel-control-line:#728579;
  --panel-accent:#a8dcb3; --panel-on-accent:#133222; --panel-selected:#294634; --panel-focus:#f4bb82;
  --panel-danger:#ffb7a9; --panel-danger-bg:#442c28; --panel-warning:#f2d19a; --panel-warning-bg:#3a3326;
  --panel-shadow:0 10px 36px #0005;
  --panel-mobile-nav:#14271f;
}
html[data-panel-theme=dark]:not(.reader-open):not(.ebook-open):not(:has(#offline-reader:not([hidden]))) {background-color:var(--panel-window-edge,var(--panel-bg))}
@media(max-width:760px) {
  /* iOS can extend the page color into a system-owned area outside the app. */
  html[data-panel-standalone]:has(body.app-shell):not(.reader-open):not(.ebook-open) {
    --panel-window-edge:var(--panel-mobile-nav); background-color:var(--panel-window-edge);
  }
}
.appearance-toggle[hidden] {display:none!important}
.app-shell .header-actions .appearance-toggle,.login-page .appearance-toggle,.offline-page .appearance-toggle {
  display:inline-grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; margin:0;
  border:1px solid transparent; border-radius:10px; background:transparent; color:var(--panel-ink);
}
.appearance-toggle svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) {
  .app-shell .header-actions .appearance-toggle:hover,.login-page .appearance-toggle:hover,.offline-page .appearance-toggle:hover {background:var(--panel-hover)}
}
.appearance-toggle:focus-visible,.appearance-setting select:focus-visible {outline:2px solid var(--panel-focus);outline-offset:2px}
.appearance-setting {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px;
  margin:0 0 18px; padding:16px 18px; border:1px solid var(--panel-line); border-radius:14px; background:var(--panel-surface); color:var(--panel-ink);
}
.appearance-setting h2 {margin:0 0 4px; font:650 1rem/1.4 system-ui,sans-serif}
.appearance-setting p {margin:0; font-size:.875rem; color:var(--panel-muted)}
.appearance-setting label {display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; font-size:.875rem}
.appearance-setting select {min-height:44px; max-width:100%; border-color:var(--panel-control-line); background:var(--panel-surface); color:var(--panel-ink)}
.auth-appearance {display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 8px}
.auth-card .auth-appearance .login-eyebrow {margin:0}
.login-page .auth-shell .login-caption,.auth-story-note,.auth-invitation-note {color:var(--panel-muted)}
.auth-book-comics {background-color:#995236}
.offline-library-actions {display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 10px}
.offline-library-actions a {padding-block:10px}
.offline-library-head {gap:8px}

/* Sign-in and invitations also get the selected palette before authentication. */
html[data-panel-theme=dark] .login-page {background:var(--panel-bg);color:var(--panel-ink)}
html[data-panel-theme=dark] .login-page :is(.auth-story .brand,.auth-story-copy h2,.auth-card h1,.auth-card label) {color:var(--panel-ink)}
html[data-panel-theme=dark] .auth-story .brand-symbol {background:var(--panel-accent);color:var(--panel-on-accent)}
html[data-panel-theme=dark] .login-page .login-eyebrow {color:#e6b388}
html[data-panel-theme=dark] .login-page :is(.auth-story-copy>p:last-child,.login-intro,.auth-field-help,.auth-invitation-note) {color:var(--panel-muted)}
html[data-panel-theme=dark] .login-page :is(.auth-shelf,.auth-invitation-note) {border-color:var(--panel-line)}
html[data-panel-theme=dark] .login-page .auth-card {background:var(--panel-surface);border-color:var(--panel-line);box-shadow:var(--panel-shadow)}
html[data-panel-theme=dark] .login-page .auth-card input:not([type=hidden]) {
  background:var(--panel-bg);color:var(--panel-ink);caret-color:var(--panel-accent);border-color:var(--panel-control-line);
}
html[data-panel-theme=dark] .login-page .auth-card input::placeholder {color:var(--panel-muted);opacity:1}
html[data-panel-theme=dark] .login-page .auth-card .password-field>button {color:var(--panel-accent);background:transparent}
html[data-panel-theme=dark] .login-page .auth-card .password-field>button:hover {background:var(--panel-hover)}
html[data-panel-theme=dark] .login-page .auth-card .primary {background:var(--panel-accent);color:var(--panel-on-accent);border-color:var(--panel-accent)}
html[data-panel-theme=dark] .login-page .auth-card .primary:hover {background:#bce9c5}
html[data-panel-theme=dark] .auth-card a:not(.primary) {color:var(--panel-accent)}
html[data-panel-theme=dark] .auth-card :is(a,button,input):focus-visible {outline-color:var(--panel-focus)}
html[data-panel-theme=dark] .login-page .auth-card .login-error {background:var(--panel-danger-bg);color:var(--panel-danger);border-color:#97665b}
@media(max-width:480px) {
  html[data-panel-theme=dark] .login-page .auth-card {background:transparent;box-shadow:none}
}

/* Scope shell colors to the offline shelf so they don't tint the comic canvas. */
html[data-panel-theme=dark] .offline-page {background-color:var(--panel-bg);color:var(--panel-ink)}
html[data-panel-theme=dark] #offline-library :is(.offline-book,button,select),
html[data-panel-theme=dark] .offline-prepare {background:var(--panel-surface);color:var(--panel-ink);border-color:var(--panel-control-line)}
html[data-panel-theme=dark] #offline-library .offline-book {border-color:var(--panel-line)}
html[data-panel-theme=dark] #offline-library .appearance-toggle {background:transparent;color:var(--panel-ink);border-color:transparent}
html[data-panel-theme=dark] #offline-library .offline-cover {background:var(--panel-raised);color:var(--panel-ink)}
html[data-panel-theme=dark] #offline-library :is(.offline-book p,.offline-eyebrow) {color:var(--panel-muted)}
html[data-panel-theme=dark] #offline-library .offline-read {background:var(--panel-accent);color:var(--panel-on-accent);border-color:var(--panel-accent)}
html[data-panel-theme=dark] #offline-library .offline-tools {border-color:var(--panel-line)}
html[data-panel-theme=dark] #offline-library .offline-conflict {background:var(--panel-warning-bg);color:var(--panel-warning)}
html[data-panel-theme=dark] #offline-library .offline-conflict p {color:inherit}
html[data-panel-theme=dark] .offline-prepare button {color:var(--panel-ink);background:var(--panel-raised);border-color:var(--panel-control-line)}
html[data-panel-theme=dark] .offline-prepare progress {accent-color:var(--panel-accent)}
html[data-panel-theme=dark] :is(#offline-library,.offline-prepare) :focus-visible {outline-color:var(--panel-focus)}

/* Secondary labels sit on several pale surfaces, including selected rows. */
html[data-panel-theme=light] .app-shell {--muted:#58675e}
html[data-panel-theme=light] .app-shell #queue-count {background:#965335;color:#fff}
html[data-panel-theme=light] .app-shell :is(#book-source-note,.chapter-source a,.navigation-destination>span:last-child),
html[data-panel-theme=light] #personal :is(.personal-storage-amount,.personal-section-heading>span,#personal-pending-note) {color:var(--panel-muted)}