/* Footlytics editorial UI. Shared tokens cover every routed view. */
:root {
  --bg-main:#f4f6fa; --bg-sidebar:#fff; --bg-card:#fff; --bg-card-hover:#f0f3f9;
  --bg-card-elevated:#eef2f8; --bg-input:#f4f6fa; --bg-glass:rgba(255,255,255,.96);
  --bg-surface:var(--bg-input); --surface-card:var(--bg-card);
  --text-primary:#182338; --text-secondary:#516079; --text-muted:#62718a; --text-dimmed:#6b7890;
  --accent-primary:#315bd6; --accent-primary-hover:#2448b7; --accent-secondary:#7761c8;
  --accent-emerald:#315bd6; --accent-rgb:49,91,214; --text-accent:var(--accent-primary);
  --accent-tag-bg:#eaf0ff; --accent-glow:transparent; --accent-glow-subtle:#f0f4ff;
  --border-subtle:#e3e8f0; --border-light:#ccd5e3; --border-card:#e3e8f0; --border-focus:#315bd6;
  --icon-neutral:#62718a; --icon-active:var(--accent-primary); --icon-hover:var(--text-primary);
  --shadow-sm:0 2px 5px rgba(24,35,56,.03); --shadow-md:0 8px 25px rgba(24,35,56,.06);
  --shadow-lg:0 14px 45px rgba(24,35,56,.12); --shadow-glow:none; --shadow-card:0 2px 4px rgba(24,35,56,.02);
  --sidebar-width:226px; --topnav-height:76px; --radius-lg:12px; --radius-xl:16px;
  --status-win:#177653; --status-draw:#92620d; --status-loss:#c43e51; --status-info:#2660b2;
}
:root[data-theme="dark"] {
  --bg-main:#10141d; --bg-sidebar:#151a25; --bg-card:#1b2230; --bg-card-hover:#222c3d;
  --bg-card-elevated:#252f40; --bg-input:#171e2b; --bg-glass:rgba(27,34,48,.96);
  --text-primary:#edf1f8; --text-secondary:#b3bfd2; --text-muted:#96a5bd; --text-dimmed:#93a1b7;
  --accent-primary:#9bb6ff; --accent-primary-hover:#bed0ff; --accent-secondary:#b3a3f0;
  --accent-emerald:#9bb6ff; --accent-rgb:155,182,255; --accent-tag-bg:#293754; --accent-glow-subtle:#202c44;
  --border-subtle:#2b3546; --border-light:#3e4c63; --border-card:#2b3546; --border-focus:#9bb6ff;
  --icon-neutral:#a4b2c9; --status-win:#70ceaa; --status-draw:#ebc479; --status-loss:#f38e9d; --status-info:#96baff;
  --shadow-card:none; --shadow-lg:0 16px 45px rgba(0,0,0,.3);
}
body { font-size:14px; }
button,input,select { font-family:inherit; }
button,a,input,select,[tabindex] { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent-primary); outline-offset:3px; }
#main-wrapper { min-width:0; }
#main-content { padding:32px 36px; }
.content-inner { max-width:1320px; gap:20px; }
#sidebar { padding:26px 14px 16px; }
.brand-logo { gap:9px; padding:0 6px 26px; margin-bottom:20px; }
.brand-logo-img { display:none; }
.brand-logo::before { content:'f'; display:grid; place-items:center; flex:none; width:34px; height:38px; border-radius:10px; background:var(--accent-primary); color:var(--bg-sidebar); font-size:29px; font-weight:800; font-style:italic; }
.brand-wordmark { font-size:22px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); }
.brand-wordmark span { display:block; margin-top:2px; font-size:8px; font-weight:600; letter-spacing:1.5px; color:var(--text-muted); }
.nav-link { min-height:42px; font-size:12px; color:var(--text-secondary); border-radius:8px; padding:10px 12px; }
.nav-link:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.nav-link.active,.nav-link.active:hover { background:var(--accent-tag-bg); color:var(--accent-primary); box-shadow:none; }
.nav-link.active .fl-icon { color:var(--accent-primary); }
.nav-link .fl-icon { width:19px; height:19px; }
.nav-badge { background:var(--accent-tag-bg) !important; color:var(--accent-primary) !important; }
.nav-section-title { margin-top:16px; font-size:10px; letter-spacing:1.6px; }
.sidebar-upgrade-card { display:none; }
.sidebar-footer { margin-top:16px; border-top:1px solid var(--border-subtle); padding-top:18px; }
.user-avatar-box,.user-chip-avatar { background:var(--bg-card-elevated); color:var(--text-secondary); box-shadow:none; border:1px solid var(--border-subtle); }
#topnav { background:var(--bg-sidebar); padding:0 36px; }
.search-container { max-width:430px; }
.search-input,.search-input:focus { background:var(--bg-input); border-color:var(--border-subtle); box-shadow:none; height:42px; }
.search-shortcut { background:var(--bg-card); color:var(--text-muted); border-color:var(--border-subtle); }
.topnav-actions { gap:16px; }
.user-chip { background:transparent; border:0; }
.user-chip-plan { color:var(--text-muted); }
.notification-dot { display:none; }
.theme-switch { display:flex; padding:4px; gap:3px; background:var(--bg-input); border:1px solid var(--border-subtle); border-radius:10px; }
.theme-switch button { display:flex; gap:6px; align-items:center; justify-content:center; min-height:34px; padding:4px 10px; background:none; border:0; border-radius:7px; color:var(--text-muted); cursor:pointer; font-size:14px; }
.theme-switch button span { font-size:11px; font-weight:600; }
.theme-switch button[aria-pressed="true"] { color:var(--text-primary); background:var(--bg-card); box-shadow:var(--shadow-sm); }
.workspace-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 4px; }
.eyebrow { color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:2px; margin-bottom:8px; }
.workspace-heading h1 { font-size:30px; line-height:1.25; letter-spacing:-1.1px; font-weight:800; }
.workspace-heading h1 span { color:var(--accent-primary); }
.workspace-heading p { color:var(--text-secondary); font-size:13px; margin-top:8px; }
.data-mode-bar { background:transparent !important; border:0 !important; border-bottom:1px solid var(--border-subtle) !important; border-radius:0 !important; padding:0 0 16px !important; margin:0 !important; gap:12px; flex-wrap:wrap; }
.data-mode-bar>div:first-child { flex-wrap:wrap; }
.data-mode-bar>div:first-child>span:last-child { display:none; }
.hero-match-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-left:4px solid var(--accent-primary); box-shadow:var(--shadow-card); margin-bottom:0 !important; padding:22px 24px !important; }
.hero-match-card::before,.hero-match-card::after { display:none; }
.hero-match-title { color:var(--text-primary); font-size:23px !important; letter-spacing:-.7px; line-height:1.35; }
.hero-badge-tag { background:var(--accent-tag-bg) !important; color:var(--accent-primary) !important; border:0; font-size:9px !important; letter-spacing:1px; }
.hero-match-meta { flex-wrap:wrap; }
.fl-btn { min-height:38px; border-radius:8px; font-size:12px; }
.fl-btn-primary,.fl-btn-primary:hover,.upgrade-btn { background:var(--accent-primary); color:var(--bg-sidebar); box-shadow:none; }
.fl-btn-secondary,.fl-btn-secondary:hover { background:var(--bg-card); color:var(--text-primary); border-color:var(--border-light); box-shadow:none; }
.fl-btn-icon,.fl-btn-icon:hover { background:var(--bg-card); color:var(--text-secondary); box-shadow:none; }
.dashboard-controls { background:transparent !important; border:0 !important; padding:6px 0 0 !important; margin-bottom:0 !important; }
.dashboard-controls>div:first-child { gap:16px !important; }
.dashboard-controls .fl-btn-primary { background:var(--accent-tag-bg); color:var(--accent-primary); border:1px solid transparent; }
.dashboard-controls .fl-btn-secondary { background:transparent; border:1px solid transparent; color:var(--text-secondary); }
.dashboard-controls input { min-height:40px; }
.league-tabs { padding:10px 0 !important; border-top:1px solid var(--border-subtle); }
.league-tab-btn { background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border-subtle); box-shadow:none; border-radius:7px; padding:8px 12px; font-size:11px; flex-shrink:0; }
.league-tab-btn.active,.league-tab-btn:hover { background:var(--accent-tag-bg); color:var(--accent-primary); border-color:var(--border-light); box-shadow:none; }
.matches-table-card { background:var(--bg-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); border-radius:12px; overflow:hidden; margin-bottom:18px !important; }
.matches-date-header { background:var(--bg-card-hover) !important; padding:15px 18px !important; }
.match-row { min-height:82px; padding:16px 18px !important; gap:14px; }
.match-row:hover { background:var(--bg-card-hover); }
.match-row:last-child { border-bottom:0 !important; }
.match-time-col { width:110px !important; flex-shrink:0; }
.match-teams-col { min-width:0; }
.team-mini-logo { background:var(--bg-card-elevated) !important; box-shadow:none; }
.odds-btn { background:var(--bg-card-hover); color:var(--text-primary); border-color:var(--border-subtle); box-shadow:none; }
.odds-btn:hover,.odds-btn.best { background:var(--accent-tag-bg); border-color:var(--border-light); color:var(--accent-primary); box-shadow:none; }
.fl-card,.fl-card:hover { box-shadow:var(--shadow-card); border-color:var(--border-subtle); }
.fl-toast { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-lg); }
.notification-dropdown,.search-results-dropdown { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-lg); }
.form-w,.form-d,.form-l { color:#fff; }
.profile-header-card { background:var(--bg-card); flex-wrap:wrap; gap:24px; box-shadow:var(--shadow-card); }
.profile-main-meta { min-width:0; flex:1 1 320px; }
.profile-text-group { min-width:0; }
.profile-text-group>div:first-child { flex-wrap:wrap; }
.profile-header-card>div:last-child { flex-wrap:wrap; max-width:100%; }
.profile-header-card select { max-width:100%; }
.profile-rating-badge { color:var(--bg-sidebar); box-shadow:none; }
.profile-avatar-circle,.match-team-logo { box-shadow:none; }
.faceoff-crest-circle { box-shadow:none; background:var(--bg-card-elevated) !important; }
.hero-content>div:last-child>div:nth-child(2) { gap:10px; flex-wrap:wrap; }
:root[data-theme="light"] [style*="color: #FCD34D"] { color:#8a6114 !important; }
:root[data-theme="light"] [style*="background: rgba(0,0,0,0.2)"] { background:var(--bg-card-hover) !important; }
.mini-dot.w,.mini-dot.d,.mini-dot.l { color:#fff; }
.ai-header-card,.ai-hero-card,.match-header-card,.ai-prediction-card { background:var(--bg-card); box-shadow:var(--shadow-card); }
.mobile-menu-toggle,.sidebar-scrim { display:none; }
select,input { color-scheme:inherit; }
:root[data-theme="light"] [style*="color: #60A5FA"],:root[data-theme="light"] [style*="color: #94A3B8"] { color:#526da8 !important; }
@media(min-width:993px) and (max-width:1250px) { .match-odds-group { display:none !important; } .hero-content { gap:16px !important; } }
@media(max-width:992px) {
  :root { --sidebar-width:76px; }
  #sidebar { padding:24px 10px 12px; }
  .brand-wordmark { display:none; }
  .brand-logo { padding:0 0 22px; }
  .brand-logo::before { width:36px; }
  .nav-link { justify-content:center; }
  #main-content { padding:26px; }
  #topnav { padding:0 26px; }
  .hero-content { flex-direction:row; }
  .match-odds-group { display:none !important; }
}
@media(max-width:640px) {
  :root { --topnav-height:68px; }
  #sidebar { position:fixed; inset:0 auto 0 0; width:250px; min-width:250px; transform:translateX(-100%); transition:transform .2s; height:100dvh; align-items:stretch; }
  .nav-open #sidebar { transform:translateX(0); }
  .nav-open .sidebar-scrim { display:block; position:fixed; inset:0; background:rgba(8,15,30,.45); border:0; z-index:95; }
  #sidebar .brand-wordmark { display:block; }
  #sidebar .brand-logo { justify-content:flex-start; padding:0 12px 22px; }
  #sidebar .nav-link { justify-content:flex-start; }
  #sidebar .nav-link span,#sidebar .nav-section-title,#sidebar .user-info-text { display:block !important; }
  .mobile-menu-toggle { display:inline-flex; flex-shrink:0; font-size:20px; width:40px; height:40px; }
  #app-container,#main-wrapper { height:100dvh; }
  #topnav { padding:0 14px; gap:10px; }
  .search-container { min-width:0; }
  .search-input { padding-right:8px; font-size:12px; }
  .topnav-actions { gap:0; }
  .topnav-actions .notification-btn-wrapper,.topnav-actions .user-chip { display:none; }
  .theme-switch button { min-width:34px; min-height:36px; padding:4px; }
  .theme-switch button span { display:none; }
  #main-content { padding:24px 16px; }
  .workspace-heading h1 { font-size:25px; }
  .workspace-heading>.fl-btn { padding:8px; font-size:0; }
  .workspace-heading p { font-size:12px; }
  .data-mode-bar { font-size:11px !important; }
  .hero-match-card { padding:18px !important; }
  .hero-match-info { min-width:0 !important; max-width:100%; }
  .hero-match-title { font-size:21px !important; }
  .hero-match-info>div:last-child { flex-wrap:wrap; }
  .hero-content { align-items:stretch !important; flex-direction:column; }
  .hero-content>div { min-width:0 !important; width:100%; }
  .hero-match-meta { gap:8px !important; }
  .dashboard-controls>div:first-child>div:last-child { min-width:0 !important; width:100%; }
  .match-row { flex-wrap:wrap; gap:12px; padding:16px 12px !important; position:relative; }
  .match-time-col { width:100% !important; display:flex; gap:8px; align-items:center; }
  .match-teams-col { flex-basis:100% !important; gap:8px !important; }
  .team-entry { font-size:12px; }
  .match-row>div[style*="min-width: 170px"] { flex:1; padding:0 !important; }
  .matches-date-header { padding:12px !important; gap:8px; }
  .matches-date-header>span { display:none; }
  .team-entry.home { flex-direction:row-reverse; justify-content:flex-end !important; }
  .team-entry.home span { text-align:left !important; }
  .match-detail-tabs { overflow-x:auto; }
  .content-inner { gap:18px; }
  #dashboard-view .hero-content>div:nth-child(2) { display:none; }
  #dashboard-view .hero-match-info>div:last-child { gap:6px !important; }
  #dashboard-view .hero-match-info>div:last-child button { font-size:11px; padding:8px; }
  #match-detail-view [style*="grid-template-columns: 1fr 1fr"],#teams-view [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns:1fr !important; }
  .profile-main-meta { flex-basis:100%; gap:12px; }
  .profile-tags-row { flex-wrap:wrap; }
  .profile-name-title { font-size:21px; }
  .detail-nav-top { gap:10px; flex-wrap:wrap; }
  .match-detail-header-card { padding:16px; }
  .match-faceoff-row { flex-direction:row; padding:10px 0; flex-wrap:wrap; gap:16px; }
  .faceoff-team { width:calc(50% - 8px); }
  .match-faceoff-row>div:nth-child(2) { order:3; width:100%; }
  .faceoff-crest-circle { width:58px; height:58px; }
  .faceoff-team-name { font-size:14px; }
  #match-detail-view [style*="justify-content: space-between"] { flex-wrap:wrap; gap:8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }