/* ============================================================================
   INFINITE VIEWER THEMES (viewer-only scope)
   Single source for viewer theme styling + fallback defaults
   ============================================================================ */

:root {
    --viewer-page-bg-color: #0f1218;
    --viewer-page-bg-image: url('/Images/Possible%20background.jpg');
    --viewer-panel-bg: rgba(68, 71, 78, 0.95);
    --viewer-panel-border: #6b6f7a;
    --viewer-panel-heading: #e0e6ed;
    --viewer-panel-text: #e0e6ed;
    --viewer-panel-muted: #b0b6bd;

    --viewer-btn-primary: #4a90e2;
    --viewer-btn-primary-hover: #357abd;
    --viewer-btn-secondary: #6b6f7a;
    --viewer-btn-secondary-hover: #5a5d68;

    --viewer-search-bg: #2a2d35;
    --viewer-search-border: #6b6f7a;
    --viewer-search-text: #e0e6ed;

    --viewer-canvas-bg: transparent;
    --viewer-cell-bg: rgba(255, 255, 255, 0.08);
    --viewer-cell-bg-hover: rgba(255, 255, 255, 0.12);
    --viewer-cell-border: rgba(255, 255, 255, 0.72);
    --viewer-cell-border-hover: rgba(255, 255, 255, 0.82);
    --viewer-cell-highlight-bg: #4a90e2;
    --viewer-cell-highlight-border: #ffd700;

    --viewer-line-primary: #6b6f7a;
    --viewer-line-spouse: #4a90e2;
    --viewer-line-sibling: #8a8e95;
    --viewer-wiring-line: #ffffff;
    --viewer-wiring-selected: #f6e05e;
    --viewer-wiring-marker-bg: rgba(31, 34, 39, 0.95);
    --viewer-wiring-marker-text: #ffffff;

    --viewer-icon-bg: rgba(255, 255, 255, 0.12);
    --viewer-icon-bg-hover: rgba(255, 255, 255, 0.2);
    --viewer-icon-text: #6b3818;

    --viewer-cell-name: #6b3818;
    --viewer-cell-date: #6b3818;
    --viewer-cell-uid: #74401d;

    --viewer-modal-overlay: rgba(0, 0, 0, 0.56);
    --viewer-modal-bg-image-overlay: linear-gradient(rgba(68, 71, 78, 0.26), rgba(68, 71, 78, 0.26));
    --viewer-modal-title: #6f3b19;
    --viewer-modal-text: #6b3818;
    --viewer-modal-border: rgba(222, 184, 138, 0.33);
    --viewer-modal-divider: rgba(214, 170, 120, 0.34);
    --viewer-modal-close-bg: #c93e3e;
    --viewer-modal-close-text: #ffffff;

    --viewer-modal-surface: rgba(255, 255, 255, 0.22);
    --viewer-modal-surface-soft: rgba(255, 247, 234, 0.7);
    --viewer-modal-surface-strong: #8e9399;
    --viewer-modal-surface-strong-text: #6b3818;
    --viewer-modal-chip-bg: rgba(255, 240, 219, 0.64);
    --viewer-modal-chip-border: rgba(111, 59, 25, 0.4);
    --viewer-modal-chip-text: #6f3b19;
    --viewer-modal-button-bg: rgba(166, 102, 42, 0.1);
    --viewer-modal-button-hover: rgba(166, 102, 42, 0.18);
    --viewer-modal-button-border: rgba(111, 59, 25, 0.55);
    --viewer-modal-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --viewer-timeline-track-start: rgba(84, 136, 199, 0.65);
    --viewer-timeline-track-end: rgba(162, 104, 52, 0.68);
    --viewer-timeline-date: #4877b3;
    --viewer-timeline-date-undated: #8a623f;
    --viewer-timeline-dot-ring: rgba(96, 52, 23, 0.62);
    --viewer-timeline-dot-glow: rgba(247, 224, 196, 0.78);
    --viewer-modal-tooltip-bg: rgba(100, 100, 100, 0.95);

    --theme-picker-card-bg: rgba(255, 249, 240, 0.76);
    --theme-picker-card-border: rgba(111, 59, 25, 0.28);
    --theme-picker-card-text: #5b3116;
    --theme-picker-card-muted: #6e482d;
    --theme-picker-card-active: #d6aa78;
    --theme-picker-card-active-shadow: rgba(214, 170, 120, 0.35);
    --theme-picker-status: #5b3116;

    /* Compatibility bridge for older shared tokens still referenced in viewer CSS */
    --theme-modal-bg: var(--viewer-panel-bg);
    --theme-modal-text: var(--viewer-modal-text);
    --theme-modal-border: var(--viewer-modal-border);
    --theme-overlay-close-bg: var(--viewer-modal-close-bg);
    --theme-accent-text: var(--viewer-modal-close-text);
    --theme-muted-text: var(--viewer-panel-muted);
}

