/* ═══════════════════════════════════════════════
   booBet.net — Professional Sports Predictions
   Light-First | Modern CSS 2024 | Premium Design
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ═══ @layer — Cascade Layer Organization (CSS 2022) ═══ */
@layer reset, base, theme, components, utilities, animations;

/* ═══ @property — Typed CSS Custom Properties (Houdini / CSS 2023) ═══ */
@property --gradient-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 135deg;
}
@property --card-shine {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -40%;
}
@property --progress-fill {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@layer reset {
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    /* overflow-x:hidden on html/body breaks position:sticky — use clip on html only */
    html { overflow-x: clip; max-width: 100%; }
    body { max-width: 100%; }
}

:root {
    /* ═══ Brand / accent colors — shared across themes ═══ */
    --accent: #6366f1;
    --accent2: #8b5cf6;
    --accent-rgb: 99,102,241;
    --green: #10b981;
    --red: #ef4444;
    --yellow: #f59e0b;
    --blue: #3b82f6;
    --orange: #f97316;
    --gradient-main: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
    --gradient-green: linear-gradient(135deg, #10b981, #059669);
    --gradient-red: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-blue: linear-gradient(135deg, #3b82f6, #2563eb);
    --gradient-orange: linear-gradient(135deg, #f97316, #ea580c);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ═══ Light theme — default (professional clean white) ═══ */
    --bg: #f4f7ff;
    --bg2: #ffffff;
    --bg3: #e9eef9;
    --bg-card: #ffffff;
    --bg-glass: rgba(255,255,255,0.92);
    --text: #0c1427;
    --text2: #3a506f;
    --text3: #7f96b8;
    --border: #dde4f2;
    --border-accent: rgba(99,102,241,0.22);
    --win-bg: rgba(16,185,129,0.07);
    --lose-bg: rgba(239,68,68,0.06);
    --shadow: 0 1px 3px rgba(12,20,39,0.04), 0 10px 28px rgba(12,20,39,0.08);
    --shadow-sm: 0 1px 2px rgba(12,20,39,0.03), 0 3px 10px rgba(12,20,39,0.05);
    --shadow-card: 0 1px 3px rgba(12,20,39,0.04), 0 8px 24px rgba(12,20,39,0.07);
    --accent-glow: rgba(99,102,241,0.10);
    --green-glow: rgba(16,185,129,0.10);
    --red-glow: rgba(239,68,68,0.10);
    --yellow-glow: rgba(245,158,11,0.10);
    --blue-glow: rgba(59,130,246,0.10);
}

/* ═══ Dark theme overrides ═══ */
[data-theme="dark"] {
    --bg: #060611;
    --bg2: #0c0c1e;
    --bg3: #080818;
    --bg-card: rgba(12,12,35,0.75);
    --bg-glass: rgba(255,255,255,0.03);
    --text: #e2e8f0;
    --text2: #64748b;
    --text3: #475569;
    --border: rgba(255,255,255,0.06);
    --border-accent: rgba(99,102,241,0.25);
    --win-bg: rgba(16,185,129,0.08);
    --lose-bg: rgba(239,68,68,0.08);
    --shadow: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.35);
    --accent-glow: rgba(99,102,241,0.25);
    --green-glow: rgba(16,185,129,0.15);
    --red-glow: rgba(239,68,68,0.15);
    --yellow-glow: rgba(245,158,11,0.15);
    --blue-glow: rgba(59,130,246,0.15);
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    letter-spacing: -0.01em;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Custom scrollbar (webkit) */
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
body::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Text selection */
::selection { background: rgba(99,102,241,0.18); color: var(--text); }

/* Focus visible — accessibility ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ═══ BACKGROUND BASE — ambient glow mesh ═══ */
body::before, body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
/* Light mode (default): very subtle tint */
body::before {
    background: radial-gradient(ellipse at 20% 35%, rgba(99,102,241,0.05) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 15%, rgba(139,92,246,0.03) 0%, transparent 50%);
}
body::after {
    background: radial-gradient(ellipse at 65% 85%, rgba(59,130,246,0.03) 0%, transparent 50%),
                radial-gradient(ellipse at 25% 70%, rgba(99,102,241,0.02) 0%, transparent 45%);
}
/* Dark mode: richer cosmic glow */
[data-theme="dark"] body::before {
    background: radial-gradient(ellipse at 15% 30%, rgba(99,102,241,0.07) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 20%, rgba(139,92,246,0.05) 0%, transparent 45%);
}
[data-theme="dark"] body::after {
    background: radial-gradient(ellipse at 70% 80%, rgba(99,102,241,0.045) 0%, transparent 50%),
                radial-gradient(ellipse at 20% 70%, rgba(59,130,246,0.03) 0%, transparent 45%);
}

/* ═══ SHOOTING STARS — Cyberpunk neon style ═══ */
.shooting-star {
    position: fixed;
    top: 0; left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, rgba(99,102,241,0), rgba(139,92,246,0.8), rgba(99,102,241,0.5), rgba(139,92,246,0));
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    filter: blur(0.3px);
}
.shooting-star::after {
    content: '';
    position: absolute;
    right: 0; top: -1px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(139,92,246,0.95);
    box-shadow: 0 0 6px 2px rgba(99,102,241,0.6);
}
.shooting-star.animate {
    animation: shootingStar 1.2s ease-in forwards;
}
@keyframes shootingStar {
    0% { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
    10% { opacity: 1; }
    70% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(400px, 250px) rotate(-35deg); }
}

/* Shooting stars: subtle in light mode (default), vivid in dark */
.shooting-star {
    background: linear-gradient(90deg, rgba(99,102,241,0), rgba(99,102,241,0.35), rgba(139,92,246,0.2), rgba(99,102,241,0));
}
.shooting-star::after {
    background: rgba(99,102,241,0.55);
    box-shadow: 0 0 5px 1px rgba(99,102,241,0.2);
}
[data-theme="dark"] .shooting-star {
    background: linear-gradient(90deg, rgba(99,102,241,0), rgba(139,92,246,0.8), rgba(99,102,241,0.5), rgba(139,92,246,0));
}
[data-theme="dark"] .shooting-star::after {
    background: rgba(139,92,246,0.95);
    box-shadow: 0 0 6px 2px rgba(99,102,241,0.6);
}

/* Ensure content is above stars (header uses sticky separately) */
main, .main-footer, .container {
    position: relative;
    z-index: 1;
}
.main-header {
    z-index: 1000;
}

/* ═══ NEBULA / COSMIC DUST OVERLAY ═══ */
[data-theme="dark"] body {
    background-image: none;
}

a { color: var(--text); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }
.container { padding: 20px 16px; flex: 1; min-width: 0; }

/* ═══════ HEADER — Clean Professional Glass (sticky on classic / v1bb) ═══════ */
.main-header {
    /* Light mode: clean frosted white */
    background: rgba(255,255,255,0.88);
    border-bottom: 1px solid #e4ebf8;
    padding: 0;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(12,20,39,0.07);
    /* View Transition name for page-swap animation */
    view-transition-name: main-header;
}
[data-theme="dark"] .main-header {
    background: rgba(10, 12, 32, 0.52);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 1px 0 rgba(0,0,0,0.3),
        0 8px 32px rgba(0,0,0,0.25),
        0 0 0 0 rgba(99,102,241,0);
}
.header-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    gap: 20px;
}
.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
}

/* ═══ LOGO TEXT ═══ */
.logo-text {
    color: var(--text);
    background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, #a78bfa 50%, var(--text) 60%, var(--text) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShimmer 4s ease-in-out infinite;
}
@keyframes logoShimmer {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: -100% 0; }
}

/* ═══ LOGO UNDERLINE ANIMATION ═══ */
.logo-underline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2, #a855f7), var(--accent), transparent);
    background-size: 200% 100%;
    animation: logoLineSlide 3s ease-in-out infinite, logoLineGlow 3s ease-in-out infinite;
    opacity: 0.7;
}
.logo:hover .logo-underline {
    opacity: 0;
    pointer-events: none;
}
@keyframes logoLineSlide {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes logoLineGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(108,92,231,0.2); }
    50% { box-shadow: 0 0 8px rgba(108,92,231,0.5), 0 0 16px rgba(168,85,247,0.2); }
}
@keyframes logoLineExpand {
    from { transform: scaleX(0.8); }
    to { transform: scaleX(1.05); }
}

