/* =========================================================================
   Site-Wide Theme System — Magery.com
   5 themes: light (default), cream, slate, dark, midnight
   ========================================================================= */

/* --- Default / Light theme (CSS variable definitions) --- */
:root,
[data-theme="light"] {
    --theme-bg: #f5f5f5;
    --theme-surface: #fff;
    --theme-header-bg: #fff;
    --theme-header-shadow: rgba(0,0,0,0.1);
    --theme-text: #333;
    --theme-text-secondary: #555;
    --theme-text-muted: #7f8c8d;
    --theme-border: #ddd;
    --theme-border-light: #f0f0f0;
    --theme-accent: #e74c3c;
    --theme-accent-hover: #c0392b;
    --theme-nav-bg: #2c3e50;
    --theme-nav-text: #ecf0f1;
    --theme-subnav-bg: #1e1b4b;
    --theme-input-bg: #fff;
    --theme-input-border: #ddd;
    --theme-input-text: #333;
    --theme-input-placeholder: #999;
    --theme-scope-bg: #f0f0f0;
    --theme-scope-border: #ddd;
    --theme-scope-text: #2c3e50;
    --theme-scope-mtg-bg: #eee8f5;
    --theme-scope-mtg-border: #a78bca;
    --theme-dropdown-bg: #fff;
    --theme-dropdown-border: #ddd;
    --theme-dropdown-hover: #f8f9fa;
    --theme-dropdown-selected: #fef2f2;
    --theme-autocomplete-bg: #fff;
    --theme-autocomplete-border: #e74c3c;
    --theme-autocomplete-item-border: #f0f0f0;
    --theme-autocomplete-hover: #f8f9fa;
    --theme-autocomplete-title: #2c3e50;
    --theme-autocomplete-meta: #7f8c8d;
    --theme-preview-bg: #fff;
    --theme-preview-border: #dbe2ea;
    --theme-preview-media-bg: #f4f6f8;
    --theme-preview-title: #223242;
    --theme-preview-subtitle: #617384;
    --theme-preview-pill-bg: #f0f4f8;
    --theme-preview-pill-text: #334155;
    --theme-footer-bg: #2c3e50;
    --theme-footer-text: #ecf0f1;
    --theme-footer-muted: #bdc3c7;
    --theme-footer-faint: #95a5a6;
    --theme-footer-tiny: #7f8c8d;
    --theme-footer-border: #34495e;
    --theme-footer-link: #e74c3c;
    --theme-footer-accent: #e74c3c;
}

/* --- Cream theme --- */
[data-theme="cream"] {
    --theme-bg: #faf8f3;
    --theme-surface: #fff8ed;
    --theme-header-bg: #fdf6ee;
    --theme-header-shadow: rgba(80,60,30,0.08);
    --theme-text: #3d3428;
    --theme-text-secondary: #5c4e3a;
    --theme-text-muted: #8a7d6b;
    --theme-border: #e0d5c4;
    --theme-border-light: #f0e8d8;
    --theme-accent: #c0392b;
    --theme-accent-hover: #a32e22;
    --theme-nav-bg: #3d3428;
    --theme-nav-text: #f0e8d8;
    --theme-subnav-bg: #2a231a;
    --theme-input-bg: #fffbf5;
    --theme-input-border: #e0d5c4;
    --theme-input-text: #3d3428;
    --theme-input-placeholder: #a89880;
    --theme-scope-bg: #f0e8d8;
    --theme-scope-border: #e0d5c4;
    --theme-scope-text: #3d3428;
    --theme-scope-mtg-bg: #ede4d8;
    --theme-scope-mtg-border: #b8a088;
    --theme-dropdown-bg: #fffbf5;
    --theme-dropdown-border: #e0d5c4;
    --theme-dropdown-hover: #f8f0e4;
    --theme-dropdown-selected: #fef5ea;
    --theme-autocomplete-bg: #fffbf5;
    --theme-autocomplete-border: #c0392b;
    --theme-autocomplete-item-border: #f0e8d8;
    --theme-autocomplete-hover: #f8f0e4;
    --theme-autocomplete-title: #3d3428;
    --theme-autocomplete-meta: #8a7d6b;
    --theme-preview-bg: #fffbf5;
    --theme-preview-border: #e0d5c4;
    --theme-preview-media-bg: #f8f0e4;
    --theme-preview-title: #3d3428;
    --theme-preview-subtitle: #7a6e5c;
    --theme-preview-pill-bg: #f0e8d8;
    --theme-preview-pill-text: #5c4e3a;
    --theme-footer-bg: #3d3428;
    --theme-footer-text: #f0e8d8;
    --theme-footer-muted: #c4b8a4;
    --theme-footer-faint: #a89880;
    --theme-footer-tiny: #8a7d6b;
    --theme-footer-border: #5c4e3a;
    --theme-footer-link: #c0392b;
    --theme-footer-accent: #c0392b;
}

