/* ============================================================
   base.css — global styles, themes, prose, @font-face
   Wyniesione z templates/base.html (inline <style>) 2026-05-24.
   Edytuj tu i commituj. Tailwind utility classes siedza w
   static/css/output.css (kompilowany przez scripts/build-css.ps1).
   ============================================================ */

/* ===== @font-face — self-hosted fonts (replacement for Google Fonts CDN) ===== */
/* Inter to font wariantowy (variable) — jeden plik na 400-700 wag. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/inter/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/inter/inter-latin.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/space-mono/space-mono-400-latin-ext.22937a2ab67d.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/space-mono/space-mono-400-latin.049dfc5919c2.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/space-mono/space-mono-700-latin-ext.5019c3006926.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/space-mono/space-mono-700-latin.e5e908997a45.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/press-start-2p/press-start-2p-400-latin-ext.d1de284c0403.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/press-start-2p/press-start-2p-400-latin.5c7e04d0202b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Layout primitives ===== */

[x-cloak] { display: none !important; }
html { font-size: 16px; }

/* ========== DARK THEME (default) ========== */
[data-theme="dark"], :root {
    --ultra-bg: 18 18 28;
    --ultra-surface: 26 26 38;
    --ultra-surface-hover: 34 34 48;
    --ultra-border: 31 31 46;
    --ultra-border-hover: 42 42 62;
    --ultra-text: 200 200 216;
    --ultra-muted: 122 122 154;
    --ultra-accent: 232 147 44;
    --ultra-accent-hover: 245 162 61;
    --ultra-accent-glow: rgba(232, 147, 44, 0.25);
    --ultra-success: 0 255 136;
    --ultra-success-dim: rgba(0, 255, 136, 0.08);
    --ultra-warning: 255 204 0;
    --ultra-warning-dim: rgba(255, 204, 0, 0.08);
    --ultra-danger: 255 51 102;
    --ultra-danger-dim: rgba(255, 51, 102, 0.08);
    --ultra-neon: 0 255 204;
    --ultra-neon-dim: rgba(0, 255, 204, 0.08);
    /* Style-specific */
    --body-gradient-1: rgba(232, 147, 44, 0.03);
    --body-gradient-2: rgba(0, 255, 204, 0.02);
    --selection-bg: rgb(232, 147, 44);
    --selection-text: rgb(10, 10, 15);
    --scrollbar-thumb: #1f1f2e;
    --scrollbar-thumb-hover: #2a2a3e;
    --scanline-color: rgba(0, 0, 0, 0.03);
    --glow-soft: rgba(232, 147, 44, 0.03);
    --glow-accent: rgba(232, 147, 44, 0.08);
    --glow-neon: rgba(0, 255, 204, 0.08);
    --inset-highlight: rgba(255, 255, 255, 0.03);
    --shadow-card: rgba(0, 0, 0, 0.25);
    --progress-alt: #D07E1F;
}

/* ========== LIGHT THEME ========== */
[data-theme="light"] {
    --ultra-bg: 245 243 237;
    --ultra-surface: 255 255 255;
    --ultra-surface-hover: 238 236 230;
    --ultra-border: 210 206 198;
    --ultra-border-hover: 188 184 176;
    --ultra-text: 26 26 46;
    --ultra-muted: 85 85 105;
    --ultra-accent: 175 95 0;
    --ultra-accent-hover: 200 120 10;
    --ultra-accent-glow: rgba(175, 95, 0, 0.15);
    --ultra-success: 0 90 55;
    --ultra-success-dim: rgba(0, 90, 55, 0.10);
    --ultra-warning: 140 70 0;
    --ultra-warning-dim: rgba(140, 70, 0, 0.10);
    --ultra-danger: 170 20 20;
    --ultra-danger-dim: rgba(170, 20, 20, 0.10);
    --ultra-neon: 0 75 115;
    --ultra-neon-dim: rgba(0, 75, 115, 0.10);
    /* Style-specific */
    --body-gradient-1: rgba(175, 95, 0, 0.04);
    --body-gradient-2: rgba(0, 75, 115, 0.03);
    --selection-bg: rgb(175, 95, 0);
    --selection-text: #ffffff;
    --scrollbar-thumb: #d2cec6;
    --scrollbar-thumb-hover: #bcb8b0;
    --scanline-color: rgba(0, 0, 0, 0.015);
    --glow-soft: rgba(175, 95, 0, 0.06);
    --glow-accent: rgba(175, 95, 0, 0.10);
    --glow-neon: rgba(0, 75, 115, 0.06);
    --inset-highlight: rgba(255, 255, 255, 0.6);
    --shadow-card: rgba(0, 0, 0, 0.06);
    --progress-alt: #9a5800;
}

body {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    line-height: 1.6;
    background: rgb(var(--ultra-bg));
    background-image:
        radial-gradient(ellipse at 20% 50%, var(--body-gradient-1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--body-gradient-2) 0%, transparent 50%);
    background-attachment: fixed;
    color: rgb(var(--ultra-text));
    transition: background-color 0.3s ease, color 0.3s ease;
}
::selection { background-color: var(--selection-bg); color: var(--selection-text); }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
/* Glow effects */
.ultra-glow { box-shadow: 0 0 30px var(--glow-soft), inset 0 1px 0 var(--inset-highlight); }
.ultra-glow-accent { box-shadow: 0 0 20px var(--glow-accent), 0 0 60px var(--glow-soft); }
.neon-glow { box-shadow: 0 0 10px var(--glow-neon), 0 0 30px var(--glow-neon); }
/* Pixel font for special elements */
.font-pixel { font-family: 'Press Start 2P', monospace; }
/* Scanline effect */
.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--scanline-color) 2px,
        var(--scanline-color) 4px
    );
    pointer-events: none;
    border-radius: inherit;
}
.scanlines { position: relative; }
/* Retro border */
.retro-border {
    border: 1px solid rgb(var(--ultra-border));
    box-shadow: inset 0 1px 0 var(--inset-highlight), 0 1px 3px var(--shadow-card);
}
/* Terminal cursor blink */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.cursor-blink::after {
    content: '_';
    animation: blink 1s step-end infinite;
    color: rgb(var(--ultra-accent));
}
/* Progress bar retro */
.retro-progress {
    background: rgb(var(--ultra-border));
    border: 1px solid rgb(var(--ultra-border-hover));
}
.retro-progress-fill {
    background: repeating-linear-gradient(
        90deg,
        rgb(var(--ultra-accent)),
        rgb(var(--ultra-accent)) 8px,
        var(--progress-alt) 8px,
        var(--progress-alt) 10px
    );
    transition: width 0.7s ease-out;
}
/* Hover glow on cards */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
    border-color: var(--ultra-accent-glow);
    box-shadow: 0 0 20px var(--glow-soft), 0 4px 20px var(--shadow-card);
    transform: translateY(-2px);
}
/* Prose markdown styling */
.prose p { margin: 1em 0; line-height: 1.75; }
.prose h2 { font-size: 1.35rem; font-weight: 700; color: rgb(var(--ultra-accent)); margin: 2.5em 0 0.75em; padding-bottom: 0.4em; border-bottom: 1px solid rgb(var(--ultra-border)); }
.prose h3 { font-size: 1.1rem; font-weight: 700; color: rgb(var(--ultra-text)); margin: 2em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 1em 0; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin: 0.4em 0; line-height: 1.7; }
.prose li strong { color: rgb(var(--ultra-accent)); font-weight: 700; }
.prose strong { color: rgb(var(--ultra-text)); font-weight: 700; }
.prose em { color: rgb(var(--ultra-muted)); font-style: italic; }
.prose a { color: rgb(var(--ultra-accent)); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: rgb(var(--ultra-accent-hover)); }
.prose blockquote {
    border-left: 3px solid rgb(var(--ultra-accent));
    background: var(--ultra-accent-glow);
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border-radius: 0 4px 4px 0;
}
.prose blockquote p { margin: 0.4em 0; color: rgb(var(--ultra-text)); }
.prose hr {
    border: none;
    border-top: 1px solid rgb(var(--ultra-border));
    margin: 2.5em 0;
}
.prose code {
    background: rgb(var(--ultra-surface-hover));
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    color: rgb(var(--ultra-neon));
}
.prose pre {
    background: rgb(var(--ultra-surface));
    border: 1px solid rgb(var(--ultra-border));
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5em 0;
}
.prose pre code { background: none; padding: 0; }
/* Theme toggle animation */
.theme-toggle { transition: transform 0.3s ease; }
.theme-toggle:hover { transform: scale(1.1); }
/* Light theme surface shadow for depth */
[data-theme="light"] .card-hover,
[data-theme="light"] .retro-border {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .card-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* ========== LIGHT THEME: hardcoded Tailwind color overrides ========== */
/* These classes use fixed bright colors meant for dark backgrounds.
   On light theme we swap them to darker, high-contrast equivalents. */

/* text-green-400 (#4ade80) -> dark green for light bg */
[data-theme="light"] .text-green-400  { color: #15803d !important; }
/* text-yellow-400 (#facc15) -> dark amber */
[data-theme="light"] .text-yellow-400 { color: #a16207 !important; }
/* text-red-400 (#f87171) -> dark red */
[data-theme="light"] .text-red-400    { color: #b91c1c !important; }
/* text-purple-400 (#c084fc) -> dark purple */
[data-theme="light"] .text-purple-400 { color: #7e22ce !important; }
/* text-gray-400 (#9ca3af) -> darker gray */
[data-theme="light"] .text-gray-400   { color: #4b5563 !important; }
/* text-cyan-400 (#22d3ee) -> dark cyan/teal */
[data-theme="light"] .text-cyan-400   { color: #0e7490 !important; }
/* text-blue-400 (#60a5fa) -> dark blue */
[data-theme="light"] .text-blue-400   { color: #1d4ed8 !important; }
/* text-orange-400 (#fb923c) -> dark orange */
[data-theme="light"] .text-orange-400 { color: #c2410c !important; }
/* text-emerald-400 (#34d399) -> dark emerald */
[data-theme="light"] .text-emerald-400 { color: #047857 !important; }
/* text-pink-400 (#f472b6) -> dark pink */
[data-theme="light"] .text-pink-400   { color: #be185d !important; }
/* text-amber-600 (#d97706) -> stays ok, but darken slightly */
[data-theme="light"] .text-amber-600  { color: #92400e !important; }
/* text-yellow-500 variants used in reset buttons */
[data-theme="light"] .text-yellow-500\/70 { color: rgba(146, 64, 14, 0.7) !important; }

/* Border overrides for dark-theme-specific borders */
[data-theme="light"] .border-green-800\/40  { border-color: rgba(22, 101, 52, 0.35) !important; }
[data-theme="light"] .border-yellow-800\/40 { border-color: rgba(133, 77, 14, 0.35) !important; }
[data-theme="light"] .border-yellow-500\/60 { border-color: rgba(133, 77, 14, 0.50) !important; }
[data-theme="light"] .border-red-700\/50    { border-color: rgba(185, 28, 28, 0.45) !important; }
[data-theme="light"] .border-yellow-700\/50 { border-color: rgba(161, 98, 7, 0.45) !important; }
[data-theme="light"] .border-purple-700\/40 { border-color: rgba(126, 34, 206, 0.35) !important; }
[data-theme="light"] .border-purple-800\/40 { border-color: rgba(107, 33, 168, 0.35) !important; }
[data-theme="light"] .border-cyan-800\/40   { border-color: rgba(21, 94, 117, 0.35) !important; }
[data-theme="light"] .border-green-600      { border-color: #16a34a !important; }
[data-theme="light"] .border-green-700      { border-color: #15803d !important; }
[data-theme="light"] .border-red-600        { border-color: #dc2626 !important; }

/* Background overrides: dark-900 shades -> light-tinted equivalents */
[data-theme="light"] .bg-green-900\/20  { background-color: rgba(22, 101, 52, 0.08) !important; }
[data-theme="light"] .bg-green-900\/30  { background-color: rgba(22, 101, 52, 0.10) !important; }
[data-theme="light"] .bg-green-900\/40  { background-color: rgba(22, 101, 52, 0.12) !important; }
[data-theme="light"] .bg-green-900\/50  { background-color: rgba(22, 101, 52, 0.15) !important; }
[data-theme="light"] .bg-cyan-900\/30   { background-color: rgba(14, 116, 144, 0.08) !important; }
[data-theme="light"] .bg-purple-900\/30  { background-color: rgba(107, 33, 168, 0.08) !important; }
[data-theme="light"] .bg-purple-600\/20  { background-color: rgba(126, 34, 206, 0.10) !important; }
[data-theme="light"] .bg-purple-600\/40  { background-color: rgba(126, 34, 206, 0.15) !important; }
[data-theme="light"] .bg-purple-500\/5   { background-color: rgba(126, 34, 206, 0.06) !important; }
[data-theme="light"] .bg-red-900\/20    { background-color: rgba(153, 27, 27, 0.08) !important; }
[data-theme="light"] .bg-red-900\/40    { background-color: rgba(153, 27, 27, 0.12) !important; }

/* Hardcoded border-*-400/30 for story messages - darken for light bg */
[data-theme="light"] .border-green-400\/30  { border-color: rgba(22, 101, 52, 0.30) !important; }
[data-theme="light"] .border-yellow-400\/30 { border-color: rgba(161, 98, 7, 0.30) !important; }
[data-theme="light"] .border-red-400\/30    { border-color: rgba(185, 28, 28, 0.30) !important; }
[data-theme="light"] .border-purple-400\/30 { border-color: rgba(126, 34, 206, 0.30) !important; }
[data-theme="light"] .border-gray-400\/30   { border-color: rgba(75, 85, 99, 0.30) !important; }
[data-theme="light"] .border-cyan-400\/30   { border-color: rgba(14, 116, 144, 0.30) !important; }

/* Additional text colors used in mentor hints, leaderboard, alerts */
[data-theme="light"] .text-yellow-300     { color: #92400e !important; }
[data-theme="light"] .text-yellow-300\/90 { color: rgba(146, 64, 14, 0.9) !important; }
[data-theme="light"] .text-yellow-500     { color: #a16207 !important; }
[data-theme="light"] .text-yellow-700     { color: #713f12 !important; }
[data-theme="light"] .text-red-300        { color: #b91c1c !important; }
[data-theme="light"] .text-green-300      { color: #15803d !important; }
[data-theme="light"] .text-green-500      { color: #166534 !important; }
[data-theme="light"] .text-emerald-300    { color: #047857 !important; }
[data-theme="light"] .text-emerald-400    { color: #065f46 !important; }

/* Yellow border/bg overrides for mentor hint cards, easter eggs */
[data-theme="light"] .border-yellow-500       { border-color: #a16207 !important; }
[data-theme="light"] .border-yellow-500\/50   { border-color: rgba(161, 98, 7, 0.45) !important; }
[data-theme="light"] .border-yellow-500\/30   { border-color: rgba(161, 98, 7, 0.30) !important; }
[data-theme="light"] .border-yellow-600\/50   { border-color: rgba(133, 77, 14, 0.45) !important; }
[data-theme="light"] .border-yellow-600\/40   { border-color: rgba(133, 77, 14, 0.35) !important; }
[data-theme="light"] .border-yellow-700\/30   { border-color: rgba(113, 63, 18, 0.30) !important; }
[data-theme="light"] .bg-yellow-950\/20       { background-color: rgba(113, 63, 18, 0.06) !important; }
[data-theme="light"] .bg-yellow-900\/10       { background-color: rgba(113, 63, 18, 0.06) !important; }
[data-theme="light"] .bg-yellow-900\/20       { background-color: rgba(113, 63, 18, 0.08) !important; }
[data-theme="light"] .bg-yellow-900\/40       { background-color: rgba(113, 63, 18, 0.12) !important; }
[data-theme="light"] .bg-yellow-700\/30       { background-color: rgba(113, 63, 18, 0.10) !important; }
[data-theme="light"] .bg-yellow-500\/10       { background-color: rgba(161, 98, 7, 0.08) !important; }
[data-theme="light"] .bg-yellow-500\/15       { background-color: rgba(161, 98, 7, 0.10) !important; }

/* Emerald overrides for cockpit cohort/finance pages */
[data-theme="light"] .border-emerald-800\/50  { border-color: rgba(6, 95, 70, 0.40) !important; }
[data-theme="light"] .border-emerald-800\/30  { border-color: rgba(6, 95, 70, 0.25) !important; }
[data-theme="light"] .border-emerald-400      { border-color: #059669 !important; }
[data-theme="light"] .bg-emerald-900\/20      { background-color: rgba(6, 95, 70, 0.08) !important; }
[data-theme="light"] .bg-emerald-900\/30      { background-color: rgba(6, 95, 70, 0.10) !important; }
[data-theme="light"] .bg-emerald-950\/30      { background-color: rgba(6, 95, 70, 0.08) !important; }

/* Red background/border overrides for confirmation buttons */
[data-theme="light"] .bg-red-700\/30          { background-color: rgba(185, 28, 28, 0.10) !important; }
[data-theme="light"] .border-red-600\/50      { border-color: rgba(220, 38, 38, 0.45) !important; }
[data-theme="light"] .border-red-800\/40      { border-color: rgba(153, 27, 27, 0.35) !important; }

/* Green border/bg overrides for onboarding and success states */
[data-theme="light"] .border-green-400        { border-color: #16a34a !important; }
[data-theme="light"] .bg-green-400\/20        { background-color: rgba(22, 163, 74, 0.12) !important; }
[data-theme="light"] .bg-green-500\/20        { background-color: rgba(22, 163, 74, 0.12) !important; }
[data-theme="light"] .border-green-900        { border-color: rgba(20, 83, 45, 0.40) !important; }
[data-theme="light"] .border-green-900\/50    { border-color: rgba(20, 83, 45, 0.40) !important; }
[data-theme="light"] .border-green-900\/30    { border-color: rgba(20, 83, 45, 0.25) !important; }
[data-theme="light"] .border-green-900\/40    { border-color: rgba(20, 83, 45, 0.30) !important; }
[data-theme="light"] .border-green-500\/60    { border-color: rgba(22, 163, 74, 0.50) !important; }

/* Yellow-800 border for completed week cards */
[data-theme="light"] .border-yellow-800\/50   { border-color: rgba(133, 77, 14, 0.40) !important; }

/* Ring color for mood selector */
[data-theme="light"] .ring-yellow-500         { --tw-ring-color: #a16207 !important; }

/* Amber badge overrides (yearly subscription badges) */
[data-theme="light"] .text-amber-400          { color: #92400e !important; }
[data-theme="light"] .bg-amber-900\/30        { background-color: rgba(120, 53, 15, 0.08) !important; }
[data-theme="light"] .border-amber-700\/40    { border-color: rgba(146, 64, 14, 0.35) !important; }

/* Purple overrides for badges, cockpit status, cohort pages */
[data-theme="light"] .text-purple-300         { color: #7e22ce !important; }
[data-theme="light"] .text-purple-400\/20     { color: rgba(126, 34, 206, 0.30) !important; }
[data-theme="light"] .text-purple-400\/70     { color: rgba(126, 34, 206, 0.80) !important; }
[data-theme="light"] .border-purple-500\/50   { border-color: rgba(126, 34, 206, 0.45) !important; }
[data-theme="light"] .border-purple-500\/30   { border-color: rgba(126, 34, 206, 0.25) !important; }
[data-theme="light"] .border-purple-900\/30   { border-color: rgba(107, 33, 168, 0.20) !important; }
[data-theme="light"] .bg-purple-900\/10       { background-color: rgba(107, 33, 168, 0.06) !important; }
[data-theme="light"] .bg-purple-600\/30       { background-color: rgba(126, 34, 206, 0.12) !important; }
[data-theme="light"] .border-purple-800\/60   { border-color: rgba(107, 33, 168, 0.45) !important; }
[data-theme="light"] .border-purple-400       { border-color: #7e22ce !important; }

/* Emerald-500 for cohort filter active state */
[data-theme="light"] .border-emerald-500      { border-color: #059669 !important; }

/* Red-900 borders/backgrounds for failure states and mission errors */
[data-theme="light"] .border-red-900\/50      { border-color: rgba(153, 27, 27, 0.35) !important; }
[data-theme="light"] .border-red-900\/30      { border-color: rgba(153, 27, 27, 0.25) !important; }
[data-theme="light"] .bg-red-900\/10          { background-color: rgba(153, 27, 27, 0.06) !important; }

/* HTMX loading indicators (legacy: inline spinner shows in flow) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

/* Globalny spinner (#global-spinner) — fixed top-right, fade in/out zamiast display */
#global-spinner.htmx-indicator { display: block; opacity: 0; transition: opacity 200ms ease-in; pointer-events: none; }
.htmx-request #global-spinner.htmx-indicator,
#global-spinner.htmx-request.htmx-indicator { opacity: 1; }

.htmx-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgb(var(--ultra-accent));
}
.htmx-loading::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid rgb(var(--ultra-border));
    border-top-color: rgb(var(--ultra-accent));
    border-radius: 50%;
    animation: htmx-spin 0.6s linear infinite;
}
@keyframes htmx-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .scanlines::after { display: none !important; }
    .ultra-glow, .ultra-glow-accent, .neon-glow { box-shadow: none !important; }
    .animate-pulse { animation: none !important; }
}