/* Shared preference is resolved in theme.js before the page is painted. */
.appearance-settings{display:grid;gap:10px;margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.appearance-settings h3{margin:0;font-size:15px}
.appearance-settings .field{max-width:320px}
.appearance-settings p{margin:0;color:var(--muted);font-size:12px}
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #10151e;
    --surface: #192230;
    --surface-2: #222e3f;
    --ink: #edf2fa;
    --muted: #afbed2;
    --line: #40516a;
    --accent: #91b8ff;
    --accent-strong: #b4ceff;
    --accent-soft: #253b5d;
    --soft: var(--accent-soft);
    --danger: #ffacb4;
    --focus: #b4ceff;
  }
:root[data-theme="dark"] .brand-wordmark { filter: invert(1); }
:root[data-theme="dark"] dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] dialog::backdrop { background: #040912b3; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { accent-color: var(--accent); }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea, :root[data-theme="dark"] .admin-manual textarea, :root[data-theme="dark"] .card, :root[data-theme="dark"] .icon-button, :root[data-theme="dark"] .image-grid button, :root[data-theme="dark"] .gallery-thumbs button, :root[data-theme="dark"] .watch-card, :root[data-theme="dark"] .watch-muted-item {
    background: var(--surface); color: var(--ink); border-color: var(--line);
  }
:root[data-theme="dark"] .button:hover { background: var(--surface-2); border-color: var(--accent); }
:root[data-theme="dark"] .button.primary, :root[data-theme="dark"] .button.primary:hover, :root[data-theme="dark"] .agent-open-button, :root[data-theme="dark"] .agent-open-button:hover, :root[data-theme="dark"] .agent-send, :root[data-theme="dark"] .agent-send:hover, :root[data-theme="dark"] .agent-message[data-role="user"], :root[data-theme="dark"] .seat-flow b, :root[data-theme="dark"] .seat-step-title b, :root[data-theme="dark"] #seat-page .seat-query-form .button {
    background: #315fae; color: #fff;
  }