body[data-viewer-theme='autumn'] {
    --viewer-page-bg-color: #0f1218;
    --viewer-page-bg-image:
        linear-gradient(rgba(74, 48, 25, 0.2), rgba(30, 21, 14, 0.34)),
        radial-gradient(circle at 68% 24%, rgba(255, 210, 142, 0.18), transparent 52%),
        url('/Images/Possible%20background.jpg');
    --viewer-panel-bg: rgba(68, 71, 78, 0.95);
    --viewer-panel-border: #6b6f7a;
    --viewer-panel-heading: #e0e6ed;
    --viewer-panel-text: #e0e6ed;
    --viewer-panel-muted: #b0b6bd;

    --viewer-btn-primary: #4a90e2;
    --viewer-btn-primary-hover: #357abd;
    --viewer-btn-secondary: #6b6f7a;
    --viewer-btn-secondary-hover: #5a5d68;

    --viewer-search-bg: #2a2d35;
    --viewer-search-border: #6b6f7a;
    --viewer-search-text: #e0e6ed;

    --viewer-canvas-bg: transparent;
    --viewer-cell-bg: rgba(255, 255, 255, 0.08);
    --viewer-cell-bg-hover: rgba(255, 255, 255, 0.12);
    --viewer-cell-border: rgba(255, 255, 255, 0.72);
    --viewer-cell-border-hover: rgba(255, 255, 255, 0.82);
    --viewer-cell-highlight-bg: #4a90e2;
    --viewer-cell-highlight-border: #ffd700;

    --viewer-line-primary: #6b6f7a;
    --viewer-line-spouse: #4a90e2;
    --viewer-line-sibling: #8a8e95;
    --viewer-wiring-line: #ffffff;
    --viewer-wiring-selected: #f6e05e;
    --viewer-wiring-marker-bg: rgba(31, 34, 39, 0.95);
    --viewer-wiring-marker-text: #ffffff;

    --viewer-icon-bg: rgba(255, 255, 255, 0.12);
    --viewer-icon-bg-hover: rgba(255, 255, 255, 0.2);
    --viewer-icon-text: #6b3818;

    --viewer-cell-name: #6b3818;
    --viewer-cell-date: #6b3818;
    --viewer-cell-uid: #74401d;

    --viewer-modal-overlay: rgba(0, 0, 0, 0.56);
    --viewer-modal-bg-image-overlay: linear-gradient(rgba(68, 71, 78, 0.26), rgba(68, 71, 78, 0.26));
    --viewer-modal-title: #6f3b19;
    --viewer-modal-text: #6b3818;
    --viewer-modal-border: rgba(222, 184, 138, 0.33);
    --viewer-modal-divider: rgba(214, 170, 120, 0.34);
    --viewer-modal-close-bg: #c93e3e;
    --viewer-modal-close-text: #ffffff;

    --theme-picker-card-bg: rgba(255, 249, 240, 0.76);
    --theme-picker-card-border: rgba(111, 59, 25, 0.28);
    --theme-picker-card-text: #5b3116;
    --theme-picker-card-muted: #6e482d;
    --theme-picker-card-active: #d6aa78;
    --theme-picker-status: #5b3116;
}

