/* ── Variables — Light Blue theme (default) ───────────────────────────────── */
:root {
  --bg:         #0e2038;
  --bg2:        #132843;
  --card:       #183252;
  --card2:      #1e3c61;
  --border:     #2c527e;
  --primary:    #1a7ed4;
  --primary-h:  #2891e8;
  --gold:       #f0c040;
  --green:      #2ecc71;
  --red:        #e74c3c;
  --orange:     #e67e22;
  --yellow:     #f39c12;
  --text:       #d8eeff;
  --text-muted: #7aaac8;
  --nav-h:56px; --radius:14px; --radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.45); --transition:.18s ease;
}

/* ── Dark Exclusive theme — pure charcoal, no blue ────────────────────────── */
[data-theme="dark"] {
  --bg:         #0a0a0a;
  --bg2:        #111111;
  --card:       #1c1c1c;
  --card2:      #242424;
  --border:     #2e2e2e;
  --primary:    #c9a227;   /* warm gold — exclusive feel */
  --primary-h:  #dbb83a;
  --gold:       #c9a227;
  --green:      #27ae60;
  --red:        #c0392b;
  --orange:     #d4691e;
  --yellow:     #d4a017;
  --text:       #f0ece4;   /* warm white, no blue cast */
  --text-muted: #686868;
  --shadow:0 4px 28px rgba(0,0,0,.85);
}
/* No coloured glow — pure black */
[data-theme="dark"] body { background-image: none; }

/* ── Norwegian left-side crest stripe: flag colours, shield bottom ────────── */
/* position:fixed fills the viewport continuously during scroll (infinite feel).
   clip-path creates a heraldic shield point at the bottom of the visible stripe. */
.norw-stripe {
  display: none;
  position: fixed;
  left: 15px;
  top: 0;
  width: 80px;
  height: 100vh;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(to right,
    #BA0C2F 0%,  #BA0C2F 34%,
    #FFFFFF 34%, #FFFFFF 42%,
    #002868 42%, #002868 58%,
    #FFFFFF 58%, #FFFFFF 66%,
    #BA0C2F 66%, #BA0C2F 100%);
  /* Heraldic shield bottom — point at 50% horizontal */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px));
  box-shadow: 4px 0 20px rgba(0,0,0,.55), inset 0 0 12px rgba(0,0,0,.25);
}

/* ── Norwegian Beta theme — Midnatt ──────────────────────────────────────── */
/* Very dark midnight navy, rosemaling pattern, warm gold accents, glass cards */
[data-theme="norwegian-blue"] {
  --bg:         #07101C;
  --bg2:        #091420;
  --card:       #0F1E30;
  --card2:      #132438;
  --border:     rgba(255,255,255,0.10);
  --primary:    #D4A843;
  --primary-h:  #E3B84A;
  --gold:       #D4A843;
  --green:      #27AE60;
  --red:        #C0082A;
  --orange:     #E67E22;
  --yellow:     #D4A843;
  --text:       #F0F6FF;
  --text-muted: #6A8FB0;
  --shadow:     0 4px 32px rgba(0,0,0,.80);
  --stripe-l:   10px;
  --stripe-w:   clamp(28px, min(8vw, 80px), 80px);
  --stripe-pad: calc(var(--stripe-l) + var(--stripe-w) + 14px);
}
/* Rosemaling tiles over almost-black. Subtle warm gold glow per-tile. */
[data-theme="norwegian-blue"] body {
  background-color: #07101C;
  background-image:
    url("../img/rosemaling_true_transparent.svg"),
    radial-gradient(
      circle 45px at center,
      rgba(212,168,67,0.12) 0%,
      transparent 100%
    );
  background-repeat: repeat, repeat;
  background-size:   90px 90px, 90px 90px;
  background-position: 0 0, 0 0;
}
/* Content padding */
[data-theme="norwegian-blue"] .topbar        { padding-left: var(--stripe-pad); }
[data-theme="norwegian-blue"] .main-content  { padding-left: var(--stripe-pad); }
[data-theme="norwegian-blue"] .mobile-nav    { padding-left: var(--stripe-pad); }
[data-theme="norwegian-blue"] .subnav-bar    { padding-left: var(--stripe-pad); }

/* Glass panels — very dark tint, gold-tinted border */
[data-theme="norwegian-blue"] .card,
[data-theme="norwegian-blue"] .group-card,
[data-theme="norwegian-blue"] .bk-card,
[data-theme="norwegian-blue"] .match-card,
[data-theme="norwegian-blue"] .home-card,
[data-theme="norwegian-blue"] .admin-section,
[data-theme="norwegian-blue"] .oversikt-section,
[data-theme="norwegian-blue"] .admin-section-nav,
[data-theme="norwegian-blue"] .config-section,
[data-theme="norwegian-blue"] .player-panel,
[data-theme="norwegian-blue"] .section-backdrop,
[data-theme="norwegian-blue"] .wc26-players-toolbar,
[data-theme="norwegian-blue"] .player-view-bar,
[data-theme="norwegian-blue"] .custom-stat-picker,
[data-theme="norwegian-blue"] .wc26-cmp-panel,
[data-theme="norwegian-blue"] .wc26-player-detail,
[data-theme="norwegian-blue"] .wc26-subnav,
[data-theme="norwegian-blue"] .bracket-match,
[data-theme="norwegian-blue"] .stats-section-box,
[data-theme="norwegian-blue"] .wc26-stats-window {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(212,168,67,0.18);
}
/* Page header — dark tinted, stands out from other cards */
[data-theme="norwegian-blue"] .page-header {
  background: rgba(9,20,32,0.82);
  border-color: rgba(212,168,67,0.25);
}
/* Scoring pts-cards — solid dark, clearly visible */
[data-theme="norwegian-blue"] .pts-card {
  background: rgba(15,30,48,0.88);
  border: 1px solid rgba(212,168,67,0.28);
  padding: 8px 12px;
  min-width: 70px;
}
/* Headers larger than body text */
[data-theme="norwegian-blue"] h1 { font-size: 2rem; }
[data-theme="norwegian-blue"] h2 { font-size: 1.35rem; }
[data-theme="norwegian-blue"] h3 { font-size: 1.1rem; }
[data-theme="norwegian-blue"] p, [data-theme="norwegian-blue"] td,
[data-theme="norwegian-blue"] .section-hint { font-size: .92rem; }
/* Table cells */
[data-theme="norwegian-blue"] .stats-table td,
[data-theme="norwegian-blue"] .admin-table td,
[data-theme="norwegian-blue"] .leaderboard-table td,
[data-theme="norwegian-blue"] .standings-table td,
[data-theme="norwegian-blue"] .cmp-table td {
  background: rgba(7,16,28,0.90);
}
[data-theme="norwegian-blue"] .stats-table tr:hover td,
[data-theme="norwegian-blue"] .admin-table tr:hover td,
[data-theme="norwegian-blue"] .leaderboard-table .lb-row:hover td {
  background: rgba(15,30,48,0.95) !important;
}
[data-theme="norwegian-blue"] .stats-table th,
[data-theme="norwegian-blue"] .admin-table th,
[data-theme="norwegian-blue"] .leaderboard-table th,
[data-theme="norwegian-blue"] .standings-table th,
[data-theme="norwegian-blue"] .cmp-table th {
  background: rgba(4,10,18,0.98) !important;
  color: #D4A843 !important;
}
/* Team/bracket cards */
[data-theme="norwegian-blue"] .team-item-card,
[data-theme="norwegian-blue"] .tp-team-card {
  background: rgba(15,30,48,0.92) !important;
  border-color: rgba(212,168,67,0.18) !important;
}
[data-theme="norwegian-blue"] .auth-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(212,168,67,0.20) !important;
}
[data-theme="norwegian-blue"] .bk-team              { background: transparent; }
[data-theme="norwegian-blue"] .bk-team.picked        { background: rgba(192,8,42,.40) !important; }
[data-theme="norwegian-blue"] .bk-team.actual-winner { background: rgba(212,168,67,.28) !important; }
/* Topbar */
[data-theme="norwegian-blue"] .topbar {
  background: rgba(4,8,16,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* Brand icon */
[data-theme="norwegian-blue"] .topbar-brand {
  position: absolute;
  left: var(--stripe-l);
  width: var(--stripe-w);
  height: var(--nav-h);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 101;
}
[data-theme="norwegian-blue"] .brand-name { display: none; }
[data-theme="norwegian-blue"] .brand-icon { font-size: 1.5rem; }
/* Crest stripe — same shape, inset glow */
[data-theme="norwegian-blue"] .norw-stripe {
  display: block;
  left: var(--stripe-l);
  width: var(--stripe-w);
  box-shadow: 4px 0 20px rgba(0,0,0,.70), inset 0 0 14px rgba(0,0,0,.35);
}
/* Muted text */
[data-theme="norwegian-blue"] .page-subtitle,
[data-theme="norwegian-blue"] .section-hint { color: var(--text-muted); }

/* ── Theme picker ─────────────────────────────────────────────────────────── */
.theme-picker{position:relative;flex-shrink:0}
.theme-picker-btn{background:none;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);padding:5px 9px;cursor:pointer;font-size:.88rem;color:var(--text-muted);transition:color var(--transition),border-color var(--transition)}.theme-picker-btn:hover{color:var(--text);border-color:var(--border)}
.theme-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:6px;min-width:180px;z-index:500;box-shadow:var(--shadow)}
.theme-picker.open .theme-dropdown{display:flex;flex-direction:column}
.theme-option{padding:9px 12px;border-radius:var(--radius-sm);font-size:.88rem;cursor:pointer;color:var(--text-muted);background:none;border:none;text-align:left;transition:background var(--transition),color var(--transition)}.theme-option:hover{background:var(--card2);color:var(--text)}.theme-option.active{color:var(--gold);font-weight:600}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;line-height:1.55;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 16px;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.topbar-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand-icon{font-size:1.4rem}.brand-name{font-weight:700;font-size:1.05rem;white-space:nowrap}.brand-year{color:var(--gold)}

