/* ── Variables ────────────────────────────────────────────────────────────── */

:root {
  --bg:        #111;
  --surface:   #1c1c1c;
  --text:      #ddd;
  --text-dim:  #7a7a7a;
  --accent:    #6b8fd9;
  --accent-ink: #0d1220;
  --border:    #2a2a2a;
  --shadow:    rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] {
  --bg:       #f2f2f7;
  --surface:  #fff;
  --text:     #1c1c1e;
  --text-dim: #74747c;
  --accent:   #4568c4;
  --accent-ink: #fff;
  --border:   #e2e2e8;
  --shadow:   rgba(30, 30, 45, 0.08);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: 0.3; cursor: default; }
input[type="search"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
  padding: 0.4rem 0.7rem;
  width: 100%;
}
input[type="search"]:focus { border-color: var(--accent); }

/* ── Library page layout ──────────────────────────────────────────────────── */

body.page-library { min-height: 100vh; }

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
}
.logo:hover { text-decoration: none; opacity: 0.8; }

.nav-loading { font-size: 0.8rem; color: var(--text-dim); }

/* Main content */
.main-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.main-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.25s ease;
}
.main-header.header-hidden { transform: translateY(-100%); }
.breadcrumb { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb-back {
  border: none; background: none; padding: 0;
  font-size: 0.88rem; color: var(--accent); cursor: pointer;
}
.breadcrumb-back:hover { text-decoration: underline; color: var(--accent); border-color: transparent; }
.breadcrumb-sep { color: var(--text-dim); font-size: 0.88rem; }
.view-title { font-size: 1rem; font-weight: 600; }
.header-theme-switcher { margin-left: auto; flex-shrink: 0; }
/* Dark/Light (.theme-opt), Cache, Settings, and Logout all sit in the same
   header row and should read as one consistent set of pill buttons — sized
   to match .theme-opt (0.35rem 0.9rem padding, 0.85rem font), not each other's
   previously mismatched one-off values. */
.cache-toggle-btn {
  flex-shrink: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 6px;
}
.footer-link.header-settings-link {
  flex-shrink: 0;
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
}
.logout-btn.header-logout-btn {
  margin-left: 0.6rem;
  flex-shrink: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}
/* One flex item, not three separate ones, so wrapping (see the mobile media
   query below) moves the whole group to a new line atomically instead of
   splitting it mid-group depending on how much room the rest of the header
   happens to have on a given view (breadcrumb hidden vs shown changes that). */
.header-controls-group { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.cover-placeholder { width: 100%; aspect-ratio: 2/3; background: var(--border); }

/* Library tabs — left-aligned under the logo, above the book grid. "All Titles"
   plus one tab per library (data-driven, see loadLibraries() in app.js — no
   hardcoded names). */
.library-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.library-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nav-item, .library-group-header {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.nav-item:hover:not(:disabled), .library-group-header:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
}
.nav-item.active, .library-group-header.active,
.nav-item.active:hover, .library-group-header.active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Filter bar (search + genre chips) */
.filter-bar {
  padding: 0.75rem 1.25rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.search-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.search-row input[type="search"] {
  flex: 1;
  max-width: 480px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}
#btn-search {
  padding: 0.45rem 1.1rem;
  font-size: 0.88rem;
  border-color: var(--accent);
  color: var(--accent);
  flex-shrink: 0;
}
#btn-search:hover { background: var(--accent); color: var(--accent-ink); }
.genre-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.6rem;
}
.genre-label {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.tag-chips-empty {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}
.tag-chip {
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip.active, .tag-chip.active:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Books grid */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1.25rem;
  padding: 1.5rem;
}
.book-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.book-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px var(--shadow); }
.book-card a { display: block; color: inherit; }
.book-card img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  background: var(--border);
}
.book-card { position: relative; }
.book-card-link { display: block; text-decoration: none; }
.book-card-link:hover { text-decoration: none; }

