:root {
  --app-bg: #f5f7fb;
  --app-card: rgba(255,255,255,0.9);
  --app-border: rgba(15, 23, 42, 0.08);
  --app-text: #0f172a;
  --app-muted: #64748b;
  --app-primary: #111827;
  --app-accent: #2563eb;
}

body {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(15,23,42,0.07), transparent 20%),
    var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
}

.app-navbar {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
}

.glass-card,
.card-modern {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.hero-sub {
  color: var(--app-muted);
  font-size: 1.05rem;
  max-width: 720px;
}

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

.metric-card {
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background: white;
  border: 1px solid var(--app-border);
}

.match-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(15,23,42,0.09);
}

.team-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.score-input {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: .9rem;
  min-height: 52px;
}

.ranking-table tbody tr {
  vertical-align: middle;
}

.badge-soft {
  background: rgba(37,99,235,.1);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,.08);
}

.login-shell {
  min-height: calc(100vh - 120px);
}

.toast-wrap {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
}