:root {
  --bg: #f4efe5;
  --text: #231f1a;
  --panel: rgba(255, 255, 255, .58);
  --panel-solid: #f8f2e3;
  --muted: #756a5d;
  --border: rgba(70, 52, 37, .22);
  --accent: #8a3f2d;
  --reader-bg: #fffdfa;
  --reader-text: #231f1a;
  --font-size: 20px;
  --line-height: 2;
  --reader-width: 860px;
  --player-safe-area: 92px;
  --sidebar-width: clamp(180px, 12vw, 230px);
  --default-background-image: url("/static/images/default-background.svg");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.page-loading { cursor: progress; }
html.page-loading #pageView { opacity: .72; }

body {
  --page-surface: var(--bg);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif;
  min-height: 100vh;
  transition: background-color .18s ease, color .18s ease;
}

body[data-book-slug] { --page-surface: var(--reader-bg); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--page-surface) 66%, transparent), color-mix(in srgb, var(--page-surface) 80%, transparent)) center / cover no-repeat,
    var(--site-background-image, var(--default-background-image)) center top / contain no-repeat;
  background-color: var(--page-surface);
  contain: strict;
  transform: translateZ(0);
  pointer-events: none;
}

body:has(.music-player) { padding-bottom: var(--player-safe-area); }
body:has(.music-player)::before { bottom: var(--player-safe-area); }
body:has(.music-player) .reading-progress-control,
body:has(.music-player) .chapter-drawer {
  bottom: var(--player-safe-area);
}

a { color: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: none;
  margin: auto;
  min-height: clamp(52px, 4vw, 58px);
  padding: clamp(6px, .55vw, 8px) clamp(10px, 1vw, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, .8vw, 12px);
}

.brand {
  flex: 0 1 clamp(130px, 12vw, 190px);
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(4px, .55vw, 8px);
  white-space: nowrap;
}
.header-actions form { margin: 0; }
.member-name {
  max-width: 150px;
  overflow: hidden;
  color: var(--accent);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-reading {
  max-width: min(320px, 38vw);
}

.continue-reading > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button,
.button,
input,
select { font: inherit; }

button,
.button {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  min-height: 38px;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
}

button:hover,
.button:hover { border-color: var(--accent); }

.auth-dialog {
  width: min(430px, calc(100vw - 28px));
  padding: 0;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.auth-dialog::backdrop { background: rgba(24, 20, 17, .58); }
.auth-dialog form { padding: 24px; }
.auth-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.auth-heading h2,
.auth-card h1 { margin: 4px 0 0; }
.auth-close {
  width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
}
.auth-dialog label,
.register-form label {
  margin: 14px 0;
  display: grid;
  gap: 7px;
  font-weight: 700;
}
.auth-dialog input:not([type="checkbox"]),
.register-form input {
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  color: var(--text);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.auth-dialog .auth-remember {
  display: flex;
  align-items: center;
  font-weight: 400;
}
.auth-submit {
  width: 100%;
  color: #fff;
  background: var(--accent);
}
.auth-switch { margin: 16px 0 0; text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 700; }
.auth-message,
.auth-errors {
  padding: 10px 12px;
  color: #842f22;
  background: rgba(174, 66, 42, .1);
  border-radius: 9px;
}
.auth-errors p { margin: 4px 0; }
.auth-main {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100% - 28px));
  margin: 48px auto;
}
.auth-card {
  padding: clamp(22px, 5vw, 42px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.auth-card > p { color: var(--muted); }
.register-form small { color: var(--muted); font-weight: 400; }

.container {
  width: min(1120px, calc(100% - 28px));
  margin: 28px auto 60px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(40, 28, 18, .06);
}

.toolbar {
  position: fixed;
  right: 16px;
  top: 70px;
  z-index: 50;
  width: min(330px, calc(100vw - 32px));
  padding: 16px;
  display: none;
}

.toolbar.open { display: block; }
.toolbar h2 { font-size: 18px; margin: 0 0 12px; }

.setting-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.setting-row input[type="range"] { width: 100%; }

.setting-row input[type="color"] {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
}

.setting-value {
  min-width: 48px;
  text-align: right;
  color: var(--muted);
  font-size: 13px;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.preset-grid button { padding: 6px; font-size: 13px; }
.full-width-button { width: 100%; margin-top: 10px; }

.eyebrow {
  display: block;
  color: var(--accent);
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 32px 0 16px;
}

.section-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 4vw, 34px);
}

.book-hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(26px, 5vw, 58px);
  padding: clamp(26px, 5vw, 54px);
  overflow: hidden;
  position: relative;
}

.book-hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -150px;
  bottom: -210px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 50%;
}

