/* ==========================================================================
   Alliance Worship — Dark Mode Theme System
   ========================================================================== */

:root[data-theme="dark"],
html[data-theme="dark"] {
  color-scheme: dark;

  /* Alliance Brand Colors (Optimized for Dark Theme) */
  --alliance-orange: #d9823e;
  --alliance-green: #89b362;
  --alliance-yellow: #e7bb20;
  --alliance-blue: #5d93aa;
  --alliance-red: #d85c5a;
  --alliance-gray: #8d98a0;

  /* Semantics */
  --ink: #f1f4f6;
  --muted: #9aa5ac;
  --line: #2b3339;
  --paper: #1b2024;
  --canvas: #121518;
  --white: #1b2024;

  --blue-deep: #5d93aa;
  --blue-soft: rgba(93, 147, 170, 0.18);
  --green: #89b362;
  --green-soft: rgba(137, 179, 98, 0.18);
  --yellow-soft: rgba(231, 187, 32, 0.16);
  --danger: #db6563;
  --danger-soft: rgba(219, 101, 99, 0.18);

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 24px 70px rgba(0, 0, 0, 0.65);

  /* Announcements / Members / Preaching token compatibility */
  --orange: #d9823e;
  --yellow: #e7bb20;
  --green: #89b362;
  --blue: #5d93aa;
  --red: #d85c5a;
  --gray: #8d98a0;
  --gold: #e7bb20;

  /* Mobile quick access tokens */
  --forest: #0e1512;
  --forest-soft: #192720;
  --cream: #171d1b;
}

/* Scrollbars */
[data-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: #37424b transparent;
}
[data-theme="dark"] *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #37424b;
  border-radius: 999px;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: #485662;
}

