/* light-theme.css — Pastel Light Theme Override (v3 — Colorful Pastels) */
/* Applied via body.light-theme class — does NOT touch dark theme */

/* ============================================================
   SECTION 1: ROOT VARIABLE OVERRIDES
   ============================================================ */

body.light-theme {
    --primary: #6c7bf7;
    --accent: #ef5a6f;
    --bg: #e8e4f0;
    --panel: #edf0f5;
    --border: #b0bec5;
    --text: #1a1a2e;

    background-color: var(--bg);
    color: var(--text);
}

/* ============================================================
   SECTION 2: GENERAL ELEMENTS
   ============================================================ */

body.light-theme ::selection {
    background: var(--primary);
    color: #fff;
}

body.light-theme ::-moz-selection {
    background: var(--primary);
    color: #fff;
}

/* Scrollbar */
body.light-theme ::-webkit-scrollbar-track {
    background: #dde3ea;
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: #a0adb8;
    border: 2px solid #dde3ea;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

body.light-theme,
body.light-theme .names-list-container,
body.light-theme .results-container,
body.light-theme .gallery-grid,
body.light-theme .adv-modal-body,
body.light-theme .bg-grid,
body.light-theme #wheelImgGrid,
body.light-theme #bgGrid {
    scrollbar-color: #a0adb8 #dde3ea;
}

/* ============================================================
   SECTION 3: FLOATING FULLSCREEN BUTTON
   ============================================================ */

body.light-theme .floating-round-btn {
    background: rgba(240, 242, 247, 0.7);
    border: 1px solid var(--border);
    color: #666;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light-theme .floating-round-btn:hover {
    background: rgba(220, 225, 235, 0.9);
    color: #333;
    border-color: #8a9bb0;
}

/* ============================================================
   SECTION 4: LAYOUT — WHEEL PANEL
   ============================================================ */

body.light-theme .wheel-panel {
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme #wheel-bg-layer::before {
    background: transparent;
}

/* ============================================================
   SECTION 5: POINTER
   ============================================================ */

body.light-theme #pointer {
    border-top-color: var(--accent);
    filter: drop-shadow(-2px 0px 4px rgba(0, 0, 0, 0.25));
}

body.light-theme #pointer::before {
    border-top-color: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   SECTION 6: SPIN BUTTON
   ============================================================ */

body.light-theme #spinBtn {
    background: #fff;
    border: 3px solid #e0deda;
    color: #1a1a2e;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}

body.light-theme #spinBtn:hover {
    background: #f5f7fa;
    border-color: #d0cec8;
}

/* ============================================================
   SECTION 7: CONTROLS PANEL — CLEAN UNIFIED LIGHT
   ============================================================ */

body.light-theme .controls-panel {
    background: var(--panel);
    border-left: 2px solid var(--border);
}

@media (max-width: 800px) {
    body.light-theme .controls-panel {
        border-left: none;
        border-top: 2px solid var(--border);
    }
}

/* ============================================================
   SECTION 8: NAV CAPSULE — SUBTLE TINT
   ============================================================ */

body.light-theme .nav-capsule {
    background: #e2e6f0;
    border: 1px solid var(--border);
}

body.light-theme .nav-brand {
    color: #1a1a2e;
}

body.light-theme .nav-divider {
    background: var(--border);
}

body.light-theme .nav-menu a {
    color: #5a5a7a;
}

body.light-theme .nav-menu a:hover {
    color: #1a1a2e;
    background: rgba(108, 123, 247, 0.08);
}

body.light-theme .nav-menu a.active {
    color: #fff;
    background: var(--primary);
}

body.light-theme .nav-hide-btn {
    background: rgba(108, 123, 247, 0.1);
}

body.light-theme .nav-hide-btn:hover {
    background: var(--accent);
}

body.light-theme .nav-hide-btn img {
    filter: none;
}

/* ============================================================
   SECTION 9: TABS — CLEAN
   ============================================================ */

body.light-theme .tabs-nav {
    border-bottom: 2px solid var(--border);
}

body.light-theme .tab-link {
    color: #7a7a9a;
}

body.light-theme .tab-link.active {
    color: #1a1a2e;
    border-bottom-color: var(--accent);
}

/* ============================================================
   SECTION 10: INPUT BAR — UNIFIED LIGHT
   ============================================================ */

body.light-theme .combined-field {
    background: #fff;
    border: 2px solid var(--border);
}

body.light-theme .combined-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 123, 247, 0.15);
}

body.light-theme .combined-field.input-error {
    border-color: var(--accent) !important;
    box-shadow: 0 0 8px rgba(239, 90, 111, 0.3);
}

body.light-theme #nameInputItem {
    color: #1a1a2e;
}

body.light-theme #nameInputItem::placeholder {
    color: #8a9aaa;
}

body.light-theme .upload-icon-wrapper {
    background: #f0f2f5;
    border-left: 1px solid var(--border);
}

body.light-theme .upload-icon-wrapper img {
    filter: none;
}

body.light-theme .upload-icon-wrapper.ready {
    background: rgba(46, 213, 115, 0.15);
}

