/* Heated Rivalry visual layer. Existing theme variables remain the compatibility API. */
:root {
  --theme-bg-deep: #111923;
  --theme-bg-mid: #1d2a36;
  --theme-bg-ice: #d8e9f2;
  --theme-bg-warm: #3a2028;
  --theme-surface: var(--surface, #fffaf2);
  --theme-surface-soft: color-mix(in srgb, var(--theme-surface) 74%, transparent);
  --theme-surface-elevated: color-mix(in srgb, var(--theme-surface) 90%, white 10%);
  --theme-surface-glass: color-mix(in srgb, var(--theme-surface) 64%, transparent);
  --theme-surface-inset: color-mix(in srgb, var(--theme-surface) 52%, transparent);
  --theme-text: var(--text, #25211e);
  --theme-text-soft: color-mix(in srgb, var(--theme-text) 74%, transparent);
  --theme-text-muted: color-mix(in srgb, var(--theme-text) 56%, transparent);
  --theme-border: var(--line, rgba(37, 33, 30, 0.14));
  --theme-border-strong: color-mix(in srgb, var(--theme-border) var(--theme-border-strength, 52%), var(--theme-accent-gold, #d5aa59));
  --theme-accent-gold: #d5aa59;
  --theme-accent-blue: #6f9fc9;
  --theme-accent-red: #b85f64;
  --theme-accent-white: #f4f7fa;
  --theme-accent-warm: #d39b73;
  --theme-accent-cold: #b7d7ee;
  --theme-focus: #f2c96d;
  --theme-success: #6da58e;
  --theme-warning: #d2a153;
  --theme-danger: #b85f64;
  --theme-shadow-color: color-mix(in srgb, #030912 var(--theme-shadow-strength, 60%), transparent);
  --theme-shadow-soft: 0 12px 30px var(--theme-shadow-color);
  --theme-shadow-strong: 0 24px 58px color-mix(in srgb, #030912 var(--theme-shadow-strength, 60%), transparent);
  --theme-glow-gold: 0 0 28px color-mix(in srgb, var(--theme-accent-gold) 24%, transparent);
  --theme-glow-blue: 0 0 30px color-mix(in srgb, var(--theme-accent-blue) 18%, transparent);
  --theme-glow-red: 0 0 30px color-mix(in srgb, var(--theme-accent-red) 16%, transparent);
  --theme-progress: var(--theme-accent-gold);
  --theme-progress-track: color-mix(in srgb, var(--theme-accent-blue) 22%, transparent);
  --theme-radius-small: 6px;
  --theme-radius-medium: 10px;
  --theme-radius-large: 18px;
  --theme-motion-scale: 0.6;
  --theme-type-scale: 1;
  --theme-spacing-density: 1;
  --theme-texture-opacity: 0.1;
  --theme-rink-opacity: 0.22;
  --theme-arena-light: 30%;
  --theme-font-display: Georgia, "Times New Roman", serif;
  --theme-font-body: var(--font-family, "Segoe UI", Arial, sans-serif);
}

body {
  color: var(--theme-text);
  font-family: var(--theme-font-body);
  line-height: 1.5;
  background-color: var(--theme-bg-deep);
  background-image:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--theme-accent-gold) calc(100% - var(--theme-rivalry-balance, 50%)), transparent) 0, transparent 30%),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--theme-accent-blue) var(--theme-rivalry-balance, 50%), transparent) 0, transparent 28%),
    linear-gradient(140deg, var(--theme-bg-deep) 0%, var(--theme-bg-mid) 48%, color-mix(in srgb, var(--theme-bg-warm) var(--theme-romance-warmth, 34%), var(--theme-bg-deep)) 100%);
  font-size: calc(1rem * var(--theme-type-scale));
}

body::before {
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--theme-accent-white) var(--theme-rink-lines, 22%), transparent) 50%, transparent 50.2%),
    radial-gradient(ellipse at center, transparent 0 18%, color-mix(in srgb, var(--theme-bg-ice) var(--theme-rink-lines, 22%), transparent) 18.2% 18.45%, transparent 18.7%),
    linear-gradient(135deg, color-mix(in srgb, var(--theme-accent-gold) var(--theme-texture, 10%), transparent), transparent 46%, color-mix(in srgb, var(--theme-accent-blue) var(--theme-ice-intensity, 38%), transparent));
  opacity: 0.72;
  mix-blend-mode: screen;
  backdrop-filter: blur(var(--background-blur));
}