.book-cover {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  color: #f3e6c5;
  background:
    linear-gradient(145deg, rgba(247, 182, 54, .2), transparent 34%),
    radial-gradient(circle at 65% 25%, #65321f 0, #2b1814 38%, #111316 100%);
  border: 1px solid rgba(236, 192, 103, .35);
  border-radius: 8px 18px 18px 8px;
  box-shadow: 0 22px 45px rgba(30, 17, 10, .28);
}

.book-cover::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(236, 192, 103, .22);
  clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
}

.cover-rune {
  position: absolute;
  inset: 23% 0 auto;
  text-align: center;
  color: #e8b44e;
  font-family: Georgia, serif;
  font-size: clamp(70px, 8vw, 112px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 20px rgba(232, 180, 78, .35);
}

.cover-series {
  position: absolute;
  right: 14%;
  bottom: 11%;
  left: 14%;
  color: #d9c18f;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.5;
  text-align: center;
}

.book-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
}

.book-hero-copy h1 {
  max-width: 720px;
  margin: 10px 0 8px;
  font-size: clamp(31px, 5vw, 54px);
  line-height: 1.2;
}

.book-subtitle {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

.book-byline { color: var(--muted); font-size: 14px; }
.book-description { max-width: 720px; margin: 23px 0; line-height: 1.9; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-list span {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}

.book-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px;
}

.book-stats strong { color: var(--text); font-size: 16px; }
.book-stats a { color: var(--accent); }

.favorite-book-button {
  min-height: 32px;
  padding: 4px 10px;
  color: var(--accent);
  border-radius: 999px;
}

.favorite-book-button.active {
  color: #fff;
  background: var(--accent);
}

.chapter-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.chapter-tools input,
.chapter-tools select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 8px 12px;
}

.chapter-tools input { flex: 1 1 260px; }
.chapter-tools select { flex: 0 1 170px; }

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 20px;
}

.chapter-link {
  display: block;
  text-decoration: none;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-solid) 50%, transparent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chapter-link:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.chapter-link.last-read { outline: 2px solid var(--accent); }
.empty { padding: 36px; text-align: center; color: var(--muted); display: none; }
.reader-shell { width: min(var(--reader-width), calc(100% - 28px)); margin: 26px auto 70px; }
.reader-card {
  padding: clamp(22px, 5vw, 58px);
  background: var(--reader-bg);
}
.reader-title { text-align: center; margin: 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.45; }
.reader-meta { text-align: center; color: var(--muted); margin: 10px 0 34px; }

.novel-content {
  color: var(--reader-text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: .04em;
  word-break: break-word;
}

.novel-content p { margin: 0 0 1.25em; white-space: pre-wrap; }
.novel-content p.section-break { text-align: center; letter-spacing: .35em; color: var(--muted); }

.reader-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-top: 24px;
}

.reader-nav a { text-align: center; }
.reader-nav .prev,
.reader-nav .next { justify-self: stretch; }

.progress-line {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  z-index: 100;
}

.reading-progress-control {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: 156px;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(30, 20, 12, .14);
  backdrop-filter: blur(12px);
}

