/* ═══════════════════════════════════════════════════════════
   THEMED SCROLLBARS — one per theme
   ═══════════════════════════════════════════════════════════ */

/* Default (Mainstream Sellout) — neon pink */
html { scrollbar-width: thin; scrollbar-color: #ff1b9f #14081a; }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #14081a, #0a0a0a);
}
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff1b9f, #c1006e);
    border-radius: 999px;
    border: 2px solid #0a0a0a;
    box-shadow: 0 0 8px rgba(255, 27, 159, 0.4);
}
html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff5cc4, #ff1b9f);
    box-shadow: 0 0 14px rgba(255, 27, 159, 0.7);
}

/* Lost Americana — flag red with cream-ish hover, blue accent */
html[data-theme="americana"] { scrollbar-color: #C93A2E #131a26; }
html[data-theme="americana"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #131a26, #0e1622);
}
html[data-theme="americana"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C93A2E 0%, #A02E25 50%, #4A86A8 100%);
    border: 2px solid #0e1622;
    box-shadow: 0 0 8px rgba(201, 58, 46, 0.4);
}
html[data-theme="americana"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #C93A2E, #6FA8C9);
    box-shadow: 0 0 14px rgba(201, 58, 46, 0.7);
}

/* Tickets to My Downfall — softer pink + teal accent at bottom */
html[data-theme="ttmd"] { scrollbar-color: #E5488A #1a0c14; }
html[data-theme="ttmd"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #1a0c14, #100a10);
}
html[data-theme="ttmd"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E5488A 0%, #B83270 70%, #2F6F7A 100%);
    border-radius: 999px;
    border: 2px solid #100a10;
    box-shadow: 0 0 8px rgba(229, 72, 138, 0.4);
}
html[data-theme="ttmd"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF7DB0, #E5488A);
    box-shadow: 0 0 14px rgba(229, 72, 138, 0.7);
}

/* ═══════════════════════════════════════════════════════════
   mgk Nation — DUAL THEME SYSTEM
   ═══════════════════════════════════════════════════════════
   Default = Mainstream Sellout (pink, defined in style.css).
   data-theme="americana" → Lost Americana (red/blue/cream, flag-styled)
   Palette:
     red:        #C93A2E
     red-dark:   #A02E25
     red-soft:   rgba(201,58,46,0.12)
     blue:       #4A86A8
     blue-dark:  #2c5e7e
     blue-light: #6FA8C9
     cream:      #F2F2F2
     ink:        #1A1A1A
     denim:      #0e1622  (background)
     denim-2:    #131a26
     dust:       #2a1f15  (warmer accent for variety)
   ═══════════════════════════════════════════════════════════ */

/* ═══ Theme dropdown — desktop nav ═══ */
.theme-dropdown {
    position: relative;
    margin-left: 10px;
    z-index: 50;
}
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 4px 14px 4px 4px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.theme-toggle:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.25);
}
.theme-toggle-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1a1a1a center/cover no-repeat;
    border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform .25s ease;
}
.theme-dropdown.is-open .theme-toggle-thumb { transform: rotate(8deg) scale(1.05); }
.theme-toggle-label {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}
.theme-toggle-caret {
    font-size: 9px;
    opacity: 0.5;
    transition: transform .25s ease;
}
.theme-dropdown.is-open .theme-toggle-caret {
    transform: rotate(180deg);
    opacity: 0.9;
}

.theme-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 10px;
    box-shadow:
        0 24px 56px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.03);
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1.2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.theme-dropdown.is-open .theme-dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.theme-dropdown-eyebrow {
    display: block;
    padding: 6px 10px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
    width: 100%;
}
.theme-option:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
.theme-option.is-active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.15), rgba(var(--accent-rgb),0.04));
    border-color: rgba(var(--accent-rgb),0.35);
}
.theme-option-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #1a1a1a center/cover no-repeat;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform .25s ease;
}
.theme-option:hover .theme-option-thumb { transform: scale(1.05) rotate(-2deg); }
.theme-option.is-active .theme-option-thumb {
    box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35), 0 0 0 2px rgba(var(--accent-rgb),0.5);
}
.theme-option-meta {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.theme-option-meta strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
}
.theme-option-meta small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}
.theme-option-check {
    color: var(--accent);
    font-size: 13px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity .2s ease, transform .2s ease;
}
.theme-option.is-active .theme-option-check {
    opacity: 1;
    transform: scale(1);
}

/* ═══ Mobile theme picker ═══ */
.mobile-theme-row {
    margin-top: 16px;
    padding: 16px 0 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mobile-theme-row > span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.theme-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.theme-mobile-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}
.theme-mobile-option:hover {
    background: rgba(255,255,255,0.08);
}
.theme-mobile-option.is-active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05));
    border-color: rgba(var(--accent-rgb),0.45);
}
.theme-mobile-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #1a1a1a center/cover no-repeat;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.theme-mobile-option.is-active .theme-mobile-thumb {
    box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.35), 0 0 0 2px rgba(var(--accent-rgb),0.5);
}
.theme-mobile-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* Match nav-links mobile breakpoint (900px) */
@media (max-width: 900px) {
    .nav .theme-dropdown { display: none; }
}

/* Dashboard topbar — collapse to compact buttons on mobile */
@media (max-width: 720px) {
    .dash-topbar { padding: 12px 14px !important; flex-wrap: wrap; gap: 10px !important; }
    .dash-topbar-actions { flex-wrap: wrap; gap: 8px !important; }
    .dash-user-chip { padding: 3px !important; }
    .dash-user-chip .dash-user-info { display: none; }
    .dash-admin-btn span { display: none; }
    .dash-admin-btn { padding: 10px !important; }
    .dash-topbar .theme-toggle-label { display: none; }
    .dash-topbar .theme-toggle { padding: 4px 8px 4px 4px; }
}

/* ═══ Cookie banner (default Mainstream Sellout) ═══ */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 720px;
    margin: 0 auto;
    background: #111;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    padding: 18px 22px;
    color: #f3f3f3;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    display: flex;
    gap: 18px;
    align-items: center;
    z-index: 9998;
    animation: cookieIn .4s cubic-bezier(.2,.7,.3,1.2) both;
    font-family: 'Inter', system-ui, sans-serif;
}
.cookie-banner.is-leaving { animation: cookieOut .3s ease forwards; }
@keyframes cookieIn  { from { opacity:0; transform: translateY(40px); } to { opacity:1; transform: translateY(0); } }
@keyframes cookieOut { to   { opacity:0; transform: translateY(40px); } }

.cookie-banner-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff1b9f, #c1006e);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cookie-banner-body { flex: 1; min-width: 0; line-height: 1.5; }
.cookie-banner-body strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}
.cookie-banner-body p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.65); }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.cookie-btn-primary {
    background: linear-gradient(135deg, #ff1b9f, #c1006e);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255,27,159,0.35);
}
.cookie-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,27,159,0.5); }
.cookie-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15);
}
.cookie-btn-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

@media (max-width: 640px) {
    .cookie-banner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; left: 10px; right: 10px; bottom: 10px; }
    .cookie-banner-actions { width: 100%; }
    .cookie-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   ════════════════ LOST AMERICANA THEME ═══════════════════
   ═══════════════════════════════════════════════════════════ */