/* ═══ MASERATI TRIDENT — theme-aware colors ═══ */
/* Light theme (default): dark gold trident */
.trident-stop1 { stop-color: #8b6914; }
.trident-stop2 { stop-color: #b8860b; }
.trident-stop3 { stop-color: #996515; }
.maserati-trident-splash { filter: drop-shadow(0 0 10px rgba(139,105,20,0.4)); }
/* Dark theme: rose gold trident */
[data-theme="dark"] .trident-stop1 { stop-color: #b76e79; }
[data-theme="dark"] .trident-stop2 { stop-color: #f0d0c0; }
[data-theme="dark"] .trident-stop3 { stop-color: #e8a090; }
[data-theme="dark"] .maserati-trident-splash { filter: drop-shadow(0 0 12px rgba(183,110,121,0.5)); }

/* ═══ SPLASH SCREEN ═══ */
.nav-menu { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; overflow: visible; }

/* ═══ HAMBURGER MENU ═══ */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 101;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-menu a {
    padding: 7px 16px;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--text2);
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
    letter-spacing: 0.01em;
    position: relative;
}
/* color-mix() for interactive hover states (CSS 2023) */
.nav-menu a:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.nav-menu a.active {
    color: #fff;
    background: var(--gradient-main);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.25);
}

.user-menu { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-btn {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.theme-btn:hover { border-color: var(--accent); background: var(--accent-glow); }

.user-info { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.role { display: none; }
.username { font-weight: 500; color: var(--text2); }

/* ═══════ PAGE TITLE ═══════ */
.page-title-with-stats {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.page-title-with-stats h1 {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.title-stats { display: flex; gap: 8px; }
.stat-mini {
    padding: 6px 14px;
    background: var(--bg-glass);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
}
.stat-mini.win { color: var(--green); border-color: rgba(0,214,143,0.3); background: var(--green-glow); }
.stat-mini.lose { color: var(--red); border-color: rgba(255,107,107,0.3); background: var(--red-glow); }
.stat-mini.live { color: #00ced1; border-color: rgba(0,206,209,0.5); animation: livePulseGlow 2s ease-in-out infinite; }
.stat-mini.total { color: var(--accent2); border-color: var(--border-accent); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ═══════ DAY NAV — compact -1 / today / +1 switcher (full calendar lives elsewhere on the page) ═══════ */
.day-nav { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; align-items: center; position: relative; }
/* ── Day Navigation Strip (replaces old circles) ── */
.day-nav-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto 20px;
    width: fit-content;
    max-width: 100%;
}
.dns-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text3);
    text-decoration: none;
    flex-shrink: 0;
    font-size: 15px;
    transition: all .18s ease;
    backdrop-filter: blur(10px);
}
.dns-arrow:hover { background: rgba(var(--accent-rgb),.1); border-color: rgba(var(--accent-rgb),.4); color: var(--accent); transform: scale(1.06); }
.dns-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px 8px;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.dns-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text3);
    padding: 7px 13px;
    border-radius: 11px;
    min-width: 54px;
    transition: all .2s ease;
    position: relative;
    border: 1px solid transparent;
}
.dns-chip:hover {
    background: rgba(var(--accent-rgb),.07);
    border-color: rgba(var(--accent-rgb),.2);
    color: var(--text);
    transform: translateY(-1px);
}
.dns-chip.is-today:not(.is-active) .dns-chip-num { color: #22d3ee; }
.dns-chip.is-active {
    background: var(--gradient-main);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb),.35), 0 0 0 2px rgba(var(--accent-rgb),.15);
    view-transition-name: active-day-ring;
}
.dns-chip.is-active .dns-chip-day,
.dns-chip.is-active .dns-chip-num { color: #fff; }
.dns-chip-day {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
    opacity: .8;
}
.dns-chip.is-active .dns-chip-day { opacity: 1; }
.dns-chip-num {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}
.dns-chip:not(.is-active) .dns-chip-num { font-size: 18px; color: var(--text2); }
.dns-chip-today-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #22d3ee;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 480px) {
    .dns-chips { gap: 3px; padding: 5px 5px; }
    .dns-chip { min-width: 44px; padding: 5px 8px; }
    .dns-chip-num { font-size: 16px; }
    .dns-chip:not(.is-active) .dns-chip-num { font-size: 15px; }
    .dns-arrow { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .dns-chip, .dns-arrow { transition: none; }
}
/* Keep old class names working for any legacy usage */
.day-nav-circles { display: contents; }
.day-circle { display: none; }
.day-nav a {
    padding: 10px 22px;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text2);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.day-nav a::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108,92,231,0.08), transparent);
    transition: left 0.5s ease;
}
.day-nav a:hover::before { left: 100%; }
.day-nav a:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(108,92,231,0.12); }
.day-nav a.today-btn {
    background: var(--gradient-main);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb),0.3);
    font-size: 14px;
    padding: 12px 28px;
    letter-spacing: 0.3px;
    font-weight: 700;
}
.day-nav a.today-btn::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); }
.day-nav a.today-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 28px var(--accent-glow); }

/* ═══════ CONSENSUS FILTER ═══════ */
.consensus-filter {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.consensus-btn {
    padding: 8px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    backdrop-filter: blur(8px);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.consensus-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); transform: translateY(-1px); }
.consensus-btn.active {
    background: var(--gradient-main);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.3);
    transform: translateY(-1px);
    font-weight: 700;
}
.consensus-btn .count {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 4px;
}

/* ═══ Live Now Bar ═══ */
.live-now-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,59,59,.28);
    background: rgba(255,59,59,.06);
    backdrop-filter: blur(8px);
}
.live-now-bar-page {
    border-color: rgba(255,59,59,.45);
    background: rgba(255,59,59,.1);
}
.live-now-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #ff5252;
}
.live-now-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b3b;
    flex-shrink: 0;
    animation: liveRedPulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
}
.live-now-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,59,59,.18);
    border: 1px solid rgba(255,59,59,.4);
    color: #ff5252;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 22px;
}
.live-now-link, .live-now-back {
    font-size: 12px;
    font-weight: 700;
    color: #ff5252;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,59,59,.35);
    background: rgba(255,59,59,.08);
    transition: background .18s, border-color .18s;
    white-space: nowrap;
}
.live-now-link:hover, .live-now-back:hover {
    background: rgba(255,59,59,.18);
    border-color: rgba(255,59,59,.55);
}
@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ═══════ MATCHES ═══════ */
.matches-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    /* Container query context for responsive sub-components */
    container-type: inline-size;
    container-name: matches;
}
.no-matches { padding: 80px 20px; text-align: center; color: var(--text2); }
.no-matches h2 { font-size: 18px; font-weight: 500; }

.matches-header {
    display: grid;
    grid-template-columns: 55px 1fr 100px 65px 55px 50px 80px 60px 50px 80px 80px 80px 80px;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg3);
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.matches-header span { display: flex; align-items: center; justify-content: center; }
.matches-header .left { justify-content: flex-start; }

.match-row {
    display: grid;
    grid-template-columns: 55px 1fr 100px 65px 55px 50px 80px 60px 50px 80px 80px 80px 80px;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: all 0.2s;
}
.match-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
.match-row:last-child { border-bottom: none; }
.match-row.live-row {
    background: linear-gradient(90deg, rgba(0,206,209,0.06), transparent);
}
.match-row.win-row { background: var(--win-bg); }
.match-row.lose-row { background: var(--lose-bg); }
.match-row.consensus-highlight {
    background: linear-gradient(90deg, rgba(108,92,231,0.08), transparent);
}

/* Cells */
.match-time { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.time-badge {
    background: var(--bg-glass);
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text2);
}
.live-minute {
    font-size: 10px;
    font-weight: 800;
    color: #00ced1;
    animation: livePulseGlow 2s ease-in-out infinite;
    margin-right: 4px;
}
.live-badge {
    background: linear-gradient(135deg, #00ced1, #00ff7f);
    color: #0a0a1a;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 800;
    animation: livePulseGlow 2s ease-in-out infinite;
}

.teams-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flag { width: 20px; height: 20px; border-radius: 2px; flex-shrink: 0; object-fit: contain; }
.teams-names { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.teams-line { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: nowrap; }
.team { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team.home { color: var(--blue); }
.team.away { color: var(--text2); }
.team-vs { font-size: 9px; color: var(--text3); font-weight: 700; flex-shrink: 0; }

/* SV League/Country info */
.sv-league-info {
    font-size: 9px;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

/* Team Form (W/D/L dots) — round style matching tennis */
.team-form-row { display: flex; align-items: center; gap: 4px; }
.form-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.form-dot {
    width: 15px; height: 15px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700;
    color: #fff;
    line-height: 1;
}
.form-dot.w { background: var(--green); }
.form-dot.l { background: var(--red); }
.form-dot.d { background: var(--yellow); color: #333; }
.form-dot.p { background: var(--bg-glass); color: var(--text3); border: 1px solid var(--border); }
.form-sep { color: var(--text3); font-size: 10px; margin: 0 2px; }

/* Odds Trio */
.odds-trio { display: flex; gap: 3px; justify-content: center; align-items: center; }
.odds-trio span { font-size: 10px; color: var(--text2); font-weight: 600; }
.odds-trio .odd-hl { color: var(--green); font-weight: 800; font-size: 11px; }

/* Bet Checkbox – Purple custom */
.bet-cell { display: flex; align-items: center; justify-content: center; }
.bet-check { cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.bet-check input[type="checkbox"] { display: none; }
.bet-tick {
    width: 22px; height: 22px;
    border: 2px solid var(--text3);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s ease;
    position: relative;
}
.bet-tick::after {
    content: '';
    width: 6px; height: 11px;
    border: solid white; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
    margin-top: -2px;
}
.bet-check:hover .bet-tick { border-color: var(--accent); }
.bet-check.placed .bet-tick {
    background: var(--gradient-main);
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.bet-check.placed .bet-tick::after { transform: rotate(45deg) scale(1); }

/* Bet Types Legend — Accordion */
.bet-legend {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-top: 24px;
    overflow: hidden;
}
.bet-legend-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    transition: background .2s;
}
.bet-legend-toggle:hover { background: var(--bg-glass); }
.bet-legend-toggle .bl-chevron {
    font-size: 12px;
    color: var(--text3);
    transition: transform .3s ease;
}
.bet-legend.open .bl-chevron { transform: rotate(180deg); }
.bet-legend-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0 24px;
}
.bet-legend.open .bet-legend-body {
    max-height: 1200px;
    padding: 0 24px 20px;
}
.bet-legend h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text);
}
.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    background: var(--bg-glass);
}
.legend-code {
    background: var(--gradient-main);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 42px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.legend-desc {
    font-size: 12px;
    color: var(--text2);
}
.legend-section {
    margin-bottom: 14px;
}
.legend-section h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.legend-section:last-child { margin-bottom: 0; }

/* ═══════ TOAST NOTIFICATIONS — iOS 26 LIQUID GLASS ═══════ */
#toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}
.toast {
    position: relative;
    overflow: hidden;
    /* Glass material — ultra-low opacity, heavy blur picks up bg colors */
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(52px) saturate(3) brightness(1.22);
    -webkit-backdrop-filter: blur(52px) saturate(3) brightness(1.22);
    /* Soft organic pill */
    border-radius: 22px;
    padding: 14px 24px 14px 18px;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 600;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', inherit;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-32px) scale(0.86);
    transition: opacity 0.32s ease, transform 0.52s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    max-width: 440px;
    min-width: 220px;
    /* Layered glass shadows — specular top rim is THE iOS glass signature */
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.14),
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        0 0 0 0.5px rgba(255, 255, 255, 0.12),
        0 32px 64px -8px rgba(0, 0, 0, 0.72),
        0 8px 20px rgba(0, 0, 0, 0.38);
}
/* Diagonal shimmer — light refracts across the glass surface */
.toast::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(
        148deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        transparent 58%
    );
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Type accent: colored outer glow + colored micro-border instead of hard border-left */
.toast-success {
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.14),
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        0 0 0 0.5px rgba(16, 185, 129, 0.45),
        0 32px 64px -8px rgba(0, 0, 0, 0.72),
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 48px -4px rgba(16, 185, 129, 0.5);
}
.toast-error {
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.14),
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        0 0 0 0.5px rgba(239, 68, 68, 0.45),
        0 32px 64px -8px rgba(0, 0, 0, 0.72),
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 48px -4px rgba(239, 68, 68, 0.5);
}
.toast-info {
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.14),
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        0 0 0 0.5px rgba(99, 102, 241, 0.45),
        0 32px 64px -8px rgba(0, 0, 0, 0.72),
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 48px -4px rgba(99, 102, 241, 0.5);
}

