@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
/* SuperCasinoPredict visual system
   Presentation-only layer. Endpoint strings, IDs, storage keys and inline logic stay in the HTML files. */
:root {
  --as-ink: #0d1117;
  --as-ink-2: #131a22;
  --as-ink-3: #1b2530;
  --as-paper: #f5f1e9;
  --as-paper-2: #ebe5da;
  --as-line: rgba(245, 241, 233, .12);
  --as-line-light: rgba(13, 17, 23, .14);
  --as-coral: #8b7cff;
  --as-coral-deep: #5b4ed2;
  --as-mint: #7de3ff;
  --as-amber: #f3c969;
  --as-muted: #98a4ae;
  --as-muted-dark: #5d6973;
  --as-display: "Archivo", "Arial Narrow", sans-serif;
  --as-body: "DM Sans", "Segoe UI", sans-serif;
  --as-mono: "Space Mono", Consolas, monospace;
  --as-ease: cubic-bezier(.22, 1, .36, 1);
}

html { background: var(--as-ink); }
body { font-family: var(--as-body); }

/* Public landing page */
body:has(.hero) {
  background: var(--as-ink) !important;
  color: var(--as-paper) !important;
}
body:has(.hero) .nav.scrolled {
  background: rgba(13, 17, 23, .9) !important;
  border-bottom-color: var(--as-line) !important;
}
body:has(.hero) .hero,
body:has(.hero) .how,
body:has(.hero) .perf,
body:has(.hero) .testi,
body:has(.hero) .fcta { background: var(--as-ink) !important; }
body:has(.hero) .why,
body:has(.hero) .recent,
body:has(.hero) .footer { background: var(--as-ink-2) !important; }
body:has(.hero) .hero__bg-orb1 { background: radial-gradient(circle, rgba(242, 107, 95, .12), transparent 68%) !important; }
body:has(.hero) .hero__bg-orb2 { background: radial-gradient(circle, rgba(123, 213, 178, .06), transparent 68%) !important; }
body:has(.hero) .hero__grid { background-image: linear-gradient(rgba(245,241,233,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(245,241,233,.028) 1px, transparent 1px) !important; }
body:has(.hero) .hero__h1,
body:has(.hero) .section-h,
body:has(.hero) .fcta__h { font-family: var(--as-display) !important; letter-spacing: -.035em !important; }
body:has(.hero) .hero__h1-line2,
body:has(.hero) .fcta__h span { background: none !important; -webkit-text-fill-color: var(--as-coral) !important; color: var(--as-coral) !important; filter: none !important; }
body:has(.hero) .nav__link,
body:has(.hero) .hero__sub,
body:has(.hero) .section-sub,
body:has(.hero) .trust-item span:last-child,
body:has(.hero) .footer-col__links a { color: var(--as-muted) !important; }
body:has(.hero) .hero__eyebrow,
body:has(.hero) .fcta__badge { color: var(--as-coral) !important; background: rgba(139,124,255,.1) !important; border-color: rgba(139,124,255,.28) !important; }
body:has(.hero) .hero__eyebrow-dot,
body:has(.hero) .eyebrow::before,
body:has(.hero) .btn-red-sm,
body:has(.hero) .btn-hero-primary,
body:has(.hero) .hpcard__cta { background: var(--as-coral) !important; }
body:has(.hero) .btn-red-sm:hover,
body:has(.hero) .btn-hero-primary:hover,
body:has(.hero) .hpcard__cta:hover { background: var(--as-coral-deep) !important; }
body:has(.hero) .btn-outline-sm,
body:has(.hero) .btn-hero-ghost { border-color: var(--as-line) !important; color: var(--as-paper) !important; }
body:has(.hero) .hero::before { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139,124,255,.12), transparent 70%) !important; }
body:has(.hero) .hpcard,
body:has(.hero) .why-card,
body:has(.hero) .perf-rate-card,
body:has(.hero) .perf-chart-card,
body:has(.hero) .recent-row,
body:has(.hero) .testi-card { background: var(--as-ink-3) !important; border-color: var(--as-line) !important; }
body:has(.hero) .hpcard__strip,
body:has(.hero) .hpcard__match,
body:has(.hero) .hpcard__metric,
body:has(.hero) .hpcard__prob { background-color: rgba(13,17,23,.52) !important; border-color: var(--as-line) !important; }
body:has(.hero) .hpcard__brand,
body:has(.hero) .hpcard__brand-icon,
body:has(.hero) .hpcard__metric-val--red,
body:has(.hero) .prc-rate,
body:has(.hero) .rr-result.rr-lost { color: var(--as-coral) !important; }
body:has(.hero) .hpcard__brand-icon { background: var(--as-coral) !important; }
body:has(.hero) .hpcard__live,
body:has(.hero) .stat-block__val b,
body:has(.hero) .rr-won,
body:has(.hero) .testi-card__stat { color: var(--as-mint) !important; }
body:has(.hero) .ticker { background: var(--as-coral-deep) !important; }
body:has(.hero) .how__track { background: var(--as-line) !important; }
body:has(.hero) .how-step { background: var(--as-ink-2) !important; }
body:has(.hero) .how-step__icon,
body:has(.hero) .why-card__icon-wrap { background: rgba(139,124,255,.11) !important; border-color: rgba(139,124,255,.27) !important; }
body:has(.hero) .how-step__icon .material-symbols-outlined,
body:has(.hero) .why-card__icon-wrap .material-symbols-outlined,
body:has(.hero) .eyebrow,
body:has(.hero) .trust-item .material-symbols-outlined { color: var(--as-coral) !important; }
body:has(.hero) .hero__stadium { background: linear-gradient(180deg, transparent, rgba(139,124,255,.035), rgba(13,17,23,.98)) !important; }
body:has(.hero) .footer__bottom { border-top-color: var(--as-line) !important; color: var(--as-muted) !important; }

