/* Mythical Blue · Daylight / Moonlight theme system */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, rgba(255,253,245,.92), rgba(245,231,198,.92));
  color: var(--navy-deep);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(43,56,102,.10);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(43,56,102,.14);
}

.theme-toggle-icon {
  font-size: 12px;
  line-height: 1;
}

.overview-header-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.theme-toggle-compact {
  padding-inline: 10px;
}

@media (max-width: 700px) {
  .overview-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .theme-toggle,
  .theme-toggle-compact {
    font-size: 10px;
    padding: 8px 10px;
  }

  .theme-toggle .theme-toggle-label {
    white-space: nowrap;
  }
}

html[data-theme="moonlight"] {
  --moon-page-bg: linear-gradient(180deg, #041126 0%, #0a1f45 40%, #163362 100%);
  --moon-surface: #122342;
  --moon-surface-soft: rgba(17, 34, 67, .92);
  --moon-surface-raised: rgba(13, 28, 58, .78);
  --moon-surface-glass: rgba(17, 34, 67, .58);
  --moon-line: rgba(146, 203, 255, .42);
  --moon-line-strong: rgba(176, 220, 255, .65);
  --moon-text: #eef6ff;
  --moon-text-soft: #d8e8ff;
  --moon-muted: rgba(224, 239, 255, .76);
  --moon-heading: #f3f8ff;
  --moon-accent: #95ccff;
  --moon-accent-2: #5fb2ff;
  --moon-button-from: #274b98;
  --moon-button-to: #10285e;
  --moon-button-hover-from: #315bb3;
  --moon-button-hover-to: #17326f;
  --moon-chip-bg: rgba(84, 144, 212, .18);
  --moon-chip-active: rgba(118, 186, 255, .22);
}

html[data-theme="moonlight"] body {
  background: var(--moon-page-bg);
  color: var(--moon-text);
}

html[data-theme="moonlight"] .start-page,
html[data-theme="moonlight"] .sheet-toolbar,
html[data-theme="moonlight"] .sheet,
html[data-theme="moonlight"] .dm-screen-header,
html[data-theme="moonlight"] .initiative-panel,
html[data-theme="moonlight"] .spell-picker-modal,
html[data-theme="moonlight"] .spell-editor-modal,
html[data-theme="moonlight"] .library-picker-modal,
html[data-theme="moonlight"] .npc-picker-modal {
  background-color: var(--moon-surface);
  color: var(--moon-text);
  border-color: var(--moon-line-strong);
  box-shadow: 0 10px 42px rgba(0,0,0,.46), inset 0 0 0 1px rgba(197, 229, 255, .08);
}

html[data-theme="moonlight"] .start-page,
html[data-theme="moonlight"] .sheet,
html[data-theme="moonlight"] .dm-screen-header,
html[data-theme="moonlight"] .initiative-panel,
html[data-theme="moonlight"] .spell-picker-modal,
html[data-theme="moonlight"] .spell-editor-modal,
html[data-theme="moonlight"] .library-picker-modal,
html[data-theme="moonlight"] .npc-picker-modal {
  background-image: url('../assets/themes/moonlight/backgrounds/parchment-seamless.png');
}

html[data-theme="moonlight"] .start-page::before,
html[data-theme="moonlight"] .dm-screen-header::before,
html[data-theme="moonlight"] .initiative-panel::before {
  border-color: rgba(196, 229, 255, .20);
}

html[data-theme="moonlight"] .corner {
  background-image: url('../assets/themes/moonlight/ornaments/corner.png');
}

html[data-theme="moonlight"] .compass-watermark {
  background-image: url('../assets/themes/moonlight/ornaments/compass.png');
  opacity: .42;
  mix-blend-mode: screen;
}

html[data-theme="moonlight"] .ship-art {
  background-image: url('../assets/themes/moonlight/ornaments/ship.png');
  opacity: .68;
  mix-blend-mode: screen;
}

html[data-theme="moonlight"] .title-banner {
  filter: drop-shadow(0 0 10px rgba(121, 194, 255, .15));
}

html[data-theme="moonlight"] .start-page h1,
html[data-theme="moonlight"] .dm-screen-header h1,
html[data-theme="moonlight"] .initiative-panel h2,
html[data-theme="moonlight"] .ftr-t,
html[data-theme="moonlight"] .inline-statblock h3,
html[data-theme="moonlight"] .npc-picker-header h2,
html[data-theme="moonlight"] .statblock-result-card h3 {
  color: var(--moon-heading);
}

html[data-theme="moonlight"] .dm-screen-kicker,
html[data-theme="moonlight"] .dm-section-label,
html[data-theme="moonlight"] .round-display span,
html[data-theme="moonlight"] .tracker-legend,
html[data-theme="moonlight"] .cal-season,
html[data-theme="moonlight"] .card-condition-label,
html[data-theme="moonlight"] .inline-statblock-vitals span,
html[data-theme="moonlight"] .inline-statblock-metadata dt,
html[data-theme="moonlight"] .npc-picker-filters span,
html[data-theme="moonlight"] .round-display strong,
html[data-theme="moonlight"] .cal-day-num {
  color: var(--moon-accent);
}

html[data-theme="moonlight"] .start-page,
html[data-theme="moonlight"] .sheet,
html[data-theme="moonlight"] .sheet-toolbar,
html[data-theme="moonlight"] .calendar-widget,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .character-card,
html[data-theme="moonlight"] .card-condition-chip,
html[data-theme="moonlight"] .overview-action-link,
html[data-theme="moonlight"] .combatant-row,
html[data-theme="moonlight"] .inline-statblock,
html[data-theme="moonlight"] .inline-statblock-entry,
html[data-theme="moonlight"] .inline-statblock-vitals > div,
html[data-theme="moonlight"] .inline-statblock-metadata,
html[data-theme="moonlight"] .statblock-result-card,
html[data-theme="moonlight"] .round-display,
html[data-theme="moonlight"] .calendar-widget,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .spell-preview-card,
html[data-theme="moonlight"] .library-picker-preview,
html[data-theme="moonlight"] .spell-picker-results > *,
html[data-theme="moonlight"] details.sb-card > summary {
  border-color: var(--moon-line);
}

html[data-theme="moonlight"] .character-card,
html[data-theme="moonlight"] .combatant-row,
html[data-theme="moonlight"] .statblock-result-card,
html[data-theme="moonlight"] .inline-statblock,
html[data-theme="moonlight"] .inline-statblock-entry,
html[data-theme="moonlight"] .inline-statblock-vitals > div,
html[data-theme="moonlight"] .inline-statblock-metadata,
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .spell-preview-card,
html[data-theme="moonlight"] .library-picker-preview,
html[data-theme="moonlight"] .calendar-widget,
html[data-theme="moonlight"] .calendar-sheet-bar {
  background: var(--moon-surface-glass);
  color: var(--moon-text);
}

html[data-theme="moonlight"] .character-card:hover,
html[data-theme="moonlight"] .combatant-row:hover,
html[data-theme="moonlight"] .statblock-result-card:hover,
html[data-theme="moonlight"] .sb-card:hover {
  background: rgba(24, 49, 94, .76);
}

html[data-theme="moonlight"] .combatant-row.active-turn {
  background: rgba(57, 100, 168, .28);
  box-shadow: inset 4px 0 0 var(--moon-accent), inset 0 0 0 1px rgba(223, 241, 255, .12), 0 5px 14px rgba(0,0,0,.18);
}

html[data-theme="moonlight"] .cal-header,
html[data-theme="moonlight"] .round-display,
html[data-theme="moonlight"] .card-hp-adj,
html[data-theme="moonlight"] .sheet-toolbar button,
html[data-theme="moonlight"] .start-page button,
html[data-theme="moonlight"] .overview-action-link,
html[data-theme="moonlight"] .dm-nav-button,
html[data-theme="moonlight"] .dm-primary-button,
html[data-theme="moonlight"] .dm-secondary-button,
html[data-theme="moonlight"] .add-btn,
html[data-theme="moonlight"] .theme-toggle {
  background: linear-gradient(180deg, var(--moon-button-from), var(--moon-button-to));
  color: var(--moon-text);
  border-color: rgba(169, 213, 255, .58);
  box-shadow: 0 3px 10px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-theme="moonlight"] .sheet-toolbar button:hover,
html[data-theme="moonlight"] .start-page button:hover,
html[data-theme="moonlight"] .overview-action-link:hover,
html[data-theme="moonlight"] .overview-action-link:focus-visible,
html[data-theme="moonlight"] .dm-nav-button:hover,
html[data-theme="moonlight"] .dm-primary-button:hover,
html[data-theme="moonlight"] .dm-secondary-button:hover,
html[data-theme="moonlight"] .theme-toggle:hover,
html[data-theme="moonlight"] .theme-toggle:focus-visible,
html[data-theme="moonlight"] .add-btn:hover {
  background: linear-gradient(180deg, var(--moon-button-hover-from), var(--moon-button-hover-to));
}

html[data-theme="moonlight"] .dm-subtle-button,
html[data-theme="moonlight"] .cal-btn,
html[data-theme="moonlight"] .cal-btn-save {
  background: rgba(12, 30, 60, .35);
  color: var(--moon-text-soft);
  border-color: var(--moon-line);
}

html[data-theme="moonlight"] .cal-btn:hover,
html[data-theme="moonlight"] .dm-subtle-button:hover,
html[data-theme="moonlight"] .cal-btn-save:hover {
  background: rgba(95, 178, 255, .15);
}

html[data-theme="moonlight"] .tab,
html[data-theme="moonlight"] .cal-month-num,
html[data-theme="moonlight"] .cal-month-of,
html[data-theme="moonlight"] .cal-week,
html[data-theme="moonlight"] .cal-weekday,
html[data-theme="moonlight"] .card-hp-text,
html[data-theme="moonlight"] .combatant-name,
html[data-theme="moonlight"] .combatant-name-input,
html[data-theme="moonlight"] .combatant-type,
html[data-theme="moonlight"] .active-turn-text,
html[data-theme="moonlight"] .combatant-condition-empty,
html[data-theme="moonlight"] .inline-statblock-entry h5,
html[data-theme="moonlight"] .inline-statblock-entry p,
html[data-theme="moonlight"] .inline-statblock-header p,
html[data-theme="moonlight"] .inline-statblock-metadata dd,
html[data-theme="moonlight"] .inline-statblock-ability-heading strong,
html[data-theme="moonlight"] .inline-statblock-ability-heading span,
html[data-theme="moonlight"] .inline-statblock-ability-values span,
html[data-theme="moonlight"] .npc-picker-actions span,
html[data-theme="moonlight"] .npc-picker-results-header strong,
html[data-theme="moonlight"] .statblock-result-card small,
html[data-theme="moonlight"] .spell-picker-header p,
html[data-theme="moonlight"] .library-picker-placeholder,
html[data-theme="moonlight"] .sheet label,
html[data-theme="moonlight"] .sheet summary,
html[data-theme="moonlight"] .sheet p,
html[data-theme="moonlight"] .sheet li,
html[data-theme="moonlight"] .sheet div,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .cal-sign,
html[data-theme="moonlight"] .cal-sheet-date {
  color: var(--moon-text-soft);
}

html[data-theme="moonlight"] .tab.on,
html[data-theme="moonlight"] .combatant-condition-open,
html[data-theme="moonlight"] .statblock-toggle,
html[data-theme="moonlight"] .card-condition-chip,
html[data-theme="moonlight"] .inline-statblock-section h4,
html[data-theme="moonlight"] .spell-preview-title,
html[data-theme="moonlight"] .spell-card-title,
html[data-theme="moonlight"] .character-card strong,
html[data-theme="moonlight"] .cal-year {
  color: var(--moon-heading);
}

html[data-theme="moonlight"] .tab.on,
html[data-theme="moonlight"] .tabs,
html[data-theme="moonlight"] .start-page-heading-row,
html[data-theme="moonlight"] .initiative-panel-header,
html[data-theme="moonlight"] .tracker-legend,
html[data-theme="moonlight"] .inline-statblock-header,
html[data-theme="moonlight"] .inline-statblock-section h4,
html[data-theme="moonlight"] .cal-controls,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .card-condition-editor,
html[data-theme="moonlight"] .npc-picker-header,
html[data-theme="moonlight"] .npc-picker-actions,
html[data-theme="moonlight"] .npc-picker-filters,
html[data-theme="moonlight"] .npc-picker-results-header {
  border-color: var(--moon-line);
}

html[data-theme="moonlight"] .cal-sign,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .inline-statblock-ability-values,
html[data-theme="moonlight"] .inline-statblock-ability {
  background: rgba(15, 31, 61, .34);
}

html[data-theme="moonlight"] input,
html[data-theme="moonlight"] textarea,
html[data-theme="moonlight"] select {
  color: var(--moon-text);
  caret-color: var(--moon-accent);
}

html[data-theme="moonlight"] input::placeholder,
html[data-theme="moonlight"] textarea::placeholder {
  color: rgba(221, 235, 255, .46);
}

html[data-theme="moonlight"] .sheet input,
html[data-theme="moonlight"] .sheet textarea,
html[data-theme="moonlight"] .sheet select,
html[data-theme="moonlight"] .card-hp-cur,
html[data-theme="moonlight"] .card-hp-max,
html[data-theme="moonlight"] .combatant-row input[type="text"],
html[data-theme="moonlight"] .combatant-row input[type="number"],
html[data-theme="moonlight"] .combatant-condition-picker,
html[data-theme="moonlight"] .spell-picker-toolbar input,
html[data-theme="moonlight"] .spell-picker-toolbar select,
html[data-theme="moonlight"] .library-picker-toolbar input,
html[data-theme="moonlight"] .library-picker-toolbar select,
html[data-theme="moonlight"] .npc-picker-filters input,
html[data-theme="moonlight"] .npc-picker-filters select {
  background: rgba(10, 22, 46, .26);
  color: var(--moon-text);
  border-color: var(--moon-line) !important;
}

html[data-theme="moonlight"] .combatant-condition-picker,
html[data-theme="moonlight"] .card-condition-chip,
html[data-theme="moonlight"] .combatant-condition-chip,
html[data-theme="moonlight"] .statblock-toggle,
html[data-theme="moonlight"] .round-display,
html[data-theme="moonlight"] .concentration-rune,
html[data-theme="moonlight"] .combatant-order-medallion,
html[data-theme="moonlight"] .combatant-remove,
html[data-theme="moonlight"] .player-lock-icon {
  background: var(--moon-chip-bg);
  border-color: var(--moon-line);
  color: var(--moon-text-soft);
}

html[data-theme="moonlight"] .combatant-condition-chip.active {
  background: var(--moon-chip-active);
  border-color: var(--moon-line-strong);
}

html[data-theme="moonlight"] .combatant-condition-info,
html[data-theme="moonlight"] .library-picker-preview,
html[data-theme="moonlight"] .spell-preview-card {
  background: rgba(10, 23, 46, .45);
  color: var(--moon-text-soft);
}

html[data-theme="moonlight"] .concentration-toggle input:checked + .concentration-rune {
  background: linear-gradient(180deg, #3870d8, #17326d);
  color: #ffffff;
  border-color: rgba(184, 226, 255, .8);
}

html[data-theme="moonlight"] .combatant-hp-bwrap,
html[data-theme="moonlight"] .card-hp-bwrap {
  background: rgba(222, 236, 255, .12);
}

html[data-theme="moonlight"] .hp-divider,
html[data-theme="moonlight"] .card-hp-slash,
html[data-theme="moonlight"] .cal-month-sep,
html[data-theme="moonlight"] .cal-ornament {
  color: var(--moon-accent);
}

html[data-theme="moonlight"] svg path[stroke="#b8902c"] {
  stroke: rgba(148, 204, 255, .75);
}

/* ─── Moonlight phase 2: deeper ocean palette, brighter gilding and readable spellbook ─── */
html[data-theme="moonlight"] {
  --gold: #f0d27d;
  --gold-deep: #e9bd5d;
  --gold-light: #ffe8a4;
  --navy: #8fd4ff;
  --navy-deep: #eef8ff;
  --navy-soft: #b6e3ff;
  --ink: #edf7ff;
  --ink-soft: #cae7ff;
  --moon-page-bg: radial-gradient(circle at 50% -10%, #123b73 0%, #071a3b 38%, #030b1b 100%);
  --moon-surface: #071a38;
  --moon-surface-soft: rgba(7, 25, 57, .95);
  --moon-surface-raised: rgba(11, 35, 74, .90);
  --moon-surface-glass: rgba(8, 30, 66, .69);
  --moon-line: rgba(122, 202, 255, .52);
  --moon-line-strong: rgba(255, 220, 130, .78);
  --moon-text: #f2f9ff;
  --moon-text-soft: #d5ebff;
  --moon-muted: rgba(205, 229, 255, .78);
  --moon-heading: #f5fbff;
  --moon-accent: #9ddcff;
  --moon-accent-2: #62bfff;
  --moon-gold: #f5d884;
  --moon-gold-soft: rgba(245, 216, 132, .70);
  --moon-button-from: #2459a9;
  --moon-button-to: #0a2459;
  --moon-button-hover-from: #3476d7;
  --moon-button-hover-to: #103476;
  --moon-chip-bg: rgba(76, 148, 218, .18);
  --moon-chip-active: rgba(108, 187, 255, .28);
}

html[data-theme="moonlight"] body {
  background: var(--moon-page-bg);
  background-attachment: fixed;
}

html[data-theme="moonlight"] .start-page,
html[data-theme="moonlight"] .sheet,
html[data-theme="moonlight"] .dm-screen-header,
html[data-theme="moonlight"] .initiative-panel,
html[data-theme="moonlight"] .spell-picker-modal,
html[data-theme="moonlight"] .spell-editor-modal,
html[data-theme="moonlight"] .library-picker-modal,
html[data-theme="moonlight"] .npc-picker-modal {
  background-color: #071a38;
  box-shadow:
    0 14px 48px rgba(0, 0, 0, .56),
    0 0 28px rgba(70, 157, 255, .12),
    inset 0 0 0 1px rgba(186, 229, 255, .09);
}

html[data-theme="moonlight"] .sheet,
html[data-theme="moonlight"] .start-page,
html[data-theme="moonlight"] .dm-screen-header,
html[data-theme="moonlight"] .initiative-panel {
  border-color: rgba(245, 216, 132, .74);
}

html[data-theme="moonlight"] .start-page::before,
html[data-theme="moonlight"] .dm-screen-header::before,
html[data-theme="moonlight"] .initiative-panel::before {
  border-color: rgba(145, 215, 255, .34);
  box-shadow: 0 0 14px rgba(84, 174, 255, .12);
}

html[data-theme="moonlight"] .title-banner,
html[data-theme="moonlight"] .corner,
html[data-theme="moonlight"] .compass-watermark,
html[data-theme="moonlight"] .ship-art,
html[data-theme="moonlight"] .spell-school-icon,
html[data-theme="moonlight"] .spell-area-inline img,
html[data-theme="moonlight"] .equipped-slot-icon {
  filter: drop-shadow(0 0 5px rgba(92, 190, 255, .44));
}

html[data-theme="moonlight"] .corner {
  opacity: .94;
}

html[data-theme="moonlight"] .compass-watermark {
  opacity: .52;
}

html[data-theme="moonlight"] .ship-art {
  opacity: .78;
}

/* Switch-style daylight / moonlight control */
.theme-toggle {
  position: relative;
  min-width: 174px;
  min-height: 38px;
  justify-content: flex-end;
  overflow: hidden;
  padding: 7px 15px 7px 49px;
  border-radius: 999px;
  letter-spacing: .65px;
}

.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 144, 44, .30);
  border-radius: inherit;
  pointer-events: none;
}

.theme-toggle-icon {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(138, 105, 24, .62);
  border-radius: 50%;
  background: rgba(255, 248, 222, .82);
  color: #294575;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .62);
  transition: transform .24s ease, background .24s ease, color .24s ease, box-shadow .24s ease;
}

.theme-toggle-label {
  position: relative;
  z-index: 1;
}

.theme-toggle-compact {
  min-width: 134px;
  min-height: 36px;
  padding-right: 12px;
  padding-left: 44px;
}

html[data-theme="moonlight"] .theme-toggle {
  justify-content: flex-start;
  padding-right: 49px;
  padding-left: 15px;
  border-color: rgba(245, 216, 132, .74);
  background: linear-gradient(180deg, rgba(28, 93, 171, .96), rgba(5, 28, 72, .98));
  box-shadow: 0 0 15px rgba(82, 176, 255, .22), inset 0 1px 0 rgba(255,255,255,.12);
}

html[data-theme="moonlight"] .theme-toggle::before {
  border-color: rgba(147, 213, 255, .30);
}

html[data-theme="moonlight"] .theme-toggle-icon {
  left: auto;
  right: 4px;
  background: radial-gradient(circle at 35% 35%, #fff8ce 0%, #f5d77d 58%, #d3a949 100%);
  color: #12366b;
  border-color: rgba(255, 231, 153, .92);
  box-shadow: 0 0 13px rgba(245, 216, 132, .62), inset 0 1px 0 rgba(255,255,255,.62);
}

@media (max-width: 700px) {
  .theme-toggle { min-width: 148px; min-height: 36px; }
  .theme-toggle-compact { min-width: 126px; }
}

/* Brighten gold and blue accent lines throughout moonlight mode. */
html[data-theme="moonlight"] .tabs,
html[data-theme="moonlight"] .tab.on,
html[data-theme="moonlight"] .start-page-heading-row,
html[data-theme="moonlight"] .initiative-panel-header,
html[data-theme="moonlight"] .tracker-legend,
html[data-theme="moonlight"] .inline-statblock-header,
html[data-theme="moonlight"] .inline-statblock-section h4,
html[data-theme="moonlight"] .card-condition-editor,
html[data-theme="moonlight"] .calendar-widget,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .spell-toolbar,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .spell-card-topline,
html[data-theme="moonlight"] .spell-card-meta-grid,
html[data-theme="moonlight"] .spell-card-details,
html[data-theme="moonlight"] .spell-card-detail-grid {
  border-color: rgba(245, 216, 132, .52);
}

html[data-theme="moonlight"] .overview-action-link,
html[data-theme="moonlight"] .dm-nav-button,
html[data-theme="moonlight"] .dm-primary-button,
html[data-theme="moonlight"] .dm-secondary-button,
html[data-theme="moonlight"] .add-btn,
html[data-theme="moonlight"] .sheet-toolbar button,
html[data-theme="moonlight"] .start-page button {
  border-color: rgba(245, 216, 132, .88);
  box-shadow: 0 0 12px rgba(69, 160, 255, .16), inset 0 1px 0 rgba(255,255,255,.12);
}

html[data-theme="moonlight"] .overview-action-link::before,
html[data-theme="moonlight"] .overview-action-link::after,
html[data-theme="moonlight"] .spell-prepared-toggle.is-prepared,
html[data-theme="moonlight"] .spell-prepared-filter:has(input:checked) span,
html[data-theme="moonlight"] .cal-year,
html[data-theme="moonlight"] .cal-day-num,
html[data-theme="moonlight"] .round-display strong,
html[data-theme="moonlight"] .hp-divider,
html[data-theme="moonlight"] .card-hp-slash,
html[data-theme="moonlight"] .cal-month-sep,
html[data-theme="moonlight"] .cal-ornament {
  color: var(--moon-gold);
  text-shadow: 0 0 7px rgba(245, 216, 132, .22);
}

/* Spellbook readability: override the daylight low-opacity navy text. */
html[data-theme="moonlight"] .spellbook-subtitle,
html[data-theme="moonlight"] .spell-toolbar span,
html[data-theme="moonlight"] .spell-picker-toolbar span,
html[data-theme="moonlight"] .spell-card-school,
html[data-theme="moonlight"] .spell-card-quick strong,
html[data-theme="moonlight"] .spell-card-detail-grid strong,
html[data-theme="moonlight"] .spell-card-quick span,
html[data-theme="moonlight"] .spell-card-detail-grid span,
html[data-theme="moonlight"] .spell-area-inline,
html[data-theme="moonlight"] .spell-card-teaser,
html[data-theme="moonlight"] .spell-card-rule-text,
html[data-theme="moonlight"] .spell-property-chip,
html[data-theme="moonlight"] .spell-prepared-toggle,
html[data-theme="moonlight"] .spell-prepared-filter,
html[data-theme="moonlight"] .spell-prepared-filter em,
html[data-theme="moonlight"] .srd-license-note,
html[data-theme="moonlight"] .spell-picker-header p,
html[data-theme="moonlight"] .spell-editor-header p,
html[data-theme="moonlight"] .spell-editor-checks,
html[data-theme="moonlight"] .library-picker-preview,
html[data-theme="moonlight"] .library-picker-placeholder,
html[data-theme="moonlight"] .library-picker-preview .library-preview-meta,
html[data-theme="moonlight"] .library-picker-preview .library-preview-body,
html[data-theme="moonlight"] .library-picker-result,
html[data-theme="moonlight"] .library-picker-result em,
html[data-theme="moonlight"] .library-picker-result small,
html[data-theme="moonlight"] .library-picker-footer,
html[data-theme="moonlight"] .spell-picker-result,
html[data-theme="moonlight"] .spell-picker-result em,
html[data-theme="moonlight"] .spell-picker-result small {
  color: var(--moon-text-soft);
}

html[data-theme="moonlight"] .spell-card-title,
html[data-theme="moonlight"] .library-picker-preview h3,
html[data-theme="moonlight"] .library-picker-result strong,
html[data-theme="moonlight"] .spell-picker-result strong {
  color: var(--moon-heading);
  text-shadow: 0 0 8px rgba(106, 190, 255, .16);
}

html[data-theme="moonlight"] .spell-card {
  background: linear-gradient(145deg, rgba(10, 39, 82, .92), rgba(5, 22, 53, .82));
  border-color: rgba(245, 216, 132, .58);
  box-shadow: 0 3px 11px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(202, 232, 255, .07);
}

html[data-theme="moonlight"] .spell-card:hover {
  border-color: rgba(255, 231, 160, .88);
  box-shadow: 0 0 16px rgba(92, 184, 255, .18), inset 0 1px 0 rgba(219, 240, 255, .10);
}

html[data-theme="moonlight"] .spell-card-topline,
html[data-theme="moonlight"] .spell-card-meta-grid,
html[data-theme="moonlight"] .spell-card-subrow {
  background: rgba(12, 42, 85, .22);
}

html[data-theme="moonlight"] .spell-school-icon {
  border-color: rgba(148, 214, 255, .62);
  background: rgba(12, 43, 88, .72);
}

html[data-theme="moonlight"] .spell-level-badge {
  border-color: rgba(245, 216, 132, .90);
  background: rgba(245, 216, 132, .10);
  color: var(--moon-gold);
}

html[data-theme="moonlight"] .spell-property-chip {
  border-color: rgba(145, 209, 255, .36);
  background: rgba(11, 38, 78, .48);
}

html[data-theme="moonlight"] .spell-property-chip.active {
  border-color: rgba(245, 216, 132, .72);
  background: rgba(245, 216, 132, .12);
  color: var(--moon-gold);
}

html[data-theme="moonlight"] .spell-card-expand,
html[data-theme="moonlight"] .spell-card-edit-inline,
html[data-theme="moonlight"] .spell-card-btn,
html[data-theme="moonlight"] .spell-picker-close {
  color: var(--moon-gold);
  border-color: rgba(245, 216, 132, .66);
}

html[data-theme="moonlight"] .spell-card-expand:hover,
html[data-theme="moonlight"] .spell-card-edit-inline:hover,
html[data-theme="moonlight"] .spell-card-btn:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(122, 202, 255, .45);
}

html[data-theme="moonlight"] .spell-picker-result-actions button,
html[data-theme="moonlight"] .library-picker-result-actions button {
  border-color: rgba(245, 216, 132, .58);
  background: rgba(12, 43, 88, .62);
  color: var(--moon-text);
}

html[data-theme="moonlight"] .spell-picker-result-actions button:hover,
html[data-theme="moonlight"] .library-picker-result-actions button:hover {
  background: rgba(40, 99, 177, .72);
}

/* Extra moonlight glow for equipment nodes and active statblock controls. */
html[data-theme="moonlight"] .equipped-slot-icon-wrap,
html[data-theme="moonlight"] .statblock-toggle,
html[data-theme="moonlight"] .concentration-rune,
html[data-theme="moonlight"] .combatant-order-medallion {
  box-shadow: 0 0 10px rgba(94, 184, 255, .12);
}

html[data-theme="moonlight"] .equipped-slot-card.is-active .equipped-slot-icon-wrap,
html[data-theme="moonlight"] .concentration-toggle input:checked + .concentration-rune,
html[data-theme="moonlight"] .active-turn .combatant-order-medallion {
  box-shadow: 0 0 13px rgba(99, 191, 255, .34);
}


/* ─── Moonlight phase 3: main-sheet contrast and luminous gilding ─── */
html[data-theme="moonlight"] {
  --moon-panel-deep: rgba(3, 17, 42, .88);
  --moon-panel: rgba(7, 31, 70, .84);
  --moon-panel-soft: rgba(19, 54, 102, .68);
  --moon-panel-highlight: rgba(39, 86, 150, .42);
  --moon-gold: #ffe08a;
  --moon-gold-bright: #fff0b3;
  --moon-gold-line: rgba(255, 224, 138, .88);
  --moon-gold-soft-line: rgba(255, 224, 138, .58);
}

/* Give the main character sheet stronger card separation. */
html[data-theme="moonlight"] .ab,
html[data-theme="moonlight"] .bonbox,
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .cbox,
html[data-theme="moonlight"] .dsbox,
html[data-theme="moonlight"] .condition-control,
html[data-theme="moonlight"] .condition-explanation,
html[data-theme="moonlight"] .inventory-card,
html[data-theme="moonlight"] .inventory-equipment-card,
html[data-theme="moonlight"] .inventory-unified-card,
html[data-theme="moonlight"] .inventory-filter-card,
html[data-theme="moonlight"] .compact-main-coinage-card,
html[data-theme="moonlight"] .features-traits-main,
html[data-theme="moonlight"] .proficiencies-card,
html[data-theme="moonlight"] .armor-class-panel,
html[data-theme="moonlight"] .equipped-carried-card,
html[data-theme="moonlight"] .containers-locations-card,
html[data-theme="moonlight"] .journal-note-entry,
html[data-theme="moonlight"] .spellbook-card {
  background: linear-gradient(145deg, var(--moon-panel-soft), var(--moon-panel-deep));
  border-color: var(--moon-gold-line) !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .20),
    0 0 12px rgba(84, 172, 255, .07),
    inset 0 1px 0 rgba(221, 242, 255, .08);
}

