/* Moki Predictor - Modern Styles */

:root {
    --primary: #6aa8a0;
    --primary-dark: #528983;
    --secondary: #8bb9c7;
    --success: #74b49b;
    --warning: #d2b48c;
    --danger: #c97b7b;
    --dark: #0f1720;
    --darker: #0b1219;
    --light: #edf3f1;
    --gray: #8fa3aa;
    --border: #2c3f45;
    --card-bg: #16222c;
    --hover: #20303a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(106, 168, 160, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(139, 185, 199, 0.08), transparent 24%),
        linear-gradient(180deg, #0b1219 0%, #101a24 100%);
    color: var(--light);
    line-height: 1.6;
    min-height: 100vh;
}

/* Navigation */
.navbar {
    background: rgba(11, 18, 25, 0.92);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0.68rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    font-size: 1.16rem;
    font-weight: 800;
    color: #d8ebe7;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-links {
    display: flex;
    gap: 1.3rem;
}

.wallet-session-pill {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wallet-session-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

.wallet-session-chip--wallet {
    border: 1px solid rgba(139,185,199,0.18);
    background: rgba(15,23,32,0.86);
    color: #dbe7f3;
}

.wallet-session-chip--access {
    border: 1px solid rgba(114,201,178,0.24);
    background: rgba(28,58,55,0.6);
    color: #c8f6e7;
}

.wallet-session-btn {
    min-height: 38px;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(139,185,199,0.18);
    background: rgba(22,34,44,0.92);
    color: #e6f1ef;
    font-weight: 700;
    cursor: pointer;
}

.nav-link {
    color: var(--gray);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    padding: 0.34rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.94rem;
}

.nav-link:hover,
.nav-link.active {
    color: var(--light);
    border-color: rgba(139, 185, 199, 0.22);
    background: rgba(106, 168, 160, 0.14);
}

/* Main Container */
.main-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 1rem;
}

.app-hero,
.app-panel {
    background: rgba(22, 34, 44, 0.92);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.app-hero {
    padding: 0.98rem 1.05rem;
    margin-bottom: 1.1rem;
}

.app-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.68rem;
    border-radius: 999px;
    font-size: 0.74rem;
    color: #d7ebe7;
    background: rgba(106,168,160,0.16);
    border: 1px solid rgba(139,185,199,0.18);
}

.app-hero h1 {
    margin: 0.58rem 0 0.28rem;
    font-size: clamp(1.42rem, 2.35vw, 1.95rem);
    font-weight: 800;
}

.app-hero p {
    color: var(--gray);
    max-width: 820px;
    font-size: 0.94rem;
}

.app-btn {
    border: 1px solid rgba(139,185,199,0.2);
    border-radius: 999px;
    padding: 0.66rem 0.92rem;
    background: rgba(15,23,32,0.86);
    color: #e6f1ef;
    font-weight: 700;
    cursor: pointer;
}

.app-btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
}

/* Dashboard Header */
.dashboard-header {
    margin-bottom: 1.25rem;
}

.dashboard-header h1 {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.subtitle {
    color: var(--gray);
    font-size: 0.92rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background: rgba(22, 34, 44, 0.92);
    border-radius: 12px;
    padding: 0.92rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid var(--border);
    transition: transform 0.2s, border-color 0.2s;
}

.stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 1.65rem;
}

.stat-content {
    flex: 1;
}

.stat-label {
    color: var(--gray);
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.38rem;
    font-weight: 700;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dashboard-panel {
    background: rgba(22, 34, 44, 0.92);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.dashboard-panel.full-width {
    grid-column: span 2;
}

.panel-header {
    padding: 0.82rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-header h2 {
    font-size: 0.98rem;
    font-weight: 600;
}

.panel-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.panel-link:hover {
    text-decoration: underline;
}

/* Moki List */
.moki-list {
    padding: 0.5rem 0;
}

.moki-item {
    display: flex;
    align-items: center;
    padding: 0.66rem 0.9rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

.moki-item:hover {
    background: var(--hover);
}

.moki-item:last-child {
    border-bottom: none;
}

.moki-rank {
    width: 40px;
    color: var(--gray);
    font-weight: 600;
    font-size: 0.92rem;
}

.moki-info {
    flex: 1;
}

.moki-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.94rem;
}

.moki-class {
    font-size: 0.78rem;
    color: var(--gray);
}

.moki-stats {
    text-align: right;
}

.win-rate {
    font-weight: 700;
    font-size: 0.98rem;
}

.win-rate.good {
    color: var(--success);
}

.win-rate.bad {
    color: var(--danger);
}

.moki-tier {
    font-size: 0.78rem;
    font-weight: 600;
}

/* Matches List */
.matches-list {
    padding: 0.5rem 0;
}

.match-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.match-item:last-child {
    border-bottom: none;
}

.match-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.match-date {
    color: var(--gray);
}

.match-winner {
    font-weight: 600;
}

.match-winner.blue {
    color: #3b82f6;
}

.match-winner.red {
    color: #ef4444;
}

.match-teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.team {
    flex: 1;
    font-size: 0.9rem;
}

.team.blue {
    color: #93c5fd;
}

.team.red {
    color: #fca5a5;
}

.vs {
    color: var(--gray);
    font-size: 0.8rem;
}

.player-name {
    display: inline-block;
}

.player-name:not(:last-child)::after {
    content: ', ';
}

.match-result {
    font-size: 0.85rem;
    color: var(--gray);
}

/* Class Distribution */
.class-distribution {
    padding: 0.95rem;
}

.class-bar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.82rem;
}

.class-bar-item:last-child {
    margin-bottom: 0;
}

.class-name {
    width: 100px;
    font-weight: 500;
    font-size: 0.86rem;
}

.class-bar-container {
    flex: 1;
    height: 24px;
    background: var(--darker);
    border-radius: 12px;
    overflow: hidden;
}

.class-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 12px;
    transition: width 0.3s;
}

.class-count {
    width: 50px;
    text-align: right;
    color: var(--gray);
    font-size: 0.82rem;
}

/* Loading State */
.loading {
    padding: 1.4rem;
    text-align: center;
    color: var(--gray);
}

.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 2px solid var(--gray);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.no-data {
    padding: 1.4rem;
    text-align: center;
    color: var(--gray);
}

/* Moki Detail Page */
.moki-header {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.35rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 2rem;
}

.moki-avatar {
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: white;
}

.moki-details h1 {
    font-size: 1.65rem;
    margin-bottom: 0.5rem;
}

.moki-class-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: var(--primary);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
}