/* ═══════ LIQUID PROGRESS BAR ═══════ */
.liquid-progress {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 9998;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}
.liquid-progress.active { opacity: 1; }
.liquid-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--gradient-main);
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
    position: relative;
}
.liquid-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-80px); }
    100% { transform: translateX(80px); }
}

.prob-cell, .ht-cell { display: flex; justify-content: center; }
.probs { display: flex; gap: 4px; font-weight: 700; font-size: 11px; }
.probs.sm { font-size: 10px; gap: 3px; }
.probs span {
    min-width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.probs .cir { border: 2px solid var(--yellow); color: var(--yellow); }
.probs .cir.pending { border-color: var(--yellow); color: var(--yellow); }
.probs .cir.win { border-color: var(--green); color: var(--green); background: var(--green-glow); }
.probs .cir.lose { border-color: var(--red); color: var(--red); background: var(--red-glow); }

.pred-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pred-badge {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px;
    color: white;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
}
.pred-badge:hover { transform: scale(1.18); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.pred-badge:active { transform: scale(0.95); }
.pred-badge.pending, .pred-badge.pending-yellow, .pred-badge.pending-blue { background: var(--gradient-blue); color: #0a0a1a; }
.pred-badge.win { background: var(--gradient-green); color: #fff; box-shadow: 0 2px 10px var(--green-glow); animation: winPulse 2s ease-in-out infinite; }
.pred-badge.lose, .pred-badge.loss { background: var(--gradient-red); color: #fff; box-shadow: 0 2px 10px var(--red-glow); }
.pred-badge.refund { background: linear-gradient(135deg, #feca57, #f0932b); color: #0a0a1a; box-shadow: 0 2px 10px var(--yellow-glow); }
@keyframes winPulse {
    0%, 100% { box-shadow: 0 2px 10px var(--green-glow); }
    50% { box-shadow: 0 2px 18px var(--green-glow); }
}
.pred-cell small, .tips-cell small { font-size: 10px; color: #4a4a65; font-weight: 500; }

.odds-cell { text-align: center; color: var(--green); font-weight: 700; font-size: 12px; }
.avg-cell { text-align: center; color: var(--yellow); font-weight: 700; font-size: 12px; }

.bts-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; font-weight: 700; }
.bts-cell .yes { color: var(--green); }
.bts-cell .no { color: var(--red); }

.tips-cell { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; padding: 2px; }

.weather-cell { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--text3); }
.w-icon, .weather-icon { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: 0.7; }
.weather-icon { width: 14px; height: 14px; }
[data-theme="light"] .w-icon, [data-theme="light"] .weather-icon { filter: brightness(0.3); }

.score-cell { display: flex; justify-content: center; }
.score-wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    background: var(--bg-glass);
    border: 1px solid var(--border);
}
.score-wrap.live {
    background: linear-gradient(135deg, rgba(0,206,209,0.12), rgba(0,255,127,0.08));
    border: 2px solid rgba(0,206,209,0.5);
    border-radius: 8px;
    padding: 6px 14px;
    position: relative;
    box-shadow: 0 0 16px rgba(0,206,209,0.2), inset 0 0 8px rgba(0,206,209,0.06);
}
.score-wrap.live::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: 9px;
    background: linear-gradient(45deg, rgba(0,206,209,0.5), rgba(0,255,127,0.4), rgba(0,206,209,0.5));
    background-size: 200% 200%;
    z-index: -1;
    animation: liveBorderGlow 3s ease-in-out infinite;
    opacity: 0.6;
}
@keyframes liveBorderGlow {
    0%, 100% { background-position: 0% 50%; opacity: 0.4; }
    50% { background-position: 100% 50%; opacity: 0.8; }
}
@keyframes livePulseGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(0,206,209,0.2), inset 0 0 6px rgba(0,206,209,0.08); border-color: rgba(0,206,209,0.5); }
    50% { box-shadow: 0 0 18px rgba(0,206,209,0.4), inset 0 0 10px rgba(0,206,209,0.15); border-color: rgba(0,255,127,0.6); }
}
@keyframes liveRedPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,59,59,.8); transform: scale(1); }
    40%  { box-shadow: 0 0 0 7px rgba(255,59,59,0); transform: scale(1.15); }
    100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); transform: scale(1); }
}
.score-wrap.win { }
.score-wrap.win .sc { }
.score-wrap.lose { }
.score-wrap.lose .sc { }
.score-wrap .sc { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; display: block; text-align: center; }
.score-wrap.live .sc { color: #00ced1; font-weight: 900; text-shadow: 0 0 6px rgba(0,206,209,0.4); }
.score-wrap small.ht-score { font-size: 9px; color: var(--text3); display: block; text-align: center; margin-top: 1px; }
.score-wrap.live small.ht-score { color: rgba(0,206,209,0.8); }
.sc-pending { color: var(--text3); font-weight: 500; }

/* ═══════ IMPORT ═══════ */
.page-title {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 25px;
    margin-bottom: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
}
.page-title h1 {
    font-size: 22px; font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }

.box {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--border);
    transition: border-color 0.3s;
}
.box:hover { border-color: var(--border-accent); }
.box h2 { margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.box-desc { color: var(--text2); font-size: 13px; margin-bottom: 20px; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 13px; }

input[type="date"], input[type="month"], input[type="text"],
input[type="number"], input[type="email"], input[type="password"], select {
    width: 100%;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}
/* Dark-theme fix for <select> — prevent white browser-default bg bleed-through */
select {
    background-color: var(--bg2);
    color: var(--text);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
select option {
    background: var(--bg2);
    color: var(--text);
}
[data-theme="light"] select {
    background-color: #fff;
}
[data-theme="light"] select option {
    background: #fff;
    color: #1a1a2e;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.checkbox-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--bg-glass);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 6px;
}
.checkbox-item:hover { background: var(--border); }
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.checkbox-item span { font-weight: 500; font-size: 13px; }

.btn {
    background: var(--gradient-main);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px var(--accent-glow);
    letter-spacing: 0.01em;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.35); filter: brightness(1.05); }
.btn-success { background: var(--gradient-green); box-shadow: 0 2px 10px var(--green-glow); }
.btn-success:hover { box-shadow: 0 4px 15px var(--green-glow); }
.btn-secondary { background: var(--gradient-blue); box-shadow: 0 2px 10px var(--blue-glow); }
.btn-danger { background: var(--gradient-red); box-shadow: 0 2px 10px var(--red-glow); }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 6px 14px; font-size: 11px; border-radius: 4px; }
.logout { background: transparent; border: 1px solid var(--border); color: var(--text2); box-shadow: none; }
.logout:hover { border-color: var(--red); color: var(--red); }
.btn-row { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); box-shadow: none; }
.btn-ghost:hover { border-color: var(--border-accent); color: var(--accent); box-shadow: none; }
.btn-outline-accent { background: transparent; border: 1px dashed var(--accent); color: var(--accent); box-shadow: none; }
.btn-outline-accent:hover { background: var(--accent-glow); box-shadow: none; }