html[data-theme="moonlight"] .ab::after,
html[data-theme="moonlight"] .sb-card::after {
  border-color: rgba(255, 229, 149, .36);
}

/* Keep panels dark rather than daylight-grey. */
html[data-theme="moonlight"] .modcircle,
html[data-theme="moonlight"] .scorebox input,
html[data-theme="moonlight"] .bonbox input,
html[data-theme="moonlight"] .hstat input,
html[data-theme="moonlight"] .cbox2 input,
html[data-theme="moonlight"] .condition-chip,
html[data-theme="moonlight"] .armor-class-total,
html[data-theme="moonlight"] .armor-class-active,
html[data-theme="moonlight"] .inventory-unified-row,
html[data-theme="moonlight"] .equipped-slot-card,
html[data-theme="moonlight"] .custom-equipped-slot,
html[data-theme="moonlight"] .feature-entry,
html[data-theme="moonlight"] .proficiency-value-row,
html[data-theme="moonlight"] .extra-speed-row {
  background: rgba(5, 25, 58, .72) !important;
  border-color: var(--moon-gold-soft-line) !important;
  color: var(--moon-text) !important;
}

html[data-theme="moonlight"] .modcircle,
html[data-theme="moonlight"] .scorebox input,
html[data-theme="moonlight"] .bonbox input,
html[data-theme="moonlight"] .hstat input,
html[data-theme="moonlight"] .cbox2 input {
  box-shadow: inset 0 0 0 1px rgba(176, 221, 255, .08), 0 0 8px rgba(255, 224, 138, .06);
}

