.theme-switcher { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.theme-switcher .icon-button { width:30px; height:30px; }
.theme-switcher [aria-pressed="true"] { color:var(--accent-strong); background:var(--accent-wash); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
/* Keep the editor readable even while the author experiments with low-contrast colors. */
.theme-editor { --text:#e4e1d9; --muted:#a0acb5; --faint:#718391; --surface:#0d1b29; --surface-soft:#0b1723; --line:#2c4050; --accent:#cba76b; --accent-wash:#cba76b18; color-scheme:dark; position:fixed; z-index:110; top:82px; right:24px; width:min(410px,calc(100% - 28px)); max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; padding:20px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface); box-shadow:0 20px 70px #0006; }
.theme-editor header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.theme-eyebrow { font-size:9px; letter-spacing:.18em; color:var(--accent); }
.theme-editor h2 { margin:5px 0 0; font-size:20px; }
.theme-editor-intro { margin:10px 0 16px; color:var(--muted); font-size:12px; line-height:1.8; }
.theme-section-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:11px; color:var(--muted); }
.theme-section-label strong { color:var(--text); font-size:12px; font-weight:500; }
.theme-record-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:15px; }
.theme-record,.theme-record-empty { min-width:0; min-height:62px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); text-align:center; font-size:10px; }
.theme-record-swatches { display:flex; height:18px; overflow:hidden; border-radius:4px; margin-bottom:7px; }
.theme-record-swatches i { flex:1; }
.theme-record-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.theme-name-row { display:flex; align-items:center; gap:8px; margin:0 0 16px; }
.theme-name-row label { flex-shrink:0; font-size:11px; color:var(--muted); }
.theme-editor input[data-theme-name] { min-width:0; flex:1; width:0; height:32px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:var(--surface-soft); font-size:12px; }
.theme-name-row button { flex-shrink:0; }
.theme-record[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-wash); color:var(--accent); }
.theme-record-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-style:dashed; color:var(--faint); }
.theme-record-empty > span { font-size:16px; line-height:18px; }
.theme-record-empty small { font-size:9px; }
.theme-starts { display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.theme-starts > span { flex:1; font-size:11px; color:var(--muted); }
.theme-starts button { display:flex; align-items:center; gap:5px; background:transparent; border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:11px; }
.theme-starts .icon { width:13px; height:13px; }
.theme-starts button:hover { border-color:var(--accent); }
.theme-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; }
.theme-color-field { display:flex; align-items:center; gap:8px; min-width:0; padding:7px; text-align:left; background:transparent; border:1px solid transparent; border-radius:7px; font-size:11px; }
.theme-color-field small { display:block; margin-top:3px; color:var(--muted); font:10px/1.1 ui-monospace,Consolas,monospace; }
.theme-field-swatch { width:26px; height:28px; flex-shrink:0; border:1px solid #ffffff26; border-radius:5px; }
.theme-color-field[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-wash); }
.theme-color-field:hover,.theme-record:hover { border-color:var(--accent); }
.theme-picker { margin:14px 0 16px; padding:13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.theme-sv { position:relative; height:134px; border-radius:6px; cursor:crosshair; touch-action:none; user-select:none; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--picker-hue) 100% 50%); }
.theme-sv-thumb { position:absolute; width:13px; height:13px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px #0009,0 1px 4px #0009; pointer-events:none; }
.theme-hue-label { display:flex; gap:10px; align-items:center; margin:14px 0; font-size:10px; color:var(--muted); }
.theme-editor input[data-theme-hue] { appearance:none; -webkit-appearance:none; flex:1; min-width:0; width:auto; height:12px; padding:0; border:0; border-radius:8px; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor:pointer; }
.theme-editor input[data-theme-hue]::-webkit-slider-thumb { appearance:none; width:16px; height:16px; border:2px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #0008; }
.theme-editor input[data-theme-hue]::-moz-range-thumb { width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #0008; }
.theme-hex-row { display:flex; align-items:center; gap:9px; }
.theme-picked-swatch { flex:0 0 30px; height:30px; border-radius:6px; border:1px solid #ffffff26; }
.theme-hex-row label { flex:1; color:var(--muted); font-size:10px; }
.theme-editor input[data-theme-hex] { width:100px; min-width:0; height:30px; padding:5px 8px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:6px; font:12px/1.4 ui-monospace,Consolas,monospace; }
.theme-editor input[aria-invalid="true"] { border-color:#e49b91; }
.theme-color-hint { margin:9px 0 0; font-size:9px; color:var(--muted); }
.theme-editor .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.theme-editor :is(button,input,[tabindex]):focus-visible { outline:2px solid #e1bc7d; outline-offset:3px; }
.theme-editor footer { border-top:1px solid var(--line); padding-top:16px; }
.theme-editor-actions { display:flex; justify-content:space-between; gap:8px; }
.theme-editor .button { font-size:11px; padding:7px 11px; }
.theme-editor .theme-save { background:#cba76b; border-color:#cba76b; color:#121c24; font-weight:600; }
.theme-editor .theme-save:hover:not(:disabled) { background:#e1bc7d; }
.theme-editor [data-theme-status] { min-height:19px; margin:10px 0 7px; font-size:11px; color:var(--accent); line-height:1.7; }
.theme-editor footer small { display:block; font-size:10px; color:var(--muted); line-height:1.7; }
.custom-theme-entry { margin-top:12px; }
:root[data-theme-mode="custom"] .book-stage { background:radial-gradient(ellipse at 50% 74%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%); }
:root[data-theme-mode="custom"][data-glass] body { background:radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 48%),var(--bg); }
@media(max-width:1200px) { .top-actions .preview-badge { display:none; } }
@media(max-width:700px) {
  .theme-editor { top:72px; right:14px; max-height:calc(100dvh - 86px); padding:18px; }
  .theme-switcher { padding:2px; gap:0; }
  .theme-switcher .icon-button { width:28px; height:30px; }
  .topbar { flex-wrap:wrap; height:auto; min-height:64px; padding-block:10px; }
  .top-actions { flex-wrap:wrap; justify-content:flex-end; }
  .library-topbar .brand-word { display:none; }
  .library-topbar .top-actions { grid-column:1 / -1; justify-self:end; }
}