body.light-theme #addNameBtn {
    background: var(--primary);
    color: #fff;
}

body.light-theme .clear-circle-btn {
    background: #f0d4d8;
    color: #a04050;
    border: 1px solid #daa0a8;
}

body.light-theme .clear-circle-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ============================================================
   SECTION 11: NAME LIST — CRITICAL VISIBILITY FIX
   ============================================================ */

body.light-theme .names-list-container {
    background: #e4e8ee;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 6px;
}

body.light-theme .name-entry-row {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
}

/* FORCE dark text on ALL name entry spans regardless of inline styles */
body.light-theme .name-entry-row span {
    color: #1a1a2e !important;
}

body.light-theme .name-entry-row span:hover {
    color: #000 !important;
}

/* Ensure unnamed/placeholder text is also visible */
body.light-theme .name-entry-row span[style*="color:#eee"],
body.light-theme .name-entry-row span[style*="color: #eee"],
body.light-theme .name-entry-row span[style*="color:rgb"] {
    color: #1a1a2e !important;
}

body.light-theme .inline-edit-input {
    background: #fff;
    border: 2px solid var(--primary);
    color: #1a1a2e;
}

body.light-theme .inline-edit-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(108, 123, 247, 0.3);
}

body.light-theme .delete-cross {
    color: #c0a0a8 !important;
}

body.light-theme .delete-cross:hover {
    color: var(--accent) !important;
}

body.light-theme .delete-cross:active {
    background: rgba(239, 90, 111, 0.15);
}

body.light-theme .color-indicator {
    border-color: var(--indicator-color) !important;
}

body.light-theme .color-indicator.has-custom-color {
    background: var(--indicator-color) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .edit-name-icon img {
    filter: brightness(0.3);
    opacity: 0.9 !important;
}

body.light-theme .edit-name-icon:hover img {
    opacity: 1 !important;
    filter: brightness(0.15);
}

/* Weight Controls */
body.light-theme .weight-controls {
    background: #f5f0ec;
    border: 1px solid var(--border);
}

body.light-theme .weight-btn {
    color: #6a5a4a;
}

body.light-theme .weight-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #3a2a1a;
}

body.light-theme .weight-val {
    color: #1a1a2e;
    font-weight: 800;
}

/* ============================================================
   SECTION 12: BUTTONS (Shuffle, Sort)
   ============================================================ */

body.light-theme #shuffleBtn {
    background: var(--accent);
    color: #fff;
}

body.light-theme #sortBtn {
    background: #e0e4ee;
    color: #3a3a6a;
    border: 2px solid var(--border);
}

body.light-theme #sortBtn:hover {
    background: #d0d6e4;
    color: #1a1a2e;
}

/* ============================================================
   SECTION 13: SAVE/LOAD BAR — UNIFIED
   ============================================================ */

body.light-theme .save-load-bar {
    background: #e8ecf2;
    border: 1px solid var(--border);
    padding: 10px 0;
    gap: 0;
}

body.light-theme .sl-btn {
    color: #5a6070;
    padding: 5px 14px;
    flex-shrink: 0;
    white-space: nowrap;
}

body.light-theme .sl-btn:hover {
    color: #1a1a2e;
}

body.light-theme .sl-btn img {
    filter: none;
}

body.light-theme .sl-btn:hover img {
    filter: none;
}

body.light-theme .sl-btn svg {
    stroke: #5a6070;
}

body.light-theme .sl-btn:hover svg {
    stroke: #1a1a2e;
}

body.light-theme .sl-divider {
    background: rgba(176, 190, 197, 0.4);
    margin: 0 0;
    flex-shrink: 0;
    height: 24px;
}

body.light-theme .reset-danger-btn:hover {
    color: var(--accent) !important;
}

body.light-theme .reset-danger-btn:hover img {
    filter: invert(34%) sepia(88%) saturate(4500%) hue-rotate(345deg) brightness(101%) contrast(101%);
}

/* ============================================================
   SECTION 14: ADVANCED OPTIONS
   ============================================================ */

body.light-theme .adv-toggle-btn {
    background: #e4e8f0;
    border: 2px dashed var(--border);
    color: #5a5a8a;
}

body.light-theme .adv-toggle-btn:hover {
    border-color: var(--primary);
    color: #1a1a2e;
    background: #dce0ea;
}

body.light-theme .feature-tag {
    background: #e4e8f5;
    border: 1px solid var(--border);
    color: #2a2a5a;
}

body.light-theme .feature-tag .remove-tag {
    color: var(--accent);
}

/* ============================================================
   SECTION 15: RESULTS
   ============================================================ */

body.light-theme .results-container {
    background: #e4e8ee;
    border: 2px solid var(--border);
}

body.light-theme .result-row {
    border-bottom: 1px solid var(--border);
}

/* Force dark text on result spans */
body.light-theme .result-row span {
    color: #1a1a2e !important;
}

body.light-theme .result-row span[style*="color:white"],
body.light-theme .result-row span[style*="color: white"],
body.light-theme .result-row span[style*="color:#ff4757"],
body.light-theme .result-row span[style*="color: #ff4757"] {
    color: #1a1a2e !important;
}