/* Explicit text hierarchy for the main sheet. */
html[data-theme="moonlight"] .abn,
html[data-theme="moonlight"] .sb-hdr,
html[data-theme="moonlight"] .dsbox-title,
html[data-theme="moonlight"] .wtbl th,
html[data-theme="moonlight"] .cbox2 label,
html[data-theme="moonlight"] .hfl > label,
html[data-theme="moonlight"] .hstat label,
html[data-theme="moonlight"] .bonbox label,
html[data-theme="moonlight"] .cbox label,
html[data-theme="moonlight"] .inventory-subheading,
html[data-theme="moonlight"] .equipped-slot-label,
html[data-theme="moonlight"] .feature-meta-row,
html[data-theme="moonlight"] .proficiency-type-label,
html[data-theme="moonlight"] .armor-class-panel-title,
html[data-theme="moonlight"] .inventory-filter-label,
html[data-theme="moonlight"] .spellbook-subtitle,
html[data-theme="moonlight"] .tabs .tab {
  color: var(--moon-gold-bright) !important;
  opacity: 1 !important;
  text-shadow: 0 0 7px rgba(255, 224, 138, .13);
}

html[data-theme="moonlight"] .tabs .tab.on {
  color: #ffffff !important;
  border-bottom-color: var(--moon-gold-bright) !important;
  text-shadow: 0 0 8px rgba(148, 211, 255, .38);
}