/* --- Slate theme --- */
[data-theme="slate"] {
    --theme-bg: #d5d8dc;
    --theme-surface: #e2e5e8;
    --theme-header-bg: #c8ccd0;
    --theme-header-shadow: rgba(0,0,0,0.12);
    --theme-text: #1e272e;
    --theme-text-secondary: #34495e;
    --theme-text-muted: #636e72;
    --theme-border: #b0b5bc;
    --theme-border-light: #c8ccd0;
    --theme-accent: #e74c3c;
    --theme-accent-hover: #c0392b;
    --theme-nav-bg: #2c3e50;
    --theme-nav-text: #ecf0f1;
    --theme-subnav-bg: #1e1b4b;
    --theme-input-bg: #e8ebee;
    --theme-input-border: #b0b5bc;
    --theme-input-text: #1e272e;
    --theme-input-placeholder: #7f8c8d;
    --theme-scope-bg: #c8ccd0;
    --theme-scope-border: #b0b5bc;
    --theme-scope-text: #1e272e;
    --theme-scope-mtg-bg: #c4c0d4;
    --theme-scope-mtg-border: #8a80aa;
    --theme-dropdown-bg: #e2e5e8;
    --theme-dropdown-border: #b0b5bc;
    --theme-dropdown-hover: #d0d4d8;
    --theme-dropdown-selected: #e8d8d8;
    --theme-autocomplete-bg: #e2e5e8;
    --theme-autocomplete-border: #e74c3c;
    --theme-autocomplete-item-border: #c8ccd0;
    --theme-autocomplete-hover: #d0d4d8;
    --theme-autocomplete-title: #1e272e;
    --theme-autocomplete-meta: #636e72;
    --theme-preview-bg: #e2e5e8;
    --theme-preview-border: #b0b5bc;
    --theme-preview-media-bg: #d0d4d8;
    --theme-preview-title: #1e272e;
    --theme-preview-subtitle: #4a5568;
    --theme-preview-pill-bg: #c8ccd0;
    --theme-preview-pill-text: #2d3748;
    --theme-footer-bg: #2c3e50;
    --theme-footer-text: #ecf0f1;
    --theme-footer-muted: #bdc3c7;
    --theme-footer-faint: #95a5a6;
    --theme-footer-tiny: #7f8c8d;
    --theme-footer-border: #34495e;
    --theme-footer-link: #e74c3c;
    --theme-footer-accent: #e74c3c;
}

/* --- Dark theme --- */
[data-theme="dark"] {
    --theme-bg: #1e1e2e;
    --theme-surface: #2a2a3e;
    --theme-header-bg: #16162a;
    --theme-header-shadow: rgba(0,0,0,0.3);
    --theme-text: #e0e0e0;
    --theme-text-secondary: #b0b0c0;
    --theme-text-muted: #8888a0;
    --theme-border: #3a3a50;
    --theme-border-light: #2e2e44;
    --theme-accent: #e74c3c;
    --theme-accent-hover: #f25c4e;
    --theme-nav-bg: #12121e;
    --theme-nav-text: #d0d0e0;
    --theme-subnav-bg: #0e0e1a;
    --theme-input-bg: #2a2a3e;
    --theme-input-border: #3a3a50;
    --theme-input-text: #e0e0e0;
    --theme-input-placeholder: #6a6a80;
    --theme-scope-bg: #2e2e44;
    --theme-scope-border: #3a3a50;
    --theme-scope-text: #d0d0e0;
    --theme-scope-mtg-bg: #2e2844;
    --theme-scope-mtg-border: #6a5a90;
    --theme-dropdown-bg: #2a2a3e;
    --theme-dropdown-border: #3a3a50;
    --theme-dropdown-hover: #34344a;
    --theme-dropdown-selected: #3a2828;
    --theme-autocomplete-bg: #2a2a3e;
    --theme-autocomplete-border: #e74c3c;
    --theme-autocomplete-item-border: #2e2e44;
    --theme-autocomplete-hover: #34344a;
    --theme-autocomplete-title: #e0e0e0;
    --theme-autocomplete-meta: #8888a0;
    --theme-preview-bg: #2a2a3e;
    --theme-preview-border: #3a3a50;
    --theme-preview-media-bg: #222236;
    --theme-preview-title: #e0e0e0;
    --theme-preview-subtitle: #9090a8;
    --theme-preview-pill-bg: #34344a;
    --theme-preview-pill-text: #c0c0d0;
    --theme-footer-bg: #12121e;
    --theme-footer-text: #d0d0e0;
    --theme-footer-muted: #9090a8;
    --theme-footer-faint: #707088;
    --theme-footer-tiny: #5a5a70;
    --theme-footer-border: #2a2a3e;
    --theme-footer-link: #e74c3c;
    --theme-footer-accent: #e74c3c;
}