body[data-viewer-theme='dark'] {
    --viewer-page-bg-color: #060b14;
    --viewer-page-bg-image:
        radial-gradient(circle at 18% 14%, rgba(84, 136, 196, 0.2), transparent 46%),
        radial-gradient(circle at 82% 74%, rgba(34, 83, 143, 0.2), transparent 52%),
        linear-gradient(162deg, #060b14 0%, #0d1827 54%, #081223 100%);
    --viewer-panel-bg: rgba(16, 22, 33, 0.95);
    --viewer-panel-border: #2f435d;
    --viewer-panel-heading: #e6f1ff;
    --viewer-panel-text: #d8e6f9;
    --viewer-panel-muted: #95a9c5;

    --viewer-btn-primary: #3a8ad9;
    --viewer-btn-primary-hover: #2f75bb;
    --viewer-btn-secondary: #2a3f5a;
    --viewer-btn-secondary-hover: #23344a;

    --viewer-search-bg: #122032;
    --viewer-search-border: #35506f;
    --viewer-search-text: #ebf4ff;

    --viewer-canvas-bg: rgba(8, 14, 22, 0.18);
    --viewer-cell-bg: rgba(12, 28, 49, 0.82);
    --viewer-cell-bg-hover: rgba(14, 34, 61, 0.92);
    --viewer-cell-border: rgba(164, 197, 235, 0.78);
    --viewer-cell-border-hover: rgba(208, 226, 247, 0.9);
    --viewer-cell-highlight-bg: #3a8ad9;
    --viewer-cell-highlight-border: #f1c761;

    --viewer-line-primary: #9eb9d8;
    --viewer-line-spouse: #7cc3ff;
    --viewer-line-sibling: #a5b7d1;
    --viewer-wiring-line: #dceafe;
    --viewer-wiring-selected: #f3d483;
    --viewer-wiring-marker-bg: rgba(10, 24, 40, 0.94);
    --viewer-wiring-marker-text: #e4efff;

    --viewer-icon-bg: rgba(126, 164, 208, 0.2);
    --viewer-icon-bg-hover: rgba(126, 164, 208, 0.34);
    --viewer-icon-text: #dbe9ff;

    --viewer-cell-name: #e6f2ff;
    --viewer-cell-date: #cadcf3;
    --viewer-cell-uid: #9eb4d1;

    --viewer-modal-overlay: rgba(7, 12, 20, 0.84);
    --viewer-modal-bg-image-overlay: linear-gradient(rgba(15, 28, 45, 0.82), rgba(13, 22, 34, 0.84));
    --viewer-modal-title: #b8d9ff;
    --viewer-modal-text: #dceafe;
    --viewer-modal-border: rgba(73, 103, 139, 0.82);
    --viewer-modal-divider: rgba(73, 103, 139, 0.8);
    --viewer-modal-close-bg: #e04b4b;
    --viewer-modal-close-text: #ffffff;

    --viewer-modal-surface: rgba(21, 36, 55, 0.76);
    --viewer-modal-surface-soft: rgba(17, 28, 43, 0.82);
    --viewer-modal-surface-strong: #172435;
    --viewer-modal-surface-strong-text: #e2efff;
    --viewer-modal-chip-bg: rgba(24, 42, 65, 0.82);
    --viewer-modal-chip-border: rgba(110, 146, 188, 0.56);
    --viewer-modal-chip-text: #d8e6f9;
    --viewer-modal-button-bg: rgba(58, 138, 217, 0.18);
    --viewer-modal-button-hover: rgba(58, 138, 217, 0.32);
    --viewer-modal-button-border: rgba(110, 146, 188, 0.66);
    --viewer-modal-card-shadow: 0 3px 14px rgba(1, 6, 16, 0.44);
    --viewer-timeline-track-start: rgba(87, 155, 237, 0.78);
    --viewer-timeline-track-end: rgba(56, 94, 139, 0.78);
    --viewer-timeline-date: #a9d1ff;
    --viewer-timeline-date-undated: #9bb4d0;
    --viewer-timeline-dot-ring: rgba(126, 164, 208, 0.88);
    --viewer-timeline-dot-glow: rgba(16, 32, 50, 0.92);
    --viewer-modal-tooltip-bg: rgba(12, 21, 34, 0.94);

    --theme-picker-card-bg: rgba(19, 33, 50, 0.78);
    --theme-picker-card-border: rgba(92, 131, 173, 0.48);
    --theme-picker-card-text: #dceafe;
    --theme-picker-card-muted: #a8bdd8;
    --theme-picker-card-active: #6cb5ff;
    --theme-picker-card-active-shadow: rgba(98, 167, 245, 0.44);
    --theme-picker-status: #cfe1f7;
}

body[data-viewer-theme='bright'] {
    --viewer-page-bg-color: #f5efe3;
    --viewer-page-bg-image:
        radial-gradient(circle at 18% 16%, rgba(214, 189, 152, 0.28), transparent 48%),
        radial-gradient(circle at 84% 74%, rgba(185, 151, 110, 0.2), transparent 52%),
        linear-gradient(162deg, #f8f1e4 0%, #f2e7d4 54%, #e9dbc6 100%);
    --viewer-panel-bg: rgba(250, 244, 230, 0.96);
    --viewer-panel-border: #c6ae89;
    --viewer-panel-heading: #4a3522;
    --viewer-panel-text: #4c3724;
    --viewer-panel-muted: #7a5f45;

    --viewer-btn-primary: #8b5e34;
    --viewer-btn-primary-hover: #724b29;
    --viewer-btn-secondary: #b39d79;
    --viewer-btn-secondary-hover: #9a845f;

    --viewer-search-bg: #fff9ee;
    --viewer-search-border: #c6ae89;
    --viewer-search-text: #453122;

    --viewer-canvas-bg: rgba(255, 249, 240, 0.32);
    --viewer-cell-bg: rgba(255, 252, 246, 0.86);
    --viewer-cell-bg-hover: rgba(255, 252, 247, 0.96);
    --viewer-cell-border: rgba(120, 92, 65, 0.5);
    --viewer-cell-border-hover: rgba(96, 72, 50, 0.74);
    --viewer-cell-highlight-bg: #8b5e34;
    --viewer-cell-highlight-border: #d7953a;

    --viewer-line-primary: #7b664f;
    --viewer-line-spouse: #976236;
    --viewer-line-sibling: #9a856d;
    --viewer-wiring-line: #4a3522;
    --viewer-wiring-selected: #d7953a;
    --viewer-wiring-marker-bg: rgba(248, 238, 222, 0.96);
    --viewer-wiring-marker-text: #4a3522;

    --viewer-icon-bg: rgba(130, 96, 63, 0.14);
    --viewer-icon-bg-hover: rgba(130, 96, 63, 0.24);
    --viewer-icon-text: #4a3522;

    --viewer-cell-name: #4a3522;
    --viewer-cell-date: #4a3522;
    --viewer-cell-uid: #6d5034;

    --viewer-modal-overlay: rgba(42, 28, 15, 0.38);
    --viewer-modal-bg-image-overlay: linear-gradient(rgba(255, 248, 236, 0.9), rgba(252, 242, 226, 0.9));
    --viewer-modal-title: #5f3c22;
    --viewer-modal-text: #4c3724;
    --viewer-modal-border: rgba(180, 141, 98, 0.74);
    --viewer-modal-divider: rgba(191, 154, 112, 0.74);
    --viewer-modal-close-bg: #c54242;
    --viewer-modal-close-text: #ffffff;

    --viewer-modal-surface: rgba(255, 250, 241, 0.74);
    --viewer-modal-surface-soft: rgba(255, 250, 242, 0.88);
    --viewer-modal-surface-strong: #ede0ca;
    --viewer-modal-surface-strong-text: #4a3522;
    --viewer-modal-chip-bg: rgba(255, 241, 216, 0.82);
    --viewer-modal-chip-border: rgba(166, 128, 85, 0.58);
    --viewer-modal-chip-text: #5a3b23;
    --viewer-modal-button-bg: rgba(139, 94, 52, 0.12);
    --viewer-modal-button-hover: rgba(139, 94, 52, 0.22);
    --viewer-modal-button-border: rgba(139, 94, 52, 0.48);
    --viewer-modal-card-shadow: 0 2px 10px rgba(71, 49, 30, 0.14);
    --viewer-timeline-track-start: rgba(171, 122, 72, 0.64);
    --viewer-timeline-track-end: rgba(116, 78, 44, 0.72);
    --viewer-timeline-date: #7a4f26;
    --viewer-timeline-date-undated: #8f7458;
    --viewer-timeline-dot-ring: rgba(130, 89, 52, 0.7);
    --viewer-timeline-dot-glow: rgba(255, 247, 230, 0.9);
    --viewer-modal-tooltip-bg: rgba(90, 64, 42, 0.9);

    --theme-picker-card-bg: rgba(255, 250, 240, 0.95);
    --theme-picker-card-border: rgba(166, 128, 85, 0.52);
    --theme-picker-card-text: #4c3724;
    --theme-picker-card-muted: #73573b;
    --theme-picker-card-active: #9a6433;
    --theme-picker-card-active-shadow: rgba(186, 134, 80, 0.36);
    --theme-picker-status: #4c3724;
}

body[data-viewer-theme='green'] {
    --viewer-page-bg-color: #0d2816;
    --viewer-page-bg-image:
        radial-gradient(circle at 20% 20%, rgba(110, 176, 108, 0.26), transparent 48%),
        radial-gradient(circle at 80% 70%, rgba(56, 116, 67, 0.28), transparent 54%),
        linear-gradient(162deg, #0d2816 0%, #184429 54%, #12351f 100%);
    --viewer-panel-bg: rgba(22, 56, 34, 0.95);
    --viewer-panel-border: #397047;
    --viewer-panel-heading: #d8f1da;
    --viewer-panel-text: #c9e6cb;
    --viewer-panel-muted: #9fcfa8;

    --viewer-btn-primary: #3f8a4e;
    --viewer-btn-primary-hover: #316f3d;
    --viewer-btn-secondary: #2a5a36;
    --viewer-btn-secondary-hover: #22482c;

    --viewer-search-bg: #1a3f26;
    --viewer-search-border: #397047;
    --viewer-search-text: #dff5e0;

    --viewer-canvas-bg: rgba(18, 49, 28, 0.2);
    --viewer-cell-bg: rgba(17, 70, 37, 0.84);
    --viewer-cell-bg-hover: rgba(21, 82, 43, 0.92);
    --viewer-cell-border: rgba(166, 223, 173, 0.74);
    --viewer-cell-border-hover: rgba(205, 236, 211, 0.92);
    --viewer-cell-highlight-bg: #3f8a4e;
    --viewer-cell-highlight-border: #e2c66e;

    --viewer-line-primary: #84c991;
    --viewer-line-spouse: #68be7b;
    --viewer-line-sibling: #a6d48b;
    --viewer-wiring-line: #d2ebd5;
    --viewer-wiring-selected: #e2c66e;
    --viewer-wiring-marker-bg: rgba(20, 55, 31, 0.92);
    --viewer-wiring-marker-text: #d8f1da;

    --viewer-icon-bg: rgba(123, 200, 132, 0.22);
    --viewer-icon-bg-hover: rgba(123, 200, 132, 0.34);
    --viewer-icon-text: #d8f1da;

    --viewer-cell-name: #daf2dc;
    --viewer-cell-date: #cfead1;
    --viewer-cell-uid: #add2b4;

    --viewer-modal-overlay: rgba(14, 32, 19, 0.74);
    --viewer-modal-bg-image-overlay: linear-gradient(rgba(22, 58, 34, 0.84), rgba(19, 48, 31, 0.84));
    --viewer-modal-title: #d6efd9;
    --viewer-modal-text: #d9f1dc;
    --viewer-modal-border: rgba(80, 161, 97, 0.76);
    --viewer-modal-divider: rgba(80, 161, 97, 0.76);
    --viewer-modal-close-bg: #c53b3b;
    --viewer-modal-close-text: #ffffff;

    --viewer-modal-surface: rgba(25, 66, 37, 0.62);
    --viewer-modal-surface-soft: rgba(22, 58, 34, 0.78);
    --viewer-modal-surface-strong: #1c4a2a;
    --viewer-modal-surface-strong-text: #d8f1da;
    --viewer-modal-chip-bg: rgba(34, 89, 48, 0.78);
    --viewer-modal-chip-border: rgba(96, 179, 114, 0.62);
    --viewer-modal-chip-text: #d8f1da;
    --viewer-modal-button-bg: rgba(67, 160, 71, 0.18);
    --viewer-modal-button-hover: rgba(67, 160, 71, 0.32);
    --viewer-modal-button-border: rgba(115, 191, 130, 0.66);
    --viewer-modal-card-shadow: 0 3px 12px rgba(7, 22, 10, 0.34);
    --viewer-timeline-track-start: rgba(122, 197, 127, 0.78);
    --viewer-timeline-track-end: rgba(76, 133, 73, 0.78);
    --viewer-timeline-date: #b0e3b5;
    --viewer-timeline-date-undated: #a6ccb0;
    --viewer-timeline-dot-ring: rgba(141, 219, 153, 0.86);
    --viewer-timeline-dot-glow: rgba(22, 62, 30, 0.9);
    --viewer-modal-tooltip-bg: rgba(17, 45, 24, 0.92);

    --theme-picker-card-bg: rgba(22, 58, 34, 0.78);
    --theme-picker-card-border: rgba(95, 179, 114, 0.58);
    --theme-picker-card-text: #d7efd9;
    --theme-picker-card-muted: #afd6b5;
    --theme-picker-card-active: #85cf95;
    --theme-picker-card-active-shadow: rgba(129, 199, 132, 0.46);
    --theme-picker-status: #d7efd9;
}

body[data-viewer-theme='blue'] {
    --viewer-page-bg-color: #04131d;
    --viewer-page-bg-image:
        radial-gradient(circle at 18% 20%, rgba(0, 191, 214, 0.26), transparent 44%),
        radial-gradient(circle at 84% 74%, rgba(0, 124, 151, 0.24), transparent 52%),
        linear-gradient(160deg, #04131d 0%, #062235 56%, #03111b 100%);
    --viewer-panel-bg: rgba(5, 26, 38, 0.95);
    --viewer-panel-border: #0f5568;
    --viewer-panel-heading: #c7fbff;
    --viewer-panel-text: #b6f4fa;
    --viewer-panel-muted: #79c4cb;

    --viewer-btn-primary: #00a7b8;
    --viewer-btn-primary-hover: #008d9d;
    --viewer-btn-secondary: #0d4659;
    --viewer-btn-secondary-hover: #0a3a49;

    --viewer-search-bg: #082131;
    --viewer-search-border: #0f5568;
    --viewer-search-text: #d4fbff;

    --viewer-canvas-bg: rgba(4, 24, 36, 0.2);
    --viewer-cell-bg: rgba(6, 46, 66, 0.84);
    --viewer-cell-bg-hover: rgba(8, 56, 81, 0.92);
    --viewer-cell-border: rgba(115, 232, 244, 0.76);
    --viewer-cell-border-hover: rgba(173, 247, 255, 0.9);
    --viewer-cell-highlight-bg: #00a7b8;
    --viewer-cell-highlight-border: #ffd479;

    --viewer-line-primary: #84dce7;
    --viewer-line-spouse: #54e1f5;
    --viewer-line-sibling: #8dd2d9;
    --viewer-wiring-line: #d8fdff;
    --viewer-wiring-selected: #ffd479;
    --viewer-wiring-marker-bg: rgba(4, 34, 48, 0.93);
    --viewer-wiring-marker-text: #d7fbff;

    --viewer-icon-bg: rgba(0, 167, 184, 0.24);
    --viewer-icon-bg-hover: rgba(0, 167, 184, 0.36);
    --viewer-icon-text: #c9fcff;

    --viewer-cell-name: #d6fcff;
    --viewer-cell-date: #bdf2f8;
    --viewer-cell-uid: #8ad2db;

    --viewer-modal-overlay: rgba(2, 11, 16, 0.82);
    --viewer-modal-bg-image-overlay: linear-gradient(rgba(5, 34, 48, 0.86), rgba(5, 24, 36, 0.86));
    --viewer-modal-title: #a6f7ff;
    --viewer-modal-text: #d6fcff;
    --viewer-modal-border: rgba(0, 176, 197, 0.72);
    --viewer-modal-divider: rgba(0, 176, 197, 0.72);
    --viewer-modal-close-bg: #d14242;
    --viewer-modal-close-text: #ffffff;

    --viewer-modal-surface: rgba(8, 42, 56, 0.7);
    --viewer-modal-surface-soft: rgba(8, 35, 48, 0.86);
    --viewer-modal-surface-strong: #0e3a47;
    --viewer-modal-surface-strong-text: #d4fbff;
    --viewer-modal-chip-bg: rgba(9, 56, 72, 0.78);
    --viewer-modal-chip-border: rgba(44, 188, 212, 0.66);
    --viewer-modal-chip-text: #c7faff;
    --viewer-modal-button-bg: rgba(0, 167, 184, 0.18);
    --viewer-modal-button-hover: rgba(0, 167, 184, 0.34);
    --viewer-modal-button-border: rgba(0, 199, 220, 0.68);
    --viewer-modal-card-shadow: 0 3px 14px rgba(0, 10, 16, 0.5);
    --viewer-timeline-track-start: rgba(0, 214, 235, 0.82);
    --viewer-timeline-track-end: rgba(9, 144, 166, 0.78);
    --viewer-timeline-date: #7ff6ff;
    --viewer-timeline-date-undated: #9fcdd1;
    --viewer-timeline-dot-ring: rgba(103, 240, 255, 0.9);
    --viewer-timeline-dot-glow: rgba(5, 24, 30, 0.9);
    --viewer-modal-tooltip-bg: rgba(3, 20, 30, 0.94);

    --theme-picker-card-bg: rgba(7, 40, 54, 0.78);
    --theme-picker-card-border: rgba(0, 183, 206, 0.58);
    --theme-picker-card-text: #cff9ff;
    --theme-picker-card-muted: #8fdbe3;
    --theme-picker-card-active: #00d6eb;
    --theme-picker-card-active-shadow: rgba(0, 214, 235, 0.45);
    --theme-picker-status: #cff9ff;
}

#controls-panel,
#admin-tools-panel,
#wiring-panel,
#wiring-lines-modal .wiring-lines-modal-content,
#layer-indicator,
#info-panel,
#loading-overlay {
    background: var(--viewer-panel-bg) !important;
    border-color: var(--viewer-panel-border) !important;
}

#controls-panel h3,
#admin-tools-panel h3,
#wiring-panel h3,
#layer-indicator,
#info-panel,
#info-panel .info-label,
.control-group label,
#zoom-display,
.grid-label,
.grid-color-hint,
#wiring-status {
    color: var(--viewer-panel-text);
}

#controls-panel .control-group[style*='border-top'] {
    border-top-color: var(--viewer-panel-border) !important;
}

#admin-tools-panel .wiring-panel-header,
#wiring-panel .wiring-panel-header,
#wiring-lines-modal .wiring-panel-header,
#admin-tools-panel .admin-tools-tools-group,
.wiring-points,
#wiring-lines-table th,
#wiring-lines-table td {
    border-color: var(--viewer-panel-border) !important;
}

