:root {
  --navy-950: #03131d;
  --navy-900: #061e2d;
  --navy-850: #08283a;
  --navy-800: #0b3449;
  --cyan: #1dc6f2;
  --cyan-soft: #a7ebff;
  --green: #0ed6a0;
  --yellow: #ffc84a;
  --orange: #ff8a3d;
  --red: #ff6472;
  --white: #fff;
  --ink: #0a1b29;
  --muted: #688090;
  --line: #dfe8ee;
  --surface: #f5f8fa;
  --shadow: 0 16px 42px rgba(0, 22, 35, .13);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
button, input, select { font: inherit; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.login-body {
    margin: 0;
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(3, 15, 25, 0.55),
            rgba(3, 15, 25, 0.72)
        ),
        url('../img/gettyimages-1610976022-594x594.jpg');

    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #fff;
}
.login-shell { width: min(500px, calc(100% - 32px)); margin: auto; padding: 52px 0; display: grid; gap: 24px; align-items: center; }
.login-intro { text-align: center; }
.login-intro h1 { margin: 0 0 10px; font-size: clamp(2rem, 8vw, 2.65rem); line-height: 1; letter-spacing: -.045em; }
.login-intro > p { margin: 10px 0 0; color: #a8c2cd; font-size: .88rem; }
.login-kicker { display: inline-flex; color: var(--cyan); font-size: 1rem; font-weight: 800; }
.login-sponsor { margin: 20px auto 0; padding: 11px 15px; max-width: 400px; display: grid; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.login-sponsor span { color: var(--cyan-soft); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.login-sponsor strong { margin: 3px 0; font-size: 1rem; }
.login-sponsor small { color: #c6dce7; }
.login-card { padding: 38px; color: var(--ink); background: var(--white); border-radius: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.login-card__icon { width: 54px; height: 54px; margin: -65px auto 16px; display: grid; place-items: center; font-size: 1.7rem; background: var(--yellow); border: 6px solid var(--navy-900); border-radius: 50%; }
.login-card h2 { margin: 0; font-size: 1.55rem; text-align: center; }
.login-card > p { margin: 7px 0 24px; color: var(--muted); text-align: center; }
.login-form { display: grid; gap: 15px; }
.login-form label { display: grid; gap: 7px; }
.login-form label > span { font-size: .82rem; font-weight: 800; }
.login-form input, .login-form select { width: 100%; padding: 14px 15px; color: var(--ink); background: #f7fafb; border: 2px solid #e1e9ed; border-radius: 13px; outline: 0; }
.login-form input:focus, .login-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(29,198,242,.13); }
.login-form label small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.login-modes { padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #edf3f5; border-radius: 13px; }
.login-modes label { display: block; cursor: pointer; }
.login-modes input { position: absolute; opacity: 0; pointer-events: none; }
.login-modes span { min-height: 42px; padding: 8px; display: grid; place-items: center; color: #617680; text-align: center; border-radius: 10px; font-size: .72rem; font-weight: 850; }
.login-modes input:checked + span { color: #fff; background: var(--navy-850); box-shadow: 0 5px 12px rgba(0,35,52,.18); }
.invite-preview { margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; background: #e7f8fc; border: 1px solid #b7eaf5; border-radius: 13px; }
.invite-preview > span { font-size: 1.7rem; }
.invite-preview small, .invite-preview strong { display: block; }
.invite-preview small { color: var(--muted); font-size: .68rem; }
.invite-preview strong { margin-top: 2px; }
.button { border: 0; border-radius: 13px; padding: 14px 20px; font-weight: 900; cursor: pointer; }
.button--primary { color: var(--white); background: linear-gradient(135deg, #08354b, #061e2d); box-shadow: 0 10px 24px rgba(6,30,45,.22); }
.button--full { width: 100%; }
.login-first-access { display: block; margin-top: -6px; color: var(--muted); text-align: center; font-size: .69rem; }
.login-benefits { margin-top: 22px; padding: 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 16px; color: #477080; background: #edf8fb; border-radius: 13px; font-size: .75rem; font-weight: 800; }
.login-footer { padding: 18px; color: #88aab9; text-align: center; font-size: .78rem; }

/* Fundo da aplicação: atmosfera de estádio sem competir com o conteúdo */
.app-body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 7% 14%, rgba(29,198,242,.24) 0, rgba(29,198,242,.08) 18rem, transparent 35rem),
    radial-gradient(ellipse at 93% 23%, rgba(255,200,74,.20) 0, rgba(255,200,74,.06) 16rem, transparent 34rem),
    radial-gradient(ellipse at 78% 86%, rgba(14,214,160,.12) 0, transparent 30rem),
    linear-gradient(160deg, #03131d 0%, #062536 42%, #083445 70%, #041923 100%);
}
.app-body::before {
  content: "";
  position: fixed;
  inset: 121px 0 0;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 168px, rgba(255,255,255,.035) 169px 171px, transparent 172px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.032) 50%, transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 118px, transparent 118px 236px);
}
.app-body::after {
  content: "";
  position: fixed;
  inset: 121px 0 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 5% 10%, rgba(255,255,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 7% 10%, rgba(255,255,255,.11) 0 2px, transparent 3px),
    radial-gradient(circle at 9% 10%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 13%, rgba(255,255,255,.09) 0 2px, transparent 3px),
    radial-gradient(circle at 93% 13%, rgba(255,255,255,.13) 0 2px, transparent 3px),
    radial-gradient(circle at 95% 13%, rgba(255,255,255,.18) 0 2px, transparent 3px);
}
.topbar { position: sticky; top: 0; z-index: 50; color: var(--white); background: rgba(3,19,29,.97); box-shadow: 0 8px 26px rgba(0,0,0,.16); backdrop-filter: blur(16px); }
.topbar__inner, .main-nav__inner, .page-shell, .app-footer { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }
.topbar__inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__mark { width: 43px; height: 43px; display: grid; place-items: center; background: linear-gradient(145deg, #17485c, #08283a); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .95rem; }
.brand small { margin-top: 2px; color: #8fb4c3; font-size: .68rem; }
.sponsor-mini { margin-left: auto; display: flex; align-items: center; gap: 9px; text-decoration: none; }
.sponsor-mini span { color: #8fb4c3; font-size: .65rem; }
.sponsor-mini strong { color: var(--yellow); }
.sponsor-mini img { display: block; width: auto; height: 34px; object-fit: contain; }
.main-nav { border-top: 1px solid rgba(255,255,255,.07); }
.main-nav__inner { min-height: 47px; display: flex; align-items: stretch; gap: 4px; }
.main-nav a { padding: 0 13px; display: flex; align-items: center; gap: 7px; color: #b9d0da; text-decoration: none; border-bottom: 3px solid transparent; font-size: .78rem; font-weight: 750; }
.main-nav a:hover, .main-nav a.is-active { color: var(--white); background: rgba(255,255,255,.05); border-bottom-color: var(--cyan); }
.nav-user { margin-left: auto; padding: 0 12px; display: flex; align-items: center; color: var(--yellow); font-size: .75rem; font-weight: 850; }
.nav-toggle { display: none; width: 44px; height: 42px; padding: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: #fff; }

/* O conteúdo ganha uma superfície própria; o fundo escuro aparece nas laterais em telas largas */
.page-shell {
  position: relative;
  z-index: 1;
  padding: 30px 28px 74px;
  background:
    radial-gradient(circle at 50% 0, rgba(29,198,242,.055), transparent 26rem),
    linear-gradient(180deg, rgba(250,252,253,.99), rgba(241,246,248,.985));
  border: 1px solid rgba(190,211,220,.55);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 32px 88px rgba(0,12,20,.36);
}
.app-footer { position: relative; z-index: 1; }
.alert { margin-bottom: 16px; padding: 13px 16px; border-radius: 13px; font-size: .86rem; font-weight: 800; }
.alert--erro { color: #8f1723; background: #ffe7ea; border: 1px solid #ffc4ca; }
.alert--sucesso { color: #087553; background: #dcf9ef; border: 1px solid #a7efd8; }
.dashboard-hero { min-height: 220px; padding: 30px 34px; position: relative; display: grid; grid-template-columns: 1fr 200px; gap: 34px; align-items: center; color: var(--white); background:
  radial-gradient(circle at 82% 28%, rgba(29,198,242,.25), transparent 26%),
  linear-gradient(120deg, rgba(8,44,61,.99), rgba(5,28,42,.97)); border: 1px solid #0d526d; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,31,46,.22); overflow: hidden; }
.dashboard-hero::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -108px;
  top: -118px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(255,255,255,.024), 0 0 0 128px rgba(255,255,255,.014);
}
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero h1, .page-heading h1 { margin: 5px 0 9px; font-size: clamp(1.75rem, 4vw, 2.7rem); letter-spacing: -.04em; }
.dashboard-hero p { max-width: 760px; margin: 0; color: #bad3dd; line-height: 1.55; }
.eyebrow { color: var(--cyan); font-size: .7rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.hero-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips span { padding: 7px 10px; color: #d7e8ee; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 999px; font-size: .72rem; font-weight: 750; }
.score-panel { min-height: 158px; padding: 22px; display: grid; place-items: center; text-align: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; }
.score-panel small, .score-panel span { color: #c0d8e1; font-size: .68rem; }
.score-panel strong { color: var(--yellow); font-size: 3rem; line-height: 1; }
.score-panel em { color: var(--cyan-soft); font-size: .72rem; font-style: normal; font-weight: 800; }
.group-cta { margin-top: 16px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #e8f8fc; border: 1px solid #b9e8f2; border-radius: 16px; }
.group-cta > div { display: flex; align-items: center; gap: 11px; }
.group-cta > div > span { font-size: 1.5rem; }
.group-cta p { margin: 0; color: #3d5d6a; font-size: .82rem; }
.group-cta a { color: #fff; text-decoration: none; white-space: nowrap; }
.prize-banner { margin-top: 16px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--white); background: linear-gradient(120deg, color-mix(in srgb, var(--sponsor-color, #805ad5) 55%, #091f2c), #0a2836); border: 1px solid color-mix(in srgb, var(--sponsor-color, #805ad5) 70%, white); border-radius: 18px; box-shadow: 0 10px 26px rgba(4,31,45,.14); }
.prize-banner span, .prize-banner small { display: block; color: #d0e2e8; font-size: .7rem; }
.prize-banner strong { display: block; margin: 3px 0; font-size: 1.08rem; }
.prize-banner__prize { text-align: right; }
.game-toolbar { margin: 34px 0 17px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.game-toolbar h2 { margin: 3px 0 0; font-size: 1.65rem; }
.live-sync { margin: -8px 0 14px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #6e8490; font-size: .66rem; font-weight: 750; }
.live-sync > span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(14,214,160,.12); }
.live-sync.has-update { color: #7d5900; }
.live-sync.has-update > span { background: var(--yellow); }
.live-sync button { padding: 4px 7px; color: #fff; background: var(--navy-850); border: 0; border-radius: 7px; font-size: inherit; font-weight: 850; cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filters button, .filters select { padding: 9px 13px; color: #46616f; background: #fff; border: 1px solid #d8e3e9; border-radius: 11px; font-size: .75rem; font-weight: 800; cursor: pointer; }
.filters button.is-active { color: #fff; background: var(--navy-850); border-color: var(--navy-850); }
.games-list { display: grid; gap: 22px; }
.matchday { scroll-margin-top: 130px; }
.matchday__header { margin-bottom: 10px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: linear-gradient(90deg, #08283a, #0d4155); border-radius: 13px; }
.matchday__header div { display: flex; align-items: center; gap: 9px; }
.matchday__header h3 { margin: 0; font-size: .98rem; }
.matchday__header > span { padding: 5px 9px; color: var(--cyan-soft); background: rgba(255,255,255,.08); border-radius: 999px; font-size: .68rem; font-weight: 850; }
.calendar-icon { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255,255,255,.08); border-radius: 9px; }
.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.game-card { scroll-margin-top: 140px; padding: 17px; display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e9ee; border-radius: 18px; box-shadow: 0 8px 22px rgba(0,35,52,.07); transition: transform .2s, box-shadow .2s; }
.game-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,35,52,.11); }
.game-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.game-type { padding: 4px 8px; border-radius: 999px; }
.game-type--comum { color: #536875; background: #e9eef1; }
.game-type--prata { color: #526779; background: linear-gradient(135deg, #e4e9ed, #bfcbd4); }
.game-type--ouro { color: #705200; background: linear-gradient(135deg, #ffe99a, #ffc842); }
.teams { min-height: 88px; margin-top: 10px; display: grid; grid-template-columns: 1fr 48px 1fr; gap: 8px; align-items: center; }
.team { min-width: 0; display: grid; gap: 5px; }
.team--right { justify-items: end; text-align: right; }
.team__flag { font-size: 1.65rem; }
.team strong { max-width: 100%; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.versus { text-align: center; }
.versus strong, .versus small { display: block; }
.versus strong { font-size: 1.2rem; }
.versus small { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.game-location { min-height: 27px; color: var(--muted); font-size: .65rem; }
.game-status { padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.game-status > span { width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.game-status small { margin-left: auto; font-size: .58rem; text-transform: none; }
.game-status--aberto { color: #087556; background: #dcf8ee; }
.game-status--encerrando { color: #955400; background: #fff0cf; }
.game-status--fechado { color: #5d6b73; background: #e9eef1; }
.game-status--ao-vivo { color: #b51f30; background: #ffe4e7; }
.game-status--ao-vivo > span { animation: pulse 1.2s infinite; }
.game-status--finalizado { color: #245a77; background: #e2f2fa; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.bet-form { margin-top: 12px; display: grid; grid-template-columns: 48px 15px 48px 1fr; gap: 7px; align-items: center; }
.bet-form input { width: 48px; height: 42px; text-align: center; font-weight: 900; border: 2px solid #dbe6eb; border-radius: 10px; outline: 0; }
.bet-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(29,198,242,.12); }
.bet-form > span { text-align: center; font-weight: 900; }
.bet-form button { height: 42px; color: #fff; background: var(--navy-850); border: 0; border-radius: 10px; font-size: .72rem; font-weight: 900; cursor: pointer; }
.bet-form button:hover { background: #0d4b66; }
.my-locked-bet { margin-top: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 8px; color: #087556; background: #def7ed; border-radius: 10px; font-size: .72rem; }
.my-locked-bet strong { margin-left: auto; font-size: .9rem; }
.my-locked-bet em { color: #087556; font-style: normal; font-weight: 900; }
.my-locked-bet--empty { color: #6d7780; background: #eef2f4; }
.public-bets { margin-top: 10px; color: #4c6070; background: #f4f7f8; border: 1px solid #e1e8ec; border-radius: 10px; }
.public-bets summary { padding: 10px 11px; cursor: pointer; font-size: .68rem; font-weight: 850; }
.public-bets summary span { float: right; padding: 2px 6px; background: #e2eaee; border-radius: 999px; }
.public-bets__list { max-height: 140px; padding: 0 10px 10px; display: flex; flex-wrap: wrap; gap: 6px; overflow: auto; }
.public-bets__list > span { padding: 5px 7px; background: #fff; border: 1px solid #e1e7ea; border-radius: 999px; font-size: .64rem; }
.public-bets__list p { margin: 4px; font-size: .68rem; }
.empty-filter { padding: 30px; color: var(--muted); text-align: center; background: #fff; border: 1px dashed #cbd8df; border-radius: 16px; }

.page-heading { margin-bottom: 22px; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: #fff; background: linear-gradient(120deg, #072334, #0b3d50); border-radius: var(--radius); }
.page-heading p { margin: 0; color: #b8ced8; }
.heading-sponsor { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); text-align: right; }
.heading-sponsor span, .heading-sponsor strong { display: block; }
.heading-sponsor span { color: #93b5c2; font-size: .68rem; }
.heading-sponsor strong { color: var(--yellow); }
.podium { margin: 28px auto; max-width: 850px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.podium__place { min-height: 155px; padding: 20px 14px; display: grid; place-items: center; align-content: center; text-align: center; background: #fff; border: 1px solid #e0e8ed; border-radius: 20px 20px 10px 10px; box-shadow: var(--shadow); }
.podium__place--1 { min-height: 190px; border-top: 5px solid var(--yellow); }
.podium__place--2 { border-top: 5px solid #aebbc4; }
.podium__place--3 { border-top: 5px solid #bd7c48; }
.podium__place > span { font-size: 2rem; }
.podium__place small { margin: 5px 0 12px; color: var(--muted); }
.podium__place b { font-size: 1.2rem; }
.podium__place.is-me { box-shadow: 0 0 0 3px var(--cyan), var(--shadow); }
.ranking-card { padding: 24px; background: #fff; border: 1px solid #e0e8ed; border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,35,52,.07); }
.ranking-card h2 { margin-top: 0; }
.pending-invite { margin-bottom: 16px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #573f00; background: #fff2c9; border: 1px solid #f1d16b; border-radius: 16px; }
.pending-invite > div { display: flex; align-items: center; gap: 10px; }
.pending-invite p { margin: 0; }
.pending-invite > div > span { font-size: 1.5rem; }
.group-tools { margin-bottom: 16px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }
.invite-card, .create-group-card { padding: 24px; background: #fff; border: 1px solid #e0e8ed; border-radius: 19px; box-shadow: 0 10px 28px rgba(0,35,52,.07); }
.invite-card { color: #fff; background: linear-gradient(135deg, #07374b, #061f2e); border-color: #0c526b; }
.invite-card h2, .create-group-card h2 { margin: 6px 0 8px; }
.invite-card p { margin: 0 0 16px; color: #c3dbe4; line-height: 1.5; }
.invite-card > small { display: block; margin-top: 10px; color: #88aeba; }
.invite-card--empty { display: grid; place-items: center; align-content: center; text-align: center; }
.invite-card--empty > span { font-size: 2.2rem; }
.invite-card--empty p { margin-bottom: 0; }
.invite-link { display: grid; grid-template-columns: 1fr auto; overflow: hidden; background: #fff; border-radius: 11px; }
.invite-link input { min-width: 0; padding: 12px; color: #47616c; border: 0; outline: 0; }
.invite-link button { padding: 0 16px; color: #fff; background: #0b506b; border: 0; font-weight: 850; cursor: pointer; }
.whatsapp-button { margin-top: 11px; padding: 12px 15px; display: inline-flex; color: #073f2a; background: #72efaa; border-radius: 11px; text-decoration: none; font-size: .82rem; font-weight: 900; }
.create-group-card form { display: grid; gap: 12px; }
.create-group-card label { display: grid; gap: 6px; }
.create-group-card label span { color: var(--muted); font-size: .72rem; font-weight: 850; }
.create-group-card input { width: 100%; padding: 13px; border: 2px solid #dfe8ec; border-radius: 11px; outline: 0; }
.create-group-card input:focus { border-color: var(--cyan); }
.group-switcher { margin-bottom: 16px; padding: 14px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fff; border: 1px solid #e0e8ed; border-radius: 16px; }
.group-switcher > strong { margin-right: 5px; font-size: .78rem; }
.group-switcher form { display: inline-flex; }
.group-switcher button { padding: 8px 11px; color: #4c6470; background: #edf3f5; border: 1px solid #dce6ea; border-radius: 999px; font-size: .72rem; font-weight: 800; cursor: pointer; }
.group-switcher button.is-active { color: #fff; background: var(--navy-850); border-color: var(--navy-850); }
.table-scroll { overflow-x: auto; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 14px; text-align: left; border-bottom: 1px solid #e7edf0; }
.ranking-table th { color: #617783; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.ranking-table td { font-size: .86rem; }
.ranking-table tr.is-me td { background: #e9f8fc; }
.bets-table td:first-child small { margin-top: 3px; display: block; color: var(--muted); }
.rules-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.rule-card { padding: 23px; background: #fff; border: 1px solid #e0e8ed; border-radius: 18px; }
.rule-card > span { font-size: 1.8rem; }
.rule-card h2 { margin: 10px 0 7px; font-size: 1.05rem; }
.rule-card p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.score-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.score-rule { padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; background: #f6f9fa; border: 1px solid #e1e9ed; border-radius: 16px; }
.score-rule h3 { grid-column: 1 / -1; margin: 0 0 8px; }
.score-rule strong { font-size: 1.1rem; }
.score-rule span { color: var(--muted); font-size: .78rem; }
.score-rule em { grid-column: 1 / -1; margin-top: 8px; padding: 8px; color: #7b5b00; background: #fff0bd; border-radius: 9px; font-size: .73rem; font-style: normal; font-weight: 850; }
.app-footer { padding: 22px 0 35px; display: flex; justify-content: space-between; gap: 20px; color: #a7bdc7; font-size: .68rem; }
.admin-games { display: grid; gap: 10px; }
.admin-game { padding: 16px 18px; display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 20px; align-items: center; background: #fff; border: 1px solid #dfe8ed; border-left: 4px solid var(--cyan); border-radius: 15px; }
.admin-game.is-finished { border-left-color: var(--green); opacity: .82; }
.admin-game > div { display: grid; gap: 4px; }
.admin-game span, .admin-game small { color: var(--muted); font-size: .68rem; }
.admin-result-form { display: flex; align-items: center; gap: 6px; }
.admin-result-form input { width: 60px; padding: 9px 6px; text-align: center; border: 1px solid #cfdde4; border-radius: 8px; }
.admin-result-form button { padding: 10px 12px; color: #fff; background: var(--navy-850); border: 0; border-radius: 9px; font-size: .7rem; font-weight: 850; cursor: pointer; }

[hidden] { display: none !important; }

@media (max-width: 1050px) {
  .login-shell { width: min(500px, calc(100% - 32px)); }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .login-shell { width: min(500px, calc(100% - 28px)); padding: 45px 0; gap: 48px; }
  .login-card { padding: 28px 22px; }
  .topbar__inner, .main-nav__inner, .page-shell, .app-footer { width: min(100% - 24px, 1440px); }
  .page-shell { padding: 24px 18px 62px; border-radius: 0 0 22px 22px; }
  .sponsor-mini span { display: none; }
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.1); }
  .main-nav.is-open { display: block; }
  .main-nav__inner { padding: 10px 0; display: grid; }
  .main-nav a, .nav-user { min-height: 44px; padding: 0 13px; border: 0; border-radius: 9px; }
  .nav-user { margin-left: 0; }
  .dashboard-hero { padding: 24px; grid-template-columns: 1fr; }
  .score-panel { min-height: 130px; }
  .prize-banner, .game-toolbar, .page-heading { align-items: stretch; flex-direction: column; }
  .prize-banner__prize, .heading-sponsor { padding-left: 0; text-align: left; border-left: 0; }
  .game-toolbar { align-items: flex-start; }
  .games-grid, .rules-grid, .score-rules, .group-tools { grid-template-columns: 1fr; }
  .pending-invite { align-items: stretch; flex-direction: column; }
  .group-cta { align-items: stretch; flex-direction: column; }
  .podium { grid-template-columns: 1fr; }
  .admin-game { grid-template-columns: 1fr; }
  .admin-result-form { flex-wrap: wrap; }
  .podium__place--1 { order: -1; }
  .app-footer { flex-direction: column; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .sponsor-mini { max-width: 105px; overflow: hidden; white-space: nowrap; }
  .page-shell { padding-top: 16px; }
  .dashboard-hero { padding: 21px 18px; }
  .hero-chips { display: grid; }
  .filters { display: grid; grid-template-columns: repeat(3, auto); width: 100%; }
  .filters select { grid-column: 1 / -1; }
  .matchday__header h3 { font-size: .83rem; }
  .game-card { padding: 15px; }
  .bet-form { grid-template-columns: 48px 15px 48px; }
  .bet-form button { grid-column: 1 / -1; }
}
.login-intro {
    position: relative;
    z-index: 2;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.75);
}

.login-intro h1 {
    color: #fff;
}

.login-kicker {
    color: #fff;
}