/* ==========================================================================
   BASE.CSS - Variables, Resets, Typography
   ========================================================================== */

:root {
    --g: linear-gradient(135deg, #60a5fa, #a78bfa 40%, #f472b6);
    --bd: #334155;
    --bg: #0b1220;
    --card-bg: rgba(15, 23, 42, 0.6);
    /* More transparent for glass effect */

    /* Text Colors */
    --text-main: #e2e8f0;
    --text-q: #f8fafc;
    --text-a: #e2e8f0;

    /* Choice Colors - Now handled by glass classes */
    --choice-bg: rgba(255, 255, 255, 0.03);

    /* AI bold-term color (used in Gemini hint/explanation cards) */
    --ai-bold: #bfdbfe;

    /* Status Colors */
    --st-neu: #475569;
    --st-new: #ef4444;
    --st-fam: #f59e0b;
    --st-mas: #22c55e;

    /* Ambient Vars */
    --amb-min: 20px;
    --amb-max: 60px;
    --amb-c1: #60a5fa66;
    --amb-c2: #f472b699;

    /* Theme-synced gray surfaces */
    --app-surface: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.6)) 72%, #242a31 28%);
    --app-surface-strong: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.6)) 84%, #14181e 16%);
    --app-surface-muted: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.6)) 58%, #323943 42%);
    --app-border: color-mix(in srgb, var(--bd, #334155) 75%, rgba(255, 255, 255, 0.15) 25%);
}

* {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    /* Default to Inter */
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--amb-c1, #60a5fa66) 45%, transparent) 0%, transparent 38%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--amb-c2, #f472b699) 42%, transparent) 0%, transparent 40%),
        linear-gradient(160deg, var(--app-surface-muted) 0%, var(--app-surface) 52%, var(--app-surface-strong) 100%);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* --- Subtle Blurred Gradient Background --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 18% 55%, color-mix(in srgb, var(--amb-c1, #60a5fa66) 55%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--amb-c2, #f472b699) 50%, transparent) 0%, transparent 45%);
    filter: blur(72px);
    opacity: 0.9;
    z-index: -1;
    pointer-events: none;
}

body.quiz-gen-open::before {
    filter: blur(80px);
}

body.welcome-mode {
    background:
        radial-gradient(circle at 50% -14%, color-mix(in srgb, var(--card-bg, #0f172a) 18%, transparent) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--card-bg, #0f172a) 22%, transparent) 0%, transparent 46%),
        linear-gradient(165deg,
            color-mix(in srgb, var(--card-bg, #0f172a) 20%, #010204 80%) 0%,
            color-mix(in srgb, var(--card-bg, #0f172a) 24%, #000205 76%) 52%,
            color-mix(in srgb, var(--card-bg, #0f172a) 18%, #000 82%) 100%);
}

body.welcome-mode::before {
    background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent) 0%, transparent 46%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--g2, #f472b6) 14%, transparent) 0%, transparent 52%);
    filter: blur(102px);
    opacity: 0.38;
}

h1 {
    text-align: center;
    margin: 0 0 1rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 2.2rem;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(96, 165, 250, 0.3);
    pointer-events: none;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.gradient-text {
    background-image: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

input[type="file"] {
    display: none;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 2px solid #334155;
    border-radius: 50%;
}

iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    touch-action: pan-x pan-y pinch-zoom;
    border-radius: 0 0 12px 12px;
}

/* --- Performance Lite Profile --- */
body.perf-lite::before {
    filter: blur(28px);
    opacity: 0.46;
}

body.perf-lite #audio-visualizer {
    display: none !important;
}

body.perf-lite.ambient-on #audio-visualizer,
body.perf-lite.visualizer-on #audio-visualizer {
    display: block !important;
}

body.perf-lite #quiz-card:not(.ambient-active):not(.visualizer-active),
body.perf-lite .glass-btn,
body.perf-lite #menu-dropdown,
body.perf-lite #source-dropdown,
body.perf-lite .auto-options-dropdown,
body.perf-lite .refresh-options-dropdown,
body.perf-lite .modal-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.perf-lite .glass-btn,
body.perf-lite .refresh-opt-btn,
body.perf-lite .auto-opt-btn {
    transition: none !important;
}

body.perf-lite .gradient-text {
    text-shadow: none !important;
}

body.perf-lite #evidence-svg .connection-flow-dot {
    display: none !important;
}

body.perf-lite #evidence-svg .connection-line.pulsing,
body.perf-lite #evidence-svg .connection-line-glow.pulsing,
body.perf-lite #evidence-svg .connection-endpoint.pulsing {
    animation: none !important;
}