#wiring-lines-modal .wiring-panel-header h3 {
    color: var(--viewer-panel-heading) !important;
}

#wiring-lines-table td {
    color: var(--viewer-panel-text) !important;
}

#wiring-lines-table th {
    color: var(--viewer-panel-muted) !important;
}

#wiring-lines-table input[type="checkbox"] {
    accent-color: var(--viewer-btn-primary);
}

#controls-panel .control-group[style*='border-top'] div,
#controls-panel .control-group[style*='border-top'] strong {
    color: var(--viewer-panel-muted) !important;
}

#controls-panel .control-group[style*='border-top'] strong {
    color: var(--viewer-panel-heading) !important;
}

#controls-panel button,
#admin-tools-panel button:not(.close-btn),
#wiring-panel button:not(.close-btn),
#wiring-lines-modal button:not(.close-btn),
#themeModal .theme-option,
#themeModal .theme-reset-btn {
    background: var(--viewer-btn-primary);
    color: #ffffff;
}

#controls-panel button:hover,
#admin-tools-panel button:not(.close-btn):hover,
#wiring-panel button:not(.close-btn):hover,
#wiring-lines-modal button:not(.close-btn):hover,
#themeModal .theme-option:hover,
#themeModal .theme-reset-btn:hover {
    background: var(--viewer-btn-primary-hover);
}

#controls-panel button.secondary,
#admin-tools-panel button.secondary:not(.close-btn),
#wiring-panel button.secondary:not(.close-btn),
#wiring-lines-modal button.secondary:not(.close-btn) {
    background: var(--viewer-btn-secondary);
}

#controls-panel button.secondary:hover,
#admin-tools-panel button.secondary:not(.close-btn):hover,
#wiring-panel button.secondary:not(.close-btn):hover,
#wiring-lines-modal button.secondary:not(.close-btn):hover {
    background: var(--viewer-btn-secondary-hover);
}

#search-input,
#admin-layer-switch,
#wiring-panel select,
#wiring-panel input,
#zoom-display {
    background: var(--viewer-search-bg);
    border-color: var(--viewer-search-border);
    color: var(--viewer-search-text);
}

body {
    background-color: var(--viewer-page-bg-color) !important;
    background-image: var(--viewer-page-bg-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

#canvas-container {
    background: var(--viewer-canvas-bg) !important;
}

.cell-background {
    fill: var(--viewer-cell-bg) !important;
    stroke: var(--viewer-cell-border) !important;
}

.family-cell:hover .cell-background {
    fill: var(--viewer-cell-bg-hover) !important;
    stroke: var(--viewer-cell-border-hover) !important;
}

.cell-background.highlighted {
    fill: var(--viewer-cell-highlight-bg) !important;
    stroke: var(--viewer-cell-highlight-border) !important;
}

.cell-name {
    fill: var(--viewer-cell-name) !important;
}

.cell-dates {
    fill: var(--viewer-cell-date) !important;
}

.cell-uid {
    fill: var(--viewer-cell-uid) !important;
}

.connection-line {
    stroke: var(--viewer-line-primary) !important;
}

.connection-line.spouse {
    stroke: var(--viewer-line-spouse) !important;
}

.connection-line.parent-child {
    stroke: var(--viewer-line-primary) !important;
}

.connection-line.sibling {
    stroke: var(--viewer-line-sibling) !important;
}

.wiring-line {
    stroke: var(--viewer-wiring-line) !important;
}

.wiring-line.selected {
    stroke: var(--viewer-wiring-selected) !important;
}

.wiring-marker-circle {
    fill: var(--viewer-wiring-marker-bg) !important;
    stroke: var(--viewer-wiring-line) !important;
}

.wiring-marker-text {
    fill: var(--viewer-wiring-marker-text) !important;
}

.detail-icon {
    background: var(--viewer-icon-bg) !important;
    color: var(--viewer-icon-text) !important;
}

.detail-icon:hover {
    background: var(--viewer-icon-bg-hover) !important;
}

#detailsModal,
#documentsModal,
#militaryModal,
#galleryModal,
#soundModal,
#notesModal,
#timelineModal,
#printModal,
#themeModal {
    background: var(--viewer-modal-overlay) !important;
}