body.light-theme .empty-msg {
    color: #7a8a9a;
}

body.light-theme .clear-btn {
    background: #d8dfe8;
    color: #2a3a5a;
    border: 2px solid var(--border);
}

body.light-theme .clear-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

body.light-theme #downloadPdfBtn {
    background: #5cb88a;
    color: #fff;
    border: none;
}

body.light-theme #downloadPdfBtn:hover {
    background: #4da87a;
}

/* ============================================================
   SECTION 16: STATS COUNTER
   ============================================================ */

body.light-theme .stats {
    color: #6a7a8a;
}

/* ============================================================
   SECTION 17: INSTRUCTIONS
   ============================================================ */

body.light-theme .instructions-wrapper {
    background: #f2f0e5;
    border: 1px solid #d8d2b8;
}

body.light-theme .instructions-heading {
    color: var(--primary);
}

body.light-theme .toggle-icon-btn {
    color: #6a6a5a;
}

body.light-theme .instructions-content li {
    color: #3a3a2a;
}

body.light-theme .instructions-content li::before {
    color: var(--primary);
}

body.light-theme .instructions-content strong {
    color: #1a1a2e;
}

/* ============================================================
   SECTION 18: ALL MODALS — UNIFIED LIGHT BASE
   ============================================================ */

body.light-theme .modal {
    background: rgba(0, 0, 0, 0.45);
}

body.light-theme .modal-content {
    background: #edf0f5;
    border: 2px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

body.light-theme .modal-header {
    color: var(--accent);
}

body.light-theme #winnerName .wave-letter {
    color: #1a1a2e;
    text-shadow: 0 0 15px rgba(108, 123, 247, 0.5);
}

body.light-theme #winnerImageContainer img,
body.light-theme .winner-popup-img {
    border-color: var(--primary);
    box-shadow: 0 0 25px rgba(108, 123, 247, 0.4);
}

body.light-theme .danger-btn {
    background: var(--accent);
    color: #fff;
}

body.light-theme #closeModal,
body.light-theme #closeTitleModalBtn {
    background: #d8dfe8;
    color: #2a3a5a;
    border: 2px solid var(--border);
}

body.light-theme #closeModal:hover,
body.light-theme #closeTitleModalBtn:hover {
    background: #c8d2e0;
    color: #1a1a2e;
}

/* ============================================================
   SECTION 19: ADVANCED SETTINGS MODAL
   ============================================================ */

body.light-theme .adv-modal-content {
    background: #edf0f5;
    border: 2px solid var(--border);
}

body.light-theme .adv-modal-content .modal-header {
    color: #1a1a2e;
    border-bottom-color: var(--border);
}

body.light-theme .close-adv-x {
    color: #9aa0b0;
}

body.light-theme .close-adv-x:hover {
    color: var(--accent);
}

body.light-theme .reset-btn {
    background: #d8dce4;
    color: #3a3a5a;
    border: 1px solid var(--border);
}

body.light-theme .reset-btn:hover {
    background: #c8ceda;
    color: #1a1a2e;
}

body.light-theme .close-adv-btn {
    background: var(--primary);
    color: #fff;
}

/* ============================================================
   ADVANCED SETTINGS GRID — LIGHT THEME (No Emoji, Responsive)
   ============================================================ */

body.light-theme .adv-grid-modal {
    background: #f0f2f7 !important;
    border-color: var(--border) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

body.light-theme .adv-header-bar {
    border-bottom-color: var(--border);
}

body.light-theme .adv-header-icon-img {
    filter: brightness(0);
    opacity: 0.6;
}

body.light-theme .adv-header-title {
    color: #1a1a2e;
}

body.light-theme .adv-header-sub {
    color: #7a8a9a;
}

body.light-theme .adv-grid-modal .close-adv-x {
    color: #7a8a9a;
    background: rgba(0,0,0,0.04);
}

body.light-theme .adv-grid-modal .close-adv-x:hover {
    background: rgba(239, 90, 111, 0.1);
    color: var(--accent);
}

body.light-theme .adv-section-label {
    color: #7a8a9a;
}

body.light-theme .adv-section-icon {
    filter: brightness(0);
    opacity: 0.35;
}

/* Preview Cards */
body.light-theme .adv-preview-card {
    background: #fff;
    border-color: var(--border);
}

body.light-theme .adv-preview-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(108, 123, 247, 0.1);
}

body.light-theme .adv-preview-card.has-content {
    border-color: rgba(108, 123, 247, 0.3);
}

body.light-theme .adv-card-visual {
    background: #e8ecf2;
    border-bottom-color: var(--border);
}

body.light-theme .adv-card-placeholder {
    opacity: 0.15;
    color: #333;
}

body.light-theme .adv-card-placeholder-icon {
    opacity: 0.15;
    filter: brightness(0);
}

body.light-theme .adv-preview-card:hover .adv-card-placeholder,
body.light-theme .adv-preview-card:hover .adv-card-placeholder-icon {
    opacity: 0.35;
}

body.light-theme .adv-card-name {
    color: #2a2a4a;
}

body.light-theme .adv-card-status {
    color: #8a9aaa;
}

body.light-theme .adv-preview-card.has-content .adv-card-status {
    color: var(--primary);
}

body.light-theme .adv-card-visual .adv-title-preview {
    color: #2a2a4a;
}

body.light-theme .adv-card-badge {
    background: var(--primary);
}

body.light-theme .adv-card-badge img {
    filter: brightness(0) invert(1);
}

/* Toggle Cards */
body.light-theme .adv-toggle-card {
    background: #fff;
    border-color: var(--border);
}

body.light-theme .adv-toggle-card:hover {
    border-color: #8a9ab0;
    background: #f8f9fc;
}

body.light-theme .adv-toggle-card:has(input:checked) {
    border-color: rgba(108, 123, 247, 0.3);
    background: rgba(108, 123, 247, 0.04);
}

body.light-theme .adv-tc-icon img {
    filter: brightness(0);
    opacity: 0.5;
}

body.light-theme .adv-tc-name {
    color: #2a2a4a;
}

body.light-theme .adv-tc-desc {
    color: #8a9aaa;
}

body.light-theme .adv-switch-slider {
    background: #c0c8d0;
}

body.light-theme .adv-switch-slider::before {
    background: #fff;
}

body.light-theme .adv-switch input:checked + .adv-switch-slider {
    background: var(--primary);
}

/* Select Cards */
body.light-theme .adv-select-card {
    background: #fff;
    border-color: var(--border);
}

body.light-theme .adv-select-card:hover {
    border-color: #8a9ab0;
}

body.light-theme .adv-sc-icon-img {
    filter: brightness(0);
    opacity: 0.5;
}

body.light-theme .adv-sc-name {
    color: #3a3a5a;
}

body.light-theme .adv-select {
    background: #e8ecf2;
    color: #2a2a4a;
    border-color: var(--border);
}

body.light-theme .adv-select:hover {
    border-color: #8a9ab0;
}

body.light-theme .adv-select:focus {
    border-color: var(--primary);
}

/* Theme Dots */
body.light-theme .adv-theme-dot.selected {
    border-color: #1a1a2e;
    box-shadow: 0 0 14px rgba(0,0,0,0.15);
}

/* Footer */
body.light-theme .adv-grid-footer {
    border-top-color: var(--border);
    background: #f0f2f7;
}

body.light-theme .adv-footer-btn img {
    filter: brightness(0);
    opacity: 0.5;
}

body.light-theme .adv-btn-reset {
    background: #e0e4ec;
    color: #5a6a7a;
    border-color: var(--border);
}

body.light-theme .adv-btn-reset:hover {
    background: #d0d6e0;
    color: #2a3a4a;
}

body.light-theme .adv-btn-apply {
    background: var(--primary);
    color: #fff;
}

body.light-theme .adv-btn-apply img {
    filter: brightness(0) invert(1);
}

/* ============================================================
   SECTION 20: SHARED GALLERY MODALS — Background, Wheel Image, Center Image
   ============================================================ */