.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin: 15px 0; display: none; font-size: 13px; font-weight: 500; }
.alert.success { background: var(--green-glow); color: var(--green); border: 1px solid rgba(0,214,143,0.3); display: block; }
.alert.error { background: var(--red-glow); color: var(--red); border: 1px solid rgba(255,107,107,0.3); display: block; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-box {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    padding: 20px;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.stat-box:hover { border-color: var(--border-accent); box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.08); }
.stat-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-main);
}
.stat-box:nth-child(2)::before { background: var(--gradient-green); }
.stat-box:nth-child(3)::before { background: var(--gradient-orange); }
.stat-box:nth-child(4)::before { background: var(--gradient-red); }
.stat-number { font-size: 28px; font-weight: 800; color: var(--text); }
.stat-label { font-size: 11px; color: var(--text2); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.progress-bar { background: var(--bg-glass); border-radius: 10px; height: 24px; overflow: hidden; border: 1px solid var(--border); }
.progress-fill {
    height: 100%;
    background: var(--gradient-main);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
    transition: width 0.3s;
    border-radius: 10px;
}
.progress-text { text-align: center; margin-top: 8px; color: var(--text2); font-size: 12px; }

.setting-section { margin-bottom: 20px; }
.setting-section h3 {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-item {
    background: var(--bg-glass);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border);
}
.tag-item .remove { color: var(--red); cursor: pointer; font-weight: bold; font-size: 16px; }

/* ═══════ STATS TABLE ═══════ */
.stats-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.stats-table th {
    background: var(--bg3);
    padding: 12px 14px;
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text3);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.stats-table th:hover { color: var(--accent); }
.stats-table th.sorted-asc::after { content: ' ↑'; color: var(--accent); }
.stats-table th.sorted-desc::after { content: ' ↓'; color: var(--accent); }
.stats-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.stats-table tr:hover { background: var(--bg-glass); }
.stats-table .good { color: var(--green); font-weight: 600; }
.stats-table .bad { color: var(--red); font-weight: 600; }

/* ═══════ USERS TABLE ═══════ */
.users-table-wrap { overflow-x: auto; margin-top: 16px; }
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.users-table th {
    background: var(--bg-glass);
    padding: 10px 14px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text2);
    border-bottom: 2px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.users-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.users-table tr:hover { background: var(--bg-glass); }
.role-select {
    background-color: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.role-select:focus { outline: none; border-color: var(--accent); }

/* ═══════ SOURCE STATS CARDS ═══════ */
.source-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.source-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.source-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.3); box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.1); }
.source-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.source-card .card-title { font-size: 16px; font-weight: 700; }
.source-card .card-badge {
    min-width: 52px;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: white;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.35);
    box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.9), inset 0 1px 0 rgba(255,255,255,0.18);
}
.source-card .card-badge.forebet { background: var(--gradient-main); }
.source-card .card-badge.predictz { background: var(--gradient-blue); }
.source-card .card-badge.betwizad { background: var(--gradient-orange); }
.source-card .card-badge.ens { background: var(--gradient-green); }
.source-card .card-badge.sv { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.source-card .card-badge.s24 { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.source-card .card-badge.vb { background: linear-gradient(135deg, #00b894, #00cec9); }
.source-card .card-badge.st { background: linear-gradient(135deg, #ff7675, #d63031); }
.source-card .card-badge.venas { background: linear-gradient(135deg, #e17055, #d63031); }
.source-card .card-badge.tipsbet { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }
.source-card .card-badge.wdw { background: linear-gradient(135deg, #00cec9, #0984e3); }
.source-card .card-badge.bpeu { background: linear-gradient(135deg, #2ed573, #05c46b); }

/* Gold card for #1 ranked source */
.source-card.source-card-gold {
    border: 2px solid #f9ca24;
    background: linear-gradient(135deg, rgba(249,202,36,0.08), rgba(255,215,0,0.04));
    box-shadow: 0 0 20px rgba(249,202,36,0.15);
}
.source-card.source-card-gold:hover {
    border-color: #f0b529;
    box-shadow: 0 8px 32px rgba(249,202,36,0.25);
}

.source-card .winrate-display { font-size: 42px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.source-card .winrate-display.good { color: var(--green); }
.source-card .winrate-display.ok { color: var(--yellow); }
.source-card .winrate-display.bad { color: var(--red); }
.source-card .winrate-label { font-size: 12px; color: var(--text2); font-weight: 500; }

.source-card .card-stats { display: flex; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.source-card .card-stat { flex: 1; text-align: center; }
.source-card .card-stat-value { font-size: 18px; font-weight: 700; }
.source-card .card-stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; font-weight: 600; }

.winrate-bar { height: 6px; background: var(--bg-glass); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.winrate-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.winrate-bar-fill.good { background: var(--gradient-green); }
.winrate-bar-fill.ok { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.winrate-bar-fill.bad { background: var(--gradient-red); }

/* ═══════ AUTH ═══════ */
.auth-container { max-width: 420px; margin: 60px auto; padding: 0 20px; }
.auth-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    padding: 40px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.auth-card h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.auth-links { text-align: center; margin-top: 20px; color: var(--text2); font-size: 13px; }
.auth-links a { color: var(--accent); font-weight: 600; }

/* ═══════ FOOTER ═══════ */
.main-footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 24px 0;
    margin-top: 40px;
}
[data-theme="dark"] .main-footer { background: rgba(6,6,17,0.9); }
.footer-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text3);
    font-size: 12px;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-links {
    display: flex;
    gap: 16px;
}
.footer-links a {
    color: var(--text3);
    font-size: 12px;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--accent);
}

/* Footer Social Icons */
.footer-social {
    display: flex;
    gap: 12px;
    align-items: center;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text2);
    transition: all 0.3s ease;
}
.social-icon:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.social-icon[title="Facebook"]:hover { background: #1877F2; }
.social-icon[title="Instagram"]:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-icon[title="X (Twitter)"]:hover { background: #000; }
.social-icon[title="TikTok"]:hover { background: #010101; }

/* ═══════ LEGAL PAGES ═══════ */
.legal-page {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 32px 40px;
    border: 1px solid var(--border);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
}
.legal-page h1 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.legal-updated {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 24px;
}
.legal-page h2 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--accent2);
}
.legal-page p {
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 12px;
}
.legal-page ul {
    margin: 8px 0 16px 20px;
    font-size: 14px;
    color: var(--text2);
}
.legal-page ul li {
    margin-bottom: 6px;
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 13px;
}
.legal-table th {
    background: var(--bg-glass);
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 12px;
    color: var(--text2);
    border-bottom: 2px solid var(--border);
}
.legal-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
}
.gambling-warning {
    background: rgba(255,107,107,0.08);
    border: 1px solid rgba(255,107,107,0.3);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 16px 0;
}
.gambling-warning strong {
    display: block;
    color: var(--red);
    margin-bottom: 6px;
    font-size: 15px;
}
.gambling-warning p {
    color: var(--text);
    margin-bottom: 0;
}
.help-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 12px 0 20px;
}
.help-item {
    background: var(--bg-glass);
    padding: 14px 16px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
}
.help-item strong {
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}
.help-item p {
    font-size: 12px;
    margin-bottom: 0;
}
.help-item a {
    color: var(--accent);
}

/* ═══════ NEURON NETWORK LOADER ═══════ */
.neuron-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10,10,26,0.88);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
[data-theme="light"] .neuron-loader { background: rgba(240,242,245,0.88); }

#neuron-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.neuron-pulse-ring {
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 2px solid var(--accent, #6366f1);
    opacity: 0;
    animation: neuron-ring-expand 2s ease-out infinite;
}
.neuron-pulse-ring::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 1.5px solid var(--accent, #6366f1);
    opacity: 0;
    animation: neuron-ring-expand 2s ease-out 0.6s infinite;
}
@keyframes neuron-ring-expand {
    0%   { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}

.neuron-center-orb {
    position: relative;
    z-index: 2;
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: neuron-orb-glow 2s ease-in-out infinite;
}
@keyframes neuron-orb-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.2), 0 0 60px rgba(99,102,241,0.05); }
    50%      { box-shadow: 0 0 30px rgba(99,102,241,0.4), 0 0 80px rgba(99,102,241,0.1); }
}

/* ═══════ PERIOD NAVIGATION ═══════ */
.period-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.period-tabs {
    display: flex;
    gap: 8px;
}
.period-tab {
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text2);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}
.period-tab:hover {
    background: rgba(108,92,231,0.1);
    border-color: var(--border-accent);
    color: var(--text);
}
.period-tab.active {
    background: var(--gradient-main);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.month-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}
.month-arrow {
    padding: 8px 18px;
    border-radius: var(--radius-xs);
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--accent2);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}
.month-arrow:hover {
    background: rgba(108,92,231,0.12);
    border-color: var(--border-accent);
    color: #fff;
}
.month-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}
.month-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    min-width: 160px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1200px) {
    .matches-header { display: none; }
    .match-row > div::before {
        content: attr(data-label);
        font-size: 10px;
        color: var(--text3);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .teams-cell::before { display: none !important; }
    .import-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .source-stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .container { padding: 12px 10px; }
    .header-content {
        height: auto;
        padding: 8px 14px;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Hamburger hidden — bottom nav used instead */
    .hamburger { display: none !important; }
    
    /* Nav menu hidden on mobile — bottom nav replaces it */
    .nav-menu { display: none !important; }
    
    /* User menu visible in header — compact: theme toggle + user info */
    .user-menu {
        display: flex !important;
        gap: 6px;
        align-items: center;
        margin-left: auto;
    }
    .user-menu .lang-selector { display: flex; }
    .user-menu .theme-btn { width: 28px; height: 28px; font-size: 12px; }
    .user-menu .theme-switch { --toggle-size: 13px; }
    .user-menu .username { font-size: 11px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-menu .user-info img { width: 22px !important; height: 22px !important; }
    .user-menu .btn-sm { font-size: 10px; padding: 4px 8px; }
    
    .page-title-with-stats { flex-direction: column; text-align: center; padding: 16px; }
    .day-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .day-nav a { padding: 8px 14px; font-size: 12px; flex: 1; text-align: center; min-width: 80px; border-radius: 10px; }
    .day-nav a.today-btn { padding: 10px 18px; font-size: 13px; }
    
    /* Accordion match rows */
    .match-row {
        display: grid;
        grid-template-columns: 46px 1fr auto auto 30px;
        grid-template-rows: auto;
        gap: 4px 8px;
        padding: 10px 12px;
        cursor: pointer;
        position: relative;
        border-radius: var(--radius-xs);
        margin-bottom: 2px;
    }
    .match-row::after {
        content: '›';
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: var(--text3);
        transition: transform 0.25s;
        font-weight: 300;
    }
    .match-row.expanded::after { transform: translateY(-50%) rotate(90deg); }
    .match-row > div { padding: 0; }
    .match-row > div::before { display: none; }
    
    /* Always visible: time, teams, pred, score, bet */
    .match-time { order: 1; display: flex; align-items: center; justify-content: center; }
    .match-time .time-badge { font-size: 11px; padding: 3px 6px; }
    .teams-cell { order: 2; overflow: hidden; }
    .teams-cell .teams-line { flex-wrap: nowrap; }
    .teams-cell .team { font-size: 11px; max-width: 110px; }
    .teams-cell .team-vs { font-size: 8px; }
    .teams-cell .team.away { font-size: 10px; }
    .team-form-row { margin-top: 2px; }
    .team-form-row .form-dot { width: 13px; height: 13px; font-size: 7px; }
    .pred-cell { order: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .pred-cell .pred-badge { font-size: 11px; padding: 3px 8px; }
    .score-cell { order: 4; display: flex; align-items: center; justify-content: center; }
    .score-cell .sc { font-size: 13px; }
    .score-cell small { font-size: 9px; }
    .bet-cell { order: 5; display: flex; align-items: center; justify-content: center; }
    .bet-cell .bet-tick { width: 20px; height: 20px; }
    
    /* Hidden until expanded */
    .prob-cell, .ht-cell, .avg-cell, .bts-cell, .weather-cell, .odds-cell,
    .tips-cell {
        display: none;
        order: 10;
    }
    .match-row.expanded {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding-bottom: 12px;
    }
    .match-row.expanded .match-time { grid-column: 1; justify-content: flex-start; }
    .match-row.expanded .teams-cell { grid-column: 1 / -1; }
    .match-row.expanded .teams-cell .team { max-width: none; }
    .match-row.expanded .prob-cell,
    .match-row.expanded .ht-cell,
    .match-row.expanded .avg-cell,
    .match-row.expanded .bts-cell,
    .match-row.expanded .weather-cell,
    .match-row.expanded .odds-cell,
    .match-row.expanded .tips-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 8px;
        background: var(--bg-glass);
        border-radius: var(--radius-xs);
    }
    .match-row.expanded .prob-cell::before,
    .match-row.expanded .ht-cell::before,
    .match-row.expanded .avg-cell::before,
    .match-row.expanded .bts-cell::before,
    .match-row.expanded .weather-cell::before,
    .match-row.expanded .odds-cell::before,
    .match-row.expanded .tips-cell::before {
        content: attr(data-label);
        font-size: 10px;
        color: var(--text3);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .match-row.expanded .pred-cell { grid-column: 1; }
    .match-row.expanded .score-cell { grid-column: 1; }
    .match-row.expanded .bet-cell { grid-column: auto; }
    
    .footer-content { flex-direction: column; text-align: center; gap: 6px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-box { padding: 14px; }
    .stat-number { font-size: 22px; }
    .consensus-filter { gap: 4px; }
    .consensus-btn { padding: 6px 12px; font-size: 11px; }
    .period-tabs { flex-wrap: wrap; }
    .period-tab { padding: 8px 16px; font-size: 12px; flex: 1; text-align: center; }
    .month-nav { gap: 10px; }
    .month-arrow { padding: 6px 12px; font-size: 12px; }
    .month-label { font-size: 15px; min-width: 120px; }
    .auth-container { margin: 20px auto; padding: 0 12px; max-width: 100%; }
    .auth-card { padding: 24px 18px; }
    .auth-card h1 { font-size: 20px; margin-bottom: 20px; }
    .auth-card .form-group { margin-bottom: 12px; }
    .auth-card .form-group label { font-size: 13px; margin-bottom: 4px; }
    .auth-card .form-group input { font-size: 14px; padding: 10px 12px; }
    .auth-card .btn-full { padding: 12px; font-size: 15px; margin-top: 8px; }
    .auth-links { font-size: 12px; margin-top: 14px; }
}

/* Tiebreak superscript notation (e.g. 7⁶ instead of 7.6) */
.tb-sup { font-size: 0.65em; vertical-align: super; line-height: 0; position: relative; top: -0.2em; }

/* ═══════ PAGE LAYOUT (3-column: left widget | content | right widget) ═══════ */
.page-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 60px);
    max-width: 1500px;
    margin: 0 auto;
}
.page-layout > main {
    flex: 1;
    min-width: 0;
    order: 2;
}

/* Match pages: fill <main> when sidebars are present (no gap before widgets) */
.page-layout:has(.widget-sidebar) > main .md-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
.page-layout:not(:has(.widget-sidebar)) > main .md-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════ WIDGET SIDEBARS (inline on desktop) ═══════ */
.widget-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* wheel stays in sidebar — no page jump */
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    scroll-padding-block: 8px;
}
.widget-sidebar::-webkit-scrollbar { width: 6px; }
.widget-sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.widget-sidebar:hover::-webkit-scrollbar-thumb {
    background: var(--text3, #7f96b8);
}
/* Long lists (leagues / tournaments): scroll inside card, not the whole page */
.widget-sidebar .widget-card-body {
    overscroll-behavior: contain;
}
.widget-sidebar #widgetLeagues .widget-card-body,
.widget-sidebar #widgetLeaguesR .widget-card-body,
.widget-sidebar #widgetTennisTournamentsL .widget-card-body,
.widget-sidebar #widgetTennisTournamentsR .widget-card-body {
    max-height: min(55vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.widget-sidebar-left {
    order: 1;
    border-right: 1px solid var(--border);
}
.widget-sidebar-right {
    order: 3;
    border-left: 1px solid var(--border);
}

/* Toggle buttons & backdrop — hidden on desktop, visible on mobile */
.widget-toggle-btn { display: none; }
.widget-sidebar-backdrop { display: none; }

/* Widget card */
.widget-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
}
.widget-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-glass);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.widget-card-header .widget-icon { font-size: 16px; }
.widget-card-header .widget-collapse {
    margin-left: auto;
    font-size: 10px;
    color: var(--text3);
    transition: transform 0.2s;
}
.widget-card.collapsed .widget-card-header .widget-collapse { transform: rotate(-90deg); }
.widget-card-body {
    padding: 12px 14px;
    font-size: 13px;
}
.widget-card.collapsed .widget-card-body { display: none; }

/* ── Calendar Widget ── */
.wcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wcal-header button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.wcal-header button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.wcal-header .wcal-month { font-size: 13px; font-weight: 700; color: var(--text); }
.wcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.wcal-grid .wcal-day-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    padding: 4px 0;
    text-transform: uppercase;
}
.wcal-grid .wcal-day {
    font-size: 12px;
    padding: 6px 2px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text2);
    transition: all 0.15s;
}
.wcal-grid .wcal-day:hover { background: var(--accent); color: #fff; }
.wcal-grid .wcal-day.today { font-weight: 800; color: var(--accent); border: 1px solid var(--accent); }
.wcal-grid .wcal-day.selected { background: var(--accent); color: #fff; font-weight: 700; }
.wcal-grid .wcal-day.other-month { color: var(--text3); opacity: 0.4; }

/* ── Search Widget ── */
.wsearch-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.wsearch-input:focus { border-color: var(--accent); }
.wsearch-input::placeholder { color: var(--text3); }
.wsearch-results {
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.wsearch-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    transition: background 0.15s;
    border: 1px solid transparent;
}
.wsearch-item:hover { background: var(--bg-glass); border-color: var(--border); color: var(--text); }
.wsearch-item .wsearch-teams { font-weight: 700; display: block; margin-bottom: 2px; }
.wsearch-item .wsearch-meta { color: var(--text3); font-size: 11px; }
.wsearch-empty { text-align: center; padding: 16px; color: var(--text3); font-size: 12px; }
.wsearch-date-header { font-size: 10px; font-weight: 700; color: var(--accent); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); margin-top: 4px; }

/* ── Random Ticket Widget (compact) ── */
.wticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.wticket-row select, .wticket-row button {
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid var(--border);
}
.wticket-row select { background: var(--bg); color: var(--text); flex: 1; }
.wticket-row button {
    background: var(--gradient-main);
    color: #fff;
    border: none;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.wticket-result {
    margin-top: 8px;
    font-size: 12px;
}
.wticket-match {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.wticket-match:last-child { border-bottom: none; }
.wticket-match .wt-teams { font-weight: 600; color: var(--text); max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wticket-match .wt-tip { color: var(--accent); font-weight: 700; }
.wticket-match .wt-odds { color: var(--text3); font-size: 11px; }
.wticket-total { 
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--accent);
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

/* ── Leagues Widget ── */
.wleague-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    transition: all 0.15s;
}
.wleague-item:last-child { border-bottom: none; }
.wleague-item:hover { background: var(--bg-glass); }
.wleague-item.active { background: rgba(99,102,241,0.1); border-left: 3px solid var(--accent); }
.wleague-item.wleague-clear { justify-content: center; color: var(--red); font-weight: 600; font-size: 11px; }
.wleague-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.wleague-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wleague-count { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 20px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }

/* ── Tennis Tournaments Widget ── */
.wtour-group-label { padding: 5px 12px 3px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(99,102,241,.07); border-bottom: 1px solid var(--border); }
.wtour-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 12px; transition: all 0.15s; }
.wtour-item:last-child { border-bottom: none; }
.wtour-item:hover { background: var(--bg-glass); }
.wtour-item.active { background: rgba(99,102,241,.1); border-left: 3px solid var(--accent); }
.wtour-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wtour-count { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 20px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.wtour-group:last-child .wtour-item:last-child { border-bottom: none; }

/* ── Medium desktop: narrower sidebars ── */
@media (max-width: 1400px) and (min-width: 1201px) {
    .widget-sidebar { width: 250px; }
}

/* ── Mobile: widgets below content instead of overlay ── */
@media (max-width: 1200px) {
    .page-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
        width: 100%;
    }
    .page-layout > main {
        order: 1;
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        align-self: stretch;
    }
    .page-layout > main > .container,
    .page-layout > main .container.bets-page,
    .page-layout > main .md-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .widget-sidebar {
        position: static;
        width: 100% !important;
        max-height: none;
        overflow: visible;
        padding: 12px 8px;
        border: none;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .widget-sidebar-left { order: 2; }
    .widget-sidebar-right { order: 3; }
    .widget-sidebar .widget-card {
        flex: 1 1 280px;
        min-width: 0;
    }

    /* Hide overlay controls — no longer needed */
    .widget-toggle-btn,
    .widget-sidebar-backdrop { display: none !important; }
}

@media (max-width: 768px) {
    .widget-sidebar .widget-card { flex: 1 1 100%; }
    .widget-hide-mobile { display: none !important; }
}

/* ═══════ SCROLL-TO-TOP BUTTON ═══════ */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    margin-bottom: 100px;
    z-index: 200;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(255,255,255,0.06) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.92);
    transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
}
[data-theme="light"] .scroll-top-btn {
    background: rgba(255,255,255,0.65);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(255,255,255,0.5) inset;
    color: var(--text);
}
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.scroll-top-btn:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.85), rgba(139,92,246,0.85));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 28px rgba(59,130,246,0.35), 0 0 0 0.5px rgba(255,255,255,0.15) inset;
    transform: translateY(-3px) scale(1.05);
}
.scroll-top-btn:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.1s;
}
.scroll-top-btn svg {
    transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.scroll-top-btn:hover svg {
    transform: translateY(-2px);
}
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 140px;
        right: 16px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        z-index: 1050;
    }
}