/* ── Topnav scroll-fade wrapper ──────────────────────────────────────────── */
.topnav-wrap{position:relative;flex:1;min-width:0;overflow:hidden}
.topnav-wrap::before,.topnav-wrap::after{content:'';position:absolute;top:0;bottom:0;width:32px;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s}
.topnav-wrap::before{left:0;background:linear-gradient(to right,var(--bg2) 0%,transparent 100%)}
.topnav-wrap::after{right:0;background:linear-gradient(to left,var(--bg2) 0%,transparent 100%)}
.topnav-wrap.has-scroll-left::before{opacity:1}
.topnav-wrap.has-scroll-right::after{opacity:1}

/* ── Sub-navigation bar (Layout 3 — Extended, wide screens only) ─────────── */
.subnav-bar{display:none;position:fixed;top:var(--nav-h);left:0;right:0;height:38px;background:var(--card);border-bottom:1px solid var(--border);align-items:center;padding:0 16px;gap:2px;z-index:90;overflow-x:auto;scrollbar-width:none}
.subnav-bar::-webkit-scrollbar{display:none}
.subnav-link{padding:5px 14px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;color:var(--text-muted);white-space:nowrap;transition:color var(--transition),background var(--transition)}
.subnav-link:hover{color:var(--text);background:var(--card2)}
.subnav-link.active{color:var(--text);background:rgba(255,255,255,.06);box-shadow:inset 0 -2px 0 var(--gold)}
@media(min-width:769px){
  .subnav-bar{display:flex}
  .has-subnav .main-content{padding-top:calc(var(--nav-h) + 38px + 24px)!important}
}

/* ── Flat nav links ───────────────────────────────────────────────────────── */
.topnav{position:relative;display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;cursor:grab;user-select:none;min-width:0}
.topnav.dragging{cursor:grabbing}
.topnav::-webkit-scrollbar{display:none}
.nav-slider{position:absolute;top:50%;transform:translateY(-50%);height:calc(var(--nav-h) - 16px);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-sm);transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),opacity .15s;pointer-events:none;z-index:0}
.nav-link{position:relative;z-index:1;padding:8px 14px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:500;color:var(--text-muted);white-space:nowrap;transition:color var(--transition);flex-shrink:0;border:none;background:none;cursor:pointer}
.nav-link:hover{color:var(--text)}.nav-link.active{color:var(--text)}
.nav-link.active::after,.nav-group-btn.active::after{content:'';position:absolute;bottom:3px;left:14px;right:14px;height:2px;background:var(--gold);border-radius:2px}

/* ── WC nav dropdown group ─────────────────────────────────────────────────── */
.nav-group{position:relative;flex-shrink:0;display:flex;align-items:center}
.nav-group-btn{display:flex;align-items:center;gap:5px;z-index:1}
.nav-caret{font-size:.65rem;transition:transform var(--transition)}
.nav-group.open .nav-caret{transform:rotate(180deg)}
/* Dropdown renders as a floating panel (position:fixed set by JS to avoid overflow clipping) */
.nav-dropdown{
  display:none;
  position:fixed;
  flex-direction:column;
  gap:2px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:6px;
  min-width:160px;
  z-index:500;
  box-shadow:var(--shadow);
}
.nav-group.open .nav-dropdown{display:flex}
.nav-group.open .nav-dropdown::before{display:none}
.nav-dropdown-item{position:relative;padding:9px 14px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;color:var(--text-muted);white-space:nowrap;transition:color var(--transition),background var(--transition)}
.nav-dropdown-item:hover{color:var(--text);background:var(--card2)}
.nav-dropdown-item.active{color:var(--text);background:rgba(255,255,255,.06)}
.nav-dropdown-item.active::after{content:'';position:absolute;bottom:6px;left:14px;right:14px;height:2px;background:var(--gold);border-radius:2px}

/* ── Topbar user area ─────────────────────────────────────────────────────── */
.topbar-user{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.username-chip{background:var(--card2);border:1px solid var(--border);padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:600}
.btn-logout{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:5px 12px;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;transition:border-color var(--transition),color var(--transition)}.btn-logout:hover{border-color:var(--red);color:var(--red)}
.btn-icon{font-size:1.1rem;padding:4px 6px;border-radius:var(--radius-sm);transition:background var(--transition)}.btn-icon:hover{background:var(--card2)}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer;padding:4px}