body.light-theme .gallery-modal-content {
    background: #edf0f5 !important;
    border: 2px solid var(--border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

body.light-theme .gallery-modal-content .modal-header {
    color: #1a1a2e;
    border-bottom-color: var(--border);
}

body.light-theme .gallery-modal-content .close-adv-x {
    color: #9aa0b0;
}

body.light-theme .gallery-modal-content .close-adv-x:hover {
    color: var(--accent);
}

body.light-theme .gallery-grid-panel {
    scrollbar-color: #a0adb8 #dde3ea;
}

body.light-theme .gallery-modal-footer {
    border-top: 1px solid var(--border);
}

body.light-theme .gallery-modal-footer .reset-btn {
    background: #d8dce4;
    color: #3a3a5a;
    border: 1px solid var(--border);
}

body.light-theme .gallery-modal-footer .reset-btn:hover {
    background: #c8ceda;
    color: #1a1a2e;
}

body.light-theme .gallery-modal-footer .close-adv-btn {
    background: var(--primary);
    color: #fff;
}

body.light-theme .gallery-modal-footer .close-adv-btn:hover {
    background: #5a6ae0;
}

body.light-theme .gallery-thumb-card {
    background: #e0e4ec;
    border: 2px solid var(--border);
}

body.light-theme .gallery-thumb-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(108, 123, 247, 0.2);
    transform: translateY(-4px);
}

body.light-theme .gallery-thumb-card .gallery-thumb-img-wrap {
    background: #e8ecf2;
    border: 1px solid var(--border);
}

body.light-theme .gallery-thumb-card .gallery-thumb-label {
    color: #4a4a6a;
}

body.light-theme .gallery-grid-panel p {
    color: #5a6a7a !important;
}

body.light-theme .gallery-modal-footer .upload-ready-state {
    background: #5cb88a !important;
    border-color: #4da87a !important;
}

body.light-theme .gallery-modal-footer .upload-ready-state:hover {
    background: #4da87a !important;
}

/* Gallery upload hints */
body.light-theme .gallery-upload-hints {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
}

body.light-theme .gallery-upload-hints li {
    color: #6a7a8a;
}

body.light-theme .gallery-upload-hints li::before {
    color: var(--primary);
}

body.light-theme .gallery-upload-hints strong {
    color: #2a3a4a;
}

/* ============================================================
   SECTION 21: COLOR PICKER
   ============================================================ */

body.light-theme .picker-modal {
    background: #edf0f5;
    border: 2px solid var(--border);
    color: #1a1a2e;
}

body.light-theme .picker-header {
    background: #e2e6ee;
    border-bottom-color: var(--border);
}

body.light-theme .picker-header span {
    color: #2a3a4a;
}

body.light-theme .picker-grid {
    background: #dde2ea;
}

body.light-theme .color-swatch {
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .color-swatch:hover {
    border-color: #1a1a2e;
}

body.light-theme .color-swatch.selected {
    border-color: #1a1a2e;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

body.light-theme .picker-footer {
    background: #e2e6ee;
    border-top-color: var(--border);
}

body.light-theme .custom-add-btn {
    background: #f0f2f5;
    color: #3a4a5a;
    border-color: var(--border);
}

body.light-theme .picker-preview {
    border-color: var(--border);
}

body.light-theme #pickerHexInput {
    background: #f0f2f5;
    border-color: var(--border);
    color: #1a1a2e;
}

body.light-theme .picker-actions {
    background: #e2e6ee;
}

body.light-theme .btn-default-reset {
    background: #f0f2f5;
    border-color: var(--border);
    color: #5a6a7a;
}

body.light-theme .btn-default-reset:hover {
    background: #e4e8ee;
    color: #1a1a2e;
}

body.light-theme .picker-btn-select {
    background: #5cb88a;
    color: #fff;
}

body.light-theme .picker-btn-cancel {
    color: #7a8a9a;
}

/* ============================================================
   SECTION 22: TITLE INPUT & DISPLAY
   ============================================================ */

body.light-theme #wheelTitleDisplay {
    color: #1a1a2e;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

body.light-theme #wheelTitleDisplay:hover {
    color: var(--primary);
}

body.light-theme #wheelTitleInput {
    background: #e0e4ec;
    border: 2px solid var(--border);
    color: #1a1a2e;
}

body.light-theme #wheelTitleInput:focus {
    border-color: var(--primary);
}

/* ============================================================
   SECTION 23: SAVE FILE MODAL INPUT
   ============================================================ */

body.light-theme .modal-input {
    background: #e4e8ee;
    border: 2px solid var(--border);
    color: #1a1a2e;
}

body.light-theme .modal-input:focus {
    border-color: var(--primary);
}

body.light-theme .modal-input::placeholder {
    color: #7a8a9a;
}

/* ============================================================
   SECTION 24: TEMPLATES
   ============================================================ */

body.light-theme .template-toggle-btn {
    background: #edf0f5;
    border: 2px solid var(--border);
    color: #5a6070;
}

body.light-theme .template-toggle-btn:hover {
    color: #1a1a2e;
    border-color: #8a9ab0;
}

body.light-theme .template-grid {
    background: #e4e8ee;
}

body.light-theme .template-card {
    background: #fff;
    border: 2px solid var(--border);
    color: #2a2a3a;
}

body.light-theme .template-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(108, 123, 247, 0.15);
}

body.light-theme .template-card span {
    color: #2a2a3a;
}

body.light-theme .template-preview-box {
    background: #e4e8ee;
    border-color: var(--border);
}

body.light-theme .template-label {
    color: #2a2a3a;
}