html[data-theme="moonlight"] .sn,
html[data-theme="moonlight"] .sb,
html[data-theme="moonlight"] .wtbl td input,
html[data-theme="moonlight"] .sb-card textarea,
html[data-theme="moonlight"] .condition-display,
html[data-theme="moonlight"] .condition-explanation,
html[data-theme="moonlight"] .condition-explanation strong,
html[data-theme="moonlight"] .feature-entry,
html[data-theme="moonlight"] .inventory-unified-row,
html[data-theme="moonlight"] .journal-note-entry,
html[data-theme="moonlight"] .proficiency-value-row,
html[data-theme="moonlight"] .extra-speed-row,
html[data-theme="moonlight"] .inventory-unified-table td,
html[data-theme="moonlight"] .inventory-unified-table input,
html[data-theme="moonlight"] .inventory-unified-table select,
html[data-theme="moonlight"] .inventory-unified-table textarea {
  color: var(--moon-text) !important;
}

html[data-theme="moonlight"] .hfl > input,
html[data-theme="moonlight"] .cbox input,
html[data-theme="moonlight"] .hp-cur-input,
html[data-theme="moonlight"] .hp-max-input,
html[data-theme="moonlight"] .modcircle input,
html[data-theme="moonlight"] .scorebox input,
html[data-theme="moonlight"] .bonbox input,
html[data-theme="moonlight"] .hstat input,
html[data-theme="moonlight"] .cbox2 input,
html[data-theme="moonlight"] .sb,
html[data-theme="moonlight"] .wtbl td input {
  color: #ffffff !important;
  border-color: var(--moon-gold-soft-line) !important;
}

/* Gold borders should remain clearly visible against ocean blue. */
html[data-theme="moonlight"] .ab,
html[data-theme="moonlight"] .bonbox,
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .cbox,
html[data-theme="moonlight"] .dsbox,
html[data-theme="moonlight"] .calendar-widget,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .condition-control,
html[data-theme="moonlight"] .condition-explanation,
html[data-theme="moonlight"] .inventory-card,
html[data-theme="moonlight"] .inventory-equipment-card,
html[data-theme="moonlight"] .inventory-unified-card,
html[data-theme="moonlight"] .equipped-carried-card,
html[data-theme="moonlight"] .features-traits-main,
html[data-theme="moonlight"] .proficiencies-card,
html[data-theme="moonlight"] .armor-class-panel,
html[data-theme="moonlight"] .spellbook-card,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .wtbl th,
html[data-theme="moonlight"] .wtbl td,
html[data-theme="moonlight"] .inventory-unified-table th,
html[data-theme="moonlight"] .inventory-unified-table td {
  border-color: var(--moon-gold-soft-line) !important;
}

html[data-theme="moonlight"] .sb-hdr,
html[data-theme="moonlight"] .inventory-unified-table th,
html[data-theme="moonlight"] .wtbl th {
  background: rgba(3, 18, 45, .60);
  border-bottom-color: var(--moon-gold-line) !important;
}

html[data-theme="moonlight"] .sb-hdr::before,
html[data-theme="moonlight"] .sb-hdr::after,
html[data-theme="moonlight"] .insp,
html[data-theme="moonlight"] .dot.on,
html[data-theme="moonlight"] .svdie.on,
html[data-theme="moonlight"] .condition-chip.active {
  color: var(--moon-gold-bright);
}

html[data-theme="moonlight"] .dot,
html[data-theme="moonlight"] .svdie {
  border-color: rgba(194, 227, 255, .82);
}

html[data-theme="moonlight"] .dot.on,
html[data-theme="moonlight"] .svdie.on {
  background: var(--moon-gold);
  border-color: var(--moon-gold-bright);
}

html[data-theme="moonlight"] .condition-chip.active {
  background: rgba(255, 224, 138, .22) !important;
  border-color: var(--moon-gold-bright) !important;
}

/* Preserve readable editing surfaces in tables and notes. */
html[data-theme="moonlight"] .wtbl td,
html[data-theme="moonlight"] .inventory-unified-table td {
  background: rgba(2, 16, 39, .44);
}

html[data-theme="moonlight"] .wtbl tr:hover td,
html[data-theme="moonlight"] .inventory-unified-table tr:hover td {
  background: rgba(21, 64, 116, .38);
}

html[data-theme="moonlight"] .condition-chevron {
  border-color: var(--moon-gold-bright);
}

/* Small luminous edge without turning the UI neon. */
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .ab,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .inventory-unified-card,
html[data-theme="moonlight"] .equipped-carried-card {
  box-shadow:
    0 3px 10px rgba(0,0,0,.22),
    0 0 11px rgba(110, 191, 255, .06),
    inset 0 0 0 1px rgba(255, 238, 175, .05);
}

/* ─── Moonlight phase 4: ghost-blue accents, readable panels, icon navigation ─── */

/* Proper graphical switch: no emoji glyphs. */
.theme-toggle {
  gap: 8px;
  padding: 6px 9px;
  border-radius: 999px;
}

.theme-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 20px;
  padding: 2px;
  border: 1px solid rgba(43,56,102,.35);
  border-radius: 999px;
  background: rgba(43,56,102,.12);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.14);
}

.theme-toggle-orb {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f4cf6b;
  box-shadow: 0 0 6px rgba(244,207,107,.48);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.theme-toggle-orb::before,
.theme-toggle-orb::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(244,207,107,.34);
  border-radius: 50%;
}

.theme-toggle-orb::after {
  inset: 3px 1px 3px 5px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: background .2s ease;
}

html[data-theme="moonlight"] .theme-toggle-track {
  border-color: rgba(183,224,255,.58);
  background: rgba(2,19,47,.70);
}

html[data-theme="moonlight"] .theme-toggle-orb {
  transform: translateX(17px);
  background: #d7f0ff;
  box-shadow: 0 0 9px rgba(160,219,255,.78);
}

html[data-theme="moonlight"] .theme-toggle-orb::before {
  border-color: rgba(180,226,255,.46);
}

html[data-theme="moonlight"] .theme-toggle-orb::after {
  background: #173a6e;
}

/* Fitting line-art images instead of emoji navigation icons. */
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.tab-icon,
.nav-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

.nav-icon {
  width: 18px;
  height: 18px;
}

.overview-action-link::before,
.overview-action-link::after {
  content: none !important;
}

html[data-theme="moonlight"] .tab-icon,
html[data-theme="moonlight"] .nav-icon {
  filter: drop-shadow(0 0 5px rgba(150,218,255,.58));
}

/* Mobile switch should stay unobtrusive in crowded toolbars. */
@media (max-width: 700px) {
  .theme-toggle,
  .theme-toggle-compact {
    gap: 5px;
    padding: 4px 6px;
    font-size: 8px;
    letter-spacing: .35px;
  }

  .theme-toggle-track {
    width: 31px;
    height: 17px;
    padding: 2px;
  }

  .theme-toggle-orb {
    width: 11px;
    height: 11px;
  }

  html[data-theme="moonlight"] .theme-toggle-orb {
    transform: translateX(14px);
  }

  .sheet-toolbar .theme-toggle-label,
  .dm-header-actions .theme-toggle-label {
    display: none;
  }

  .tab {
    gap: 4px;
    padding-inline: 7px;
  }

  .tab-icon {
    width: 14px;
    height: 14px;
  }
}

html[data-theme="moonlight"] {
  /* Replace the earlier gold gilding with ghostly cyan-blue line work. */
  --moon-ghost: #b9e5ff;
  --moon-ghost-bright: #e2f6ff;
  --moon-ghost-line: rgba(181, 226, 255, .88);
  --moon-ghost-soft-line: rgba(146, 205, 246, .58);
  --moon-ghost-faint: rgba(118, 191, 240, .24);
  --gold: #9bd8ff;
  --gold-deep: #75bce9;
  --gold-light: #d4f1ff;
  --moon-gold: #9bd8ff;
  --moon-gold-bright: #e2f6ff;
  --moon-gold-line: rgba(181, 226, 255, .88);
  --moon-gold-soft-line: rgba(146, 205, 246, .58);
  --moon-accent: #b9e5ff;
  --moon-accent-2: #75c7ff;
}

html[data-theme="moonlight"] .sheet,
html[data-theme="moonlight"] .start-page,
html[data-theme="moonlight"] .dm-screen-header,
html[data-theme="moonlight"] .initiative-panel {
  box-shadow:
    0 12px 46px rgba(0,0,0,.52),
    0 0 28px rgba(88,172,237,.12),
    inset 0 0 0 1px rgba(220,244,255,.10);
}

html[data-theme="moonlight"] .corner,
html[data-theme="moonlight"] .title-banner {
  filter: drop-shadow(0 0 8px rgba(151,218,255,.42));
}

/* Ghostly frame color across the character-sheet UI. */
html[data-theme="moonlight"] .ab,
html[data-theme="moonlight"] .bonbox,
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .cbox,
html[data-theme="moonlight"] .dsbox,
html[data-theme="moonlight"] .calendar-widget,
html[data-theme="moonlight"] .calendar-sheet-bar,
html[data-theme="moonlight"] .condition-control,
html[data-theme="moonlight"] .condition-explanation,
html[data-theme="moonlight"] .inventory-card,
html[data-theme="moonlight"] .inventory-equipment-card,
html[data-theme="moonlight"] .inventory-unified-card,
html[data-theme="moonlight"] .equipped-carried-card,
html[data-theme="moonlight"] .features-traits-main,
html[data-theme="moonlight"] .proficiencies-card,
html[data-theme="moonlight"] .armor-class-panel,
html[data-theme="moonlight"] .spellbook-card,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .slotbox,
html[data-theme="moonlight"] .journal-note-entry,
html[data-theme="moonlight"] .journal-imported-notes,
html[data-theme="moonlight"] .inventory-item-details,
html[data-theme="moonlight"] .inventory-item-details-panel,
html[data-theme="moonlight"] .inventory-legacy-notes,
html[data-theme="moonlight"] .wtbl th,
html[data-theme="moonlight"] .wtbl td,
html[data-theme="moonlight"] .inventory-unified-table th,
html[data-theme="moonlight"] .inventory-unified-table td {
  border-color: var(--moon-ghost-soft-line) !important;
}

html[data-theme="moonlight"] .sb-hdr,
html[data-theme="moonlight"] .inventory-unified-table th,
html[data-theme="moonlight"] .wtbl th,
html[data-theme="moonlight"] .slotbox,
html[data-theme="moonlight"] .journal-imported-notes > summary,
html[data-theme="moonlight"] .inventory-legacy-notes > summary {
  border-color: var(--moon-ghost-line) !important;
}

