/* MIX THEME */

:root {
    --bg-base: #101318;
    --bg-elevated: #161b22;
    --bg-panel: #1d2430;
    --bg-soft: #263240;
    --text-main: #f8fbf8;
    --text-soft: #d5e7e0;
    --text-muted: #9fb5ad;
    --text-faint: #748b84;
    --primary: #00b8a9;
    --secondary: #ff4f81;
    --accent: #ffd166;
    --accent-soft: #4cc9f0;
    --success: #48d597;
    --border-soft: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --shadow-sm: 0 7px 18px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.34);
    --radius-sm: 13px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;
}

body {
    background:
        radial-gradient(circle at top right, rgba(255, 79, 129, 0.16), transparent 24%),
        radial-gradient(circle at top left, rgba(0, 184, 169, 0.16), transparent 28%),
        radial-gradient(circle at bottom center, rgba(255, 209, 102, 0.10), transparent 24%),
        linear-gradient(180deg, #101318 0%, #141d24 42%, #0f151b 100%);
    color: var(--text-main);
}

.site-header {
    background: rgba(16, 19, 24, 0.84);
}

.hero__shell {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 209, 102, 0.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255, 79, 129, 0.18), transparent 21%),
        radial-gradient(circle at 72% 74%, rgba(0, 184, 169, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(29, 36, 48, 0.97), rgba(16, 21, 27, 0.98));
}

.hero__shell::before { opacity: 0.24; }
.hero__shell::after { background: rgba(76, 201, 240, 0.16); }

.hero-art__card--main {
    background: linear-gradient(145deg, rgba(0,184,169,0.50), rgba(255,79,129,0.44) 56%, rgba(255,209,102,0.30));
}

.hero-art__card--sub {
    background: linear-gradient(145deg, rgba(255,209,102,0.28), rgba(76,201,240,0.16));
}

.hero-art__orb { background: rgba(255,79,129,0.20); }
.hero-art__orb--two { background: rgba(0,184,169,0.18); }

.eyebrow,
.hero-art__chip,
.quiz-panel__kicker,
.footer-link,
.hero__spotlight,
.hero__stat {
    background: rgba(255, 255, 255, 0.07);
}

.media-card__bg {
    background:
        linear-gradient(155deg, rgba(255,255,255,0.15), transparent 30%),
        linear-gradient(135deg, rgba(0,184,169,0.44), rgba(255,79,129,0.34), rgba(255,209,102,0.24));
}
.media-card__bg--two {
    background: linear-gradient(135deg, rgba(255,209,102,0.34), rgba(76,201,240,0.28), rgba(255,79,129,0.24));
}
.media-card__bg--three {
    background: linear-gradient(135deg, rgba(76,201,240,0.28), rgba(0,184,169,0.38), rgba(255,209,102,0.20));
}
.media-card__bg--four {
    background: linear-gradient(135deg, rgba(255,79,129,0.28), rgba(0,184,169,0.30), rgba(255,209,102,0.18));
}

.media-card::after {
    background: linear-gradient(to top, rgba(6, 10, 14, 0.88) 10%, rgba(6, 10, 14, 0.22) 45%, transparent 72%);
}

.badge--new { background: linear-gradient(135deg, var(--secondary), var(--primary)); }
.badge--viewed { background: rgba(14, 21, 28, 0.78); }
.badge--popular { background: linear-gradient(135deg, var(--accent), #ff9f1c); color: #1c1510; }

.ticker {
    background: linear-gradient(135deg, rgba(0,184,169,0.14), rgba(255,79,129,0.10), rgba(255,209,102,0.06));
}
.ticker__icon {
    background: linear-gradient(135deg, rgba(0,184,169,0.22), rgba(255,79,129,0.18));
}

.quiz-panel {
    background:
        radial-gradient(circle at top left, rgba(255,209,102,0.13), transparent 24%),
        radial-gradient(circle at bottom right, rgba(0,184,169,0.10), transparent 28%),
        linear-gradient(135deg, rgba(29,36,48,0.97), rgba(16,21,27,0.98));
}

.bottom-nav {
    background: rgba(22, 27, 34, 0.94);
}
.bottom-nav__item.is-active {
    background: linear-gradient(135deg, rgba(0,184,169,0.28), rgba(255,79,129,0.18));
}

/* =========================================================
   MIX MENU + MODAL OVERRIDES
   ========================================================= */

.portal-menu {
    background: rgba(20, 26, 34, 0.98);
    border-inline-end: 1px solid rgba(255,255,255,0.09);
    box-shadow: 20px 0 48px rgba(0, 0, 0, 0.32);
}

.portal-menu__link,
.language-option,
.portal-modal {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--text-soft);
    box-shadow: var(--shadow-sm);
}

.portal-menu__link:hover,
.portal-menu__link:focus-visible,
.language-option:hover,
.language-option:focus-visible {
    background: rgba(255,255,255,0.09);
    border-color: var(--border-strong);
}

.language-option.is-active {
    background: linear-gradient(135deg, rgba(0,184,169,0.20), rgba(255,79,129,0.14));
    color: var(--text-main);
}

.portal-modal {
    background:
        linear-gradient(135deg, rgba(29,36,48,0.98), rgba(16,21,27,0.99));
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.36);
}

.modal-backdrop {
    background: rgba(6, 10, 14, 0.50);
}

.menu-backdrop {
    background: rgba(6, 10, 14, 0.44);
}

.hero--mix .hero__overlay {
    background: radial-gradient(
        circle at center,
        rgba(0,0,0,0.18),
        rgba(0,0,0,0.62)
    );
}

.hero__title {
    color: var(--text-main);
}

.hero__desc {
    color: var(--text-soft);
}