/* ── Mobile nav ───────────────────────────────────────────────────────────── */
.mobile-nav{display:none;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);z-index:99;box-shadow:var(--shadow);max-height:0;overflow:hidden;transition:max-height .3s ease}
.mobile-nav.open{max-height:600px}
.mobile-nav-group-label{padding:10px 24px 4px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.mobile-nav-link{padding:13px 24px;font-size:1rem;font-weight:500;border-bottom:1px solid var(--border);color:var(--text);transition:background var(--transition)}.mobile-nav-link:hover{background:var(--card2)}
.mobile-nav-sub{padding-left:40px;font-size:.9rem;color:var(--text-muted)}
.mobile-nav-link.logout{color:var(--red)}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.main-content{padding:calc(var(--nav-h) + 24px) 20px 40px;max-width:1400px;margin:0 auto}
.main-content.no-nav{padding-top:24px}

/* ── Flashes ──────────────────────────────────────────────────────────────── */
.flash-container{position:fixed;top:calc(var(--nav-h) + 10px);right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:360px}
.flash{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);font-size:.9rem;box-shadow:var(--shadow);animation:slideIn .25s ease}
.flash-success{background:#1a3d2a;border:1px solid var(--green);color:#6fe8a0}.flash-error{background:#3d1a1a;border:1px solid var(--red);color:#f08080}.flash-info{background:#1a2b3d;border:1px solid var(--primary);color:#80b8f0}
.flash-close{background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;opacity:.7;padding:0}.flash-close:hover{opacity:1}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;margin-bottom:20px}.page-header h1{font-size:1.9rem;font-weight:700}
.page-subtitle{color:var(--text-muted);margin-top:4px;font-size:.95rem}
.section-heading{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.gold{color:var(--gold)}

/* ── Flag images ──────────────────────────────────────────────────────────── */
.flag-img{width:20px;height:15px;border-radius:2px;flex-shrink:0;vertical-align:middle;object-fit:cover}
.flag-emoji{font-size:1.25rem}

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(ellipse at 50% 0%,#1f3e62 0%,var(--bg) 70%)}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:40px 36px;width:100%;max-width:420px;box-shadow:var(--shadow);text-align:center}
.auth-logo{font-size:3rem;margin-bottom:8px}.auth-title{font-size:1.8rem;font-weight:800;margin-bottom:6px}
.auth-subtitle{color:var(--text-muted);font-size:.9rem;margin-bottom:28px}
.auth-tabs{display:flex;background:var(--bg2);border-radius:var(--radius-sm);padding:4px;margin-bottom:24px;gap:4px}
.auth-tab{flex:1;padding:9px;background:none;border:none;color:var(--text-muted);font-size:.95rem;font-weight:600;border-radius:calc(var(--radius-sm) - 2px);cursor:pointer;transition:background var(--transition),color var(--transition)}.auth-tab.active{background:var(--primary);color:#fff}.auth-tab:not(.active):hover{color:var(--text);background:var(--card2)}
.auth-form{text-align:left}.auth-form.hidden{display:none}
.field{margin-bottom:16px}.field label{display:block;font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.field input,.field-select{width:100%;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;outline:none;transition:border-color var(--transition)}.field input:focus,.field-select:focus{border-color:var(--primary)}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text-muted);margin-bottom:20px;cursor:pointer}.checkbox-label input{width:auto}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary{background:var(--primary);color:#fff;border:none;padding:11px 22px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;cursor:pointer;transition:background var(--transition),transform var(--transition)}.btn-primary:hover{background:var(--primary-h);transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary.full-width{width:100%}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:9px 18px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color var(--transition),color var(--transition)}.btn-outline:hover{border-color:var(--primary);color:var(--text)}.btn-outline:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{padding:5px 12px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;border:none;cursor:pointer;transition:opacity var(--transition)}.btn-sm:hover{opacity:.85}
.btn-sm.btn-primary{background:var(--primary);color:#fff}.btn-sm.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn-sm.btn-outline:hover{border-color:var(--gold);color:var(--gold)}.btn-sm.btn-warning{background:var(--orange);color:#fff}.btn-sm.btn-danger{background:var(--red);color:#fff}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table-wrapper{overflow-x:auto}

/* ── Home grid ────────────────────────────────────────────────────────────── */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.home-card{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);cursor:pointer}
.home-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 28px rgba(34,120,212,.3)}.home-card.admin-card:hover{border-color:var(--gold);box-shadow:0 8px 28px rgba(240,192,64,.15)}
.home-card-icon{font-size:2.2rem;flex-shrink:0}.home-card-body{flex:1}.home-card-body h2{font-size:1.05rem;font-weight:700;margin-bottom:4px}.home-card-body p{font-size:.85rem;color:var(--text-muted)}
.home-card-arrow{color:var(--text-muted);font-size:1.2rem;transition:color var(--transition),transform var(--transition)}
.home-card:hover .home-card-arrow{color:var(--primary);transform:translateX(4px)}.home-card.admin-card:hover .home-card-arrow{color:var(--gold)}
.empty-state{text-align:center;padding:64px 24px;color:var(--text-muted)}.empty-icon{font-size:3rem;margin-bottom:16px}.empty-state h2{font-size:1.3rem;color:var(--text);margin-bottom:8px}

/* ── Groups grid ──────────────────────────────────────────────────────────── */
.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.group-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card2);border-bottom:1px solid var(--border);gap:8px}
.group-label{font-weight:700;font-size:.95rem;color:var(--gold);letter-spacing:.5px;text-transform:uppercase;flex:1}
.team-count{font-size:.78rem;color:var(--text-muted);flex-shrink:0}

