:root {
  --bg: #0a0d12;
  --bg-soft: #0f141b;
  --panel: #121923;
  --panel-2: #171f2b;
  --line: #263140;
  --text: #f3f5f7;
  --muted: #8f9baa;
  --gold: #d6aa4a;
  --gold-strong: #f0c75e;
  --gold-soft: rgba(214,170,74,.13);
  --green: #3ad17d;
  --green-soft: rgba(58,209,125,.12);
  --red: #ff5e6c;
  --red-soft: rgba(255,94,108,.12);
  --blue: #6da8ff;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(214,170,74,.07), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }

.app-nav {
  background: rgba(10,13,18,.88);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
.navbar-brand { font-size: 1.05rem; color: #fff; }
.navbar-brand:hover { color: #fff; }
.brand-ball { margin-right: .3rem; }
.nav-link { color: #aeb8c3; border-radius: .55rem; padding: .55rem .8rem !important; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-accent { color: var(--gold-strong) !important; }
.nav-admin { color: #ff9aa3 !important; }

.app-container { padding-top: 2rem; padding-bottom: 2rem; }

.hero-card {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  padding: 2.2rem;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(214,170,74,.24);
  border-radius: 1.35rem;
  background:
    linear-gradient(135deg, rgba(214,170,74,.11), transparent 45%),
    var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.hero-card h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: .95; margin: .35rem 0 .8rem; letter-spacing: -.05em; }
.hero-card p { color: var(--muted); max-width: 42rem; margin: 0; font-size: 1.05rem; }

.eyebrow {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.score-rules {
  display: grid;
  gap: .5rem;
  min-width: 210px;
}
.score-rules div {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #c4ccd5;
}
.score-rules span {
  color: var(--gold-strong);
  font-size: 1.15rem;
  font-weight: 900;
  min-width: 2.2rem;
}

.user-strip, .notice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.3rem;
  border-radius: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.user-strip strong { display: block; }
.muted-label, .notice-card span { color: var(--muted); font-size: .9rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.2rem;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.section-head h2 { margin: .15rem 0 0; font-size: 1.15rem; }
.text-link { color: var(--gold-strong); font-size: .9rem; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
  border: 0;
  color: #17120a;
  font-weight: 800;
}
.btn-gold:hover { background: var(--gold-strong); color: #17120a; }
.btn-ghost {
  color: #d9dfe6;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.btn-ghost:hover { background: #202a37; color: #fff; }

.ranking-list { display: grid; }
.ranking-row {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  gap: .8rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-list.compact .ranking-row { grid-template-columns: 42px 1fr auto; }
.rank-position {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #202834;
  color: #b7c0cb;
  font-weight: 800;
}
.rank-position.first {
  background: var(--gold);
  color: #161109;
  box-shadow: 0 0 0 4px rgba(214,170,74,.12);
}
.rank-name { font-weight: 700; }
.rank-meta { color: var(--muted); font-size: .82rem; }
.rank-points { color: var(--gold-strong); font-weight: 900; }
.rank-points small { color: var(--muted); font-weight: 500; }

.result-list { display: grid; gap: .5rem; }
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--bg-soft);
}
.result-row:hover { border-color: rgba(214,170,74,.4); }
.result-row small { display:block; color: var(--muted); margin-bottom: .15rem; }
.result-row strong span { color: var(--gold-strong); margin: 0 .25rem; }
.arrow { color: var(--muted); font-size: 1.5rem; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  margin: .5rem 0 1.5rem;
}
.page-head h1 { margin: .25rem 0; font-size: clamp(1.8rem, 5vw, 2.75rem); letter-spacing: -.035em; }
.page-head p { color: var(--muted); margin: 0; }

.app-table { --bs-table-bg: transparent; --bs-table-color: var(--text); }
.app-table thead th {
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-color: var(--line);
  padding: .85rem 1rem;
}
.app-table td {
  border-color: rgba(255,255,255,.06);
  padding: 1rem;
  vertical-align: middle;
}
.table-sub { color: var(--muted); font-size: .78rem; margin-top: .15rem; }
.points-big { font-size: 1.2rem; color: var(--gold-strong); font-weight: 900; }

.round-grid, .match-grid {
  display: grid;
  gap: 1rem;
}
.round-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.match-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.round-card, .match-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 1rem;
  padding: 1rem;
}
.round-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.round-card:hover, .match-card:hover { border-color: rgba(214,170,74,.33); }
.round-number {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: .8rem;
  background: var(--gold-soft);
  color: var(--gold-strong);
  font-weight: 900;
}
.progress-line { color: var(--muted); font-size: .82rem; margin-top: .25rem; }

.match-card.finished { border-color: rgba(58,209,125,.25); }
.match-status {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 1rem;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .72rem;
  font-weight: 800;
}
.status-pill.done { background: var(--green-soft); color: var(--green); }
.status-pill.pending { background: rgba(255,255,255,.06); color: #aeb8c3; }
.status-pill.saved { background: var(--gold-soft); color: var(--gold-strong); }

.players { display: grid; gap: .5rem; margin-bottom: 1rem; }
.player-line { display:flex; justify-content:space-between; align-items:center; }
.set-score {
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius:.6rem;
  background: var(--bg-soft);
  font-weight:900;
  font-size:1.15rem;
}

.round-select-box { min-width: min(330px, 100%); }
.round-select-box label { display:block; color:var(--muted); font-size:.75rem; margin-bottom:.3rem; }

.round-banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.85rem 1rem;
  border-radius:.85rem;
  margin-bottom:1rem;
}
.round-banner.open { background:var(--green-soft); border:1px solid rgba(58,209,125,.25); }
.round-banner.closed { background:var(--red-soft); border:1px solid rgba(255,94,108,.25); }
.round-banner strong { margin-right:.5rem; }
.round-banner span, .round-banner small { color:var(--muted); }

.versus-title {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.7rem;
  text-align:center;
  margin:1.1rem 0;
}
.versus-title span { color:var(--muted); }

.final-score {
  text-align:center;
  font-size:2.2rem;
  font-weight:900;
  color:var(--gold-strong);
  margin-bottom:1rem;
}
.final-score span { color:var(--muted); font-weight:400; }

.saved-prediction {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.7rem;
  padding:.75rem;
  border-radius:.75rem;
  background:var(--bg-soft);
  margin-bottom:.8rem;
}

.score-options {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem;
}
.score-option input { position:absolute; opacity:0; pointer-events:none; }
.score-option span {
  display:grid; place-items:center;
  min-height:50px;
  border:1px solid var(--line);
  border-radius:.75rem;
  background:var(--bg-soft);
  font-size:1.15rem;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}
.score-option input:checked + span {
  border-color:var(--gold);
  background:var(--gold-soft);
  color:var(--gold-strong);
  box-shadow:inset 0 0 0 1px var(--gold);
}

.set-entry-wrap { margin-top:1rem; }
.set-entry-head {
  display:flex; justify-content:space-between; gap:1rem;
  margin-bottom:.6rem; color:var(--muted); font-size:.82rem;
}
.set-entry {
  display:grid;
  grid-template-columns:52px 1fr auto 1fr;
  gap:.5rem;
  align-items:center;
  margin-bottom:.55rem;
}
.set-label { font-size:.82rem; color:var(--muted); }
.set-x { color:var(--muted); }
.set-entry.hidden-set { display:none; }

.form-control, .form-select {
  background:#0d1218;
  border-color:var(--line);
  color:#fff;
}
.form-control:focus, .form-select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 .18rem rgba(214,170,74,.12);
  background:#0d1218;
  color:#fff;
}
.form-control::placeholder { color:#627080; }

.locked-box, .info-box {
  padding:.8rem;
  border-radius:.75rem;
  color:var(--muted);
  background:var(--bg-soft);
  border:1px solid var(--line);
}

.result-hero {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:1.4rem;
  margin-bottom:1rem;
  border-radius:1rem;
  background:linear-gradient(135deg,var(--gold-soft),var(--panel));
  border:1px solid rgba(214,170,74,.25);
}
.result-player { display:flex; align-items:center; justify-content:flex-end; gap:.8rem; }
.result-player.reverse { justify-content:flex-start; }
.result-player strong { font-size:2.5rem; color:var(--gold-strong); }
.result-divider { color:var(--muted); font-size:1.5rem; }
.real-set-list {
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
}
.real-set-list span {
  padding:.35rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:var(--muted);
}

.prediction-results { display:grid; gap:.8rem; }
.prediction-result-card {
  padding:1rem;
  border-radius:.9rem;
  background:var(--bg-soft);
  border:1px solid var(--line);
}
.prediction-result-card.perfect {
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,170,74,.18), 0 0 30px rgba(214,170,74,.08);
}
.prediction-user-head {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-bottom:.8rem;
}
.points-chip {
  padding:.3rem .55rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-weight:900;
}
.points-chip.gold { background:var(--gold-soft); color:var(--gold-strong); }

.prediction-main-score {
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem;
  margin-bottom:.7rem;
}
.prediction-main-score > span:first-child { color:var(--muted); }
.prediction-main-score strong { font-size:1.35rem; }

.result-tag {
  padding:.25rem .45rem;
  border-radius:.45rem;
  font-size:.68rem;
  font-weight:900;
}
.result-tag.gold { background:var(--gold-soft); color:var(--gold-strong); }
.result-tag.success { background:var(--green-soft); color:var(--green); }
.result-tag.danger { background:var(--red-soft); color:var(--red); }

.text-gold { color:var(--gold-strong)!important; }
.text-success { color:var(--green)!important; }
.text-danger { color:var(--red)!important; }

.set-result-list { display:flex; flex-wrap:wrap; gap:.45rem; }
.set-result {
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.38rem .55rem;
  border-radius:.55rem;
  border:1px solid var(--line);
}
.set-result span { color:var(--muted); font-size:.75rem; }
.set-result small { font-size:.62rem; font-weight:900; }
.set-result.exact {
  border-color:rgba(214,170,74,.35);
  background:var(--gold-soft);
  color:var(--gold-strong);
}
.set-result.wrong {
  border-color:rgba(255,94,108,.2);
  background:var(--red-soft);
}
.set-result.wrong small { color:var(--red); }

.perfect-banner {
  margin-top:.8rem;
  padding:.5rem;
  text-align:center;
  border-radius:.55rem;
  color:#1a1408;
  background:linear-gradient(90deg,var(--gold),var(--gold-strong));
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.08em;
}

.auth-shell { min-height:65vh; display:grid; place-items:center; }
.auth-card {
  width:min(440px,100%);
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:var(--panel);
}
.auth-card h1 { margin:.25rem 0; }
.auth-card p { color:var(--muted); }

.admin-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.admin-grid .section-head { margin-bottom:.9rem; }

.token-link { color:#91bfff; font-size:.78rem; word-break:break-all; }

.empty-state {
  padding:1.4rem;
  text-align:center;
  color:var(--muted);
}

@media (max-width: 991px) {
  .admin-grid { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
  .app-container { padding-top:1.1rem; }
  .hero-card { padding:1.25rem; align-items:start; flex-direction:column; gap:1.2rem; }
  .score-rules { min-width:0; width:100%; grid-template-columns:repeat(3,1fr); }
  .score-rules div { display:grid; gap:.05rem; font-size:.72rem; }
  .score-rules span { font-size:1rem; }

  .user-strip, .notice-card { align-items:flex-start; flex-direction:column; }

  .page-head { align-items:stretch; flex-direction:column; }
  .round-grid, .match-grid { grid-template-columns:1fr; }
  .ranking-row { grid-template-columns:36px 1fr auto; }
  .rank-meta { display:none!important; }

  .score-options { grid-template-columns:repeat(4,1fr); }
  .score-option span { min-height:44px; font-size:1rem; }

  .set-entry { grid-template-columns:42px minmax(0,1fr) auto minmax(0,1fr); }
  .set-entry input { min-width:0; padding:.55rem .45rem; }

  .result-hero { grid-template-columns:1fr auto 1fr; padding:1rem; }
  .result-player { flex-direction:column; gap:.15rem; }
  .result-player.reverse { flex-direction:column-reverse; }
  .result-player span { font-size:.85rem; text-align:center; }
  .result-player strong { font-size:2rem; }

  .app-table td, .app-table thead th { padding:.8rem .65rem; }
  .token-link { max-width:180px; display:block; }

  .prediction-main-score { align-items:flex-start; }
}

@media (max-width: 430px) {
  .score-rules { grid-template-columns:1fr; }
  .score-rules div { display:flex; }
  .score-options { gap:.35rem; }
  .score-option span { min-height:42px; }
}


.access-actions form { margin: 0; }
@media (max-width: 767px) {
  .access-actions { justify-content: flex-start !important; }
  .access-actions .btn { white-space: nowrap; }
}