/* Cuissle duo: electric blue + vivid violet. Typography remains unchanged. */
:root {
  --app-bg: #f6f7ff;
  --surface: #ffffff;
  --ink: #202443;
  --muted: #505978;
  --line: rgba(67, 75, 138, .18);
  --blue: #075fc9;
  --blue-soft: #e8f0ff;
  --violet: #6533c8;
  --cyan: #075fc9;
  --orange: #6533c8;
  --gold: #6533c8;
  --pink: #6533c8;
  --duo: linear-gradient(110deg, #6330c5 4%, #075ecb 96%);
  --success: #176c47;
  --danger: #ba2946;
  --highlight: #6533c8;
  --shadow: 0 14px 34px rgba(49, 53, 123, .10);
  --cuissle-purple: #6533c8;
  --cuissle-blue: #075fc9;
}

:root[data-theme="dark"] {
  --app-bg: #191d3a;
  --surface: #272d50;
  --ink: #f8f9ff;
  --muted: #d4daf1;
  --line: rgba(210, 219, 255, .23);
  --blue: #9bc4ff;
  --blue-soft: rgba(95, 136, 255, .19);
  --violet: #c6a2ff;
  --cyan: #9bc4ff;
  --orange: #c6a2ff;
  --gold: #c6a2ff;
  --pink: #c6a2ff;
  --success: #8fdbb6;
  --danger: #ff9ba9;
  --highlight: #c6a2ff;
  --shadow: 0 14px 34px rgba(8, 10, 36, .24);
  --skeleton-base: #353b61;
  --skeleton-shine: #4b5382;
}

body.app-page, body.aurora-page, body.auth-page {
  background: radial-gradient(circle at 8% 3%, rgba(100, 51, 200, .11), transparent 28rem),
    radial-gradient(circle at 90% 7%, rgba(7, 95, 201, .12), transparent 29rem),
    var(--app-bg) !important;
}
:root[data-theme="dark"] body.app-page,
:root[data-theme="dark"] body.aurora-page,
:root[data-theme="dark"] body.auth-page {
  background: radial-gradient(circle at 8% 3%, rgba(120, 75, 224, .18), transparent 28rem),
    radial-gradient(circle at 90% 7%, rgba(33, 116, 236, .18), transparent 29rem),
    var(--app-bg) !important;
}

.app-header, .quiz-header, .site-nav { background: var(--surface) !important; }
.site-nav, .auth-card, .competition-hero, .form-card, .question-card,
.result-card, .ranking-card, .result-entry, .podium-card, .daily-intro,
.daily-teaser {
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.competition-hero, .form-card, .question-card, .result-card,
.ranking-card, .auth-card, .result-entry, .daily-intro, .daily-teaser,
.podium-card, .category-tabs button {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.competition-hero { border-top: 5px solid var(--violet) !important; }
.app-page .competition-hero:not(.is-loading) h1 {
  color: transparent !important;
  background: var(--duo) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}
.landing-title {
  color: transparent !important;
  background: var(--duo) !important;
  background-size: 200% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}
.landing-hero::before {
  background: radial-gradient(ellipse, rgba(100, 48, 197, .17), rgba(7, 94, 203, .10) 48%, transparent 73%) !important;
}
.play-disc {
  background: var(--duo) !important;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.45), 0 13px 27px rgba(73, 59, 179, .27) !important;
}
.play-disc::after { border-color: rgba(99, 48, 197, .34) !important; }
.button-primary, .app-header .profile-chip, .quiz-header .profile-chip {
  background: var(--duo) !important;
  border-color: #542cba !important;
  color: #fff !important;
}
.button-primary:hover:not(:disabled),
.app-header .profile-chip:hover, .quiz-header .profile-chip:hover,
.app-header .profile-chip[aria-expanded="true"],
.quiz-header .profile-chip[aria-expanded="true"] {
  background: linear-gradient(110deg, #5124ae, #074da9) !important;
  color: #fff !important;
}
.button-secondary, .button-quiet { background: var(--surface) !important; color: var(--ink) !important; }
.button-secondary:hover, .button-quiet:hover,
.form-card:hover, .ranking-row:hover { background: var(--blue-soft) !important; }
.profile-panel, :root[data-theme="dark"] .profile-panel {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.profile-identity-avatar { background: var(--duo) !important; }

.form-card[data-category="peliculas"] { border-top: 4px solid #6533c8 !important; }
.form-card[data-category="series"] { border-top: 4px solid #075fc9 !important; }
.form-card[data-category="anime"] { border-top: 4px solid #8861dc !important; }
.form-icon, .status-pill, .ranking-points { color: var(--blue) !important; }
.form-icon { background: var(--blue-soft) !important; }
.progress-track i, #daily-progress { background: var(--duo) !important; }
.answer, .category-tabs button { background: var(--surface) !important; color: var(--ink) !important; }
.answer:hover, .answer.selected,
.category-tabs button:hover, .category-tabs button.active {
  background: var(--blue-soft) !important;
  border-color: var(--blue) !important;
  color: var(--ink) !important;
}
.answer.selected .answer-letter { background: var(--blue) !important; color: #fff !important; }

.landing-benefits {
  background: var(--duo) !important;
  color: #fff !important;
}
.landing-benefits h2,
.landing-benefits .benefit-grid .benefit-card h3,
.landing-benefits .eyebrow { color: #fff !important; }
.landing-benefits .benefit-grid .benefit-card,
.landing-benefits .benefit-grid .benefit-card:hover {
  background: rgba(18, 16, 65, .21) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}
.landing-benefits .benefit-grid .benefit-card p { color: #f1f3ff !important; }
.landing-benefits .benefit-number { color: #e6dcff !important; }

.step-card[data-depth="0"],
:root[data-theme="dark"] .step-card[data-depth="0"] {
  background: var(--duo) !important;
  border-color: rgba(255, 255, 255, .4) !important;
  color: #fff !important;
}
.step-card[data-depth="1"], .step-card[data-depth="3"] { border-color: rgba(101, 51, 200, .46) !important; }
.step-card[data-depth="2"] { border-color: rgba(7, 95, 201, .46) !important; }
.showcase-card { border-color: rgba(101, 51, 200, .65) !important; }
.showcase-card, .poster-info { background: var(--duo) !important; }
.podium-first { border-top: 5px solid #6533c8 !important; }
.podium-second { border-top: 5px solid #075fc9 !important; }
.podium-third { border-top: 5px solid #8861dc !important; }
.podium-second .podium-avatar, .podium-third .podium-avatar { border-color: var(--violet) !important; }
.ranking-position.medal { color: var(--violet) !important; }

/* Green/red remain only for success and error meaning, not decorative accents. */
.status-pill.status-complete { color: var(--success) !important; }
.auth-error, .profile-signout { color: var(--danger) !important; }