body::after {
  opacity: calc(0.68 + (var(--theme-texture, 10) / 1000));
  mix-blend-mode: soft-light;
}

h1, h2, h3, .title-button, .detail-title, .cover-studio-title {
  font-family: var(--theme-font-display);
  letter-spacing: 0.01em;
}

h1 { text-shadow: 0 2px 18px color-mix(in srgb, var(--theme-accent-gold) 16%, transparent); }
h2 { color: var(--theme-text); }

.app-shell { width: min(1480px, calc(100% - 40px)); padding-top: 34px; }
.library-app { gap: calc(18px * var(--theme-spacing-density)); }

.topbar {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--theme-border-strong);
  border-radius: var(--theme-radius-large);
  background: linear-gradient(110deg, color-mix(in srgb, var(--theme-surface) 80%, transparent), color-mix(in srgb, var(--theme-accent-blue) 10%, transparent));
  box-shadow: var(--theme-shadow-soft), inset 0 1px 0 rgba(255,255,255,0.34);
}

.topbar::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--theme-accent-gold), transparent 46%, var(--theme-accent-blue) 70%, var(--theme-accent-red));
  opacity: 0.78;
}

.panel, .lock-panel, .stats-grid article, .list-panel, .home-tool-panel, .form-panel,
.modal-panel, .profile-drawer, .drawer-action, .drawer-detail, .fic-card,
.reading-now-card, .cover-studio-preview, .cover-version-card, .ai-panel,
.theme-editor-panel, .theme-preview-panel {
  border-color: var(--theme-border);
  border-radius: var(--theme-radius-medium);
  box-shadow: var(--theme-shadow-soft), inset 0 1px 0 rgba(255,255,255,0.16);
}

.panel, .lock-panel, .stats-grid article, .list-panel, .home-tool-panel {
  background: linear-gradient(145deg, var(--theme-surface-soft), color-mix(in srgb, var(--theme-accent-blue) var(--theme-card-depth, 58%), transparent));
}

.stats-grid article {
  position: relative;
  overflow: hidden;
}
.stats-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--theme-accent-gold), var(--theme-accent-red));
}
.stats-grid span { color: var(--theme-accent-gold); }

.primary-action, .ghost-action, .danger-action, .icon-action, .compact-action {
  border-radius: var(--theme-radius-small);
  transition: transform calc(160ms * var(--theme-motion-scale)), box-shadow calc(160ms * var(--theme-motion-scale)), border-color calc(160ms * var(--theme-motion-scale)), background calc(160ms * var(--theme-motion-scale));
}
.primary-action {
  color: #10151c;
  background: linear-gradient(135deg, var(--theme-accent-gold), color-mix(in srgb, var(--theme-accent-warm) 64%, var(--theme-accent-gold)));
  box-shadow: var(--theme-glow-gold);
}
.primary-action:hover, .ghost-action:hover, .compact-action:hover, .drawer-action:hover { transform: translateY(-1px); box-shadow: var(--theme-shadow-soft); }
.ghost-action, .compact-action, .icon-action {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-surface) 58%, transparent);
  border-color: var(--theme-border-strong);
}
.danger-action { background: linear-gradient(135deg, var(--theme-danger), #7f3949); }
.profile-action { background: color-mix(in srgb, var(--theme-surface) 70%, transparent); border-color: var(--theme-accent-gold); }
.profile-icon { stroke: var(--theme-accent-gold); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-focus) 74%, transparent);
  outline-offset: 2px;
}