#detailsModal .modal-content,
#documentsModal .modal-content,
#militaryModal .modal-content,
#galleryModal .modal-content,
#soundModal .modal-content,
#notesModal .modal-content,
#timelineModal .modal-content,
#printModal .modal-content,
#themeModal .modal-content {
    border: 1px solid var(--viewer-modal-border) !important;
    background-image: var(--viewer-modal-bg-image-overlay), url('/Images/Possible%20background.jpg') !important;
    background-size: cover;
    background-position: center center;
    color: var(--viewer-modal-text) !important;
}

#detailsModal .modal-title,
#documentsModal .modal-title,
#militaryModal .modal-title,
#galleryModal .modal-title,
#soundModal .modal-title,
#notesModal .modal-title,
#timelineModal .modal-title,
#printModal .modal-title,
#themeModal .modal-title {
    color: var(--viewer-modal-title) !important;
    border-bottom: 1px solid var(--viewer-modal-divider) !important;
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
}

#detailsModal .detail-label,
#detailsModal .detail-data,
#documentsModal,
#militaryModal,
#galleryModal,
#soundModal,
#notesModal,
#timelineModal,
#printModal,
#themeModal {
    color: var(--viewer-modal-text);
}

#closeDetailsModal,
#closeDocumentsModal,
#closeMilitaryModal,
#closeGalleryModal,
#closeSoundModal,
#closeNotesModal,
#closeTimelineModal,
#closePrintModal,
#closeThemeModal {
    background: var(--viewer-modal-close-bg) !important;
    color: var(--viewer-modal-close-text) !important;
}