/* Prediction console */
body:has(.layout) { background: var(--as-paper) !important; color: var(--as-ink) !important; }
body:has(.layout) .topnav { background: rgba(245,241,233,.92) !important; border-bottom-color: var(--as-line-light) !important; }
body:has(.layout) .logo,
body:has(.layout) .section-title,
body:has(.layout) .game-card__name { font-family: var(--as-display) !important; letter-spacing: -.025em !important; }
body:has(.layout) .logo__mark { background: var(--as-coral) !important; box-shadow: 0 5px 18px rgba(91,78,210,.25) !important; }
body:has(.layout) .logo__accent,
body:has(.layout) .section-title .material-symbols-outlined,
body:has(.layout) .sb-item.active,
body:has(.layout) .sb-hot { color: var(--as-coral) !important; }
body:has(.layout) .btn-solid { background: var(--as-coral) !important; box-shadow: 0 5px 18px rgba(91,78,210,.22) !important; }
body:has(.layout) .btn-solid:hover { background: var(--as-coral-deep) !important; }
body:has(.layout) .btn-outline { border-color: rgba(91,78,210,.4) !important; color: var(--as-coral-deep) !important; }
body:has(.layout) .sidebar { background: #eee8de !important; border-right-color: var(--as-line-light) !important; }
body:has(.layout) .sb-label { color: var(--as-muted-dark) !important; }
body:has(.layout) .sb-item { color: #6a756e !important; }
body:has(.layout) .sb-item:hover { background: rgba(13,17,23,.05) !important; color: var(--as-ink) !important; }
body:has(.layout) .sb-item.active { background: rgba(139,124,255,.12) !important; }
body:has(.layout) .sb-item.active::before { background: var(--as-coral) !important; }
body:has(.layout) .sb-profile,
body:has(.layout) .wticker,
body:has(.layout) .game-card { border-color: var(--as-line-light) !important; }
body:has(.layout) .sb-profile,
body:has(.layout) .wticker { background: rgba(255,255,255,.48) !important; }
body:has(.layout) .wticker__badge { background: rgba(13,17,23,.035) !important; color: var(--as-muted-dark) !important; border-right-color: var(--as-line-light) !important; }
body:has(.layout) .wticker__badge .material-symbols-outlined,
body:has(.layout) .wchip__amt { color: var(--as-coral-deep) !important; }
body:has(.layout) .game-card { border-radius: 10px !important; box-shadow: 0 12px 24px rgba(13,17,23,.12) !important; }
body:has(.layout) .game-card:hover { border-color: rgba(91,78,210,.6) !important; box-shadow: 0 24px 44px rgba(13,17,23,.18) !important; }
body:has(.layout) .gc-badge--hot,
body:has(.layout) .gc-live { background: var(--as-coral) !important; border-color: transparent !important; color: #fff !important; box-shadow: none !important; }
body:has(.layout) .gc-badge--new { background: var(--as-mint) !important; box-shadow: none !important; }
body:has(.layout) .gc-stat { background: rgba(13,17,23,.78) !important; }
body:has(.layout) .gc-stat__val { color: var(--as-coral) !important; }
body:has(.layout) .modal { background: rgba(13,17,23,.62) !important; }
body:has(.layout) .mbox { background: var(--as-paper) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; border-radius: 14px !important; }
body:has(.layout) .mbox__topbar { background: var(--as-coral) !important; }
body:has(.layout) .mbox-head,
body:has(.layout) .step-dots { border-bottom-color: var(--as-line-light) !important; }
body:has(.layout) .field label { color: var(--as-muted-dark) !important; }
body:has(.layout) .field input { background: rgba(13,17,23,.04) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; }
body:has(.layout) .field input:focus { border-color: var(--as-coral) !important; box-shadow: 0 0 0 3px rgba(139,124,255,.13) !important; }
body:has(.layout) .sbtn { background: var(--as-coral) !important; box-shadow: 0 5px 16px rgba(91,78,210,.22) !important; }
body:has(.layout) .sbtn:hover { background: var(--as-coral-deep) !important; }
body:has(.layout) .gbtn { color: var(--as-muted-dark) !important; border-color: var(--as-line-light) !important; }
body:has(.layout) .tcard { background: rgba(13,17,23,.035) !important; border-color: var(--as-line-light) !important; }
body:has(.layout) .tcard.sel,
body:has(.layout) .tcard:hover { background: rgba(139,124,255,.08) !important; border-color: var(--as-coral) !important; }
body:has(.layout) .tcard__price,
body:has(.layout) .pw-box__val { color: var(--as-coral-deep) !important; }
body:has(.layout) .pay-box { background: rgba(243,201,105,.14) !important; border-color: rgba(243,201,105,.45) !important; }
body:has(.layout) .pay-row strong { color: #9a6a24 !important; }
body:has(.layout) .pw-box { background: rgba(139,124,255,.08) !important; border-color: rgba(139,124,255,.3) !important; }

/* Scan and Mines experiences */
body:has(.page) { background: var(--as-paper) !important; color: var(--as-ink) !important; }
body:has(.page) .navbar { background: rgba(245,241,233,.94) !important; border-bottom-color: var(--as-line-light) !important; }
body:has(.page) .navbar__logo,
body:has(.page) .hero__title,
body:has(.page) .card h3 { font-family: var(--as-display) !important; letter-spacing: -.025em !important; }
body:has(.page) .navbar__logo-accent,
body:has(.page) .hero__icon,
body:has(.page) .hero__title { color: var(--as-coral-deep) !important; }
body:has(.page) .hero { background: linear-gradient(135deg, #eee8de, var(--as-paper)) !important; border-bottom-color: var(--as-line-light) !important; }
body:has(.page) .card { background: rgba(255,255,255,.58) !important; border-color: var(--as-line-light) !important; border-radius: 14px !important; box-shadow: 0 16px 36px rgba(13,17,23,.07) !important; }
body:has(.page) .auth-form__input { color: var(--as-ink) !important; background: rgba(13,17,23,.04) !important; border-color: var(--as-line-light) !important; }
body:has(.page) .auth-form__input:focus { border-color: var(--as-coral) !important; box-shadow: 0 0 0 3px rgba(139,124,255,.12) !important; }
body:has(.page) .auth-form__btn { background: var(--as-coral) !important; box-shadow: 0 6px 16px rgba(91,78,210,.2) !important; }
body:has(.page) .auth-form__btn:hover { background: var(--as-coral-deep) !important; }
body:has(.page) .auth-form__btn--ghost { color: var(--as-muted-dark) !important; background: transparent !important; border-color: var(--as-line-light) !important; box-shadow: none !important; }
body:has(.page) .scan-tier-card,
body:has(.page) .network-card { background: rgba(13,17,23,.035) !important; border-color: var(--as-line-light) !important; }
body:has(.page) .scan-tier-card.selected,
body:has(.page) .scan-tier-card:hover,
body:has(.page) .network-card.selected,
body:has(.page) .network-card:hover { border-color: var(--as-coral) !important; background: rgba(139,124,255,.08) !important; }
body:has(.page) .scan-tier-card__price,
body:has(.page) .pay-box__row strong,
body:has(.page) .pick-card__confidence { color: var(--as-coral-deep) !important; }
body:has(.page) .step-dot.active { background: var(--as-coral) !important; }
body:has(.page) .step-line.active { background: rgba(139,124,255,.6) !important; }
body:has(.page) .status-banner--approved { background: rgba(125,227,255,.17) !important; color: #277c5b !important; border-color: rgba(125,227,255,.5) !important; }

body:has(.vm-shell) { background: var(--as-ink) !important; color: var(--as-paper) !important; }
body:has(.vm-shell) .vm-shell { min-height: 100dvh !important; background: radial-gradient(circle at 18% 12%, rgba(139,124,255,.09), transparent 30%), var(--as-ink) !important; }
body:has(.vm-shell) .vm-card { background: linear-gradient(145deg, var(--as-ink-2), #0a0f14) !important; border-color: var(--as-line) !important; border-radius: 18px !important; box-shadow: 0 28px 70px rgba(0,0,0,.38) !important; }
body:has(.vm-shell) .vm-topglow { background: linear-gradient(90deg, transparent, var(--as-coral), transparent) !important; }
body:has(.vm-shell) .vm-title,
body:has(.vm-shell) .vm-header-left .material-symbols-outlined { color: var(--as-coral) !important; }
body:has(.vm-shell) .vm-grid-outer,
body:has(.vm-shell) .vm-message-row,
body:has(.vm-shell) .vm-controls { border-color: var(--as-line) !important; }
body:has(.vm-shell) .vm-grid { background: rgba(13,17,23,.72) !important; }
body:has(.vm-shell) .vm-tile { background: var(--as-ink-3) !important; border-color: var(--as-line) !important; }
body:has(.vm-shell) .vm-tile:hover { border-color: rgba(139,124,255,.5) !important; }
body:has(.vm-shell) .vm-tile.diamond { background: rgba(125,227,255,.12) !important; border-color: rgba(125,227,255,.48) !important; }
body:has(.vm-shell) .vm-tile.bomb { background: rgba(139,124,255,.12) !important; border-color: rgba(139,124,255,.5) !important; }
body:has(.vm-shell) .vm-diamond-icon,
body:has(.vm-shell) .vm-profit-text { color: var(--as-mint) !important; }
body:has(.vm-shell) .vm-pill { background: rgba(245,241,233,.05) !important; border-color: var(--as-line) !important; }
body:has(.vm-shell) .vm-pill-mult .material-symbols-outlined,
body:has(.vm-shell) .vm-pill-next .material-symbols-outlined { color: var(--as-coral) !important; }
body:has(.vm-shell) .vm-btn-primary,
body:has(.vm-shell) .vm-predictor-btn,
body:has(.vm-shell) .auth-form__btn { background: var(--as-coral) !important; }
body:has(.vm-shell) .vm-btn-primary:hover,
body:has(.vm-shell) .vm-predictor-btn:hover,
body:has(.vm-shell) .auth-form__btn:hover { background: var(--as-coral-deep) !important; }
body:has(.vm-shell) .vm-slider::-webkit-slider-thumb { background: var(--as-coral) !important; }
body:has(.vm-shell) .auth-overlay { background: rgba(13,17,23,.78) !important; }
body:has(.vm-shell) .auth-card { background: var(--as-paper) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; border-radius: 16px !important; }
body:has(.vm-shell) .auth-card__icon { color: var(--as-coral-deep) !important; }
body:has(.vm-shell) .auth-form__label { color: var(--as-muted-dark) !important; }
body:has(.vm-shell) .auth-form__input { background: rgba(13,17,23,.04) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; }
body:has(.vm-shell) .auth-form__input:focus { border-color: var(--as-coral) !important; }
body:has(.vm-shell) .auth-back-link { color: var(--as-coral-deep) !important; }

/* Shared admin and super-admin console */
body:has(.app-layout) { background: var(--as-paper) !important; color: var(--as-ink) !important; }
body:has(.app-layout) .app-layout { background: var(--as-paper) !important; }
body:has(.app-layout) .sidebar { background: #eee8de !important; border-right-color: var(--as-line-light) !important; }
body:has(.app-layout) .sidebar-brand,
body:has(.app-layout) .page-title,
body:has(.app-layout) .section-title,
body:has(.app-layout) .login-title { font-family: var(--as-display) !important; letter-spacing: -.025em !important; }
body:has(.app-layout) .sidebar-brand .brand-accent,
body:has(.app-layout) .sidebar-brand .logo-accent,
body:has(.app-layout) .sidebar-brand span:last-child { color: var(--as-coral-deep) !important; }
body:has(.app-layout) .sidebar-nav a,
body:has(.app-layout) .sidebar-nav button { color: #68736e !important; }
body:has(.app-layout) .sidebar-nav a:hover,
body:has(.app-layout) .sidebar-nav a.active { color: var(--as-coral-deep) !important; background: rgba(139,124,255,.1) !important; }
body:has(.app-layout) .main-content { background: var(--as-paper) !important; }
body:has(.app-layout) .page-header { border-bottom-color: var(--as-line-light) !important; }
body:has(.app-layout) .card,
body:has(.app-layout) .table-container,
body:has(.app-layout) .table-wrapper,
body:has(.app-layout) .filters-bar,
body:has(.app-layout) .stat-card,
body:has(.app-layout) .action-card,
body:has(.app-layout) .referral-card,
body:has(.app-layout) .chart-card { background: rgba(255,255,255,.58) !important; border-color: var(--as-line-light) !important; border-radius: 14px !important; box-shadow: 0 14px 32px rgba(13,17,23,.06) !important; }
body:has(.app-layout) .btn-primary,
body:has(.app-layout) .btn-create,
body:has(.app-layout) .btn-approve,
body:has(.app-layout) .btn-solid { background: var(--as-coral) !important; border-color: var(--as-coral) !important; }
body:has(.app-layout) .btn-primary:hover,
body:has(.app-layout) .btn-create:hover,
body:has(.app-layout) .btn-approve:hover { background: var(--as-coral-deep) !important; }
body:has(.app-layout) .btn-outline,
body:has(.app-layout) .btn-secondary { border-color: var(--as-line-light) !important; color: var(--as-ink) !important; background: transparent !important; }
body:has(.app-layout) input,
body:has(.app-layout) select,
body:has(.app-layout) textarea,
body:has(.app-layout) .form-input,
body:has(.app-layout) .form-select,
body:has(.app-layout) .filter-input { background: rgba(13,17,23,.035) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; }
body:has(.app-layout) input:focus,
body:has(.app-layout) select:focus,
body:has(.app-layout) textarea:focus { border-color: var(--as-coral) !important; box-shadow: 0 0 0 3px rgba(139,124,255,.11) !important; }
body:has(.app-layout) table thead,
body:has(.app-layout) .table-head { background: rgba(13,17,23,.05) !important; }
body:has(.app-layout) table th { color: var(--as-muted-dark) !important; }
body:has(.app-layout) table td { border-top-color: var(--as-line-light) !important; }
body:has(.app-layout) .badge,
body:has(.app-layout) .status-badge { border-radius: 999px !important; }
body:has(.app-layout) .login-container { background: radial-gradient(circle at 12% 20%, rgba(139,124,255,.14), transparent 28%), var(--as-ink) !important; }
body:has(.app-layout) .login-card { background: var(--as-paper) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; border-radius: 16px !important; box-shadow: 0 28px 70px rgba(0,0,0,.24) !important; }
body:has(.app-layout) .login-logo,
body:has(.app-layout) .login-card .material-symbols-outlined { color: var(--as-coral-deep) !important; }
body:has(.app-layout) .login-card input { background: rgba(13,17,23,.04) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; }
body:has(.app-layout) .login-card button,
body:has(.app-layout) .login-card .btn-primary { background: var(--as-coral) !important; }

/* Global interaction and accessibility polish */
button, a, .game-card, .sb-item, .tcard, .scan-tier-card, .network-card { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--as-coral) !important; outline-offset: 3px !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 768px) {
  body:has(.hero) .hero__inner { padding-left: 20px !important; padding-right: 20px !important; }
  body:has(.app-layout) .main-content { padding: 76px 18px 28px !important; }
}

/* Auth-only admin screens do not include .app-layout, so style them explicitly. */
body:has(.login-container) { background: var(--as-ink) !important; color: var(--as-paper) !important; }
body:has(.login-container) .login-container { background: radial-gradient(circle at 12% 20%, rgba(139,124,255,.14), transparent 28%), var(--as-ink) !important; }
body:has(.login-container) .login-card { background: var(--as-paper) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; border-radius: 16px !important; box-shadow: 0 28px 70px rgba(0,0,0,.24) !important; }
body:has(.login-container) .login-logo,
body:has(.login-container) .login-card .material-symbols-outlined { color: var(--as-coral-deep) !important; }
body:has(.login-container) .login-card input,
body:has(.login-container) .login-card .form-input { background: rgba(13,17,23,.04) !important; color: var(--as-ink) !important; border-color: var(--as-line-light) !important; }
body:has(.login-container) .login-card input:focus { border-color: var(--as-coral) !important; box-shadow: 0 0 0 3px rgba(139,124,255,.11) !important; }
body:has(.login-container) .login-card button,
body:has(.login-container) .login-card .btn-primary { background: var(--as-coral) !important; border-color: var(--as-coral) !important; }
body:has(.login-container) .login-card button:hover,
body:has(.login-container) .login-card .btn-primary:hover { background: var(--as-coral-deep) !important; }

/* Generated SuperCasinoPredict asset integration */
body:has(.layout) .logo__mark img,
body:has(.page) .logo__mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(139,124,255,.22)); }
body:has(.hero) .hero__team-logo img,
body:has(.hero) .rr-logo img { width: 100%; height: 100%; object-fit: contain; }
body:has(.app-layout) .as-brand-mark,
body:has(.login-container) .as-brand-mark { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(139,124,255,.2)); }
body:has(.login-container) .login-logo .as-brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
body:has(.app-layout) .sidebar-brand .as-brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
.hub-mark img { width: 100%; height: 100%; object-fit: contain; }

/* SuperCasinoPredict visual direction: original monochrome treatment with a restrained lime confidence accent. */
:root {
  --as-ink: #050505;
  --as-ink-2: #0c0c0c;
  --as-ink-3: #151515;
  --as-paper: #f5f5f2;
  --as-paper-2: #e5e5df;
  --as-line: rgba(255,255,255,.13);
  --as-line-light: rgba(0,0,0,.15);
  --as-coral: #c9ff3f;
  --as-coral-deep: #8db41b;
  --as-mint: #d8ff7a;
  --as-amber: #f5f5f2;
  --as-muted: #8d8d8d;
  --as-muted-dark: #636363;
}

/* Public hero rearrangement: prediction card leads on desktop, content follows. */
body:has(.hero) .hero__inner { grid-template-areas: "card copy"; grid-template-columns: minmax(320px,.82fr) minmax(0,1.18fr); gap: 56px; }
body:has(.hero) .hero__left { grid-area: copy; }
body:has(.hero) .hero { grid-area: card; }
body:has(.hero) .hero__h1-line2 { color: var(--as-coral) !important; -webkit-text-fill-color: var(--as-coral) !important; background: none !important; filter: none !important; }
body:has(.hero) .btn-hero-primary { background: var(--as-paper) !important; color: var(--as-ink) !important; box-shadow: 0 10px 30px rgba(255,255,255,.12) !important; }
body:has(.hero) .btn-hero-ghost { color: var(--as-paper) !important; border-color: var(--as-line) !important; }
body:has(.hero) .hero__ctas { flex-direction: row-reverse; justify-content: flex-end; }
body:has(.hero) .hero__eyebrow { color: var(--as-coral) !important; border-color: rgba(201,255,63,.42) !important; background: rgba(201,255,63,.08) !important; }
body:has(.hero) .hero__eyebrow-dot { background: var(--as-coral) !important; }
body:has(.hero) .hpcard,
body:has(.hero) .hpcard__match,
body:has(.hero) .hpcard__metric,
body:has(.hero) .hpcard__prob { border-radius: 10px !important; }
body:has(.hero) .hpcard__brand,
body:has(.hero) .hpcard__brand-icon,
body:has(.hero) .hpcard__metric-val--red { color: var(--as-coral) !important; }
body:has(.hero) .hpcard__brand-icon { background: var(--as-coral) !important; color: var(--as-ink) !important; }

/* Prediction console rearrangement: active game cards lead, winner ticker becomes a footer rail. */
body:has(.layout) .main { display: flex !important; flex-direction: column !important; }
body:has(.layout) .main .games-section { order: 1; }
body:has(.layout) .main .wticker { order: 2; margin-top: 24px; }
body:has(.layout) .games-grid { grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr) !important; gap: 16px !important; }
body:has(.layout) .game-card { border-radius: 12px !important; border-color: rgba(0,0,0,.2) !important; }
body:has(.layout) .game-card:first-child { min-height: 340px; }
body:has(.layout) .game-card:nth-child(2) { min-height: 340px; }
body:has(.layout) .topnav,
body:has(.layout) .sidebar { background: #050505 !important; color: var(--as-paper) !important; border-color: rgba(255,255,255,.12) !important; }
body:has(.layout) .topnav .logo,
body:has(.layout) .topnav .logo__w,
body:has(.layout) .topnav .logo__accent { color: var(--as-paper) !important; }
body:has(.layout) .topnav .logo__accent { color: var(--as-coral) !important; }
body:has(.layout) .sidebar .sb-label,
body:has(.layout) .sidebar .sb-item,
body:has(.layout) .sidebar .sb-profile { color: #a8a8a8 !important; }
body:has(.layout) .sidebar .sb-item.active { color: var(--as-coral) !important; background: rgba(201,255,63,.12) !important; }
body:has(.layout) .section-title,
body:has(.layout) .section-title .material-symbols-outlined { color: var(--as-ink) !important; }
body:has(.layout) .btn-solid,
body:has(.layout) .sbtn { background: var(--as-ink) !important; color: var(--as-paper) !important; }
body:has(.layout) .btn-outline { color: var(--as-ink) !important; border-color: rgba(0,0,0,.35) !important; }
body:has(.layout) .gc-badge--new,
body:has(.layout) .gc-badge--hot,
body:has(.layout) .gc-live { background: var(--as-coral) !important; color: var(--as-ink) !important; }

/* Scan, Mines, admin, and preview surfaces inherit the same high-contrast tokens. */
body:has(.page) .navbar,
body:has(.page) .hero,
body:has(.page) .card,
body:has(.app-layout) .sidebar,
body:has(.app-layout) .topbar,
body:has(.login-container) .login-card,
body:has(.vm-shell) .vm-card,
body:has(.hub-shell) .hub-card { border-radius: 10px !important; }
body:has(.page) .auth-form__btn,
body:has(.page) .step-dot.active,
body:has(.app-layout) button,
body:has(.login-container) .login-card button,
body:has(.vm-shell) .vm-btn-primary,
body:has(.vm-shell) .vm-predictor-btn { background: var(--as-ink) !important; color: var(--as-paper) !important; }
body:has(.page) .hero__title,
body:has(.page) .hero__icon,
body:has(.page) .navbar__logo-accent,
body:has(.app-layout) .logo__accent,
body:has(.login-container) .login-logo,
body:has(.vm-shell) .vm-title { color: var(--as-coral) !important; }
body:has(.hub-shell) .hub-mark { background: var(--as-paper) !important; }

@media (max-width: 900px) {
  body:has(.hero) .hero__inner { grid-template-areas: "copy"; grid-template-columns: 1fr; }
  body:has(.hero) .hero { display: none; }
  body:has(.layout) .games-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SuperCasinoPredict refinement layer — controlled UI enhancement
   Presentation-only: routes, IDs, API contracts, and inline business logic stay intact.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --vw-focus: #7de3ff;
  --vw-shadow-soft: 0 16px 40px rgba(13, 17, 23, .10);
  --vw-shadow-lift: 0 22px 48px rgba(13, 17, 23, .16);
  --vw-radius-card: 16px;
  --vw-duration: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--vw-focus) !important;
  outline-offset: 3px;
}

::selection { background: rgba(139, 124, 255, .28); color: inherit; }

body { text-rendering: optimizeLegibility; }

/* Keep motion useful and respectful of system preferences. */
@media (prefers-reduced-motion: no-preference) {
  body:has(.hero) .hero__h1,
  body:has(.hero) .hero__sub,
  body:has(.hero) .hero__actions,
  body:has(.page) .hero__title,
  body:has(.page) .hero__subtitle,
  body:has(.layout) .main > * {
    animation: vw-rise-in 600ms var(--as-ease) both;
  }
  body:has(.hero) .hero__sub { animation-delay: 80ms; }
  body:has(.hero) .hero__actions { animation-delay: 150ms; }
  body:has(.layout) .main > *:nth-child(2) { animation-delay: 60ms; }
  body:has(.layout) .main > *:nth-child(3) { animation-delay: 120ms; }
  @keyframes vw-rise-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Landing page: stronger hierarchy and calm depth. */
body:has(.hero) .hero__inner,
body:has(.hero) .section-inner,
body:has(.hero) .fcta__inner { position: relative; z-index: 1; }
body:has(.hero) .hero__h1 { max-width: 780px; line-height: .98; }
body:has(.hero) .hero__sub { max-width: 600px; line-height: 1.72; }
body:has(.hero) .hero__actions { gap: 12px; }
body:has(.hero) .hpcard,
body:has(.hero) .why-card,
body:has(.hero) .perf-rate-card,
body:has(.hero) .perf-chart-card,
body:has(.hero) .recent-row,
body:has(.hero) .testi-card {
  transition: transform var(--vw-duration) var(--as-ease), box-shadow var(--vw-duration) var(--as-ease), border-color var(--vw-duration) ease;
}
body:has(.hero) .why-card:hover,
body:has(.hero) .testi-card:hover { transform: translateY(-5px); box-shadow: var(--vw-shadow-lift); }
body:has(.hero) .hpcard:hover { transform: translateY(-7px) rotate(-.3deg); box-shadow: var(--vw-shadow-lift); }
body:has(.hero) .btn-hero-primary,
body:has(.hero) .btn-red-sm,
body:has(.hero) .hpcard__cta { min-height: 44px; }

/* Console: clearer surfaces, denser scanability, and better touch targets. */
body:has(.layout) .main { max-width: 1600px; }
body:has(.layout) .game-grid { gap: 18px; }
body:has(.layout) .game-card { transition: transform var(--vw-duration) var(--as-ease), box-shadow var(--vw-duration) var(--as-ease), border-color var(--vw-duration) ease; }
body:has(.layout) .game-card:hover { transform: translateY(-4px); }
body:has(.layout) .sb-item,
body:has(.layout) .btn-solid,
body:has(.layout) .btn-outline,
body:has(.layout) .sbtn,
body:has(.layout) .gbtn { min-height: 42px; }
body:has(.layout) .sb-item { border-radius: 10px; }
body:has(.layout) .section-head { gap: 16px; }
body:has(.layout) .wire,
body:has(.layout) .wticker { box-shadow: 0 8px 22px rgba(13, 17, 23, .06); }
body:has(.layout) .modal { backdrop-filter: blur(6px); }

/* Scan and auth pages: turn repeated panels into a consistent workflow. */
body:has(.page) .page { max-width: 980px; }
body:has(.page) .hero { position: relative; overflow: hidden; }
body:has(.page) .hero::after {
  content: ''; position: absolute; width: 320px; height: 320px; right: -90px; top: -140px;
  border-radius: 50%; background: rgba(139, 124, 255, .10); filter: blur(4px); pointer-events: none;
}
body:has(.page) .card { transition: transform var(--vw-duration) var(--as-ease), box-shadow var(--vw-duration) var(--as-ease), border-color var(--vw-duration) ease; }
body:has(.page) .card:hover { transform: translateY(-2px); box-shadow: var(--vw-shadow-lift) !important; }
body:has(.page) .auth-form__input,
body:has(.page) input,
body:has(.page) select,
body:has(.page) textarea { min-height: 44px; border-radius: 10px; }
body:has(.page) .auth-form__btn { min-height: 46px; }

/* Prevent horizontal overflow in data-heavy admin tables on small screens. */
body:has(.layout) table { min-width: 640px; }
body:has(.layout) .table-wrap,
body:has(.layout) .table-container,
body:has(.layout) .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
  body:has(.layout) .main { padding: 18px 16px 40px; }
  body:has(.layout) .sidebar { width: 264px; }
  body:has(.hero) .hero__h1 { font-size: clamp(2.8rem, 11vw, 5rem); }
  body:has(.page) .page { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 560px) {
  body:has(.layout) .main { padding: 14px 12px 32px; }
  body:has(.layout) .section-head { align-items: flex-start; flex-direction: column; }
  body:has(.layout) .wire { margin-bottom: 16px; }
  body:has(.page) .card { padding: 20px 16px !important; border-radius: 12px !important; }
  body:has(.page) .hero { padding-top: 42px; padding-bottom: 42px; }
  body:has(.hero) .hero__actions { align-items: stretch; flex-direction: column; }
  body:has(.hero) .hero__actions > * { width: 100%; }
}

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


/* ═══ SuperCasinoPredict signature direction ═══ */
:root {
  --as-coral: #b8f34a;
  --as-coral-deep: #78b719;
  --as-mint: #58e6ff;
  --as-amber: #ffd166;
  --as-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --as-body: "Work Sans", "Segoe UI", sans-serif;
}

body:has(.hero) {
  background:
    radial-gradient(circle at 10% 12%, rgba(184,243,74,.08), transparent 28rem),
    radial-gradient(circle at 88% 20%, rgba(88,230,255,.08), transparent 30rem),
    var(--as-ink) !important;
}
body:has(.hero) .hero__h1-line2,
body:has(.hero) .fcta__h span { color: var(--as-coral) !important; }
body:has(.hero) .hero__eyebrow,
body:has(.hero) .fcta__badge { color: var(--as-coral) !important; background: rgba(184,243,74,.10) !important; border-color: rgba(184,243,74,.38) !important; }
body:has(.hero) .hero__eyebrow-dot,
body:has(.hero) .eyebrow::before,
body:has(.hero) .btn-red-sm,
body:has(.hero) .btn-hero-primary,
body:has(.hero) .hpcard__cta { background: var(--as-coral) !important; color: var(--as-ink) !important; }
body:has(.hero) .btn-red-sm:hover,
body:has(.hero) .btn-hero-primary:hover,
body:has(.hero) .hpcard__cta:hover { background: var(--as-mint) !important; color: var(--as-ink) !important; }
body:has(.hero) .hero__grid { background-image: linear-gradient(rgba(184,243,74,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(184,243,74,.035) 1px, transparent 1px) !important; }
body:has(.hero) .hpcard__brand,
body:has(.hero) .hpcard__brand-icon,
body:has(.hero) .prc-rate { color: var(--as-coral) !important; }
body:has(.hero) .hpcard__brand-icon { background: var(--as-coral) !important; color: var(--as-ink) !important; }

body:has(.layout) .logo__mark { background: var(--as-coral) !important; color: var(--as-ink) !important; }
body:has(.layout) .logo__accent,
body:has(.layout) .section-title .material-symbols-outlined,
body:has(.layout) .sb-item.active,
body:has(.layout) .sb-hot,
body:has(.layout) .gc-stat__val { color: var(--as-coral) !important; }
body:has(.layout) .btn-solid,
body:has(.layout) .sbtn,
body:has(.layout) .mbox__topbar { background: var(--as-coral) !important; color: var(--as-ink) !important; }
body:has(.layout) .btn-solid:hover,
body:has(.layout) .sbtn:hover { background: var(--as-mint) !important; }
body:has(.layout) .sb-item.active { background: rgba(184,243,74,.13) !important; }
body:has(.layout) .sb-item.active::before { background: var(--as-coral) !important; }
body:has(.layout) .game-card:hover { border-color: rgba(184,243,74,.7) !important; }

body:has(.page) .navbar__logo-accent,
body:has(.page) .hero__icon,
body:has(.page) .hero__title { color: var(--as-coral-deep) !important; }
body:has(.page) .hero { background: linear-gradient(135deg, #e4ecd8, var(--as-paper)) !important; }
body:has(.page) .auth-form__btn { background: var(--as-coral) !important; color: var(--as-ink) !important; }
body:has(.page) .auth-form__btn:hover { background: var(--as-mint) !important; }
body:has(.page) .scan-tier-card.selected,
body:has(.page) .scan-tier-card:hover,
body:has(.page) .network-card.selected,
body:has(.page) .network-card:hover { border-color: var(--as-coral) !important; background: rgba(184,243,74,.10) !important; }

/* Brand wordmark stays legible at every breakpoint. */
.logo__word, .navbar__logo, .sidebar-brand, .hub-brand { letter-spacing: -.03em; }
.logo__word sup { color: var(--as-mint) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SuperCasinoPredict v3 — Midnight Signal theme
   Fresh typography and palette: no cream, coral, or previous display treatment.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --as-ink: #070b18;
  --as-ink-2: #0c1225;
  --as-ink-3: #121b35;
  --as-paper: #f4f7ff;
  --as-paper-2: #e8edfa;
  --as-line: rgba(244, 247, 255, .14);
  --as-line-light: rgba(7, 11, 24, .16);
  --as-coral: #5eead4;
  --as-coral-deep: #14b8a6;
  --as-mint: #a78bfa;
  --as-amber: #ffb86b;
  --as-muted: #9aa8c7;
  --as-muted-dark: #53617d;
  --as-display: "Space Grotesk", system-ui, sans-serif;
  --as-body: "Manrope", system-ui, sans-serif;
  --as-mono: "Space Mono", Consolas, monospace;
}

html { background: var(--as-ink); }
body { font-family: var(--as-body) !important; }

/* Public landing: midnight canvas with cyan/violet signal accents. */
body:has(.hero),
body:has(.hero) .hero,
body:has(.hero) .how,
body:has(.hero) .perf,
body:has(.hero) .testi,
body:has(.hero) .fcta { background: var(--as-ink) !important; color: var(--as-paper) !important; }
body:has(.hero) .why,
body:has(.hero) .recent,
body:has(.hero) .footer { background: var(--as-ink-2) !important; }
body:has(.hero) .hero__bg-orb1 { background: radial-gradient(circle, rgba(94,234,212,.16), transparent 68%) !important; }
body:has(.hero) .hero__bg-orb2 { background: radial-gradient(circle, rgba(167,139,250,.16), transparent 68%) !important; }
body:has(.hero) .hero__grid { background-image: linear-gradient(rgba(244,247,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244,247,255,.035) 1px, transparent 1px) !important; }
body:has(.hero) .hero__h1,
body:has(.hero) .section-h,
body:has(.hero) .fcta__h,
body:has(.hero) .logo__word { font-family: var(--as-display) !important; letter-spacing: -.045em !important; }
body:has(.hero) .hero__h1-line2,
body:has(.hero) .fcta__h span { color: var(--as-coral) !important; -webkit-text-fill-color: var(--as-coral) !important; }
body:has(.hero) .hero__eyebrow,
body:has(.hero) .fcta__badge { color: var(--as-coral) !important; background: rgba(94,234,212,.10) !important; border-color: rgba(94,234,212,.34) !important; }
body:has(.hero) .btn-red-sm,
body:has(.hero) .btn-hero-primary,
body:has(.hero) .hpcard__cta { background: var(--as-coral) !important; color: var(--as-ink) !important; box-shadow: 0 12px 30px rgba(94,234,212,.18) !important; }
body:has(.hero) .btn-red-sm:hover,
body:has(.hero) .btn-hero-primary:hover,
body:has(.hero) .hpcard__cta:hover { background: var(--as-mint) !important; color: var(--as-ink) !important; }
body:has(.hero) .hpcard,
body:has(.hero) .why-card,
body:has(.hero) .perf-rate-card,
body:has(.hero) .perf-chart-card,
body:has(.hero) .recent-row,
body:has(.hero) .testi-card { background: var(--as-ink-3) !important; border-color: var(--as-line) !important; }
body:has(.hero) .hpcard__brand,
body:has(.hero) .hpcard__brand-icon,
body:has(.hero) .prc-rate { color: var(--as-coral) !important; }
body:has(.hero) .hpcard__brand-icon { background: var(--as-coral) !important; color: var(--as-ink) !important; }
body:has(.hero) .hpcard__live,
body:has(.hero) .stat-block__val b,
body:has(.hero) .rr-won,
body:has(.hero) .testi-card__stat { color: var(--as-mint) !important; }
body:has(.hero) .ticker { background: linear-gradient(90deg, var(--as-coral-deep), #2563eb) !important; }

/* Prediction console: navy shell and luminous active controls. */
body:has(.layout) { background: #e8edfa !important; color: var(--as-ink) !important; }
body:has(.layout) .topnav { background: rgba(244,247,255,.88) !important; border-bottom-color: rgba(7,11,24,.12) !important; }
body:has(.layout) .logo,
body:has(.layout) .section-title,
body:has(.layout) .game-card__name { font-family: var(--as-display) !important; }
body:has(.layout) .logo__mark { background: var(--as-coral) !important; color: var(--as-ink) !important; box-shadow: 0 8px 24px rgba(20,184,166,.26) !important; }
body:has(.layout) .logo__accent,
body:has(.layout) .section-title .material-symbols-outlined,
body:has(.layout) .sb-item.active,
body:has(.layout) .sb-hot,
body:has(.layout) .gc-stat__val { color: var(--as-coral-deep) !important; }
body:has(.layout) .sidebar { background: #dfe6f7 !important; border-right-color: rgba(7,11,24,.13) !important; }
body:has(.layout) .btn-solid,
body:has(.layout) .sbtn,
body:has(.layout) .mbox__topbar { background: var(--as-coral-deep) !important; color: #fff !important; }
body:has(.layout) .btn-solid:hover,
body:has(.layout) .sbtn:hover { background: #2563eb !important; }
body:has(.layout) .sb-item.active { background: rgba(20,184,166,.12) !important; }
body:has(.layout) .game-card:hover { border-color: rgba(20,184,166,.64) !important; box-shadow: 0 24px 46px rgba(7,11,24,.16) !important; }

/* Flow pages and auth surfaces. */
body:has(.page) { background: #e8edfa !important; color: var(--as-ink) !important; }
body:has(.page) .navbar { background: rgba(244,247,255,.9) !important; }
body:has(.page) .hero { background: linear-gradient(135deg, #dce6fb, #f4f7ff) !important; }
body:has(.page) .hero__title,
body:has(.page) .card h3,
body:has(.page) .navbar__logo { font-family: var(--as-display) !important; }
body:has(.page) .hero__icon,
body:has(.page) .hero__title,
body:has(.page) .navbar__logo-accent { color: var(--as-coral-deep) !important; }
body:has(.page) .card { background: rgba(244,247,255,.76) !important; border-color: rgba(7,11,24,.14) !important; box-shadow: 0 18px 42px rgba(7,11,24,.10) !important; }
body:has(.page) .auth-form__btn { background: var(--as-coral-deep) !important; color: #fff !important; }
body:has(.page) .auth-form__btn:hover { background: #2563eb !important; }

/* Standalone admin login screens share the new theme even without .page/.layout. */
body:has(.login-wrap) { background: #e8edfa !important; color: var(--as-ink) !important; font-family: var(--as-body) !important; }
body:has(.login-wrap) .masthead__word,
body:has(.login-wrap) .card__title { font-family: var(--as-display) !important; }
body:has(.login-wrap) .card { background: rgba(244,247,255,.84) !important; border-color: rgba(7,11,24,.16) !important; box-shadow: 8px 10px 0 var(--as-ink) !important; }
body:has(.login-wrap) .card__topbar { background: var(--as-coral-deep) !important; }
body:has(.login-wrap) .btn { background: var(--as-ink) !important; }
body:has(.login-wrap) .btn:hover:not(:disabled) { background: var(--as-coral-deep) !important; }

@media (max-width: 680px) {
  body:has(.hero) .hero__h1 { font-size: clamp(2.6rem, 12vw, 4.8rem); }
  body:has(.layout) .main { padding: 16px 12px 36px; }
}


/* ═══ Contrast pass — make every text layer visibly readable ═══ */
:root {
  --as-paper: #f8fbff;
  --as-muted: #c6d2eb;
  --as-muted-dark: #33415f;
}

/* Dark landing surfaces */
body:has(.hero) .nav {
  background: rgba(7, 11, 24, .92) !important;
  border-bottom-color: rgba(244, 247, 255, .16) !important;
}
body:has(.hero) .nav__link,
body:has(.hero) .nav__logo,
body:has(.hero) .hero__sub,
body:has(.hero) .hero__trust,
body:has(.hero) .section-sub,
body:has(.hero) .trust-item span:last-child,
body:has(.hero) .footer-col__links a,
body:has(.hero) .fcta__sub { color: #c6d2eb !important; }
body:has(.hero) .nav__link:hover,
body:has(.hero) .nav__link.active { color: #f8fbff !important; }
body:has(.hero) .hero__h1,
body:has(.hero) .section-h,
body:has(.hero) .fcta__h,
body:has(.hero) .why-card__title,
body:has(.hero) .perf-title,
body:has(.hero) .recent-title,
body:has(.hero) .testi-card__q { color: #f8fbff !important; }
body:has(.hero) .hero__card,
body:has(.hero) .hpcard { background: #121b35 !important; color: #f8fbff !important; border-color: rgba(198, 210, 235, .28) !important; }
body:has(.hero) .hpcard__match,
body:has(.hero) .hpcard__metric,
body:has(.hero) .hpcard__prob { background: #0b1020 !important; color: #f8fbff !important; border-color: rgba(198, 210, 235, .20) !important; }
body:has(.hero) .hpcard__team,
body:has(.hero) .hpcard__label,
body:has(.hero) .hpcard__meta,
body:has(.hero) .hpcard__metric-label,
body:has(.hero) .hpcard__prob-label,
body:has(.hero) .hpcard__footer,
body:has(.hero) .hpcard__live { color: #c6d2eb !important; }
body:has(.hero) .hpcard__metric-val,
body:has(.hero) .hpcard__prob-val,
body:has(.hero) .hpcard__match strong,
body:has(.hero) .hpcard__prediction { color: #f8fbff !important; }
body:has(.hero) .why-card,
body:has(.hero) .perf-rate-card,
body:has(.hero) .perf-chart-card,
body:has(.hero) .recent-row,
body:has(.hero) .testi-card { color: #f8fbff !important; }
body:has(.hero) .why-card__body,
body:has(.hero) .prc-label,
body:has(.hero) .chart-title,
body:has(.hero) .rr-sub,
body:has(.hero) .testi-card__tag { color: #b9c6e0 !important; }
body:has(.hero) .ticker,
body:has(.hero) .wire { color: #f8fbff !important; }
body:has(.hero) .ticker span,
body:has(.hero) .wire span { color: #eef4ff !important; }
body:has(.hero) .ticker b,
body:has(.hero) .wire b { color: #a78bfa !important; }

/* Light flow/admin surfaces: darken secondary copy for legibility. */
body:has(.layout) .sb-item,
body:has(.layout) .sb-label,
body:has(.layout) .section-sub,
body:has(.layout) .field label,
body:has(.layout) .gbtn,
body:has(.layout) .wticker,
body:has(.layout) .wchip,
body:has(.page) .hero__subtitle,
body:has(.page) .card__hint,
body:has(.page) .field label,
body:has(.page) .auth-form__hint { color: #33415f !important; }
body:has(.layout) .sb-item:hover,
body:has(.layout) .sb-item.active,
body:has(.layout) .section-title,
body:has(.layout) .game-card__name,
body:has(.layout) .gc-stat__label,
body:has(.page) .hero__title,
body:has(.page) .card h3,
body:has(.page) .card__title { color: #070b18 !important; }
body:has(.layout) input,
body:has(.layout) select,
body:has(.layout) textarea,
body:has(.page) input,
body:has(.page) select,
body:has(.page) textarea { color: #070b18 !important; }
body:has(.layout) input::placeholder,
body:has(.layout) textarea::placeholder,
body:has(.page) input::placeholder,
body:has(.page) textarea::placeholder { color: #53617d !important; opacity: 1; }

/* Authentication screens */
body:has(.login-wrap) .card__subtitle,
body:has(.login-wrap) .field label,
body:has(.login-wrap) .footer-back { color: #33415f !important; }
body:has(.login-wrap) .masthead__word,
body:has(.login-wrap) .card__title { color: #070b18 !important; }


/* Dynamic landing content contrast fixes */
body:has(.hero) .hero__h1 mark { color: #f8fbff !important; }
body:has(.hero) .hero__h1 mark::after { background: rgba(94, 234, 212, .22) !important; }
body:has(.hero) .hero__h1 span { color: #5eead4 !important; }
body:has(.hero) #heroTicket { color: #f8fbff !important; }
body:has(.hero) .ticket {
  background: #121b35 !important;
  color: #f8fbff !important;
  border-color: rgba(198, 210, 235, .30) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .28) !important;
}
body:has(.hero) .ticket__head,
body:has(.hero) .ticket__match,
body:has(.hero) .ticket__prob { background: #0b1020 !important; color: #f8fbff !important; border-color: rgba(198, 210, 235, .22) !important; }
body:has(.hero) .ticket__brand,
body:has(.hero) .ticket__live,
body:has(.hero) .ticket__prob-lbl,
body:has(.hero) .ticket__match small { color: #c6d2eb !important; }
body:has(.hero) .ticket__home,
body:has(.hero) .ticket__away,
body:has(.hero) .ticket__prob-pct { color: #f8fbff !important; }
body:has(.hero) .ticket__prob.sel { background: rgba(94, 234, 212, .16) !important; border-color: #5eead4 !important; }
body:has(.hero) .ticket__prob.sel .ticket__prob-pct,
body:has(.hero) .ticket__prediction { color: #5eead4 !important; }
body:has(.hero) .stats-strip { background: #121b35 !important; color: #f8fbff !important; border-color: rgba(198, 210, 235, .18) !important; }
body:has(.hero) .stat-block__val,
body:has(.hero) .stat-block__label { color: #f8fbff !important; }
body:has(.hero) .stat-block__label { opacity: .78; }
body:has(.hero) .recent__list { background: #121b35 !important; border-color: rgba(198, 210, 235, .24) !important; }
body:has(.hero) .rr-matchup { color: #f8fbff !important; }
body:has(.hero) .rr-matchup small,
body:has(.hero) .rr-sub { color: #b9c6e0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   SuperCasinoPredict v4 — clean red / white / black correction pass
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --as-ink: #080808;
  --as-ink-2: #111111;
  --as-ink-3: #1b1b1b;
  --as-paper: #ffffff;
  --as-paper-2: #f4f4f4;
  --as-line: rgba(255,255,255,.16);
  --as-line-light: rgba(8,8,8,.16);
  --as-coral: #e52b32;
  --as-coral-deep: #b9151d;
  --as-mint: #ffffff;
  --as-amber: #f0f0f0;
  --as-muted: #cfcfcf;
  --as-muted-dark: #555555;
  --as-display: "Space Grotesk", Arial, sans-serif;
  --as-body: "Manrope", Arial, sans-serif;
}

/* Correct the hero reading order: copy first, ticket second. */
body:has(.hero) .hero__inner {
  grid-template-areas: "copy card" !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: center !important;
}
body:has(.hero) .hero__left { grid-area: copy !important; }
body:has(.hero) #heroTicket { grid-area: card !important; }

/* Landing surfaces and text */
body:has(.hero),
body:has(.hero) .hero,
body:has(.hero) .how,
body:has(.hero) .perf,
body:has(.hero) .testi,
body:has(.hero) .fcta { background: #080808 !important; color: #ffffff !important; }
body:has(.hero) .why,
body:has(.hero) .recent,
body:has(.hero) .footer { background: #111111 !important; color: #ffffff !important; }
body:has(.hero) .nav { background: rgba(8,8,8,.94) !important; border-bottom-color: rgba(255,255,255,.14) !important; }
body:has(.hero) .nav__link,
body:has(.hero) .nav__logo,
body:has(.hero) .hero__sub,
body:has(.hero) .hero__trust,
body:has(.hero) .section-sub,
body:has(.hero) .trust-item span:last-child,
body:has(.hero) .footer-col__links a,
body:has(.hero) .fcta__sub { color: #eeeeee !important; }
body:has(.hero) .nav__link:hover,
body:has(.hero) .nav__link.active { color: #ffffff !important; }
body:has(.hero) .hero__h1,
body:has(.hero) .hero__h1 mark,
body:has(.hero) .section-h,
body:has(.hero) .fcta__h,
body:has(.hero) .why-card__title,
body:has(.hero) .perf-title,
body:has(.hero) .recent-title,
body:has(.hero) .testi-card__q { color: #ffffff !important; }
body:has(.hero) .hero__h1 mark::after { background: rgba(229,43,50,.75) !important; }
body:has(.hero) .hero__h1 span,
body:has(.hero) .hero__h1-line2,
body:has(.hero) .fcta__h span,
body:has(.hero) .hero__eyebrow,
body:has(.hero) .eyebrow { color: #ff4b4f !important; }
body:has(.hero) .hero__eyebrow,
body:has(.hero) .fcta__badge { background: rgba(229,43,50,.12) !important; border-color: rgba(229,43,50,.5) !important; }
body:has(.hero) .hero__eyebrow-dot,
body:has(.hero) .eyebrow::before { background: #e52b32 !important; }
body:has(.hero) .btn-red-sm,
body:has(.hero) .btn-hero-primary,
body:has(.hero) .hpcard__cta { background: #e52b32 !important; color: #ffffff !important; box-shadow: 0 12px 24px rgba(229,43,50,.20) !important; }
body:has(.hero) .btn-red-sm:hover,
body:has(.hero) .btn-hero-primary:hover,
body:has(.hero) .hpcard__cta:hover { background: #ffffff !important; color: #080808 !important; }
body:has(.hero) .btn-outline-sm,
body:has(.hero) .btn-hero-ghost { color: #ffffff !important; border-color: rgba(255,255,255,.40) !important; }
body:has(.hero) .btn-outline-sm:hover,
body:has(.hero) .btn-hero-ghost:hover { color: #080808 !important; background: #ffffff !important; }

/* Ticket: black panel, white type, red signal. */
body:has(.hero) .ticket { background: #ffffff !important; color: #080808 !important; border-color: #ffffff !important; box-shadow: 10px 12px 0 #e52b32 !important; }
body:has(.hero) .ticket__head,
body:has(.hero) .ticket__match,
body:has(.hero) .ticket__prob { background: #f4f4f4 !important; color: #080808 !important; border-color: rgba(8,8,8,.18) !important; }
body:has(.hero) .ticket__brand,
body:has(.hero) .ticket__live,
body:has(.hero) .ticket__prob-lbl,
body:has(.hero) .ticket__match small { color: #555555 !important; }
body:has(.hero) .ticket__home,
body:has(.hero) .ticket__away,
body:has(.hero) .ticket__prob-pct { color: #080808 !important; }
body:has(.hero) .ticket__prob.sel { background: rgba(229,43,50,.10) !important; border-color: #e52b32 !important; }
body:has(.hero) .ticket__prob.sel .ticket__prob-pct,
body:has(.hero) .ticket__prediction { color: #b9151d !important; }
body:has(.hero) .stats-strip { background: #ffffff !important; color: #080808 !important; border-color: rgba(8,8,8,.16) !important; }
body:has(.hero) .stat-block__val,
body:has(.hero) .stat-block__label { color: #080808 !important; }
body:has(.hero) .ticker,
body:has(.hero) .wire { background: #e52b32 !important; color: #ffffff !important; }
body:has(.hero) .ticker span,
body:has(.hero) .wire span,
body:has(.hero) .ticker b,
body:has(.hero) .wire b { color: #ffffff !important; }
body:has(.hero) .why-card,
body:has(.hero) .perf-rate-card,
body:has(.hero) .perf-chart-card,
body:has(.hero) .recent-row,
body:has(.hero) .testi-card { background: #1b1b1b !important; border-color: rgba(255,255,255,.14) !important; color: #ffffff !important; }
body:has(.hero) .why-card__body,
body:has(.hero) .prc-label,
body:has(.hero) .rr-sub,
body:has(.hero) .testi-card__tag { color: #cfcfcf !important; }

/* Flow and console pages: white canvas, black type, red actions. */
body:has(.layout),
body:has(.page) { background: #f4f4f4 !important; color: #080808 !important; }
body:has(.layout) .topnav,
body:has(.page) .navbar { background: rgba(255,255,255,.94) !important; border-bottom-color: rgba(8,8,8,.14) !important; }
body:has(.layout) .logo,
body:has(.layout) .section-title,
body:has(.layout) .game-card__name,
body:has(.page) .navbar__logo,
body:has(.page) .hero__title,
body:has(.page) .card h3 { font-family: var(--as-display) !important; color: #080808 !important; }
body:has(.layout) .sidebar { background: #111111 !important; border-right-color: rgba(255,255,255,.12) !important; }
body:has(.layout) .sb-label,
body:has(.layout) .sb-item { color: #d7d7d7 !important; }
body:has(.layout) .sb-item:hover { background: rgba(255,255,255,.09) !important; color: #ffffff !important; }
body:has(.layout) .sb-item.active { background: rgba(229,43,50,.18) !important; color: #ff5b5f !important; }
body:has(.layout) .sb-item.active::before { background: #e52b32 !important; }
body:has(.layout) .logo__accent,
body:has(.layout) .section-title .material-symbols-outlined,
body:has(.layout) .gc-stat__val,
body:has(.page) .hero__icon,
body:has(.page) .hero__title,
body:has(.page) .navbar__logo-accent { color: #b9151d !important; }
body:has(.layout) .btn-solid,
body:has(.layout) .sbtn,
body:has(.layout) .mbox__topbar,
body:has(.page) .auth-form__btn { background: #e52b32 !important; color: #ffffff !important; }
body:has(.layout) .btn-solid:hover,
body:has(.layout) .sbtn:hover,
body:has(.page) .auth-form__btn:hover { background: #080808 !important; }
body:has(.layout) .game-card,
body:has(.page) .card { background: #ffffff !important; border-color: rgba(8,8,8,.16) !important; color: #080808 !important; }
body:has(.layout) .field input,
body:has(.layout) input,
body:has(.layout) select,
body:has(.layout) textarea,
body:has(.page) input,
body:has(.page) select,
body:has(.page) textarea { background: #ffffff !important; color: #080808 !important; border-color: rgba(8,8,8,.22) !important; }
body:has(.page) .hero { background: #ffffff !important; border-bottom-color: rgba(8,8,8,.14) !important; }

/* Login screens */
body:has(.login-wrap) { background: #f4f4f4 !important; color: #080808 !important; font-family: var(--as-body) !important; }
body:has(.login-wrap) .masthead__word,
body:has(.login-wrap) .card__title { font-family: var(--as-display) !important; color: #080808 !important; }
body:has(.login-wrap) .masthead__accent,
body:has(.login-wrap) .card__eyebrow { color: #b9151d !important; }
body:has(.login-wrap) .card { background: #ffffff !important; border-color: #080808 !important; box-shadow: 8px 10px 0 #e52b32 !important; }
body:has(.login-wrap) .card__topbar { background: #e52b32 !important; }
body:has(.login-wrap) .btn { background: #080808 !important; color: #ffffff !important; }
body:has(.login-wrap) .btn:hover:not(:disabled) { background: #e52b32 !important; }

@media (max-width: 760px) {
  body:has(.hero) .hero__inner { grid-template-areas: "card" "copy" !important; grid-template-columns: 1fr !important; gap: 34px !important; }
  body:has(.hero) #heroTicket { max-width: 460px; width: 100%; margin: 0 auto; }
  body:has(.hero) .hero__left { text-align: center; }
  body:has(.hero) .hero__ctas { justify-content: center; }
}
/* Smooth mark integration */
.logo__mark,
.navbar__logo-icon,
.masthead__mark {
  background: #080808 url("assets/supercasino-predict-mark.svg") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 16px rgba(229,43,50,.22) !important;
  overflow: hidden;
}
.logo__mark::before,
.logo__mark::after,
.masthead__mark::before,
.masthead__mark::after { display: none !important; content: none !important; }
.masthead__mark { border-radius: 13px !important; }


/* Admin login wordmark correction */
body:has(.login-container) .login-logo span:last-child {
  color: #080808 !important;
  font-family: var(--as-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}
body:has(.login-container) .login-logo .as-brand-mark {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
}
body:has(.login-container) .login-card,
body:has(.login-container) .login-container { color: #080808 !important; }


/* Preview hub alignment */
body:has(.hub-shell) {
  --hub-ink: #080808 !important;
  --hub-ink-2: #111111 !important;
  --hub-paper: #ffffff !important;
  --hub-line: rgba(255,255,255,.16) !important;
  --hub-coral: #e52b32 !important;
  --hub-mint: #ffffff !important;
  background: #080808 !important;
  color: #ffffff !important;
  font-family: var(--as-body) !important;
}
body:has(.hub-shell) .hub-brand,
body:has(.hub-shell) .hub-section h2,
body:has(.hub-shell) h1 { font-family: var(--as-display) !important; }
body:has(.hub-shell) .hub-brand span:last-child,
body:has(.hub-shell) h1 span,
body:has(.hub-shell) .hub-eyebrow,
body:has(.hub-shell) .hub-card__link { color: #ff4b4f !important; }
body:has(.hub-shell) .hub-chip { color: #ffffff !important; border-color: rgba(255,255,255,.30) !important; }
body:has(.hub-shell) .hub-lede,
body:has(.hub-shell) .hub-note p,
body:has(.hub-shell) .hub-card p { color: #cfcfcf !important; }
body:has(.hub-shell) .hub-note,
body:has(.hub-shell) .hub-card { background: #1b1b1b !important; border-color: rgba(255,255,255,.16) !important; }
body:has(.hub-shell) .hub-card:hover { background: #252525 !important; border-color: rgba(229,43,50,.72) !important; }
body:has(.hub-shell) .hub-card__icon { background: rgba(229,43,50,.14) !important; color: #ff4b4f !important; }
body:has(.hub-shell) .hub-section-head p,
body:has(.hub-shell) .hub-card__index,
body:has(.hub-shell) .hub-footer { color: #a9a9a9 !important; }


/* Games page header correction — highest-specificity final override */
body:has(.layout) .topnav {
  background: #080808 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
}
body:has(.layout) .topnav .logo__mark {
  background-color: #e52b32 !important;
  background-image: url("assets/supercasino-predict-mark.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 2px rgba(229,43,50,.28), 0 6px 16px rgba(229,43,50,.22) !important;
}
body:has(.layout) .topnav .logo__mark::before,
body:has(.layout) .topnav .logo__mark::after { display: none !important; content: none !important; }
body:has(.layout) .topnav .logo__word { color: #ffffff !important; font-family: var(--as-display) !important; }
body:has(.layout) .topnav .logo__word sup { color: #ff4b4f !important; }
body:has(.layout) .topnav .nav-right .btn-outline-sm { color: #ffffff !important; border-color: rgba(255,255,255,.42) !important; background: transparent !important; }
body:has(.layout) .topnav .nav-right .btn-outline-sm:hover { color: #080808 !important; background: #ffffff !important; }
body:has(.layout) .topnav .nav-right .btn-red-sm { color: #ffffff !important; background: #e52b32 !important; border-color: #e52b32 !important; }
body:has(.layout) .topnav .nav-right .btn-red-sm:hover { color: #080808 !important; background: #ffffff !important; border-color: #ffffff !important; }