:root[data-theme="dark"] .agent-send.is-running { background: #a3324c; }
:root[data-theme="dark"] .page-nav, :root[data-theme="dark"] .bottom-nav {
    border-color: var(--line);
    box-shadow: inset 0 1px 0 #ffffff14, 0 8px 26px #0006;
  }
:root[data-theme="dark"] .agent-dialog { border-color: var(--line); }
:root[data-theme="dark"] .agent-concerts button:disabled { color: var(--muted); }
:root[data-theme="dark"] .calendar-promo-info button, :root[data-theme="dark"] .chosen, :root[data-theme="dark"] .card-meta i { color: var(--muted); }
:root[data-theme="dark"] .calendar-promo-note { box-shadow: 0 6px 22px #0006; }
:root[data-theme="dark"] .calendar-promo { background: var(--surface); }
:root[data-theme="dark"] .db-item { background: color-mix(in oklch, var(--db) 12%, var(--surface)); }
:root[data-theme="dark"] .db-item::after { background: repeating-linear-gradient(135deg, transparent 0 6px, #ffffff0a 6px 9px); }
:root[data-theme="dark"] .overview-workspace .metric, :root[data-theme="dark"] .watch-metric { background: color-mix(in oklch, var(--metric) 10%, var(--surface)); }
:root[data-theme="dark"] .overview-workspace .segmented button.active, :root[data-theme="dark"] .seat-venue-tabs button.active {
    background: color-mix(in oklch, var(--tab) 25%, var(--surface)); color: var(--ink);
  }
:root[data-theme="dark"] .overview-workspace .metric::after, :root[data-theme="dark"] .watch-metric::after {
    background: repeating-linear-gradient(135deg, transparent 0 7px, #ffffff0a 7px 10px), color-mix(in oklch, var(--metric) 16%, var(--surface));
  }
:root[data-theme="dark"] .venue-group-head { background: color-mix(in oklch, var(--venue) 10%, var(--surface)); }
:root[data-theme="dark"] .watch-card::after, :root[data-theme="dark"] .discovery-panel .discovery-row::after {
    background: repeating-linear-gradient(135deg, transparent 0 7px, #ffffff0a 7px 10px), color-mix(in oklch, var(--venue) 16%, var(--surface));
  }
:root[data-theme="dark"] .discovery-panel .discovery-row, :root[data-theme="dark"] .discovery-panel .discovery-row.has-lifecycle { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .session-segment.empty { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .session-segment.empty .session-callout { color: var(--muted); }
:root[data-theme="dark"] .session-segment.reserved .session-callout { color: #75dfd2; }
:root[data-theme="dark"] .session-segment.seated .session-callout { color: #ff9bb7; }
:root[data-theme="dark"] .chart-tooltip { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .watch-live-count, :root[data-theme="dark"] .watch-live-status, :root[data-theme="dark"] .eyebrow { color: #75dfd2; }
:root[data-theme="dark"] .watch-live-count { background: #1b3e3d; }
:root[data-theme="dark"] .watch-action { color: #10151e; }
:root[data-theme="dark"] .ticket-quantity { color: var(--ink); }
:root[data-theme="dark"] .seat-map-display .seat-map-viewport, :root[data-theme="dark"] #ticket-seat-map-panel .seat-map-viewport, :root[data-theme="dark"] .seat-map-viewport { background: var(--surface-2); }
:root[data-theme="dark"] .seat-map-controls { border-color: var(--line); background: #192230f2; box-shadow: 0 8px 24px #0006; }
:root[data-theme="dark"] .seat-map-zoom > span { color: var(--muted); }
:root[data-theme="dark"] .seat-map-zoom output { color: #75dfd2; }
:root[data-theme="dark"] .seat-map-navigator { border-color: var(--line); }
:root[data-theme="dark"] .seat-venue-tabs button[data-seat-venue-tab="chengdu"]:disabled { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .seat-map-selection[data-state="success"] { background: #1b3e3d; color: #75dfd2; border-color: #3a776e; }
:root[data-theme="dark"] .error, :root[data-theme="dark"] .seat-map-selection[data-state="error"], :root[data-theme="dark"] .seat-tooltip .seat-delete-button, :root[data-theme="dark"] .button.danger, :root[data-theme="dark"] .exchange-delete, :root[data-theme="dark"] .exchange-delete:hover { background: #442633; color: var(--danger); border-color: #975065; }
:root[data-theme="dark"] .art { background: linear-gradient(135deg, #214944, #23383d 53%, #30324f); }
:root[data-theme="dark"] .art.pink { background: linear-gradient(135deg, #513044, #392b40 56%, #253c4e); }
:root[data-theme="dark"] .art.blue { background: linear-gradient(135deg, #293f65, #26364e 56%, #234944); }
:root[data-theme="dark"] .art::before, :root[data-theme="dark"] .art::after { border-color: #ffffff12; }
:root[data-theme="dark"] .art span:not(.quantity) { background: #192230c9; color: #75dfd2; border-color: var(--line); }
:root[data-theme="dark"] .art.pink span:not(.quantity) { color: #ffacd0; }
:root[data-theme="dark"] .art.blue span:not(.quantity) { color: var(--accent); }
:root[data-theme="dark"] .art small, :root[data-theme="dark"] .image-grid span { background: #192230eb; color: var(--muted); }
:root[data-theme="dark"] .quantity, :root[data-theme="dark"] .card .art .quantity { background: #1b3e3df5; color: #75dfd2; }
:root[data-theme="dark"] .event-banner, :root[data-theme="dark"] .detail-lines a { color: var(--accent); }
:root[data-theme="dark"] .message { color: var(--danger); }
:root[data-theme="dark"] .want-button[aria-pressed="true"] { background: #482d40; color: #ffacd0; border-color: #a35b80; }
:root[data-theme="dark"] .exchange-row.is-accepted { background: #1c3c33; border-color: #39755d; }
:root[data-theme="dark"] .exchange-row.is-deleted { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .exchange-deleted-overlay { background: #222e3fe8; color: var(--muted); }