.theme-modal-content {
    width: min(760px, 95vw) !important;
    max-width: 760px !important;
    max-height: min(82vh, 760px) !important;
    padding: 18px 16px 16px !important;
    border-radius: 10px !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.theme-modal-content-body {
    margin-top: 10px;
}

.theme-modal-description {
    color: var(--viewer-modal-text);
    line-height: 1.5;
    font-size: 13px;
    border-bottom: 1px solid var(--viewer-modal-divider);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.theme-option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-option {
    border: 1px solid var(--theme-picker-card-border);
    border-radius: 8px;
    background: var(--theme-picker-card-bg) !important;
    color: var(--theme-picker-card-text) !important;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

.theme-option:hover {
    filter: brightness(1.02);
}

.theme-option.active {
    border-color: var(--theme-picker-card-active);
    box-shadow: 0 0 0 2px var(--theme-picker-card-active-shadow);
}

.theme-option-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.theme-option-desc {
    display: block;
    font-size: 12px;
    color: var(--theme-picker-card-muted);
}

.theme-modal-footer-note {
    margin-top: 10px;
    color: var(--theme-picker-status);
    font-size: 12px;
    min-height: 18px;
}

/* Extended modal component theming */
#detailsContent .details-member-title {
    color: var(--viewer-modal-title) !important;
    border-bottom: 1px solid var(--viewer-modal-divider) !important;
}

#detailsModal .detail-icon:hover {
    background: var(--viewer-icon-bg-hover) !important;
}

#detailsModal .detail-icon[data-title]:hover::after {
    background: var(--viewer-modal-tooltip-bg);
}