/* ═══════════════════════════════════════════════════════
   FUTURISTIC POLISH — v2 Enhancements
   ═══════════════════════════════════════════════════════ */

/* ── Global FA-icon styling ── */
.fa-solid, .fa-regular, .fa-brands {
    line-height: 1;
    vertical-align: -0.08em;
}
/* Accent-colored section icons (headers, labels, card titles) */
h1 .fa-solid, h2 .fa-solid, h3 .fa-solid,
.widget-card-header .fa-solid,
.box h2 .fa-solid,
.page-title .fa-solid,
.setting-section h3 .fa-solid,
label .fa-solid {
    color: var(--accent);
    filter: drop-shadow(0 0 3px var(--accent-glow));
}
/* Green / red status icons keep their semantic color */
.fa-solid.fa-circle-check, .fa-solid.fa-check { color: var(--green); filter: none; }
.fa-solid.fa-xmark, .fa-solid.fa-circle-xmark, .fa-solid.fa-triangle-exclamation { color: var(--red); filter: none; }

/* ── Global custom scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Subtle content fade-in ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.container { animation: fadeInUp 0.35s ease-out; }

/* ── Enhanced card glow on hover ── */
.box:hover, .widget-card:hover, .stat-box:hover {
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.08), 0 4px 20px rgba(0,0,0,0.15);
}
.source-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.35s;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--accent-rgb), 0.06), transparent 40%);
    pointer-events: none;
}
.source-card:hover::after { opacity: 1; }