/* Stats Detail Grid */
.stats-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-detail-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border);
    text-align: center;
}

.stat-detail-label {
    color: var(--gray);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.stat-detail-value {
    font-size: 1.45rem;
    font-weight: 700;
}

/* Predictor Page */
.predictor-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
}

.lineup-builder {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.scheme-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.scheme-btn {
    padding: 0.5rem 1rem;
    background: var(--darker);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--light);
    cursor: pointer;
    transition: all 0.2s;
}

.scheme-btn:hover {
    border-color: var(--primary);
}

.scheme-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

.lineup-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lineup-slot {
    background: var(--darker);
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 1rem;
    min-height: 100px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.lineup-slot:hover {
    border-color: var(--primary);
}

.lineup-slot.filled {
    border-style: solid;
    border-color: var(--success);
}

.slot-label {
    color: var(--gray);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.slot-content {
    font-weight: 600;
}

.moki-selector {
    max-height: 400px;
    overflow-y: auto;
}

.moki-select-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.moki-select-item:hover {
    background: var(--hover);
}

.moki-select-item.selected {
    background: var(--primary-dark);
}

.prediction-panel {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    position: sticky;
    top: 80px;
    height: fit-content;
}

.prediction-score {
    text-align: center;
    margin-bottom: 1.5rem;
}

.prediction-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
}

.prediction-label {
    color: var(--gray);
    font-size: 0.9rem;
}

.win-probability {
    text-align: center;
    margin-bottom: 1.5rem;
}

.probability-value {
    font-size: 2rem;
    font-weight: 700;
}

.synergy-score {
    margin-bottom: 1.5rem;
}

.synergy-bar {
    height: 8px;
    background: var(--darker);
    border-radius: 4px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.synergy-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--danger), var(--warning), var(--success));
    border-radius: 4px;
}

.recommendation-box {
    background: var(--darker);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel.full-width {
        grid-column: span 1;
    }

    .predictor-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .main-container {
        padding: 1rem;
    }

    .moki-header {
        flex-direction: column;
        text-align: center;
    }

    .stats-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Utility */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }

.bg-success { background: var(--success); }
.bg-warning { background: var(--warning); }
.bg-danger { background: var(--danger); }

.btn {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--card-bg);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--hover);
}

.btn-block {
    width: 100%;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.no-data {
    padding: 2rem;
    text-align: center;
    color: var(--gray);
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 1rem;
    color: var(--danger);
    margin: 1rem 0;
}

/* Make sure tables are visible */
.moki-table {
    color: var(--light);
}

.moki-table th {
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* Ensure modal content is visible */
.modal-content {
    color: var(--light);
}

/* Fix for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--darker);
}

/* Polish pass v4: cleaner scale, faster perceived rendering, calmer surfaces */
:root {
    --surface: rgba(17, 30, 39, 0.92);
    --surface-strong: rgba(21, 38, 49, 0.96);
    --surface-soft: rgba(106, 168, 160, 0.08);
    --accent-glow: rgba(106, 168, 160, 0.22);
    --shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.22);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 12% -10%, rgba(106, 168, 160, 0.16), transparent 30%),
        radial-gradient(circle at 88% 5%, rgba(61, 130, 155, 0.11), transparent 28%),
        linear-gradient(180deg, #081018 0%, #0d1822 48%, #0a131b 100%);
    letter-spacing: -0.01em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 72%);
}

.navbar {
    background: rgba(6, 14, 20, 0.86);
    border-bottom-color: rgba(139, 185, 199, 0.14);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.nav-container {
    min-height: 58px;
}

.nav-brand {
    letter-spacing: -0.035em;
}

.nav-link {
    position: relative;
    isolation: isolate;
}

.nav-link:hover,
.nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.main-container,
.container {
    width: min(100% - 32px, 1540px);
}

.app-hero,
.app-panel,
.dashboard-panel,
.stat-card,
.moki-card,
.prediction-panel,
.contest-card,
.lineup-card,
.pick-card,
.detail-panel,
.summary-card,
.spotlight-card,
.ready-lineup-card,
.scheme-recommendations,
.selected-scheme-info,
.builder-section,
.moki-selection-panel,
.lineup-builder,
.best-lineups-panel,
.auth-card,
.plan-card {
    background: linear-gradient(180deg, var(--surface-strong), var(--surface));
    border-color: rgba(139, 185, 199, 0.16);
    box-shadow: var(--shadow-soft);
}

.dashboard-panel,
.stat-card,
.contest-card,
.lineup-card,
.pick-card,
.summary-card,
.spotlight-card,
.ready-lineup-card,
.best-pick-card,
.compatible-chip,
.moki-select-item {
    content-visibility: auto;
    contain-intrinsic-size: 220px;
}

.app-hero {
    position: relative;
    overflow: hidden;
}

.app-hero::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106,168,160,0.18), transparent 68%);
    pointer-events: none;
}

.app-eyebrow,
.eyebrow,
.pill,
.access-pill,
.signal-pill {
    border-color: rgba(139, 185, 199, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn,
.app-btn,
.open-btn,
button,
.connect-button,
.plan-button {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover,
.app-btn:hover,
.open-btn:hover,
button:hover,
.connect-button:hover,
.plan-button:hover {
    transform: translateY(-1px);
}

.btn:active,
.app-btn:active,
.open-btn:active,
button:active,
.connect-button:active,
.plan-button:active {
    transform: translateY(0);
}

.btn:focus-visible,
.app-btn:focus-visible,
.open-btn:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(116, 180, 155, 0.9);
    outline-offset: 3px;
}

input,
select,
textarea {
    background-color: rgba(8, 16, 24, 0.72);
    border-color: rgba(139, 185, 199, 0.18);
}

.loading {
    display: grid;
    place-items: center;
    gap: 0.8rem;
    min-height: 160px;
    color: #a8bec4;
}

.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(139, 185, 199, 0.22);
    border-top-color: #72e0c1;
    border-radius: 999px;
    animation: spin 0.9s linear infinite;
}

.no-data,
.empty,
.error-message {
    border-radius: 16px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(8, 16, 24, 0.72);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(106,168,160,0.85), rgba(82,137,131,0.72));
    border: 2px solid rgba(8,16,24,0.9);
    border-radius: 999px;
}