body.light-theme .template-preview-fallback {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

/* ============================================================
   SECTION 25: WHEEL OF NAMES Q&A — PREMIUM ACCORDION LIGHT THEME
   ============================================================ */

body.light-theme .wheeltochoose-hero::before {
    background: radial-gradient(ellipse at center, rgba(108, 123, 247, 0.06) 0%, transparent 70%);
}

body.light-theme .wheeltochoose-hero h1 {
    color: #1a1a2e;
}

body.light-theme .wheeltochoose-accent {
    color: var(--accent);
}

body.light-theme .wheeltochoose-tagline {
    color: #5a5a7a;
}

body.light-theme .wheeltochoose-tagline strong {
    color: var(--primary);
}

body.light-theme .wheeltochoose-stat-number {
    color: var(--primary);
}

body.light-theme .wheeltochoose-stat-label {
    color: #7a8a9a;
}

body.light-theme .wheeltochoose-divider {
    background: linear-gradient(to right, var(--primary), var(--accent));
}

body.light-theme .wheeltochoose-section-label {
    color: var(--primary);
    background: rgba(108, 123, 247, 0.08);
    border-color: rgba(108, 123, 247, 0.2);
}

body.light-theme .wheeltochoose-quick-jump h2,
body.light-theme .wheeltochoose-faq-section h2 {
    color: #1a1a2e;
}

body.light-theme .wheeltochoose-pill {
    background: #edf0f5;
    border: 1px solid var(--border);
    color: #5a6a7a;
}

body.light-theme .wheeltochoose-pill:hover {
    border-color: var(--primary);
    color: #1a1a2e;
    background: rgba(108, 123, 247, 0.08);
}

/* Accordion Cards */
body.light-theme .wheeltochoose-faq-card {
    background: #fff;
    border: 1px solid var(--border);
}

body.light-theme .wheeltochoose-faq-card:hover {
    border-color: rgba(108, 123, 247, 0.4);
}

body.light-theme .wheeltochoose-faq-card.wheeltochoose-open {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(108, 123, 247, 0.1);
}

body.light-theme .wheeltochoose-faq-header:hover {
    background: rgba(108, 123, 247, 0.03);
}

body.light-theme .wheeltochoose-faq-num {
    background: rgba(108, 123, 247, 0.1);
    border-color: rgba(108, 123, 247, 0.3);
    color: var(--primary);
}

body.light-theme .wheeltochoose-faq-card.wheeltochoose-open .wheeltochoose-faq-num {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

body.light-theme .wheeltochoose-faq-title {
    color: #2a2a4a;
}

body.light-theme .wheeltochoose-faq-card.wheeltochoose-open .wheeltochoose-faq-title {
    color: #1a1a2e;
}

body.light-theme .wheeltochoose-faq-chevron {
    color: #9aa8b8;
}

body.light-theme .wheeltochoose-faq-card.wheeltochoose-open .wheeltochoose-faq-chevron {
    color: var(--primary);
}

body.light-theme .wheeltochoose-faq-body p {
    color: #4a4a5a;
}

body.light-theme .wheeltochoose-faq-body strong {
    color: #2a2a3a;
}

body.light-theme .wheeltochoose-faq-body li {
    color: #4a4a5a;
}

body.light-theme .wheeltochoose-faq-body li strong {
    color: #2a2a3a;
}

body.light-theme .wheeltochoose-faq-body code {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary);
}

body.light-theme .wheeltochoose-faq-image {
    border: 2px solid var(--border);
}

/* Print */
@media print {
    body.light-theme .wheeltochoose-faq-card {
        background: transparent !important;
        border-color: #ccc !important;
    }
}

/* ============================================================
   SECTION 26: ODOMETER DASHBOARD
   ============================================================ */

body.light-theme .odometer-dashboard-wrapper {
    border-top: 2px solid var(--border);
}

body.light-theme .global-status-line {
    color: #7a8a9a;
}

body.light-theme .odo-label {
    color: #6a7a8a;
}

body.light-theme .live-dot {
    background-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

body.light-theme .odometer {
    background: #d8dde5;
    border: 3px solid var(--border);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.06);
}

body.light-theme .digit-container {
    background: #edf0f5;
}

body.light-theme .digit-strip span {
    color: #1a1a2e;
}

body.light-theme .digit-container:last-child .digit-strip span {
    background: #e8a0a8;
    color: #fff;
}

body.light-theme .yt-style-total {
    color: #7a8a9a;
}

body.light-theme .live-status-container {
    background: #e4e8ee;
    border: 2px solid var(--border);
}

body.light-theme .bar-segment {
    background: #c8d0da;
}

body.light-theme .active-bar {
    background: #5cb88a;
    box-shadow: 0 0 6px rgba(92, 184, 138, 0.4);
}

body.light-theme .green-dot {
    background-color: #5cb88a;
    box-shadow: 0 0 8px rgba(92, 184, 138, 0.5);
}

body.light-theme #live-user-count {
    color: #1a1a2e;
}

body.light-theme .live-label {
    color: #7a8a9a;
}

/* ============================================================
   SECTION 27: SHARE SIDEBAR — FIXED VISIBILITY & CLICK AREA
   ============================================================ */

body.light-theme .share-sidebar-wrapper {
    left: -55px;
}

body.light-theme .share-sidebar-wrapper.open {
    left: 0;
}

body.light-theme .share-toggle-btn {
    background: #e0e4ec;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    right: -16px;
    width: 16px;
    height: 46px;
}

body.light-theme .share-toggle-btn:hover {
    background: #d0d6e0;
}

body.light-theme .share-toggle-btn img {
    filter: brightness(0.3);
    width: 12px;
    height: 12px;
}

body.light-theme .share-tray {
    background: #edf0f5;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

body.light-theme .tray-icon {
    width: 55px;
    height: 50px;
    padding: 12px;
    border: none;
    background: transparent;
    overflow: hidden;
}

body.light-theme .tray-icon:hover {
    background: #dde2ea;
}

body.light-theme .tray-icon:first-child {
    border-radius: 0;
}

body.light-theme .tray-icon:last-child {
    border-radius: 0;
}

body.light-theme .tray-icon img {
    filter: none;
    pointer-events: none;
    width: 24px;
    height: 24px;
}

body.light-theme #copyTooltip {
    background: var(--primary);
}

body.light-theme #copyTooltip::after {
    border-right-color: var(--primary);
}

/* ============================================================
   SECTION 28: SHARE WIZARD MODAL
   ============================================================ */

