/* Style branch: presentation only. Rule, theme and panel-layout APIs own behavior. */
:root {
  --desktop-accent: #a8c3e0;
  --desktop-accent-soft: #344355;
  --desktop-copper: #b5c2d2;
  --desktop-nav: #181b20;
  --desktop-nav-text: #eceef2;
  --desktop-nav-muted: #bec4cd;
  --desktop-nav-active: #303f50;
  --desktop-nav-soft: #262f3b;
  --desktop-nav-border: #536176;
  --desktop-heading-font: Georgia, 'Times New Roman', serif;
  --desktop-body-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

:root[data-theme='dark'] {
  --bg: #1d2025;
  --panel: #292d33;
  --panel-strong: #343941;
  --panel-soft: #25282e;
  --line: #4d5663;
  --line-strong: #7d8b9e;
  --text: #eceef2;
  --muted: #bec4cd;
  --accent: #a8c3e0;
  --accent-strong: #d0e0f1;
  --desktop-accent-soft: #344355;
  --desktop-copper: #b5c2d2;
  --user-bubble: #303e50;
  --assistant-bubble: #2b3039;
  --desktop-nav: #181b20;
  --desktop-nav-text: #eceef2;
  --desktop-nav-muted: #bec4cd;
  --desktop-nav-active: #303f50;
  --desktop-nav-soft: #262f3b;
  --desktop-nav-border: #536176;
  --desktop-danger: #efafa1;
  --desktop-warning: #e4bd7b;
  --desktop-success: #9bc6ad;
  --desktop-accent: #a8c3e0;
  --ink: #eceef2;
  --paper: #1d2025;
  --cream: #343941;
  --white: #292d33;
  --red: #a8c3e0;
  --red-dark: #d0e0f1;
  --gold: #b5c2d2;
  --v2-teal: #a8c3e0;
  --v2-teal-soft: #344355;
  --v2-copper: #b5c2d2;
  --v2-nav: #181b20;
  --codex-page: #1d2025;
  --codex-surface: #292d33;
  --codex-surface-raised: #343941;
  --codex-surface-soft: #25282e;
  --codex-text: #eceef2;
  --codex-muted: #bec4cd;
  --codex-accent: #a8c3e0;
  --codex-on-accent: #1d2025;
  --codex-border: #4d5663;
  --codex-border-strong: #7d8b9e;
  --codex-focus: #a8c3e0;
  --codex-danger: #efafa1;
  --codex-warning: #e4bd7b;
  --codex-success: #9bc6ad;
  --a11y-page: #1d2025;
  --a11y-surface: #292d33;
  --a11y-surface-strong: #343941;
  --a11y-surface-soft: #25282e;
  --a11y-text: #eceef2;
  --a11y-muted: #bec4cd;
  --a11y-accent: #a8c3e0;
  --a11y-on-accent: #1d2025;
  --a11y-danger: #efafa1;
  --a11y-warning: #e4bd7b;
  --a11y-success: #9bc6ad;
  --shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

:root[data-theme='white'] {
  --bg: #c9cec5;
  --panel: #d9ddd3;
  --panel-strong: #c7cec2;
  --panel-soft: #d1d7cc;
  --line: #a7b2a3;
  --line-strong: #6c7d70;
  --text: #28332c;
  --muted: #4a5a4d;
  --accent: #3e5a45;
  --accent-strong: #354d3b;
  --desktop-accent-soft: #c4d3bc;
  --desktop-copper: #805b38;
  --user-bubble: #c1d0b9;
  --assistant-bubble: #d0d6cb;
  --desktop-nav: #182024;
  --desktop-nav-text: #eee9df;
  --desktop-nav-muted: #bac4c3;
  --desktop-nav-active: #36463a;
  --desktop-nav-soft: #26352c;
  --desktop-nav-border: #536158;
  --desktop-danger: #793a37;
  --desktop-warning: #6c4c1e;
  --desktop-success: #385c43;
  --desktop-accent: #3e5a45;
  --ink: #28332c;
  --paper: #c9cec5;
  --cream: #c7cec2;
  --white: #d9ddd3;
  --red: #3e5a45;
  --red-dark: #354d3b;
  --gold: #805b38;
  --v2-teal: #3e5a45;
  --v2-teal-soft: #c4d3bc;
  --v2-copper: #805b38;
  --v2-nav: #182024;
  --codex-page: #c9cec5;
  --codex-surface: #d9ddd3;
  --codex-surface-raised: #c7cec2;
  --codex-surface-soft: #d1d7cc;
  --codex-text: #28332c;
  --codex-muted: #4a5a4d;
  --codex-accent: #3e5a45;
  --codex-on-accent: #f0ede4;
  --codex-border: #a7b2a3;
  --codex-border-strong: #6c7d70;
  --codex-focus: #3e5a45;
  --codex-danger: #793a37;
  --codex-warning: #6c4c1e;
  --codex-success: #385c43;
  --a11y-page: #c9cec5;
  --a11y-surface: #d9ddd3;
  --a11y-surface-strong: #c7cec2;
  --a11y-surface-soft: #d1d7cc;
  --a11y-text: #28332c;
  --a11y-muted: #4a5a4d;
  --a11y-accent: #3e5a45;
  --a11y-on-accent: #f0ede4;
  --a11y-danger: #793a37;
  --a11y-warning: #6c4c1e;
  --a11y-success: #385c43;
  --shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

:root[data-theme='dark'][data-design='wood'] {
  --bg: #211914;
  --panel: #33271f;
  --panel-strong: #423227;
  --panel-soft: #2b211b;
  --line: #6e5540;
  --line-strong: #a88a69;
  --text: #f2e5ca;
  --muted: #c7b99f;
  --accent: #ebbd7d;
  --accent-strong: #f5d8a5;
  --desktop-accent-soft: #4a3826;
  --desktop-copper: #d7a56a;
  --user-bubble: #493a28;
  --assistant-bubble: #392c23;
  --desktop-nav: #1d1510;
  --desktop-nav-text: #f2e5ca;
  --desktop-nav-muted: #c7b99f;
  --desktop-nav-active: #533c26;
  --desktop-nav-soft: #33251c;
  --desktop-nav-border: #806148;
  --desktop-danger: #f0afa0;
  --desktop-warning: #e9c286;
  --desktop-success: #adc28d;
  --desktop-accent: #ebbd7d;
  --ink: #f2e5ca;
  --paper: #211914;
  --cream: #423227;
  --white: #33271f;
  --red: #ebbd7d;
  --red-dark: #f5d8a5;
  --gold: #d7a56a;
  --v2-teal: #ebbd7d;
  --v2-teal-soft: #4a3826;
  --v2-copper: #d7a56a;
  --v2-nav: #1d1510;
  --codex-page: #211914;
  --codex-surface: #33271f;
  --codex-surface-raised: #423227;
  --codex-surface-soft: #2b211b;
  --codex-text: #f2e5ca;
  --codex-muted: #c7b99f;
  --codex-accent: #ebbd7d;
  --codex-on-accent: #211914;
  --codex-border: #6e5540;
  --codex-border-strong: #a88a69;
  --codex-focus: #ebbd7d;
  --codex-danger: #f0afa0;
  --codex-warning: #e9c286;
  --codex-success: #adc28d;
  --a11y-page: #211914;
  --a11y-surface: #33271f;
  --a11y-surface-strong: #423227;
  --a11y-surface-soft: #2b211b;
  --a11y-text: #f2e5ca;
  --a11y-muted: #c7b99f;
  --a11y-accent: #ebbd7d;
  --a11y-on-accent: #211914;
  --a11y-danger: #f0afa0;
  --a11y-warning: #e9c286;
  --a11y-success: #adc28d;
  --shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

:root[data-theme='dark'][data-design='halloween'] {
  --bg: #1c1b20;
  --panel: #29272b;
  --panel-strong: #363238;
  --panel-soft: #242328;
  --line: #6c5744;
  --line-strong: #ad8b67;
  --text: #f7ead7;
  --muted: #cbbfaa;
  --accent: #edb876;
  --accent-strong: #ffdaa7;
  --desktop-accent-soft: #49372a;
  --desktop-copper: #d5a163;
  --user-bubble: #3e342d;
  --assistant-bubble: #2d2b33;
  --desktop-nav: #19171c;
  --desktop-nav-text: #f7ead7;
  --desktop-nav-muted: #cbbfaa;
  --desktop-nav-active: #493525;
  --desktop-nav-soft: #302a29;
  --desktop-nav-border: #786047;
  --desktop-danger: #ffafa6;
  --desktop-warning: #ffd18a;
  --desktop-success: #bcd693;
  --desktop-accent: #edb876;
  --ink: #f7ead7;
  --paper: #1c1b20;
  --cream: #363238;
  --white: #29272b;
  --red: #edb876;
  --red-dark: #ffdaa7;
  --gold: #d5a163;
  --v2-teal: #edb876;
  --v2-teal-soft: #49372a;
  --v2-copper: #d5a163;
  --v2-nav: #19171c;
  --codex-page: #1c1b20;
  --codex-surface: #29272b;
  --codex-surface-raised: #363238;
  --codex-surface-soft: #242328;
  --codex-text: #f7ead7;
  --codex-muted: #cbbfaa;
  --codex-accent: #edb876;
  --codex-on-accent: #211b17;
  --codex-border: #6c5744;
  --codex-border-strong: #ad8b67;
  --codex-focus: #edb876;
  --codex-danger: #ffafa6;
  --codex-warning: #ffd18a;
  --codex-success: #bcd693;
  --a11y-page: #1c1b20;
  --a11y-surface: #29272b;
  --a11y-surface-strong: #363238;
  --a11y-surface-soft: #242328;
  --a11y-text: #f7ead7;
  --a11y-muted: #cbbfaa;
  --a11y-accent: #edb876;
  --a11y-on-accent: #211b17;
  --a11y-danger: #ffafa6;
  --a11y-warning: #ffd18a;
  --a11y-success: #bcd693;
  --shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

:root[data-theme] body {
  font-family: var(--desktop-body-font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

:root[data-theme] .theme-switcher-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
:root[data-theme] .theme-switcher-actions .ghost-button { min-width: 0; min-height: 38px; padding: 8px; white-space: normal; line-height: 1.35; border-radius: 7px; }
:root[data-theme] .theme-switcher-actions [data-theme-choice='dark'] { background: #292d33; color: #eceef2; }
:root[data-theme] .theme-switcher-actions [data-theme-choice='white'] { background: #d9ddd3; color: #28332c; }
:root[data-theme] .theme-switcher-actions [data-theme-choice='wood'] { background: repeating-linear-gradient(3deg, #483321 0 5px, #45301f 6px 8px, #503820 9px 16px); color: #f2e5ca; }
:root[data-theme] .theme-switcher-actions [data-theme-choice='halloween'] { background: linear-gradient(125deg, #493525, #242328); color: #ffdaa7; }
:root[data-theme] .theme-switcher-actions [aria-pressed='true'] { border-color: var(--desktop-accent); box-shadow: inset 0 -3px var(--desktop-accent); }

/* Do not set positions, widths or transforms on movable/floating game panels. */
:root[data-theme] .sidebar,
:root[data-theme] .remote-sidebar,
:root[data-theme] .dashboard-sidebar,
:root[data-theme] .rail {
  background: var(--desktop-nav);
  color: var(--desktop-nav-text);
  border-color: var(--desktop-nav-border);
  box-shadow: none;
}

:root[data-theme] :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail) :is(.brand p, .file-meta, .upload-hint, .nav-group-title) {
  color: var(--desktop-nav-muted);
}

:root[data-theme] :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail) .nav-link,
:root[data-theme] .rail nav button {
  color: var(--desktop-nav-text);
  border-radius: 7px;
  line-height: 1.4;
}

:root[data-theme] :is(.burger-menu-panel, .theme-switcher) { background: var(--panel); color: var(--text); border-color: var(--line); }
:root[data-theme] .theme-switcher .file-meta,
:root[data-theme] .burger-menu-panel .file-meta { color: var(--muted); }
:root[data-theme] .burger-menu-panel .nav-link { background: var(--panel-soft); color: var(--text); border-color: var(--line); }
:root[data-theme] .burger-menu-panel .nav-link:hover,
:root[data-theme] .burger-menu-panel .nav-link.active { background: var(--desktop-accent-soft); color: var(--text); border-color: var(--desktop-accent); }

:root[data-theme] :is(.sidebar, .remote-sidebar, .dashboard-sidebar) .upload-panel,
:root[data-theme] .workspace-panel,
:root[data-theme] .map-floating-panel {
  border-radius: 10px;
  box-shadow: none;
}

:root[data-theme] :is(.upload-panel, .dashboard-card, .dnd-sheet-panel, .dnd-sheet-box, .dnd-ability-card, .dnd-spell-card, .dnd-text-panel, .dnd-details-panel, .sheet-notes-panel) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: none;
}

:root[data-theme] :is(.chat-header, .dashboard-header, .sheet-notes-header) {
  border-color: var(--line);
}

:root[data-theme] :is(.chat-header, .dashboard-header) { flex-wrap: wrap; gap: 12px; }
:root[data-theme] :is(.chat-header, .dashboard-header) > div { min-width: 0; }
:root[data-theme] :is(.chat-header, .dashboard-header) h2 { font-size: 1.65rem; line-height: 1.25; }

:root[data-theme] :is(.chat-header, .dashboard-header, .brand, .dnd-character-name-box) :is(h1, h2, h3) {
  font-family: var(--desktop-heading-font);
  letter-spacing: -.02em;
}

:root[data-theme] :is(.file-meta, .upload-hint, .field-help, .field-note, .dnd-empty-text, .dnd-spell-card p, .dnd-sheet-panel p) {
  line-height: 1.6;
}

:root[data-theme] :is(input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']), select, textarea) {
  border-radius: 7px;
  border-color: var(--line-strong);
  font-family: var(--desktop-body-font);
}

/* Reduce light-mode glare in fields as well as the surrounding cards. */
:root[data-theme='white'] body :is(input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']), select, textarea, .sheet-notes-editor, .sheet-sidebar-controls .nav-link) {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
}

:root[data-theme] .sheet-quickbar-button {
  background: var(--desktop-accent-soft);
  color: var(--text);
  border-color: var(--line-strong);
}

:root[data-theme] :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--desktop-accent);
  outline-offset: 3px;
}

:root[data-theme] :is(.upload-button, .ghost-button, .dnd-spell-details-button, .dnd-sheet-view-toggle, .button) {
  border-radius: 7px;
  font-family: var(--desktop-body-font);
  font-weight: 600;
  line-height: 1.35;
  transition: background-color 120ms ease, border-color 120ms ease;
}

:root[data-theme] :is(.upload-button, .button):hover:not(:disabled) {
  transform: none;
}

:root[data-theme] .dnd-sheet {
  gap: 16px;
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

:root[data-theme] .dnd-source-mode-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.dnd-source-mode-banner > div { display: grid; gap: 3px; flex: 1 1 340px; }
.dnd-source-mode-banner strong { font-size: .78rem; }
.dnd-source-mode-banner span { font-size: .8rem; color: var(--muted); line-height: 1.5; }

:root[data-theme] .dnd-sheet-header {
  gap: 14px;
  align-items: stretch;
}

:root[data-theme] .dnd-character-name-box {
  border-top: 3px solid var(--desktop-copper);
  align-content: start;
  padding-right: 14px;
  padding-top: 40px;
}

:root[data-theme][data-design] .dnd-character-name-box { border-top: 3px solid var(--desktop-copper) !important; }

:root[data-theme] .dnd-character-name-box > strong {
  font-family: var(--desktop-heading-font);
  font-size: 1.6rem;
  line-height: 1.15;
}

:root[data-theme] .dnd-dashboard {
  gap: 9px;
}

:root[data-theme] .dnd-sheet .ghost-button,
:root[data-theme] .dnd-sheet .upload-button,
:root[data-theme] .dnd-rest-actions .upload-button {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

:root[data-theme] .dnd-sheet .ghost-button:hover,
:root[data-theme] .dnd-sheet .upload-button:hover,
:root[data-theme] .dnd-rest-actions .upload-button:hover {
  color: var(--desktop-accent);
  border-color: var(--desktop-accent);
  background: var(--desktop-accent-soft);
}

:root[data-theme] .dnd-dashboard .dnd-sheet-box {
  background: var(--panel-soft);
}

:root[data-theme] :is(.dnd-sheet-box, .dnd-ability-card) > span {
  color: var(--muted);
  letter-spacing: .04em;
}

:root[data-theme] .dnd-spell-card {
  padding: 14px 16px;
}

:root[data-theme] .dnd-spell-card h4 {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

:root[data-theme] .dnd-spell-badges span {
  color: var(--desktop-accent);
  background: var(--desktop-accent-soft);
  border-radius: 4px;
}

.dnd-view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
}

.sheet-heading-actions, .sheet-view-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sheet-heading-actions { margin-left: auto; }
.sheet-view-controls-host { min-width: 0; }
.sheet-view-toolbar:has(.sheet-view-controls-host:empty) { display: none; }
.sheet-view-toolbar { margin-bottom: 12px; }

:root[data-theme] .dnd-character-name-box .dnd-character-vitals { margin: 2px 0 0; font-size: 1rem; font-weight: 650; color: var(--desktop-accent); }
.dnd-character-vitals[hidden] { display: none; }

:root[data-theme] .dnd-sheet-view-toggle {
  flex: 0 1 auto;
  width: auto;
  min-height: 32px;
  padding: 6px 10px;
  font-size: .82rem;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
}

.dnd-sheet-tabbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

:root[data-theme] .dnd-sheet-tab {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 600 .88rem/1.35 var(--desktop-body-font);
  color: var(--muted);
  background: transparent;
  white-space: normal;
}

:root[data-theme] .dnd-sheet-tab[aria-selected='true'] {
  color: var(--text);
  background: var(--desktop-accent-soft);
  border-color: var(--desktop-accent);
  box-shadow: inset 0 -2px var(--desktop-accent);
}

.dnd-sheet-tab-panels,
.dnd-sheet-tab-panel {
  min-width: 0;
}

.dnd-sheet-tab-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.dnd-sheet-tabbar[hidden],
.dnd-sheet-tab-panels[hidden],
.dnd-sheet-tab-panel[hidden] {
  display: none !important;
}

/* Desktop is the current scope. Existing narrow-screen flow stays intact. */
@media (min-width: 1000px) {
  :root { font-size: 16px; }

  :root[data-theme] :is(.upload-hint, .field-help, .field-note, .dnd-empty-text, .dashboard-card-meta, .ruletext) {
    font-size: .9rem;
  }

  :root[data-theme] :is(.file-meta, .eyebrow, .dnd-sheet-box > span, .dnd-ability-card > span) {
    font-size: .76rem;
  }

  :root[data-theme] :is(.sidebar, .remote-sidebar, .dashboard-sidebar) {
    padding: 20px;
  }

  :root[data-theme] :is(.sidebar, .dashboard-sidebar) .top-nav:not(.burger-nav) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-shell {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    gap: 26px;
    max-width: 1920px;
    margin-inline: auto;
  }

  .dashboard-main { gap: 24px; }
  .dashboard-card-grid { gap: 14px; }
  .dashboard-card { padding: 20px; }
  .dashboard-card h3 { font-size: 1.18rem; }

  .sheet-view-shell {
    width: min(1820px, calc(100% - 40px));
    padding-top: 24px;
  }

  .sheet-view-layout {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
    gap: 22px;
  }

  .sheet-view-sidebar {
    gap: 16px;
  }

  :root[data-theme] .dnd-sheet-header .dnd-sheet-box {
    align-content: start;
    gap: 6px;
  }

  :root[data-theme] .dnd-dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-theme] .dnd-dashboard .dnd-sheet-box {
    align-content: start;
    gap: 5px;
    min-height: 66px;
  }

  :root[data-theme] .dnd-dashboard .dnd-current-hp-editor,
  :root[data-theme] .dnd-header-grid .dnd-current-hp-editor {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
  }

  :is(.dnd-dashboard, .dnd-header-grid) .dnd-current-hp-editor > input { grid-column: 1; grid-row: 1; }
  :is(.dnd-dashboard, .dnd-header-grid) .dnd-current-hp-editor > span { grid-column: 1 / -1; grid-row: 2; }
  :is(.dnd-dashboard, .dnd-header-grid) .dnd-current-hp-editor > button { grid-column: 2; grid-row: 1; padding: 5px 7px; font-size: .72rem; }

  :root[data-theme] .dnd-hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  :root[data-theme] .dnd-hp-grid > .dnd-sheet-box { align-content: start; gap: 6px; }
  :root[data-theme] .dnd-ability-check-line strong { font-size: 1.12rem; }
  :root[data-theme] .dnd-ability-check-line span { font-size: .84rem; line-height: 1.4; }

  .sheet-view-body #sheetViewRoot .dnd-sheet-body {
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    gap: 16px;
  }

  :root[data-theme] .dnd-sheet-lower-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The creator retains its steps and validation; only the workspace typography changes. */
  :root[data-theme] .codex-editor-page { font-size: 1rem; }
  :root[data-theme] .codex-editor-page .v2-shell { grid-template-columns: 240px minmax(0, 1fr); }
  :root[data-theme] .codex-editor-page .rail .brand-copy { min-width: 0; }
  :root[data-theme] .codex-editor-page .rail .brand-copy strong { font: 700 1.15rem/1.25 var(--desktop-heading-font); overflow-wrap: anywhere; }
  :root[data-theme] .codex-editor-page .rail .brand-copy small { color: var(--desktop-nav-muted); }
  :root[data-theme] .codex-editor-page .rail .nav-group { background: transparent !important; border-color: var(--desktop-nav-border); box-shadow: none; }
  :root[data-theme] .codex-editor-page .rail .nav-group-title { color: var(--desktop-nav-muted); }
  :root[data-theme] .codex-editor-page .rail nav :is(button, a.dashboard-nav-link) { color: var(--desktop-nav-text) !important; background: transparent !important; border-color: var(--desktop-nav-border); }
  :root[data-theme] .codex-editor-page .rail nav button.active { color: var(--desktop-nav-text) !important; background: var(--desktop-nav-active) !important; border-color: var(--desktop-accent); box-shadow: inset 3px 0 var(--desktop-accent); }
  :root[data-theme] .codex-editor-page .rail :is(.mode-toggle, .lang) { color: var(--desktop-nav-text); background: var(--desktop-nav-soft); border-color: var(--desktop-nav-border); }
  :root[data-theme] .codex-editor-page .rail .mode-toggle small { color: var(--desktop-nav-muted); }
  :root[data-theme] .codex-editor-page .topbar h1 { font-size: 1.75rem; line-height: 1.25; }
  :root[data-theme] .codex-editor-page .nav-label { font-size: .88rem; }
  :root[data-theme] .codex-editor-page .nav-group-title { font-size: .72rem; }
  :root[data-theme] .codex-editor-page .page { max-width: 1600px; padding: 28px 30px 64px; }
  :root[data-theme] .codex-editor-page .topbar { background: var(--panel); border-color: var(--line); }
  :root[data-theme] .codex-editor-page :is(.panel, .wizard-main, .spell-list, .spell-detail, .glossary-card, .quick-card) {
    background: var(--panel); color: var(--text); border-color: var(--line); border-radius: 10px; box-shadow: none;
  }
  :root[data-theme] .codex-editor-page :is(.form-grid label, .select-stack label, .decision-controls label, .wizard-main p, .spell-detail p) {
    font-size: .92rem; line-height: 1.6;
  }
  :root[data-theme] .codex-editor-page :is(.input, select, textarea) { font-size: .95rem; color: var(--text); }
  :root[data-theme] .codex-editor-page :is(h1, h2) { font-family: var(--desktop-heading-font); }
  :root[data-theme] .codex-editor-page .button { background: var(--desktop-accent); color: var(--bg); }
  :root[data-theme='white'] .codex-editor-page .button { color: #fffefa; }
  :root[data-theme] .codex-editor-page .button.light { background: var(--panel-soft); color: var(--text); border-color: var(--line-strong); }
  :root[data-theme] .codex-editor-page .save-state { color: var(--muted); font-size: .8rem; }
  :root[data-theme] .codex-editor-page .section-head p { font-size: .9rem; }
}

@media (min-width: 1600px) {
  .sheet-view-body #sheetViewRoot .dnd-sheet-body {
    grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);
  }
}

/* Scenic skins only paint existing boxes. No positions, sizing, transforms or hit layers. */
:root[data-design='wood'] {
  --desktop-scene: url('/static/design-assets/tavern-room-v2.webp');
  --desktop-grain: url('/static/design-assets/walnut-grain-v1.webp');
  --desktop-scene-shade: rgba(19, 12, 7, .16);
  --desktop-frame-tint: rgba(54, 29, 12, .12);
  --desktop-frame-light: rgba(236, 189, 120, .55);
}

:root[data-design='halloween'] {
  --desktop-scene: url('/static/design-assets/halloween-hall-v1.webp');
  --desktop-grain: url('/static/design-assets/walnut-grain-v1.webp');
  --desktop-scene-shade: rgba(13, 15, 22, .16);
  --desktop-frame-tint: rgba(9, 12, 22, .56);
  --desktop-frame-light: rgba(213, 161, 99, .6);
}

:root:is([data-design='wood'], [data-design='halloween']) body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--desktop-scene-shade), var(--desktop-scene-shade)), var(--desktop-scene);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* The same viewport-aligned room stays visible behind the movable menus. */
:root:is([data-design='wood'], [data-design='halloween']) :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail) {
  background-color: var(--desktop-nav);
  background-image: linear-gradient(rgba(13, 11, 10, .28), rgba(13, 11, 10, .28)), var(--desktop-scene);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  backdrop-filter: none;
  border-color: var(--desktop-frame-light);
}

/* Frame painting uses the existing border box; map coordinates and control sizes do not move. */
:root:is([data-design='wood'], [data-design='halloween']) :is(.workspace-panel, .map-frame, .sheet-notes-panel, .dnd-sheet-panel, .dashboard-card) {
  border-image-source: var(--desktop-grain);
  border-image-slice: 64;
  border-image-width: 7px;
  border-image-outset: 0;
  border-image-repeat: round;
  box-shadow: inset 0 0 0 1px var(--desktop-frame-light), inset 0 0 0 7px var(--desktop-frame-tint), 0 6px 18px rgba(0, 0, 0, .28);
}

/* Padded frames reveal the tabletop, not a second competing map or grid. */
:root:is([data-design='wood'], [data-design='halloween']) :is(.map-panel, .remote-map-panel) { background: transparent; }
:root:is([data-design='wood'], [data-design='halloween']) .map-frame {
  background-color: rgba(19, 14, 10, .12);
  background-image: linear-gradient(rgba(18, 13, 9, .08), rgba(18, 13, 9, .08)), var(--desktop-scene);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

:root:is([data-design='wood'], [data-design='halloween']) :is(.workspace-panel, .dashboard-card, .dnd-sheet-panel, .sheet-notes-panel) {
  background-color: var(--panel);
  background-image: linear-gradient(to bottom, var(--desktop-frame-tint) 0 7px, var(--panel) 7px 100%), var(--desktop-grain);
  background-size: auto, 580px 160px;
  background-repeat: no-repeat;
}

/* Headings sit on a quiet dark backing even when the room is bright behind them. */
:root:is([data-design='wood'], [data-design='halloween']) :is(.map-panel, .remote-map-panel) .chat-header {
  background: var(--panel-soft);
  box-shadow: inset 0 1px var(--desktop-frame-light), 0 5px 15px rgba(0, 0, 0, .2);
}
:root:is([data-design='wood'], [data-design='halloween']) .panel-header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(0, 0, 0, .24));
  border-color: var(--desktop-frame-light);
}
:root:is([data-design='wood'], [data-design='halloween']) .dnd-character-name-box {
  background-image: linear-gradient(to bottom, rgba(18, 12, 8, .7), var(--panel) 48%), var(--desktop-grain);
  background-size: auto, 520px auto;
}

/* Existing collapsed handles remain functional; scenic effects never add DOM or pointer targets. */
@media (max-width: 999px) {
  :root:is([data-design='wood'], [data-design='halloween']) body,
  :root:is([data-design='wood'], [data-design='halloween']) :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail, .map-frame) { background-attachment: scroll; }
}

/* Hearth & Table: independent room, tiled oak, quiet leather and aged brass.
   Paint only: no map/image treatment, geometry, controls or hit layers. */
:root[data-design='wood'] {
  --desktop-scene: url('/static/design-assets/tavern-hearth-v3.webp');
  --desktop-grain: url('/static/design-assets/oak-table-v3.webp');
  --desktop-scene-shade: rgba(20, 14, 10, .36);
  --desktop-frame-light: rgba(174, 139, 80, .64);
  --tavern-leather: #30251e;
  --tavern-leather-deep: #251c17;
  --tavern-brass: #a78a55;
}
:root[data-design='wood'] :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail) {
  background-image: linear-gradient(rgba(19, 14, 11, .53), rgba(19, 14, 11, .66)), var(--desktop-scene);
  border-color: var(--tavern-brass);
}
/* Oak belongs to the table, not to a fixed-size illustration of the whole page. */
:root[data-design='wood'] .map-frame {
  background-color: #302117 !important;
  background-image:
    radial-gradient(ellipse at 3% 15%, rgba(225, 161, 83, .12), transparent 48%),
    radial-gradient(ellipse at 98% 80%, rgba(217, 146, 67, .08), transparent 46%),
    linear-gradient(90deg, rgba(14, 9, 6, .28), transparent 16%, transparent 84%, rgba(14, 9, 6, .28)),
    var(--desktop-grain) !important;
  background-size: auto, auto, auto, 720px 720px !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-attachment: scroll !important;
  border-image-source: none;
  border-color: #695035;
  box-shadow: inset 0 0 0 1px rgba(192, 151, 91, .5), inset 0 0 0 7px rgba(29, 19, 12, .3), inset 0 0 42px rgba(12, 8, 5, .46), 0 12px 32px rgba(0, 0, 0, .46);
}
/* Opaque leather keeps small text away from decorative room details. */
:root[data-design='wood'] :is(.workspace-panel, .dashboard-card, .dnd-sheet-panel, .sheet-notes-panel) {
  background-color: var(--tavern-leather) !important;
  background-image: linear-gradient(135deg, rgba(255, 225, 172, .035), transparent 40%, rgba(0, 0, 0, .09)) !important;
  border-image-source: none;
  border-color: var(--tavern-brass);
  box-shadow: inset 0 0 0 1px rgba(189, 154, 94, .35), inset 0 0 0 5px rgba(15, 10, 7, .16), 0 5px 16px rgba(0, 0, 0, .35);
}
:root[data-design='wood'] :is(.map-panel, .remote-map-panel) .chat-header {
  background-color: var(--tavern-leather-deep);
  box-shadow: inset 0 1px rgba(180, 146, 88, .5), 0 5px 15px rgba(0, 0, 0, .3);
}
:root[data-design='wood'] .panel-header {
  background-image: linear-gradient(to bottom, rgba(211, 171, 105, .045), rgba(0, 0, 0, .14));
  border-color: rgba(167, 138, 85, .56);
}
:root[data-design='wood'] .dnd-character-name-box {
  background-color: var(--tavern-leather-deep);
  background-image: linear-gradient(120deg, rgba(181, 137, 71, .08), transparent 65%);
}
:root[data-design='wood'] :is(.ghost-button, .compact-button) {
  border-color: rgba(167, 138, 85, .65);
  box-shadow: inset 0 1px rgba(236, 214, 171, .07), 0 1px 2px rgba(0, 0, 0, .22);
}
:root[data-design='wood'] :is(.ghost-button, .compact-button):hover:not(:disabled) {
  border-color: #c4a56c;
  box-shadow: inset 0 0 0 1px rgba(196, 165, 108, .3), 0 1px 3px rgba(0, 0, 0, .25);
}
/* Online identities use the UI font and solid, theme-safe backing in every style. */
:root[data-theme] .map-presence-bar { background: var(--panel-soft); border-color: var(--line); }
:root[data-theme] .map-presence-card { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
:root[data-theme] .map-presence-card.gm { background: var(--panel-strong); border-color: var(--line-strong); }
:root[data-theme] :is(.map-presence-login, .map-presence-character, .map-presence-role) {
  font-family: var(--desktop-body-font);
  font-style: normal;
  text-shadow: none;
}
:root[data-theme] .map-presence-login { color: var(--text); font-weight: 700; }
:root[data-theme] :is(.map-presence-character, .map-presence-role) { color: var(--muted); font-weight: 600; }
:root[data-theme] .map-presence-card.initiative-active { border-color: var(--v2-danger); }

/* Long labels must wrap inside their existing controls rather than escape the border. */
:root[data-theme] body :is(button, .nav-link, .button) { max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
:root[data-theme] :is(.dnd-sheet-box, .dnd-sheet-panel, .dnd-ability-card, .dnd-header-grid > *, .dnd-dashboard > *, .panel-header > *) { min-width: 0; }
:root[data-theme] :is(.dnd-sheet-box, .dnd-ability-card, .dnd-spell-card, .panel-header) :is(span, strong, small, h3, h4, .eyebrow) { overflow-wrap: anywhere; white-space: normal; }
:root[data-theme] body :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
:root[data-theme] .dnd-inline-input { width: 100%; }
:root[data-theme] .panel-header .panel-toggle { flex: 0 0 auto; }

/* A custom design is a color palette, never a user-provided image or stylesheet. */
:root[data-design='custom'] body { background: var(--bg); }
:root[data-design='custom'] :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail) { background: var(--desktop-nav); }
:root[data-design='custom'] :is(.map-frame, .chat-frame) { background: var(--panel-soft); }
:root[data-design='custom'] body :is(input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']), select, textarea, .sheet-notes-editor) { background: var(--panel-soft) !important; color: var(--text) !important; border-color: var(--line-strong); }
:root[data-design='custom'] :is(.upload-button, .button) { background: var(--accent); color: var(--codex-on-accent); border-color: var(--line-strong); }
:root[data-design='custom'] .ghost-button { background: var(--panel-soft); color: var(--text); }
:root[data-design='custom'] :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail, .burger-menu-panel) :is(.nav-link, .dashboard-nav-link) { background: var(--desktop-nav-soft) !important; color: var(--desktop-nav-text) !important; border-color: var(--desktop-nav-border) !important; }
:root[data-design='custom'] :is(.sidebar, .remote-sidebar, .dashboard-sidebar, .rail, .burger-menu-panel) :is(.nav-link.active, .dashboard-nav-link.active) { background: var(--desktop-nav-active) !important; }
:root[data-theme] .theme-switcher-actions [data-theme-choice='custom'] { background: #303946; color: #f0f3f6; grid-column: 1 / -1; }

/* Keep the recovery controls readable even if the chosen app colors have low contrast. */
:root[data-theme] .custom-color-editor { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #8190a3; border-radius: 8px; background: #25282e; color: #eceef2; font: 14px/1.45 'Segoe UI', sans-serif; }
:root[data-theme] .custom-color-editor[hidden] { display: none !important; }
:root[data-theme] .custom-color-editor label { display: grid; gap: 5px; min-width: 0; color: #eceef2; overflow-wrap: anywhere; }
:root[data-theme] .custom-color-editor p { margin: 0; color: #c5ccd7; font-size: 12px; }
:root[data-theme] .custom-color-editor :is(select, input[type='text'], input[type='color']) { width: 100%; min-height: 34px; padding: 5px; background: #191d24 !important; color: #f0f3f6 !important; border: 1px solid #8b9bb1 !important; font: inherit; }
:root[data-theme] .custom-color-editor input[type='range'] { width: 100%; min-width: 0; accent-color: #a8c3e0; }
:root[data-theme] .custom-color-editor button { background: #344355 !important; color: #f0f3f6 !important; border-color: #a8c3e0 !important; min-height: 36px; }
:root[data-theme] .custom-color-editor :is(button, input, select):focus-visible { outline-color: #d5e7ff !important; }
:root[data-theme] .custom-color-value { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
:root[data-theme] .custom-color-channel { grid-template-columns: 38px minmax(0, 1fr) 26px; align-items: center; }
:root[data-theme] .custom-color-channel output { text-align: right; color: #eceef2; font-variant-numeric: tabular-nums; }
:root[data-theme] .custom-color-editor [data-color-warning]:empty { display: none; }
:root[data-theme] .custom-color-editor [aria-invalid='true'] { outline: 2px solid #ffafa6; }
:root[data-theme] .burger-menu-panel { max-height: calc(100dvh - 100px); max-width: min(340px, calc(100vw - 40px)); overflow-y: auto; overscroll-behavior: contain; }

/* Printing must include every section even when only one tab is active on screen. */
@media print {
  :root:is([data-design='wood'], [data-design='halloween']) * { background-image: none !important; border-image: none !important; box-shadow: none !important; }
  .dnd-view-controls,
  .dnd-sheet-tabbar { display: none !important; }
  .dnd-sheet-tabbed .dnd-sheet-tab-panels,
  .dnd-sheet-tabbed .dnd-sheet-tab-panels > .dnd-sheet-tab-panel[hidden],
  .dnd-sheet-tabbed .dnd-sheet-tab-panels > .dnd-sheet-tab-panel {
    display: block !important;
    overflow: visible;
  }
  :root[data-theme] body,
  :root[data-theme] .dnd-sheet,
  :root[data-theme] .dnd-sheet :is(section, article, input, textarea, select, span, strong, p) {
    color: #111 !important;
    background: #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] :is(.button, .upload-button, .ghost-button, .dnd-sheet-tab) { transition: none; }
}