.progress-editor {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.progress-number {
  align-self: end;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.progress-number input {
  width: 38px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  appearance: textfield;
}

.progress-number input::-webkit-inner-spin-button,
.progress-number input::-webkit-outer-spin-button { appearance: none; margin: 0; }

.progress-number b {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
}

.progress-editor small {
  align-self: end;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 10px;
}

.progress-slider {
  width: 128px;
  accent-color: var(--accent);
  cursor: pointer;
}

.progress-jump-buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.progress-jump-buttons button {
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
}

.chapter-drawer {
  position: fixed;
  top: 59px;
  bottom: 0;
  right: 0;
  z-index: 140;
  width: min(420px, 92vw);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 22px;
  color: var(--text);
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: none;
  transform: translateX(102%);
  transition: transform .24s ease;
  backdrop-filter: none;
}

.chapter-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.drawer-header h2 { margin: 4px 0 0; }
.drawer-close { width: 42px; padding: 0; border-radius: 50%; font-size: 24px; }
.drawer-chapter-position {
  color: var(--muted);
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 12px;
  text-align: right;
}

.drawer-search {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
}

.drawer-search:focus { border-color: var(--accent); }

.drawer-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 12px;
}

.drawer-sort button {
  border-color: transparent;
  background: transparent;
}

.drawer-sort button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 800;
}

.drawer-chapter-list {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 5px 4px 0;
  scroll-padding-block: 8px;
  overscroll-behavior: contain;
}