.reading-lists { gap: 18px; }
.reading-list {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-medium);
  background: color-mix(in srgb, var(--theme-surface) var(--list-opacity), transparent);
  box-shadow: var(--theme-shadow-soft);
}
.to-be-read-list { border-top: 3px solid var(--theme-accent-blue); }
.currently-reading-list { border-top: 3px solid var(--theme-accent-gold); }
.read-list { border-top: 3px solid var(--theme-accent-cold); }
.reading-list h3 { color: var(--theme-text); font-family: Georgia, "Times New Roman", serif; }
.reading-list th { color: var(--theme-text-muted); }
.reading-list th button { color: var(--theme-text-muted); }
.reading-list tbody tr { transition: background calc(140ms * var(--theme-motion-scale)); }
.reading-list tbody tr:hover { background: color-mix(in srgb, var(--theme-accent-blue) 9%, transparent); }
.reading-list tbody tr:focus-within { background: color-mix(in srgb, var(--theme-focus) 10%, transparent); }
.reading-list td, .reading-list th { vertical-align: middle; }
.reading-list th { padding-top: 12px; padding-bottom: 12px; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.list-heading { padding: 16px 18px 10px; }
.list-heading h3 { margin-bottom: 0; font-size: 1.18rem; }
.list-meta { color: var(--theme-text-muted); }
.title-button { color: var(--theme-text); }
.title-button:hover, .text-link-button { color: var(--theme-accent-gold); }
.list-pagination button[aria-current="page"] { background: var(--theme-accent-gold); color: #10151c; }

.modal-backdrop, .form-dialog-scrim { background: rgba(5, 10, 18, 0.68); backdrop-filter: blur(5px); }
.modal-panel, .form-panel, .profile-drawer {
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 94%, transparent), color-mix(in srgb, var(--theme-accent-blue) 8%, var(--theme-surface)));
  box-shadow: var(--theme-shadow-strong), inset 0 1px 0 rgba(255,255,255,0.24);
}
.modal-header { border-bottom-color: var(--theme-border); }
.modal-header h2 { font-family: Georgia, "Times New Roman", serif; }
.modal-actions { border-top-color: var(--theme-border); }
.drawer-action { background: color-mix(in srgb, var(--theme-surface) 62%, transparent); }

input, select, textarea {
  border-color: var(--theme-border-strong);
  border-radius: var(--theme-radius-small);
  background: color-mix(in srgb, var(--theme-surface) 78%, transparent);
  color: var(--theme-text);
}
input[type="range"] { accent-color: var(--theme-progress); }
.field-row > label, .check-row, .radio-row, legend { color: var(--theme-text-soft); }
legend { font-family: var(--theme-font-display); font-weight: 800; }
textarea { line-height: 1.55; }
.theme-editor-panel, .theme-preview-panel { background: var(--theme-surface-inset); }
.theme-settings-group { background: color-mix(in srgb, var(--theme-accent-blue) 6%, var(--theme-surface-inset)); }
.theme-setting-copy, .small-copy { line-height: 1.45; }
.progress-track { background: var(--theme-progress-track); }
.progress-fill { background: linear-gradient(90deg, var(--theme-accent-blue), var(--theme-progress), var(--theme-accent-warm)); }

.cover-studio-modal, .cover-studio-preview, .cover-version-card { background: linear-gradient(150deg, #111923, color-mix(in srgb, var(--theme-accent-blue) 14%, #111923)); color: var(--theme-accent-white); }
.cover-studio-modal { border-color: color-mix(in srgb, var(--theme-accent-gold) 64%, transparent); }
.cover-studio-preview { box-shadow: var(--theme-shadow-strong), var(--theme-glow-gold); }
.cover-version-card { border-color: color-mix(in srgb, var(--theme-accent-blue) 42%, transparent); }
.cover-approved-badge, .approved-badge { background: var(--theme-accent-gold); color: #131a21; }

.reading-now-card { background: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent-red) 10%, var(--theme-surface)), color-mix(in srgb, var(--theme-accent-gold) 8%, var(--theme-surface))); }
.ai-panel, .ai-tools-modal { border-color: color-mix(in srgb, var(--theme-accent-blue) 34%, var(--theme-border)); }
.ai-panel.is-active, .detail-tab.is-active { border-color: var(--theme-accent-gold); box-shadow: var(--theme-glow-gold); }