/* ── Animated gradient top-line on stat boxes ── */
.stat-box::before {
    background-size: 200% 100%;
    animation: gradientSlide 4s ease infinite;
}
@keyframes gradientSlide {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Link hover underline animation ── */
a:not(.btn):not(.nav-item):not(.day-nav a):not(.match-row a):not(.social-icon):not(.period-tab):not(.month-arrow):not(.wleague-item):not(.wtour-item):not(.wsearch-item):not(.footer-links a) {
    position: relative;
}

/* ── Chip / badge micro-enhancement ── */
.consensus-btn { backdrop-filter: blur(4px); }
.consensus-btn.active {
    box-shadow: 0 0 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ── Better input focus ring ── */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px var(--accent-glow), 0 0 12px rgba(var(--accent-rgb), 0.12);
}
textarea {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: all 0.2s;
}

/* ── Button press feedback ── */
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; }

/* ── Prediction badge shimmer on pending ── */
.pred-badge.pending::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent, rgba(var(--accent-rgb), 0.3), transparent 40%);
    animation: badgeSpin 3s linear infinite;
    z-index: -1;
}
@keyframes badgeSpin {
    to { transform: rotate(360deg); }
}

/* ── Auth card floating glow ── */
.auth-card {
    position: relative;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: -40px; left: -40px; right: -40px; bottom: -40px;
    background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.08), transparent 70%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(40px);
}

/* ── Zebra striping for tables ── */
.stats-table tbody tr:nth-child(even),
.users-table tbody tr:nth-child(even) { background: rgba(var(--accent-rgb), 0.02); }
[data-theme="light"] .stats-table tbody tr:nth-child(even),
[data-theme="light"] .users-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }

/* ── Widget card collapse animation ── */
.widget-card-body {
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    overflow: hidden;
}
.widget-card.collapsed .widget-card-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Score wrap result state colors ── */
.score-wrap.win { border-color: rgba(0,214,143,0.35); background: rgba(0,214,143,0.06); }
.score-wrap.win .sc { color: var(--green); }
.score-wrap.lose { border-color: rgba(255,107,107,0.3); background: rgba(255,107,107,0.06); }
.score-wrap.lose .sc { color: var(--red); }

/* ── Pulsing live dot ── */
@keyframes liveDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}
.live-badge::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00ced1;
    margin-right: 5px;
    animation: liveDot 1.2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(0,206,209,0.6);
}

/* ── Smooth day-nav pill transitions ── */
.day-nav a {
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}
.day-nav a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-main);
    opacity: 0;
    transition: opacity 0.25s;
    z-index: 0;
    border-radius: inherit;
}
.day-nav a:hover::before { opacity: 0.08; }
.day-nav a > * { position: relative; z-index: 1; }

/* ── Ticket FAB pulse ring ── */
@keyframes fabPulse {
    0% { box-shadow: 0 4px 16px var(--accent-glow); }
    50% { box-shadow: 0 4px 28px rgba(var(--accent-rgb), 0.4), 0 0 0 8px rgba(var(--accent-rgb), 0.08); }
    100% { box-shadow: 0 4px 16px var(--accent-glow); }
}

/* ── Selection color ── */
::selection { background: rgba(var(--accent-rgb), 0.3); color: #fff; }
::-moz-selection { background: rgba(var(--accent-rgb), 0.3); color: #fff; }

/* ── Print media — clean output ── */
@media print {
    .main-header, .main-footer, .widget-sidebar,
    .scroll-top-btn, .shooting-star, .neuron-loader,
    .day-nav, .consensus-filter { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .container { max-width: 100% !important; }
    .match-row { break-inside: avoid; }
}

/* ====== BETS AND USER TICKETS ====== */

/* (note: do not put raw <style> tags inside this CSS file) */
/* ═══════════════════════════════════════════════ */
/*        BETS PAGE 2026 DESIGN SYSTEM            */
/* ═══════════════════════════════════════════════ */

/* ── Header ── */
.bp-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
}
.bp-title {
    font-size: 24px; font-weight: 800; color: var(--text);
    display: flex; align-items: center; gap: 10px; margin: 0;
}
.bp-clear-btn {
    background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.05));
    border: 1.5px solid rgba(239,68,68,0.3); color: var(--red);
    padding: 8px 18px; border-radius: var(--radius-sm); font-weight: 700;
    font-size: 13px; cursor: pointer; transition: all .25s;
    display: flex; align-items: center; gap: 6px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.04);
}
.bp-clear-btn:hover {
    background: linear-gradient(135deg, rgba(239,68,68,0.85), rgba(220,38,38,0.75));
    color: #fff; transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(239,68,68,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
    border-color: transparent;
}