/* ── Team list ────────────────────────────────────────────────────────────── */
.team-list{padding:8px}
/* rank-row: arrows (left) + position badge + draggable team card + drag handle (right) */
.rank-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.rank-pos-badge{width:26px;height:26px;border-radius:50%;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--text-muted);flex-shrink:0;transition:background var(--transition),border-color var(--transition),color var(--transition)}
/* Position colours: 1=gold qualifier, 2=blue qualifier, 3=bronze 3rd-place, 4=eliminated */
.rank-row[data-rank="1"] .rank-pos-badge{background:rgba(240,192,64,.22);border-color:var(--gold);color:var(--gold)}
.rank-row[data-rank="2"] .rank-pos-badge{background:rgba(26,126,212,.25);border-color:var(--primary);color:#79c8ff}
.rank-row[data-rank="3"] .rank-pos-badge{background:rgba(205,127,50,.2);border-color:#cd7f32;color:#e0a060}
.rank-row[data-rank="4"] .rank-pos-badge{background:rgba(180,60,60,.15);border-color:#a04040;color:#d07070}
.team-item-card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid transparent;transition:border-color var(--transition),background var(--transition);user-select:none;cursor:grab;flex:1;min-width:0}
.team-item-card:hover{border-color:var(--border);background:var(--card2)}.team-item-card:active{cursor:grabbing}
.drag-handle{color:var(--text-muted);font-size:1.1rem;cursor:grab;flex-shrink:0;margin-left:auto}
/* Arrow buttons — left side, with visible box */
.item-arrows{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.arr-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text-muted);cursor:pointer;padding:3px 9px;font-size:.65rem;line-height:1.2;border-radius:3px;min-width:28px;transition:color var(--transition),background var(--transition),border-color var(--transition)}.arr-btn:hover{color:var(--text);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
/* Third-place prediction list */
.third-place-pred-list{padding:4px 8px 8px}
.tp-rank-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:2px 4px;border-radius:var(--radius-sm);transition:background var(--transition)}
.tp-team-card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid transparent;transition:border-color var(--transition),background var(--transition);flex:1;cursor:grab;user-select:none}
.tp-team-card:hover{border-color:var(--border);background:var(--card2)}.tp-team-card:active{cursor:grabbing}
.tp-group-badge{font-size:.72rem;font-weight:700;color:var(--text-muted);background:var(--card2);border:1px solid var(--border);padding:2px 6px;border-radius:4px;flex-shrink:0;min-width:46px;text-align:center}
/* Glass highlight for top-8 qualifying rows */
.tp-rank-row.tp-qualify .tp-team-card{background:var(--card2);border-color:rgba(255,255,255,.1)}
.tp-rank-row.tp-qualify .rank-pos-badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--text)}
.tp-rank-row.tp-qualify-first .tp-team-card{border-top:1px solid rgba(255,255,255,.2);border-top-left-radius:8px;border-top-right-radius:8px}
.tp-rank-row.tp-qualify-last  .tp-team-card{border-bottom:1px solid rgba(255,255,255,.2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}
.team-flag{font-size:1.3rem;flex-shrink:0}.team-name{font-size:.88rem;font-weight:500;flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word;white-space:normal;line-height:1.3}
.team-ghost{opacity:.35;background:var(--primary)!important}.team-chosen{box-shadow:0 4px 16px rgba(0,0,0,.4);border-color:var(--primary)!important}

/* ── Save indicator ───────────────────────────────────────────────────────── */
.save-indicator{font-size:.82rem;font-weight:700;letter-spacing:.2px}.save-indicator.saving{color:var(--text-muted)}.save-indicator.saved{color:#4ade80;text-shadow:0 0 8px rgba(74,222,128,.5)}.save-indicator.error{color:var(--red)}

/* ── Rank badge ───────────────────────────────────────────────────────────── */
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--card2);font-size:.72rem;font-weight:700;flex-shrink:0}
.rank-1{background:var(--gold);color:#000}.rank-2{background:#9e9e9e;color:#000}.rank-3{background:#cd7f32;color:#fff}.rank-4{background:var(--card2);color:var(--text-muted)}
.btn-remove-team{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;padding:0 2px;line-height:1;margin-left:auto;flex-shrink:0;transition:color var(--transition)}.btn-remove-team:hover{color:var(--red)}

/* ── Admin table ──────────────────────────────────────────────────────────── */
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table th{background:var(--card2);padding:12px 14px;text-align:left;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);white-space:nowrap}
.admin-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}.admin-table tr:hover td{background:rgba(255,255,255,.03)}.admin-table tr.row-admin td{background:rgba(240,192,64,.04)}
.perm-col{text-align:center!important}.td-perm{text-align:center}.perm-check.always{color:var(--gold);font-weight:700}
.td-username{font-weight:600}.td-date{color:var(--text-muted);font-size:.85rem;white-space:nowrap}
.td-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.inline-form{display:contents}.text-muted{color:var(--text-muted)}
.td-deadline{white-space:nowrap}.deadline-form{display:flex;gap:4px;align-items:center}.deadline-input{width:130px;padding:4px 7px;font-size:.8rem;font-family:monospace;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}.deadline-badge{font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--orange);color:#fff;margin-left:4px;vertical-align:middle}
.td-del-preds{white-space:nowrap}.del-preds-row{display:flex;gap:4px;flex-wrap:wrap}.btn-sm.btn-outline-danger{background:transparent;border:1px solid var(--red);color:var(--red)}.btn-sm.btn-outline-danger:hover{background:var(--red);color:#fff}
.badge-admin{display:inline-block;background:var(--gold);color:#000;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}
.badge-you  {display:inline-block;background:var(--primary);color:#fff;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}

/* ── Admin section nav ────────────────────────────────────────────────────── */
.admin-section-nav{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.admin-sec-btn{display:inline-block;padding:8px 16px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--text-muted);transition:border-color var(--transition),color var(--transition)}.admin-sec-btn:hover{border-color:var(--primary);color:var(--text)}
.admin-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;margin-bottom:20px;scroll-margin-top:calc(var(--nav-h)+16px)}.admin-section h2{font-size:1.25rem;font-weight:700;margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.section-hint{color:var(--text-muted);font-size:.88rem;margin-bottom:16px}

/* ── Live data bar ────────────────────────────────────────────────────────── */
.live-data-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:20px}
.live-data-status{font-size:.9rem;flex:1}.text-live{color:var(--green)}.cfg-api{border-left:3px solid var(--primary);padding-left:10px}

/* ── API source selector ──────────────────────────────────────────────────── */
.api-source-option{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition),background var(--transition)}.api-source-option:hover{border-color:var(--primary)}.api-source-option input[type=radio]{margin-top:3px;flex-shrink:0;accent-color:var(--primary)}.api-source-active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--bg2))}

/* ── Config form ──────────────────────────────────────────────────────────── */
.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:20px}
.config-field label{display:block;font-size:.83rem;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.config-field input,.config-field select,.field-select{width:100%;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem;outline:none;transition:border-color var(--transition)}.config-field input:focus,.config-field select:focus{border-color:var(--primary)}

/* ── Team management ──────────────────────────────────────────────────────── */
.team-mgmt-layout{display:grid;grid-template-columns:260px 1fr;gap:20px}
.country-pool-panel h3{font-size:.95rem;font-weight:700;margin-bottom:10px}
.pool-search{width:100%;padding:7px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;outline:none;margin-bottom:10px;transition:border-color var(--transition)}.pool-search:focus{border-color:var(--primary)}
.country-pool{display:flex;flex-direction:column;gap:4px;max-height:460px;overflow-y:auto;padding-right:4px}
.country-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border);font-size:.85rem;cursor:pointer;transition:background var(--transition),border-color var(--transition),opacity var(--transition)}
.country-chip:hover:not(.used){background:var(--card2);border-color:var(--primary)}.country-chip.used{opacity:.28;cursor:default}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;align-items:center;justify-content:center}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;max-width:400px;width:90%;box-shadow:var(--shadow)}.modal-box h3{margin-bottom:16px;font-size:1.1rem}
.modal-group-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}

/* ── Standings table ──────────────────────────────────────────────────────── */
.standings-table{width:100%;border-collapse:collapse;font-size:.84rem}
.standings-table th{background:var(--card2);padding:7px 8px;text-align:center;font-size:.73rem;font-weight:700;text-transform:uppercase;color:var(--text-muted)}
.standings-table th:first-child{text-align:left;padding-left:12px}
.standings-table td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.standings-table td:first-child{text-align:left;padding-left:12px;white-space:nowrap}
.standings-table tr:last-child td{border-bottom:none}
.standings-table .flag-img{width:20px;height:14px;margin-right:4px}
.stat-val{font-weight:700;font-size:.88rem}
.stat-btns{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.stat-btn-group{display:flex;align-items:center;gap:2px}
.stat-label{font-size:.66rem;font-weight:700;color:var(--text-muted);min-width:14px;text-align:center}
.btn-stat{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:background var(--transition),border-color var(--transition)}
.btn-stat.minus:hover{background:rgba(231,76,60,.25);border-color:var(--red)}.btn-stat.plus:hover{background:rgba(46,204,113,.25);border-color:var(--green)}

/* ── Live / manual badges ─────────────────────────────────────────────────── */
.live-badge  {display:inline-block;background:rgba(46,204,113,.15);border:1px solid var(--green);color:var(--green);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;margin-left:10px;vertical-align:middle;letter-spacing:.3px}
.manual-badge{display:inline-block;background:rgba(122,150,176,.1);border:1px solid var(--border);color:var(--text-muted);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;margin-left:10px;vertical-align:middle}

/* ── Real standings (overview) ────────────────────────────────────────────── */
.st-qualify td{background:rgba(46,204,113,.05)!important}.st-qualify td:first-child{border-left:3px solid var(--green)}

/* ── Leaderboard ──────────────────────────────────────────────────────────── */
.oversikt-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;margin-bottom:20px;scroll-margin-top:calc(var(--nav-h)+16px)}.oversikt-section h2{font-size:1.2rem;font-weight:700;margin-bottom:14px}
.scoring-subheading{font-size:.95rem;font-weight:600;color:var(--text-muted);margin-bottom:8px}
.leaderboard-table{width:100%;border-collapse:collapse;font-size:.88rem}
.leaderboard-table th{background:var(--card2);padding:10px 12px;text-align:center;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}.leaderboard-table th:nth-child(2){text-align:left}
.leaderboard-table td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}.leaderboard-table td:nth-child(2){text-align:left}
.leaderboard-table tr:last-child td{border-bottom:none}
.lb-row{cursor:pointer;transition:background var(--transition)}.lb-row:hover td{background:rgba(255,255,255,.04)!important}
.lb-row.row-self td{background:rgba(34,120,212,.1)}.lb-row.row-first td{background:rgba(240,192,64,.06)}
.lb-row.row-qualify td{background:rgba(46,204,113,.05)}.lb-row.row-comparing td{background:rgba(34,120,212,.2)!important}