.book-tag-btn {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.book-card:hover .book-tag-btn { opacity: 1; }

/* A finished volume reads as done at a glance, rather than as a full bar. */
.book-card.read .book-progress-fill { background: var(--accent); }
.book-card.read .book-progress-pct  { color: var(--accent); font-weight: 600; }

.book-menu-popup {
  position: fixed;
  z-index: 500;
  min-width: 11rem;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.book-menu-item {
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  text-align: left;
  background: none;
  border: none;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
}
.book-menu-item:hover { background: var(--bg); }

.tag-editor-popup {
  position: fixed;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  width: 220px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.tag-editor-title {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-editor-list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; min-height: 1.2rem; }
.tag-editor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-radius: 99px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
}
.tag-rm {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
}
.tag-rm:hover { opacity: 1; }
.tag-editor-add { display: flex; gap: 0.4rem; }
.tag-editor-input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  min-width: 0;
}
.tag-editor-save {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.book-info { padding: 0.6rem 0.7rem; }
.book-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-author { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem; }
.book-series { font-size: 0.7rem; color: var(--accent); margin-top: 0.15rem; }

.empty-msg { padding: 4rem; text-align: center; color: var(--text-dim); font-size: 0.95rem; }

/* ── Reader page ──────────────────────────────────────────────────────────── */

body.page-reader { display: flex; flex-direction: column; min-height: 100vh; }

.app-chrome,
.app-chrome * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  font-family: system-ui, sans-serif !important;
  color: var(--text) !important;
}
.app-chrome a, .app-chrome a:visited { color: var(--accent) !important; }

.reader-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: transform 0.25s ease;
}
.reader-nav.header-hidden { transform: translateY(-100%); }

/* HTML-library content is never theme-aware — pin the (now-transparent)
   chrome's text/buttons to the light palette always, since the book's own
   background is virtually always light regardless of the site-wide theme. */
body.html-reader-chrome .reader-nav,
body.html-reader-chrome .reader-bottom-nav {
  --text:       #1c1c1e;
  --text-dim:   #74747c;
  --accent:     #4568c4;
  --accent-ink: #fff;
  --border:     #e2e2e8;
}
.nav-home { flex-shrink: 0; font-size: 0.85rem; }
.nav-title { flex: 1; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-info { flex-shrink: 0; font-size: 0.8rem; color: var(--text-dim); }
.nav-buttons { display: flex; gap: 0.4rem; flex-shrink: 0; }
.nav-buttons button { padding: 0.35rem 0.9rem; }
.nav-buttons button.active, .nav-buttons button.active:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

#reader-content { flex: 1; }

/* Fixed-layout (manga) mode */
body.fixed-layout-mode {
  overflow: hidden;
}
body.fixed-layout-mode .reader-bottom-nav {
  display: none;
}

#reader-content.hltr,
#reader-content.h-ltr {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  line-height: 1.85;
}

#reader-content.vrtl,
#reader-content.v-rtl {
  height: calc(100vh - 44px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.5rem 2rem;
}

/* Text-level reading bookmark */
mark.reading-mark {
  color: inherit;
  border-radius: 2px;
  cursor: pointer;
}
mark.reading-mark.color-yellow { background: rgba(255, 210, 70, 0.45); }
mark.reading-mark.color-pink { background: rgba(255, 110, 165, 0.42); }
mark.reading-mark.color-blue { background: rgba(80, 165, 255, 0.42); }
mark.reading-mark.color-green { background: rgba(70, 205, 135, 0.42); }

.bm-popup {
  position: fixed;
  z-index: 1000;
  width: min(300px, calc(100vw - 20px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.bm-popup strong { display: block; margin-bottom: 0.65rem; font-size: 0.88rem; }
.bm-popup textarea {
  width: 100%;
  min-height: 74px;
  margin: 0.65rem 0;
  resize: vertical;
}
.bm-colors { display: flex; gap: 0.65rem; }
.bm-colors input {
  appearance: none;
  width: 25px;
  height: 25px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.bm-colors input[value="yellow"] { background: #f3ca3f; }
.bm-colors input[value="pink"] { background: #ef70a3; }
.bm-colors input[value="blue"] { background: #559be5; }
.bm-colors input[value="green"] { background: #55b985; }
.bm-colors input:checked { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.bm-actions { display: flex; gap: 0.4rem; }
.bm-actions button { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
.bm-actions .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bm-actions .danger { margin-left: auto; color: #fff; background: #b93e48; border-color: #b93e48; }

.toc-panel.bookmarks-panel { right: -370px; width: min(350px, 92vw); }
.toc-panel.bookmarks-panel.open { right: 0; }
.bookmarks-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
.bookmarks-empty { padding: 1.5rem 1rem; color: var(--text-dim); font-size: 0.84rem; line-height: 1.5; }
.bookmark-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0.7rem;
  margin-bottom: 0.4rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  line-height: 1.4;
}
.bookmark-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--border); }
.bookmark-item-meta { display: flex; align-items: center; gap: 0.45rem; color: var(--text-dim); font-size: 0.7rem; }
.bookmark-color-dot { width: 9px; height: 9px; border-radius: 50%; }
.bookmark-color-dot.color-yellow { background: #f3ca3f; }
.bookmark-color-dot.color-pink { background: #ef70a3; }
.bookmark-color-dot.color-blue { background: #559be5; }
.bookmark-color-dot.color-green { background: #55b985; }
.bookmark-item-quote {
  margin-top: 0.3rem;
  color: var(--text);
  font-size: 0.83rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.bookmark-item-note { margin-top: 0.3rem; color: var(--text-dim); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reader-bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.reader-bottom-nav button { padding: 0.35rem 0.9rem; }
.reader-bottom-nav span { font-size: 0.8rem; color: var(--text-dim); }

/* ── TOC panel ────────────────────────────────────────────────────────────── */

.toc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 290;
}
.toc-overlay.visible { display: block; }

.toc-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transition: right 0.25s ease;
}
.toc-panel.open { right: 0; }

.toc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.toc-panel-title { font-size: 0.9rem; font-weight: 600; }
.toc-close {
  border: none;
  font-size: 1rem;
  padding: 0.1rem 0.4rem;
}

.toc-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.toc-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.84rem;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.1s;
}
.toc-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border-color: transparent;
}
.toc-item:disabled { color: var(--text-dim); cursor: default; }

/* ── Book progress overlay ────────────────────────────────────────────────── */

.book-card.in-progress img { opacity: 0.72; }
.book-progress-bar-wrap { padding: 0 0.7rem 0.5rem; }
.book-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.book-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.book-progress-pct {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
  text-align: right;
}

/* ── Personal library dashboard ───────────────────────────────────────────── */

.personal-dashboard { padding: 1.5rem 1.75rem 3rem; }
.personal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 190px));
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.personal-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.personal-stat strong { color: var(--accent); font-size: 1.35rem; }
.personal-stat span { color: var(--text-dim); font-size: 0.78rem; }
.personal-section { margin-bottom: 2rem; }
.personal-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.personal-section-header h2 { font-size: 1.05rem; }
.personal-section-header span { color: var(--text-dim); font-size: 0.78rem; }
.personal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 0.75rem;
}
.personal-card {
  display: flex;
  min-width: 0;
  height: 150px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.personal-card:hover { border-color: var(--accent); color: var(--text); }
.personal-card img {
  width: 100px;
  height: 150px;
  flex: 0 0 100px;
  object-fit: cover;
  background: var(--border);
}
.personal-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  padding: 0.8rem;
}
.personal-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.personal-card-meta {
  margin-top: 0.35rem;
  color: var(--text-dim);
  font-size: 0.75rem;
}
.personal-card-target {
  overflow: hidden;
  margin-top: auto;
  color: var(--accent);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-card.completed .personal-card-target { color: #6bcf8d; }
.personal-progress {
  height: 3px;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--border);
}
.personal-progress i { display: block; height: 100%; background: var(--accent); }
.personal-loading { color: var(--text-dim); font-size: 0.88rem; }
.personal-error { color: #e07070; }
.personal-categories-section { padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.category-create-btn { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.personal-category { margin-bottom: 1.25rem; }
.personal-category-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.personal-category-header h3 { font-size: 0.9rem; }
.personal-category-header > span:not(.personal-category-actions) {
  color: var(--text-dim);
  font-size: 0.72rem;
}
.personal-category-actions { display: flex; gap: 0.35rem; margin-left: auto; }
.personal-category-actions button { padding: 0.2rem 0.5rem; font-size: 0.68rem; }
.personal-category-actions .danger { color: #e07070; }
.category-empty {
  padding: 0.8rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.78rem;
}
.category-series-card { height: 125px; }
.category-series-card img { width: 84px; height: 125px; flex-basis: 84px; }
.series-menu-btn { z-index: 3; }

.category-editor-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 230px;
  margin-bottom: 0.6rem;
  overflow-y: auto;
}
.category-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.25rem;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}
.category-check:hover { color: var(--accent); }
.category-check input { accent-color: var(--accent); }

@media (max-width: 640px) {
  .personal-dashboard { padding: 1rem; }
  .personal-stats { grid-template-columns: repeat(3, 1fr); }
  .personal-stat { padding: 0.65rem; }
  .personal-stat strong { font-size: 1.05rem; }
  .personal-stat span { font-size: 0.68rem; }
  .personal-grid { grid-template-columns: 1fr; }
  .personal-category-header { flex-wrap: wrap; }
  .personal-category-actions { margin-left: 0; }
}

/* ── Login page ───────────────────────────────────────────────────────────── */

body.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}
.login-wrap {
  width: 100%;
  max-width: 360px;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 1rem;
  box-shadow: 0 8px 28px var(--shadow);
}
.login-logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 1.5rem;
}
.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}
.google-login-btn:hover { border-color: var(--accent); color: var(--text); }
.google-login-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--text-dim);
  font-size: 0.78rem;
}
.login-divider::before, .login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}
.login-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.login-tab {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0.55rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.login-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.login-form { display: flex; flex-direction: column; gap: 0.75rem; }
.login-field { display: flex; flex-direction: column; gap: 0.3rem; }
.login-field label { font-size: 0.8rem; color: var(--text-dim); }
.login-field input {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.login-field input:focus { border-color: var(--accent); }
.login-submit {
  margin-top: 0.25rem;
  padding: 0.6rem;
  font-size: 0.9rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 6px;
  font-weight: 600;
}
.login-submit:hover { opacity: 0.9; color: var(--accent-ink); }
.login-error {
  font-size: 0.82rem;
  color: #e07070;
  margin: 0;
}

/* ── Settings page ────────────────────────────────────────────────────────── */

body.page-settings { max-width: 1600px; width: 95%; margin: 0 auto; padding: 0 1.5rem 3rem; }

.settings-page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.back-link { font-size: 0.88rem; color: var(--accent); }
.settings-page-title { font-size: 1.1rem; font-weight: 700; }

.settings-layout { display: flex; align-items: flex-start; gap: 2.5rem; }

.settings-nav {
  flex: 0 0 170px;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.settings-nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.settings-nav-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.settings-nav-link.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.settings-page-main { flex: 1; min-width: 0; }

.settings-section {
  display: none;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  /* no fill — nested rows/cards already use --surface to stand out against
     the page background; filling this too would make them blend in */
}
.settings-section.active { display: block; }
.settings-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* ── Library integrity ────────────────────────────────────────────────────── */

.integrity-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}
.integrity-actions span { color: var(--text-dim); font-size: 0.82rem; }
.integrity-report { display: flex; flex-direction: column; gap: 0.75rem; }
.integrity-placeholder { color: var(--text-dim); font-size: 0.85rem; }
.integrity-failed { color: #e07070; font-size: 0.85rem; }
.integrity-summary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.integrity-summary strong { font-size: 0.95rem; }
.integrity-summary span { color: var(--text-dim); font-size: 0.78rem; }
.integrity-healthy { border-color: rgba(76, 175, 125, 0.55); }
.integrity-warnings { border-color: rgba(217, 164, 65, 0.65); }
.integrity-errors { border-color: rgba(224, 112, 112, 0.65); }
.integrity-issues { display: flex; flex-direction: column; gap: 0.4rem; }
.integrity-clean { padding: 1rem; color: #4caf7d; font-size: 0.85rem; }
.integrity-issue {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}
.integrity-severity {
  min-width: 54px;
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.62rem;
  font-weight: 700;
}
.integrity-issue-error .integrity-severity { color: #fff; background: #b94750; }
.integrity-issue-warning .integrity-severity { color: #201708; background: #d9a441; }
.integrity-issue-body { display: flex; min-width: 0; flex-direction: column; gap: 0.2rem; }
.integrity-issue-body strong { font-size: 0.8rem; font-weight: 500; }
.integrity-issue-body small { color: var(--text-dim); font-size: 0.7rem; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .settings-layout { flex-direction: column; gap: 1rem; }
  .settings-nav {
    /* .settings-nav's base rule sets `flex: 0 0 170px` — a fixed WIDTH for
       the desktop sidebar, since .settings-layout's main axis is row there.
       .settings-layout switches to flex-direction:column on mobile, which
       flips that same flex-basis to a fixed HEIGHT instead — 170px of nav
       bar regardless of how little space two wrapped lines of links
       actually need, with the leftover space distributed onto the link
       lines (align-content's default "stretch"), rendering the first link
       as a tall, mostly-empty box. flex:0 0 auto lets height follow content. */
    flex: 0 0 auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px var(--shadow);
}
.settings-row-label { font-size: 0.9rem; }

.theme-switcher { display: flex; gap: 0.4rem; }
.theme-opt { padding: 0.35rem 0.9rem; font-size: 0.85rem; border-radius: 6px; }
.theme-opt.active, .theme-opt.active:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.settings-libraries { display: flex; flex-direction: column; gap: 0.75rem; }

.library-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow);
}
.library-card-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }
.library-card-path { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.7rem; word-break: break-all; }
.library-card-footer { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; flex-wrap: wrap; }
.library-card-count { font-size: 0.8rem; color: var(--text-dim); }
.library-card-analyzed { font-size: 0.78rem; color: var(--text-dim); }

.book-expand-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.2rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
}
.book-expand-toggle .library-card-name { margin-bottom: 0; }
.book-expand-arrow { font-size: 0.75rem; color: var(--text-dim); flex-shrink: 0; }
.sync-btn { padding: 0.35rem 1rem; font-size: 0.82rem; }
.job-delete-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  margin-left: auto;
  color: #e07070;
  border-color: color-mix(in srgb, #e07070 40%, transparent);
}
.job-delete-btn:hover:not(:disabled) { background: color-mix(in srgb, #e07070 12%, transparent); }

.job-current-volume {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.job-status-pending { color: var(--text-dim); }
.job-status-running { color: var(--accent); font-weight: 600; }
.job-status-done     { color: #4caf7d; font-weight: 600; }
.job-status-failed   { color: #e07070; font-weight: 600; }
.job-status-paused   { color: #d9a441; font-weight: 600; }

.queue-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.queue-controls-hint { font-size: 0.8rem; color: var(--text-dim); }

.job-reconvert-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  vertical-align: middle;
}

.reconvert-btn {
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  /* also used on <a> tags (image download link) — repeat button's own chrome
     since anchors don't get the bare `button` element rule. */
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.reconvert-btn:hover { border-color: var(--accent); color: var(--accent); }

.reconvert-no-scan { font-size: 0.78rem; color: var(--text-dim); font-style: italic; }

.reconvert-volumes {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.reconvert-volume-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.3rem 0;
}
.reconvert-volume-row + .reconvert-volume-row { border-top: 1px solid var(--border); }
.reconvert-volume-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.reconvert-volume-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reconvert-volume-actions { display: flex; gap: 0.4rem; flex-shrink: 0; align-items: center; flex-wrap: wrap; }
.reconvert-volume-analyzed { font-size: 0.76rem; color: var(--text-dim); flex-shrink: 0; }
.reconvert-error {
  color: #e07070;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.6rem;
  background: rgba(224, 112, 112, 0.12);
  border: 1px solid rgba(224, 112, 112, 0.4);
  border-radius: 6px;
}
.reconvert-needed-badge {
  font-size: 0.76rem;
  color: #c9820a;
  background: rgba(201, 130, 10, 0.12);
  border: 1px solid rgba(201, 130, 10, 0.4);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.reconvert-spinner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--accent);
  background: rgba(99, 140, 255, 0.12);
  border: 1px solid rgba(99, 140, 255, 0.4);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.reconvert-spinner {
  width: 0.7em;
  height: 0.7em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: reconvert-spin 0.7s linear infinite;
}
@keyframes reconvert-spin {
  to { transform: rotate(360deg); }
}
.dl-format-picker {
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.upload-hint { color: var(--text-dim); font-size: 0.82rem; margin: 0 0 1.1rem; }

.bulk-reconvert-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.bulk-reconvert-select-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.bulk-reconvert-count { color: var(--text-dim); font-size: 0.82rem; }
.book-row-header { display: flex; align-items: center; gap: 0.5rem; }
.book-select-checkbox { flex-shrink: 0; cursor: pointer; }
.book-row-cover {
  width: 2.2rem;
  height: 3.1rem;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--surface);
}

.upload-field { margin-bottom: 0.9rem; }
.upload-field-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.upload-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.9rem;
  cursor: pointer;
}

.library-picker { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.library-pick-btn {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.library-pick-btn:hover { border-color: var(--accent); }
.library-pick-btn.active, .library-pick-btn.active:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

.upload-dropzone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.9rem;
}
.upload-dropzone:hover { border-color: var(--accent); }
.upload-dropzone.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.upload-dropzone-icon {
  font-size: 1.4rem;
  color: var(--text-dim);
  flex-shrink: 0;
  line-height: 1;
}
.upload-dropzone-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.upload-dropzone-title { font-size: 0.88rem; font-weight: 500; }
.upload-dropzone-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-dropzone-sub.has-file { color: var(--accent); font-weight: 500; }

.upload-actions { display: flex; align-items: center; gap: 0.9rem; }
.upload-submit-btn {
  padding: 0.55rem 1.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 8px;
}
.upload-submit-btn:hover:not(:disabled) { opacity: 0.9; color: var(--accent-ink); }
.upload-submit-btn:disabled { opacity: 0.6; }

.upload-progress-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.upload-progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.15s ease-out;
}
.upload-progress-fill.indeterminate {
  width: 40% !important;
  animation: upload-indeterminate 1.1s ease-in-out infinite;
}
@keyframes upload-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.upload-progress-label { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }

.settings-page-header {
  position: relative;
}
.logout-btn {
  margin-left: auto;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  color: #e07070;
  border-color: #e07070;
}
.logout-btn:hover { background: #e07070; color: #fff; border-color: #e07070; }

.settings-users { display: flex; flex-direction: column; gap: 0.5rem; }
.user-row { gap: 0.75rem; }
.user-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.user-name { font-size: 0.9rem; font-weight: 500; }
.user-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  text-transform: uppercase;
}
.user-badge-you { background: transparent; color: var(--text-dim); }
.user-online-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.user-online-dot.online { background: #3fb950; }
.user-online-dot.offline { background: var(--text-dim); opacity: 0.5; }
.user-actions { display: flex; gap: 0.4rem; }
.user-del-btn { padding: 0.3rem 0.7rem; font-size: 0.8rem; color: #e07070; border-color: #e07070; }
.user-del-btn:hover { background: #e07070; color: #fff; }

.user-create-form { align-items: center; }
.user-input {
  flex: 1;
  min-width: 120px;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.user-input:focus { border-color: var(--accent); }
.user-admin-label { font-size: 0.83rem; display: flex; align-items: center; gap: 0.3rem; }

.user-pwd-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  flex-wrap: wrap;
}
.user-pwd-btn, .user-admin-toggle { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* Plain link styled as a button (main header's Settings link) */
.footer-link {
  display: block;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.footer-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Server Status */
.status-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.status-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
}
.status-tile-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.status-tile-value { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.status-tile-value.status-ok     { color: #4caf7d; }
.status-tile-value.status-warn   { color: #d9a441; }
.status-tile-value.status-danger { color: #e07070; }
.status-tile-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; }
.status-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.status-refresh-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.status-refresh-label select { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.status-refresh-btn {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
}
.status-graph-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem;
  background: var(--surface);
}
.status-graph-legend {
  display: flex;
  gap: 1.2rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.status-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
}
#status-temp-graph { width: 100%; height: auto; display: block; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .books-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.9rem; padding: 1rem; }

  /* .main-header is a single-row flex with several flex-shrink:0 controls
     (theme switcher, cache toggle, settings link, logout) — on a phone-width
     screen they don't fit on one line, and with no wrap the row overflows the
     viewport instead of shrinking, dragging the whole page (grid included)
     into horizontal scroll. Below, .logo's own width got squeezed toward
     zero by that overflow, and since CJK text wraps character-by-character
     with no spaces to break on, "よめくろ" rendered as a vertical column
     instead of a line. Letting the header wrap fixes both: each control gets
     its natural width on whichever line it lands on, and the logo never
     gets squeezed below its own text width in the first place. */
  html, body { overflow-x: hidden; }
  .main-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 0.6rem 0.9rem;
  }
  .logo { flex-shrink: 0; white-space: nowrap; }
  .header-theme-switcher { margin-left: 0; }
  /* .header-controls-group is one flex item, so wherever it wraps to (line 1
     next to the theme switcher, or its own line), margin-left:auto pushes the
     whole group flush right on that line — instead of the three buttons
     wrapping independently and landing at the left edge, which happened
     differently on "All Titles" (breadcrumb hidden, more room on line 1) vs a
     library/series view (breadcrumb shown, less room), since where the header
     actually breaks shifted between them. */
  .header-controls-group { margin-left: auto; gap: 0.5rem; }
  .logout-btn.header-logout-btn { margin-left: 0; }
}

/* A two-page spread doesn't fit a phone screen; keep manga single-page only.
   Keyed off pointer type, not width — width alone flips in landscape, which is
   exactly how manga tends to get read on a phone. */
@media (pointer: coarse) {
  #btn-spread { display: none !important; }
}