@media (max-width: 1180px) {
    .main-container,
    .container {
        width: min(100% - 24px, 100%);
    }
}

@media (max-width: 768px) {
    .nav-container {
        align-items: stretch;
        min-height: auto;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .wallet-session-pill {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .wallet-session-chip,
    .wallet-session-btn {
        width: 100%;
    }

    .nav-link {
        font-size: 0.86rem;
        padding: 0.3rem 0.6rem;
    }

    .app-hero,
    .app-panel {
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Warm color pass v5: relaxed, colorful, easy on the eyes */
:root {
    --primary: #83c5be;
    --primary-dark: #5fa8a0;
    --secondary: #b8c8ee;
    --success: #95d5b2;
    --warning: #f2cc8f;
    --danger: #e9a6a6;
    --dark: #111927;
    --darker: #0b121d;
    --light: #f4f1de;
    --gray: #a8b8bd;
    --border: rgba(191, 214, 207, 0.18);
    --card-bg: #172436;
    --hover: rgba(131, 197, 190, 0.13);
    --surface: rgba(23, 35, 49, 0.9);
    --surface-strong: rgba(27, 42, 57, 0.96);
    --surface-soft: rgba(242, 204, 143, 0.09);
    --accent-glow: rgba(242, 204, 143, 0.2);
    --shadow-soft: 0 16px 42px rgba(18, 23, 34, 0.24);
    --warm-coral: #f4a7a0;
    --warm-honey: #f2cc8f;
    --warm-sage: #a7c957;
    --warm-mint: #83c5be;
    --warm-lavender: #c7b9ff;
    --warm-sky: #a8dadc;
}

body {
    background:
        radial-gradient(circle at 10% -8%, rgba(244, 167, 160, 0.22), transparent 30%),
        radial-gradient(circle at 82% 0%, rgba(242, 204, 143, 0.18), transparent 28%),
        radial-gradient(circle at 35% 32%, rgba(131, 197, 190, 0.13), transparent 34%),
        radial-gradient(circle at 92% 58%, rgba(199, 185, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #0b121d 0%, #111b29 50%, #0c1420 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(244, 241, 222, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 241, 222, 0.018) 1px, transparent 1px);
    opacity: 0.82;
}

.navbar {
    background:
        linear-gradient(90deg, rgba(11,18,29,0.9), rgba(19,31,44,0.86)),
        rgba(11,18,29,0.86);
    border-bottom-color: rgba(242, 204, 143, 0.14);
}

.nav-brand {
    color: #f6ead0;
    text-shadow: 0 0 24px rgba(242, 204, 143, 0.12);
}

.nav-link:hover,
.nav-link.active {
    color: #fff7e8;
    border-color: rgba(242, 204, 143, 0.2);
    background: linear-gradient(135deg, rgba(131,197,190,0.18), rgba(242,204,143,0.12));
}

.app-hero,
.app-panel,
.dashboard-panel,
.stat-card,
.moki-card,
.prediction-panel,
.contest-card,
.lineup-card,
.pick-card,
.detail-panel,
.summary-card,
.spotlight-card,
.ready-lineup-card,
.scheme-recommendations,
.selected-scheme-info,
.builder-section,
.moki-selection-panel,
.lineup-builder,
.best-lineups-panel,
.auth-card,
.plan-card {
    background:
        linear-gradient(145deg, rgba(31, 46, 62, 0.96), rgba(19, 31, 45, 0.91)),
        radial-gradient(circle at top left, rgba(242,204,143,0.08), transparent 34%);
    border-color: rgba(214, 231, 222, 0.15);
}

.app-hero::after {
    background:
        radial-gradient(circle at 35% 35%, rgba(242,204,143,0.28), transparent 42%),
        radial-gradient(circle at 62% 58%, rgba(244,167,160,0.18), transparent 60%);
}

.app-eyebrow,
.eyebrow {
    color: #fff1d2;
    background: linear-gradient(135deg, rgba(242,204,143,0.18), rgba(131,197,190,0.12));
    border-color: rgba(242, 204, 143, 0.22);
}

.pill,
.access-pill,
.signal-pill,
.data-freshness,
.scheme-badge {
    color: #eaf7f2;
    background: rgba(131, 197, 190, 0.13);
    border-color: rgba(131, 197, 190, 0.2);
}

.pill.blue,
.signal-pill.hot,
.signal-pill.good,
.access-pill,
.text-success {
    color: #b8f0d2;
}

.signal-pill.warn,
.text-warning {
    color: #ffe1a8;
}

.signal-pill.risk,
.text-danger {
    color: #ffc0bd;
}

.btn,
.app-btn.primary,
.open-btn,
.connect-button,
.plan-button,
.btn.primary {
    background: linear-gradient(135deg, #83c5be, #f2cc8f);
    color: #10202b;
    border-color: rgba(255, 238, 198, 0.22);
    box-shadow: 0 10px 26px rgba(131,197,190,0.12);
}

.btn:hover,
.app-btn.primary:hover,
.open-btn:hover,
.connect-button:hover,
.plan-button:hover,
.btn.primary:hover {
    background: linear-gradient(135deg, #9bd7cf, #f5d8a5);
    box-shadow: 0 14px 34px rgba(242,204,143,0.14);
}

.btn-secondary,
.app-btn:not(.primary) {
    background: rgba(18, 29, 43, 0.86);
    color: #f4f1de;
    border-color: rgba(168, 218, 220, 0.18);
}

input,
select,
textarea {
    color: #f4f1de;
    background-color: rgba(12, 20, 32, 0.72);
    border-color: rgba(199, 185, 255, 0.18);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(242, 204, 143, 0.46);
    box-shadow: 0 0 0 3px rgba(242, 204, 143, 0.08);
}

.stat-value,
.prediction-value,
.probability-value,
.lineup-points,
.value {
    color: #fff2cf;
}

.stat-card:nth-child(4n+1),
.contest-card:nth-child(4n+1),
.ready-lineup-card:nth-child(4n+1) {
    border-color: rgba(131, 197, 190, 0.22);
}

.stat-card:nth-child(4n+2),
.contest-card:nth-child(4n+2),
.ready-lineup-card:nth-child(4n+2) {
    border-color: rgba(242, 204, 143, 0.22);
}

.stat-card:nth-child(4n+3),
.contest-card:nth-child(4n+3),
.ready-lineup-card:nth-child(4n+3) {
    border-color: rgba(244, 167, 160, 0.2);
}

.stat-card:nth-child(4n+4),
.contest-card:nth-child(4n+4),
.ready-lineup-card:nth-child(4n+4) {
    border-color: rgba(199, 185, 255, 0.2);
}

.spinner {
    border-color: rgba(242, 204, 143, 0.24);
    border-top-color: #83c5be;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #83c5be, #f2cc8f);
}

/* Arena redesign v1: soft fantasy arena theme applied across the app */
body.theme-arena {
    --primary: #7b4fb3;
    --primary-dark: #4a2a6a;
    --secondary: #f29bb3;
    --success: #f2b84b;
    --warning: #ffd45a;
    --danger: #e88a7a;
    --dark: #4a2a6a;
    --darker: #351d4b;
    --light: #fff8f4;
    --gray: #886f88;
    --border: rgba(107, 58, 143, 0.16);
    --card-bg: rgba(255, 248, 243, 0.92);
    --hover: rgba(242, 155, 179, 0.14);
    --surface: rgba(255, 248, 243, 0.88);
    --surface-strong: rgba(255, 248, 243, 0.96);
    --surface-soft: rgba(247, 179, 138, 0.16);
    --accent-glow: rgba(255, 212, 90, 0.2);
    --shadow-soft: 0 22px 44px rgba(98, 59, 120, 0.16);
    color: #472952 !important;
    background:
        linear-gradient(180deg, rgba(255, 249, 245, 0.08), rgba(255, 246, 239, 0.14) 48%, rgba(255, 243, 236, 0.2) 100%),
        url("../img/arena-background-live.png") center top / cover fixed no-repeat !important;
    background-attachment: fixed !important;
}

body.theme-arena::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255, 248, 244, 0.1), rgba(255, 246, 239, 0.16) 42%, rgba(255, 244, 236, 0.24) 100%),
        radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.08), transparent 24%);
}

body.theme-arena .navbar,
body.theme-arena .main-container,
body.theme-arena .login-shell,
body.theme-arena .access-shell,
body.theme-arena .container {
    position: relative;
    z-index: 1;
}

body.theme-arena .navbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0.85rem 1rem 0 !important;
    backdrop-filter: none;
}

body.theme-arena .nav-container,
body.theme-arena .main-container {
    max-width: 1500px !important;
}

body.theme-arena .nav-container {
    background: rgba(255, 251, 247, 0.94) !important;
    border: 1px solid rgba(242, 155, 179, 0.36) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 30px rgba(98, 59, 120, 0.08) !important;
    padding: 0.78rem 1.05rem !important;
}

body.theme-arena .main-container {
    padding: 1.15rem !important;
}

body.theme-arena .nav-brand {
    color: #4a2a6a !important;
    text-shadow: none !important;
}

body.theme-arena .nav-link {
    color: #7f627f !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.theme-arena .nav-link:hover,
body.theme-arena .nav-link.active {
    color: #6b3a8f !important;
    background: linear-gradient(135deg, rgba(230, 196, 230, 0.54), rgba(255, 255, 255, 0.92)) !important;
    border-color: rgba(242, 155, 179, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

@media (max-width: 768px) {
    body.theme-arena .main-container {
        padding: 0.8rem !important;
    }

    body.theme-arena .nav-container {
        border-radius: 18px !important;
        padding: 0.75rem !important;
    }
}

body.theme-arena .app-hero,
body.theme-arena .hero {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(100deg, rgba(255, 251, 247, 0.94) 0%, rgba(255, 246, 239, 0.86) 42%, rgba(255, 246, 239, 0.18) 72%),
        url("../img/arena-page-background.png") center center / cover no-repeat !important;
    border: 1px solid rgba(242, 155, 179, 0.28) !important;
    box-shadow: 0 20px 44px rgba(98, 59, 120, 0.12) !important;
    min-height: 200px;
}

body.theme-arena .access-hero,
body.theme-arena .login-card {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255, 251, 247, 0.97), rgba(252, 239, 232, 0.94)) !important;
    border: 1px solid rgba(242, 155, 179, 0.24) !important;
    box-shadow: 0 18px 38px rgba(98, 59, 120, 0.1) !important;
}

body.theme-arena .app-hero::after,
body.theme-arena .hero::after {
    content: "";
    position: absolute;
    inset: auto -70px -120px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 212, 90, 0.24), transparent 68%);
    pointer-events: none;
}

body.theme-arena .access-hero::after,
body.theme-arena .login-card::after {
    display: none;
}

body.theme-arena .app-panel,
body.theme-arena .dashboard-panel,
body.theme-arena .stat-card,
body.theme-arena .panel,
body.theme-arena .result-card,
body.theme-arena .warning-card,
body.theme-arena .play-card,
body.theme-arena .stat-card-lab,
body.theme-arena .mini-stat,
body.theme-arena .contest-card,
body.theme-arena .lineup-card,
body.theme-arena .pick-card,
body.theme-arena .detail-panel,
body.theme-arena .summary-card,
body.theme-arena .section,
body.theme-arena .spotlight-card,
body.theme-arena .ready-lineup-card,
body.theme-arena .schemes-panel,
body.theme-arena .builder-panel,
body.theme-arena .predictions-panel,
body.theme-arena .scheme-recommendations,
body.theme-arena .selected-scheme,
body.theme-arena .compatible-chip,
body.theme-arena .plan-card,
body.theme-arena .wallet-box,
body.theme-arena .session-box,
body.theme-arena .status-banner,
body.theme-arena .current-pill,
body.theme-arena .upgrade-callout,
body.theme-arena .legal-box,
body.theme-arena .prediction-card,
body.theme-arena .modal-content,
body.theme-arena .champion-slot,
body.theme-arena .modal-champion,
body.theme-arena .moki-chip,
body.theme-arena .metric,
body.theme-arena .reason,
body.theme-arena .alt-card,
body.theme-arena .empty,
body.theme-arena .lineup-row,
body.theme-arena .why-item,
body.theme-arena .moki-item,
body.theme-arena .lineup span,
body.theme-arena .prediction-inline-shell {
    background: linear-gradient(180deg, rgba(255, 253, 251, 0.97), rgba(253, 243, 237, 0.96)) !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
    box-shadow: 0 12px 28px rgba(98, 59, 120, 0.08) !important;
    color: #472952 !important;
}

body.theme-arena .container {
    background: linear-gradient(180deg, rgba(255, 251, 247, 0.9), rgba(255, 243, 237, 0.86)) !important;
    border: 1px solid rgba(242, 155, 179, 0.2) !important;
    box-shadow: 0 18px 42px rgba(98, 59, 120, 0.1) !important;
}

body.theme-arena .app-eyebrow,
body.theme-arena .eyebrow,
body.theme-arena .pill,
body.theme-arena .signal-pill,
body.theme-arena .data-freshness,
body.theme-arena .scheme-badge,
body.theme-arena .scheme-chip,
body.theme-arena .plan-badge,
body.theme-arena .contest-kind,
body.theme-arena .featured-pill {
    color: #5c3478 !important;
    background: linear-gradient(135deg, rgba(230, 196, 230, 0.66), rgba(255, 248, 244, 0.92)) !important;
    border: 1px solid rgba(242, 155, 179, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

body.theme-arena .contest-kind,
body.theme-arena .pill.blue,
body.theme-arena .signal-pill.hot {
    background: linear-gradient(135deg, #7b4fb3, #8d56cc) !important;
    color: #fff7ff !important;
    border-color: transparent !important;
}

body.theme-arena .featured-pill,
body.theme-arena .signal-pill.warn {
    background: linear-gradient(135deg, #ffd45a, #f7b38a) !important;
    color: #8a4f18 !important;
    border-color: transparent !important;
}

body.theme-arena .pill.good,
body.theme-arena .signal-pill.good,
body.theme-arena .signal-pill.hot,
body.theme-arena .pill.blue,
body.theme-arena .contest-kind.fifty,
body.theme-arena .contest-kind.top20,
body.theme-arena .contest-kind.top10,
body.theme-arena .contest-kind.free,
body.theme-arena .contest-kind.wta {
    color: #6b3a8f !important;
}

body.theme-arena .signal-pill.warn,
body.theme-arena .pill.warn {
    color: #9d5b21 !important;
}

body.theme-arena .signal-pill.bad,
body.theme-arena .pill.bad,
body.theme-arena .pill.risk {
    color: #ac4b5d !important;
}

body.theme-arena h1,
body.theme-arena h2,
body.theme-arena h3,
body.theme-arena h4,
body.theme-arena .login-title,
body.theme-arena .selected-scheme-name,
body.theme-arena .contest-card h3,
body.theme-arena .play-title h3,
body.theme-arena .ready-scheme-name,
body.theme-arena .panel-head h2,
body.theme-arena .section-header h3 {
    color: #4a2a6a !important;
}

body.theme-arena p,
body.theme-arena .muted,
body.theme-arena .subtitle,
body.theme-arena .note,
body.theme-arena .login-copy,
body.theme-arena .tiny,
body.theme-arena .plan-copy,
body.theme-arena .plan-note,
body.theme-arena .plan-subtitle,
body.theme-arena .ticket-stat-label,
body.theme-arena .ticket-stat-note,
body.theme-arena .starts-label,
body.theme-arena .contest-copy,
body.theme-arena .selected-scheme-rule,
body.theme-arena .compatible-chip-meta,
body.theme-arena .compatible-chip-score,
body.theme-arena .moki-chip span,
body.theme-arena .label,
body.theme-arena .stat-label,
body.theme-arena .metric .label,
body.theme-arena .lineup-row-sub {
    color: #856d86 !important;
}

body.theme-arena .stat-value,
body.theme-arena .prediction-value,
body.theme-arena .probability-value,
body.theme-arena .lineup-points,
body.theme-arena .value,
body.theme-arena .ticket-stat-value,
body.theme-arena .ticket-stat-value.prize,
body.theme-arena .starts-time,
body.theme-arena .plan-price,
body.theme-arena .ready-lineup-score,
body.theme-arena .score-orb,
body.theme-arena .engine-value {
    color: #4a2a6a !important;
}

body.theme-arena .app-btn.primary,
body.theme-arena .open-btn,
body.theme-arena .connect-button,
body.theme-arena .plan-button,
body.theme-arena .btn.primary,
body.theme-arena .filter-btn.active,
body.theme-arena .refresh-btn,
body.theme-arena .feed-btn.primary,
body.theme-arena .use-ready-btn,
body.theme-arena .view-detail-btn,
body.theme-arena .predictor-mode-btn.active,
body.theme-arena .contest-side .open-btn {
    background: linear-gradient(135deg, #7b4fb3, #8d56cc) !important;
    color: #fff8ff !important;
    border: none !important;
    box-shadow: 0 14px 28px rgba(123, 79, 179, 0.18) !important;
}

body.theme-arena .action-btn {
    border-radius: 16px !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
    box-shadow: none !important;
}

body.theme-arena .predict-btn {
    background: linear-gradient(135deg, rgba(230, 196, 230, 0.92), rgba(238, 210, 244, 0.92)) !important;
    color: #6b3a8f !important;
}

body.theme-arena .suggest-btn {
    background: linear-gradient(135deg, rgba(255, 229, 172, 0.98), rgba(255, 212, 90, 0.76)) !important;
    color: #b25f1d !important;
}

body.theme-arena .clear-btn,
body.theme-arena .action-btn.secondary,
body.theme-arena .btn:not(.primary),
body.theme-arena .feed-btn:not(.primary),
body.theme-arena .predictor-mode-btn:not(.active) {
    background: linear-gradient(180deg, rgba(255, 251, 247, 0.98), rgba(255, 243, 237, 0.98)) !important;
    color: #d97a8b !important;
    border: 1px solid rgba(242, 155, 179, 0.24) !important;
}

body.theme-arena .contest-side .open-btn {
    background: linear-gradient(135deg, #f7b38a, #ffd45a) !important;
    color: #6b3a8f !important;
}

body.theme-arena .pick-add-btn {
    background: linear-gradient(135deg, #ffd45a, #f7b38a) !important;
    color: #6b3a8f !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
    box-shadow: 0 10px 18px rgba(242, 184, 75, 0.16) !important;
}

body.theme-arena .btn:hover,
body.theme-arena .app-btn.primary:hover,
body.theme-arena .open-btn:hover,
body.theme-arena .connect-button:hover,
body.theme-arena .plan-button:hover,
body.theme-arena .btn.primary:hover,
body.theme-arena .refresh-btn:hover,
body.theme-arena .action-btn:hover,
body.theme-arena .contest-side .open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(123, 79, 179, 0.22) !important;
}

body.theme-arena .btn-secondary,
body.theme-arena .app-btn:not(.primary),
body.theme-arena .filter-btn:not(.active),
body.theme-arena .compatible-search-clear {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #d97a8b !important;
    border: 1px solid rgba(242, 155, 179, 0.34) !important;
    box-shadow: none !important;
}

body.theme-arena input,
body.theme-arena select,
body.theme-arena textarea,
body.theme-arena .search-box,
body.theme-arena .scheme-select,
body.theme-arena .compatible-search-input,
body.theme-arena .modal-search {
    color: #49295b !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(242, 155, 179, 0.34) !important;
    border-radius: 16px !important;
}

body.theme-arena input::placeholder,
body.theme-arena textarea::placeholder,
body.theme-arena .search-box::placeholder,
body.theme-arena .compatible-search-input::placeholder,
body.theme-arena .modal-search::placeholder {
    color: rgba(91, 67, 108, 0.56) !important;
}

body.theme-arena input:focus,
body.theme-arena select:focus,
body.theme-arena textarea:focus,
body.theme-arena .search-box:focus,
body.theme-arena .scheme-select:focus,
body.theme-arena .compatible-search-input:focus,
body.theme-arena .modal-search:focus {
    border-color: rgba(123, 79, 179, 0.34) !important;
    box-shadow: 0 0 0 3px rgba(242, 155, 179, 0.16) !important;
}

body.theme-arena .contest-card {
    background: linear-gradient(180deg, rgba(255, 253, 251, 0.99), rgba(255, 248, 243, 0.98)) !important;
    border: 1px solid rgba(242, 155, 179, 0.26) !important;
    box-shadow: 0 10px 24px rgba(98, 59, 120, 0.06) !important;
}

body.theme-arena .contest-card:hover {
    background: linear-gradient(135deg, rgba(255, 252, 249, 0.98), rgba(250, 234, 222, 0.98)) !important;
    border-color: rgba(242, 155, 179, 0.34) !important;
    box-shadow: 0 16px 30px rgba(98, 59, 120, 0.1) !important;
}

body.theme-arena .contest-main::before {
    background: linear-gradient(180deg, #7b4fb3, #f29bb3, #ffd45a) !important;
}

body.theme-arena .contest-side {
    background: linear-gradient(180deg, rgba(255, 249, 244, 0.92), rgba(255, 245, 240, 0.92)) !important;
    border-left: 1px solid rgba(242, 155, 179, 0.2) !important;
}

body.theme-arena .progress-shell,
body.theme-arena .bar,
body.theme-arena .progress {
    background: rgba(230, 196, 230, 0.46) !important;
    border-color: rgba(242, 155, 179, 0.12) !important;
}

body.theme-arena .progress-fill,
body.theme-arena .bar > span {
    background: linear-gradient(90deg, #7b4fb3, #8d56cc) !important;
}

body.theme-arena .schemes-panel,
body.theme-arena .builder-panel,
body.theme-arena .predictions-panel,
body.theme-arena .scheme-recommendations,
body.theme-arena .selected-scheme,
body.theme-arena .prediction-card,
body.theme-arena .modal-content,
body.theme-arena .champion-slot,
body.theme-arena .compatible-chip,
body.theme-arena .ready-lineup-card {
    background: linear-gradient(180deg, rgba(255, 252, 249, 0.98), rgba(250, 238, 229, 0.98)) !important;
}

body.theme-arena .champion-slot {
    border-style: dashed !important;
}

body.theme-arena .champion-slot.filled,
body.theme-arena .compatible-chip:hover,
body.theme-arena .ready-lineup-card:hover {
    background: linear-gradient(180deg, rgba(255, 248, 243, 0.98), rgba(247, 230, 221, 0.98)) !important;
    border-color: rgba(123, 79, 179, 0.22) !important;
}

body.theme-arena .ready-lineup-score,
body.theme-arena .score-orb {
    background: linear-gradient(135deg, rgba(230, 196, 230, 0.62), rgba(255, 245, 240, 0.92)) !important;
    border: 1px solid rgba(242, 155, 179, 0.2) !important;
}

body.theme-arena .section-header,
body.theme-arena .panel-header,
body.theme-arena .panel-head {
    border-bottom-color: rgba(107, 58, 143, 0.1) !important;
}

body.theme-arena .modal {
    background: rgba(74, 42, 106, 0.24) !important;
    backdrop-filter: blur(10px);
}

body.theme-arena .modal-close {
    background: rgba(123, 79, 179, 0.12) !important;
    color: #4a2a6a !important;
}

body.theme-arena table,
body.theme-arena .table {
    color: #472952 !important;
}

body.theme-arena th,
body.theme-arena thead td {
    color: #6b3a8f !important;
    background: rgba(255, 212, 90, 0.12) !important;
}

body.theme-arena td,
body.theme-arena tr {
    border-color: rgba(107, 58, 143, 0.08) !important;
}

body.theme-arena .loading,
body.theme-arena .empty {
    color: #856d86 !important;
}

body.theme-arena .spinner {
    border-color: rgba(107, 58, 143, 0.18) !important;
    border-top-color: #f29bb3 !important;
}

body.theme-arena .app-hero,
body.theme-arena .hero {
    background:
        linear-gradient(100deg, rgba(255, 251, 247, 0.94) 0%, rgba(255, 246, 239, 0.86) 42%, rgba(255, 246, 239, 0.18) 72%),
        url("../img/arena-page-background.png") center center / cover no-repeat !important;
}

body.theme-arena .hero-analysis,
body.theme-arena .hero-contests {
    background:
        linear-gradient(100deg, rgba(255, 251, 247, 0.82) 0%, rgba(255, 246, 239, 0.52) 42%, rgba(255, 246, 239, 0.08) 78%),
        url("../img/arena-contest-banner-live.png") center center / cover no-repeat !important;
}

body.theme-arena .hero-analysis {
    background:
        linear-gradient(100deg, rgba(255, 251, 247, 0.8) 0%, rgba(255, 246, 239, 0.5) 42%, rgba(255, 246, 239, 0.06) 78%),
        url("../img/arena-analysis-banner-live.png") center center / cover no-repeat !important;
}

body.theme-arena ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7b4fb3, #f29bb3, #ffd45a);
}

/* Arena page-specific cleanup for Analysis + Predictor */
body.theme-arena .analysis-stack .filters,
body.theme-arena .analysis-stack .table-panel,
body.theme-arena .analysis-stack .modal-panel,
body.theme-arena .analysis-stack .mini-card,
body.theme-arena .analysis-stack .upcoming-card {
    background: linear-gradient(180deg, rgba(255, 253, 251, 0.98), rgba(253, 243, 237, 0.97)) !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
    box-shadow: 0 12px 28px rgba(98, 59, 120, 0.08) !important;
    color: #4a2a6a !important;
}

body.theme-arena .analysis-stack .filters {
    padding: 0.8rem !important;
}

body.theme-arena .analysis-stack .filters input,
body.theme-arena .analysis-stack .filters select {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #5d3c78 !important;
    border: 1px solid rgba(242, 155, 179, 0.32) !important;
}

body.theme-arena .analysis-stack .status-pill,
body.theme-arena .analysis-stack .btn:not(.primary),
body.theme-arena .analysis-stack .chip {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #5d3c78 !important;
    border: 1px solid rgba(242, 155, 179, 0.24) !important;
}

body.theme-arena .analysis-stack .progress-track {
    background: rgba(230, 196, 230, 0.42) !important;
}

body.theme-arena .analysis-stack .progress-fill {
    background: linear-gradient(90deg, #7b4fb3, #f29bb3, #ffd45a) !important;
}

body.theme-arena .analysis-stack .table-wrap {
    background: transparent !important;
}

body.theme-arena .analysis-stack table {
    background: transparent !important;
}

body.theme-arena .analysis-stack thead tr {
    background: linear-gradient(180deg, rgba(255, 212, 90, 0.2), rgba(247, 179, 138, 0.18)) !important;
}

body.theme-arena .analysis-stack th {
    color: #8f4fb0 !important;
}

body.theme-arena .analysis-stack td {
    color: #5a3e6f !important;
    border-bottom: 1px solid rgba(242, 155, 179, 0.12) !important;
}

body.theme-arena .analysis-stack tr.row:hover {
    background: rgba(230, 196, 230, 0.24) !important;
}

body.theme-arena .analysis-stack .name,
body.theme-arena .analysis-stack .value {
    color: #4a2a6a !important;
}

body.theme-arena .analysis-stack .subline,
body.theme-arena .analysis-stack .note,
body.theme-arena .analysis-stack .muted {
    color: #8a738d !important;
}

body.theme-arena .analysis-stack .pill.blue,
body.theme-arena .analysis-stack .pill.green,
body.theme-arena .analysis-stack .pill.amber,
body.theme-arena .analysis-stack .pill.gray,
body.theme-arena .analysis-stack .view-detail-btn {
    color: #fff7ff !important;
    border-color: transparent !important;
}

body.theme-arena .analysis-stack .pill.blue,
body.theme-arena .analysis-stack .view-detail-btn {
    background: linear-gradient(135deg, #7b4fb3, #8d56cc) !important;
}

body.theme-arena .analysis-stack .pill.green {
    background: linear-gradient(135deg, #c8efdc, #9fe0c4) !important;
    color: #3a6d4d !important;
}

body.theme-arena .analysis-stack .pill.amber {
    background: linear-gradient(135deg, #ffd45a, #f7b38a) !important;
    color: #91511c !important;
}

body.theme-arena .analysis-stack .pill.gray {
    background: linear-gradient(135deg, #e6c4e6, #f3d7ed) !important;
    color: #6b3a8f !important;
}

body.theme-arena .analysis-stack #detail-modal .modal-content,
body.theme-arena .analysis-stack #detail-modal .modal-panel,
body.theme-arena .analysis-stack #detail-modal .table-panel,
body.theme-arena .analysis-stack #detail-modal .mini-card,
body.theme-arena .analysis-stack #detail-modal .upcoming-card {
    background: linear-gradient(180deg, rgba(255, 253, 251, 0.99), rgba(252, 242, 236, 0.98)) !important;
    color: #4a2a6a !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
    box-shadow: 0 14px 30px rgba(98, 59, 120, 0.09) !important;
}

body.theme-arena .analysis-stack #detail-modal .modal-head,
body.theme-arena .analysis-stack #detail-modal .panel-head {
    background: rgba(255, 250, 246, 0.98) !important;
    color: #4a2a6a !important;
    border-bottom: 1px solid rgba(242, 155, 179, 0.16) !important;
}

body.theme-arena .analysis-stack #detail-modal .panel-head h3,
body.theme-arena .analysis-stack #detail-modal strong,
body.theme-arena .analysis-stack #detail-modal .mini-value {
    color: #6b3a8f !important;
}

body.theme-arena .analysis-stack #detail-modal .muted,
body.theme-arena .analysis-stack #detail-modal .label,
body.theme-arena .analysis-stack #detail-modal .note {
    color: #8a738d !important;
}

body.theme-arena .analysis-stack #detail-modal .close {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #6b3a8f !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
}

body.theme-arena .modal-head {
    background: rgba(255, 251, 247, 0.97) !important;
    border-bottom: 1px solid rgba(242, 155, 179, 0.16) !important;
}

body.theme-arena .close {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #6b3a8f !important;
    border: 1px solid rgba(242, 155, 179, 0.22) !important;
}

body.theme-arena .recommendation-column,
body.theme-arena .best-pick-card,
body.theme-arena .predictor-mode-note,
body.theme-arena .insight-card,
body.theme-arena .insight-item,
body.theme-arena .ready-moki-item,
body.theme-arena .prediction-stat-item,
body.theme-arena .why-item {
    background: linear-gradient(180deg, rgba(255, 253, 251, 0.98), rgba(252, 242, 236, 0.98)) !important;
    border: 1px solid rgba(242, 155, 179, 0.18) !important;
    color: #4a2a6a !important;
}

body.theme-arena .recommendation-column {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

body.theme-arena .best-pick-card:hover,
body.theme-arena .ready-moki-item:hover,
body.theme-arena .compatible-chip:hover {
    background: linear-gradient(180deg, rgba(255, 248, 244, 0.99), rgba(248, 233, 228, 0.99)) !important;
    border-color: rgba(242, 155, 179, 0.32) !important;
}

body.theme-arena .panel-title,
body.theme-arena .scheme-rec-title,
body.theme-arena .section-header h3,
body.theme-arena .insight-title,
body.theme-arena .best-pick-name,
body.theme-arena .ready-moki-name,
body.theme-arena .champion-name {
    color: #6b3a8f !important;
}

body.theme-arena .recommendation-summary,
body.theme-arena .scheme-rec-count,
body.theme-arena .best-pick-meta,
body.theme-arena .best-pick-score,
body.theme-arena .predictor-mode-note,
body.theme-arena .ready-moki-class,
body.theme-arena .champion-class,
body.theme-arena .champion-stats,
body.theme-arena .empty-slot,
body.theme-arena .slot-label,
body.theme-arena .insight-item .label,
body.theme-arena .insight-item .note,
body.theme-arena .prediction-stat-label,
body.theme-arena .why-item {
    color: #8a738d !important;
}

body.theme-arena .insight-item .value,
body.theme-arena .prediction-stat-value {
    color: #4a2a6a !important;
}

body.theme-arena .predictor-mode-note,
body.theme-arena .insight-card {
    box-shadow: none !important;
}

body.theme-arena .compatible-chip-name {
    color: #5e377b !important;
}

body.theme-arena .compatible-chip-score {
    color: #a6611f !important;
}

body.theme-arena .champion-slot {
    background: linear-gradient(180deg, rgba(255, 251, 247, 0.98), rgba(252, 242, 236, 0.98)) !important;
    border: 1px dashed rgba(242, 155, 179, 0.44) !important;
}

body.theme-arena .champion-slot.filled {
    border: 1px solid rgba(123, 79, 179, 0.28) !important;
}

body.theme-arena .remove-champ {
    background: linear-gradient(135deg, #f29bb3, #e88a7a) !important;
    color: #fff8ff !important;
    border: none !important;
}

body.theme-arena .analysis-stack #detail-modal,
body.theme-arena .analysis-stack #detail-modal .modal-panel,
body.theme-arena .analysis-stack #detail-modal .modal-head,
body.theme-arena .analysis-stack #detail-modal .panel-head,
body.theme-arena .analysis-stack #detail-modal .mini-card,
body.theme-arena .analysis-stack #detail-modal .upcoming-card {
    color: #fff7ff !important;
}

body.theme-arena .analysis-stack #detail-modal .modal-panel,
body.theme-arena .analysis-stack #detail-modal .modal-head,
body.theme-arena .analysis-stack #detail-modal .panel-head,
body.theme-arena .analysis-stack #detail-modal .mini-card,
body.theme-arena .analysis-stack #detail-modal .upcoming-card {
    background: linear-gradient(180deg, rgba(30, 21, 47, 0.98), rgba(48, 33, 70, 0.96)) !important;
    border: 1px solid rgba(255, 212, 90, 0.16) !important;
    box-shadow: 0 16px 34px rgba(45, 27, 67, 0.28) !important;
}

body.theme-arena .analysis-stack #detail-modal h2,
body.theme-arena .analysis-stack #detail-modal h3,
body.theme-arena .analysis-stack #detail-modal strong,
body.theme-arena .analysis-stack #detail-modal .mini-value {
    color: #fffdfd !important;
}

body.theme-arena .analysis-stack #detail-modal .muted,
body.theme-arena .analysis-stack #detail-modal .label,
body.theme-arena .analysis-stack #detail-modal .note,
body.theme-arena .analysis-stack #detail-modal .subline,
body.theme-arena .analysis-stack #detail-modal p,
body.theme-arena .analysis-stack #detail-modal div {
    color: rgba(255, 241, 249, 0.86) !important;
}

body.theme-arena .analysis-stack #detail-modal .label {
    color: rgba(255, 218, 233, 0.78) !important;
}

body.theme-arena .analysis-stack #detail-modal .pill.green {
    color: #17391f !important;
}

body.theme-arena .analysis-stack #detail-modal .pill.amber {
    color: #733f17 !important;
}