.theme-modal { background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 95%, transparent), color-mix(in srgb, var(--theme-accent-blue) 8%, var(--theme-surface))); }
.theme-settings-group { margin-top: 16px; padding: 16px; border: 1px solid var(--theme-border); border-radius: var(--theme-radius-medium); background: color-mix(in srgb, var(--theme-accent-blue) 5%, transparent); }
.theme-settings-group h3 { margin: 0 0 5px; font-size: 1rem; }
.theme-setting-copy { margin: 0 0 12px; color: var(--theme-text-muted); font-size: 0.9rem; }
.theme-slider-grid { display: grid; gap: 10px; }
.theme-slider-grid label { display: grid; grid-template-columns: 1fr minmax(130px, 40%) 48px; gap: 10px; align-items: center; color: var(--theme-text-soft); font-weight: 800; }
.theme-slider-grid input[type="range"] { width: 100%; }
.theme-preview { border-color: var(--preview-line, var(--theme-border)); box-shadow: var(--theme-shadow-soft); }

.message[role="status"] { color: var(--theme-text-soft); }
.backup-reminder { color: var(--theme-accent-gold); }

.marker-quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.marker-quick-filters .filter-preset { border-color: var(--theme-border); background: color-mix(in srgb, var(--theme-surface) 82%, transparent); color: var(--theme-text-soft); }
.marker-quick-filters .filter-preset.is-active { border-color: var(--theme-accent-gold); color: var(--theme-accent-gold); }
.entry-marker-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; }
.entry-marker-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border: 1px solid var(--theme-border); border-radius: 999px; background: color-mix(in srgb, var(--theme-surface) 88%, transparent); color: var(--theme-text-soft); font-size: .74rem; font-weight: 800; line-height: 1.2; }
.marker-readNext { border-color: color-mix(in srgb, var(--theme-accent-gold) 72%, var(--theme-border)); color: var(--theme-accent-gold); }
.marker-favorite { border-color: color-mix(in srgb, var(--theme-accent-gold) 48%, var(--theme-border)); color: var(--theme-accent-gold); }
.marker-collectorEdition { border-color: color-mix(in srgb, #b99cff 68%, var(--theme-border)); color: #d7c7ff; }
.marker-audiobook { border-color: color-mix(in srgb, var(--theme-accent-blue) 62%, var(--theme-border)); color: var(--theme-accent-blue); }
.marker-typeset { border-color: color-mix(in srgb, var(--theme-accent-red) 52%, var(--theme-border)); color: var(--theme-accent-red); }
.marker-row-readNext td:first-child, .marker-row-favorite td:first-child, .marker-row-collectorEdition td:first-child, .marker-row-audiobook td:first-child, .marker-row-typeset td:first-child { border-left: 3px solid var(--theme-accent-gold); }
.marker-row-favorite td:first-child { border-left-color: var(--theme-accent-gold); }
.marker-row-collectorEdition td:first-child { border-left-color: #b99cff; }
.marker-row-audiobook td:first-child { border-left-color: var(--theme-accent-blue); }
.marker-row-typeset td:first-child { border-left-color: var(--theme-accent-red); }
.marker-editor-group { margin-top: 4px; }
.marker-derived-note { color: var(--theme-text-muted); }
.marker-aiEnhanced { border-color: var(--theme-border); color: var(--theme-text-soft); }
.entry-marker-strip { max-width: 100%; }
.entry-marker-badge { white-space: nowrap; }

/* Story-specific presets use the saved style identifier without changing theme workflows. */
html[data-theme-preset="heatedRivalryShaneMontreal"] body {
  background-image:
    linear-gradient(112deg, transparent 0 58%, color-mix(in srgb, var(--theme-accent-red) 22%, transparent) 58.2% 59%, transparent 59.2%),
    linear-gradient(145deg, #06152f 0%, var(--theme-bg-deep) 46%, color-mix(in srgb, var(--theme-accent-blue) 44%, #020814) 100%);
}
html[data-theme-preset="heatedRivalryShaneMontreal"] body::before {
  background:
    linear-gradient(90deg, transparent 49.65%, color-mix(in srgb, var(--theme-accent-red) 82%, white) 49.8% 50.2%, transparent 50.35%),
    radial-gradient(ellipse at center, transparent 0 17%, color-mix(in srgb, var(--theme-accent-blue) 76%, white) 17.2% 17.75%, transparent 18%),
    repeating-linear-gradient(115deg, transparent 0 72px, color-mix(in srgb, var(--theme-accent-white) 8%, transparent) 73px 74px);
  opacity: 0.74;
}
html[data-theme-preset="heatedRivalryShaneMontreal"] .topbar,
html[data-theme-preset="heatedRivalryShaneMontreal"] .modal-panel {
  border-top-color: var(--theme-accent-red);
}
html[data-theme-preset="heatedRivalryShaneMontreal"] .primary-action {
  color: white;
  background: linear-gradient(135deg, var(--theme-accent-red), color-mix(in srgb, var(--theme-accent-blue) 76%, #07172f));
}

html[data-theme-preset="heatedRivalryIlyaBoston"] body {
  background-image:
    repeating-linear-gradient(118deg, transparent 0 76px, color-mix(in srgb, var(--theme-accent-gold) 9%, transparent) 77px 80px),
    linear-gradient(145deg, #020202 0%, #111111 52%, color-mix(in srgb, var(--theme-accent-red) 22%, #050505) 100%);
}
html[data-theme-preset="heatedRivalryIlyaBoston"] body::before {
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--theme-accent-gold) 74%, transparent) 49.9% 50.1%, transparent 50.2%),
    linear-gradient(25deg, transparent 0 44%, color-mix(in srgb, var(--theme-accent-gold) 18%, transparent) 44.2% 45%, transparent 45.2%),
    linear-gradient(155deg, transparent 0 64%, color-mix(in srgb, var(--theme-accent-red) 14%, transparent) 64.2% 65%, transparent 65.2%);
  opacity: 0.78;
}
html[data-theme-preset="heatedRivalryIlyaBoston"] .topbar,
html[data-theme-preset="heatedRivalryIlyaBoston"] .reading-list,
html[data-theme-preset="heatedRivalryIlyaBoston"] .modal-panel {
  border-color: color-mix(in srgb, var(--theme-accent-gold) 70%, #252525);
}
html[data-theme-preset="heatedRivalryIlyaBoston"] .primary-action {
  background: linear-gradient(135deg, #ffd66b, var(--theme-accent-gold) 62%, #8f5a00);
}

html[data-theme-preset="heatedRivalryCottage"] body {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent-gold) 12%, transparent), transparent 22% 72%, color-mix(in srgb, var(--theme-bg-ice) 18%, transparent)),
    linear-gradient(165deg, #173b3f 0%, var(--theme-bg-deep) 54%, color-mix(in srgb, var(--theme-accent-red) 22%, #122128) 100%);
}
html[data-theme-preset="heatedRivalryCottage"] body::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg-ice) 14%, transparent), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 118px, color-mix(in srgb, var(--theme-accent-gold) 10%, transparent) 119px 121px),
    linear-gradient(12deg, color-mix(in srgb, var(--theme-accent-red) 10%, transparent), transparent 42%);
  opacity: 0.62;
}
html[data-theme-preset="heatedRivalryCottage"] .topbar,
html[data-theme-preset="heatedRivalryCottage"] .modal-panel,
html[data-theme-preset="heatedRivalryCottage"] .reading-list {
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 92%, transparent), color-mix(in srgb, var(--theme-accent-gold) 12%, var(--theme-surface)));
}
html[data-theme-preset="heatedRivalryCottage"] .topbar::after {
  background: linear-gradient(90deg, var(--theme-accent-blue), var(--theme-accent-gold) 46% 68%, var(--theme-accent-red));
}