/* --- Midnight theme (Netflix-style) --- */
[data-theme="midnight"] {
    --theme-bg: #141414;
    --theme-surface: #1c1c1c;
    --theme-header-bg: #0a0a0a;
    --theme-header-shadow: rgba(0,0,0,0.4);
    --theme-text: #e5e5e5;
    --theme-text-secondary: #b3b3b3;
    --theme-text-muted: #808080;
    --theme-border: #333;
    --theme-border-light: #252525;
    --theme-accent: #e50914;
    --theme-accent-hover: #f40612;
    --theme-nav-bg: #0a0a0a;
    --theme-nav-text: #e5e5e5;
    --theme-subnav-bg: #0a0a0a;
    --theme-input-bg: #1c1c1c;
    --theme-input-border: #333;
    --theme-input-text: #e5e5e5;
    --theme-input-placeholder: #666;
    --theme-scope-bg: #252525;
    --theme-scope-border: #333;
    --theme-scope-text: #e5e5e5;
    --theme-scope-mtg-bg: #1e1628;
    --theme-scope-mtg-border: #5a4080;
    --theme-dropdown-bg: #1c1c1c;
    --theme-dropdown-border: #333;
    --theme-dropdown-hover: #282828;
    --theme-dropdown-selected: #2a1818;
    --theme-autocomplete-bg: #1c1c1c;
    --theme-autocomplete-border: #e50914;
    --theme-autocomplete-item-border: #252525;
    --theme-autocomplete-hover: #282828;
    --theme-autocomplete-title: #e5e5e5;
    --theme-autocomplete-meta: #808080;
    --theme-preview-bg: #1c1c1c;
    --theme-preview-border: #333;
    --theme-preview-media-bg: #181818;
    --theme-preview-title: #e5e5e5;
    --theme-preview-subtitle: #999;
    --theme-preview-pill-bg: #282828;
    --theme-preview-pill-text: #ccc;
    --theme-footer-bg: #0a0a0a;
    --theme-footer-text: #e5e5e5;
    --theme-footer-muted: #999;
    --theme-footer-faint: #777;
    --theme-footer-tiny: #555;
    --theme-footer-border: #252525;
    --theme-footer-link: #e50914;
    --theme-footer-accent: #e50914;
}

/* =========================================================================
   Theme Picker Component
   ========================================================================= */

.theme-picker-wrapper {
    position: relative;
    flex-shrink: 0;
}

.theme-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-muted);
    cursor: pointer;
    font-size: 15px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.theme-picker-btn:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

.theme-picker-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 1100;
    padding: 12px 14px;
    min-width: 180px;
}

.theme-picker-dropdown.active {
    display: block;
}

.theme-picker-dropdown-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
    margin-bottom: 10px;
}

.theme-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
    text-align: left;
}

.theme-picker-option:hover {
    background: var(--theme-dropdown-hover);
}

.theme-picker-option.active {
    background: var(--theme-dropdown-selected);
}

.theme-picker-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--theme-border);
    flex-shrink: 0;
    background: var(--swatch-color, #cbd5e1);
}

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


/* =========================================================================
   Theme Overrides — apply CSS variables to existing site elements
   These override the hardcoded inline styles in head.php using !important
   ========================================================================= */