body.light-theme .share-modal-refined {
    background: #edf0f5 !important;
    border: 2px solid var(--border) !important;
}

body.light-theme .share-modal-refined .modal-header-refined h3 {
    color: #1a1a2e;
}

body.light-theme .share-modal-refined .corner-close {
    color: #9aa8b8;
}

body.light-theme .share-modal-refined .corner-close:hover {
    color: var(--accent);
}

body.light-theme .wizard-step {
    background: #d8dde5;
    color: #6a7a8a;
}

body.light-theme .wizard-step.active {
    background: var(--primary);
    color: #fff !important;
}

body.light-theme .wizard-line {
    background: var(--border);
}

body.light-theme .step-header h4 {
    color: #1a1a2e;
}

body.light-theme .step-header p {
    color: #7a8a9a;
}

body.light-theme .tc-box {
    background: #e4e8ee;
    border: 1px solid var(--border);
}

body.light-theme .tc-box li {
    color: #3a4a5a;
}

body.light-theme .tc-box li::before {
    color: var(--primary);
}

body.light-theme .label-text {
    color: #4a5a6a;
}

body.light-theme .modal-label {
    color: #6a7a8a;
}

body.light-theme .share-modal-refined .modal-input {
    background: #e0e4ec !important;
    border: 2px solid var(--border) !important;
    color: #1a1a2e !important;
}

body.light-theme .visibility-card {
    background: #e4e8ee;
    border: 1px solid var(--border);
}

body.light-theme .separator {
    background: var(--border);
}

body.light-theme .option-desc b {
    color: #1a1a2e;
}

body.light-theme .option-desc p {
    color: #7a8a9a;
}

body.light-theme .secondary-btn {
    background: #d8dde5;
    color: #4a5a6a;
    border-color: var(--border);
}

body.light-theme .secondary-btn:hover {
    color: #1a1a2e;
    background: #c8d0dc;
}

body.light-theme .primary-btn {
    background: var(--primary);
    color: #fff;
}

/* ============================================================
   SECTION 29: COMMUNITY GALLERY
   ============================================================ */

body.light-theme .gallery-card {
    background: #fff;
    border: 2px solid var(--border);
}

body.light-theme .gallery-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(108, 123, 247, 0.18);
}

body.light-theme .gallery-preview-box {
    background: #e4e8ee;
    border-bottom: 1px solid var(--border);
}

body.light-theme .gallery-info h4 {
    color: #1a1a2e;
}

body.light-theme .gallery-info p {
    color: #7a8a9a;
}

body.light-theme .gallery-tag {
    background: #e4e8f5;
    color: #3a3a6a;
    border: 1px solid #c0c8e0;
}

body.light-theme .gallery-top-tags {
    border-bottom-color: var(--border);
}

body.light-theme .top-tag-capsule {
    background: #e4e8ee;
    border: 1px solid var(--border);
    color: #5a6a7a;
}

body.light-theme .top-tag-capsule:hover {
    background: #d8dde5;
    color: #2a3a4a;
    border-color: #8a9ab0;
}

body.light-theme .top-tag-capsule.active-tag {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================================================
   SECTION 30: SHARE LINK RESULT MODAL
   ============================================================ */

body.light-theme #shareLinkModal .modal-header {
    color: var(--primary);
}

body.light-theme #shareLinkModal p {
    color: #4a5a6a;
}

/* ============================================================
   SECTION 31: SHOW PANEL BUTTON
   ============================================================ */

body.light-theme .show-toggle-btn {
    background: #e0e5ec;
    color: #3a4a5a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--border);
}

body.light-theme .show-toggle-btn svg {
    stroke: #3a4a5a;
}

/* ============================================================
   SECTION 32: LOADING SCREEN shift to loading.js
   ============================================================ */

/* ============================================================
   SECTION 33: FOOTER — UPDATED FOR NEW FOOTER.JS STRUCTURE
   ============================================================ */

body.light-theme .site-footer {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
    border-top: 2px solid var(--border);
}

/* Footer Brand */
body.light-theme .footer-brand span {
    color: #3a3a5a;
}

body.light-theme .footer-brand:hover span {
    color: var(--primary);
}

/* Footer Rating Box */
body.light-theme .footer-rating {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid var(--border);
}

body.light-theme .footer-rating:hover {
    border-color: rgba(108, 123, 247, 0.3);
}

body.light-theme .footer-rating-title {
    color: var(--primary);
}

/* Stars */
body.light-theme .star {
    color: #b0bec5;
}

body.light-theme .star.active,
body.light-theme .star.hover-active {
    color: #ffcc00;
}

/* Rating Text */
body.light-theme .rating-text {
    color: #2a2a4a;
}

body.light-theme .rating-count {
    color: #7a8a9a;
}

body.light-theme .vote-msg {
    color: var(--primary);
}

/* Footer Divider */
body.light-theme .footer-divider-line {
    background: linear-gradient(to right, var(--primary), var(--accent));
    opacity: 0.4;
}

/* Footer Nav Links */
body.light-theme .site-footer .footer-links a {
    color: #5a6a7a;
}