html[data-theme-preset="heatedRivalryFaceoff"] body {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent-blue) 28%, #07111b) 0 49.55%, color-mix(in srgb, var(--theme-accent-red) 82%, white) 49.7% 50.3%, color-mix(in srgb, var(--theme-accent-gold) 24%, #080a0c) 50.45% 100%);
}
html[data-theme-preset="heatedRivalryFaceoff"] body::before {
  background:
    radial-gradient(circle at center, transparent 0 13%, color-mix(in srgb, var(--theme-accent-red) 84%, white) 13.2% 13.65%, transparent 13.9%),
    linear-gradient(90deg, transparent 49.82%, color-mix(in srgb, var(--theme-accent-white) 88%, transparent) 49.9% 50.1%, transparent 50.18%),
    repeating-linear-gradient(0deg, transparent 0 89px, color-mix(in srgb, var(--theme-accent-white) 9%, transparent) 90px 91px);
  opacity: 0.84;
}
html[data-theme-preset="heatedRivalryFaceoff"] .topbar {
  background: linear-gradient(100deg, color-mix(in srgb, var(--theme-accent-blue) 18%, var(--theme-surface)) 0 49%, color-mix(in srgb, var(--theme-accent-gold) 16%, var(--theme-surface)) 51% 100%);
}
html[data-theme-preset="heatedRivalryFaceoff"] .stats-grid article:nth-child(odd) { border-top: 3px solid var(--theme-accent-blue); }
html[data-theme-preset="heatedRivalryFaceoff"] .stats-grid article:nth-child(even) { border-top: 3px solid var(--theme-accent-gold); }

