:root {
  color-scheme: dark;
  --bg: #07111f;
  --navy: #08182d;
  --navy-2: #0d2742;
  --navy-3: #0f3555;
  --ink: #101a2b;
  --muted: #6b7586;
  --paper: #f5f7fb;
  --card: #ffffff;
  --line: #e4e9f1;
  --line-dark: rgba(255,255,255,.15);
  --gold: #d9b449;
  --green: #0a9b54;
  --red: #e33138;
  --blue: #155be8;
  --purple: #8b2df2;
  --shadow: 0 20px 60px rgba(8, 24, 45, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, rgba(3, 14, 29, .98) 0 16%, rgba(7, 22, 39, .90) 16% 100%),
    linear-gradient(180deg, rgba(4, 14, 27, .58), rgba(4, 14, 27, .95)),
    url("/assets/stadium-bg.svg") center top / cover fixed,
    var(--bg);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10,155,84,.18);
}
button:hover { filter: brightness(1.04); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(21,91,232,.28); outline-offset: 2px; }
button:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
input, select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
}
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 800; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.hint { color: var(--muted); line-height: 1.45; margin: 0; }

.auth-view {
  width: min(1180px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: center;
  padding: 32px 0;
}
.auth-hero { color: #fff; max-width: 760px; }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-brand strong { display: block; font-size: 34px; line-height: .9; }
.auth-brand small, .brand small { display: block; margin-top: 6px; color: #32d06d; font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.auth-hero h1 { margin: 0; font-size: clamp(52px, 8vw, 102px); line-height: .92; letter-spacing: 0; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.auth-hero p:not(.eyebrow) { max-width: 640px; color: #dce6f4; font-size: 20px; line-height: 1.5; }
.auth-card, .sidebar-card, .rail-card, .panel-card, .match-card, .stadium-hero, .kpi-card, .action-card, .bonus-strip { border-radius: 8px; }
.auth-card {
  display: grid;
  gap: 16px;
  background: rgba(255,255,255,.96);
  padding: 24px;
  box-shadow: var(--shadow);
}
.auth-card h2 { margin: 0; color: var(--ink); font-size: 24px; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--green), var(--blue) 58%, var(--red));
  color: #fff;
  font-weight: 950;
  box-shadow: 0 10px 26px rgba(19,138,85,.25);
}
.cup-logo {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 24px 24px 18px 18px;
  background:
    radial-gradient(circle at 50% 17%, #fff 0 8px, transparent 9px),
    linear-gradient(135deg, #0a9b54 0 22%, #fff 22% 38%, #e33138 38% 58%, #d9b449 58% 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 12px 26px rgba(0,0,0,.28);
}
.cup-logo::before { content: ""; position: absolute; inset: 8px 11px 30px; border: 3px solid rgba(8,24,45,.82); border-radius: 50%; }
.cup-logo::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -8px; height: 13px; border-radius: 4px; background: #d9b449; }

.app-layout {
  width: min(1600px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 270px minmax(620px, 1fr) 350px;
  gap: 18px;
  padding: 0 18px 0 0;
}
.sidebar, .right-rail { position: sticky; top: 0; height: 100vh; align-self: start; }
.sidebar {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 20px;
  padding: 26px 12px 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(5,18,35,.98), rgba(3,15,28,.96));
  border-right: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.sidebar::after {
  content: "";
  height: 120px;
  margin: 0 -12px -18px;
  background:
    linear-gradient(180deg, transparent, rgba(5,18,35,.25)),
    radial-gradient(ellipse at center, rgba(40,170,84,.28), transparent 58%),
    linear-gradient(0deg, #0b6736, #123d34);
  border-top: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.brand strong { display: block; font-size: 34px; line-height: .88; letter-spacing: 0; }
.nav-list { display: grid; gap: 8px; align-content: start; margin-top: 6px; }
.nav-item {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  background: transparent;
  color: rgba(255,255,255,.88);
  border: 1px solid transparent;
  text-align: left;
  box-shadow: none;
  padding: 0 16px;
}
.nav-item::before {
  content: attr(data-icon);
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #eaf2ff;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  font-size: 15px;
  font-weight: 900;
}
.nav-item.active { background: linear-gradient(90deg, rgba(10,155,84,.98), rgba(10,155,84,.62)); color: #fff; border-color: rgba(255,255,255,.12); box-shadow: 0 12px 26px rgba(10,155,84,.24); }
.nav-item.active::before { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-card {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  color: #fff;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sidebar-card form { display: grid; gap: 10px; margin-top: 12px; }
.sidebar-card input { background: rgba(255,255,255,.96); }
.countdown-card { align-self: end; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.countdown-grid strong { display: block; color: #17d76c; font-size: 22px; }
.countdown-grid span { color: rgba(255,255,255,.68); font-size: 10px; text-transform: uppercase; }
.secondary { background: #edf2f7; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.danger { background: var(--red); color: #fff; }

.content-shell { min-width: 0; display: grid; gap: 0; align-content: start; padding: 70px 0 44px; }
.stadium-hero {
  position: relative;
  min-height: 292px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: #fff;
  padding: 32px 46px;
  background:
    linear-gradient(90deg, rgba(8,20,37,.56), rgba(8,20,37,.70)),
    radial-gradient(circle at 76% 30%, rgba(217,180,73,.32), transparent 26%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 60px),
    url("/assets/stadium-bg.svg") center / cover,
    linear-gradient(140deg, rgba(10,155,84,.60), rgba(227,49,56,.44) 52%, rgba(21,91,232,.56));
  border: 1px solid rgba(255,255,255,.16);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
.stadium-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.22)); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.stadium-hero h2 { margin: 0; font-size: clamp(44px, 5.2vw, 78px); line-height: .94; letter-spacing: 0; text-shadow: 0 8px 24px rgba(0,0,0,.48); }
.hero-hosts { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: clamp(18px, 2vw, 27px); font-weight: 950; text-transform: uppercase; }
.hero-hosts span:nth-child(1) { color: #12bd60; }
.hero-hosts span:nth-child(3) { color: #ff313d; }
.hero-hosts span:nth-child(5) { color: #2c73ff; }
.hero-hosts i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .9; }
.hero-art { position: relative; z-index: 1; flex: 0 0 360px; height: 190px; }
.trophy-shape {
  position: absolute;
  left: 126px;
  top: -18px;
  width: 110px;
  height: 214px;
  border-radius: 54px 54px 26px 26px;
  background: linear-gradient(135deg, #fff0a1, #d79a23 45%, #8a5d12 100%);
  box-shadow: 0 0 32px rgba(217,180,73,.55), inset -12px -10px 24px rgba(94,55,9,.28);
}
.trophy-shape::before { content: ""; position: absolute; left: -36px; right: -36px; top: 36px; height: 58px; border: 12px solid rgba(217,180,73,.90); border-bottom: 0; border-radius: 58px 58px 0 0; }
.trophy-shape::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -20px; height: 34px; background: #9d6e18; border-radius: 8px; box-shadow: 0 20px 0 #d79a23; }
.flag { position: absolute; top: 54px; width: 126px; height: 74px; border-radius: 8px; box-shadow: 0 16px 28px rgba(0,0,0,.28); transform: rotate(-6deg); }
.flag-mx { left: 0; background: linear-gradient(90deg,#078b4f 0 33%,#fff 33% 66%,#d72f35 66%); }
.flag-ca { right: 92px; background: linear-gradient(90deg,#d62b33 0 25%,#fff 25% 75%,#d62b33 75%); transform: rotate(4deg); }
.flag-us { right: 0; top: 68px; background: repeating-linear-gradient(180deg,#c82931 0 8px,#fff 8px 16px); transform: rotate(9deg); }
.flag-us::before { content: ""; position: absolute; left: 0; top: 0; width: 55px; height: 42px; background: #183b86; border-top-left-radius: 8px; }
.view-root { display: grid; gap: 18px; padding: 0 10px 0 10px; background: #f7f9fc; border: 1px solid rgba(255,255,255,.7); border-top: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-kpis { margin: -54px 0 0; position: relative; z-index: 5; padding: 0 0 0; }
.kpi-card, .panel-card, .match-card, .action-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(8,24,45,.08);
}
.kpi-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
}
.kpi-icon, .action-icon, .bonus-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 950;
}
.kpi-icon.green { background: #e8f8ef; color: var(--green); }
.kpi-icon.blue { background: #edf3ff; color: var(--blue); }
.kpi-icon.gold { background: #fff6da; color: #bd8e09; }
.kpi-icon.purple { background: #f3eafe; color: var(--purple); }
.kpi-card span { color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; }
.kpi-card strong { display: block; margin: 4px 0; font-size: 25px; line-height: 1.1; }
.progress { height: 5px; border-radius: 999px; background: #e8edf5; overflow: hidden; margin-top: 10px; }
.progress span { display: block; height: 100%; background: var(--green); }
.panel-card { padding: 20px; }
.panel-card h2, .panel-card h3, .rail-card h3 { margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-head h2 { font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.section-link { background: transparent; color: var(--blue); min-height: 32px; padding: 0; box-shadow: none; }
.match-row { display: grid; grid-template-columns: 102px 92px 1fr 42px 1fr 122px; gap: 14px; align-items: center; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(8,24,45,.04); }
.match-row + .match-row { margin-top: 8px; }
.match-time { color: #34445c; font-size: 13px; font-weight: 850; }
.match-stage { color: var(--green); font-size: 12px; font-weight: 950; }
.team-cell { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 850; }
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs { text-align: center; color: #172236; font-weight: 900; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 8px; padding: 0 12px; border: 1px solid #bfe9cf; background: #f0fbf5; color: var(--green); font-size: 12px; font-weight: 950; }
.status-pill.open { border-color: #dbe5f5; color: var(--blue); background: #f3f7ff; }
.flag-dot { width: 28px; height: 20px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; background: linear-gradient(90deg, #0a9b54 33%, #fff 33% 66%, #e33138 66%); }
.flag-dot.alt { background: linear-gradient(180deg, #e33138 0 33%, #fff 33% 66%, #155be8 66%); }
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.action-card { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; padding: 16px; text-align: left; color: var(--ink); box-shadow: 0 10px 20px rgba(8,24,45,.06); }
.action-card strong { display: block; }
.action-card span:not(.action-icon) { color: var(--muted); font-size: 12px; font-weight: 700; }
.action-icon { border-radius: 14px; background: #eef4ff; color: var(--blue); }
.action-card:nth-child(2) .action-icon { background: #ecf8f1; color: var(--green); }
.action-card:nth-child(3) .action-icon { background: #fff0ef; color: var(--red); }
.action-card:nth-child(4) .action-icon { background: #fff7df; color: #bd8e09; }
.bonus-strip { position: relative; display: grid; grid-template-columns: 1fr 190px; gap: 20px; align-items: center; min-height: 136px; padding: 24px 28px; color: #fff; overflow: hidden; background: radial-gradient(circle at 82% 50%, rgba(217,180,73,.38), transparent 28%), linear-gradient(110deg, #061831, #0b2c55 52%, #061831); box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.bonus-strip h2 { margin: 0 0 18px; color: #fff; font-size: 17px; text-transform: uppercase; }
.bonus-items { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.bonus-item { display: flex; align-items: center; gap: 10px; }
.bonus-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.09); color: var(--gold); }
.boot-shape { justify-self: center; width: 128px; height: 58px; border-radius: 16px 48px 18px 18px; background: linear-gradient(135deg, #ffe485, #d89d24 58%, #8f5e12); transform: rotate(-18deg); box-shadow: 0 0 36px rgba(217,180,73,.45); }
.boot-shape::after { content: ""; display: block; width: 76px; height: 14px; margin: 54px 0 0 30px; border-radius: 999px; background: rgba(217,180,73,.35); filter: blur(8px); }

.match-card { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; padding: 18px; }
.match-title { font-size: 18px; font-weight: 950; line-height: 1.25; }
.match-meta { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 8px 0 0; }
.prediction-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.prediction-form button { grid-column: 1 / -1; }
.prediction-form input { text-align: center; padding: 0; font-weight: 900; }
.status { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; padding: 0 11px; font-size: 12px; font-weight: 900; background: #eef4ff; color: var(--blue); margin-top: 10px; }
.status.saved { background: #edf9f2; color: var(--green); }
.status.locked { background: #fff3f1; color: var(--red); }
.result-line, .public-picks { grid-column: 1 / -1; color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chip { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; background: #f7f9fc; font-weight: 800; color: var(--ink); }
.group-stack { display: grid; gap: 14px; }
.round-title { color: #fff; margin: 10px 0 0; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.table td:last-child, .table th:last-child { text-align: right; }
.bonus-form, .admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bonus-form button, .admin-form button, .admin-form .wide { grid-column: 1 / -1; }
.right-rail { display: grid; gap: 18px; align-content: start; padding: 70px 0 18px; }
.rail-card { background: rgba(255,255,255,.96); color: var(--ink); border: 1px solid rgba(255,255,255,.64); padding: 20px; box-shadow: 0 18px 42px rgba(0,0,0,.14); }
.rail-card .hint { color: var(--muted); }
.leader-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 8px; }
.leader-row + .leader-row { margin-top: 4px; }
.leader-row.highlight { background: #eaf8ee; color: #087a42; }
.leader-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.result-row:last-child { border-bottom: 0; }
.result-score { font-size: 17px; font-weight: 950; color: var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .nav-item, .toolbar button { width: auto; min-height: 36px; background: #edf2f7; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.toolbar .active { background: var(--navy); color: #fff; }
.pill { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; padding: 0 11px; font-size: 12px; font-weight: 900; }
.notice { border-left: 4px solid var(--gold); background: #fff8df; padding: 12px; border-radius: 8px; color: #4c3d10; }
.error { color: var(--red); font-weight: 800; }
.success { color: var(--green); font-weight: 800; }
.mobile-topbar, .mobile-nav { display: none; }

@media (max-width: 1280px) {
  .app-layout { grid-template-columns: 250px minmax(0, 1fr); padding-right: 18px; }
  .right-rail { position: static; height: auto; grid-column: 2; grid-template-columns: repeat(3, minmax(0,1fr)); padding-top: 0; }
}
@media (max-width: 980px) {
  body { background: linear-gradient(180deg, rgba(5,18,35,.96), rgba(5,18,35,.90)), url("/assets/stadium-bg.svg") center top / cover fixed; }
  .auth-view { grid-template-columns: 1fr; align-content: center; }
  .app-layout { display: block; padding: 76px 12px 82px; }
  .sidebar { display: none; position: fixed; z-index: 30; left: 12px; right: 12px; top: 64px; height: auto; max-height: calc(100vh - 150px); overflow: auto; border-radius: 8px; padding: 16px; }
  .sidebar::after, .countdown-card { display: none; }
  .sidebar.open { display: grid; }
  .mobile-topbar { display: flex; position: fixed; z-index: 40; top: 0; left: 0; right: 0; min-height: 58px; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(7,17,31,.94); color: #fff; border-bottom: 1px solid var(--line-dark); backdrop-filter: blur(14px); }
  .mobile-topbar .cup-logo { width: 32px; height: 45px; }
  .mobile-topbar .brand strong { font-size: 18px; line-height: 1; }
  .content-shell { padding: 0; }
  .right-rail { display: none; }
  .stadium-hero { min-height: 230px; padding: 22px; align-items: flex-start; flex-direction: column; }
  .hero-art { position: absolute; right: -90px; bottom: 0; opacity: .8; transform: scale(.72); }
  .view-root { padding: 0 8px 12px; }
  .dashboard-kpis { margin-top: -38px; }
  .grid-2, .grid-3, .grid-4, .match-card, .bonus-form, .admin-form, .bonus-strip { grid-template-columns: 1fr; }
  .action-grid, .bonus-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-row { grid-template-columns: 74px 70px 1fr 28px 1fr; gap: 8px; }
  .match-row .status-pill { grid-column: 1 / -1; justify-self: start; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; background: rgba(7,17,31,.96); border-top: 1px solid var(--line-dark); padding: 8px; gap: 6px; }
  .mobile-nav .nav-item { text-align: center; justify-content: center; min-height: 42px; padding: 0 8px; }
  .mobile-nav .nav-item::before { display: none; }
}
@media (max-width: 560px) {
  .auth-view { width: min(100% - 22px, 1180px); }
  .auth-hero h1 { font-size: 48px; }
  .stadium-hero h2 { font-size: 42px; }
  .match-row { grid-template-columns: 1fr auto 1fr; }
  .match-row .match-time, .match-row .match-stage { grid-column: 1 / -1; }
  .team-cell { font-size: 13px; }
  .flag-dot { display: none; }
  .action-grid, .bonus-items { grid-template-columns: 1fr; }
  .panel-card, .match-card, .kpi-card { padding: 14px; }
  .table th:nth-child(4), .table td:nth-child(4) { display: none; }
}