/* Body */
body {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

/* Header */
.header-container {
    background: var(--theme-header-bg) !important;
    box-shadow: 0 2px 4px var(--theme-header-shadow) !important;
}

/* Search */
.search-input {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.search-input::placeholder {
    color: var(--theme-input-placeholder) !important;
}

.search-input:focus {
    border-color: var(--theme-accent) !important;
}

.search-button {
    background: var(--theme-accent) !important;
}

.search-button:hover {
    background: var(--theme-accent-hover) !important;
}

/* Scope selector */
.search-scope-toggle {
    background: var(--theme-scope-bg) !important;
    border-color: var(--theme-scope-border) !important;
    color: var(--theme-scope-text) !important;
}

.search-scope-toggle:hover {
    background: var(--theme-dropdown-hover) !important;
}

.search-scope-toggle.scope-mtg {
    background: var(--theme-scope-mtg-bg) !important;
    border-color: var(--theme-scope-mtg-border) !important;
}

.search-scope-dropdown {
    background: var(--theme-dropdown-bg) !important;
    border-color: var(--theme-dropdown-border) !important;
}

.search-scope-option {
    color: var(--theme-text) !important;
    border-bottom-color: var(--theme-border-light) !important;
}

.search-scope-option:hover {
    background: var(--theme-dropdown-hover) !important;
}

.search-scope-option.selected {
    background: var(--theme-dropdown-selected) !important;
}

.search-scope-option i {
    color: var(--theme-text-muted) !important;
}

.scope-desc {
    color: var(--theme-text-muted) !important;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
    background: var(--theme-autocomplete-bg) !important;
    border-color: var(--theme-autocomplete-border) !important;
}

.autocomplete-item {
    border-bottom-color: var(--theme-autocomplete-item-border) !important;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: var(--theme-autocomplete-hover) !important;
}

.autocomplete-item-image {
    border-color: var(--theme-border) !important;
}

.autocomplete-item-title {
    color: var(--theme-autocomplete-title) !important;
}

.autocomplete-item-meta {
    color: var(--theme-autocomplete-meta) !important;
}

.autocomplete-loading,
.autocomplete-no-results {
    color: var(--theme-text-muted) !important;
}

/* Autocomplete hover preview */
.autocomplete-hover-preview {
    background: var(--theme-preview-bg) !important;
    border-color: var(--theme-preview-border) !important;
}

.autocomplete-hover-preview-media {
    background: var(--theme-preview-media-bg) !important;
}

.autocomplete-hover-preview-title {
    color: var(--theme-preview-title) !important;
}

.autocomplete-hover-preview-subtitle {
    color: var(--theme-preview-subtitle) !important;
}

.autocomplete-hover-preview-pill {
    background: var(--theme-preview-pill-bg) !important;
    color: var(--theme-preview-pill-text) !important;
}

/* Navigation */
.nav-container {
    background: var(--theme-nav-bg) !important;
}

.nav-links li a:hover {
    background: rgba(255,255,255,0.08) !important;
}

.settings-link:hover {
    color: var(--theme-accent) !important;
}

.logout-button {
    background: var(--theme-accent) !important;
}

.logout-button:hover {
    background: var(--theme-accent-hover) !important;
}

.signup-button {
    background: var(--theme-accent) !important;
}

.signup-button:hover {
    background: var(--theme-accent-hover) !important;
}

/* MTG subnav */
.mtg-subnav {
    background: var(--theme-subnav-bg) !important;
}

.mtg-subnav-link.active {
    border-bottom-color: var(--theme-accent) !important;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    color: var(--theme-text) !important;
}

.mobile-menu-toggle:hover {
    color: var(--theme-accent) !important;
}

/* Mobile menu */
.nav-mobile-menu {
    background: var(--theme-nav-bg) !important;
}

.mobile-menu-header {
    border-bottom-color: var(--theme-footer-border) !important;
}

.mobile-menu-close:hover {
    color: var(--theme-accent) !important;
}

.mobile-nav-links li a {
    border-bottom-color: var(--theme-footer-border) !important;
}

.mobile-nav-links li a:hover {
    background: rgba(255,255,255,0.08) !important;
}

.mobile-nav-divider {
    border-top-color: var(--theme-footer-border) !important;
}

/* Back to top button */
#back-to-top {
    background: var(--theme-accent) !important;
}

#back-to-top:hover {
    background: var(--theme-accent-hover) !important;
}

/* =========================================================================
   Footer Styles
   ========================================================================= */

.site-footer {
    background: var(--theme-footer-bg);
    color: var(--theme-footer-text);
    margin-top: 40px;
    padding: 30px 20px;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 20px;
}

.site-footer-heading {
    color: var(--theme-footer-accent);
    margin-bottom: 15px;
    font-size: 18px;
}