html[data-theme="moonlight"] .sb-hdr,
html[data-theme="moonlight"] .inventory-unified-table th,
html[data-theme="moonlight"] .wtbl th {
  color: var(--moon-ghost-bright) !important;
  background: rgba(1, 16, 43, .76) !important;
  text-shadow: 0 0 8px rgba(132,204,255,.26);
}

/* HP controls: deep-water buttons with ghost-blue edges. */
html[data-theme="moonlight"] .hp-adj,
html[data-theme="moonlight"] .card-hp-adj {
  border-color: var(--moon-ghost-line) !important;
  background: linear-gradient(180deg, rgba(19,75,133,.92), rgba(4,33,76,.96)) !important;
  color: var(--moon-ghost-bright) !important;
  box-shadow: 0 0 8px rgba(106,191,255,.18), inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-theme="moonlight"] .hp-adj:hover,
html[data-theme="moonlight"] .card-hp-adj:hover {
  background: linear-gradient(180deg, rgba(31,102,174,.96), rgba(7,48,104,.98)) !important;
  box-shadow: 0 0 11px rgba(124,205,255,.32), inset 0 1px 0 rgba(255,255,255,.15);
}

/* Feature buttons: readable but less cyan-flat than the previous pass. */
html[data-theme="moonlight"] .feature-add,
html[data-theme="moonlight"] .table-actions .add-btn,
html[data-theme="moonlight"] .journal-note-add,
html[data-theme="moonlight"] .inventory-add,
html[data-theme="moonlight"] .add-btn {
  border-color: var(--moon-ghost-line) !important;
  background: linear-gradient(180deg, rgba(19,75,133,.94), rgba(4,33,76,.96)) !important;
  color: var(--moon-ghost-bright) !important;
  box-shadow: 0 0 8px rgba(106,191,255,.14), inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-theme="moonlight"] .feature-add:hover,
html[data-theme="moonlight"] .table-actions .add-btn:hover,
html[data-theme="moonlight"] .journal-note-add:hover,
html[data-theme="moonlight"] .inventory-add:hover,
html[data-theme="moonlight"] .add-btn:hover {
  background: linear-gradient(180deg, rgba(31,102,174,.96), rgba(7,48,104,.98)) !important;
  box-shadow: 0 0 11px rgba(124,205,255,.28), inset 0 1px 0 rgba(255,255,255,.15);
}

/* Spell slots: remove grey daylight shading and create clean deep-water tiles. */
html[data-theme="moonlight"] .slot-grid {
  gap: 8px;
}

html[data-theme="moonlight"] .slotbox {
  background: linear-gradient(180deg, rgba(14,54,103,.86), rgba(3,25,62,.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(213,241,255,.05), 0 0 8px rgba(85,174,236,.10);
}

html[data-theme="moonlight"] .slotbox span {
  color: var(--moon-ghost-bright) !important;
  text-shadow: 0 0 7px rgba(131,207,255,.22);
}

html[data-theme="moonlight"] .slotbox input {
  padding: 3px 2px;
  border-bottom-color: var(--moon-ghost-soft-line) !important;
  background: rgba(2,18,48,.36) !important;
  color: #f3fbff !important;
}

/* Journal / notes: darker surfaces, brighter labels and readable editing text. */
html[data-theme="moonlight"] .journal-note-toolbar,
html[data-theme="moonlight"] .journal-note-entry,
html[data-theme="moonlight"] .journal-note-body,
html[data-theme="moonlight"] .journal-imported-notes,
html[data-theme="moonlight"] .inventory-legacy-notes,
html[data-theme="moonlight"] .inventory-notes-grid,
html[data-theme="moonlight"] .other-inventory-card textarea,
html[data-theme="moonlight"] .journal-note-text,
html[data-theme="moonlight"] .journal-imported-notes textarea,
html[data-theme="moonlight"] .inventory-notes-grid textarea {
  background: rgba(2, 18, 47, .68) !important;
  color: #eaf7ff !important;
}

html[data-theme="moonlight"] .journal-note-toolbar span,
html[data-theme="moonlight"] .journal-note-meta span,
html[data-theme="moonlight"] .inventory-notes-grid span,
html[data-theme="moonlight"] .journal-imported-notes > summary,
html[data-theme="moonlight"] .inventory-legacy-notes > summary {
  color: var(--moon-ghost-bright) !important;
}

html[data-theme="moonlight"] .journal-note-toolbar input,
html[data-theme="moonlight"] .journal-note-toolbar select,
html[data-theme="moonlight"] .journal-note-meta input,
html[data-theme="moonlight"] .journal-note-text,
html[data-theme="moonlight"] .journal-imported-notes textarea,
html[data-theme="moonlight"] .inventory-notes-grid textarea,
html[data-theme="moonlight"] .other-inventory-card textarea {
  border-color: var(--moon-ghost-soft-line) !important;
  color: #eaf7ff !important;
}

/* Inventory details were still inheriting daylight ink on mobile. */
html[data-theme="moonlight"] .inventory-item-details,
html[data-theme="moonlight"] .inventory-item-details-panel,
html[data-theme="moonlight"] .inventory-unified-row + .inventory-item-details-row,
html[data-theme="moonlight"] .inventory-unified-row + .inventory-item-details-row td,
html[data-theme="moonlight"] .inventory-unified-row + .inventory-item-details-row .inventory-item-details-panel,
html[data-theme="moonlight"] .inventory-unified-row + .inventory-item-details-row .inventory-item-details {
  background: rgba(2, 18, 47, .72) !important;
  color: #eaf7ff !important;
  border-color: var(--moon-ghost-soft-line) !important;
}

html[data-theme="moonlight"] .inventory-item-details::placeholder,
html[data-theme="moonlight"] .inventory-notes-grid textarea::placeholder,
html[data-theme="moonlight"] .journal-note-text::placeholder,
html[data-theme="moonlight"] .journal-imported-notes textarea::placeholder {
  color: rgba(214,239,255,.56) !important;
}

/* Keep ghost lines visible without filling the whole sheet with bright blocks. */
html[data-theme="moonlight"] .sb-card,
html[data-theme="moonlight"] .ab,
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .inventory-unified-card,
html[data-theme="moonlight"] .equipped-carried-card,
html[data-theme="moonlight"] .features-traits-main,
html[data-theme="moonlight"] .journal-notes-card {
  box-shadow:
    0 3px 10px rgba(0,0,0,.22),
    0 0 12px rgba(118,197,249,.08),
    inset 0 0 0 1px rgba(190,231,255,.05);
}

/* ─── Moonlight phase 5: final ghost-blue cleanup and compact theme switch ─── */

/* Fixed-width symbol switch. The control no longer shifts when the active theme changes. */
.theme-toggle,
.theme-toggle-compact {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 58px;
  min-width: 58px;
  height: 30px;
  padding: 0 !important;
  border-radius: 999px;
  overflow: hidden;
}

.theme-toggle-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.theme-toggle-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  border: 0;
  border-radius: inherit;
  background: rgba(31, 51, 92, .18);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.22);
}

.theme-toggle-track::before,
.theme-toggle-track::after {
  position: absolute;
  top: 50%;
  z-index: 0;
  transform: translateY(-50%);
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1;
  opacity: .78;
  pointer-events: none;
}

.theme-toggle-track::before {
  content: '☼';
  left: 7px;
  color: #d7a84c;
}

.theme-toggle-track::after {
  content: '☾';
  right: 7px;
  color: #6d8bb5;
}

.theme-toggle-orb {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(142, 104, 35, .40);
  border-radius: 50%;
  background: #f4d37a;
  box-shadow: 0 0 8px rgba(226, 181, 81, .40);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.theme-toggle-orb::before,
.theme-toggle-orb::after {
  content: none;
}

html[data-theme="moonlight"] .theme-toggle,
html[data-theme="moonlight"] .theme-toggle-compact {
  border-color: rgba(170, 222, 255, .62) !important;
  background: rgba(2, 16, 42, .92) !important;
  box-shadow: 0 0 8px rgba(115, 199, 255, .18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="moonlight"] .theme-toggle-track {
  background: rgba(1, 15, 40, .94) !important;
}

html[data-theme="moonlight"] .theme-toggle-track::before {
  color: rgba(131, 174, 215, .58);
}

html[data-theme="moonlight"] .theme-toggle-track::after {
  color: #e0f5ff;
  text-shadow: 0 0 6px rgba(149, 216, 255, .60);
}

html[data-theme="moonlight"] .theme-toggle-orb {
  transform: translateX(28px);
  border-color: rgba(186, 232, 255, .78);
  background: #d8f2ff;
  box-shadow: 0 0 10px rgba(148, 215, 255, .64);
}

@media (max-width: 700px) {
  .theme-toggle,
  .theme-toggle-compact {
    width: 48px;
    min-width: 48px;
    height: 26px;
  }

  .theme-toggle-track {
    padding: 3px;
  }

  .theme-toggle-track::before,
  .theme-toggle-track::after {
    font-size: 11px;
  }

  .theme-toggle-track::before { left: 6px; }
  .theme-toggle-track::after { right: 6px; }

  .theme-toggle-orb {
    width: 18px;
    height: 18px;
  }

  html[data-theme="moonlight"] .theme-toggle-orb {
    transform: translateX(24px);
  }

  .overview-header-actions,
  .dm-header-actions,
  .sheet-toolbar {
    align-items: center;
  }
}

html[data-theme="moonlight"] {
  /* One accent language only: spectral blue-white. */
  --gold: #a9ddff;
  --gold-deep: #8dcdf8;
  --gold-light: #e4f7ff;
  --moon-ghost: #c0e9ff;
  --moon-ghost-bright: #eefbff;
  --moon-ghost-line: rgba(190, 232, 255, .92);
  --moon-ghost-soft-line: rgba(145, 204, 244, .66);
  --moon-ghost-faint: rgba(111, 183, 234, .22);
  --moon-line: rgba(145, 204, 244, .66);
  --moon-line-strong: rgba(190, 232, 255, .92);
  --moon-accent: #c0e9ff;
  --moon-accent-2: #79cfff;
}

/* Override the daylight page background itself, not only the parchment sheet. */
html[data-theme="moonlight"],
html[data-theme="moonlight"] body,
html[data-theme="moonlight"] body.dm-body {
  background-color: #020d22 !important;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(36, 102, 174, .28), transparent 42%),
    linear-gradient(180deg, #020d22 0%, #041632 48%, #08264e 100%) !important;
  background-attachment: fixed !important;
}

/* Eliminate inherited daylight gilding from cards, lines and dotted separators. */
html[data-theme="moonlight"] :where(
  .start-page,
  .sheet,
  .sheet-toolbar,
  .dm-screen-shell,
  .spell-picker-modal,
  .spell-editor-modal,
  .library-picker-modal,
  .npc-picker-modal
) * {
  border-color: var(--moon-ghost-soft-line) !important;
}

html[data-theme="moonlight"] :where(
  .sb-hdr,
  .tracker-legend,
  .initiative-panel-header,
  .start-page-heading-row,
  .tabs,
  .tab.on,
  .spell-toolbar,
  .spell-picker-toolbar,
  .spell-card-topline,
  .spell-card-meta-grid,
  .spell-card-details,
  .inventory-mobile-sortbar,
  .inventory-subheading,
  .journal-imported-notes > summary,
  .inventory-legacy-notes > summary
) {
  border-color: var(--moon-ghost-line) !important;
}

/* DM screen: remove remaining amber borders, chips and glows. */
html[data-theme="moonlight"] .dm-screen-shell :where(
  .dm-screen-header,
  .initiative-panel,
  .round-display,
  .combatant-row,
  .combatant-order-medallion,
  .combatant-condition-chip,
  .combatant-condition-picker,
  .combatant-condition-info,
  .concentration-rune,
  .combatant-remove,
  .statblock-toggle,
  .inline-statblock,
  .inline-statblock-vitals > div,
  .inline-statblock-metadata,
  .inline-statblock-entry,
  .npc-picker-modal,
  .npc-picker-filters input,
  .npc-picker-filters select,
  .statblock-result-card
) {
  border-color: var(--moon-ghost-soft-line) !important;
}

html[data-theme="moonlight"] .dm-screen-shell :where(
  .dm-screen-kicker,
  .dm-section-label,
  .round-display span,
  .tracker-legend,
  .active-turn-text,
  .inline-statblock-vitals span,
  .inline-statblock-metadata dt,
  .inline-statblock-section h4,
  .statblock-toggle,
  .combatant-condition-open,
  .combatant-condition-remove,
  .npc-picker-close,
  .inline-statblock-close
) {
  color: var(--moon-ghost-bright) !important;
}

html[data-theme="moonlight"] .combatant-row.active-turn {
  border-color: var(--moon-ghost-line) !important;
  box-shadow: inset 4px 0 0 #92d6ff, inset 0 0 0 1px rgba(220,244,255,.14), 0 5px 14px rgba(0,0,0,.20) !important;
}

/* Character sheet: spectral lines and icons throughout. */
html[data-theme="moonlight"] .sheet :where(
  .ab,
  .bonbox,
  .sb-card,
  .cbox,
  .dsbox,
  .slotbox,
  .condition-control,
  .condition-explanation,
  .spell-card,
  .inventory-card,
  .inventory-equipment-card,
  .inventory-unified-card,
  .equipped-carried-card,
  .equipped-slot-card,
  .equipped-slot-icon-wrap,
  .inventory-unified-row,
  .inventory-item-details-panel,
  .inventory-item-details,
  .journal-note-entry,
  .journal-imported-notes,
  .inventory-legacy-notes,
  .wtbl th,
  .wtbl td,
  .inventory-unified-table th,
  .inventory-unified-table td
) {
  border-color: var(--moon-ghost-soft-line) !important;
}

html[data-theme="moonlight"] .sheet :where(
  .sb-hdr,
  .tab.on,
  .slotbox span,
  .inventory-mobile-sortbar label,
  .inventory-subheading,
  .equipped-slot-label,
  .inventory-item-details-title,
  .journal-note-toolbar span,
  .journal-note-meta span
) {
  color: var(--moon-ghost-bright) !important;
}

/* Spell cards: convert V/S/M and prepared-state accents from amber to spectral blue. */
html[data-theme="moonlight"] .spell-card,
html[data-theme="moonlight"] .spell-picker-result,
html[data-theme="moonlight"] .spell-preview-card {
  border-color: var(--moon-ghost-soft-line) !important;
}

html[data-theme="moonlight"] .spell-school-icon,
html[data-theme="moonlight"] .spell-picker-result img {
  border-color: var(--moon-ghost-soft-line) !important;
  background: rgba(20, 68, 119, .34) !important;
  box-shadow: 0 0 7px rgba(119, 204, 255, .14);
}

html[data-theme="moonlight"] .spell-level-badge,
html[data-theme="moonlight"] .spell-property-chip,
html[data-theme="moonlight"] .spell-prepared-filter,
html[data-theme="moonlight"] .spell-prepared-toggle {
  border-color: var(--moon-ghost-soft-line) !important;
  color: rgba(218, 243, 255, .82) !important;
  background: rgba(19, 70, 124, .28) !important;
}

html[data-theme="moonlight"] .spell-property-chip.active,
html[data-theme="moonlight"] .spell-prepared-filter:has(input:checked),
html[data-theme="moonlight"] .spell-prepared-toggle.is-prepared {
  border-color: var(--moon-ghost-line) !important;
  color: var(--moon-ghost-bright) !important;
  background: rgba(77, 154, 215, .30) !important;
  text-shadow: 0 0 6px rgba(138, 215, 255, .30) !important;
}

html[data-theme="moonlight"] .spell-prepared-filter span,
html[data-theme="moonlight"] .spell-prepared-toggle span:first-child,
html[data-theme="moonlight"] .spell-card-expand,
html[data-theme="moonlight"] .spell-card-edit-inline,
html[data-theme="moonlight"] .spell-card-btn,
html[data-theme="moonlight"] .spell-picker-add,
html[data-theme="moonlight"] .spell-picker-close {
  color: var(--moon-ghost-bright) !important;
  border-color: var(--moon-ghost-soft-line) !important;
  text-shadow: 0 0 6px rgba(138, 215, 255, .24) !important;
}

/* Equipped / carried: remove amber selected-state highlight and grey icon tiles. */
html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-card,
html[data-theme="moonlight"] .equipped-slot-card {
  border-color: var(--moon-ghost-soft-line) !important;
  background: linear-gradient(135deg, rgba(4, 27, 66, .78), rgba(7, 39, 83, .52)) !important;
}

html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-card.is-active,
html[data-theme="moonlight"] .equipped-slot-card.is-active {
  border-color: var(--moon-ghost-line) !important;
  background: linear-gradient(135deg, rgba(11, 62, 119, .76), rgba(5, 34, 76, .68)) !important;
  box-shadow: inset 3px 0 0 #8ed7ff, 0 0 9px rgba(106, 196, 255, .12) !important;
}

html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-icon-wrap,
html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-card.is-active .equipped-slot-icon-wrap,
html[data-theme="moonlight"] .equipped-slot-icon-wrap {
  border-color: var(--moon-ghost-soft-line) !important;
  background: rgba(21, 76, 133, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(221, 245, 255, .06), 0 0 6px rgba(114, 201, 255, .10);
}

html[data-theme="moonlight"] .equipped-slot-icon {
  filter: drop-shadow(0 0 4px rgba(151, 222, 255, .34));
}

/* Mobile inventory cards: explicitly override every daylight ink color. */
@media (max-width: 768px) {
  html[data-theme="moonlight"] .inventory-mobile-sortbar,
  html[data-theme="moonlight"] .inventory-unified-row,
  html[data-theme="moonlight"] .inventory-mobile-summary,
  html[data-theme="moonlight"] .inventory-mobile-row-toggle,
  html[data-theme="moonlight"] .inventory-unified-row.mobile-expanded,
  html[data-theme="moonlight"] .inventory-unified-row.mobile-expanded .inventory-mobile-row-toggle,
  html[data-theme="moonlight"] .inventory-unified-row + .inventory-item-details-row .inventory-item-details-panel,
  html[data-theme="moonlight"] .inventory-item-details {
    border-color: var(--moon-ghost-soft-line) !important;
    background: rgba(2, 22, 57, .82) !important;
    color: #eefaff !important;
  }

  html[data-theme="moonlight"] :where(
    .inventory-mobile-summary-name,
    .inventory-mobile-summary-location,
    .inventory-mobile-summary-meta,
    .inventory-mobile-summary-value,
    .inventory-mobile-summary-qty,
    .inventory-mobile-summary-type,
    .inventory-mobile-chevron,
    .inventory-mobile-group-toggle,
    .inventory-mobile-group-count,
    .inventory-mobile-group-chevron,
    .inventory-item-details-title,
    .inventory-item-details,
    .inventory-item-details-panel,
    .inventory-item-details-row td,
    .inventory-unified-row.mobile-expanded > td:not(.inventory-mobile-summary),
    .inventory-unified-row.mobile-expanded > td:not(.inventory-mobile-summary)::before
  ) {
    color: #eefaff !important;
    border-color: var(--moon-ghost-soft-line) !important;
  }

  html[data-theme="moonlight"] .inventory-mobile-summary-location,
  html[data-theme="moonlight"] .inventory-mobile-summary-meta,
  html[data-theme="moonlight"] .inventory-item-details::placeholder {
    color: rgba(213, 240, 255, .72) !important;
  }

  html[data-theme="moonlight"] .inventory-mobile-summary-value:not(:empty)::before,
  html[data-theme="moonlight"] .inventory-mobile-summary-qty:not(:empty)::before {
    color: rgba(170, 222, 255, .72) !important;
  }
}

/* Inline footer waves and other decorative SVG strokes should follow the spectral palette too. */
html[data-theme="moonlight"] svg path[stroke="#b8902c"],
html[data-theme="moonlight"] svg path[stroke="#8a6918"],
html[data-theme="moonlight"] svg path[stroke="#d6a838"] {
  stroke: #b9e7ff !important;
  filter: drop-shadow(0 0 3px rgba(135, 210, 255, .26));
}

/* ─── Moonlight phase 6: overview frame cleanup + truly compact mobile switch ─── */

/* Make the overview frame unmistakably spectral blue instead of champagne. */
html[data-theme="moonlight"] .start-page {
  border-color: rgba(142, 215, 255, .92) !important;
  box-shadow:
    0 10px 38px rgba(0, 0, 0, .48),
    0 0 16px rgba(96, 184, 255, .14),
    inset 0 0 0 1px rgba(205, 238, 255, .08) !important;
}

html[data-theme="moonlight"] .start-page::before {
  border-color: rgba(164, 224, 255, .58) !important;
}

html[data-theme="moonlight"] .start-page-heading-row {
  border-color: rgba(164, 224, 255, .70) !important;
}

/* Neutralize the generic mobile .start-page button flex rule for the theme switch. */
.start-page button.theme-toggle,
.start-page button.theme-toggle-compact,
.sheet-toolbar button.theme-toggle,
.dm-header-actions button.theme-toggle,
.dm-header-actions button.theme-toggle-compact {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .overview-header-actions {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .start-page button.theme-toggle,
  .start-page button.theme-toggle-compact,
  .sheet-toolbar button.theme-toggle,
  .dm-header-actions button.theme-toggle,
  .dm-header-actions button.theme-toggle-compact {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
  }

  .theme-toggle-track {
    padding: 3px !important;
  }

  .theme-toggle-track::before,
  .theme-toggle-track::after {
    font-size: 10px !important;
  }

  .theme-toggle-track::before { left: 5px !important; }
  .theme-toggle-track::after { right: 5px !important; }

  .theme-toggle-orb {
    width: 16px !important;
    height: 16px !important;
  }

  html[data-theme="moonlight"] .theme-toggle-orb {
    transform: translateX(22px) !important;
  }

  .index-accessibility-row,
  .overview-header-actions .accessibility-row {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* ─── Feature browser and defenses: Moonlight support ─────────────────── */
html[data-theme="moonlight"] .defenses-card,
html[data-theme="moonlight"] .feature-browser-toolbar {
  border-color: var(--moon-ghost-soft-line) !important;
  background: rgba(2, 22, 57, .42) !important;
}

html[data-theme="moonlight"] .feature-browser-toolbar label > span,
html[data-theme="moonlight"] .feature-category-row label,
html[data-theme="moonlight"] .feature-filter-count,
html[data-theme="moonlight"] .defense-type-cell .proficiency-type-label {
  color: var(--moon-ghost-bright) !important;
}

html[data-theme="moonlight"] .feature-browser-toolbar input,
html[data-theme="moonlight"] .feature-browser-toolbar select,
html[data-theme="moonlight"] .feature-category-row select,
html[data-theme="moonlight"] .feature-filter-clear,
html[data-theme="moonlight"] .defense-value-row input {
  border-color: var(--moon-ghost-soft-line) !important;
  background: rgba(2, 22, 57, .66) !important;
  color: #eefaff !important;
}

html[data-theme="moonlight"] .feature-filter-clear:hover,
html[data-theme="moonlight"] .feature-filter-clear:focus-visible {
  border-color: var(--moon-ghost-line) !important;
  background: rgba(77, 154, 215, .22) !important;
}

/* ─── Feature cards and defenses — refined Moonlight layout ───────────── */
html[data-theme="moonlight"] .feature-entry {
  border-color: var(--moon-ghost-soft-line) !important;
  background: rgba(2, 22, 57, .46) !important;
}

html[data-theme="moonlight"] .feature-entry-footer {
  border-top-color: rgba(150, 218, 255, .34) !important;
}

html[data-theme="moonlight"] .feature-category-label,
html[data-theme="moonlight"] .defense-type-cell .proficiency-type-label {
  color: var(--moon-ghost-bright) !important;
}

html[data-theme="moonlight"] .feature-category-select {
  border: none !important;
  border-bottom: 1px dotted rgba(150, 218, 255, .58) !important;
  background: transparent !important;
  color: #eefaff !important;
}

html[data-theme="moonlight"] .feature-category-select:hover,
html[data-theme="moonlight"] .feature-category-select:focus {
  border-bottom-color: var(--moon-ghost-line) !important;
  background: rgba(77, 154, 215, .12) !important;
}

html[data-theme="moonlight"] .defense-type-cell .proficiency-add-row {
  border-color: var(--moon-ghost-soft-line) !important;
  color: var(--moon-ghost-bright) !important;
}

/* Feature cards: stable details toggle in Moonlight Mode */
html[data-theme="moonlight"] .feature-details-toggle {
  color: var(--moon-text-soft, #d8e8ff);
}

html[data-theme="moonlight"] .feature-details-toggle:hover,
html[data-theme="moonlight"] .feature-details-toggle:focus-visible,
html[data-theme="moonlight"] .feature-details-toggle-icon {
  color: var(--moon-accent, #95ccff);
}

html[data-theme="moonlight"] .feature-details-panel textarea {
  background: rgba(5, 20, 45, .52);
  color: var(--moon-text, #eef6ff);
  border-color: rgba(160, 214, 255, .56);
}

/* ─── MOONLIGHT — NATIVE DROPDOWN OPTION CONTRAST ──────────────────────
   Browsers often render an opened <select> on their own surface. Keep the
   option list explicitly dark so pale Moonlight text stays readable. */
html[data-theme="moonlight"] select {
  color-scheme: dark;
}

html[data-theme="moonlight"] select option,
html[data-theme="moonlight"] select optgroup {
  background-color: #082653 !important;
  color: #f3fbff !important;
}

html[data-theme="moonlight"] select option:checked,
html[data-theme="moonlight"] select option:hover,
html[data-theme="moonlight"] select option:focus {
  background-color: #315f9f !important;
  color: #ffffff !important;
}

/* ─── MOONLIGHT — DEFENSES LEFT-ALIGNED META ROW ─────────────────────── */
html[data-theme="moonlight"] .defense-type-cell .proficiency-type-label {
  color: var(--moon-ghost-bright, #dff6ff) !important;
}

html[data-theme="moonlight"] .defense-type-cell .proficiency-add-row {
  border-color: var(--moon-ghost-soft-line, rgba(156, 220, 255, .52)) !important;
  background: rgba(15, 52, 96, .34) !important;
  color: var(--moon-ghost-bright, #dff6ff) !important;
}

html[data-theme="moonlight"] .defense-type-cell .proficiency-add-row:hover,
html[data-theme="moonlight"] .defense-type-cell .proficiency-add-row:focus-visible {
  border-color: var(--moon-ghost-line, rgba(181, 232, 255, .82)) !important;
  background: rgba(77, 154, 215, .24) !important;
}