/* ── Stats Dashboard ── */
.bp-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 24px;
}
.bp-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border-radius: var(--radius);
    background: var(--card-bg); border: 1px solid var(--border);
    transition: all .25s;
}
.bp-stat:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.bp-stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; flex-shrink: 0;
}
.bp-stat-info { display: flex; flex-direction: column; }
.bp-stat-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.bp-stat-lbl { font-size: 12px; color: var(--text3); margin-top: 2px; }
.bp-stat-gauge { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.bp-gauge { position: relative; width: 68px; height: 68px; }
.bp-gauge svg { width: 100%; height: 100%; }
.bp-gauge-val {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 16px; font-weight: 800; color: var(--green);
}

/* ── Tabs ── */
.bp-tabs {
    display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap;
    padding: 4px; background: rgba(255,255,255,0.04); border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.10);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.bp-tab {
    padding: 10px 18px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03); color: var(--text2); font-weight: 600;
    font-size: 13px; cursor: pointer; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; gap: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.bp-tab:hover {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.14), rgba(59, 130, 246, 0.06));
    border-color: rgba(125, 211, 252, 0.34); color: var(--text);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255,255,255,0.12);
    transform: translateY(-1px);
}
.bp-tab.active {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.24), rgba(59, 130, 246, 0.14));
    border-color: rgba(125, 211, 252, 0.56);
    color: var(--text);
    box-shadow: 0 8px 22px rgba(56, 189, 248, 0.20), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(0,0,0,0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.bp-tab-count {
    background: rgba(255,255,255,.18); padding: 1px 7px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
}
.bp-tab:not(.active) .bp-tab-count { background: rgba(125, 211, 252, 0.12); }
.bp-tab.active .bp-tab-count { background: rgba(255,255,255,0.28); border: 1px solid rgba(125, 211, 252, 0.55); }

/* ── Section Head ── */
.bp-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.bp-section-head h2 {
    font-size: 16px; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.bp-section-record { display: flex; align-items: center; gap: 10px; }
.bp-record-bar {
    width: 80px; height: 6px; border-radius: 3px;
    background: rgba(239,68,68,.2); overflow: hidden;
}
.bp-bar-fill {
    display: block; height: 100%; border-radius: 3px;
    background: var(--gradient-green); transition: width .6s ease;
}
.bp-record-text { font-size: 12px; color: var(--text2); font-weight: 600; }
.bet-section { margin-bottom: 28px; }

/* ── Empty State ── */
.bp-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 20px; color: var(--text3);
}
.bp-empty-icon { font-size: 36px; opacity: .4; margin-bottom: 8px; }

/* ── Card List ── */
.bp-card-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Bet Card ── */
.bp-card {
    display: flex; border-radius: var(--radius); overflow: hidden;
    background: var(--card-bg); border: 1px solid var(--border);
    transition: all .25s; animation: bpCardIn .4s ease both;
}
.bp-card:hover { transform: translateX(4px); box-shadow: 0 4px 20px rgba(0,0,0,.08); }
@keyframes bpCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.bp-card-accent { width: 4px; flex-shrink: 0; }
.bp-card.win .bp-card-accent { background: var(--green); }
.bp-card.loss .bp-card-accent { background: var(--red); }
.bp-card.pending .bp-card-accent { background: var(--yellow); }
.bp-card.refund .bp-card-accent { background: var(--text3); }
.bp-card-body { flex: 1; padding: 12px 16px; min-width: 0; }
a.bp-card-link { display: block; text-decoration: none; color: inherit; }
a.bp-card-link:hover { background: rgba(255,255,255,.03); }
.bp-card { position: relative; }
.bp-remove-float { position: absolute; bottom: 10px; right: 12px; z-index: 2; }
.bp-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-card-top { margin-bottom: 6px; }
.bp-card-sport { font-size: 14px; flex-shrink: 0; }
.bp-card-date { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 4px; }
.bp-card-actions { display: flex; align-items: center; gap: 8px; }
.bp-card-odds {
    font-size: 13px; font-weight: 800; color: var(--green);
    background: rgba(16,185,129,.1); padding: 2px 8px; border-radius: 6px;
}
.bp-card-teams { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; justify-content: center; }
.bp-team-home {
    font-weight: 700; font-size: 14px; color: var(--text);
    text-align: right; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-team-away {
    font-weight: 600; font-size: 14px; color: var(--text2);
    text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-card-score {
    font-family: 'Courier New', monospace; font-weight: 800; font-size: 15px;
    color: var(--text); min-width: 50px; text-align: center; flex-shrink: 0;
}
.bp-score-pending { color: var(--text3); font-weight: 600; font-family: inherit; }
.bp-card-sets { text-align: center; font-size: 11px; color: var(--text3); margin-bottom: 4px; letter-spacing: .5px; }
.bp-card-bottom { margin-top: 2px; }

/* ── Tip Chip ── */
.bp-tip-chip {
    display: inline-flex; align-items: center; padding: 4px 14px;
    border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap;
    background: var(--gradient-blue); color: #0a0a1a;
}
.bp-tip-chip.win { background: var(--gradient-green); color: #fff; }
.bp-tip-chip.loss { background: var(--gradient-red); color: #fff; }
.bp-tip-chip.refund { background: linear-gradient(135deg, #feca57, #f0932b); color: #0a0a1a; }

/* ── Result Chip ── */
.bp-result-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.bp-result-chip.win { background: rgba(16,185,129,.12); color: #10b981; }
.bp-result-chip.loss { background: rgba(239,68,68,.12); color: #ef4444; }
.bp-result-chip.pending { background: rgba(245,158,11,.12); color: #f59e0b; }
.bp-result-chip.refund { background: rgba(107,114,128,.12); color: #9ca3af; }
.bp-result-chip.sm { padding: 2px 6px; font-size: 10px; }

/* ── Edit Button ── */
.bp-edit-btn {
    background: none; border: none; color: var(--text3); cursor: pointer;
    padding: 6px; border-radius: 6px; font-size: 13px; transition: all .2s;
}
.bp-edit-btn:hover { color: var(--accent); background: rgba(59,130,246,.1); transform: scale(1.15); }

/* ── Remove Button ── */
.bp-remove-btn {
    background: none; border: none; color: var(--text3); cursor: pointer;
    padding: 6px; border-radius: 6px; font-size: 13px; transition: all .2s;
}
.bp-remove-btn:hover { color: var(--red); background: rgba(239,68,68,.1); transform: scale(1.15); }

/* ── Live Score ── */
.live-score-anim { color: var(--green); animation: livePulse 1.5s ease-in-out infinite; }
.live-badge {
    display: inline-block; background: var(--red); color: #fff; font-size: 9px;
    font-weight: 800; padding: 1px 5px; border-radius: 4px; margin-left: 4px;
    animation: livePulse 1.5s ease-in-out infinite; vertical-align: middle;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Ticket Cards ── */
.bp-ticket {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 12px; overflow: hidden; background: var(--card-bg); transition: all .25s;
}
.bp-ticket:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.bp-ticket.win { border-left: 4px solid var(--green); }
.bp-ticket.loss { border-left: 4px solid var(--red); }
.bp-ticket.pending { border-left: 4px solid var(--yellow); }
.bp-ticket.refund { border-left: 4px solid var(--text3); }
.bp-ticket-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: rgba(var(--accent-rgb,99,102,241),.03);
    border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px;
}
.bp-ticket-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-ticket-name { font-weight: 800; font-size: 15px; color: var(--text); }
.bp-ticket-date { font-size: 11px; color: var(--text3); }
.bp-ticket-tag { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.bp-ticket-tag.random { background: rgba(168,85,247,.12); color: #a855f7; }
.bp-ticket-tag.whatsapp { background: rgba(37,211,102,.12); color: #25d366; }
.bp-ticket-tag.shared { background: rgba(59,130,246,.12); color: var(--accent); }
.bp-ticket-actions { display: flex; align-items: center; gap: 10px; }

/* ── Share Button ── */
.bp-share-btn {
    background: none; border: none; color: var(--text3); cursor: pointer;
    padding: 6px; border-radius: 6px; font-size: 13px; transition: all .2s;
}
.bp-share-btn:hover { color: #25d366; background: rgba(37,211,102,.1); transform: scale(1.15); }
/* ── Share toast ── */
#bp-share-toast {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(22,163,74,.95);
    color: #fff; padding: 11px 26px; border-radius: 40px;
    font-weight: 700; font-size: 14px; z-index: 9999;
    opacity: 0; pointer-events: none; white-space: nowrap;
    box-shadow: 0 6px 24px rgba(22,163,74,.35);
    transition: opacity .28s ease, transform .28s cubic-bezier(.175,.885,.32,1.275);
}
#bp-share-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.bp-ticket-body { padding: 8px 18px; cursor: default; }
.bp-ticket-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb,99,102,241),.06);
    font-size: 13px; flex-wrap: wrap;
}
.bp-ticket-item:last-child { border-bottom: none; }
.bp-ticket-item.win .bp-ti-match { color: var(--green); }
.bp-ticket-item.loss .bp-ti-match { color: var(--red); }
.bp-ti-sport { font-size: 16px; flex-shrink: 0; }
.bp-ti-time { font-size: 11px; color: var(--text3); flex-shrink: 0; font-weight: 600; white-space: nowrap; }
.bp-ti-match { flex: 1; color: var(--text); min-width: 140px; font-weight: 500; }
.bp-ti-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; background: var(--bg-glass); border: 1px solid var(--border); white-space: nowrap; text-decoration: none; color: var(--accent); flex-shrink: 0; transition: all .2s ease; cursor: pointer; }
.bp-ti-link .chip-label { color: var(--text3); font-weight: 500; }
.bp-ti-link .chip-icon { font-size: 11px; color: var(--accent); }
.bp-ti-link:hover { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.bp-ti-link:active { opacity: 0.85; }
.bp-ti-tip { color: var(--accent); font-weight: 700; font-size: 12px; }
.bp-ti-score {
    font-family: 'Courier New', monospace; font-weight: 700; font-size: 12px;
    min-width: 36px; text-align: center;
}

/* ── Light Theme ── */
[data-theme="light"] .bp-stat { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
[data-theme="light"] .bp-card { box-shadow: 0 1px 4px rgba(0,0,0,.04); }
[data-theme="light"] .bp-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
[data-theme="light"] .bp-ticket { box-shadow: 0 1px 4px rgba(0,0,0,.04); }
[data-theme="light"] .bp-tabs { box-shadow: 0 1px 4px rgba(0,0,0,.04); background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .bp-tab { background: rgba(255,255,255,0.4); border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .bp-tab:hover { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); }
[data-theme="light"] .bp-tab.active { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.06)); border-color: rgba(59,130,246,0.3); box-shadow: 0 4px 16px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.6); }
[data-theme="light"] .bp-clear-btn { background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.03)); border-color: rgba(239,68,68,0.2); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .bp-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bp-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .bp-stat { padding: 14px 12px; gap: 10px; }
    .bp-stat-num { font-size: 18px; }
    .bp-stat-icon { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
    .bp-card-teams { flex-direction: column; gap: 2px; }
    .bp-team-home, .bp-team-away { text-align: center; font-size: 13px; }
    .bp-card-score { font-size: 14px; }
    .bp-tabs { gap: 4px; padding: 3px; }
    .bp-tab { padding: 8px 12px; font-size: 12px; }
    .bp-ticket-head { flex-direction: column; align-items: flex-start; }
    .bp-ticket-item { font-size: 12px; gap: 6px; }
    .bp-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .bp-header { flex-direction: column; align-items: flex-start; }
    .bp-ticket.win,
    .bp-ticket.loss,
    .bp-ticket.pending,
    .bp-ticket.refund { border-left-width: 2px; }
}

/* end bets styles */

/* ══════════════════════════════════════════════
   GLOBAL PAGE HERO — shared across all pages
   ══════════════════════════════════════════════ */
.page-hero {
    position: relative; overflow: visible; border-radius: 0;
    margin-bottom: 22px; padding: 0 4px 8px;
    background: none; box-shadow: none;
}
[data-theme="dark"] .page-hero {
    background: none; box-shadow: none;
}
.page-hero::before { display: none; }
.page-hero-body {
    position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.page-hero-icon {
    width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #4c1d95;
    background: rgba(99,102,241,.12); backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,.2);
    box-shadow: 0 4px 16px rgba(99,102,241,.12);
}
[data-theme="dark"] .page-hero-icon {
    color: #fff;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.page-hero-text { flex: 1; min-width: 0; }
.page-hero-title {
    font-size: 22px; font-weight: 900; color: var(--text); margin: 0 0 3px;
    letter-spacing: -.3px; line-height: 1.2;
}
.page-hero-sub {
    font-size: 13px; color: var(--text3); margin: 0; line-height: 1.4;
}
[data-theme="dark"] .page-hero-title { color: var(--text); }
[data-theme="dark"] .page-hero-sub { color: var(--text3); }
.page-hero-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.page-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    background: rgba(99,102,241,.12); color: #312e81;
    border: 1px solid rgba(99,102,241,.22); cursor: pointer;
    transition: all .22s; text-decoration: none;
}
[data-theme="dark"] .page-hero-btn {
    background: rgba(255,255,255,.15); color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(6px);
}
.page-hero-btn:hover {
    background: rgba(99,102,241,.2); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99,102,241,.18);
}
[data-theme="dark"] .page-hero-btn:hover {
    background: rgba(255,255,255,.25);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.page-hero-btn.primary {
    background: #6366f1; color: #fff;
    border-color: transparent;
}
[data-theme="dark"] .page-hero-btn.primary {
    background: rgba(255,255,255,.9); color: #312e81;
}
.page-hero-btn.primary:hover {
    background: #4f46e5; box-shadow: 0 4px 18px rgba(99,102,241,.3);
}
[data-theme="dark"] .page-hero-btn.primary:hover {
    background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
/* Page hero stat pills */
.page-hero-stats {
    display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; position: relative;
}
.page-hero-stat { display: flex; flex-direction: column; }
.page-hero-stat .ph-val {
    font-size: 20px; font-weight: 900; color: #312e81; line-height: 1.1;
}
.page-hero-stat .ph-lbl {
    font-size: 11px; color: #6d6aa0; text-transform: uppercase;
    letter-spacing: .8px; margin-top: 2px; font-weight: 600;
}
[data-theme="dark"] .page-hero-stat .ph-val { color: #fff; }
[data-theme="dark"] .page-hero-stat .ph-lbl { color: rgba(255,255,255,.5); }
/* Responsive */
@media (max-width: 600px) {
    .page-hero { padding: 0 2px 6px; }
    .page-hero-title { font-size: 18px; }
    .page-hero-icon { width: 42px; height: 42px; font-size: 18px; }
    .page-hero-stats { gap: 14px; }
    .page-hero-stat .ph-val { font-size: 16px; }
}

/* ══════════════════════════════════════════════
   UPGRADED AUTH PAGES (login / register)
   ══════════════════════════════════════════════ */
.auth-page-wrap {
    min-height: calc(100vh - 140px);
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px;
    position: relative;
}
.auth-page-wrap::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(99,102,241,.08), transparent 70%);
}
.auth-page-wrap .auth-container {
    position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0; padding: 0;
}
.auth-card-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 28px 32px 24px; text-align: center;
    position: relative; overflow: hidden;
}
.auth-card-header::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(139,92,246,.3), transparent);
}
.auth-card-header .auth-icon {
    width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    font-size: 24px; color: #fff; position: relative;
    box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.auth-card-header h1 {
    margin: 0 0 4px; font-size: 22px; font-weight: 900; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.2);
    background: none; -webkit-text-fill-color: #fff;
}
.auth-card-header .auth-header-sub {
    font-size: 13px; color: rgba(255,255,255,.6); margin: 0;
}
.auth-card-body {
    padding: 28px 32px 24px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-top: none; border-radius: 0 0 var(--radius) var(--radius);
}
[data-theme="light"] .auth-card-body {
    background: #fff; border-color: rgba(0,0,0,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
@media (max-width: 480px) {
    .auth-card-header { padding: 22px 20px 18px; }
    .auth-card-body { padding: 20px 20px 18px; }
}


/* ══════════════════════════════════════════════════════════════════
   MODERN CSS 2024 ENHANCEMENTS
   @container  |  @starting-style  |  color-mix()  |  View Transitions
   CSS Nesting  |  Skeleton Loading  |  Alpine.js support
   ══════════════════════════════════════════════════════════════════ */

/* ─── CSS View Transitions API ─── */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes vt-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in;  }

/* ─── @starting-style — entry animations for overlays (CSS 2023) ─── */
.toast {
    transition: opacity 0.28s ease, transform 0.28s ease;
}
@starting-style {
    .toast { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

/* ─── Scroll Reveal Animation (JS IntersectionObserver powered) ─── */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1),
                transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ─── Container Queries — responsive match rows (CSS 2022) ─── */
@container matches (max-width: 680px) {
    .matches-header { display: none; }
    .match-row {
        grid-template-columns: 50px 1fr 90px 70px;
        gap: 4px;
        padding: 10px 12px;
    }
}
@container matches (max-width: 440px) {
    .match-row { grid-template-columns: 44px 1fr 80px; }
}

/* ─── Skeleton Loading ─── */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.9; }
}
.skeleton {
    background: color-mix(in srgb, var(--border) 70%, var(--bg-card));
    border-radius: var(--radius-xs);
    animation: skeleton-pulse 1.6s ease-in-out infinite;
    display: inline-block;
}
.skeleton-row {
    display: flex; gap: 10px; padding: 12px 16px; align-items: center;
    border-bottom: 1px solid var(--border);
}
.skeleton-text { height: 12px; border-radius: 6px; }
.skeleton-circle { border-radius: 50%; }

/* ─── Animated gradient via @property ─── */
.btn-gradient-animated {
    background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6, #6366f1);
    transition: --gradient-angle 0.8s ease, box-shadow 0.2s;
}
.btn-gradient-animated:hover {
    --gradient-angle: 225deg;
    box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}

/* ─── color-mix() enhancements ─── */
input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.source-card:hover,
.widget-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ─── Native CSS Nesting (CSS 2023) ─── */
.page-title-with-stats {
    & h1 { font-size: clamp(16px, 2.5vw, 22px); }
    & .stat-mini:hover { transform: scale(1.04); transition: transform 0.15s; }
}
.day-nav a:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
    color: var(--accent);
}
.match-row {
    &.win-row  { background: var(--win-bg); }
    &.lose-row { background: var(--lose-bg); }
    &.live-row { background: linear-gradient(90deg, color-mix(in srgb, #00ced1 6%, transparent), transparent); }
    &.consensus-highlight { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent); }
}

/* ─── Fluid typography with clamp() ─── */
h1 { font-size: clamp(18px, 3vw, 28px); }
h2 { font-size: clamp(15px, 2.4vw, 22px); }
h3 { font-size: clamp(13px, 2vw, 18px); }

/* ─── Light mode: stronger card definition ─── */
[data-theme="light"] .matches-container { box-shadow: 0 1px 1px rgba(12,20,39,0.03), 0 4px 16px rgba(12,20,39,0.07); }
[data-theme="light"] .source-card      { box-shadow: 0 1px 3px rgba(12,20,39,0.04), 0 6px 20px rgba(12,20,39,0.06); }
[data-theme="light"] .widget-card      { box-shadow: 0 1px 3px rgba(12,20,39,0.04), 0 4px 16px rgba(12,20,39,0.06); }
[data-theme="light"] .page-title-with-stats { box-shadow: 0 1px 3px rgba(12,20,39,0.04); }

/* ─── Alpine.js: hide until initialized ─── */
[x-cloak] { display: none !important; }

/* ─── Scroll padding for fixed header ─── */
html { scroll-padding-top: 70px; }

/* ─── Print styles ─── */
@media print {
    .main-header, .main-footer, .widget-sidebar, .ticket-fab,
    .day-nav, .consensus-filter, .hamburger { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .matches-container { border: 1px solid #ccc; box-shadow: none; }
    .match-row { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════
   2026 TECH REFRESH — shared polish layer for football + tennis
   Applies globally so both index.php and tennis.php stay in sync.
   ══════════════════════════════════════════════════════════ */

/* Match cards (football .match-card + tennis .t-match-card): tactile lift on hover */
.match-card, .t-match-card {
    transition: transform .25s cubic-bezier(0.4,0,0.2,1), box-shadow .25s cubic-bezier(0.4,0,0.2,1), border-color .25s ease;
}
.match-card:hover, .t-match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.10), 0 2px 8px rgba(12,20,39,0.06);
}
[data-theme="dark"] .match-card:hover, [data-theme="dark"] .t-match-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb),0.12);
}
@media (prefers-reduced-motion: reduce) {
    .match-card, .t-match-card, .match-card:hover, .t-match-card:hover { transform: none; transition: border-color .2s ease; }
}
/* Live cards get a slow breathing glow ring instead of a static inset shadow */
.match-card.live-card, .t-match-card.live-card {
    animation: liveCardGlow 3s ease-in-out infinite;
}
@keyframes liveCardGlow {
    0%, 100% { box-shadow: inset 0 0 20px rgba(108,92,231,0.06), 0 0 0 0 rgba(0,206,209,0); }
    50%      { box-shadow: inset 0 0 20px rgba(108,92,231,0.10), 0 0 14px 0 rgba(0,206,209,0.14); }
}

/* Hero title — subtle animated gradient accent bar under the H1 for a branded, "tech" feel */
.page-hero-title { position: relative; display: inline-block; padding-bottom: 8px; }
.page-hero-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent2, #8b5cf6), transparent);
    background-size: 200% 100%;
    animation: heroBarSlide 3.5s ease-in-out infinite;
}
@keyframes heroBarSlide {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .page-hero-title::after { animation: none; }
}

/* Chips / pill items — consistent sheen sweep + micro-lift (mc-chip, tmc-chip, tw-item, fs-badge) */
.mc-chip, .tmc-chip, .tw-item, .filter-stats-bar .fs-badge {
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.mc-chip:hover, .tmc-chip:hover, .tw-item:hover, .filter-stats-bar .fs-badge:hover {
    transform: translateY(-1px);
    border-color: var(--border-accent);
}

/* Filter Stats bar + Tournaments widget — glass finish to match cards/buttons */
.filter-stats-bar, .tw-widget {
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

/* Random Ticket "Generate" / promo CTA buttons — subtle glow pulse on focus/hover for a more tactile 2026 feel */
.promo-cta:hover, .page-hero-btn.primary:hover {
    box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.35);
}