.site-footer-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--theme-footer-muted);
}

.site-footer-accent-link {
    color: var(--theme-footer-accent);
    text-decoration: none;
    font-size: 14px;
}

.site-footer-accent-link:hover {
    text-decoration: underline;
}

.site-footer-links {
    list-style: none;
    font-size: 14px;
    line-height: 2;
}

.site-footer-links a {
    color: var(--theme-footer-text);
    text-decoration: none;
}

.site-footer-links a:hover {
    text-decoration: underline;
}

.site-footer-bottom {
    border-top: 1px solid var(--theme-footer-border);
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--theme-footer-faint);
}

.site-footer-disclaimer {
    font-size: 11px;
    color: var(--theme-footer-tiny);
    margin-bottom: 12px;
    line-height: 1.6;
}

.site-footer-affiliate {
    font-size: 12px;
    color: var(--theme-footer-tiny);
    margin-bottom: 12px;
}

.site-footer-muted-link {
    color: var(--theme-footer-faint);
    text-decoration: underline;
}

.site-footer-legal {
    margin-top: 8px;
}

.site-footer-dot {
    margin: 0 10px;
    color: var(--theme-footer-border);
}

/* =========================================================================
   Template Compatibility Overrides (Legacy inline page styles)
   ========================================================================= */

:root,
[data-theme] {
    --theme-card-bg: var(--theme-surface);
    --theme-card-border: var(--theme-border);
    --theme-card-shadow: 0 2px 12px var(--theme-header-shadow);
    --theme-soft-bg: color-mix(in srgb, var(--theme-surface) 86%, var(--theme-bg) 14%);
    --theme-soft-strong-bg: color-mix(in srgb, var(--theme-surface) 74%, var(--theme-bg) 26%);
    --theme-inverse-bg: var(--theme-nav-bg);
    --theme-inverse-text: var(--theme-nav-text);
    --theme-inverse-muted: color-mix(in srgb, var(--theme-nav-text) 72%, var(--theme-nav-bg) 28%);
    --theme-success-bg: color-mix(in srgb, #16a34a 16%, var(--theme-surface) 84%);
    --theme-success-text: color-mix(in srgb, #166534 76%, var(--theme-text) 24%);
    --theme-success-border: color-mix(in srgb, #22c55e 44%, var(--theme-border) 56%);
    --theme-error-bg: color-mix(in srgb, #dc2626 14%, var(--theme-surface) 86%);
    --theme-error-text: color-mix(in srgb, #991b1b 76%, var(--theme-text) 24%);
    --theme-error-border: color-mix(in srgb, #ef4444 44%, var(--theme-border) 56%);
    --theme-warning-bg: color-mix(in srgb, #f59e0b 18%, var(--theme-surface) 82%);
    --theme-warning-text: color-mix(in srgb, #92400e 76%, var(--theme-text) 24%);
    --theme-warning-border: color-mix(in srgb, #f59e0b 45%, var(--theme-border) 55%);
}

/* Legal / policy pages */
.legal-page {
    background: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-card-border) !important;
    box-shadow: var(--theme-card-shadow) !important;
}

.legal-page h1,
.legal-page h2,
.legal-page h3 {
    color: var(--theme-text) !important;
}

.legal-page p,
.legal-page li {
    color: var(--theme-text-secondary) !important;
}

.legal-page .last-updated {
    color: var(--theme-text-muted) !important;
}

.legal-page a {
    color: var(--theme-accent) !important;
}

.legal-page .important-notice,
.legal-page .highlight-box {
    background: var(--theme-warning-bg) !important;
    border-left-color: var(--theme-warning-border) !important;
}

.legal-page .important-notice strong {
    color: var(--theme-warning-text) !important;
}

.legal-page .partner-item {
    background: var(--theme-soft-bg) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-card-border) !important;
}

.legal-page-footer-note {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--theme-card-border) !important;
    font-size: 13px;
    color: var(--theme-text-secondary) !important;
}

/* Auth pages (login/register/verify) */
.auth-container,
.verification-page,
.verification-result-page {
    background: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-card-border) !important;
    box-shadow: var(--theme-card-shadow) !important;
    color: var(--theme-text) !important;
}

.auth-header h1,
.verification-page h1,
.verification-result-page h1 {
    color: var(--theme-text) !important;
}

.auth-header p,
.verification-page p,
.verification-result-page p {
    color: var(--theme-text-secondary) !important;
}

.form-group label,
.remember-me {
    color: var(--theme-text) !important;
}

.form-group input,
.password-requirements,
.google-button,
.verification-page .email-display {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.password-toggle,
.divider,
.password-requirements li,
#display-name-status.checking,
.toggle-auth,
.verification-page .help-text,
#countdown {
    color: var(--theme-text-muted) !important;
}

.google-button:hover {
    background: var(--theme-soft-strong-bg) !important;
    border-color: var(--theme-accent) !important;
}

.auth-button,
.resend-button,
.action-button,
.submit-button {
    background: var(--theme-accent) !important;
    color: #fff !important;
}

.auth-button:hover:not(:disabled),
.resend-button:hover,
.action-button:hover,
.submit-button:hover {
    background: var(--theme-accent-hover) !important;
}

.auth-button:disabled,
.resend-button:disabled {
    background: var(--theme-text-muted) !important;
}

.error-message,
.error-card {
    background: var(--theme-error-bg) !important;
    color: var(--theme-error-text) !important;
    border-color: var(--theme-error-border) !important;
}

.success-message,
.success-card {
    background: var(--theme-success-bg) !important;
    color: var(--theme-success-text) !important;
    border-color: var(--theme-success-border) !important;
}

.password-match-message.match,
#display-name-status.available {
    background: var(--theme-success-bg) !important;
    color: var(--theme-success-text) !important;
}

.password-match-message.no-match,
#display-name-status.taken {
    background: var(--theme-error-bg) !important;
    color: var(--theme-error-text) !important;
}

.toggle-auth,
.verification-page .help-text {
    border-top-color: var(--theme-card-border) !important;
}

/* Contact page */
.contact-card {
    background: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-card-border) !important;
    box-shadow: var(--theme-card-shadow) !important;
}

.card-title {
    color: var(--theme-text) !important;
}

.card-description {
    color: var(--theme-text-secondary) !important;
}

.input-field,
.textarea-field {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.input-field:focus,
.textarea-field:focus {
    border-color: var(--theme-accent) !important;
}

.notice {
    background: var(--theme-warning-bg) !important;
    border-left-color: var(--theme-warning-border) !important;
    color: var(--theme-warning-text) !important;
}

/* About page */
.about-section {
    background: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-card-border) !important;
    box-shadow: var(--theme-card-shadow) !important;
}

.about-section h2,
.about-section p,
.mission-card h3,
.mission-card p,
.card-type-item span {
    color: var(--theme-text) !important;
}

.about-hero,
.location-box {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-inverse-bg) 92%, #000 8%) 0%,
        color-mix(in srgb, var(--theme-inverse-bg) 80%, #000 20%) 100%
    ) !important;
    color: var(--theme-inverse-text) !important;
}

.about-hero .tagline,
.location-box .location-details p {
    color: var(--theme-inverse-muted) !important;
}

.card-type-item,
.mission-card,
.stats-bar {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-card-border) !important;
}

