/* Structural per-theme overrides - things a variable swap can't express.
   Loaded last on every page so it wins over each page's own stylesheet.
   Color/palette changes belong in theme-vars.css, not here. */

/* ==========================================================================
   Retro: green-on-black terminal, dashed neon window chrome, CRT scanlines.
   ========================================================================== */

[data-theme="retro"] body {
    /* home.css/profile.css/mp4.css set body's background via the shorthand
       (background: <gradient>), which resets background-color to
       transparent - so replacing just background-image here (for the
       scanline pattern) left nothing opaque behind it on those pages,
       showing the browser's default white/grey through. Setting
       background-color explicitly fixes it everywhere regardless of what
       shorthand the page's own CSS used. */
    background-color: var(--bg-dark);
    background-image:
        repeating-linear-gradient(0deg, rgba(57, 255, 20, 0.04) 0px, rgba(57, 255, 20, 0.04) 1px, transparent 1px, transparent 3px);
}

[data-theme="retro"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            rgba(0, 0, 0, 0) 2px);
}

[data-theme="retro"] .card,
[data-theme="retro"] .site-nav,
[data-theme="retro"] .hacker-ad-container,
[data-theme="retro"] .conversion-history,
[data-theme="retro"] #result,
[data-theme="retro"] .nav-user-menu .user-dropdown,
[data-theme="retro"] .panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-style: dashed;
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 0 0 12px var(--accent-glow-primary);
}

[data-theme="retro"] .card-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-shadow: none;
    background: var(--bg-light);
    border: 1px dashed var(--border-color);
    padding: 8px 16px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    animation: none;
}

[data-theme="retro"] .card-title::after {
    display: none;
}

[data-theme="retro"] input[type="text"],
[data-theme="retro"] select,
[data-theme="retro"] textarea,
[data-theme="retro"] .toggle-btn,
[data-theme="retro"] button[type="submit"],
[data-theme="retro"] .btn,
[data-theme="retro"] .action-btn {
    border-radius: 0;
    box-shadow: none;
}

[data-theme="retro"] button[type="submit"]:hover,
[data-theme="retro"] .btn:hover,
[data-theme="retro"] .action-btn:hover {
    transform: none;
    box-shadow: 0 0 10px var(--accent-glow-primary);
}

[data-theme="retro"] .progress-bar-bg,
[data-theme="retro"] .progress-bar {
    border-radius: 0;
}

[data-theme="retro"] .hacker-ad-container,
[data-theme="retro"] #adblock-message,
[data-theme="retro"] #random-glitch-ad-wrapper {
    animation: none;
}

/* ==========================================================================
   Green Modern: dark, sleek, animated gradient mesh, glassy modern cards.
   ========================================================================== */

[data-theme="green-modern"] body {
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(34, 197, 94, 0.16), transparent 60%),
        radial-gradient(900px 600px at 90% 100%, rgba(74, 222, 128, 0.12), transparent 60%),
        var(--bg-dark);
    background-attachment: fixed;
    animation: greenModernDrift 18s ease-in-out infinite alternate;
}

@keyframes greenModernDrift {
    0% {
        background-position: 0% 0%, 100% 100%, 0 0;
    }

    100% {
        background-position: 8% 4%, 92% 96%, 0 0;
    }
}

[data-theme="green-modern"] .card,
[data-theme="green-modern"] .site-nav,
[data-theme="green-modern"] .hacker-ad-container,
[data-theme="green-modern"] .conversion-history,
[data-theme="green-modern"] #result,
[data-theme="green-modern"] .nav-user-menu .user-dropdown,
[data-theme="green-modern"] .panel {
    border-radius: 20px;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    animation: none;
}

[data-theme="green-modern"] .card::before {
    display: none;
}

[data-theme="green-modern"] .card-title {
    text-shadow: 0 0 18px rgba(34, 197, 94, 0.5);
    animation: none;
}

[data-theme="green-modern"] .card-title::after {
    box-shadow: none;
}

[data-theme="green-modern"] button[type="submit"],
[data-theme="green-modern"] .btn,
[data-theme="green-modern"] .action-btn,
[data-theme="green-modern"] .toggle-btn.selected {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}

[data-theme="green-modern"] button[type="submit"]:hover,
[data-theme="green-modern"] .btn:hover,
[data-theme="green-modern"] .action-btn:hover {
    box-shadow: 0 12px 32px rgba(74, 222, 128, 0.45);
}

[data-theme="green-modern"] .toggle-btn {
    border-radius: 12px;
}

[data-theme="green-modern"] input[type="text"] {
    border-radius: 14px;
}

[data-theme="green-modern"] .hacker-ad-container,
[data-theme="green-modern"] #adblock-message,
[data-theme="green-modern"] #random-glitch-ad-wrapper {
    animation: none;
}

[data-theme="green-modern"] .progress-bar-bg,
[data-theme="green-modern"] .progress-bar {
    border-radius: 999px;
}