/* WC2026 Predictor webapp — light theme, màu dịu mắt, KHÔNG gradient.
   Màu định nghĩa bằng biến RGB channels để Tailwind (qua /js/tw.js) + component cùng dùng. */

:root {
  /* slate ramp (light-only, tông mềm) — thấp = chữ đậm, cao = nền sáng */
  --slate-50: 30 42 58;     --slate-100: 40 53 72;   --slate-200: 45 58 79;
  --slate-300: 59 74 94;    --slate-400: 91 102 117; --slate-500: 123 133 149;
  --slate-600: 154 163 178; --slate-700: 216 221 229;--slate-800: 233 236 241;
  --slate-900: 241 243 246; --slate-950: 245 246 248;
  /* brand — xanh VNPAY (Endeavour #005BAA, Resolution Blue #002C77, Sail #A6E3FA) */
  --brand-200: 166 227 250; --brand-300: 30 120 194; --brand-400: 0 104 182;
  --brand-500: 0 91 170;    --brand-600: 0 68 140;   --brand-700: 0 44 119;
  /* accent — cam đất nhẹ (thay blue) */
  --accent-300: 224 168 120; --accent-400: 214 145 90; --accent-500: 201 127 69;
  /* app — nền & thẻ phẳng, không gradient */
  --app-bg: #f5f6f8;
  --card-bg: #ffffff;
  --card-flat-bg: #fafbfd;
  --header-bg: rgba(255, 255, 255, 0.85);
  color-scheme: light;
}

body {
  font-family: 'Lexend', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--app-bg);
  min-height: 100vh;
  color: rgb(var(--slate-300));
}
h1, h2, h3, h4 { font-family: 'Lexend', system-ui, sans-serif; letter-spacing: -0.01em; color: rgb(var(--slate-200)); }

/* Nav */
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  color: rgb(var(--slate-300)); font-size: 14px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease; text-decoration: none;
}
.nav-link:hover { background: rgb(var(--brand-500) / 0.10); color: rgb(var(--brand-600)); }
.nav-link.active { background: rgb(var(--brand-500) / 0.14); color: rgb(var(--brand-600)); }

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid rgb(var(--slate-700));
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(30, 42, 58, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { border-color: rgb(var(--brand-400) / 0.5); box-shadow: 0 6px 18px rgba(30, 42, 58, 0.07); }
.card-flat { background: var(--card-flat-bg); border: 1px solid rgb(var(--slate-700)); border-radius: 12px; }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600;
  background: rgb(var(--brand-500) / 0.12); border: 1px solid rgb(var(--brand-500) / 0.28); color: rgb(var(--brand-600));
}
.pill-blue { background: rgb(var(--accent-500) / 0.12); border-color: rgb(var(--accent-500) / 0.28); color: rgb(var(--accent-500)); }
.pill-amber { background: rgba(199, 154, 58, 0.12); border-color: rgba(199, 154, 58, 0.30); color: #a7822f; }
.pill-rose { background: rgba(193, 86, 86, 0.12); border-color: rgba(193, 86, 86, 0.30); color: #b04a4a; }
.pill-slate { background: rgb(var(--slate-500) / 0.12); border-color: rgb(var(--slate-500) / 0.28); color: rgb(var(--slate-400)); }

/* Tournament badge (status-style) */
.tbadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; line-height: 1.7; white-space: nowrap;
  border: 1px solid transparent;
}
.tbadge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tbadge-world    { color: #a7822f; background: rgba(199, 154, 58, 0.12); border-color: rgba(199, 154, 58, 0.32); }
.tbadge-major    { color: rgb(var(--brand-600)); background: rgb(var(--brand-500) / 0.10); border-color: rgb(var(--brand-500) / 0.30); }
.tbadge-regional { color: rgb(var(--accent-500)); background: rgb(var(--accent-500) / 0.10); border-color: rgb(var(--accent-500) / 0.28); }
.tbadge-qualifier{ color: rgb(var(--slate-400)); background: rgb(var(--slate-500) / 0.10); border-color: rgb(var(--slate-500) / 0.24); }
.tbadge-friendly { color: rgb(var(--slate-500)); background: rgb(var(--slate-500) / 0.08); border-color: rgb(var(--slate-500) / 0.20); }
.tbadge-friendly::before { opacity: 0.6; }
.tbadge-other    { color: rgb(var(--slate-400)); background: rgb(var(--slate-500) / 0.10); border-color: rgb(var(--slate-500) / 0.22); }

/* Probability bar */
.prob-bar { height: 10px; border-radius: 9999px; overflow: hidden; display: flex; background: rgb(var(--slate-800)); }
.prob-seg { transition: width 0.5s ease; }

/* Data tables */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgb(var(--slate-700)); }
table.data th { color: rgb(var(--slate-400)); font-weight: 500; }
table.data tr:hover { background: rgb(var(--brand-500) / 0.04); }

/* Flag */
.flag { font-size: 1.2em; line-height: 1; }
.flag-img {
  height: 1em; width: auto; display: inline-block;
  vertical-align: -0.15em; border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(var(--slate-700));
  object-fit: cover;
}

/* Spinner */
.spinner {
  width: 14px; height: 14px; border: 2px solid rgb(var(--slate-700));
  border-top-color: rgb(var(--brand-500)); border-radius: 50%;
  animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbar */
.scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--brand-500) / 0.3); border-radius: 4px; }

/* Hero (phẳng, không gradient) */
.hero-bg { background: var(--card-bg); }

/* Loader — pulse độ mờ, không gradient */
.skeleton { background: rgb(var(--slate-800)); animation: skeleton-pulse 1.5s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }