*{box-sizing:border-box}body{margin:0;background:#f7f7fb;color:#14141b;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}.hidden{display:none!important}button{cursor:pointer}.auth-view{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 15%,rgba(227,6,19,.2),transparent 18rem),linear-gradient(135deg,#121217,#2b0f13)}.auth-card{width:min(480px,100%);background:#fff;border-radius:28px;padding:clamp(22px,4vw,38px);box-shadow:0 30px 90px rgba(0,0,0,.25)}.pill{display:inline-flex;width:fit-content;border-radius:999px;background:#ffe9ea;color:#9f0710;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.1em;padding:8px 12px}h1,h2,h3{text-transform:uppercase;letter-spacing:-.075em;line-height:.82}h1{font-size:clamp(42px,8vw,78px);margin:18px 0 12px}h2{font-size:clamp(34px,6vw,62px);margin:0}h3{font-size:32px;margin:0 0 16px}p{color:#6b7280;line-height:1.65}.tabs{display:flex;background:#f1f1f4;border-radius:999px;padding:6px;gap:6px;margin:22px 0}.tabs button{flex:1;border:0;border-radius:999px;background:transparent;padding:12px;font-weight:950}.tabs button.active{background:#14141b;color:#fff}form{display:grid;gap:14px}label{display:grid;gap:6px;font-weight:850}input,select{width:100%;border:1px solid rgba(20,20,27,.12);border-radius:15px;padding:13px 14px;background:#fff}input:focus,select:focus{outline:none;border-color:#e30613;box-shadow:0 0 0 4px rgba(227,6,19,.1)}.primary{border:0;border-radius:999px;background:linear-gradient(135deg,#e30613,#14141b);color:#fff;font-weight:1000;min-height:50px;padding:12px 16px;box-shadow:0 16px 38px rgba(227,6,19,.18)}.link-btn{border:0;background:transparent;color:#6b7280;margin-top:12px}.message{min-height:18px;color:#b91c1c;font-weight:850}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px clamp(16px,3vw,32px);background:rgba(247,247,251,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,20,27,.1)}.logo{display:flex;gap:8px;align-items:center}.topbar nav{display:flex;gap:6px;flex-wrap:wrap}.nav,.userbox button{border:1px solid rgba(20,20,27,.1);background:#fff;border-radius:999px;padding:10px 14px;font-weight:950}.nav.active{background:#14141b;color:#fff}.userbox{display:flex;align-items:center;gap:10px;color:#6b7280;font-weight:850}main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:32px 0 80px}.hero{display:grid;grid-template-columns:1fr 220px;gap:18px;margin-bottom:22px}.hero>div,.section-head,.fixture-card,.row,.form-card{background:#fff;border:1px solid rgba(20,20,27,.1);border-radius:26px;box-shadow:0 20px 55px rgba(20,20,27,.08)}.hero>div:first-child{padding:28px}.score-card{display:grid;place-items:center;text-align:center;padding:24px;background:#14141b!important;color:#fff}.score-card span{color:rgba(255,255,255,.65);text-transform:uppercase;font-weight:950;letter-spacing:.08em}.score-card strong{font-size:76px;line-height:.9}.score-card small{color:#ffd447;font-weight:1000}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;padding:22px;margin-bottom:16px}.section-head p{margin:8px 0 0}.filters{display:flex;gap:10px;flex-wrap:wrap}.panel{display:none}.panel.active{display:block}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fixture-card{padding:20px;display:grid;gap:14px;transition:.2s}.fixture-card:hover{transform:translateY(-4px);box-shadow:0 24px 65px rgba(20,20,27,.12)}.meta{display:flex;justify-content:space-between;gap:8px;color:#6b7280;font-weight:850;font-size:14px}.teams{font-size:26px;text-transform:uppercase;font-weight:1000;letter-spacing:-.06em;line-height:.95}.fixture-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}.status{border-radius:999px;background:#f1f1f4;padding:7px 10px;text-transform:uppercase;font-size:12px;font-weight:950;letter-spacing:.08em}.status.locked{background:#fee2e2;color:#991b1b}.status.scored{background:#dcfce7;color:#166534}.small{border:1px solid rgba(20,20,27,.12);border-radius:999px;background:#fff;font-weight:1000;padding:10px 13px}.list{display:grid;gap:12px}.row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px}.points{font-size:24px;font-weight:1000;color:#e30613}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card{padding:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}dialog{border:0;border-radius:28px;padding:0;width:min(560px,calc(100% - 24px));box-shadow:0 30px 90px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(5px)}.dialog-form{padding:26px;position:relative}.close{position:absolute;right:16px;top:16px;border:0;border-radius:999px;width:40px;height:40px;background:#f1f1f4;font-size:26px}@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.hero,.grid,.admin-grid{grid-template-columns:1fr}.section-head{align-items:stretch;flex-direction:column}.filters input,.filters select{width:100%}.userbox{width:100%;justify-content:space-between}}@media(max-width:560px){main{width:min(100% - 24px,1180px)}h1{font-size:clamp(36px,13vw,56px)}.two,.row{grid-template-columns:1fr}.topbar nav,.nav{width:100%}.teams{font-size:22px}}

/* Hosted at Home nav link adjustment */
.logo,
.nav-link {
  text-decoration: none;
  color: inherit;
}

.nav-link {
  display: inline-flex;
  align-items: center;
}

.leaderboard-switch{display:flex;gap:8px;flex-wrap:wrap}.leaderboard-switch button{border:1px solid rgba(20,20,27,.12);background:#fff;border-radius:999px;padding:10px 14px;font-weight:1000}.leaderboard-switch button.active{background:#14141b;color:#fff}.import-card{background:linear-gradient(135deg,#fff,#fff5f5)!important}


.unlock-note {
  border-style: dashed;
  background: rgba(255,255,255,0.82);
}


/* Admin match stats */
.stats-card {
  grid-column: span 2;
}

.stats-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.stats-card-head p,
.stats-list-card p,
.fixture-summary span {
  color: var(--muted);
}

.fixture-summary {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(20,20,20,0.08);
  line-height: 1.45;
}

.scoreline-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
}

.scoreline-v {
  padding-bottom: 14px;
  font-weight: 900;
  color: var(--muted);
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ghost {
  border: 1px solid rgba(20,20,20,0.14);
  background: rgba(255,255,255,0.72);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
}

.stats-list-card {
  grid-column: span 2;
}

.admin-results-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.admin-result-row {
  width: 100%;
  border: 1px solid rgba(20,20,20,0.08);
  background: rgba(255,255,255,0.78);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.admin-result-row strong,
.admin-result-row small {
  display: block;
}

.admin-result-row small {
  margin-top: 3px;
  color: var(--muted);
}

.admin-result-row em {
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-result-row .done {
  color: #166534;
}

.admin-result-row .todo {
  color: #b45309;
}

.muted {
  color: var(--muted);
}

@media (max-width: 760px) {
  .stats-card,
  .stats-list-card {
    grid-column: span 1;
  }

  .scoreline-grid {
    grid-template-columns: 1fr;
  }

  .scoreline-v {
    display: none;
  }

  .stats-card-head {
    flex-direction: column;
  }
}


/* Faster prediction flow */
.dialog-form small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.tiny-tip {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.prediction-summary {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(20,20,20,0.08);
  font-size: 0.9rem;
  color: var(--muted);
}

.prediction-summary strong {
  color: var(--ink);
}

input[readonly] {
  background: rgba(20,20,20,0.05);
  cursor: not-allowed;
}