body.light-theme .site-footer .footer-links a:hover {
    color: var(--primary);
}

body.light-theme .site-footer .footer-links a::after {
    background: var(--primary);
}

body.light-theme .site-footer .footer-links a.footer-active {
    color: var(--primary);
}

/* Footer Copyright */
body.light-theme .footer-copyright {
    color: #8a9aaa;
}

/* Rating Confirmation Modal */
body.light-theme .rating-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

body.light-theme .rating-modal {
    background: #edf0f5;
    border: 2px solid var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body.light-theme .rating-modal h4 {
    color: #1a1a2e;
}

body.light-theme .rating-modal p {
    color: #5a6a7a;
}

body.light-theme .btn-confirm {
    background: var(--primary);
    color: #fff;
}

body.light-theme .btn-cancel {
    background: #d8dde5;
    color: #3a4a5a;
    border: 1px solid var(--border);
}

body.light-theme .btn-cancel:hover {
    background: #c8d0dc;
    color: #1a1a2e;
    border-color: #8a9ab0;
}

/* ============================================================
   SECTION 34: HOVER OVERLAY TEXT — KEEP WHITE
   ============================================================ */

body.light-theme .curved-text {
    fill: #FFFFFF;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.7));
}

/* ============================================================
   SECTION 35: FOCUS VISIBLE OVERRIDES
   ============================================================ */

body.light-theme button:focus-visible,
body.light-theme a:focus-visible,
body.light-theme input:focus-visible,
body.light-theme select:focus-visible,
body.light-theme [tabindex="0"]:focus-visible,
body.light-theme [role="button"]:focus-visible,
body.light-theme [role="radio"]:focus-visible {
    outline-color: var(--primary);
}

body.light-theme .color-swatch:focus-visible {
    outline-color: #1a1a2e;
}

/* ================================================
   DUPLICATE MODAL STYLING
   ================================================ */

body.light-theme #duplicateModal {
    background: rgba(0, 0, 0, 0.45);
}

body.light-theme #duplicateModal .modal-content {
    background: #edf0f5;
    border: 2px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

body.light-theme #duplicateModal h3 {
    color: #3a4a5a !important;
}

body.light-theme .duplicate-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

body.light-theme .duplicate-modal-actions button {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.light-theme #duplicateAddBtn {
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--accent);
}

body.light-theme #duplicateAddBtn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 90, 111, 0.3);
}

body.light-theme #duplicateAddBtn:active {
    transform: translateY(0);
}

body.light-theme #duplicateNoBtn {
    background: #d8dfe8;
    color: #2a3a5a;
    border: 2px solid var(--border);
}

body.light-theme #duplicateNoBtn:hover {
    background: #c8d2e0;
    color: #1a1a2e;
    border-color: #8a9ab0;
}

body.light-theme #duplicateNoBtn:active {
    background: #b8c0d0;
}

@media (max-width: 480px) {
    body.light-theme .duplicate-modal-actions {
        flex-direction: column;
    }

    body.light-theme .duplicate-modal-actions button {
        width: 100%;
    }
}

body.light-theme #duplicateModalMsg {
    color: #3a4a5a !important;
    line-height: 1.6;
}

body.light-theme #duplicateModalMsg strong {
    color: var(--accent);
    font-weight: 600;
}

/* ============================================================
   SECTION 36: HIGH CONTRAST MODE
   ============================================================ */

@media (forced-colors: active) {
    body.light-theme .color-indicator {
        border-color: ButtonText;
    }
}

/* ============================================================
   SECTION 37: PRINT
   ============================================================ */

@media print {
    body.light-theme .wheeltochoose-guide {
        background: transparent !important;
        border: none !important;
    }
}

/* ============================================================
   SECTION 38: NEW ENTRY GLOW — GOLDEN
   ============================================================ */

body.light-theme .name-entry-row.glow-new {
    box-shadow: 0 0 24px rgba(190, 150, 30, 0.8), 0 0 50px rgba(190, 150, 30, 0.45), inset 0 0 14px rgba(190, 150, 30, 0.15) !important;
    border-color: rgba(190, 150, 30, 0.7) !important;
    border-left-color: rgba(190, 150, 30, 0.9) !important;
    background: rgba(220, 200, 100, 0.15) !important;
    transition: box-shadow 1.4s ease, border-color 1.4s ease, border-left-color 1.4s ease, background 1.4s ease;
}

body.light-theme .name-entry-row.glow-fade {
    box-shadow: none !important;
    border-color: var(--border) !important;
    border-left-color: var(--accent) !important;
    background: #fff !important;
    transition: box-shadow 1.4s ease, border-color 1.4s ease, border-left-color 1.4s ease, background 1.4s ease;
}

/* ============================================================
   SECTION 39: ENTRY LIST RESIZE HANDLE — LIGHT THEME
   ============================================================ */

body.light-theme .entry-resize-handle img {
    filter: brightness(0.2);
    opacity: 0.3;
}

body.light-theme .entry-resize-handle:hover img {
    opacity: 0.6;
}

body.light-theme .entry-resize-handle.dragging img {
    opacity: 1;
}