/* ── Best-third glass box (top 8 qualify) ─────────────────────────────────── */
/* Use background only for the glass effect — keep row borders straight/continuous */
.third-place-table tr.row-qualify td{background:rgba(255,255,255,.065)}
.third-place-table tr.row-qualify-first td{box-shadow:inset 0 2px 0 rgba(255,255,255,.18)}
.third-place-table tr.row-qualify-last  td{box-shadow:inset 0 -2px 0 rgba(255,255,255,.18)}
.third-cutoff-row td{text-align:center;padding:6px 0;border:none;background:none}
.cutoff-label{font-size:.75rem;color:var(--text-muted);letter-spacing:.5px}
.td-rank{font-size:1rem;width:48px}.td-total{font-size:1.05rem}
.pts-positive{color:var(--green);font-weight:600}.pts-zero{color:var(--text-muted)}.group-col{min-width:34px}
.pts-system-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pts-card{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;min-width:90px}
.pts-place{font-size:.82rem;color:var(--text-muted);text-align:center}.pts-val{font-size:1.2rem;font-weight:700;color:var(--gold)}

/* ── Player comparison panel ──────────────────────────────────────────────── */
.player-panel{background:var(--card);border:1px solid var(--primary);border-radius:var(--radius);padding:20px;margin:16px 0 32px}
.panel-empty-state{text-align:center;padding:24px 16px;color:var(--text-muted);font-size:.95rem}
.player-panel-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.player-panel-title{font-size:1.05rem;font-weight:700;flex:1}.player-panel-controls{display:flex;align-items:center;gap:8px}
.panel-compare-label{font-size:.85rem;color:var(--text-muted);white-space:nowrap}.panel-loading{color:var(--text-muted);padding:16px;font-size:.9rem}
.cmp-groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.cmp-group-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.cmp-header-labels{display:flex;gap:16px;font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.cmp-team-list{padding:6px}
.cmp-team-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--radius-sm);margin-bottom:3px;font-size:.82rem}
.cmp-pred{font-weight:700;width:16px;text-align:center;flex-shrink:0;color:var(--text-muted)}.cmp-name{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-ref{font-size:.75rem;font-weight:700;width:20px;text-align:right;flex-shrink:0}.cmp-ref.muted{color:var(--text-muted)}
.cmp-exact{background:rgba(46,204,113,.15);border-left:3px solid var(--green)}.cmp-near{background:rgba(243,156,18,.12);border-left:3px solid var(--yellow)}.cmp-wrong{background:rgba(231,76,60,.12);border-left:3px solid var(--red)}.cmp-neutral{border-left:3px solid transparent}

/* ── Split comparison layout (Your pick / Compare side by side) ──────────── */
.cmp-split-layout{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px}
.cmp-split-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.cmp-split-header{text-align:center;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:5px 6px;background:var(--card2);border-bottom:1px solid var(--border)}
.cmp-split-row{display:flex;align-items:center;gap:5px;padding:5px 7px;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem}
.cmp-split-row:last-child{border-bottom:none}
.cmp-pos-num{font-size:.7rem;font-weight:700;color:var(--text-muted);min-width:13px;text-align:right;flex-shrink:0}
.cmp-split-name{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-split-exact{background:rgba(46,204,113,.13);border-left:2px solid var(--green)}
.cmp-split-near{background:rgba(243,156,18,.1);border-left:2px solid var(--yellow)}
.cmp-split-wrong{background:rgba(231,76,60,.1);border-left:2px solid var(--red)}

/* ── Banners ──────────────────────────────────────────────────────────────── */
.deadline-banner,.info-banner{padding:12px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:.9rem}
.deadline-banner{background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.3);color:var(--gold)}.info-banner{background:rgba(34,120,212,.12);border:1px solid rgba(34,120,212,.35);color:#80b8f0}

/* ── Section backdrop ─────────────────────────────────────────────────────── */
.section-backdrop{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;margin-bottom:20px}

/* ── Registration closed ───────────────────────────────────────────────────── */
.registration-closed{text-align:center;padding:24px 16px;color:var(--text-muted)}
.registration-closed-msg{font-size:1rem;font-weight:600;color:var(--text);margin-top:8px}

/* ── Admin default perms ───────────────────────────────────────────────────── */
.default-perms-grid{display:flex;flex-wrap:wrap;gap:12px}
.default-perm-item{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer;padding:8px 14px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.default-perm-item input{cursor:pointer}

/* ── Bracket nav ──────────────────────────────────────────────────────────── */
.bracket-nav{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.bracket-reset-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.btn-xs{padding:3px 10px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;border:none;cursor:pointer;transition:opacity var(--transition)}.btn-xs:hover{opacity:.85}
.bk-result-banner{padding:10px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.88rem;background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.3);color:var(--gold)}
.bk-champion{text-align:center;padding:20px;font-size:1.1rem;font-weight:700;color:var(--gold)}
.bk-third{text-align:center;padding:12px;font-size:.95rem;color:var(--text-muted)}
.round-label-text{font-weight:700;font-size:1rem;color:var(--gold);flex:1;text-align:center}
.bracket-save-status{margin-top:10px;font-size:.85rem;min-height:1.2em}

/* ── Bracket container (JS takes over layout via inline styles) ───────────── */
.bracket-columns{width:100%}

/* ── Compact bracket cards & layout ──────────────────────────────────────── */
.bk-col-title{font-size:.67rem;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--transition)}.bk-card.has-result{border-color:rgba(240,192,64,.35)}
.bk-team{display:flex;align-items:center;gap:4px;padding:2px 5px;cursor:pointer;flex:1;min-height:0;overflow:hidden;transition:background var(--transition)}.bk-team:hover:not(.tbd){background:rgba(255,255,255,.07)}.bk-team.tbd{opacity:.45;cursor:default}
.bk-team.picked{background:rgba(34,120,212,.45)}.bk-team.actual-winner{background:rgba(240,192,64,.30)}.bk-team.actual-winner .bk-name{color:var(--gold);font-weight:700}
.bk-flag{width:16px;flex-shrink:0}
.bk-name{font-size:.7rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.bk-slot{font-size:.57rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;opacity:.75}
.bk-dot{font-size:.6rem;flex-shrink:0;margin-left:2px}.bk-dot.user-pick{color:var(--primary)}.bk-dot.actual-pick{color:var(--gold);font-weight:700}
.bk-div{height:1px;background:var(--border);flex-shrink:0}

/* ── Config sections ──────────────────────────────────────────────────────── */
.config-section{margin-bottom:24px}
.config-section-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.toggle-row:last-child{border-bottom:none}
.toggle-row label{font-size:.88rem;color:var(--text-muted)}
.toggle-btn{padding:5px 14px;border-radius:20px;font-size:.8rem;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text-muted);transition:all var(--transition)}.toggle-btn.active{background:rgba(46,204,113,.15);border-color:var(--green);color:var(--green)}.toggle-btn.inactive{background:rgba(231,76,60,.12);border-color:var(--red);color:var(--red)}

/* ── Bracket slot setup ───────────────────────────────────────────────────── */
.bracket-slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.bracket-match-setup{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.match-num{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.slot-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}.slot-row:last-child{border-bottom:none}
.slot-num{font-size:.8rem;font-weight:700;color:var(--text-muted);width:22px;flex-shrink:0;text-align:center}
.slot-source-select{flex:1;padding:6px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;outline:none;transition:border-color var(--transition)}.slot-source-select:focus{border-color:var(--primary)}
.slot-team-tag{font-size:.78rem;color:var(--gold);white-space:nowrap;display:flex;align-items:center;gap:4px;min-width:80px}

/* ── Football Stats – tabs ────────────────────────────────────────────────── */
.stats-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.stats-tab{padding:9px 18px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--text-muted);cursor:pointer;transition:border-color var(--transition),color var(--transition),background var(--transition)}
.stats-tab:hover{border-color:var(--primary);color:var(--text)}
.stats-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.stats-loading{color:var(--text-muted);font-size:.9rem;padding:24px 0;text-align:center}
.stats-error{padding:16px;background:rgba(231,76,60,.1);border:1px solid var(--red);border-radius:var(--radius-sm);color:var(--red);font-size:.9rem}

/* ── Stats table ──────────────────────────────────────────────────────────── */
.stats-table{width:100%;border-collapse:collapse;font-size:.88rem;border:1px solid var(--border)}
.stats-table th{background:var(--card2);padding:10px 12px;text-align:center;font-size:.77rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);white-space:nowrap;border-bottom:1px solid var(--border)}
.stats-table th:first-child,.stats-table th:nth-child(2){text-align:left}
.stats-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:center}
.stats-table td:first-child,.stats-table td:nth-child(2){text-align:left}
.stats-table tr:last-child td{border-bottom:none}
.stats-table tr:hover td{background:rgba(255,255,255,.04)}
.team-crest{width:22px;height:22px;object-fit:contain;border-radius:3px;flex-shrink:0}
.team-cell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}

/* ── Form boxes (W/D/L) ───────────────────────────────────────────────────── */
.form-boxes{display:inline-flex;gap:3px;align-items:center}
.form-box{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;font-size:.7rem;font-weight:800;cursor:default;position:relative;flex-shrink:0;letter-spacing:0}
.form-box.W{background:rgba(46,204,113,.25);color:#2ecc71;border:1px solid rgba(46,204,113,.4)}
.form-box.D{background:rgba(240,192,64,.18);color:#f0c040;border:1px solid rgba(240,192,64,.35)}
.form-box.L{background:rgba(231,76,60,.2);color:#e74c3c;border:1px solid rgba(231,76,60,.38)}
.form-box:hover .form-tooltip{opacity:1;pointer-events:auto;transform:translateY(0)}
.form-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.73rem;color:var(--text);white-space:nowrap;z-index:200;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;min-width:140px;text-align:left;line-height:1.5}
.form-empty{color:var(--text-muted);font-size:.78rem}

/* ── Date range filter ────────────────────────────────────────────────────── */
.wc26-date-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.wc26-date-range label{font-size:.82rem;color:var(--text-muted)}
.wc26-date-input{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:5px 10px;font-size:.82rem}
.wc26-date-reset{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);padding:5px 10px;font-size:.8rem;cursor:pointer}
.wc26-date-reset:hover{background:var(--card2);color:var(--text)}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:10px}
.badge-done{background:rgba(122,150,176,.15);border:1px solid var(--border);color:var(--text-muted)}
.badge-live{background:rgba(46,204,113,.15);border:1px solid var(--green);color:var(--green)}
.badge-soon{background:rgba(34,120,212,.12);border:1px solid var(--primary);color:#80b8f0}
.badge-muted{background:rgba(122,122,122,.1);border:1px solid var(--border);color:var(--text-muted)}

/* ── Select/input shared ──────────────────────────────────────────────────── */
.stats-select{padding:7px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.88rem;outline:none;transition:border-color var(--transition);min-width:160px}.stats-select:focus{border-color:var(--primary)}

/* ── Match filter row ─────────────────────────────────────────────────────── */
.match-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.match-filter-row .stats-select{min-width:140px;flex:1 1 140px}

/* ── Column picker ────────────────────────────────────────────────────────── */
.col-picker-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.col-picker-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.col-picker-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.col-picker-select{min-width:220px;flex-shrink:0}
.col-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.col-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(26,126,212,.15);border:1px solid var(--primary);border-radius:20px;font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap}
.col-chip-x{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:0 2px;line-height:1;transition:color var(--transition)}.col-chip-x:hover{color:var(--red)}

/* ── Match table specifics ────────────────────────────────────────────────── */
.match-tbl th.team-r-hd,.match-tbl th.team-l-hd{min-width:130px}
.match-tbl th.score-hd{min-width:70px}
.match-tbl .date-td{white-space:nowrap;color:var(--text-muted);font-size:.82rem}
.match-tbl .team-cell-td{white-space:nowrap}
.match-tbl .team-r{text-align:right}
.match-tbl .team-l{text-align:left}
.match-tbl .team-r,.match-tbl .team-l{display:flex;align-items:center;gap:6px}
.match-tbl .team-r{justify-content:flex-end}
.match-tbl .score-td{text-align:center;min-width:70px}
.score-val{font-size:1rem;font-weight:700}
.score-vs{font-size:.85rem}
.tname{font-size:.88rem;font-weight:500}
.match-tbl .bold .tname,.match-tbl tr.row-home-win .team-r .tname:first-of-type,
.match-tbl tr.row-away-win .team-l .tname{font-weight:700;color:var(--text)}
/* Winner row subtle highlight */
.match-tbl tr.row-home-win td,.match-tbl tr.row-away-win td{background:rgba(255,255,255,.015)}

/* ── FIFA rank badge (inline) ─────────────────────────────────────────────── */
.fifa-rank-badge{display:inline-block;font-size:.68rem;font-weight:700;color:var(--text-muted);background:var(--card2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;line-height:1.4;white-space:nowrap}

/* ── City & Weather cell ──────────────────────────────────────────────────── */
.cw-loading{color:var(--text-muted);font-size:.8rem}
.city-lbl{font-size:.8rem;font-weight:600;color:var(--text-muted)}
.wx-temp{font-weight:700}

/* Utility */
.small{font-size:.78rem}
.green{color:var(--green)}.red{color:var(--red)}.bold{font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   WC26 Stats — shared components
   ══════════════════════════════════════════════════════════════════════════ */

/* Sub-navigation bar */
.wc26-subnav{display:flex;gap:4px;margin-bottom:16px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.wc26-subnav-link{padding:8px 18px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;color:var(--text-muted);border:1px solid transparent;transition:color var(--transition),border-color var(--transition),background var(--transition)}
.wc26-subnav-link:hover{color:var(--text);background:var(--card2)}
.wc26-subnav-link.active{color:var(--text);background:var(--primary);border-color:var(--primary)}

/* Filter / control rows */
.wc26-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.wc26-filter-row .stats-select{flex:1 1 140px}
.wc26-ctrl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.wc26-rpp-label{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}

/* Column toggle boxes */
.wc26-toggle-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.wc26-toggle-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);white-space:nowrap}
.wc26-toggle{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card2);color:var(--text-muted);font-size:.83rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.wc26-toggle:hover{border-color:var(--primary);color:var(--text)}
.wc26-toggle.active{background:rgba(26,126,212,.18);border-color:var(--primary);color:var(--primary)}

/* Small flag image */
.wc26-flag-sm{width:24px;height:16px;object-fit:cover;border-radius:2px;flex-shrink:0;vertical-align:middle}

/* FIFA rank box (inline table cell) */
.wc26-fifa-box{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--card2);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap}

/* Pagination */
.wc26-pagination{display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:center;padding:14px 0 4px}
.pag-btn{padding:5px 11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card2);color:var(--text-muted);font-size:.83rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.pag-btn:hover:not(:disabled){border-color:var(--primary);color:var(--text)}
.pag-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pag-btn:disabled{opacity:.35;cursor:default}
.pag-ellipsis{color:var(--text-muted);font-size:.85rem;padding:0 4px}