.drawer-chapter-link {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.drawer-chapter-link[hidden] { display: none; }
.drawer-chapter-link span { color: var(--muted); font-family: "Segoe UI", sans-serif; font-size: 12px; }
.drawer-chapter-link strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.drawer-chapter-link:hover { color: var(--accent); }

.drawer-chapter-link.current {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 8px;
}

.drawer-chapter-link.current strong { font-weight: 800; }
.drawer-empty { display: none; padding: 20px; color: var(--muted); text-align: center; }
.drawer-empty.show { display: block; }

@media (prefers-reduced-motion: reduce) {
  .chapter-drawer { transition: none; }
}

.error-box { padding: 26px; white-space: pre-wrap; }

.library-page {
  --bg: #f4efe5;
  --text: #231f1a;
  --accent: #a7472d;
}

/* Media-library homepage */
.sidebar-toggle {
  flex: 0 0 40px;
  width: 40px;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  font-size: 20px;
}

.portal-search {
  flex: 1 1 620px;
  width: auto;
  max-width: min(620px, 50vw);
  min-width: min(240px, 30vw);
  min-height: clamp(36px, 3vw, 40px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.portal-search input {
  width: 100%;
  min-height: 40px;
  padding: 7px 16px;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
}

.portal-search span {
  align-self: stretch;
  min-width: 52px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-left: 1px solid var(--border);
  font-size: 22px;
}

.sidebar-divider {
  height: 1px;
  margin: 14px 0;
  background: var(--border);
}

.portal-main {
  min-width: 0;
  position: relative;
  margin-left: var(--sidebar-width);
  padding: 0 clamp(18px, 3vw, 42px) 80px;
}

.portal-section {
  scroll-margin-top: 125px;
  padding: clamp(16px, 1.5vw, 22px) 0 clamp(30px, 3vw, 42px);
}

.portal-section + .portal-section { border-top: 1px solid var(--border); }
.portal-section.view-hidden { display: none; }

.portal-section-heading {
  margin-bottom: clamp(12px, 1.25vw, 18px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.portal-section-heading h1 {
  margin: 4px 0 0;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: clamp(24px, 2vw, 28px);
}

.portal-section-heading > span { color: var(--muted); font-size: 13px; }

.portal-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.clear-recent-button,
.section-play-button {
  min-height: 32px;
  padding: 5px 10px;
  color: var(--accent);
  background: var(--panel);
  font-size: 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.section-play-button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.section-play-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.recent-delete-button {
  position: absolute;
  z-index: 4;
  min-height: 30px;
  padding: 4px 9px;
  color: #a3372d;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  border-radius: 999px;
  font: 12px "Segoe UI", "Microsoft JhengHei", sans-serif;
}

.novel-recent-delete {
  top: 8px;
  right: 8px;
}

.track-recent-delete {
  top: 9px;
  right: 87px;
  width: 30px;
  padding: 0;
  font-size: 19px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.7vw, 26px) clamp(8px, 1vw, 16px);
}

.media-card[hidden] { display: none; }

.media-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  color: #f3e6c5;
  background:
    linear-gradient(125deg, rgba(231, 176, 73, .18), transparent 38%),
    radial-gradient(circle at 68% 34%, #6d3926, #291815 45%, #111315 100%);
  border: 1px solid rgba(236, 192, 103, .26);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(34, 23, 16, .12);
  text-decoration: none;
}

.media-thumbnail::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(230, 185, 90, .22);
  transform: rotate(5deg);
}

.novel-thumbnail.has-cover { background: var(--panel); }

.novel-cover-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.novel-thumbnail .novel-cover-image {
  object-fit: contain;
}

.book-cover.has-cover::before,
.novel-thumbnail.has-cover::after {
  display: none;
}

.media-mark {
  position: absolute;
  z-index: 1;
  inset: 20% auto auto 12%;
  color: #e8b44e;
  font-family: Georgia, serif;
  font-size: clamp(48px, 6vw, 86px);
  font-weight: 900;
  line-height: 1;
}

.media-cover-label {
  position: absolute;
  z-index: 1;
  right: 6%;
  bottom: 9%;
  color: #d8bd84;
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: .16em;
}

.media-card h2 {
  margin: 10px 2px 0;
  text-align: center;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.45;
}

.media-card h2 a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-card h2 a:hover { color: var(--accent); }

.novel-media-card {
  position: relative;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 260px 230px;
}

.favorite-toggle,
.download-toggle {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 50%;
  text-decoration: none;
}

.favorite-toggle.active { color: #c83d35; }
.download-toggle:hover,
.download-toggle:focus-visible { color: var(--accent); }
.novel-favorite,
.image-favorite {
  top: 7px;
  right: 7px;
}

.portal-empty {
  display: none;
  padding: 48px 20px;
  color: var(--muted);
  text-align: center;
}

.portal-empty.show { display: grid; gap: 8px; }

.section-more-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.section-more-row:has(.section-more-button[hidden]) { display: none; }

.section-more-button {
  min-width: 180px;
  color: var(--accent);
  background: var(--panel);
  border-radius: 999px;
  font-weight: 800;
}

.section-more-button[hidden] { display: none; }

.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 14px;
}

.track-card {
  position: relative;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 186px;
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.track-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.track-format {
  margin-right: auto;
  padding: 4px 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 28%, transparent);
  border-radius: 5px;
  font: 600 10px "Segoe UI", sans-serif;
  letter-spacing: .05em;
}

.track-actions .favorite-toggle,
.track-actions .download-toggle,
.track-actions .track-recent-delete {
  position: static;
  width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: transparent;
  border-color: transparent;
  font-size: 18px;
}

.track-actions a:hover,
.track-actions button:hover,
.track-actions :focus-visible {
  background: var(--panel);
  border-color: var(--border);
}

.track-card.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.track-art {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  color: #f1d388;
  background: linear-gradient(145deg, #843d2c, #261b1b);
  border: 0;
  border-radius: 10px;
}

.track-art:disabled { cursor: not-allowed; }

.track-number {
  position: absolute;
  top: 8px;
  left: 9px;
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
}

.track-play-symbol {
  display: grid;
  place-items: center;
  font-size: 25px;
}

.track-copy { min-width: 0; }

.track-copy h2 {
  margin: 0 0 6px;
  overflow: hidden;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.track-copy p,
.track-copy small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.track-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 12px;
}

.track-copy small { margin-top: 5px; color: var(--accent); }

.music-player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  min-height: 92px;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(300px, 1.5fr) minmax(130px, .6fr);
  align-items: center;
  gap: 24px;
  color: var(--text);
  background: var(--panel-solid);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 35px rgba(30, 20, 12, .12);
}

.player-track-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.player-art {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #f0d287;
  background: linear-gradient(145deg, #843d2c, #261b1b);
  border-radius: 8px;
  font-size: 22px;
}

.player-track-info strong,
.player-track-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-track-info strong { font-size: 14px; }
.player-track-info span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.player-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-favorite {
  flex: 0 0 auto;
  width: 30px;
  min-height: 30px;
  padding: 0;
  color: var(--muted);
  background: var(--panel);
  border-radius: 50%;
}

.player-favorite.active { color: #c83d35; }
.player-favorite:disabled { opacity: .45; cursor: default; }
.player-center { display: grid; gap: 7px; }
.player-buttons { display: flex; justify-content: center; gap: 10px; }

.player-buttons button {
  position: relative;
  width: 36px;
  min-height: 34px;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
}

.player-buttons [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  z-index: 160;
  padding: 7px 10px;
  color: #fff;
  background: rgba(25, 22, 19, .94);
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
  font: 12px/1.35 "Segoe UI", "Microsoft JhengHei", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity .14s ease, transform .14s ease;
}

.player-buttons [data-tooltip]:hover::after,
.player-buttons [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.player-buttons .primary-player-button {
  color: var(--bg);
  background: var(--text);
}

.player-buttons button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.player-timeline {
  display: grid;
  grid-template-columns: 36px minmax(80px, 1fr) 36px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 11px "Segoe UI", sans-serif;
}

.player-timeline input,
.player-volume input {
  width: 100%;
  accent-color: var(--accent);
}

.player-volume {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.portal-page:has(.music-player) .portal-main { padding-bottom: 40px; }

@media (max-width: 800px) {
  .book-hero { grid-template-columns: 150px 1fr; }
  .book-cover { min-height: 230px; }
  .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-card { border-left: 0; border-right: 0; border-radius: 0; }
  .reader-shell { width: 100%; }
  .brand { flex-basis: auto; }
  .portal-search { width: min(420px, 48vw); }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-player {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.5fr);
  }
  .player-volume { display: none; }
}

@media (max-width: 520px) {
  :root { --player-safe-area: 140px; }
  .header-inner {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px 10px;
  }
  .header-inner .brand { min-width: 0; }
  .header-actions .member-name { display: none; }
  .header-actions button { padding-inline: 8px; font-size: 12px; }
  .book-hero { grid-template-columns: 1fr; }
  .book-cover { width: 150px; min-height: 220px; }
  .book-hero-copy h1 { font-size: 31px; }
  .book-description { line-height: 1.7; }
  .chapter-grid { grid-template-columns: 1fr; padding: 12px; }
  .container { width: min(100% - 18px, 1120px); margin-top: 16px; }
  .reader-nav { grid-template-columns: 1fr 1fr; }
  .reader-nav .directory { grid-column: 1 / -1; grid-row: 2; }
  .reading-progress-control {
    right: 8px;
    bottom: 148px;
    width: 132px;
    padding: 9px;
  }
  .progress-editor {
    width: 62px;
    height: 62px;
  }
  .progress-editor small { margin-bottom: 8px; }
  .progress-slider { width: 106px; }
  .chapter-drawer { width: min(360px, 94vw); padding: 18px 14px; }
  .brand { font-size: 16px; }
  .header-actions { gap: 3px; }
  .continue-reading { max-width: 42vw; }
  .portal-search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; min-width: 0; }
  .portal-search span { min-width: 38px; }
  .portal-main { padding-inline: 12px; }
  .media-grid { grid-template-columns: 1fr; gap: 22px; }
  .track-grid { grid-template-columns: 1fr; }
  .music-player {
    min-height: 140px;
    padding: 9px 12px;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .player-track-info {
    position: absolute;
    top: 10px;
    right: 12px;
    left: 12px;
    grid-template-columns: 38px 1fr;
  }
  .player-center { padding-top: 42px; }
  .player-buttons { position: static; }
  .player-track-info > div:last-child { padding-right: 0; }
  .portal-page:has(.music-player) .portal-main { padding-bottom: 30px; }
}

/* Shared application navigation */
#pageView {
  position: relative;
  z-index: 1;
}

.global-sidebar {
  position: fixed;
  top: 59px;
  bottom: 0;
  left: 0;
  z-index: 130;
  width: var(--sidebar-width);
  overflow-y: auto;
  padding: 18px 12px 130px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: 18px 0 48px rgba(25, 17, 12, .16);
  transform: translateX(-102%);
  transition: transform .22s ease;
  contain: layout paint;
  will-change: transform;
  backdrop-filter: none;
}

.global-sidebar.open { transform: translateX(0); }
.global-sidebar.docked { z-index: 18; box-shadow: none; }
.global-sidebar h2 {
  margin: 12px 12px 8px;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 14px;
}
.global-sidebar nav { display: grid; gap: 4px; }
.global-sidebar a {
  min-height: 42px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
}
.global-sidebar a span { font-size: 19px; text-align: center; }
.global-sidebar a:hover,
.global-sidebar a.active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.global-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 129;
  visibility: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity .22s ease, visibility .22s ease;
}
.global-sidebar-backdrop.open { visibility: visible; opacity: 1; }
body.global-sidebar-open { overflow: hidden; }

.portal-page.global-sidebar-collapsed .portal-main { margin-left: 0; }

body:not(.portal-page).global-sidebar-docked .container {
  width: min(1120px, calc(100% - 258px));
  transform: translateX(115px);
}
body:not(.portal-page).global-sidebar-docked .reader-shell {
  width: min(var(--reader-width), calc(100% - 258px));
  transform: translateX(115px);
}

/* Image lists and global lightbox */
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 16px;
}
.image-load-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}
.image-card[hidden] { display: none; }
.image-card {
  position: relative;
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 300px 220px;
  padding-bottom: 3px;
}
.image-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  border-radius: 12px;
}
.image-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity .16s ease;
}
.image-thumbnail img.loaded { opacity: 1; }
.image-card-copy {
  min-width: 0;
  padding: 8px 40px 0;
  display: flex;
  justify-content: center;
  text-align: center;
  font: 13px "Segoe UI", "Microsoft JhengHei", sans-serif;
}
.image-card-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorites-dashboard {
  display: grid;
  gap: 24px;
}

.favorites-main { padding-top: 28px; }
.favorites-heading { margin-bottom: 18px; }
.favorites-heading h1 {
  margin: 5px 0 0;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 28px;
}

.favorite-panel {
  padding: clamp(16px, 2.5vw, 26px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.favorite-panel-heading {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.favorite-panel-heading h2 {
  margin: 0;
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  font-size: 20px;
}
.favorite-panel-heading span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.favorite-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.favorite-empty {
  margin: 0;
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.image-lightbox[hidden] { display: none; }
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: 58px 76px 92px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10, 9, 9, .94);
}
.image-lightbox figure {
  width: min(1200px, 100%);
  height: 100%;
  margin: 0;
}
.lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lightbox-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
}
.lightbox-status {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: min(420px, calc(100% - 40px));
  padding: 10px 14px;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-radius: 10px;
  text-align: center;
}
.lightbox-status:empty { display: none; }
.image-lightbox.is-loading .lightbox-stage > img { opacity: .3; }
.image-lightbox figcaption {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 14px;
  transform: translateX(-50%);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(18, 16, 16, .9);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
}
.image-lightbox figcaption > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-lightbox figcaption > span { color: #c7c2ba; font-size: 13px; }
.lightbox-actions { display: flex; gap: 8px; }
.lightbox-actions .button { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 1;
  width: 46px;
  min-height: 46px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .25);
  border-radius: 50%;
  font-size: 30px;
}
.lightbox-close { top: 14px; right: 18px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav.previous { left: 18px; }
.lightbox-nav.next { right: 18px; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 1450px) {
  .image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  body:not(.portal-page).global-sidebar-docked .container,
  body:not(.portal-page).global-sidebar-docked .reader-shell {
    width: calc(100% - 28px);
    transform: none;
  }
  .portal-page .portal-main { margin-left: 0; }
  .global-sidebar { top: 0; width: min(280px, 86vw); padding-top: 74px; }
}

@media (max-width: 520px) {
  .image-grid { grid-template-columns: 1fr; }
  .image-lightbox { padding: 56px 12px 126px; }
  .image-lightbox figcaption {
    width: calc(100vw - 24px);
    flex-wrap: wrap;
    gap: 7px 12px;
  }
  .image-lightbox figcaption > strong {
    max-width: calc(100% - 76px);
  }
  .lightbox-nav { width: 40px; min-height: 40px; background: rgba(0, 0, 0, .55); }
  .lightbox-nav.previous { left: 8px; }
  .lightbox-nav.next { right: 8px; }
}