/* ── Body / global background ── */
html[data-theme="americana"] body {
    background:
        radial-gradient(ellipse at top right, rgba(74,134,168,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(201,58,46,0.12) 0%, transparent 55%),
        linear-gradient(180deg, #0e1622 0%, #131a26 50%, #1a1410 100%) !important;
    color: #e8e2d8 !important;
}
html[data-theme="americana"] .section-dark {
    background:
        radial-gradient(ellipse at top, rgba(201,58,46,0.06) 0%, transparent 60%),
        linear-gradient(180deg, #0a0f18, #131a26) !important;
}

/* ── Halftone overlay → vintage star pattern ── */
html[data-theme="americana"] .halftone {
    background-image:
        radial-gradient(circle, rgba(201,58,46,0.06) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(74,134,168,0.05) 1.5px, transparent 2px) !important;
    background-size: 22px 22px, 22px 22px !important;
    background-position: 0 0, 11px 11px !important;
    opacity: 0.7;
}
html[data-theme="americana"] .noise {
    opacity: 0.15;
    filter: contrast(1.4) sepia(0.3);
}

/* ── Brand text ── */
html[data-theme="americana"] .brand-x,
html[data-theme="americana"] .brand-pink,
html[data-theme="americana"] .pink,
html[data-theme="americana"] .strike,
html[data-theme="americana"] .auth-brand .brand-pink,
html[data-theme="americana"] .auth-brand .brand-x { color: #C93A2E !important; }
html[data-theme="americana"] .footer-brand .brand-pink,
html[data-theme="americana"] .footer-brand .brand-x { color: #C93A2E !important; }

html[data-theme="americana"] .brand .brand-pink { color: #4A86A8 !important; }
html[data-theme="americana"] .brand:hover .brand-pink { color: #6FA8C9 !important; }

/* ── Navigation: transparent at top, solid + blurred when scrolled ── */
html[data-theme="americana"] .nav {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
html[data-theme="americana"] .nav.scrolled {
    background: rgba(14,22,34,0.92) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(201,58,46,0.3) !important;
}
html[data-theme="americana"] .nav-links a {
    color: #e8e2d8 !important;
}
html[data-theme="americana"] .nav-links a:not(.nav-cta):not(.nav-account):hover,
html[data-theme="americana"] .nav-links a.is-active { color: #C93A2E !important; }
html[data-theme="americana"] .nav-links a.is-active::after {
    background: linear-gradient(90deg, #C93A2E, #4A86A8) !important;
    height: 3px !important;
}

html[data-theme="americana"] .nav-auth a:not(.nav-cta):not(.nav-account) {
    border-color: #C93A2E !important;
    color: #C93A2E !important;
    background: rgba(201,58,46,0.05) !important;
}
html[data-theme="americana"] .nav-auth a:not(.nav-cta):not(.nav-account):hover {
    background: rgba(201,58,46,0.18) !important;
    border-color: #6FA8C9 !important;
    color: #fff !important;
}

/* ── Buttons ── */
html[data-theme="americana"] .btn-primary,
html[data-theme="americana"] .auth-btn,
html[data-theme="americana"] .dash-admin-btn,
html[data-theme="americana"] .feed-follow,
html[data-theme="americana"] .admin-cta:not(.admin-cta-ghost),
html[data-theme="americana"] .btn-money-submit,
html[data-theme="americana"] .nav-cta:not(.nav-cta-logout),
html[data-theme="americana"] .cookie-btn-primary,
html[data-theme="americana"] .back-to-top {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    color: #F2F2F2 !important;
    box-shadow: 0 6px 18px rgba(201,58,46,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    border-color: transparent !important;
}
html[data-theme="americana"] .btn-primary:hover,
html[data-theme="americana"] .auth-btn:hover,
html[data-theme="americana"] .dash-admin-btn:hover,
html[data-theme="americana"] .feed-follow:hover,
html[data-theme="americana"] .admin-cta:not(.admin-cta-ghost):hover,
html[data-theme="americana"] .btn-money-submit:hover,
html[data-theme="americana"] .nav-cta:not(.nav-cta-logout):hover,
html[data-theme="americana"] .cookie-btn-primary:hover,
html[data-theme="americana"] .back-to-top:hover {
    box-shadow: 0 12px 30px rgba(201,58,46,0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transform: translateY(-2px) !important;
}

html[data-theme="americana"] .nav-cta-logout {
    background: linear-gradient(135deg, #4A86A8, #2c5e7e) !important;
    box-shadow: 0 6px 18px rgba(74,134,168,0.35) !important;
}
html[data-theme="americana"] .btn-ghost {
    border-color: #6FA8C9 !important;
    color: #6FA8C9 !important;
}
html[data-theme="americana"] .btn-ghost:hover {
    background: rgba(111,168,201,0.15) !important;
    color: #fff !important;
}

/* ── Hero ── */
html[data-theme="americana"] .hero { position: relative; }
html[data-theme="americana"] .hero-photo {
    background-image: url('/assets/img/mgk-hero-americana.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    filter: saturate(1.05) contrast(1.05) !important;
}
html[data-theme="americana"] .hero-photo::after {
    background:
        linear-gradient(180deg, transparent 45%, rgba(14,22,34,0.85) 100%),
        linear-gradient(135deg, rgba(201,58,46,0.15) 0%, transparent 45%, rgba(74,134,168,0.18) 100%) !important;
}
html[data-theme="americana"] .hero-glow.glow-1 {
    background: radial-gradient(circle, rgba(201,58,46,0.45) 0%, transparent 65%) !important;
}
html[data-theme="americana"] .hero-glow.glow-2 {
    background: radial-gradient(circle, rgba(74,134,168,0.4) 0%, transparent 65%) !important;
}

html[data-theme="americana"] .badge {
    background: rgba(201,58,46,0.12) !important;
    border: 1px solid rgba(201,58,46,0.4) !important;
    color: #f3e9d8 !important;
}
html[data-theme="americana"] .badge .dot {
    background: #C93A2E !important;
    box-shadow: 0 0 12px #C93A2E !important;
}

html[data-theme="americana"] .hero-title { color: #F2F2F2 !important; }
html[data-theme="americana"] .hero-title .strike {
    text-decoration-color: #C93A2E !important;
    text-decoration-thickness: 6px !important;
}
html[data-theme="americana"] .hero-sub {
    color: rgba(242,242,242,0.7) !important;
    letter-spacing: 4px !important;
}

html[data-theme="americana"] .hero-marquee {
    color: #F2F2F2 !important;
    background: rgba(14,22,34,0.7) !important;
    font-family: 'Permanent Marker', cursive !important;
    border-top: 2px solid rgba(201,58,46,0.55) !important;
    border-bottom: 2px solid rgba(74,134,168,0.55) !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(4px);
}

html[data-theme="americana"] .scroll-prompt {
    color: rgba(201,58,46,0.7) !important;
}
html[data-theme="americana"] .scroll-prompt span {
    border-color: rgba(201,58,46,0.4) !important;
}

/* ── Section labels & headings ── */
html[data-theme="americana"] .section-label {
    color: #C93A2E !important;
    font-family: 'Permanent Marker', cursive !important;
    letter-spacing: 1px !important;
}
html[data-theme="americana"] .section-label::before {
    background: #4A86A8 !important;
}
html[data-theme="americana"] .section-title { color: #F2F2F2 !important; }
html[data-theme="americana"] .section-sub { color: rgba(242,242,242,0.65) !important; }
html[data-theme="americana"] .ep-heading {
    color: #C93A2E !important;
    border-bottom: 2px solid rgba(201,58,46,0.25) !important;
}

/* ── About facts ── */
html[data-theme="americana"] .about-text { color: rgba(242,242,242,0.85) !important; }
html[data-theme="americana"] .about-text strong { color: #F2F2F2 !important; }
html[data-theme="americana"] .about-facts .fact {
    background: linear-gradient(135deg, rgba(201,58,46,0.08), rgba(74,134,168,0.05)) !important;
    border: 1px solid rgba(201,58,46,0.18) !important;
}
html[data-theme="americana"] .fact-num {
    color: #C93A2E !important;
    text-shadow: 2px 2px 0 rgba(74,134,168,0.4) !important;
}
html[data-theme="americana"] .fact-lbl { color: rgba(242,242,242,0.7) !important; }

/* ── Albums grid ── */
html[data-theme="americana"] .album-cover {
    border: 2px solid transparent !important;
    transition: all .3s ease !important;
}
html[data-theme="americana"] .album:hover .album-cover {
    border-color: #C93A2E !important;
    box-shadow: 0 18px 40px rgba(201,58,46,0.35) !important;
    filter: brightness(1.05) saturate(1.1) !important;
}
html[data-theme="americana"] .album-featured .album-cover {
    border-color: rgba(201,58,46,0.4) !important;
    box-shadow: 0 16px 36px rgba(201,58,46,0.3) !important;
}
html[data-theme="americana"] .album h3 { color: #F2F2F2 !important; }
html[data-theme="americana"] .album-year { color: #6FA8C9 !important; }
html[data-theme="americana"] .album-desc { color: rgba(242,242,242,0.7) !important; }
html[data-theme="americana"] .featured-tag {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    color: #F2F2F2 !important;
    border: 1px solid rgba(242,242,242,0.3) !important;
    text-shadow: none !important;
}

html[data-theme="americana"] .album-cover.placeholder { background: linear-gradient(135deg, #C93A2E, #4A86A8) !important; }

/* ── Tracks list ── */
html[data-theme="americana"] .track {
    border-bottom: 1px solid rgba(201,58,46,0.12) !important;
    transition: all .25s ease;
}
html[data-theme="americana"] .track:hover {
    background: linear-gradient(90deg, rgba(201,58,46,0.06), transparent) !important;
    border-left: 3px solid #C93A2E !important;
}
html[data-theme="americana"] .track-num {
    color: #4A86A8 !important;
    font-family: 'Permanent Marker', cursive !important;
}
html[data-theme="americana"] .track-body h3 { color: #F2F2F2 !important; }
html[data-theme="americana"] .track-body p { color: rgba(242,242,242,0.6) !important; }
html[data-theme="americana"] .track-meta { color: rgba(111,168,201,0.7) !important; }

/* ── Quote section ── */
html[data-theme="americana"] .quote-section {
    background:
        radial-gradient(ellipse at center, rgba(201,58,46,0.1) 0%, transparent 70%),
        linear-gradient(180deg, #0a0f18, #131a26) !important;
    border-top: 3px double rgba(201,58,46,0.3) !important;
    border-bottom: 3px double rgba(74,134,168,0.3) !important;
}
html[data-theme="americana"] .quote-mark {
    color: rgba(201,58,46,0.18) !important;
    font-family: 'Permanent Marker', cursive !important;
}
html[data-theme="americana"] .quote-text { color: rgba(242,242,242,0.9) !important; }
html[data-theme="americana"] .quote-text .pink { color: #C93A2E !important; }
html[data-theme="americana"] .quote-author {
    color: #6FA8C9 !important;
    font-family: 'Permanent Marker', cursive !important;
}

/* ── Gallery ── */
html[data-theme="americana"] .gallery-item {
    background: linear-gradient(135deg, #1a1a1a, #2a1f15) !important;
    border: 1px solid rgba(201,58,46,0.15) !important;
}
html[data-theme="americana"] .gi-1 { background: linear-gradient(135deg, #C93A2E, #A02E25) !important; }
html[data-theme="americana"] .gi-2 { background: linear-gradient(135deg, #4A86A8, #2c5e7e) !important; }
html[data-theme="americana"] .gi-3 { background: linear-gradient(135deg, #2a1f15, #C93A2E) !important; }
html[data-theme="americana"] .gi-4 { background: linear-gradient(135deg, #6FA8C9, #4A86A8) !important; }
html[data-theme="americana"] .gi-5 { background: linear-gradient(135deg, #C93A2E, #4A86A8) !important; }
html[data-theme="americana"] .gi-6 { background: linear-gradient(135deg, #1a1a1a, #4A86A8) !important; }
html[data-theme="americana"] .gi-7 { background: linear-gradient(135deg, #4A86A8, #C93A2E) !important; }
html[data-theme="americana"] .gi-8 { background: linear-gradient(135deg, #A02E25, #1a1a1a) !important; }

/* ═══ ICON VISIBILITY FIXES — Lost Americana ═══ */

/* Footer social pills — brighter base + flag-gradient hover */
html[data-theme="americana"] .footer-socials a {
    color: #F2F2F2 !important;
    background: rgba(242,242,242,0.06) !important;
    border-color: rgba(201,58,46,0.28) !important;
}
html[data-theme="americana"] .footer-socials a:hover {
    background: linear-gradient(135deg, #C93A2E, #4A86A8) !important;
    border-color: #C93A2E !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(201,58,46,0.45) !important;
}

/* Footer link icons → lichtblauw voor contrast met body */
html[data-theme="americana"] .footer-links a i { color: #6FA8C9 !important; }
html[data-theme="americana"] .footer-links a:hover { color: #F2F2F2 !important; }
html[data-theme="americana"] .footer-discography-link { color: #6FA8C9 !important; }
html[data-theme="americana"] .footer-discography-link:hover { color: #C93A2E !important; }

/* Nav link icons (Discord icon e.d.) — cream voor zichtbaarheid */
html[data-theme="americana"] .nav-links a i,
html[data-theme="americana"] .mobile-menu a i { color: inherit !important; }
html[data-theme="americana"] .nav-links a:hover i,
html[data-theme="americana"] .nav-links a.is-active i { color: #C93A2E !important; }

/* Generic FA icons in dark sections — slight brightness boost */
html[data-theme="americana"] .section-dark i,
html[data-theme="americana"] .footer i {
    filter: brightness(1.12) saturate(1.08);
}

/* Featured-tag icon stays cream */
html[data-theme="americana"] .featured-tag i { color: #F2F2F2 !important; }

/* Discord page online dot/text stays green */
html[data-theme="americana"] .dc-meta-live strong,
html[data-theme="americana"] .dc-online-dot { color: #22c55e !important; }

/* Hero badge text/icon */
html[data-theme="americana"] .badge { color: #f3e9d8 !important; }

/* Discography links in dashboard / admin */
html[data-theme="americana"] .dash-action i,
html[data-theme="americana"] .dash-card h2 i:first-child,
html[data-theme="americana"] .money-card h2 i:first-child {
    color: #C93A2E !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Admin sidebar icons — cream when not active */
html[data-theme="americana"] .admin-nav a i { color: rgba(242,242,242,0.7) !important; }
html[data-theme="americana"] .admin-nav a:hover i { color: #F2F2F2 !important; }
html[data-theme="americana"] .admin-nav a.active i { color: #C93A2E !important; }

/* User card / avatars / thumbs already covered elsewhere */

/* ── Connect / socials — explicit colors, no var() resolution traps ── */
html:not([data-theme="americana"]) .social i {
    -webkit-text-fill-color: #ff1b9f !important;
    color: #ff1b9f !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    text-shadow: 0 0 12px rgba(255,27,159,0.4);
}
html[data-theme="americana"] .social i {
    -webkit-text-fill-color: #C93A2E !important;
    color: #C93A2E !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    text-shadow: 0 0 12px rgba(201,58,46,0.4);
}
html[data-theme="americana"] .social {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(201,58,46,0.18) !important;
    transition: all .25s ease !important;
}
html[data-theme="americana"] .social:hover {
    background: rgba(201,58,46,0.12) !important;
    border-color: #C93A2E !important;
    transform: translateY(-3px);
}
html[data-theme="americana"] .social strong { color: #F2F2F2 !important; }
html[data-theme="americana"] .social span { color: rgba(242,242,242,0.6) !important; }

/* ── Footer ── */
html[data-theme="americana"] .footer {
    background: linear-gradient(180deg, #0a0f18, #131a26) !important;
    border-top: 4px solid !important;
    border-image: linear-gradient(90deg, #C93A2E 0%, #C93A2E 33%, #F2F2F2 33%, #F2F2F2 66%, #4A86A8 66%, #4A86A8 100%) 1 !important;
}
html[data-theme="americana"] .footer-text { color: rgba(242,242,242,0.65) !important; }
html[data-theme="americana"] .footer-meta { color: rgba(111,168,201,0.7) !important; }
html[data-theme="americana"] .footer-meta .pink { color: #C93A2E !important; }

/* ── Inputs / forms ── */
html[data-theme="americana"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="americana"] select,
html[data-theme="americana"] textarea {
    background: rgba(14,22,34,0.6) !important;
    border-color: rgba(201,58,46,0.2) !important;
    color: #F2F2F2 !important;
}
html[data-theme="americana"] input:focus,
html[data-theme="americana"] select:focus,
html[data-theme="americana"] textarea:focus {
    border-color: #C93A2E !important;
    box-shadow: 0 0 0 3px rgba(201,58,46,0.18) !important;
    background: rgba(201,58,46,0.04) !important;
}

/* ── Auth pages ── */
html[data-theme="americana"] .auth-page {
    background:
        radial-gradient(ellipse at top, rgba(74,134,168,0.18), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(201,58,46,0.18), transparent 60%),
        #0a0f18 !important;
}
html[data-theme="americana"] .auth-bg-glow.glow-1 {
    background: radial-gradient(circle, rgba(201,58,46,0.5), transparent 70%) !important;
}
html[data-theme="americana"] .auth-bg-glow.glow-2 {
    background: radial-gradient(circle, rgba(74,134,168,0.5), transparent 70%) !important;
}
html[data-theme="americana"] .auth-card {
    background: linear-gradient(180deg, rgba(20,28,42,0.95), rgba(15,21,33,0.95)) !important;
    border: 1px solid rgba(201,58,46,0.25) !important;
    box-shadow:
        0 24px 50px rgba(0,0,0,0.5),
        0 0 0 1px rgba(74,134,168,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    position: relative;
}
html[data-theme="americana"] .auth-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #C93A2E 0%, #C93A2E 33%, #F2F2F2 33%, #F2F2F2 66%, #4A86A8 66%, #4A86A8 100%);
    border-radius: 14px 14px 0 0;
}
html[data-theme="americana"] .auth-title { color: #F2F2F2 !important; }
html[data-theme="americana"] .auth-sub { color: rgba(242,242,242,0.65) !important; }
html[data-theme="americana"] .auth-foot { color: rgba(242,242,242,0.55) !important; }
html[data-theme="americana"] .auth-foot a { color: #6FA8C9 !important; }
html[data-theme="americana"] .auth-foot a:hover { color: #C93A2E !important; }
html[data-theme="americana"] .auth-back { color: rgba(242,242,242,0.5) !important; }
html[data-theme="americana"] .auth-back:hover { color: #C93A2E !important; }

html[data-theme="americana"] .auth-forgot-link {
    background: rgba(201,58,46,0.08) !important;
    border-color: rgba(201,58,46,0.3) !important;
    color: #C93A2E !important;
}
html[data-theme="americana"] .auth-forgot-link:hover {
    background: rgba(201,58,46,0.18) !important;
    border-color: #6FA8C9 !important;
    color: #6FA8C9 !important;
}
html[data-theme="americana"] .auth-alert {
    background: rgba(201,58,46,0.12) !important;
    border-color: rgba(201,58,46,0.35) !important;
    color: #ffb3a8 !important;
}
html[data-theme="americana"] .auth-alert.auth-alert-ok {
    background: rgba(74,134,168,0.12) !important;
    border-color: rgba(74,134,168,0.35) !important;
    color: #a8d4eb !important;
}

/* Auth toast */
html[data-theme="americana"] .auth-toast {
    background: linear-gradient(180deg, #131a26, #0e1622) !important;
    border-color: rgba(201,58,46,0.2) !important;
    border-left-color: #C93A2E !important;
}
html[data-theme="americana"] .auth-toast-icon { color: #C93A2E !important; }
html[data-theme="americana"] .auth-toast-bar { background: #C93A2E !important; }
html[data-theme="americana"] .auth-toast-success { border-left-color: #4A86A8 !important; }
html[data-theme="americana"] .auth-toast-success .auth-toast-icon { color: #4A86A8 !important; }
html[data-theme="americana"] .auth-toast-success .auth-toast-bar { background: #4A86A8 !important; }

/* ── Dashboard — high-contrast Lost Americana ── */
html[data-theme="americana"] .dash-page {
    background:
        radial-gradient(ellipse at top right, rgba(74,134,168,0.2), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(201,58,46,0.15), transparent 60%),
        linear-gradient(180deg, #0a0f18 0%, #0e1622 50%, #131a26 100%) !important;
    color: #F2F2F2 !important;
}
/* Dashboard topbar — consistent with site nav (transparent at top, blur on scroll) */
html[data-theme="americana"] .dash-topbar {
    background: linear-gradient(180deg, rgba(10,15,24,0.95), rgba(14,22,34,0.85)) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(201,58,46,0.35) !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.03) inset !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}
html[data-theme="americana"] .dash-brand {
    color: #F2F2F2 !important;
    font-family: 'Anton', sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
html[data-theme="americana"] .dash-brand .brand-pink,
html[data-theme="americana"] .dash-brand .brand-x { color: #C93A2E !important; }
html[data-theme="americana"] .dash-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
html[data-theme="americana"] .dash-user-chip {
    background: linear-gradient(135deg, rgba(20,28,42,0.95), rgba(14,22,34,0.95)) !important;
    border: 1px solid rgba(201,58,46,0.4) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html[data-theme="americana"] .dash-user-info {
    padding: 0 4px !important;
}
html[data-theme="americana"] .dash-user-info strong {
    color: #F2F2F2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
html[data-theme="americana"] .dash-user-info span {
    color: rgba(111,168,201,0.85) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}
html[data-theme="americana"] .dash-logout {
    background: rgba(74,134,168,0.18) !important;
    color: #6FA8C9 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    transition: all .2s ease !important;
}
html[data-theme="americana"] .dash-logout:hover {
    background: #4A86A8 !important;
    color: #fff !important;
    transform: scale(1.06) !important;
}
html[data-theme="americana"] .dash-admin-btn {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    color: #F2F2F2 !important;
    box-shadow: 0 6px 18px rgba(201,58,46,0.4), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
html[data-theme="americana"] .dash-avatar,
html[data-theme="americana"] .admin-avatar,
html[data-theme="americana"] .td-avatar,
html[data-theme="americana"] .user-card-avatar,
html[data-theme="americana"] .tweet-avatar,
html[data-theme="americana"] .nav-avatar {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    color: #F2F2F2 !important;
    box-shadow: 0 4px 14px rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .dash-logout {
    background: rgba(74,134,168,0.12) !important;
    color: #6FA8C9 !important;
}
html[data-theme="americana"] .dash-logout:hover {
    background: #4A86A8 !important;
    color: #fff !important;
}

html[data-theme="americana"] .dash-hero-badge {
    background: rgba(201,58,46,0.12) !important;
    border-color: rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .dash-hero-badge .dot {
    background: #C93A2E !important;
    box-shadow: 0 0 10px #C93A2E !important;
}
html[data-theme="americana"] .dash-hero-title { color: #F2F2F2 !important; }
html[data-theme="americana"] .dash-hero-title .pink { color: #C93A2E !important; }
html[data-theme="americana"] .dash-hero-sub { color: rgba(242,242,242,0.65) !important; }

html[data-theme="americana"] .dash-stat,
html[data-theme="americana"] .dash-card {
    background: linear-gradient(180deg, #181f2c, #11171f) !important;
    border: 1px solid rgba(201,58,46,0.30) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
html[data-theme="americana"] .dash-stat::before,
html[data-theme="americana"] .dash-card::before {
    background: radial-gradient(circle at top right, rgba(201,58,46,0.18), transparent 60%) !important;
}
html[data-theme="americana"] .dash-stat-icon {
    background: linear-gradient(135deg, rgba(201,58,46,0.25), rgba(74,134,168,0.2)) !important;
    color: #C93A2E !important;
    border: 1px solid rgba(201,58,46,0.3) !important;
    text-shadow: 0 2px 8px rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .dash-stat-val {
    color: #F2F2F2 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
html[data-theme="americana"] .dash-stat-lbl { color: rgba(242,242,242,0.75) !important; }
html[data-theme="americana"] .dash-card h2 { color: #F2F2F2 !important; }
html[data-theme="americana"] .dash-card h2 i:first-child {
    color: #C93A2E !important;
    text-shadow: 0 2px 6px rgba(201,58,46,0.4) !important;
}

html[data-theme="americana"] .dash-profile-row {
    border-bottom: 1px solid rgba(201,58,46,0.15) !important;
}
html[data-theme="americana"] .dash-profile-row span { color: rgba(111,168,201,0.85) !important; }
html[data-theme="americana"] .dash-profile-row strong { color: #F2F2F2 !important; }

/* Dash-action cards: SOLID backgrounds, single-color soft icons */
html[data-theme="americana"] .dash-action {
    background: linear-gradient(180deg, #181f2c, #11171f) !important;
    border: 1px solid rgba(201,58,46,0.25) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
html[data-theme="americana"] .dash-action:hover {
    background: linear-gradient(180deg, #1f2a3d, #15202d) !important;
    border-color: #C93A2E !important;
    box-shadow: 0 10px 24px rgba(201,58,46,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transform: translateY(-3px) !important;
}
html[data-theme="americana"] .dash-action i {
    color: #C93A2E !important;
    background: none !important;
    -webkit-text-fill-color: #C93A2E !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    filter: none !important;
    font-size: 28px !important;
    transition: color .25s ease;
}
html[data-theme="americana"] .dash-action:hover i {
    color: #F2F2F2 !important;
    -webkit-text-fill-color: #F2F2F2 !important;
}
html[data-theme="americana"] .dash-action strong {
    color: #F2F2F2 !important;
    font-weight: 800 !important;
}
html[data-theme="americana"] .dash-action span:not(.dash-soon):not(.dash-live) {
    color: rgba(242,242,242,0.8) !important;
}
html[data-theme="americana"] .dash-action.soon {
    opacity: 0.85;
}
html[data-theme="americana"] .dash-soon {
    background: rgba(74,134,168,0.2) !important;
    color: #6FA8C9 !important;
    border: 1px solid rgba(74,134,168,0.3) !important;
}
html[data-theme="americana"] .dash-live {
    background: rgba(201,58,46,0.22) !important;
    color: #ffb3a8 !important;
    border: 1px solid rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .dash-soon {
    background: rgba(74,134,168,0.15) !important;
    color: #6FA8C9 !important;
}
html[data-theme="americana"] .dash-live {
    background: rgba(201,58,46,0.15) !important;
    color: #C93A2E !important;
}
html[data-theme="americana"] .dash-live .dot { background: #C93A2E !important; box-shadow: 0 0 8px #C93A2E !important; }
html[data-theme="americana"] .dash-sec-title { color: #F2F2F2 !important; }
html[data-theme="americana"] .dash-sec-num { color: #4A86A8 !important; font-family: 'Permanent Marker', cursive !important; }
html[data-theme="americana"] .dash-activity-empty i { color: rgba(201,58,46,0.4) !important; }
html[data-theme="americana"] .dash-activity-empty h3 { color: rgba(242,242,242,0.6) !important; }
html[data-theme="americana"] .dash-footer { color: rgba(111,168,201,0.6) !important; }
html[data-theme="americana"] .dash-footer .pink { color: #C93A2E !important; }

html[data-theme="americana"] .dash-flash {
    background: linear-gradient(135deg, rgba(74,134,168,0.18), rgba(201,58,46,0.12)) !important;
    border: 1px solid rgba(74,134,168,0.4) !important;
}

/* ── Admin sidebar ── */
html[data-theme="americana"] .admin-sidebar {
    background: linear-gradient(180deg, #0e1622, #0a0f18) !important;
    border-right-color: rgba(201,58,46,0.2) !important;
}
html[data-theme="americana"] .admin-brand { border-bottom-color: rgba(201,58,46,0.18) !important; }
html[data-theme="americana"] .admin-brand .brand-pink,
html[data-theme="americana"] .admin-brand .brand-x { color: #C93A2E !important; }
html[data-theme="americana"] .admin-nav a:hover { background: rgba(201,58,46,0.06) !important; }
html[data-theme="americana"] .admin-nav a.active {
    background: linear-gradient(135deg, rgba(201,58,46,0.22), rgba(74,134,168,0.08)) !important;
    border: 1px solid rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .admin-nav a.active i { color: #C93A2E !important; }
html[data-theme="americana"] .admin-role {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
}
html[data-theme="americana"] .admin-side-foot { border-top-color: rgba(201,58,46,0.15) !important; }

/* Admin main */
html[data-theme="americana"] .admin-page {
    background:
        radial-gradient(ellipse at top right, rgba(74,134,168,0.12), transparent 50%),
        radial-gradient(ellipse at bottom, rgba(201,58,46,0.08), transparent 60%),
        linear-gradient(180deg, #0e1622, #131a26) !important;
}
html[data-theme="americana"] .admin-eyebrow .dot {
    background: #C93A2E !important;
    box-shadow: 0 0 10px #C93A2E !important;
}
html[data-theme="americana"] .admin-title { color: #F2F2F2 !important; }
html[data-theme="americana"] .admin-title .pink { color: #C93A2E !important; }
html[data-theme="americana"] .admin-sub { color: rgba(242,242,242,0.6) !important; }

html[data-theme="americana"] .admin-stat,
html[data-theme="americana"] .admin-card,
html[data-theme="americana"] .admin-table-wrap,
html[data-theme="americana"] .user-card,
html[data-theme="americana"] .user-form-wrap {
    background: linear-gradient(180deg, #181f2c, #11171f) !important;
    border: 1px solid rgba(201,58,46,0.3) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
html[data-theme="americana"] .admin-card:hover {
    border-color: #C93A2E !important;
    box-shadow: 0 12px 28px rgba(201,58,46,0.3), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transform: translateY(-3px) !important;
}
html[data-theme="americana"] .admin-meta {
    background: linear-gradient(180deg, #181f2c, #11171f) !important;
    border: 1px solid rgba(201,58,46,0.25) !important;
    color: rgba(242,242,242,0.85) !important;
}
html[data-theme="americana"] .admin-meta i { color: #C93A2E !important; }
html[data-theme="americana"] .admin-meta strong { color: #F2F2F2 !important; }
html[data-theme="americana"] .admin-stat::before,
html[data-theme="americana"] .admin-card::before,
html[data-theme="americana"] .user-card::before {
    background: radial-gradient(circle at top right, rgba(201,58,46,0.12), transparent 60%) !important;
}
html[data-theme="americana"] .admin-stat-icon { background: rgba(201,58,46,0.15); color: #C93A2E !important; }
html[data-theme="americana"] .admin-stat-val { color: #F2F2F2 !important; }
html[data-theme="americana"] .admin-stat-lbl { color: rgba(242,242,242,0.6) !important; }
html[data-theme="americana"] .admin-card h3 { color: #F2F2F2 !important; }
html[data-theme="americana"] .admin-card-icon.ic-pink { background: rgba(201,58,46,0.18); color: #C93A2E; }
html[data-theme="americana"] .admin-card-icon.ic-violet { background: rgba(74,134,168,0.18); color: #6FA8C9; }
html[data-theme="americana"] .admin-card-icon.ic-amber  { background: rgba(201,58,46,0.18); color: #ffb380; }
html[data-theme="americana"] .admin-card-icon.ic-cyan   { background: rgba(74,134,168,0.18); color: #6FA8C9; }

html[data-theme="americana"] .admin-table thead th {
    background: rgba(201,58,46,0.06) !important;
    color: rgba(242,242,242,0.7) !important;
    border-bottom: 1px solid rgba(201,58,46,0.2) !important;
}
html[data-theme="americana"] .admin-table tbody td { border-bottom-color: rgba(201,58,46,0.08) !important; }
html[data-theme="americana"] .admin-table tbody tr:hover { background: rgba(201,58,46,0.04) !important; }
html[data-theme="americana"] .admin-table tbody tr.row-self {
    background: linear-gradient(90deg, rgba(201,58,46,0.1), transparent) !important;
    box-shadow: inset 3px 0 0 #C93A2E !important;
}
html[data-theme="americana"] .td-self-tag {
    background: rgba(201,58,46,0.2) !important;
    color: #C93A2E !important;
}
html[data-theme="americana"] .role-pill.role-admin {
    background: rgba(201,58,46,0.18) !important;
    color: #C93A2E !important;
    border-color: rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .role-pill.role-fan {
    background: rgba(74,134,168,0.12) !important;
    color: #6FA8C9 !important;
    border-color: rgba(74,134,168,0.25) !important;
}
html[data-theme="americana"] .action-edit {
    background: rgba(201,58,46,0.12) !important;
    color: #C93A2E !important;
    border-color: rgba(201,58,46,0.3) !important;
}
html[data-theme="americana"] .action-edit:hover {
    background: rgba(201,58,46,0.22) !important;
    border-color: #C93A2E !important;
}
html[data-theme="americana"] .admin-cta-ghost {
    border-color: rgba(74,134,168,0.4) !important;
    color: #6FA8C9 !important;
}
html[data-theme="americana"] .admin-cta-ghost:hover {
    background: rgba(74,134,168,0.1) !important;
    color: #fff !important;
}

/* Password input group / strength meter */
html[data-theme="americana"] .pw-input-group:focus-within {
    border-color: #C93A2E !important;
    background: rgba(201,58,46,0.04) !important;
}
html[data-theme="americana"] .pw-btn:hover {
    background: rgba(201,58,46,0.15) !important;
    color: #C93A2E !important;
}
html[data-theme="americana"] .pw-btn.pw-gen-pulse {
    animation: pwGenFlashAmericana .5s ease;
}
@keyframes pwGenFlashAmericana {
    0%   { background: rgba(201,58,46,0.5); color: #fff; }
    100% { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
}

/* ── Tweets / IG / feed ── */
html[data-theme="americana"] .tweet:hover {
    background: rgba(201,58,46,0.06) !important;
    border-color: rgba(201,58,46,0.3) !important;
}
html[data-theme="americana"] .tweet-mark { color: rgba(74,134,168,0.4) !important; }
html[data-theme="americana"] .feed-card {
    background: linear-gradient(180deg, rgba(20,28,42,0.7), rgba(15,21,33,0.5)) !important;
    border-color: rgba(201,58,46,0.15) !important;
}
html[data-theme="americana"] .feed-card:hover { border-color: #C93A2E !important; }
html[data-theme="americana"] .feed-card::before {
    background: radial-gradient(circle at top right, rgba(201,58,46,0.12), transparent 60%) !important;
}
html[data-theme="americana"] .feed-icon { background: rgba(201,58,46,0.1) !important; }
html[data-theme="americana"] .feed-icon.ig-grad {
    background: linear-gradient(135deg, #C93A2E, #4A86A8 60%, #6FA8C9) !important;
}
html[data-theme="americana"] .feed-cta:hover {
    background: rgba(201,58,46,0.15) !important;
    border-color: rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .feed-vid:hover {
    background: rgba(201,58,46,0.08) !important;
    border-color: rgba(201,58,46,0.4) !important;
    transform: translateX(4px);
}

html[data-theme="americana"] .ig-tile.ig-1 { background-image: linear-gradient(135deg, #C93A2E, #A02E25) !important; }
html[data-theme="americana"] .ig-tile.ig-2 { background-image: linear-gradient(135deg, #4A86A8, #2c5e7e) !important; }
html[data-theme="americana"] .ig-tile.ig-3 { background-image: linear-gradient(135deg, #2a1f15, #C93A2E) !important; }
html[data-theme="americana"] .ig-tile.ig-4 { background-image: linear-gradient(135deg, #6FA8C9, #4A86A8) !important; }
html[data-theme="americana"] .ig-tile.ig-5 { background-image: linear-gradient(135deg, #C93A2E, #4A86A8) !important; }
html[data-theme="americana"] .ig-tile.ig-6 { background-image: linear-gradient(135deg, #A02E25, #1a1a1a) !important; }
html[data-theme="americana"] .ig-tile::after {
    background: linear-gradient(135deg, rgba(201,58,46,0.3), transparent 60%) !important;
}

/* ── Money / finance ── */
html[data-theme="americana"] .money-balance-card {
    background: linear-gradient(135deg, #C93A2E 0%, #A02E25 50%, #4A86A8 100%) !important;
}
html[data-theme="americana"] .money-card h2 i:first-child { color: #C93A2E !important; }
html[data-theme="americana"] .money-link { color: #6FA8C9 !important; }

/* ── Cookie banner override ── */
html[data-theme="americana"] .cookie-banner {
    background: linear-gradient(180deg, #131a26, #0e1622) !important;
    border-color: rgba(201,58,46,0.25) !important;
}
html[data-theme="americana"] .cookie-banner-icon {
    background: linear-gradient(135deg, #C93A2E 0%, #C93A2E 50%, #4A86A8 50%, #4A86A8 100%) !important;
}
html[data-theme="americana"] .cookie-btn-primary {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    box-shadow: 0 6px 16px rgba(201,58,46,0.4) !important;
}
html[data-theme="americana"] .cookie-btn-primary:hover { box-shadow: 0 10px 24px rgba(201,58,46,0.6) !important; }

/* ── Mobile menu ── */
html[data-theme="americana"] .mobile-menu {
    background: linear-gradient(180deg, #0e1622, #131a26) !important;
    border-left: 4px solid #C93A2E !important;
}
html[data-theme="americana"] .mobile-menu a:not(.mobile-cta) { color: #F2F2F2 !important; }
html[data-theme="americana"] .mobile-menu a:hover { color: #C93A2E !important; }
html[data-theme="americana"] .mobile-auth:not(.mobile-cta) {
    background: rgba(201,58,46,0.08) !important;
    border: 1px solid rgba(201,58,46,0.25) !important;
    color: #C93A2E !important;
}
html[data-theme="americana"] .mobile-cta:not(.mobile-cta-logout) {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    color: #F2F2F2 !important;
}
html[data-theme="americana"] .mobile-cta-logout {
    background: linear-gradient(135deg, #4A86A8, #2c5e7e) !important;
}

/* ── Burger ── */
html[data-theme="americana"] .burger span { background: #F2F2F2 !important; }
html[data-theme="americana"] .burger:hover span:nth-child(1) { background: #C93A2E !important; }
html[data-theme="americana"] .burger:hover span:nth-child(2) { background: #F2F2F2 !important; }
html[data-theme="americana"] .burger:hover span:nth-child(3) { background: #4A86A8 !important; }

/* ═══ HARDCODED COLOR OVERRIDES — eliminate Sellout pink shades in Americana ═══
   admin.css and style.css contain hardcoded #6a0066, #ff61c5, #2d1b69 in
   a few gradients (avatars, dash-hero, gallery). We map them to the
   Americana palette here.
*/

/* Admin button glow ring */
html[data-theme="americana"] .dash-admin-btn::before {
    background: linear-gradient(135deg, #6FA8C9, #C93A2E, #2c5e7e) !important;
}

/* Avatars (admin/dashboard/table/user-card/tweet) — already covered upstream,
   but make 100% sure the #6a0066 lekt niet door via cascade */
html[data-theme="americana"] .dash-avatar,
html[data-theme="americana"] .admin-avatar,
html[data-theme="americana"] .td-avatar,
html[data-theme="americana"] .user-card-avatar,
html[data-theme="americana"] .tweet-avatar,
html[data-theme="americana"] .nav-avatar {
    background: linear-gradient(135deg, #C93A2E, #A02E25) !important;
    color: #F2F2F2 !important;
}

/* Dash-hero — same structure as Mainstream Sellout (dark + accent glow), just blue/red tinted */
html[data-theme="americana"] .dash-hero {
    background: linear-gradient(135deg, #0e1a2a 0%, #0a0f18 100%) !important;
    border-color: rgba(201,58,46,0.3) !important;
}
html[data-theme="americana"] .dash-hero-glow {
    background: radial-gradient(ellipse, rgba(201,58,46,0.35), transparent 60%) !important;
}

/* Gallery tiles already covered explicitly above */

/* ═══ SOFT THEME — single-color icons, less neon glow ═══ */
html[data-theme="americana"] .dash-action i,
html[data-theme="americana"] .dash-card h2 i:first-child,
html[data-theme="americana"] .money-card h2 i:first-child,
html[data-theme="americana"] .admin-card-icon i,
html[data-theme="americana"] .feed-icon i,
html[data-theme="americana"] .feed-vid > i:first-child {
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

/* Section labels — drop the heavy text-shadow */
html[data-theme="americana"] .section-label {
    text-shadow: none !important;
}

/* Hero glows — calmer */
html[data-theme="americana"] .hero-glow.glow-1 {
    background: radial-gradient(circle, rgba(201,58,46,0.32) 0%, transparent 65%) !important;
    opacity: 0.85;
}
html[data-theme="americana"] .hero-glow.glow-2 {
    background: radial-gradient(circle, rgba(74,134,168,0.28) 0%, transparent 65%) !important;
    opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════
   ════════════ TICKETS TO MY DOWNFALL THEME ═══════════════
   ═══════════════════════════════════════════════════════════
   Pop-punk era — pink guitar against black.
   Palette:
     pink-guitar:  #E5488A   (primary accent)
     pink-deep:    #B83270   (darker pink for gradients)
     pink-soft:    #FF7DB0   (lighter pink highlight)
     ink-black:    #1C1C1C   (clothing / text)
     pool-white:   #EDEDED   (light text)
     leaf-green:   #3F6F4F   (plant accent)
     wall-beige:   #B58A6A   (warm tone)
     tile-blue:    #2F6F7A   (cool tone, secondary accent)
   ═══════════════════════════════════════════════════════════ */

html[data-theme="ttmd"] {
    --accent:       #E5488A;
    --accent-2:     #B83270;
    --accent-3:     #FF7DB0;
    --accent-rgb:   229,72,138;
    --accent-2-rgb: 184,50,112;
    --accent-3-rgb: 255,125,176;
}

/* ── Body / global background ── */
html[data-theme="ttmd"] body {
    background:
        radial-gradient(ellipse at top right, rgba(229,72,138,0.20) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(47,111,122,0.10) 0%, transparent 55%),
        linear-gradient(180deg, #100a10 0%, #1a0c14 50%, #100a10 100%) !important;
    color: #ededed !important;
}
html[data-theme="ttmd"] .section-dark {
    background:
        radial-gradient(ellipse at top, rgba(229,72,138,0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0e070d, #150810) !important;
}

/* ── Halftone overlay → pink dots over pink dots, denser ── */
html[data-theme="ttmd"] .halftone {
    background-image:
        radial-gradient(circle, rgba(229,72,138,0.08) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(255,125,176,0.05) 1px, transparent 1.5px) !important;
    background-size: 18px 18px, 18px 18px !important;
    background-position: 0 0, 9px 9px !important;
    opacity: 0.7;
}
html[data-theme="ttmd"] .noise {
    opacity: 0.18;
    filter: contrast(1.3);
}

/* ── Brand text ── */
html[data-theme="ttmd"] .brand-x,
html[data-theme="ttmd"] .brand-pink,
html[data-theme="ttmd"] .pink,
html[data-theme="ttmd"] .strike,
html[data-theme="ttmd"] .auth-brand .brand-pink,
html[data-theme="ttmd"] .auth-brand .brand-x,
html[data-theme="ttmd"] .footer-brand .brand-pink,
html[data-theme="ttmd"] .footer-brand .brand-x { color: #5a0e2e !important; }

html[data-theme="ttmd"] .brand .brand-pink { color: #5a0e2e !important; }
html[data-theme="ttmd"] .brand:hover .brand-pink { color: #FF7DB0 !important; }

/* ── Navigation ── */
html[data-theme="ttmd"] .nav {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
html[data-theme="ttmd"] .nav.scrolled {
    background: rgba(16,10,16,0.92) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(229,72,138,0.35) !important;
}
html[data-theme="ttmd"] .nav-links a {
    color: #ededed !important;
}
html[data-theme="ttmd"] .nav-links a:not(.nav-cta):not(.nav-account):hover,
html[data-theme="ttmd"] .nav-links a.is-active { color: #5a0e2e !important; }
html[data-theme="ttmd"] .nav-links a.is-active::after {
    background: linear-gradient(90deg, #E5488A, #FF7DB0) !important;
    height: 3px !important;
}

html[data-theme="ttmd"] .nav-auth a:not(.nav-cta):not(.nav-account) {
    border-color: #5a0e2e !important;
    color: #5a0e2e !important;
    background: rgba(229,72,138,0.06) !important;
}
html[data-theme="ttmd"] .nav-auth a:not(.nav-cta):not(.nav-account):hover {
    background: rgba(229,72,138,0.20) !important;
    border-color: #FF7DB0 !important;
    color: #fff !important;
}

/* ── Buttons (gradient for primary CTAs) ── */
html[data-theme="ttmd"] .btn-primary,
html[data-theme="ttmd"] .auth-btn,
html[data-theme="ttmd"] .dash-admin-btn,
html[data-theme="ttmd"] .feed-follow,
html[data-theme="ttmd"] .admin-cta:not(.admin-cta-ghost),
html[data-theme="ttmd"] .btn-money-submit,
html[data-theme="ttmd"] .nav-cta:not(.nav-cta-logout) {
    background: linear-gradient(135deg, #E5488A, #B83270) !important;
    box-shadow: 0 8px 24px rgba(229,72,138,0.4) !important;
    color: #fff !important;
}
html[data-theme="ttmd"] .btn-primary:hover,
html[data-theme="ttmd"] .auth-btn:hover,
html[data-theme="ttmd"] .dash-admin-btn:hover,
html[data-theme="ttmd"] .feed-follow:hover,
html[data-theme="ttmd"] .admin-cta:not(.admin-cta-ghost):hover,
html[data-theme="ttmd"] .nav-cta:not(.nav-cta-logout):hover {
    box-shadow: 0 12px 32px rgba(229,72,138,0.55) !important;
    filter: brightness(1.06);
}

/* Ghost buttons — pink outline */
html[data-theme="ttmd"] .admin-cta-ghost,
html[data-theme="ttmd"] .page-header-btn-ghost {
    border-color: rgba(229,72,138,0.45) !important;
    color: #ededed !important;
    background: rgba(229,72,138,0.05) !important;
}
html[data-theme="ttmd"] .admin-cta-ghost:hover,
html[data-theme="ttmd"] .page-header-btn-ghost:hover {
    background: rgba(229,72,138,0.15) !important;
    border-color: #5a0e2e !important;
}

/* ── Page-header (admin) — pink stripe + glow ── */
html[data-theme="ttmd"] .page-header {
    background: linear-gradient(135deg, #1a0c14, #0e070d) !important;
}
html[data-theme="ttmd"] .page-header-bg {
    background:
        radial-gradient(ellipse 60% 80% at 90% 0%, rgba(229,72,138,0.22), transparent 60%),
        radial-gradient(ellipse 40% 60% at 0% 100%, rgba(47,111,122,0.10), transparent 65%) !important;
}
html[data-theme="ttmd"] .page-header-bg::after {
    background: linear-gradient(90deg, #E5488A 0%, #FF7DB0 50%, transparent 100%) !important;
}
html[data-theme="ttmd"] .page-header-btn-primary {
    background: linear-gradient(135deg, #E5488A, #B83270) !important;
    box-shadow: 0 8px 22px rgba(229,72,138,0.4) !important;
}

/* ── Cards / boxes that hardcode mainstream-sellout colors ── */
html[data-theme="ttmd"] .admin-card,
html[data-theme="ttmd"] .admin-stat,
html[data-theme="ttmd"] .dash-card,
html[data-theme="ttmd"] .dash-stat,
html[data-theme="ttmd"] .release-card,
html[data-theme="ttmd"] .music-stat,
html[data-theme="ttmd"] .release-form,
html[data-theme="ttmd"] .release-cover-wrap,
html[data-theme="ttmd"] .release-meta-card,
html[data-theme="ttmd"] .user-card,
html[data-theme="ttmd"] .user-form-wrap,
html[data-theme="ttmd"] .featured-card {
    background: linear-gradient(180deg, #1a0c14, #100a10) !important;
    border-color: rgba(229,72,138,0.16) !important;
}

html[data-theme="ttmd"] .admin-card:hover,
html[data-theme="ttmd"] .release-card:hover,
html[data-theme="ttmd"] .featured-card:hover {
    border-color: rgba(229,72,138,0.5) !important;
    box-shadow:
        0 14px 40px rgba(0,0,0,0.5),
        0 0 35px rgba(229,72,138,0.18) !important;
}

/* Sidebar (admin + dashboard) */
html[data-theme="ttmd"] .admin-sidebar,
html[data-theme="ttmd"] .dash-sidebar {
    background: linear-gradient(180deg, #100a10, #0a0608) !important;
    border-right-color: rgba(229,72,138,0.18) !important;
}
html[data-theme="ttmd"] .admin-nav a:hover,
html[data-theme="ttmd"] .dash-sidebar-nav a:hover { background: rgba(229,72,138,0.08) !important; }
html[data-theme="ttmd"] .admin-nav a.active,
html[data-theme="ttmd"] .dash-sidebar-nav a.is-active {
    background: linear-gradient(135deg, rgba(229,72,138,0.22), rgba(184,50,112,0.06)) !important;
    border-color: #5a0e2e !important;
    color: #fff !important;
}
html[data-theme="ttmd"] .admin-nav a.active i,
html[data-theme="ttmd"] .dash-sidebar-nav a.is-active i,
html[data-theme="ttmd"] .dash-sidebar-nav a:hover i { color: #5a0e2e !important; }

html[data-theme="ttmd"] .dash-sidebar-user {
    background: linear-gradient(135deg, rgba(229,72,138,0.18), rgba(47,111,122,0.05)) !important;
    border-color: rgba(229,72,138,0.4) !important;
}
html[data-theme="ttmd"] .dash-side-admin {
    background: linear-gradient(135deg, rgba(229,72,138,0.18), rgba(184,50,112,0.04)) !important;
    border-color: rgba(229,72,138,0.4) !important;
}

/* ── Topbar (account dashboard) ── */
html[data-theme="ttmd"] .dash-topbar-bar { background: #0e070d !important; }
html[data-theme="ttmd"] .dash-topbar-greeting {
    background: linear-gradient(135deg, rgba(229,72,138,0.18), rgba(229,72,138,0.04)) !important;
    border-color: rgba(229,72,138,0.35) !important;
}

/* ── Hero (homepage) — full Rolling Stone press photo (1800×1200) ── */
html[data-theme="ttmd"] .hero { position: relative; }
html[data-theme="ttmd"] .hero-photo {
    background-image: url('/assets/img/mgk-hero-ttmd.jpg') !important;
    background-position: center 30% !important;
    background-size: cover !important;
    filter: saturate(1.1) contrast(1.05) !important;
}
html[data-theme="ttmd"] .hero-photo::after {
    background:
        linear-gradient(180deg, transparent 40%, rgba(16,10,16,0.88) 100%),
        linear-gradient(135deg, rgba(229,72,138,0.20) 0%, transparent 50%, rgba(184,50,112,0.18) 100%) !important;
}
html[data-theme="ttmd"] .hero-glow.glow-1 {
    background: radial-gradient(circle, rgba(229,72,138,0.45) 0%, transparent 60%) !important;
    opacity: 0.9;
}
html[data-theme="ttmd"] .hero-glow.glow-2 {
    background: radial-gradient(circle, rgba(255,125,176,0.30) 0%, transparent 60%) !important;
    opacity: 0.85;
}
html[data-theme="ttmd"] .music-hero-glow.glow-1 {
    background: #E5488A !important;
}
html[data-theme="ttmd"] .music-hero-glow.glow-2 {
    background: #B83270 !important;
}
html[data-theme="ttmd"] .badge {
    background: rgba(229,72,138,0.12) !important;
    border-color: rgba(229,72,138,0.4) !important;
    color: #FF7DB0 !important;
}

/* ── Section labels ── */
html[data-theme="ttmd"] .section-label,
html[data-theme="ttmd"] .dash-sec-num,
html[data-theme="ttmd"] .section-num { color: #5a0e2e !important; text-shadow: none !important; }

/* ── Form inputs focus state ── */
html[data-theme="ttmd"] .auth-card input:focus,
html[data-theme="ttmd"] .release-form input:focus,
html[data-theme="ttmd"] .release-form textarea:focus,
html[data-theme="ttmd"] .release-form select:focus,
html[data-theme="ttmd"] .track-edit-form input:focus,
html[data-theme="ttmd"] .user-form input:focus,
html[data-theme="ttmd"] .form-select:focus {
    border-color: #5a0e2e !important;
    box-shadow: 0 0 0 4px rgba(229,72,138,0.15) !important;
    background: rgba(229,72,138,0.05) !important;
}

/* ── Theme dropdown thumbs/checks ── */
html[data-theme="ttmd"] .theme-option.is-active .theme-option-meta strong,
html[data-theme="ttmd"] .theme-option-check { color: #5a0e2e !important; }

/* ── Footer ── */
html[data-theme="ttmd"] .site-footer,
html[data-theme="ttmd"] .music-footer,
html[data-theme="ttmd"] .dash-footer {
    border-top-color: rgba(229,72,138,0.18) !important;
}

/* ── Soft-theme reset (icons should NOT use gradient text-fill) ── */
html[data-theme="ttmd"] .dash-action i,
html[data-theme="ttmd"] .dash-card h2 i:first-child,
html[data-theme="ttmd"] .money-card h2 i:first-child,
html[data-theme="ttmd"] .admin-card-icon i,
html[data-theme="ttmd"] .feed-icon i,
html[data-theme="ttmd"] .feed-vid > i:first-child {
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    color: #5a0e2e !important;
}

/* ── Music page: list view tabs ── */
html[data-theme="ttmd"] .music-tab.is-active {
    background: linear-gradient(135deg, #E5488A, #B83270) !important;
    box-shadow: 0 6px 18px rgba(229,72,138,0.4) !important;
}

/* ── Tour / RSVP "live" indicator stays green; do nothing ── */

/* ── Auth page (login/register/forgot) glows ── */
html[data-theme="ttmd"] .auth-bg-glow.glow-1 {
    background: #E5488A !important;
    opacity: 0.45;
}
html[data-theme="ttmd"] .auth-bg-glow.glow-2 {
    background: #B83270 !important;
    opacity: 0.40;
}
html[data-theme="ttmd"] .auth-page {
    background:
        radial-gradient(ellipse 60% 50% at 25% 30%, rgba(229,72,138,0.22), transparent 60%),
        radial-gradient(ellipse 60% 50% at 75% 70%, rgba(184,50,112,0.18), transparent 60%),
        linear-gradient(180deg, #0e070d 0%, #1a0c14 50%, #0e070d 100%) !important;
}

/* ── Cookie banner accent ── */
html[data-theme="ttmd"] .cookie-btn-primary {
    background: linear-gradient(135deg, #E5488A, #B83270) !important;
}

/* ── Discord page accents ── */
html[data-theme="ttmd"] .discord-hero-glow,
html[data-theme="ttmd"] .discord-stat-icon {
    color: #5a0e2e !important;
}

/* ── RSVP / countdown widget on dashboard ── */
html[data-theme="ttmd"] .next-show {
    background: linear-gradient(135deg, #1a0c14 0%, #100a10 100%) !important;
    border-color: rgba(229,72,138,0.32) !important;
}
html[data-theme="ttmd"] .countdown-cell {
    border-color: rgba(229,72,138,0.22) !important;
}

/* ── Gallery tiles (homepage) ── */
html[data-theme="ttmd"] .gallery-tile {
    border-color: rgba(229,72,138,0.18) !important;
}
html[data-theme="ttmd"] .gallery-tile:hover {
    border-color: #5a0e2e !important;
    box-shadow: 0 14px 32px rgba(229,72,138,0.25) !important;
}


/* ═══════════════════════════════════════════════════════════
   THEME-SWITCH LOADING SCREEN — vinyl spin with album cover
   ═══════════════════════════════════════════════════════════ */
body.theme-loader-locked { overflow: hidden; }

.theme-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background:
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(var(--accent-rgb), 0.22), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 90%, rgba(var(--accent-rgb), 0.12), transparent 60%),
        #0a0a0a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}
.theme-loader.is-shown {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Cover + vinyl stage ─── */
.theme-loader-stage {
    position: relative;
    width: 280px;
    height: 280px;
}
.theme-loader-cover {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background-position: center;
    background-size: cover;
    background-color: #1a1a1a;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(var(--accent-rgb), 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 3;
    transform: translateX(-12%) scale(0.92) rotate(-3deg);
    opacity: 0;
    animation:
        tlCoverIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards,
        tlBob 3.2s ease-in-out 0.65s infinite;
}
@keyframes tlCoverIn {
    to { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes tlBob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-10px) rotate(1.5deg); }
}

/* ─── Pulsing halo rings radiating outward ─── */
.theme-loader-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.55);
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    animation: tlHalo 2.4s ease-out 0.4s infinite;
}
.theme-loader-halo.theme-loader-halo-2 { animation-delay: 1s; }
.theme-loader-halo.theme-loader-halo-3 { animation-delay: 1.7s; }
@keyframes tlHalo {
    0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.7; border-width: 3px; }
    70%  { opacity: 0.15; border-width: 1.5px; }
    100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; border-width: 1px; }
}

/* ─── Sparks orbiting around the cover ─── */
.theme-loader-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent), 0 0 28px rgba(var(--accent-rgb), 0.55);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
}
.theme-loader-spark-1 { animation: tlSpark 3.2s linear 0.4s infinite;         --rad: 200px; }
.theme-loader-spark-2 { animation: tlSpark 3.6s linear 0.9s infinite reverse; --rad: 220px; width: 6px; height: 6px; }
.theme-loader-spark-3 { animation: tlSpark 2.8s linear 1.2s infinite;         --rad: 180px; width: 5px; height: 5px; }
.theme-loader-spark-4 { animation: tlSpark 4.0s linear 1.5s infinite reverse; --rad: 240px; width: 4px; height: 4px; }
@keyframes tlSpark {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--rad)) rotate(0deg);   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--rad)) rotate(-360deg); opacity: 0; }
}

/* The vinyl "slot" handles the slide-in/slide-out journey
   (slides out of the cover sleeve and tucks back in at the end),
   while the inner disc spins independently. */
.theme-loader-vinyl-slot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translateX(-50%) scale(0.65);
    opacity: 0;
    z-index: 1;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.6));
    animation: tlVinylJourney 1.85s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s forwards;
}
@keyframes tlVinylJourney {
    0%   { transform: translateX(-50%) scale(0.6) rotate(-6deg);  opacity: 0; }   /* tucked behind cover */
    14%  { transform: translateX(-50%) scale(0.85) rotate(-3deg); opacity: 0.85; } /* peeking out left edge */
    32%  { transform: translateX(20%)  scale(1)    rotate(0deg);  opacity: 1; }   /* fully out, peeking right */
    72%  { transform: translateX(20%)  scale(1)    rotate(0deg);  opacity: 1; }   /* hold */
    88%  { transform: translateX(-30%) scale(0.95) rotate(3deg);  opacity: 0.85; } /* sliding back */
    100% { transform: translateX(-50%) scale(0.6)  rotate(6deg);  opacity: 0; }   /* tucked back inside */
}

.theme-loader-vinyl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 0 22%, var(--accent) 22% 24%, transparent 24% 26%, #0a0a0a 26% 38%, #161616 38% 100%),
        repeating-radial-gradient(circle at center, transparent 0 1px, rgba(255, 255, 255, 0.04) 1px 2px);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
    animation: tlSpin 2.2s linear infinite;
}
.theme-loader-vinyl::before {
    /* Centre label on the vinyl, tinted with the accent */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 36%; height: 36%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.theme-loader-vinyl::after {
    /* Pinhole in the centre */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #0a0a0a;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
@keyframes tlSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Text block ─── */
.theme-loader-text {
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    animation: tlTextIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
@keyframes tlTextIn {
    to { opacity: 1; transform: translateY(0); }
}
.theme-loader-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    margin-bottom: 10px;
}
.theme-loader-eyebrow .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent);
    animation: pulse 1.4s ease-in-out infinite;
}
.theme-loader-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 6px;
    text-shadow: 0 0 32px rgba(var(--accent-rgb), 0.5);
}
.theme-loader-sub {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ─── Equalizer bars (10 vertical bars bouncing) ─── */
.theme-loader-eq {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 38px;
    margin-top: -8px;
}
.theme-loader-eq span {
    display: block;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
    transform-origin: bottom;
}
.theme-loader-eq span:nth-child(1)  { animation: tlEq 0.85s ease-in-out 0.05s infinite; }
.theme-loader-eq span:nth-child(2)  { animation: tlEq 0.65s ease-in-out 0.18s infinite; }
.theme-loader-eq span:nth-child(3)  { animation: tlEq 1.10s ease-in-out 0.30s infinite; }
.theme-loader-eq span:nth-child(4)  { animation: tlEq 0.78s ease-in-out 0.05s infinite; }
.theme-loader-eq span:nth-child(5)  { animation: tlEq 0.92s ease-in-out 0.22s infinite; }
.theme-loader-eq span:nth-child(6)  { animation: tlEq 0.70s ease-in-out 0.10s infinite; }
.theme-loader-eq span:nth-child(7)  { animation: tlEq 1.05s ease-in-out 0.28s infinite; }
.theme-loader-eq span:nth-child(8)  { animation: tlEq 0.60s ease-in-out 0.16s infinite; }
.theme-loader-eq span:nth-child(9)  { animation: tlEq 0.95s ease-in-out 0.04s infinite; }
.theme-loader-eq span:nth-child(10) { animation: tlEq 0.82s ease-in-out 0.20s infinite; }
@keyframes tlEq {
    0%, 100% { height: 8%;  opacity: 0.55; }
    25%      { height: 60%; opacity: 1; }
    50%      { height: 30%; opacity: 0.85; }
    75%      { height: 95%; opacity: 1; }
}

/* ─── Progress bar ─── */
.theme-loader-progress {
    width: 220px;
    max-width: 60vw;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.theme-loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
    animation: tlBar 1.6s cubic-bezier(0.7, 0, 0.3, 1) 0.1s forwards;
}
@keyframes tlBar {
    to { width: 100%; }
}

@media (max-width: 540px) {
    .theme-loader-stage { width: 220px; height: 220px; }
    .theme-loader-vinyl-slot { width: 220px; height: 220px; }
    .theme-loader { gap: 24px; }
}

/* ─── Sidebar transparantie fix: solid achtergrond op TTMD + Americana ─── */
html[data-theme="ttmd"] .dash-sidebar,
html[data-theme="americana"] .dash-sidebar {
    position: relative !important;
    z-index: 50 !important;
    isolation: isolate;
}
html[data-theme="americana"] .dash-sidebar {
    background: linear-gradient(180deg, #1a0e08 0%, #120a06 50%, #0d0805 100%) !important;
    border-right: 1px solid rgba(201,58,46,0.25) !important;
}
html[data-theme="ttmd"] .dash-sidebar {
    background: linear-gradient(180deg, #170710 0%, #100509 100%) !important;
    border-right: 1px solid rgba(229,72,138,0.25) !important;
}

/* Sidebar children krijgen ook solid bg om backdrop-effecten te blokkeren */
html[data-theme="ttmd"] .dash-sidebar-scroll,
html[data-theme="americana"] .dash-sidebar-scroll {
    background: transparent !important; /* parent is solid */
}
/* ═══════════════════════════════════════════════════════════
   mgk Nation — BLOOM theme (album palette)

   Palette:
     #8E1E3A — deep rose-red (primary accent)
     #C93A5A — magenta highlight (secondary accent)
     #5A2A2E — dark bordeaux (warm background tint)
     #D6B1A2 — warm beige (skin / soft highlight)
     #A07A6E — taupe (muted secondary)
     #4F6A4A — olive (leaves, supporting accent)
     #2F3F2E — deep green (depth)
     #E7E2DB — cream off-white (text on dark)
     #2B2B2B — near-black (details, borders)
   ═══════════════════════════════════════════════════════════ */

html[data-theme="bloom"] {
    --bloom-rose:     #8E1E3A;
    --bloom-magenta:  #C93A5A;
    --bloom-bordeaux: #5A2A2E;
    --bloom-skin:     #D6B1A2;
    --bloom-taupe:    #A07A6E;
    --bloom-olive:    #4F6A4A;
    --bloom-green:    #2F3F2E;
    --bloom-cream:    #E7E2DB;
    --bloom-ink:      #2B2B2B;

    /* Override the base accent variables many components key off of */
    --accent:        var(--bloom-rose);
    --accent-2:      var(--bloom-magenta);
    --accent-rgb:    142, 30, 58;
    --pink:          var(--bloom-magenta);
    --border:        rgba(214,177,162,0.10);
}

/* Scrollbar — rose to olive gradient */
html[data-theme="bloom"] { scrollbar-color: #8E1E3A #1a0c0e; scrollbar-width: thin; }
html[data-theme="bloom"]::-webkit-scrollbar { width: 12px; }
html[data-theme="bloom"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #1a0c0e, #100808);
}
html[data-theme="bloom"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C93A5A 0%, #8E1E3A 60%, #4F6A4A 100%);
    border-radius: 999px;
    border: 2px solid #100808;
    box-shadow: 0 0 8px rgba(142, 30, 58, 0.5);
}
html[data-theme="bloom"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #E54B7A, #C93A5A);
    box-shadow: 0 0 14px rgba(201, 58, 90, 0.7);
}

/* ═══ Page chrome / backgrounds ═══ */
html[data-theme="bloom"] body {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(90,42,46,0.55) 0%, rgba(0,0,0,0) 55%),
        radial-gradient(ellipse at 80% 90%, rgba(79,106,74,0.32) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #1a0a0c, #0c0708);
    color: var(--bloom-cream);
}
html[data-theme="bloom"] .section-dark { background: #14080a; }
html[data-theme="bloom"] .halftone {
    background-image: radial-gradient(rgba(214,177,162,0.06) 1px, transparent 1px);
}
html[data-theme="bloom"] .noise { opacity: 0.55; mix-blend-mode: overlay; }

/* Brand mark — × in deep rose, "nation" magenta */
html[data-theme="bloom"] .brand-x,
html[data-theme="bloom"] .auth-brand .brand-x,
html[data-theme="bloom"] .footer-brand .brand-x { color: #8E1E3A !important; }
html[data-theme="bloom"] .brand-pink,
html[data-theme="bloom"] .pink,
html[data-theme="bloom"] .strike,
html[data-theme="bloom"] .auth-brand .brand-pink,
html[data-theme="bloom"] .footer-brand .brand-pink { color: #C93A5A !important; }
html[data-theme="bloom"] .brand:hover .brand-pink { color: #E54B7A !important; }

/* ═══ Public navigation ═══ */
html[data-theme="bloom"] .nav {
    background: linear-gradient(180deg, rgba(20,8,10,0.92), rgba(20,8,10,0.78));
    border-bottom: 1px solid rgba(214,177,162,0.10);
    backdrop-filter: blur(10px);
}
html[data-theme="bloom"] .nav.scrolled {
    background: rgba(12,7,8,0.95);
    border-bottom-color: rgba(201,58,90,0.18);
}
html[data-theme="bloom"] .nav-links a { color: var(--bloom-cream); }
html[data-theme="bloom"] .nav-links a:not(.nav-cta):not(.nav-account):hover,
html[data-theme="bloom"] .nav-links a.is-active { color: #C93A5A !important; }
html[data-theme="bloom"] .nav-links a.is-active::after {
    background: linear-gradient(90deg, #8E1E3A, #C93A5A);
}

/* ═══ Buttons / CTAs ═══ */
html[data-theme="bloom"] .btn-primary,
html[data-theme="bloom"] .nav-cta,
html[data-theme="bloom"] .auth-btn,
html[data-theme="bloom"] .util-link.is-cta {
    background: linear-gradient(135deg, #C93A5A, #8E1E3A) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(142,30,58,0.4) !important;
}
html[data-theme="bloom"] .btn-primary:hover,
html[data-theme="bloom"] .nav-cta:hover,
html[data-theme="bloom"] .auth-btn:hover,
html[data-theme="bloom"] .util-link.is-cta:hover {
    box-shadow: 0 12px 26px rgba(201,58,90,0.55) !important;
}

/* ═══ Cards & panels ═══ */
html[data-theme="bloom"] .card,
html[data-theme="bloom"] .stat-card,
html[data-theme="bloom"] .auth-card {
    background: linear-gradient(160deg, rgba(214,177,162,0.04), rgba(214,177,162,0.01));
    border-color: rgba(214,177,162,0.10);
}
html[data-theme="bloom"] .auth-alert {
    background: rgba(142,30,58,0.10);
    border-color: rgba(142,30,58,0.4);
    color: #ffb8c5;
}

/* ═══ Account dashboard / sidebar ═══ */
html[data-theme="bloom"] .dash-sidebar {
    background: linear-gradient(180deg, #14080a, #0a0506);
    border-right-color: rgba(201,58,90,0.18);
}
html[data-theme="bloom"] .dash-sidebar-user {
    background: linear-gradient(135deg, rgba(201,58,90,0.14), rgba(79,106,74,0.06));
    border-color: rgba(201,58,90,0.30);
}
html[data-theme="bloom"] .dash-sidebar-nav a:hover { background: rgba(201,58,90,0.07); }
html[data-theme="bloom"] .dash-sidebar-nav a.is-active {
    background: linear-gradient(90deg, rgba(142,30,58,0.20), transparent);
    color: #fff;
    border-left: 3px solid #C93A5A;
}
html[data-theme="bloom"] .dash-side-section { color: rgba(214,177,162,0.5); }
html[data-theme="bloom"] .dash-side-brand .brand-x   { color: #8E1E3A !important; }
html[data-theme="bloom"] .dash-side-brand .brand-pink { color: #C93A5A !important; }
html[data-theme="bloom"] .dash-side-brand-row {
    background: linear-gradient(180deg, rgba(201,58,90,0.06), transparent);
    border-bottom-color: rgba(214,177,162,0.10);
}
html[data-theme="bloom"] .dash-topbar-bar {
    background: #0d0608;
    border-bottom-color: rgba(214,177,162,0.10);
}
html[data-theme="bloom"] .dash-side-ping {
    background: rgba(79,106,74,0.10);
    border-color: rgba(79,106,74,0.35);
    color: #87b07f;
}
html[data-theme="bloom"] .dash-side-ping .ping-dot { background: #87b07f; }
html[data-theme="bloom"] .dash-side-ping:hover {
    background: rgba(79,106,74,0.20);
    border-color: rgba(79,106,74,0.55);
}

/* Hero / page header */
html[data-theme="bloom"] .dash-hero {
    background: radial-gradient(120% 130% at 0% 0%, rgba(142,30,58,0.18) 0%, transparent 60%),
                linear-gradient(135deg, rgba(201,58,90,0.07), rgba(79,106,74,0.04));
    border-color: rgba(201,58,90,0.25);
}
html[data-theme="bloom"] .dash-hero-glow {
    background: radial-gradient(circle, rgba(201,58,90,0.4) 0%, transparent 70%);
}
html[data-theme="bloom"] .dash-hero-badge {
    background: rgba(142,30,58,0.18);
    border-color: rgba(142,30,58,0.45);
    color: #ffc0d0;
}
html[data-theme="bloom"] .dash-hero-badge .dot {
    background: #C93A5A;
    box-shadow: 0 0 0 0 rgba(201,58,90,0.7);
}
html[data-theme="bloom"] .page-header {
    background: linear-gradient(135deg, rgba(201,58,90,0.08), rgba(79,106,74,0.04));
    border-color: rgba(201,58,90,0.22);
}
html[data-theme="bloom"] .page-header-title .pink { color: #C93A5A !important; }

/* Inputs */
html[data-theme="bloom"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="bloom"] textarea,
html[data-theme="bloom"] select {
    background: rgba(214,177,162,0.04);
    border-color: rgba(214,177,162,0.14);
    color: var(--bloom-cream);
}
html[data-theme="bloom"] input:focus,
html[data-theme="bloom"] textarea:focus,
html[data-theme="bloom"] select:focus {
    border-color: rgba(201,58,90,0.55) !important;
    background: rgba(214,177,162,0.07) !important;
    box-shadow: 0 0 0 3px rgba(201,58,90,0.18) !important;
}

/* Avatars / status */
html[data-theme="bloom"] .nav-avatar,
html[data-theme="bloom"] .dash-avatar,
html[data-theme="bloom"] .user-card-avatar {
    background: linear-gradient(135deg, #2a1014, #1a0a0c);
    color: #C93A5A;
}

/* Auth pages */
html[data-theme="bloom"] body.auth-page {
    background:
        radial-gradient(circle at 20% 30%, rgba(142,30,58,0.30) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(79,106,74,0.20) 0%, transparent 60%),
        linear-gradient(135deg, #0c0507, #1a0a0c 50%, #0c0507);
}
html[data-theme="bloom"] .auth-bg-glow.glow-1 { background: radial-gradient(circle, rgba(201,58,90,0.45) 0%, transparent 70%); }
html[data-theme="bloom"] .auth-bg-glow.glow-2 { background: radial-gradient(circle, rgba(79,106,74,0.30) 0%, transparent 70%); }

/* Footer */
html[data-theme="bloom"] .site-footer { background: #0a0506; border-top-color: rgba(214,177,162,0.10); }
html[data-theme="bloom"] .footer-brand .brand-x   { color: #8E1E3A !important; }
html[data-theme="bloom"] .footer-brand .brand-pink { color: #C93A5A !important; }

/* Toast accents */
html[data-theme="bloom"] .auth-toast.auth-toast-success { border-left-color: #87b07f; }
html[data-theme="bloom"] .auth-toast-success .auth-toast-icon { color: #87b07f; }

/* Generic .pink overrides scattered through inline styles */
html[data-theme="bloom"] .pink { color: #C93A5A !important; }

/* Misc themed gradients */
html[data-theme="bloom"] .stream-btn-spotify,
html[data-theme="bloom"] .auth-btn,
html[data-theme="bloom"] .next-show-btn-primary {
    background: linear-gradient(135deg, #C93A5A, #8E1E3A) !important;
    box-shadow: 0 8px 20px rgba(142,30,58,0.40) !important;
}

/* Bloom-specific olive accent on a few spots for variety (optional) */
html[data-theme="bloom"] .chat-live-pill {
    background: rgba(79,106,74,0.10);
    border-color: rgba(79,106,74,0.40);
    color: #a0c596;
}
html[data-theme="bloom"] .chat-live-pill .dot { background: #87b07f; }

/* Lyrics sync-tag pill */
html[data-theme="bloom"] .tracklist-sync-tag {
    background: rgba(142,30,58,0.16);
    border-color: rgba(142,30,58,0.4);
    color: #ffc0d0;
}
html[data-theme="bloom"] .tracklist-sync-btn {
    background: linear-gradient(135deg, #C93A5A, #8E1E3A);
    box-shadow: 0 6px 14px rgba(142,30,58,0.35);
}
/* ═══════════════════════════════════════════════════════════
   mgk Nation — LACE UP theme (album palette)

   Palette:
     #C23A3A — primary red (lettering)
     #8E2A2A — dark red (shadow / texture)
     #0F0F0F — black (outline)
     #F4F4F4 — white (rim)
     #DCDCDC — light gray (background)
     #BFBFBF — mid gray (noise texture)

   Mood: 2012 mixtape grunge — red letters, black outlines, paper-grain.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="laceup"] {
    --laceup-red:     #C23A3A;
    --laceup-red-dk:  #8E2A2A;
    --laceup-black:   #0F0F0F;
    --laceup-white:   #F4F4F4;
    --laceup-gray-l:  #DCDCDC;
    --laceup-gray-m:  #BFBFBF;

    --accent:     var(--laceup-red);
    --accent-2:   var(--laceup-red-dk);
    --accent-rgb: 194, 58, 58;
    --pink:       var(--laceup-red);
    --border:     rgba(244,244,244,0.10);
}

/* Scrollbar — red on near-black */
html[data-theme="laceup"] { scrollbar-color: #C23A3A #0F0F0F; scrollbar-width: thin; }
html[data-theme="laceup"]::-webkit-scrollbar { width: 12px; }
html[data-theme="laceup"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #0F0F0F, #050505);
}
html[data-theme="laceup"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C23A3A 0%, #8E2A2A 100%);
    border-radius: 999px;
    border: 2px solid #050505;
    box-shadow: 0 0 8px rgba(194,58,58,0.5);
}
html[data-theme="laceup"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #E04848, #C23A3A);
    box-shadow: 0 0 14px rgba(194,58,58,0.8);
}

/* Body / page chrome — black with subtle paper-grain hint */
html[data-theme="laceup"] body {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(194,58,58,0.18) 0%, transparent 55%),
        linear-gradient(180deg, #141414, #0a0a0a);
    color: var(--laceup-white);
}
html[data-theme="laceup"] .section-dark { background: #0a0a0a; }
html[data-theme="laceup"] .halftone {
    background-image: radial-gradient(rgba(244,244,244,0.05) 1px, transparent 1px);
}
html[data-theme="laceup"] .noise { opacity: 0.6; mix-blend-mode: overlay; }

/* Brand mark — × in red, "nation" white-ish */
html[data-theme="laceup"] .brand-x,
html[data-theme="laceup"] .auth-brand .brand-x,
html[data-theme="laceup"] .footer-brand .brand-x { color: #C23A3A !important; }
html[data-theme="laceup"] .brand-pink,
html[data-theme="laceup"] .pink,
html[data-theme="laceup"] .strike,
html[data-theme="laceup"] .auth-brand .brand-pink,
html[data-theme="laceup"] .footer-brand .brand-pink { color: #C23A3A !important; }
html[data-theme="laceup"] .brand:hover .brand-pink { color: #E04848 !important; }

/* Public navigation */
html[data-theme="laceup"] .nav {
    background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(10,10,10,0.78));
    border-bottom: 1px solid rgba(244,244,244,0.10);
    backdrop-filter: blur(10px);
}
html[data-theme="laceup"] .nav.scrolled {
    background: rgba(5,5,5,0.96);
    border-bottom-color: rgba(194,58,58,0.30);
}
html[data-theme="laceup"] .nav-links a { color: var(--laceup-white); }
html[data-theme="laceup"] .nav-links a:not(.nav-cta):not(.nav-account):hover,
html[data-theme="laceup"] .nav-links a.is-active { color: #C23A3A !important; }
html[data-theme="laceup"] .nav-links a.is-active::after {
    background: linear-gradient(90deg, #8E2A2A, #C23A3A);
}

/* Buttons / CTAs */
html[data-theme="laceup"] .btn-primary,
html[data-theme="laceup"] .nav-cta,
html[data-theme="laceup"] .auth-btn,
html[data-theme="laceup"] .util-link.is-cta {
    background: linear-gradient(135deg, #C23A3A, #8E2A2A) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(142,42,42,0.45) !important;
    border: 1px solid rgba(244,244,244,0.10) !important;
}
html[data-theme="laceup"] .btn-primary:hover,
html[data-theme="laceup"] .nav-cta:hover,
html[data-theme="laceup"] .auth-btn:hover,
html[data-theme="laceup"] .util-link.is-cta:hover {
    box-shadow: 0 12px 26px rgba(194,58,58,0.55) !important;
}

/* Cards */
html[data-theme="laceup"] .card,
html[data-theme="laceup"] .stat-card,
html[data-theme="laceup"] .auth-card {
    background: linear-gradient(160deg, rgba(244,244,244,0.04), rgba(244,244,244,0.01));
    border-color: rgba(244,244,244,0.10);
}
html[data-theme="laceup"] .auth-alert {
    background: rgba(194,58,58,0.10);
    border-color: rgba(194,58,58,0.4);
    color: #ffb0b0;
}

/* Account dashboard / sidebar */
html[data-theme="laceup"] .dash-sidebar {
    background: linear-gradient(180deg, #0a0a0a, #050505);
    border-right-color: rgba(194,58,58,0.20);
}
html[data-theme="laceup"] .dash-sidebar-user {
    background: linear-gradient(135deg, rgba(194,58,58,0.16), rgba(244,244,244,0.04));
    border-color: rgba(194,58,58,0.35);
}
html[data-theme="laceup"] .dash-sidebar-nav a:hover { background: rgba(194,58,58,0.07); }
html[data-theme="laceup"] .dash-sidebar-nav a.is-active {
    background: linear-gradient(90deg, rgba(194,58,58,0.20), transparent);
    color: #fff;
    border-left: 3px solid #C23A3A;
}
html[data-theme="laceup"] .dash-side-section { color: rgba(244,244,244,0.55); }
html[data-theme="laceup"] .dash-side-brand .brand-x   { color: #C23A3A !important; }
html[data-theme="laceup"] .dash-side-brand .brand-pink { color: #C23A3A !important; }
html[data-theme="laceup"] .dash-side-brand-row {
    background: linear-gradient(180deg, rgba(194,58,58,0.07), transparent);
    border-bottom-color: rgba(244,244,244,0.10);
}
html[data-theme="laceup"] .dash-topbar-bar {
    background: #0a0a0a;
    border-bottom-color: rgba(244,244,244,0.10);
}
html[data-theme="laceup"] .dash-side-ping {
    background: rgba(194,58,58,0.10);
    border-color: rgba(194,58,58,0.40);
    color: #C23A3A;
}
html[data-theme="laceup"] .dash-side-ping .ping-dot { background: #C23A3A; }
html[data-theme="laceup"] .dash-side-ping:hover {
    background: rgba(194,58,58,0.20);
    border-color: rgba(194,58,58,0.60);
}

/* Hero */
html[data-theme="laceup"] .dash-hero {
    background: radial-gradient(120% 130% at 0% 0%, rgba(194,58,58,0.18) 0%, transparent 60%),
                linear-gradient(135deg, rgba(194,58,58,0.08), rgba(244,244,244,0.02));
    border-color: rgba(194,58,58,0.30);
}
html[data-theme="laceup"] .dash-hero-glow {
    background: radial-gradient(circle, rgba(194,58,58,0.4) 0%, transparent 70%);
}
html[data-theme="laceup"] .dash-hero-badge {
    background: rgba(194,58,58,0.18);
    border-color: rgba(194,58,58,0.5);
    color: #ffc4c4;
}
html[data-theme="laceup"] .dash-hero-badge .dot {
    background: #C23A3A;
    box-shadow: 0 0 0 0 rgba(194,58,58,0.7);
}
html[data-theme="laceup"] .page-header {
    background: linear-gradient(135deg, rgba(194,58,58,0.08), rgba(244,244,244,0.03));
    border-color: rgba(194,58,58,0.25);
}
html[data-theme="laceup"] .page-header-title .pink { color: #C23A3A !important; }

/* Inputs */
html[data-theme="laceup"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="laceup"] textarea,
html[data-theme="laceup"] select {
    background: rgba(244,244,244,0.04);
    border-color: rgba(244,244,244,0.14);
    color: var(--laceup-white);
}
html[data-theme="laceup"] input:focus,
html[data-theme="laceup"] textarea:focus,
html[data-theme="laceup"] select:focus {
    border-color: rgba(194,58,58,0.55) !important;
    background: rgba(244,244,244,0.06) !important;
    box-shadow: 0 0 0 3px rgba(194,58,58,0.18) !important;
}

/* Avatars */
html[data-theme="laceup"] .nav-avatar,
html[data-theme="laceup"] .dash-avatar,
html[data-theme="laceup"] .user-card-avatar {
    background: linear-gradient(135deg, #1a0a0a, #0a0505);
    color: #C23A3A;
}

/* Auth pages */
html[data-theme="laceup"] body.auth-page {
    background:
        radial-gradient(circle at 30% 30%, rgba(194,58,58,0.30) 0%, transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(142,42,42,0.20) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0a, #141414 50%, #0a0a0a);
}
html[data-theme="laceup"] .auth-bg-glow.glow-1 { background: radial-gradient(circle, rgba(194,58,58,0.5) 0%, transparent 70%); }
html[data-theme="laceup"] .auth-bg-glow.glow-2 { background: radial-gradient(circle, rgba(142,42,42,0.30) 0%, transparent 70%); }

/* Footer */
html[data-theme="laceup"] .site-footer { background: #050505; border-top-color: rgba(244,244,244,0.10); }
html[data-theme="laceup"] .footer-brand .brand-x   { color: #C23A3A !important; }
html[data-theme="laceup"] .footer-brand .brand-pink { color: #C23A3A !important; }

/* Toasts */
html[data-theme="laceup"] .auth-toast.auth-toast-success { border-left-color: #C23A3A; }
html[data-theme="laceup"] .auth-toast-success .auth-toast-icon { color: #C23A3A; }

/* Generic .pink overrides */
html[data-theme="laceup"] .pink { color: #C23A3A !important; }

/* Music page CTAs */
html[data-theme="laceup"] .stream-btn-spotify,
html[data-theme="laceup"] .next-show-btn-primary {
    background: linear-gradient(135deg, #C23A3A, #8E2A2A) !important;
    box-shadow: 0 8px 20px rgba(194,58,58,0.40) !important;
}

/* Chat live pill — keep red theme consistent */
html[data-theme="laceup"] .chat-live-pill {
    background: rgba(194,58,58,0.10);
    border-color: rgba(194,58,58,0.40);
    color: #ff7878;
}
html[data-theme="laceup"] .chat-live-pill .dot { background: #C23A3A; }

/* Lyrics sync-tag */
html[data-theme="laceup"] .tracklist-sync-tag {
    background: rgba(194,58,58,0.16);
    border-color: rgba(194,58,58,0.4);
    color: #ffc4c4;
}
html[data-theme="laceup"] .tracklist-sync-btn {
    background: linear-gradient(135deg, #C23A3A, #8E2A2A);
    box-shadow: 0 6px 14px rgba(194,58,58,0.35);
}
/* ═══════════════════════════════════════════════════════════
   mgk Nation — GENERAL ADMISSION theme (album palette)

   Palette:
     #9FB2B0 — sky blue-grey
     #E6E3D8 — soft cloud white
     #6E7F6A — greyed green (tree)
     #3A3F44 — dark steel / cliff
     #B8A78F — warm beige (building)
     #5A4A3F — dark brown (details)
     #4F6B52 — moss green (accent)
     #D8D1A3 — dimmed yellow light

   Mood: cinematic, contemplative — outdoor cliffside,
   beige building, moss-green vegetation, dimmed yellow tungsten.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="genadm"] {
    --ga-sky:    #9FB2B0;
    --ga-cloud:  #E6E3D8;
    --ga-tree:   #6E7F6A;
    --ga-cliff:  #3A3F44;
    --ga-beige:  #B8A78F;
    --ga-brown:  #5A4A3F;
    --ga-moss:   #4F6B52;
    --ga-amber:  #D8D1A3;

    --accent:     var(--ga-moss);
    --accent-2:   var(--ga-beige);
    --accent-rgb: 79, 107, 82;
    --pink:       var(--ga-amber);  /* warm tungsten light replaces pink */
    --border:     rgba(230,227,216,0.10);
}

/* Scrollbar — moss + steel */
html[data-theme="genadm"] { scrollbar-color: #4F6B52 #1c2226; scrollbar-width: thin; }
html[data-theme="genadm"]::-webkit-scrollbar { width: 12px; }
html[data-theme="genadm"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #1c2226, #131618);
}
html[data-theme="genadm"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6E7F6A 0%, #4F6B52 60%, #3A3F44 100%);
    border-radius: 999px;
    border: 2px solid #131618;
    box-shadow: 0 0 8px rgba(79,107,82,0.5);
}
html[data-theme="genadm"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8FA585, #6E7F6A);
    box-shadow: 0 0 14px rgba(159,178,176,0.5);
}

/* Body / page chrome — overcast steel-blue with warm tungsten glow */
html[data-theme="genadm"] body {
    background:
        radial-gradient(ellipse at 80% 12%, rgba(216,209,163,0.12) 0%, rgba(0,0,0,0) 50%),
        radial-gradient(ellipse at 10% 90%, rgba(79,107,82,0.18) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #1c2226, #0e1214);
    color: var(--ga-cloud);
}
html[data-theme="genadm"] .section-dark { background: #131618; }
html[data-theme="genadm"] .halftone {
    background-image: radial-gradient(rgba(230,227,216,0.05) 1px, transparent 1px);
}
html[data-theme="genadm"] .noise { opacity: 0.5; mix-blend-mode: overlay; }

/* Brand mark — × in moss, "nation" in beige */
html[data-theme="genadm"] .brand-x,
html[data-theme="genadm"] .auth-brand .brand-x,
html[data-theme="genadm"] .footer-brand .brand-x { color: #4F6B52 !important; }
html[data-theme="genadm"] .brand-pink,
html[data-theme="genadm"] .pink,
html[data-theme="genadm"] .strike,
html[data-theme="genadm"] .auth-brand .brand-pink,
html[data-theme="genadm"] .footer-brand .brand-pink { color: #B8A78F !important; }
html[data-theme="genadm"] .brand:hover .brand-pink { color: #D8D1A3 !important; }

/* Public navigation */
html[data-theme="genadm"] .nav {
    background: linear-gradient(180deg, rgba(28,34,38,0.92), rgba(28,34,38,0.78));
    border-bottom: 1px solid rgba(230,227,216,0.10);
    backdrop-filter: blur(10px);
}
html[data-theme="genadm"] .nav.scrolled {
    background: rgba(14,18,20,0.96);
    border-bottom-color: rgba(79,107,82,0.30);
}
html[data-theme="genadm"] .nav-links a { color: var(--ga-cloud); }
html[data-theme="genadm"] .nav-links a:not(.nav-cta):not(.nav-account):hover,
html[data-theme="genadm"] .nav-links a.is-active { color: #D8D1A3 !important; }
html[data-theme="genadm"] .nav-links a.is-active::after {
    background: linear-gradient(90deg, #4F6B52, #B8A78F);
}

/* Buttons — moss to beige gradient */
html[data-theme="genadm"] .btn-primary,
html[data-theme="genadm"] .nav-cta,
html[data-theme="genadm"] .auth-btn,
html[data-theme="genadm"] .util-link.is-cta {
    background: linear-gradient(135deg, #6E7F6A, #4F6B52) !important;
    color: var(--ga-cloud) !important;
    box-shadow: 0 8px 18px rgba(58,63,68,0.50) !important;
    border: 1px solid rgba(216,209,163,0.20) !important;
}
html[data-theme="genadm"] .btn-primary:hover,
html[data-theme="genadm"] .nav-cta:hover,
html[data-theme="genadm"] .auth-btn:hover,
html[data-theme="genadm"] .util-link.is-cta:hover {
    box-shadow: 0 12px 26px rgba(79,107,82,0.55) !important;
}

/* Cards */
html[data-theme="genadm"] .card,
html[data-theme="genadm"] .stat-card,
html[data-theme="genadm"] .auth-card {
    background: linear-gradient(160deg, rgba(230,227,216,0.04), rgba(230,227,216,0.01));
    border-color: rgba(230,227,216,0.10);
}
html[data-theme="genadm"] .auth-alert {
    background: rgba(184,167,143,0.10);
    border-color: rgba(184,167,143,0.4);
    color: #efe2cf;
}

/* Account dashboard / sidebar */
html[data-theme="genadm"] .dash-sidebar {
    background: linear-gradient(180deg, #131618, #0a0d0e);
    border-right-color: rgba(159,178,176,0.18);
}
html[data-theme="genadm"] .dash-sidebar-user {
    background: linear-gradient(135deg, rgba(79,107,82,0.18), rgba(184,167,143,0.06));
    border-color: rgba(79,107,82,0.35);
}
html[data-theme="genadm"] .dash-sidebar-nav a:hover { background: rgba(79,107,82,0.10); }
html[data-theme="genadm"] .dash-sidebar-nav a.is-active {
    background: linear-gradient(90deg, rgba(79,107,82,0.22), transparent);
    color: #fff;
    border-left: 3px solid #D8D1A3;
}
html[data-theme="genadm"] .dash-side-section { color: rgba(230,227,216,0.55); }
html[data-theme="genadm"] .dash-side-brand .brand-x   { color: #4F6B52 !important; }
html[data-theme="genadm"] .dash-side-brand .brand-pink { color: #B8A78F !important; }
html[data-theme="genadm"] .dash-side-brand-row {
    background: linear-gradient(180deg, rgba(79,107,82,0.06), transparent);
    border-bottom-color: rgba(230,227,216,0.10);
}
html[data-theme="genadm"] .dash-topbar-bar {
    background: #0e1214;
    border-bottom-color: rgba(230,227,216,0.10);
}
html[data-theme="genadm"] .dash-side-ping {
    background: rgba(79,107,82,0.12);
    border-color: rgba(79,107,82,0.45);
    color: #a0c596;
}
html[data-theme="genadm"] .dash-side-ping .ping-dot { background: #6E7F6A; }
html[data-theme="genadm"] .dash-side-ping:hover {
    background: rgba(79,107,82,0.22);
    border-color: rgba(79,107,82,0.65);
}

/* Hero */
html[data-theme="genadm"] .dash-hero {
    background: radial-gradient(120% 130% at 0% 0%, rgba(216,209,163,0.14) 0%, transparent 60%),
                linear-gradient(135deg, rgba(79,107,82,0.08), rgba(184,167,143,0.04));
    border-color: rgba(184,167,143,0.25);
}
html[data-theme="genadm"] .dash-hero-glow {
    background: radial-gradient(circle, rgba(216,209,163,0.4) 0%, transparent 70%);
}
html[data-theme="genadm"] .dash-hero-badge {
    background: rgba(216,209,163,0.16);
    border-color: rgba(216,209,163,0.45);
    color: #f3edcb;
}
html[data-theme="genadm"] .dash-hero-badge .dot {
    background: #D8D1A3;
    box-shadow: 0 0 0 0 rgba(216,209,163,0.7);
}
html[data-theme="genadm"] .page-header {
    background: linear-gradient(135deg, rgba(79,107,82,0.08), rgba(184,167,143,0.04));
    border-color: rgba(184,167,143,0.25);
}
html[data-theme="genadm"] .page-header-title .pink { color: #D8D1A3 !important; }

/* Inputs */
html[data-theme="genadm"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="genadm"] textarea,
html[data-theme="genadm"] select {
    background: rgba(230,227,216,0.04);
    border-color: rgba(230,227,216,0.14);
    color: var(--ga-cloud);
}
html[data-theme="genadm"] input:focus,
html[data-theme="genadm"] textarea:focus,
html[data-theme="genadm"] select:focus {
    border-color: rgba(79,107,82,0.55) !important;
    background: rgba(230,227,216,0.07) !important;
    box-shadow: 0 0 0 3px rgba(79,107,82,0.18) !important;
}

/* Avatars */
html[data-theme="genadm"] .nav-avatar,
html[data-theme="genadm"] .dash-avatar,
html[data-theme="genadm"] .user-card-avatar {
    background: linear-gradient(135deg, #1f2628, #131618);
    color: #B8A78F;
}

/* Auth pages */
html[data-theme="genadm"] body.auth-page {
    background:
        radial-gradient(circle at 25% 30%, rgba(159,178,176,0.25) 0%, transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(216,209,163,0.18) 0%, transparent 60%),
        linear-gradient(135deg, #0e1214, #1c2226 50%, #0e1214);
}
html[data-theme="genadm"] .auth-bg-glow.glow-1 { background: radial-gradient(circle, rgba(159,178,176,0.35) 0%, transparent 70%); }
html[data-theme="genadm"] .auth-bg-glow.glow-2 { background: radial-gradient(circle, rgba(216,209,163,0.30) 0%, transparent 70%); }

/* Footer */
html[data-theme="genadm"] .site-footer { background: #0a0d0e; border-top-color: rgba(230,227,216,0.10); }
html[data-theme="genadm"] .footer-brand .brand-x   { color: #4F6B52 !important; }
html[data-theme="genadm"] .footer-brand .brand-pink { color: #B8A78F !important; }

/* Toasts */
html[data-theme="genadm"] .auth-toast.auth-toast-success { border-left-color: #6E7F6A; }
html[data-theme="genadm"] .auth-toast-success .auth-toast-icon { color: #6E7F6A; }

/* .pink overrides (used as accent in many places) */
html[data-theme="genadm"] .pink { color: #D8D1A3 !important; }

/* Music page CTAs */
html[data-theme="genadm"] .stream-btn-spotify,
html[data-theme="genadm"] .next-show-btn-primary {
    background: linear-gradient(135deg, #6E7F6A, #4F6B52) !important;
    box-shadow: 0 8px 20px rgba(79,107,82,0.40) !important;
}

/* Chat live pill — moss green */
html[data-theme="genadm"] .chat-live-pill {
    background: rgba(79,107,82,0.10);
    border-color: rgba(79,107,82,0.40);
    color: #a0c596;
}
html[data-theme="genadm"] .chat-live-pill .dot { background: #6E7F6A; }

/* Lyrics sync-tag — amber tungsten */
html[data-theme="genadm"] .tracklist-sync-tag {
    background: rgba(216,209,163,0.16);
    border-color: rgba(216,209,163,0.4);
    color: #f3edcb;
}
html[data-theme="genadm"] .tracklist-sync-btn {
    background: linear-gradient(135deg, #D8D1A3, #B8A78F);
    color: #2B2B2B;
    box-shadow: 0 6px 14px rgba(216,209,163,0.35);
}
/* ═══════════════════════════════════════════════════════════
   mgk Nation — HOTEL DIABLO theme (album palette)

   Palette:
     #0D0D0F — deep charcoal (background)
     #2A2A2E — dark grey (shadow / texture)
     #D8CFC6 — cool skin (light)
     #9C8F86 — taupe (skin shadow)
     #7E8FA3 — blue-grey (eyes / cool accent)
     #B57EDC — neon purple ('Hotel Diablo' lettering)
     #F2F2F2 — soft white (highlight)

   Mood: dark, ghostly, neon-purple glow against cool skin tones.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="diablo"] {
    --hd-charcoal: #0D0D0F;
    --hd-grey:     #2A2A2E;
    --hd-skin:     #D8CFC6;
    --hd-taupe:    #9C8F86;
    --hd-blue:     #7E8FA3;
    --hd-neon:     #B57EDC;
    --hd-white:    #F2F2F2;

    --accent:     var(--hd-neon);
    --accent-2:   var(--hd-blue);
    --accent-rgb: 181, 126, 220;
    --pink:       var(--hd-neon);
    --border:     rgba(216,207,198,0.10);
}

/* Scrollbar — neon purple on charcoal */
html[data-theme="diablo"] { scrollbar-color: #B57EDC #0D0D0F; scrollbar-width: thin; }
html[data-theme="diablo"]::-webkit-scrollbar { width: 12px; }
html[data-theme="diablo"]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #0D0D0F, #050507);
}
html[data-theme="diablo"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #B57EDC 0%, #8456b0 70%, #7E8FA3 100%);
    border-radius: 999px;
    border: 2px solid #050507;
    box-shadow: 0 0 10px rgba(181,126,220,0.55);
}
html[data-theme="diablo"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d4a8f0, #B57EDC);
    box-shadow: 0 0 18px rgba(181,126,220,0.85);
}

/* Body / page chrome — charcoal with neon-purple ghost glow */
html[data-theme="diablo"] body {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(181,126,220,0.18) 0%, rgba(0,0,0,0) 55%),
        radial-gradient(ellipse at 15% 90%, rgba(126,143,163,0.16) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #0D0D0F, #050507);
    color: var(--hd-skin);
}
html[data-theme="diablo"] .section-dark { background: #0D0D0F; }
html[data-theme="diablo"] .halftone {
    background-image: radial-gradient(rgba(216,207,198,0.05) 1px, transparent 1px);
}
html[data-theme="diablo"] .noise { opacity: 0.55; mix-blend-mode: overlay; }

/* Brand mark — × in neon, "nation" in cool blue */
html[data-theme="diablo"] .brand-x,
html[data-theme="diablo"] .auth-brand .brand-x,
html[data-theme="diablo"] .footer-brand .brand-x { color: #B57EDC !important; text-shadow: 0 0 12px rgba(181,126,220,0.5); }
html[data-theme="diablo"] .brand-pink,
html[data-theme="diablo"] .pink,
html[data-theme="diablo"] .strike,
html[data-theme="diablo"] .auth-brand .brand-pink,
html[data-theme="diablo"] .footer-brand .brand-pink { color: #B57EDC !important; }
html[data-theme="diablo"] .brand:hover .brand-pink { color: #d4a8f0 !important; }

/* Public navigation */
html[data-theme="diablo"] .nav {
    background: linear-gradient(180deg, rgba(13,13,15,0.92), rgba(13,13,15,0.78));
    border-bottom: 1px solid rgba(181,126,220,0.18);
    backdrop-filter: blur(10px);
}
html[data-theme="diablo"] .nav.scrolled {
    background: rgba(5,5,7,0.96);
    border-bottom-color: rgba(181,126,220,0.32);
}
html[data-theme="diablo"] .nav-links a { color: var(--hd-skin); }
html[data-theme="diablo"] .nav-links a:not(.nav-cta):not(.nav-account):hover,
html[data-theme="diablo"] .nav-links a.is-active { color: #B57EDC !important; }
html[data-theme="diablo"] .nav-links a.is-active::after {
    background: linear-gradient(90deg, #7E8FA3, #B57EDC);
}

/* Buttons — neon purple gradient with glow */
html[data-theme="diablo"] .btn-primary,
html[data-theme="diablo"] .nav-cta,
html[data-theme="diablo"] .auth-btn,
html[data-theme="diablo"] .util-link.is-cta {
    background: linear-gradient(135deg, #B57EDC, #8456b0) !important;
    color: var(--hd-white) !important;
    box-shadow: 0 8px 18px rgba(181,126,220,0.45), 0 0 24px rgba(181,126,220,0.18) !important;
    border: 1px solid rgba(216,207,198,0.10) !important;
}
html[data-theme="diablo"] .btn-primary:hover,
html[data-theme="diablo"] .nav-cta:hover,
html[data-theme="diablo"] .auth-btn:hover,
html[data-theme="diablo"] .util-link.is-cta:hover {
    box-shadow: 0 12px 28px rgba(181,126,220,0.6), 0 0 32px rgba(181,126,220,0.28) !important;
}

/* Cards */
html[data-theme="diablo"] .card,
html[data-theme="diablo"] .stat-card,
html[data-theme="diablo"] .auth-card {
    background: linear-gradient(160deg, rgba(216,207,198,0.04), rgba(216,207,198,0.01));
    border-color: rgba(216,207,198,0.10);
}
html[data-theme="diablo"] .auth-alert {
    background: rgba(181,126,220,0.10);
    border-color: rgba(181,126,220,0.4);
    color: #e8c8ff;
}

/* Account dashboard / sidebar */
html[data-theme="diablo"] .dash-sidebar {
    background: linear-gradient(180deg, #0D0D0F, #050507);
    border-right-color: rgba(181,126,220,0.20);
}
html[data-theme="diablo"] .dash-sidebar-user {
    background: linear-gradient(135deg, rgba(181,126,220,0.16), rgba(126,143,163,0.06));
    border-color: rgba(181,126,220,0.35);
}
html[data-theme="diablo"] .dash-sidebar-nav a:hover { background: rgba(181,126,220,0.08); }
html[data-theme="diablo"] .dash-sidebar-nav a.is-active {
    background: linear-gradient(90deg, rgba(181,126,220,0.22), transparent);
    color: #fff;
    border-left: 3px solid #B57EDC;
    box-shadow: inset 0 0 16px rgba(181,126,220,0.12);
}
html[data-theme="diablo"] .dash-side-section { color: rgba(216,207,198,0.55); }
html[data-theme="diablo"] .dash-side-brand .brand-x   { color: #B57EDC !important; text-shadow: 0 0 10px rgba(181,126,220,0.5); }
html[data-theme="diablo"] .dash-side-brand .brand-pink { color: #B57EDC !important; }
html[data-theme="diablo"] .dash-side-brand-row {
    background: linear-gradient(180deg, rgba(181,126,220,0.07), transparent);
    border-bottom-color: rgba(216,207,198,0.10);
}
html[data-theme="diablo"] .dash-topbar-bar {
    background: #050507;
    border-bottom-color: rgba(216,207,198,0.10);
}
html[data-theme="diablo"] .dash-side-ping {
    background: rgba(181,126,220,0.10);
    border-color: rgba(181,126,220,0.45);
    color: #d4a8f0;
}
html[data-theme="diablo"] .dash-side-ping .ping-dot { background: #B57EDC; box-shadow: 0 0 8px rgba(181,126,220,0.6); }
html[data-theme="diablo"] .dash-side-ping:hover {
    background: rgba(181,126,220,0.20);
    border-color: rgba(181,126,220,0.65);
}

/* Hero */
html[data-theme="diablo"] .dash-hero {
    background: radial-gradient(120% 130% at 0% 0%, rgba(181,126,220,0.20) 0%, transparent 60%),
                linear-gradient(135deg, rgba(181,126,220,0.08), rgba(126,143,163,0.04));
    border-color: rgba(181,126,220,0.30);
}
html[data-theme="diablo"] .dash-hero-glow {
    background: radial-gradient(circle, rgba(181,126,220,0.45) 0%, transparent 70%);
}
html[data-theme="diablo"] .dash-hero-badge {
    background: rgba(181,126,220,0.20);
    border-color: rgba(181,126,220,0.5);
    color: #e8c8ff;
}
html[data-theme="diablo"] .dash-hero-badge .dot {
    background: #B57EDC;
    box-shadow: 0 0 0 0 rgba(181,126,220,0.7);
}
html[data-theme="diablo"] .page-header {
    background: linear-gradient(135deg, rgba(181,126,220,0.10), rgba(126,143,163,0.04));
    border-color: rgba(181,126,220,0.28);
}
html[data-theme="diablo"] .page-header-title .pink { color: #B57EDC !important; }

/* Inputs */
html[data-theme="diablo"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="diablo"] textarea,
html[data-theme="diablo"] select {
    background: rgba(216,207,198,0.04);
    border-color: rgba(216,207,198,0.14);
    color: var(--hd-skin);
}
html[data-theme="diablo"] input:focus,
html[data-theme="diablo"] textarea:focus,
html[data-theme="diablo"] select:focus {
    border-color: rgba(181,126,220,0.55) !important;
    background: rgba(216,207,198,0.07) !important;
    box-shadow: 0 0 0 3px rgba(181,126,220,0.20) !important;
}

/* Avatars */
html[data-theme="diablo"] .nav-avatar,
html[data-theme="diablo"] .dash-avatar,
html[data-theme="diablo"] .user-card-avatar {
    background: linear-gradient(135deg, #1a1118, #0D0D0F);
    color: #B57EDC;
}

/* Auth pages */
html[data-theme="diablo"] body.auth-page {
    background:
        radial-gradient(circle at 30% 30%, rgba(181,126,220,0.32) 0%, transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(126,143,163,0.20) 0%, transparent 60%),
        linear-gradient(135deg, #050507, #0D0D0F 50%, #050507);
}
html[data-theme="diablo"] .auth-bg-glow.glow-1 { background: radial-gradient(circle, rgba(181,126,220,0.5) 0%, transparent 70%); }
html[data-theme="diablo"] .auth-bg-glow.glow-2 { background: radial-gradient(circle, rgba(126,143,163,0.30) 0%, transparent 70%); }

/* Footer */
html[data-theme="diablo"] .site-footer { background: #050507; border-top-color: rgba(216,207,198,0.10); }
html[data-theme="diablo"] .footer-brand .brand-x   { color: #B57EDC !important; text-shadow: 0 0 8px rgba(181,126,220,0.4); }
html[data-theme="diablo"] .footer-brand .brand-pink { color: #B57EDC !important; }

/* Toasts */
html[data-theme="diablo"] .auth-toast.auth-toast-success { border-left-color: #B57EDC; }
html[data-theme="diablo"] .auth-toast-success .auth-toast-icon { color: #B57EDC; }

/* .pink overrides */
html[data-theme="diablo"] .pink { color: #B57EDC !important; }

/* Music page CTAs */
html[data-theme="diablo"] .stream-btn-spotify,
html[data-theme="diablo"] .next-show-btn-primary {
    background: linear-gradient(135deg, #B57EDC, #8456b0) !important;
    box-shadow: 0 8px 20px rgba(181,126,220,0.45), 0 0 24px rgba(181,126,220,0.20) !important;
}

/* Chat live pill — keep it neon purple for theme consistency */
html[data-theme="diablo"] .chat-live-pill {
    background: rgba(181,126,220,0.10);
    border-color: rgba(181,126,220,0.40);
    color: #d4a8f0;
}
html[data-theme="diablo"] .chat-live-pill .dot { background: #B57EDC; box-shadow: 0 0 8px rgba(181,126,220,0.6); }

/* Lyrics sync-tag */
html[data-theme="diablo"] .tracklist-sync-tag {
    background: rgba(181,126,220,0.18);
    border-color: rgba(181,126,220,0.4);
    color: #e8c8ff;
}
html[data-theme="diablo"] .tracklist-sync-btn {
    background: linear-gradient(135deg, #B57EDC, #8456b0);
    box-shadow: 0 6px 14px rgba(181,126,220,0.45), 0 0 20px rgba(181,126,220,0.20);
}