/* Sortable column headers */
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--text)}
.sort-arrow{font-size:.75rem;color:var(--text-muted);margin-left:2px}
.sort-arrow.active{color:var(--gold)}

/* Stage badges in teams table */
.stage-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--card2);border:1px solid var(--border);color:var(--text-muted)}
.stage-badge.stage-winner{background:rgba(240,192,64,.2);border-color:var(--gold);color:var(--gold)}
.stage-badge.stage-final{background:rgba(240,192,64,.12);border-color:rgba(240,192,64,.4);color:var(--gold)}
.stage-badge.stage-semi-finals{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.4);color:var(--green)}
.stage-badge.stage-quarter-finals{background:rgba(26,126,212,.12);border-color:rgba(26,126,212,.4);color:#79c8ff}
.stage-badge.stage-last-16{background:rgba(230,126,34,.1);border-color:rgba(230,126,34,.35);color:var(--orange)}
.stage-badge.stage-last-32{background:rgba(122,150,176,.1);border-color:var(--border);color:var(--text-muted)}

/* Teams table: name cell */
.wc26-teams-tbl .team-name-cell{display:flex;align-items:center;gap:7px;white-space:nowrap}
.team-fullname{font-weight:600}
.team-tla-badge{font-size:.72rem;font-weight:700;color:var(--text-muted);background:var(--card2);border:1px solid var(--border);padding:1px 6px;border-radius:4px}
.row-advanced td{background:rgba(255,255,255,.018)!important}
.row-selected td{background:rgba(26,126,212,.12)!important}
.text-center{text-align:center!important}

/* Team link */
.team-link{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted);transition:color var(--transition)}
.team-link:hover{color:var(--primary)}

/* ── Team detail page ──────────────────────────────────────────────────────── */
.wc26-team-header-card{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wc26-team-header-left{display:flex;align-items:center;gap:20px;flex:1}
.wc26-flag-lg{width:120px;height:80px;object-fit:cover;border-radius:6px;box-shadow:var(--shadow);flex-shrink:0}
.wc26-crest-lg{width:70px;height:70px;object-fit:contain;flex-shrink:0}
.wc26-team-title{font-size:2rem;font-weight:800;margin-bottom:8px}
.wc26-team-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wc26-tla-badge{font-size:.85rem;font-weight:700;padding:3px 10px;border-radius:6px;background:var(--card2);border:1px solid var(--border);color:var(--text-muted)}
.wc26-group-badge{font-size:.85rem;font-weight:700;padding:3px 10px;border-radius:6px;background:rgba(26,126,212,.15);border:1px solid var(--primary);color:#79c8ff}
.wc26-conf-badge{font-size:.8rem;padding:3px 10px;border-radius:6px;background:var(--card2);border:1px solid var(--border);color:var(--text-muted)}

/* FIFA rank large box */
.wc26-fifa-rank-badge-lg{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card2);border:2px solid var(--gold);border-radius:var(--radius);padding:14px 20px;min-width:90px;flex-shrink:0}
.wc26-fifa-rank-num{font-size:1.8rem;font-weight:900;color:var(--gold);line-height:1}
.wc26-fifa-rank-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-top:4px}

/* 2026 stats box */
.wc26-stats-box .wc26-stage-reached{font-size:.95rem;color:var(--text-muted);margin-bottom:12px}
.wc26-stat-row-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.wc26-stat-item{display:flex;flex-direction:column;align-items:center;padding:10px 6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.wc26-si-val{font-size:1.4rem;font-weight:800;line-height:1}
.wc26-si-lbl{font-size:.73rem;color:var(--text-muted);margin-top:4px;text-align:center}

/* Detail grid */
.wc26-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.wc26-detail-grid{grid-template-columns:1fr}}

/* Match rows in team detail */
.wc26-match-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.wc26-match-row:last-child{border-bottom:none}
.wc26-mr-date{flex-shrink:0;min-width:120px}
.wc26-mr-opp{display:flex;align-items:center;gap:5px;flex:1;font-weight:600}
.wc26-mr-score{font-weight:700;min-width:50px;text-align:center}

/* History filters */
.wc26-history-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.wc26-hist-cb{display:flex;align-items:center;gap:5px;font-size:.88rem;color:var(--text-muted);cursor:pointer}
.wc26-hist-totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-bottom:4px}

/* ── Players page ──────────────────────────────────────────────────────────── */
.wc26-players-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.wc26-toolbar-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wc26-cmp-btn{white-space:nowrap}

.wc26-players-layout{display:grid;grid-template-columns:300px 1fr;gap:20px;margin-bottom:20px}
@media(max-width:900px){.wc26-players-layout{grid-template-columns:1fr}}