html[data-theme-preset="heatedRivalryOvertime"] body {
  background-image:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--theme-accent-blue) 24%, transparent) 8.2% 8.5%, transparent 8.7% 91%, color-mix(in srgb, var(--theme-accent-red) 24%, transparent) 91.2% 91.5%, transparent 91.7%),
    linear-gradient(180deg, #020509 0%, var(--theme-bg-deep) 58%, color-mix(in srgb, var(--theme-accent-blue) 16%, #020509) 100%);
}
html[data-theme-preset="heatedRivalryOvertime"] body::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 7.8%, color-mix(in srgb, var(--theme-accent-white) 12%, transparent) 8% 8.1%),
    linear-gradient(90deg, transparent 49.7%, var(--theme-accent-red) 49.85% 50.15%, transparent 50.3%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent-blue) 18%, transparent), transparent 24% 76%, color-mix(in srgb, var(--theme-accent-red) 16%, transparent));
  opacity: 0.86;
}
html[data-theme-preset="heatedRivalryOvertime"] .topbar,
html[data-theme-preset="heatedRivalryOvertime"] .reading-list,
html[data-theme-preset="heatedRivalryOvertime"] .modal-panel {
  border-color: color-mix(in srgb, var(--theme-accent-blue) 64%, var(--theme-accent-red));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent-white) 10%, transparent), var(--theme-shadow-strong);
}
html[data-theme-preset="heatedRivalryOvertime"] .primary-action {
  color: white;
  background: linear-gradient(90deg, var(--theme-accent-blue), var(--theme-accent-red));
}

.detail-modal, .cover-studio-modal, .theme-modal, .ai-tools-modal { max-height: min(92vh, 900px); overflow-y: auto; }
.detail-title, .cover-studio-title { text-wrap: balance; }
.modal-actions, .theme-actions { gap: 10px; flex-wrap: wrap; }
.button-row, .row-actions { gap: 8px; flex-wrap: wrap; }

@media (prefers-reduced-transparency: reduce) {
  .panel, .lock-panel, .stats-grid article, .list-panel, .home-tool-panel, .modal-panel, .form-panel, .profile-drawer, .fic-card, .reading-now-card, .theme-editor-panel, .theme-preview-panel {
    background: var(--theme-surface-elevated);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 680px) {
  .app-shell { width: min(100% - 24px, 1480px); padding-top: 18px; }
  .topbar { padding: 14px; border-radius: var(--theme-radius-medium); }
  .topbar, .panel-heading, .list-heading, .modal-header { align-items: flex-start; flex-wrap: wrap; }
  .topbar-actions { width: 100%; flex-wrap: wrap; }
  .topbar-actions > * { flex: 1 1 auto; }
  .list-heading > * { max-width: 100%; }
  .marker-quick-filters { margin-top: 4px; }
  .entry-marker-strip { gap: 4px; }
  .entry-marker-badge { white-space: normal; }
  .theme-slider-grid label { grid-template-columns: 1fr; }
  .theme-slider-grid label { grid-template-columns: 1fr; gap: 4px; }
  .theme-settings-group { padding: 12px; }
}

/* Authentication entry experience */
body.auth-loading .app-shell,
body.auth-locked .app-shell {
  color: var(--theme-text);
  font-family: var(--theme-font-body);
}

.lock-panel {
  border-color: color-mix(in srgb, var(--theme-border) 78%, var(--theme-accent-gold));
  border-radius: var(--theme-radius-medium);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-surface-elevated) 95%, transparent), color-mix(in srgb, var(--theme-accent-blue) 8%, var(--theme-surface)));
  box-shadow: var(--theme-shadow-strong), inset 0 1px 0 color-mix(in srgb, var(--theme-accent-white) 42%, transparent);
}

.lock-panel::before {
  background: linear-gradient(90deg, var(--theme-accent-gold), var(--theme-accent-blue) 58%, var(--theme-accent-red));
}

.auth-heading h1,
.auth-challenge-heading h2 {
  color: var(--theme-text);
  font-family: var(--theme-font-display);
}

.auth-heading .eyebrow,
.auth-challenge-heading .eyebrow {
  color: color-mix(in srgb, var(--theme-accent-red) 82%, var(--theme-text));
}

.auth-heading > p:last-child,
.auth-field > label,
.auth-code-field > label,
.auth-stay-signed-in,
.auth-account-action,
.auth-guest-entry,
.auth-challenge-modal .drawer-detail {
  color: var(--theme-text-muted);
}

.auth-heading,
.auth-guest-entry {
  border-color: var(--theme-border);
}

.auth-field input,
.auth-code-field input {
  color: var(--theme-text);
  border-color: var(--theme-border);
  border-radius: var(--theme-radius-small);
  background: color-mix(in srgb, var(--theme-surface-elevated) 92%, transparent);
}

.auth-field input:focus,
.auth-code-field input:focus {
  border-color: var(--theme-accent-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent-gold) 20%, transparent);
}

.lock-panel .text-link-button {
  color: color-mix(in srgb, var(--theme-accent-red) 78%, var(--theme-text));
}

.lock-panel .text-link-button:hover {
  color: var(--theme-text);
}

.lock-panel .auth-primary-action,
.auth-challenge-modal .primary-action {
  color: #10151c;
  border-color: color-mix(in srgb, var(--theme-accent-gold) 70%, var(--theme-text));
  background: linear-gradient(100deg, var(--theme-accent-gold), color-mix(in srgb, var(--theme-accent-gold) 70%, var(--theme-accent-white)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent-gold) 24%, transparent);
}

.lock-panel .auth-primary-action:hover,
.auth-challenge-modal .primary-action:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.auth-guest-entry .ghost-action,
.auth-challenge-modal .ghost-action {
  color: var(--theme-text);
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-surface-soft) 78%, transparent);
}

.auth-restoring {
  color: var(--theme-accent-white);
  text-shadow: 0 2px 18px rgba(0,0,0,0.48);
}

.auth-restoring .eyebrow {
  color: var(--theme-accent-gold);
}

.auth-restoring-mark {
  border-color: color-mix(in srgb, var(--theme-accent-white) 38%, transparent);
}

.auth-restoring-mark::before {
  background: linear-gradient(180deg, var(--theme-accent-blue), var(--theme-accent-red));
}

.auth-restoring-mark::after {
  background: var(--theme-accent-white);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-accent-gold) 30%, transparent);
}

.lock-screen::before {
  background: linear-gradient(180deg, transparent 4%, color-mix(in srgb, var(--theme-accent-blue) 40%, transparent) 20% 49%, var(--theme-accent-red) 50% 51%, color-mix(in srgb, var(--theme-accent-gold) 35%, transparent) 72%, transparent 96%);
}

.lock-screen::after {
  border-color: color-mix(in srgb, var(--theme-accent-white) 15%, transparent);
}

.auth-challenge-modal {
  border-top: 3px solid var(--theme-accent-gold);
}

@media (prefers-reduced-transparency: reduce) {
  .lock-panel {
    background: var(--theme-surface-elevated);
  }
}