#documentsModal #documentsContent h2,
#galleryModal #galleryContent h2,
#soundModal #soundContent h2,
.notes-shell h2,
.timeline-shell h2,
.print-summary,
.tv-counter,
.sound-counter {
    color: var(--viewer-modal-title) !important;
}

.documents-shell,
.image-viewer-shell,
.sound-shell,
.timeline-shell {
    border-top: 1px solid var(--viewer-modal-divider);
}

.documents-toolbar {
    border: 1px solid var(--viewer-modal-divider);
    background: var(--viewer-modal-surface);
    color: var(--viewer-modal-text);
}

.documents-loading,
.gallery-loading,
.sound-title,
.tv-caption,
.print-fit-row,
.print-page-item,
.print-empty {
    color: var(--viewer-modal-text);
}

.documents-list-wrap,
.sound-list,
.print-preview-wrap,
.print-pages-panel {
    border: 1px solid var(--viewer-modal-divider);
    background: var(--viewer-modal-surface);
}

.documents-list thead th,
.sound-table th {
    color: var(--viewer-modal-title);
    background: var(--viewer-modal-surface-soft);
    border-bottom: 1px solid var(--viewer-modal-divider);
}

.documents-list tbody td,
.sound-table td {
    color: var(--viewer-modal-text);
    border-bottom: 1px solid var(--viewer-modal-divider);
}

.doc-action-btn,
.tv-arrow,
.sound-nav-btn,
.sound-row-btn {
    border: 1px solid var(--viewer-modal-button-border);
    background: var(--viewer-modal-button-bg);
    color: var(--viewer-modal-text);
}

.doc-action-btn:hover,
.tv-arrow:hover:not(:disabled),
.sound-nav-btn:hover:not(:disabled),
.sound-row-btn:hover:not(:disabled) {
    background: var(--viewer-modal-button-hover);
}

.notes-source-badge,
.timeline-chip {
    border: 1px solid var(--viewer-modal-chip-border);
    background: var(--viewer-modal-chip-bg);
    color: var(--viewer-modal-chip-text);
}

.notes-body {
    border: 1px solid var(--viewer-modal-divider);
    background: var(--viewer-modal-surface-soft);
    color: var(--viewer-modal-text);
}

.timeline-mode-btn {
    border: 1px solid var(--viewer-modal-chip-border);
    background: var(--viewer-modal-chip-bg);
    color: var(--viewer-modal-chip-text);
}

.timeline-mode-btn:hover {
    background: var(--viewer-modal-surface);
}

.timeline-mode-btn.active {
    background: var(--viewer-btn-primary);
    border-color: var(--viewer-btn-primary-hover);
    color: #ffffff;
}

.timeline-track::before {
    background: linear-gradient(180deg, var(--viewer-timeline-track-start), var(--viewer-timeline-track-end));
    opacity: 0.86;
}

.timeline-event-dot {
    border-color: var(--viewer-timeline-dot-ring);
    box-shadow: 0 0 0 2px var(--viewer-timeline-dot-glow);
}

.timeline-event-card {
    border: 1px solid var(--viewer-modal-chip-border);
    background: var(--viewer-modal-surface-soft);
    color: var(--viewer-modal-text);
    box-shadow: var(--viewer-modal-card-shadow);
}

.timeline-event-date {
    color: var(--viewer-timeline-date);
}

.timeline-event.undated .timeline-event-date {
    color: var(--viewer-timeline-date-undated);
}

.timeline-event-title,
.timeline-empty h4 {
    color: var(--viewer-modal-title);
}

.timeline-empty {
    border: 1px dashed var(--viewer-modal-chip-border);
    background: var(--viewer-modal-surface-soft);
    color: var(--viewer-modal-text);
}

.timeline-footnote {
    color: var(--viewer-panel-muted);
}

#print-fit-value {
    color: var(--viewer-btn-primary);
}

.active-print-option {
    outline: 2px solid var(--theme-picker-card-active);
    background: var(--viewer-btn-primary) !important;
    color: #ffffff;
}

.print-page-item {
    border-color: var(--viewer-modal-chip-border);
    background: var(--viewer-modal-surface-soft);
}

.print-page-item.selected {
    border-color: var(--viewer-btn-primary);
    background: var(--viewer-modal-surface);
}

.tv-screen,
.tv-frame-empty,
.sound-player-frame {
    border: 2px solid var(--viewer-modal-button-border);
    background: var(--viewer-modal-surface-strong);
    color: var(--viewer-modal-surface-strong-text);
}

.viewer-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--viewer-modal-overlay);
}

.viewer-confirm-panel {
    width: min(520px, 100%);
    background: var(--viewer-panel-bg);
    border: 2px solid var(--viewer-panel-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.viewer-confirm-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--viewer-panel-border);
}

.viewer-confirm-title {
    margin: 0;
    color: var(--viewer-panel-heading);
}

.viewer-confirm-body {
    padding: 18px 20px;
    color: var(--viewer-panel-text);
    line-height: 1.5;
}

.viewer-confirm-actions {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--viewer-panel-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}