/* Base Body and Layout */
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: var(--canvas) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] body {
  background: radial-gradient(circle at 0 0, rgba(93, 147, 170, 0.12), transparent 28rem),
              linear-gradient(180deg, #15191d 0%, #121518 100%) !important;
}

/* ==========================================================================
   Header & Top Navigation (index.html)
   ========================================================================== */
[data-theme="dark"] .topbar {
  background: rgba(21, 26, 30, 0.94) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .brand-copy strong {
  color: #9ea8af !important;
}

[data-theme="dark"] .brand-copy small {
  color: var(--ink) !important;
}

[data-theme="dark"] .topbar nav button {
  color: var(--muted) !important;
}

[data-theme="dark"] .topbar nav button:hover {
  color: var(--ink) !important;
  background: #232a30 !important;
}

[data-theme="dark"] .topbar nav .nav-active {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .topbar nav .nav-active::after {
  background: var(--alliance-blue) !important;
}

[data-theme="dark"] .church {
  color: var(--muted) !important;
}

[data-theme="dark"] .live-status {
  background: rgba(137, 179, 98, 0.18) !important;
  color: #a6d07e !important;
}

[data-theme="dark"] .live-status i {
  background: var(--alliance-green) !important;
  box-shadow: 0 0 0 4px rgba(137, 179, 98, 0.25) !important;
}

[data-theme="dark"] .build-version {
  border-color: var(--line) !important;
  background: #1e252a !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .avatar {
  background: #2b333a !important;
  color: #f1f4f6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .header-settings-button,
[data-theme="dark"] .header-theme-button {
  border-color: var(--line) !important;
  background: #20262b !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .header-settings-button:hover,
[data-theme="dark"] .header-theme-button:hover {
  border-color: var(--alliance-blue) !important;
  color: #82b5cc !important;
  background: var(--blue-soft) !important;
}

/* ==========================================================================
   Workspace & Panels (index.html)
   ========================================================================== */
[data-theme="dark"] .panel {
  background: rgba(27, 32, 36, 0.95) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .section-head h1,
[data-theme="dark"] .section-head h2,
[data-theme="dark"] .modal-head h2 {
  color: var(--ink) !important;
}

[data-theme="dark"] .eyebrow {
  color: var(--alliance-gray) !important;
}

/* Primary, Secondary, Buttons */
[data-theme="dark"] .primary,
[data-theme="dark"] .present-button {
  background: #4a7a91 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .primary:hover,
[data-theme="dark"] .present-button:hover {
  background: #568ba4 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .secondary {
  background: #22282d !important;
  color: #82b5cc !important;
  border-color: #353f47 !important;
}

[data-theme="dark"] .secondary:hover {
  background: #2a333a !important;
  border-color: #465561 !important;
  color: #9ecde3 !important;
}

[data-theme="dark"] .icon-button {
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .icon-button:hover {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .ghost:hover {
  background: rgba(219, 101, 99, 0.16) !important;
}

/* Library Panel */
[data-theme="dark"] .library-accordion {
  background: #171b1f !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .library-accordion.open {
  background: #1d2328 !important;
  border-color: #384550 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] .library-accordion-head {
  background: #1a2024 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .library-accordion-head:hover {
  background: #22292f !important;
}

[data-theme="dark"] .library-accordion-head span b {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .library-accordion[data-library-section="slides"] .library-accordion-head span b {
  background: var(--yellow-soft) !important;
  color: #e7bb20 !important;
}

[data-theme="dark"] .library-accordion-head i {
  background: #242c32 !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .library-create-row {
  color: var(--muted) !important;
}

[data-theme="dark"] .song-docx-dropzone {
  border-color: #36444f !important;
  background: linear-gradient(135deg, #1c2227, #171c20) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .song-docx-dropzone:hover,
[data-theme="dark"] .song-docx-dropzone.dragging {
  border-color: var(--alliance-blue) !important;
  background: #222a31 !important;
}

[data-theme="dark"] .song-docx-dropzone > b {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .compact-docx strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .song-docx-status {
  background: #181d22 !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .song-docx-status strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .song-docx-status small {
  color: var(--muted) !important;
}

[data-theme="dark"] .song-docx-status.success {
  background: rgba(137, 179, 98, 0.18) !important;
  border-color: #375434 !important;
  color: #a6d07e !important;
}

[data-theme="dark"] .song-docx-status.error {
  background: rgba(219, 101, 99, 0.18) !important;
  border-color: #5c2c2b !important;
  color: #f1817f !important;
}

[data-theme="dark"] .search {
  background: #161a1d !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .search input {
  color: var(--ink) !important;
}

[data-theme="dark"] .search input::placeholder {
  color: #637079 !important;
}

[data-theme="dark"] .search:focus-within {
  border-color: var(--alliance-blue) !important;
  background: #1a2025 !important;
  box-shadow: 0 0 0 3px rgba(93, 147, 170, 0.22) !important;
}

[data-theme="dark"] .search span {
  color: #82b5cc !important;
}

[data-theme="dark"] .chip {
  background: #21282e !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .chip:hover {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .chip.active {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-card {
  background: #1c2227 !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .song-card:hover {
  background: #232a30 !important;
  border-color: #3f4d58 !important;
}

[data-theme="dark"] .song-card.selected {
  border-color: #375434 !important;
  border-left-color: var(--alliance-green) !important;
  background: linear-gradient(90deg, rgba(137, 179, 98, 0.18), #1c2227 40%) !important;
}

[data-theme="dark"] .song-card strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .song-card small {
  color: var(--muted) !important;
}

[data-theme="dark"] .song-glyph {
  background-color: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .slide-thumb {
  background-color: var(--yellow-soft) !important;
  color: var(--alliance-yellow) !important;
}

[data-theme="dark"] .slide-drag-handle {
  color: var(--muted) !important;
}

[data-theme="dark"] .default-slide-card {
  background: #1c2227 !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .default-slide-card:hover {
  background: #232a30 !important;
}

[data-theme="dark"] .default-slide-button {
  background: #21282e !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .default-slide-button:hover {
  background: rgba(231, 187, 32, 0.16) !important;
  border-color: var(--alliance-yellow) !important;
  color: var(--alliance-yellow) !important;
}

[data-theme="dark"] .default-slide-button.active {
  background: rgba(231, 187, 32, 0.22) !important;
  border-color: var(--alliance-yellow) !important;
  color: var(--alliance-yellow) !important;
}

[data-theme="dark"] .slide-favorite-button {
  color: var(--muted) !important;
}

[data-theme="dark"] .slide-favorite-button.active {
  color: var(--alliance-yellow) !important;
}

[data-theme="dark"] .slide-library-rename,
[data-theme="dark"] .slide-library-edit {
  color: var(--muted) !important;
}

[data-theme="dark"] .slide-library-rename:hover,
[data-theme="dark"] .slide-library-edit:hover {
  border-color: var(--alliance-blue) !important;
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .slide-library-title-input {
  background: #15191d !important;
  color: var(--ink) !important;
  border-color: var(--alliance-blue) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(93, 147, 170, 0.22) !important;
}

[data-theme="dark"] .empty-library {
  color: var(--muted) !important;
}

[data-theme="dark"] .empty-library strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .song-action {
  color: var(--muted) !important;
}

[data-theme="dark"] .song-action:hover {
  color: #82b5cc !important;
  background: #232a30 !important;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .song-action.is-active,
[data-theme="dark"] .song-media-menu[open] > summary {
  color: #82b5cc !important;
  background: var(--blue-soft) !important;
  box-shadow: inset 0 0 0 1px var(--alliance-blue) !important;
}

[data-theme="dark"] .song-media-menu-panel {
  background: #1c2227 !important;
  border-color: var(--line) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .song-media-menu-panel button {
  color: var(--ink) !important;
}

[data-theme="dark"] .song-media-menu-panel button:hover {
  color: #82b5cc !important;
  background: #232a30 !important;
}

[data-theme="dark"] .song-media-menu-panel button.is-danger {
  color: #f1817f !important;
  border-top-color: var(--line) !important;
}

[data-theme="dark"] .song-media-menu-panel button.is-danger:hover {
  background: rgba(219, 101, 99, 0.2) !important;
  color: #ff9b99 !important;
}

[data-theme="dark"] .song-delete-action:hover,
[data-theme="dark"] .song-delete-button:hover {
  background: rgba(219, 101, 99, 0.2) !important;
  color: #f1817f !important;
}

[data-theme="dark"] .song-add-action {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-add-action:hover {
  background: #568ba4 !important;
}

[data-theme="dark"] .add-queue {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .add-queue:hover {
  background: var(--alliance-blue) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-sort-button {
  background: #21282e !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .song-sort-button:hover {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
  border-color: var(--alliance-blue) !important;
}


/* ==========================================================================
   Queue Panel
   ========================================================================== */
[data-theme="dark"] .queue-head h2 {
  color: var(--ink) !important;
}

[data-theme="dark"] .queue-guide {
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .export-actions {
  background: #161a1d !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .export-actions-label {
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .export-actions-label .ui-icon {
  color: #82b5cc !important;
}

[data-theme="dark"] .export-format {
  color: var(--ink) !important;
}

[data-theme="dark"] .export-format:hover {
  background: #232a30 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .export-format.is-loading {
  background: #232a30 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .offline-status.ready {
  background: rgba(137, 179, 98, 0.2) !important;
  color: #a6d07e !important;
}

[data-theme="dark"] .offline-status.warning {
  background: rgba(231, 187, 32, 0.18) !important;
  color: #e7bb20 !important;
}

[data-theme="dark"] .offline-status.checking {
  background: #22292f !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .count {
  background: #20272c !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .queue-card {
  background: #1c2227 !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .queue-card:hover {
  background: #232a30 !important;
  border-color: #3e4c56 !important;
}

[data-theme="dark"] .queue-card.selected {
  border-color: #375434 !important;
  border-left-color: var(--alliance-green) !important;
  background: linear-gradient(90deg, rgba(137, 179, 98, 0.18), #1c2227 40%) !important;
}

[data-theme="dark"] .queue-index {
  background: #252d34 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .queue-card.selected .queue-index {
  background: var(--alliance-green) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .queue-item-copy strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .queue-item-copy small {
  color: var(--muted) !important;
}

[data-theme="dark"] .queue-insert span {
  background: #33404a !important;
}

[data-theme="dark"] .queue-insert button {
  background: #20272c !important;
  border-color: #4a7a91 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .queue-insert button:hover {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .empty-state {
  border-color: #313c44 !important;
  background: #161b1e !important;
}

[data-theme="dark"] .empty-state strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .empty-state p {
  color: var(--muted) !important;
}

[data-theme="dark"] .empty-icon {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

/* Queue Frames & Grouping */
[data-theme="dark"] .queue-frame {
  background: linear-gradient(180deg, rgba(93, 147, 170, 0.14), #171b1f) !important;
  border-color: var(--line) !important;
  border-left-color: var(--alliance-blue) !important;
}

[data-theme="dark"] .queue-frame.dragging {
  border-color: var(--alliance-yellow) !important;
}

[data-theme="dark"] .frame-handle {
  color: var(--alliance-blue) !important;
}

[data-theme="dark"] .frame-header .queue-item-copy small {
  color: #82b5cc !important;
}

[data-theme="dark"] .frame-header .queue-item-copy strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .frame-header > button {
  color: var(--muted) !important;
}

[data-theme="dark"] .frame-header > button:hover {
  background: #232a30 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .frame-count {
  background: #21282e !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
}

[data-theme="dark"] .frame-items {
  background: rgba(18, 21, 24, 0.65) !important;
  border-color: #2b353c !important;
}

[data-theme="dark"] .frame-items .queue-card {
  background: #1c2227 !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .frame-empty {
  color: var(--muted) !important;
}

[data-theme="dark"] .queue-outside-drop {
  background: rgba(217, 130, 62, 0.14) !important;
  border-color: var(--alliance-orange) !important;
  color: var(--alliance-orange) !important;
}

[data-theme="dark"] .inline-title-input {
  background: #15191d !important;
  color: var(--ink) !important;
  border-color: var(--alliance-blue) !important;
  box-shadow: 0 0 0 2px rgba(93, 147, 170, 0.25) !important;
}

[data-theme="dark"] .queue-footer {
  border-color: var(--line) !important;
}

[data-theme="dark"] .queue-footer small {
  color: var(--muted) !important;
}

[data-theme="dark"] .queue-footer strong {
  color: var(--ink) !important;
}

/* ==========================================================================
   Preview Panel
   ========================================================================== */
[data-theme="dark"] .preview {
  background: linear-gradient(180deg, #1b2024, #16191c) !important;
}

[data-theme="dark"] .artist {
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .preview-hint {
  background: rgba(93, 147, 170, 0.15) !important;
  color: #9ecde3 !important;
  border-left-color: var(--alliance-blue) !important;
}

[data-theme="dark"] .preview-block {
  border-color: transparent !important;
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .preview-block:hover {
  border-color: var(--alliance-blue) !important;
}

[data-theme="dark"] .preview-block:is(.structure-verse, .structure-prechorus, .structure-chorus, .structure-bridge):hover {
  border-color: var(--structure-color) !important;
}

[data-theme="dark"] .preview-block p {
  color: #d6dde2 !important;
}

[data-theme="dark"] .preview-block.on-air {
  border-color: #ff625c !important;
  box-shadow: inset 0 0 0 1px #ff625c !important;
}

[data-theme="dark"] .preview-block.on-air:hover,
[data-theme="dark"] .preview-block:is(.structure-verse, .structure-prechorus, .structure-chorus, .structure-bridge).on-air,
[data-theme="dark"] .preview-block:is(.structure-verse, .structure-prechorus, .structure-chorus, .structure-bridge).on-air:hover {
  border-color: #ff625c !important;
  border-left-color: #ff625c !important;
  box-shadow: inset 0 0 0 1px #ff625c !important;
}

[data-theme="dark"] .preview-block.on-air::after {
  display: none !important;
}

[data-theme="dark"] .block-tag {
  background: #252e35 !important;
  color: #92bfd2 !important;
}

/* Song structure indicators in dark mode */
[data-theme="dark"] .structure-verse {
  --structure-color: #88c09a;
  --structure-soft: rgba(40, 122, 75, 0.24);
  --structure-border: #2c563e;
}
[data-theme="dark"] .structure-prechorus {
  --structure-color: #e5b045;
  --structure-soft: rgba(154, 101, 0, 0.25);
  --structure-border: #63480e;
}
[data-theme="dark"] .structure-chorus {
  --structure-color: #79aee5;
  --structure-soft: rgba(39, 103, 168, 0.24);
  --structure-border: #284e73;
}
[data-theme="dark"] .structure-bridge {
  --structure-color: #b78ee0;
  --structure-soft: rgba(117, 70, 161, 0.25);
  --structure-border: #523572;
}

[data-theme="dark"] .preview-tag-option {
  background: #1f252a !important;
  border-color: var(--structure-border, var(--line)) !important;
  color: var(--structure-color, var(--muted)) !important;
}

[data-theme="dark"] .preview-tag-option.selected {
  background: var(--structure-color, var(--ink)) !important;
  border-color: var(--structure-color, var(--ink)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #1f252a, 0 0 0 3px var(--structure-color, var(--ink)) !important;
}

/* Song Structure Navigation Bar */
[data-theme="dark"] .song-structure-nav {
  scrollbar-color: #37424b transparent;
}

[data-theme="dark"] .song-structure-button {
  background: #1f252a !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .song-structure-button small {
  color: var(--muted) !important;
}

[data-theme="dark"] .song-structure-button:hover {
  background: var(--blue-soft) !important;
  border-color: var(--alliance-blue) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .song-structure-button.active {
  background: #4a7a91 !important;
  border-color: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-structure-button.structure-verse {
  border-color: #2c563e !important;
  color: #88c09a !important;
  background: rgba(40, 122, 75, 0.18) !important;
}
[data-theme="dark"] .song-structure-button.structure-verse:hover,
[data-theme="dark"] .song-structure-button.structure-verse.active {
  background: #287a4b !important;
  border-color: #287a4b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-structure-button.structure-chorus {
  border-color: #284e73 !important;
  color: #79aee5 !important;
  background: rgba(39, 103, 168, 0.18) !important;
}
[data-theme="dark"] .song-structure-button.structure-chorus:hover,
[data-theme="dark"] .song-structure-button.structure-chorus.active {
  background: #2767a8 !important;
  border-color: #2767a8 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-structure-button.structure-prechorus {
  border-color: #63480e !important;
  color: #e5b045 !important;
  background: rgba(154, 101, 0, 0.18) !important;
}
[data-theme="dark"] .song-structure-button.structure-prechorus:hover,
[data-theme="dark"] .song-structure-button.structure-prechorus.active {
  background: #9a6500 !important;
  border-color: #9a6500 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .song-structure-button.structure-bridge {
  border-color: #523572 !important;
  color: #b78ee0 !important;
  background: rgba(117, 70, 161, 0.18) !important;
}
[data-theme="dark"] .song-structure-button.structure-bridge:hover,
[data-theme="dark"] .song-structure-button.structure-bridge.active {
  background: #7546a1 !important;
  border-color: #7546a1 !important;
  color: #ffffff !important;
}

/* Inline Editing Mode in Preview */
[data-theme="dark"] #previewTitle.inline-editable-title {
  background: #15191d !important;
  color: var(--ink) !important;
  outline-color: var(--alliance-blue) !important;
}

[data-theme="dark"] #previewTitle.inline-editable-title:focus {
  outline: 2px solid var(--alliance-blue) !important;
}

[data-theme="dark"] .inline-editing .preview-block:not(.structure-verse, .structure-prechorus, .structure-chorus, .structure-bridge) {
  background-color: #171c20 !important;
  border-color: #384650 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .inline-editing .preview-block:not(.structure-verse, .structure-prechorus, .structure-chorus, .structure-bridge):hover {
  border-color: var(--alliance-blue) !important;
}

[data-theme="dark"] .inline-editing [contenteditable="true"]:focus {
  background: #20272c !important;
  outline-color: var(--alliance-blue) !important;
  color: var(--ink) !important;
}

.projection-overflow-line, .projection-overflow-line * { color: #ef5350 !important; }

[data-theme="dark"] .inline-block-actions button {
  background: #21282e !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .inline-duplicate-block {
  color: #82b5cc !important;
}

[data-theme="dark"] .inline-duplicate-block:hover {
  background: var(--blue-soft) !important;
  color: #a3cee3 !important;
}

[data-theme="dark"] .inline-delete-block {
  color: #f1817f !important;
}

[data-theme="dark"] .inline-delete-block:hover {
  background: rgba(219, 101, 99, 0.2) !important;
  color: #ff9b99 !important;
}

/* ==========================================================================
   Modals, Dialogs, Forms & Inputs
   ========================================================================== */
[data-theme="dark"] dialog {
  background: #1c2227 !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-float) !important;
}

[data-theme="dark"] dialog::backdrop {
  background: rgba(8, 10, 12, 0.78) !important;
  backdrop-filter: blur(8px) !important;
}

[data-theme="dark"] .modal-head {
  border-color: var(--line) !important;
}

[data-theme="dark"] .url-dialog-subtitle {
  color: var(--muted) !important;
}

[data-theme="dark"] .close {
  color: var(--muted) !important;
}

[data-theme="dark"] .close:hover {
  background: #262e35 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] label {
  color: #a4afb7 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #15191d !important;
  border-color: #343e46 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #637079 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--alliance-blue) !important;
  background: #1a2025 !important;
  box-shadow: 0 0 0 3px rgba(93, 147, 170, 0.22) !important;
}

[data-theme="dark"] select option {
  background: #1c2227;
  color: var(--ink);
}

[data-theme="dark"] .form-help {
  color: var(--muted) !important;
}

[data-theme="dark"] .form-error {
  background: rgba(219, 101, 99, 0.18) !important;
  color: #f1817f !important;
  border-left-color: var(--danger) !important;
}

/* Song dialog blocks */
[data-theme="dark"] .editor-block {
  background: #161a1e !important;
  border-color: var(--line) !important;
  border-left-color: var(--alliance-blue) !important;
}

[data-theme="dark"] .editor-block:hover {
  background: #1c2227 !important;
  border-color: #3e4c57 !important;
}

[data-theme="dark"] .duplicate-block:hover {
  background: var(--blue-soft) !important;
}

[data-theme="dark"] .remove-block:hover {
  background: rgba(219, 101, 99, 0.18) !important;
}

/* Song Settings Dialog */
[data-theme="dark"] .song-settings-sheet {
  background: #1c2227 !important;
}

[data-theme="dark"] .settings-option {
  background: #171b1f !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .settings-option strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .settings-option small {
  color: var(--muted) !important;
}

[data-theme="dark"] .song-position-options button {
  background: #21282e !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .song-position-options button:hover {
  background: #263037 !important;
  border-color: var(--alliance-blue) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .song-position-options button.active {
  background: var(--blue-soft) !important;
  border-color: var(--alliance-blue) !important;
  color: #82b5cc !important;
  box-shadow: inset 0 0 0 1px var(--alliance-blue) !important;
}

[data-theme="dark"] #defaultSongOverlayButton.configured,
[data-theme="dark"] #blackBackgroundButton.configured {
  color: #a6d07e !important;
  background: rgba(137, 179, 98, 0.18) !important;
  box-shadow: inset 0 0 0 1px var(--alliance-green) !important;
}

/* AI Settings Dialog */
[data-theme="dark"] .ai-settings-status {
  background: #161a1d !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .ai-settings-status strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .ai-settings-status small {
  color: var(--muted) !important;
}

[data-theme="dark"] .secret-input button {
  background: #21282e !important;
  border-color: #343e46 !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .secret-input button:hover {
  color: var(--ink) !important;
}

[data-theme="dark"] code {
  background: #232b31 !important;
  color: #e5b045 !important;
  border-radius: 4px;
  padding: 1px 4px;
}

/* Song URL import */
[data-theme="dark"] .authorization-check {
  background: rgba(93, 147, 170, 0.12) !important;
  border-color: #32434e !important;
}

[data-theme="dark"] .authorization-check small {
  color: var(--muted) !important;
}

[data-theme="dark"] .prompt-help {
  background: #161a1d !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .url-extraction-preview {
  background: #15191c !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* Visual Editor Dialog */
[data-theme="dark"] .visual-toolbar {
  background: #161a1e !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .visual-toolbar-media {
  border-color: var(--line) !important;
}

[data-theme="dark"] .visual-cover-toggle {
  background: #21282e !important;
  border-color: #354049 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .visual-toolbar button,
[data-theme="dark"] .visual-toolbar select,
[data-theme="dark"] .visual-toolbar input {
  background: #21282e !important;
  border-color: #354049 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .box-color-trigger > span {
  border-color: #354049 !important;
}

[data-theme="dark"] .box-color-palette {
  background: #1c2227 !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .box-align-buttons {
  background: #21282e !important;
  border-color: #354049 !important;
}

[data-theme="dark"] .box-align-buttons button {
  color: var(--muted) !important;
}

[data-theme="dark"] .box-align-buttons button:hover {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .box-align-buttons button.active {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .box-delete-handle {
  background: #c45c5c !important;
  color: #fff !important;
}

[data-theme="dark"] .box-color-trigger {
  background: #21282e !important;
  border-color: #354049 !important;
}

[data-theme="dark"] .box-color-trigger > span {
  box-shadow: 0 0 0 1px #354049 !important;
}

[data-theme="dark"] .box-color-palette button {
  border: 1px solid #354049 !important;
}

[data-theme="dark"] .slide-editor-shell {
  background: #14181b !important;
  border: 1px solid var(--line) !important;
}

[data-theme="dark"] .slide-editor-canvas {
  border: 1px solid var(--line) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .canvas-empty {
  color: var(--muted) !important;
}

[data-theme="dark"] .canvas-text-box.selected {
  border-color: #e7bb20 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .box-drag-handle {
  background: var(--alliance-yellow) !important;
  color: #1c2227 !important;
}

[data-theme="dark"] .box-resize-handle {
  background: var(--alliance-yellow) !important;
  border-color: #1c2227 !important;
}

[data-theme="dark"] .dynamic-field-badge {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

/* Rich Text Editors in announcements & modals */
[data-theme="dark"] .rich-text-toolbar,
[data-theme="dark"] .rich-toolbar {
  background: #171b1f !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .rich-text-toolbar button,
[data-theme="dark"] .rich-toolbar button {
  background: #21282e !important;
  border-color: #354049 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .rich-text-toolbar button:hover,
[data-theme="dark"] .rich-toolbar button:hover {
  background: var(--blue-soft) !important;
  border-color: var(--alliance-blue) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .rich-text-editor,
[data-theme="dark"] .rich-editor {
  background: #15191d !important;
  border-color: #354049 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .rich-text-editor:empty::before,
[data-theme="dark"] .rich-editor:empty::before {
  color: #637079 !important;
}

[data-theme="dark"] .rich-text-editor:focus,
[data-theme="dark"] .rich-editor:focus {
  border-color: var(--alliance-blue) !important;
  box-shadow: 0 0 0 3px rgba(93, 147, 170, 0.2) !important;
}

/* Media Library Dialog */
[data-theme="dark"] .media-library-item {
  background: #1f252a !important;
  border-color: #2d3840 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .media-library-item:hover {
  border-color: var(--alliance-green) !important;
  background: #262e35 !important;
}

[data-theme="dark"] .media-library-empty {
  color: var(--muted) !important;
}

[data-theme="dark"] .media-library-preview-stage {
  background: #101512 !important;
}

[data-theme="dark"] .media-library-preview-name {
  color: var(--muted) !important;
}

[data-theme="dark"] .notice-media-library {
  background: #171c20 !important;
}

[data-theme="dark"] .notice-library-item {
  background: #1f252a !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .notice-library-item:hover {
  border-color: var(--alliance-blue) !important;
}

/* Insert Slide Dialog */
[data-theme="dark"] .insert-type {
  background: #1f252a !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .insert-type:hover {
  border-color: var(--alliance-blue) !important;
  background: #252d34 !important;
}

[data-theme="dark"] .insert-type > b {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .insert-type small {
  color: var(--muted) !important;
}

[data-theme="dark"] .insert-type em {
  color: #82b5cc !important;
}

[data-theme="dark"] .insert-type-group + .insert-type-group {
  border-top-color: var(--line) !important;
}

[data-theme="dark"] .insert-type-group-label {
  color: var(--muted) !important;
}

[data-theme="dark"] .visual-page-nav {
  background: #1f252a !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .visual-page-duration {
  background: #171b1f !important;
  border-color: var(--line) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .visual-page-duration .ti,
[data-theme="dark"] .visual-page-duration span {
  color: #82b5cc !important;
}

[data-theme="dark"] .visual-page-duration input {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .visual-page-chip {
  background: #171b1f !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .visual-page-chip.active {
  background: var(--alliance-blue) !important;
  border-color: var(--alliance-blue) !important;
  color: #fff !important;
}

[data-theme="dark"] .deck-playback-settings {
  background: transparent !important;
  border-left-color: var(--line) !important;
}

[data-theme="dark"] .deck-playback-check,
[data-theme="dark"] .deck-playback-seconds,
[data-theme="dark"] .deck-music-row small {
  color: var(--ink) !important;
}

[data-theme="dark"] .deck-playback-seconds input {
  background: #171b1f !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .slide-type-label[data-slide-kind="simple"] {
  background: rgba(113, 145, 77, 0.2) !important;
  color: #9bbb6d !important;
}

[data-theme="dark"] .slide-type-label[data-slide-kind="deck"] {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .slide-type-label[data-slide-kind="bible"] {
  background: rgba(231, 187, 32, 0.16) !important;
  color: #e5bf4e !important;
}

[data-theme="dark"] .slide-type-label[data-slide-kind="blank"] {
  background: #2a3137 !important;
  color: #a8adb2 !important;
}

/* Bible Slide Dialog */
[data-theme="dark"] .bible-version {
  background: rgba(231, 187, 32, 0.15) !important;
  color: #e5bf4e !important;
}

[data-theme="dark"] .bible-version > span {
  background: #c59b13 !important;
}

[data-theme="dark"] .bible-version select {
  background: #21282e !important;
  border-color: rgba(231, 187, 32, 0.3) !important;
  color: #e5bf4e !important;
}

[data-theme="dark"] .bible-step {
  background: #161b1e !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .bible-step:focus-within {
  border-color: var(--alliance-blue) !important;
  background: #1b2126 !important;
}

[data-theme="dark"] .step-number {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .bible-step:nth-child(2) .step-number {
  background: var(--green-soft) !important;
  color: #a6d07e !important;
}

[data-theme="dark"] .bible-step:nth-child(3) .step-number {
  background: var(--yellow-soft) !important;
  color: #e7bb20 !important;
}

[data-theme="dark"] .step-copy strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .bible-step > select {
  background: #1e2429 !important;
}

[data-theme="dark"] .bible-selection-card {
  background: linear-gradient(135deg, #355869, #477286) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Liturgies Dialog */
[data-theme="dark"] .save-liturgy-form {
  border-color: var(--line) !important;
}

[data-theme="dark"] .liturgy-file-actions {
  border-color: var(--line) !important;
}

[data-theme="dark"] .liturgy-file-actions strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .liturgy-file-actions small {
  color: var(--muted) !important;
}

[data-theme="dark"] .saved-liturgy-card {
  background: #181d21 !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .saved-liturgy-card strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .saved-liturgy-card small {
  color: var(--muted) !important;
}

/* Bible Text Dialog */
[data-theme="dark"] .bible-text-block label {
  color: #82b5cc !important;
}

/* Custom Confirmation Dialog */
[data-theme="dark"] .confirmation-card {
  background: #1d2327 !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .confirmation-icon {
  background: rgba(219, 101, 99, 0.2) !important;
  color: #f1817f !important;
}

[data-theme="dark"] .confirmation-icon.is-neutral {
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .confirmation-copy p {
  color: #89b362 !important;
}

[data-theme="dark"] .confirmation-copy h2 {
  color: var(--ink) !important;
}

[data-theme="dark"] .confirmation-message {
  color: #b0bac2 !important;
}

[data-theme="dark"] .confirmation-close {
  color: var(--muted) !important;
}

[data-theme="dark"] .confirmation-close:hover {
  background: #2a343c !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .confirmation-cancel {
  background: #293239 !important;
  color: #92bed2 !important;
}

[data-theme="dark"] .confirmation-cancel:hover {
  background: #344049 !important;
}

[data-theme="dark"] .confirmation-confirm {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .confirmation-confirm.is-danger {
  background: #b54745 !important;
}

/* Toast */
[data-theme="dark"] .toast {
  background: #232b31 !important;
  color: #ffffff !important;
  border-left-color: var(--alliance-yellow) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   Announcements, Members, Preaching Pages
   ========================================================================== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-theme-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d4dee1;
  border-radius: 5px;
  background: #ffffff;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  transition: all .15s ease;
}

.header-theme-button:hover {
  border-color: var(--blue-deep);
  background: var(--blue-soft);
  color: var(--blue-deep);
}

[data-theme="dark"] .mobile-header {
  background: rgba(22, 27, 31, 0.95) !important;
  border-bottom-color: var(--line) !important;
}

[data-theme="dark"] .header-theme-button {
  border-color: var(--line) !important;
  background: #20262b !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .header-theme-button:hover {
  border-color: var(--alliance-blue) !important;
  background: var(--blue-soft) !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .brand strong {
  color: #9da7ae !important;
}

[data-theme="dark"] .brand small {
  color: var(--ink) !important;
}

[data-theme="dark"] .app-heading strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .app-heading small {
  color: var(--muted) !important;
}

[data-theme="dark"] .back-link {
  background: #20262b !important;
  border-color: #37444f !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .back-link:hover {
  background: #2a343c !important;
  color: #a3cee3 !important;
}

[data-theme="dark"] .current-status {
  background: rgba(137, 179, 98, 0.18) !important;
  color: #a6d07e !important;
}

[data-theme="dark"] .current-status i {
  background: var(--alliance-green) !important;
  box-shadow: 0 0 0 4px rgba(137, 179, 98, 0.25) !important;
}

[data-theme="dark"] .editor-card,
[data-theme="dark"] .history-card {
  background: rgba(27, 32, 36, 0.95) !important;
  border-color: var(--line) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .card-title h2 {
  color: var(--ink) !important;
}


/* Agenda drafts in announcements */
[data-theme="dark"] .agenda-draft-card {
  background: #171b1f !important;
  border-color: var(--line) !important;
  border-left-color: var(--yellow) !important;
}

[data-theme="dark"] .agenda-draft-head {
  color: #82b5cc !important;
}

[data-theme="dark"] .agenda-draft-head button {
  background: rgba(219, 101, 99, 0.2) !important;
  color: #f1817f !important;
}

[data-theme="dark"] .agenda-media-preview {
  background: #121518 !important;
  border-color: #344049 !important;
  color: #8d98a0 !important;
}

[data-theme="dark"] .notice-media {
  background: #0d1012 !important;
}

[data-theme="dark"] .ai-review-content {
  background: rgba(93, 147, 170, 0.18) !important;
  border-color: #344853 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .ai-review-content:hover:not(:disabled) {
  background: rgba(93, 147, 170, 0.28) !important;
}

/* Notice items list */
[data-theme="dark"] .notice-item {
  background: #171b1f !important;
  border-color: var(--line) !important;
  border-left-color: var(--yellow) !important;
}

[data-theme="dark"] .notice-item:hover,
[data-theme="dark"] .notice-item:focus {
  background: #1f252a !important;
  border-color: #3e4c57 !important;
}

[data-theme="dark"] .notice-item.active {
  border-left-color: var(--green) !important;
  background: rgba(137, 179, 98, 0.16) !important;
}

[data-theme="dark"] .notice-item.editing {
  border-color: var(--alliance-blue) !important;
  box-shadow: 0 0 0 3px rgba(93, 147, 170, 0.2) !important;
}

[data-theme="dark"] .notice-item h3 {
  color: var(--ink) !important;
}

[data-theme="dark"] .notice-preview {
  color: var(--muted) !important;
}

[data-theme="dark"] .notice-date {
  background: var(--yellow) !important;
  color: #1a1e21 !important;
}

[data-theme="dark"] .notice-meta span {
  color: #82b5cc !important;
}

[data-theme="dark"] .notice-meta button {
  color: #f1817f !important;
}

[data-theme="dark"] .empty {
  border-color: #313c44 !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .empty strong {
  color: var(--ink) !important;
}

/* Preaching live preview */
[data-theme="dark"] .preaching-live-preview {
  background: #15191c !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .preaching-live-preview small {
  color: var(--muted) !important;
}

[data-theme="dark"] .preaching-theme {
  color: var(--ink) !important;
}

[data-theme="dark"] .preaching-passage {
  color: #82b5cc !important;
}

[data-theme="dark"] .preaching-person {
  color: var(--ink) !important;
}

[data-theme="dark"] .preview-placeholder {
  color: var(--muted) !important;
}

[data-theme="dark"] .announcement-agenda-empty {
  color: var(--muted) !important;
}

[data-theme="dark"] .header-new {
  background: #4a7a91 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .header-new:hover {
  background: #568ba4 !important;
}

[data-theme="dark"] .notice-meta button:hover {
  background: rgba(219, 101, 99, 0.2) !important;
  border-radius: 4px;
}

[data-theme="dark"] input[type="date"] {
  color-scheme: dark;
}

/* Mobile Tabbar */
[data-theme="dark"] .app-tabbar {
  background: rgba(22, 26, 30, 0.96) !important;
  border-top-color: var(--line) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .app-tabbar button,
[data-theme="dark"] .app-tabbar a {
  color: var(--muted) !important;
}

[data-theme="dark"] .app-tabbar a.active {
  color: #82b5cc !important;
  background: var(--blue-soft) !important;
}

/* Floating Action Button */
[data-theme="dark"] .floating-new {
  background: #4a7a91 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   Mobile Quick Access Home (mobile.html)
   ========================================================================== */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-theme-btn {
  margin-left: auto;
  border-radius: 8px;
}

[data-theme="dark"] .mobile-home {
  background: linear-gradient(158deg, rgba(30, 36, 42, 0.82), transparent 28%), #121517 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .mobile-home::before {
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.015), 0 0 0 62px rgba(255, 255, 255, 0.01) !important;
}

[data-theme="dark"] .mobile-home .brand {
  color: var(--ink) !important;
}

[data-theme="dark"] .mobile-home h1 {
  color: var(--ink) !important;
}

[data-theme="dark"] .mobile-home .intro {
  color: var(--muted) !important;
}

[data-theme="dark"] .quick-link {
  background: #1b2126 !important;
  border-color: var(--line) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .quick-link:hover {
  background: #232b31 !important;
  border-color: #42525e !important;
}

[data-theme="dark"] .quick-link .link-copy strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .quick-link .link-copy small {
  color: var(--muted) !important;
}

[data-theme="dark"] .quick-link .link-icon {
  background: #253038 !important;
  color: #82b5cc !important;
}

[data-theme="dark"] .quick-link .link-arrow {
  color: #82b5cc !important;
}

[data-theme="dark"] .mobile-home .eyebrow {
  color: var(--alliance-orange) !important;
}

[data-theme="dark"] .mobile-home footer p {
  color: var(--muted) !important;
}

[data-theme="dark"] .mobile-home .footer-mark {
  background: var(--alliance-orange) !important;
}

/* ==========================================================================
   Japanese Lyrics (Japanese Blocks)
   ========================================================================== */
[data-theme="dark"] .lyric-japanese {
  color: #9cb0a4 !important;
}

[data-theme="dark"] .lyric-translation {
  color: #e5cb87 !important;
  border-top: 2px solid rgba(229, 203, 135, 0.72) !important;
}

[data-theme="dark"] .block-portuguese {
  color: #e5cb87;
}

[data-theme="dark"] .translation-editor-rule {
  border-top-color: rgba(229, 203, 135, 0.72);
}

/* Remaining surfaces that still used light hardcoded colors */
[data-theme="dark"] .page-intro h1,
[data-theme="dark"] .page-intro h2 {
  color: var(--ink) !important;
}

[data-theme="dark"] .page-intro > div > p:last-child,
[data-theme="dark"] .editor-help,
[data-theme="dark"] .history-help {
  color: var(--muted) !important;
}

[data-theme="dark"] .image-picker {
  background: #171b1f !important;
  border-color: #3a464e !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .image-picker:hover {
  border-color: var(--alliance-green) !important;
  background: var(--green-soft) !important;
}

[data-theme="dark"] .empty span {
  color: #82b5cc !important;
}

[data-theme="dark"] .announcements-page .count {
  background: #20272c !important;
  color: var(--muted) !important;
}

@media (max-width: 760px) {
  [data-theme="dark"] html,
  [data-theme="dark"] body {
    background: var(--canvas) !important;
  }

  [data-theme="dark"] .current-status {
    background: rgba(137, 179, 98, 0.18) !important;
  }

  [data-theme="dark"] .notice-item {
    background: #171b1f !important;
  }

  [data-theme="dark"] .mobile-header {
    background: rgba(22, 27, 31, 0.96) !important;
  }

  [data-theme="dark"] .app-tabbar {
    background: rgba(22, 26, 30, 0.96) !important;
  }
}