.cta-section {
    background: linear-gradient(
        135deg,
        var(--theme-accent) 0%,
        var(--theme-accent-hover) 100%
    ) !important;
}

.cta-button.primary {
    background: #fff !important;
    color: var(--theme-accent) !important;
}

.cta-button.secondary {
    background: color-mix(in srgb, var(--theme-inverse-bg) 70%, #fff 30%) !important;
    color: var(--theme-inverse-text) !important;
}

/* =========================================================================
   Mobile Theme Picker — Sub-Panel (iOS-style drill-down)
   ========================================================================= */

/* Right chevron on the Theme nav link */
.mobile-nav-chevron {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.4;
}

/* Two-panel slide container — overflow:hidden is on .nav-mobile-menu in head.php */
.mobile-menu-panel {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

.mobile-menu-main {
    left: 0;
    transform: translateX(0);
}

.mobile-menu-theme {
    left: 100%;
    transform: translateX(0);
}

.nav-mobile-menu.theme-open .mobile-menu-main {
    transform: translateX(-100%);
}

.nav-mobile-menu.theme-open .mobile-menu-theme {
    transform: translateX(-100%);
}

/* Back button in theme panel header */
.mobile-theme-back {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.mobile-theme-back:hover {
    color: var(--theme-accent);
}

/* Theme option rows */
.mobile-theme-list {
    padding: 0;
}

.mobile-theme-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--theme-footer-border);
    color: white;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
}

.mobile-theme-row:hover {
    background: rgba(255,255,255,0.08);
}

.mobile-theme-row .theme-picker-swatch {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mobile-theme-name {
    flex: 1;
}

.mobile-theme-check {
    font-size: 14px;
    color: var(--theme-accent);
    opacity: 0;
    transition: opacity 0.15s;
}

.mobile-theme-row.active .mobile-theme-check {
    opacity: 1;
}

/* Hide desktop theme picker on mobile */
@media (max-width: 768px) {
    .theme-picker-wrapper {
        display: none;
    }
}

/* =========================================================================
   Coverage Pass: Search, Top10, Profile, Control, MTG Leaderboard, Home
   ========================================================================= */

:root,
[data-theme] {
    --theme-info-bg: color-mix(in srgb, #2563eb 14%, var(--theme-surface) 86%);
    --theme-info-text: color-mix(in srgb, #1e3a8a 76%, var(--theme-text) 24%);
    --theme-info-border: color-mix(in srgb, #3b82f6 40%, var(--theme-border) 60%);
}

/* Search page (nsearch.php) */
.search-header,
.search-tips-dropdown,
.search-engagement-card,
.pricing-summary,
.pricing-summary-compact,
.insights-card,
.featured-card,
.share-modal,
.auth-modal-card,
.tutorial-section,
.tip-card {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.search-header h1,
.search-results-label,
.search-engagement-title,
.insights-title,
.featured-item-label,
.search-tutorial h1,
.tutorial-section h2,
.tip-card h3 {
    color: var(--theme-text) !important;
}

.search-engagement-subtitle,
.search-tips-link,
.search-tip-body p,
.insights-list,
.stat-label,
.stat-sublabel,
.tutorial-subtitle,
.tip-card p,
.tip-result,
.example-desc,
.search-results-row {
    color: var(--theme-text-secondary) !important;
}

.inline-search-input,
.filter-group select,
.share-url-input,
.tutorial-search-input {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.inline-search-input:focus,
.filter-group select:focus,
.share-url-input:focus,
.tutorial-search-input:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
}

.inline-search-btn,
.pricing-expand-btn,
.share-copy-btn,
.share-page-btn,
.tutorial-search-btn,
.popular-chip:hover,
.example-query {
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}

.inline-search-btn:hover,
.pricing-expand-btn:hover,
.share-copy-btn:hover,
.share-page-btn:hover,
.tutorial-search-btn:hover,
.example-query:hover {
    background: var(--theme-accent-hover) !important;
    border-color: var(--theme-accent-hover) !important;
}

.search-tips-content,
.search-tips-footer,
.search-tip,
.pricing-details,
.stat-box,
.phrase-chip,
.share-item-preview,
.tutorial-search-form,
.tip-example,
.popular-chip,
.example-row {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.search-tip-body code,
.phrase-chip .phrase-count,
.tutorial-intro {
    background: var(--theme-info-bg) !important;
    color: var(--theme-info-text) !important;
    border-color: var(--theme-info-border) !important;
}

.pagination a,
.pagination span {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

.pagination .current,
.pagination a:hover {
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}

.share-modal-header,
.share-modal-footer {
    border-color: var(--theme-card-border) !important;
}

.share-modal-close,
.search-tips-toggle .fa-lightbulb,
.search-tip-icon i,
.search-tips-link,
.tutorial-section h2 i,
.tip-icon i,
.popular-chip i {
    color: var(--theme-accent) !important;
}

.share-url-section label,
.share-options h4,
.search-tip-body strong,
.tutorial-section h2,
.example-query {
    color: var(--theme-text) !important;
}

.auth-login {
    background: var(--theme-accent) !important;
    color: #fff !important;
}

.auth-signup {
    background: var(--theme-soft-bg) !important;
    color: var(--theme-text) !important;
}

/* Recent + Top10 */
.recent-page-header,
.day-page-header,
.top10-leaderboard .top10-page-header,
.top10-leaderboard .day-header,
.top10-leaderboard .day-section,
.day-stats-bar,
.recent-note,
.filter-controls {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.recent-page-header h1,
.day-page-header h1,
.top10-leaderboard .top10-page-header h1,
.top10-leaderboard .day-title h2 {
    color: var(--theme-text) !important;
}

.recent-page-header .subtitle,
.day-page-header .day-subtitle,
.top10-leaderboard .page-subtitle,
.top10-leaderboard .day-weekday {
    color: var(--theme-text-secondary) !important;
}

.category-filter-tabs a,
.seo-pagination .pagination a,
.filter-controls select,
.filter-controls input[type="text"] {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

.category-filter-tabs a:hover,
.seo-pagination .pagination a:hover {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-accent) !important;
    color: var(--theme-accent) !important;
}

.category-filter-tabs a.active,
.seo-pagination .pagination .current,
.filter-controls button,
.share-day-btn,
.top10-leaderboard .view-all-btn {
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}

.filter-controls button:hover,
.share-day-btn:hover,
.top10-leaderboard .view-all-btn:hover {
    background: var(--theme-accent-hover) !important;
    border-color: var(--theme-accent-hover) !important;
}

.day-stats-bar .stat,
.top10-leaderboard .day-stats .stat {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.day-stats-bar .stat i,
.top10-leaderboard .day-stats .stat i,
.top10-leaderboard .day-title i {
    color: var(--theme-accent) !important;
}

.spinner {
    border-color: var(--theme-border) !important;
    border-top-color: var(--theme-accent) !important;
}

/* Profile + control */
.profile-header,
.profile-section,
.settings-section,
.verification-result-page,
.verification-page {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.profile-details h1,
.profile-section-title,
.control-header h1,
.settings-section h2,
.tab-button:hover {
    color: var(--theme-text) !important;
}

.profile-meta,
.profile-empty,
.control-header p,
.form-help,
.tab-button {
    color: var(--theme-text-secondary) !important;
}

.profile-meta i,
.profile-activity-meta,
.member-date {
    color: var(--theme-text-muted) !important;
}

.profile-stat,
.profile-activity-item,
.member-item,
.profile-picture-circle,
.password-requirements {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.profile-avatar-lg,
.member-avatar,
.profile-picture-circle {
    background: var(--theme-inverse-bg) !important;
}

.profile-stat span,
.profile-section-title i,
.profile-activity-text a,
.profile-activity-meta a,
.file-upload-label,
.btn-primary,
.tab-button.active,
.tab-button.active::after {
    color: var(--theme-accent) !important;
}

.file-upload-label,
.btn-primary,
.auth-button,
.submit-button,
.resend-button,
.action-button {
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}

.file-upload-label:hover,
.btn-primary:hover,
.auth-button:hover:not(:disabled),
.submit-button:hover,
.resend-button:hover,
.action-button:hover {
    background: var(--theme-accent-hover) !important;
    border-color: var(--theme-accent-hover) !important;
}

.btn-secondary {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.form-group input:focus {
    border-color: var(--theme-accent) !important;
}

.tabs,
.settings-section h2,
.toggle-auth,
.verification-page .footer-links {
    border-color: var(--theme-card-border) !important;
}

.success-message {
    background: var(--theme-success-bg) !important;
    color: var(--theme-success-text) !important;
    border-color: var(--theme-success-border) !important;
}

.error-message {
    background: var(--theme-error-bg) !important;
    color: var(--theme-error-text) !important;
    border-color: var(--theme-error-border) !important;
}

.info-badge {
    background: var(--theme-info-bg) !important;
    color: var(--theme-info-text) !important;
    border-color: var(--theme-info-border) !important;
}

/* Home community sections */
.community-section,
.community-column,
.activity-block,
.community-card-list .result-card {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.community-section .section-title,
.community-column-title,
.activity-block-title,
.member-name,
.activity-item a {
    color: var(--theme-text) !important;
}

.community-section .section-eyebrow,
.community-empty,
.activity-meta,
.activity-text {
    color: var(--theme-text-secondary) !important;
}

.community-tab {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-card-border) !important;
    color: var(--theme-text) !important;
}

.community-tab.active,
.pager button.active {
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}

.pager button {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

.pager button:hover:not(:disabled) {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-accent) !important;
    color: var(--theme-accent) !important;
}

/* MTG leaderboard v2 — uses theme vars natively, only medal colors need hardcoding */
.mtg-lb-podium-medal.gold   { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important; }
.mtg-lb-podium-medal.silver { background: linear-gradient(135deg, #94a3b8, #64748b) !important; color: #fff !important; }
.mtg-lb-podium-medal.bronze { background: linear-gradient(135deg, #fb923c, #ea580c) !important; color: #fff !important; }
.mtg-lb-row-rank.top1 { color: #f59e0b !important; }
.mtg-lb-row-rank.top2 { color: #94a3b8 !important; }
.mtg-lb-row-rank.top3 { color: #fb923c !important; }