/* Player detail panel */
.wc26-player-detail{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;min-height:200px}
.player-detail-empty{text-align:center;padding:40px 16px;color:var(--text-muted)}
.player-detail-empty .empty-icon{font-size:2.5rem;margin-bottom:12px}
.player-detail-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.player-photo-lg{width:70px;height:70px;object-fit:cover;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.player-photo-placeholder{width:70px;height:70px;border-radius:50%;background:var(--card2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}
.player-detail-name{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.player-detail-meta{font-size:.85rem;margin-bottom:2px}

.player-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.player-stat-box{display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.pstat-val{font-size:1.3rem;font-weight:800;line-height:1}
.pstat-lbl{font-size:.72rem;color:var(--text-muted);margin-top:3px}
.player-thumb{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:4px;border:1px solid var(--border)}
.wc26-player-table-wrap{min-width:0}

/* Comparison panel */
.wc26-cmp-panel{background:var(--card);border:1px solid var(--primary);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.wc26-cmp-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cmp-table-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:.88rem}
.cmp-table th{background:var(--card2);padding:10px 12px;text-align:center;font-size:.8rem;font-weight:700;border-bottom:1px solid var(--border)}
.cmp-stat-col{text-align:left!important;min-width:110px}
.cmp-player-col{min-width:130px}
.cmp-player-thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--border);display:block;margin:0 auto 4px}
.cmp-player-name{font-weight:700;font-size:.85rem}
.cmp-player-team{font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:4px}
.cmp-table td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:center}
.cmp-stat-lbl{text-align:left!important;color:var(--text-muted);font-size:.83rem}
.cmp-val{font-weight:700}
.cmp-best{color:var(--gold);background:rgba(240,192,64,.08)}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .team-mgmt-layout{grid-template-columns:1fr}.country-pool{max-height:200px}
  .cmp-groups-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ── Layout 2: Scrollable nav + hamburger (481px – 768px) ────────────────── */
/* topnav stays visible and scrollable; user/logout hidden; hamburger appears  */
@media(max-width:768px){
  .username-chip,.btn-logout,.btn-icon{display:none}
  .hamburger{display:block}
  .mobile-nav{display:flex}
}

/* ── Layout 1: Hamburger-only (≤ 480px) ─────────────────────────────────── */
@media(max-width:480px){
  :root{--nav-h:46px}
  .topnav{display:none}
  .topbar{padding:0 12px;gap:6px}
  .brand-icon{font-size:1.1rem}.brand-name{font-size:.88rem}
  .main-content{padding:calc(var(--nav-h) + 14px) 12px 32px}
  .groups-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.home-grid{grid-template-columns:1fr}
  .auth-card{padding:28px 20px}.flash-container{left:12px;right:12px;max-width:none}
  .bracket-slots-grid{grid-template-columns:1fr}.admin-section-nav{gap:6px}.admin-sec-btn{padding:6px 12px;font-size:.8rem}
  .pts-system-grid{gap:6px}.player-panel-header{flex-direction:column;align-items:flex-start}
  /* Norwegian stripe auto-adjusts via CSS clamp — no hard override needed */
  [data-theme="norwegian"] .topbar-brand{height:var(--nav-h)}
  [data-theme="norwegian-blue"] .topbar-brand{height:var(--nav-h)}
  /* Taller team boxes on small screens for easier tapping */
  .team-item-card{padding:11px 10px}
  .tp-team-card{padding:11px 10px}
  /* Compact Grp badge on small screens */
  .tp-group-badge{min-width:32px;font-size:.65rem;padding:1px 4px}
}

/* ── WC26 Stats Windows (team detail) ─────────────────────────────────────── */
.wc26-stats-window{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;margin-bottom:20px}
.wc26-stats-window h2{font-size:1.2rem;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.wc26-stats-2up{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:900px){.wc26-stats-2up{grid-template-columns:1fr}}

/* ── Knockout bracket connector lines ─────────────────────────────────────── */
.bracket-conn-col{display:flex;flex-direction:column;width:24px;flex-shrink:0;align-self:stretch;position:relative}
.bracket-conn-pair{display:flex;flex-direction:column;flex:1;position:relative;min-height:60px}
.bracket-conn-pair::before{content:'';position:absolute;top:25%;right:0;width:12px;height:50%;border-top:2px solid var(--border);border-right:2px solid var(--border);border-bottom:2px solid var(--border);border-radius:0 4px 4px 0}
.bracket-conn-pair::after{content:'';position:absolute;top:50%;right:0;width:12px;height:2px;background:var(--border);transform:translateX(100%)}

/* ── Stats section boxes (player stats picker) ────────────────────────────── */
.stats-section-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}
.stats-section-box h3{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.stat-box-grid{display:flex;flex-wrap:wrap;gap:6px}
.stat-box{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card2);color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.stat-box:hover{border-color:var(--primary);color:var(--text)}
.stat-box.active{background:rgba(26,126,212,.18);border-color:var(--primary);color:var(--primary)}
.stats-sections-wrap{margin-bottom:14px}
.stats-sections-header{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;margin-bottom:8px}
.stats-sections-header h3{font-size:.85rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:0}
.stats-sections-toggle{font-size:.8rem;color:var(--text-muted);background:none;border:none;cursor:pointer}
.stats-sections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

/* ── Team match row spacing fix ───────────────────────────────────────────── */
.wc26-match-row{column-gap:16px;flex-wrap:nowrap}
.wc26-mr-date{min-width:100px;max-width:130px;font-size:.82rem;color:var(--text-muted);flex-shrink:0}
.wc26-mr-opp{flex:1;min-width:100px}
.wc26-mr-score{min-width:60px;text-align:center;flex-shrink:0}
.wc26-mr-stage{font-size:.75rem;color:var(--text-muted);min-width:70px;text-align:right;flex-shrink:0}
@media(max-width:600px){.wc26-match-row{flex-wrap:wrap;column-gap:8px}}

/* ══════════════════════════════════════════════════════════════════════════
   Light Blue theme — very light, airy blue
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:         #eef6fd;
  --bg2:        #ffffff;
  --card:       #ffffff;
  --card2:      #e3effa;
  --border:     #c4dcf0;
  --primary:    #1a7ed4;
  --primary-h:  #1568b3;
  --gold:       #b8860b;
  --green:      #1e9e54;
  --red:        #d63a2a;
  --orange:     #d8731a;
  --yellow:     #c78a0d;
  --text:       #16334d;
  --text-muted: #5b7d99;
  --shadow:0 4px 18px rgba(30,80,140,.12);
}
[data-theme="light"] body { background-image: none; }
[data-theme="light"] .topbar { background:#ffffff; box-shadow:0 2px 10px rgba(30,80,140,.10); }
[data-theme="light"] .nav-slider { background:rgba(26,126,212,.10); border-color:rgba(26,126,212,.18); }
[data-theme="light"] .auth-page { background:radial-gradient(ellipse at 50% 0%, #d8eafa 0%, var(--bg) 70%); }
[data-theme="light"] .flash-success{background:#e2f6ea;color:#157a43}
[data-theme="light"] .flash-error{background:#fdeae8;color:#b03022}
[data-theme="light"] .flash-info{background:#e4f0fb;color:#155f9e}
[data-theme="light"] .info-banner{color:#155f9e}
[data-theme="light"] .stats-table tr:hover td,
[data-theme="light"] .admin-table tr:hover td,
[data-theme="light"] .leaderboard-table .lb-row:hover td { background:rgba(26,126,212,.06)!important; }
[data-theme="light"] .bk-team.picked { background:rgba(26,126,212,.18); }
[data-theme="light"] .bk-team.picked .bk-name { color:var(--primary); font-weight:700; }
[data-theme="light"] .bk-team:hover:not(.tbd) { background:rgba(26,126,212,.08); }
[data-theme="light"] .arr-btn { background:var(--card2); border-color:var(--border); }
[data-theme="light"] .arr-btn:hover { background:#d2e6f7; color:var(--text); border-color:var(--primary); }
[data-theme="light"] .team-item-card,
[data-theme="light"] .tp-team-card { background:var(--card2); }
[data-theme="light"] .subnav-link.active { background:rgba(26,126,212,.10); }
[data-theme="light"] .nav-subtabs { background:rgba(26,126,212,.08); border-color:var(--border); }


/* ── Theme button with label ──────────────────────────────────────────────── */
.theme-picker-btn{display:flex;align-items:center;gap:6px;font-weight:600}

/* ── Inline sub-tabs: shown right of the active main tab, indented look ───── */
.nav-subtabs{display:flex;align-items:center;gap:2px;margin-left:4px;padding:3px 6px;border-radius:var(--radius-sm);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.nav-subtab{position:relative;z-index:1;padding:5px 11px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:500;color:var(--text-muted);white-space:nowrap;transition:color var(--transition),background var(--transition)}
.nav-subtab:hover{color:var(--text);background:rgba(255,255,255,.07)}
.nav-subtab.active{color:var(--text);background:rgba(255,255,255,.10);box-shadow:inset 0 -2px 0 var(--gold)}
[data-theme="light"] .nav-subtabs{box-shadow:inset 0 2px 6px rgba(30,80,140,.12)}
[data-theme="light"] .nav-subtab:hover{background:rgba(26,126,212,.10)}
[data-theme="light"] .nav-subtab.active{background:rgba(26,126,212,.14)}

/* ── Aligned comparison tables ────────────────────────────────────────────── */
/* Side-by-side comparison tables share fixed row heights and column layout so
   headers and rows line up across both tables on every screen width. */
.aligned-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:700px){.aligned-cmp{grid-template-columns:1fr}}
.aligned-cmp table{table-layout:fixed;width:100%}
.aligned-cmp th{height:38px;padding:0 10px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aligned-cmp td{height:44px;padding:0 10px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-split-row{height:34px}
.cmp-split-header{height:26px;display:flex;align-items:center;justify-content:center}

/* ── Hover-expanding sub-tabs in the top bar ──────────────────────────────── */
/* Collapsed by default; expand while hovering the WC 2026 Game tab. On a
   sub-tab page the inline tabs are not rendered — the second row shows them. */
.nav-hover-group{display:flex;align-items:center;flex-shrink:0}
.nav-subtabs-hover{max-width:0;opacity:0;margin-left:0;padding:3px 0;border-width:0;overflow:hidden;flex-wrap:nowrap;transition:max-width .28s ease,opacity .2s ease,margin-left .28s ease,padding .28s ease}
.nav-hover-group:hover .nav-subtabs-hover,
.nav-hover-group:focus-within .nav-subtabs-hover{max-width:640px;opacity:1;margin-left:4px;padding:3px 6px;border-width:1px}
