:root {
  --bg: #0b0f14;
  --panel: #0f141c;
  --text: #f2f5f9;
  --muted: #a8b6c9;
  --accent: #13d38e;
  --danger: #ff5a5f;
  --warn: #ffb020;
  --line: #253144;
  --tableRow: #0c121a;
  --tableRowAlt: #0d1520;
  --tableHover: #111a27;

  --glassBg: rgba(255,255,255,0.06);
  --glassBorder: rgba(255,255,255,0.12);
  --glassBlur: blur(12px);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background: #0e131b; border-bottom:1px solid var(--line);
}
.topbar h1 { margin:0; font-size:18px; letter-spacing:0.4px; font-weight:600; }
.topbar nav a { color:var(--muted); text-decoration:none; margin-left:12px; padding:6px 10px; border-radius:8px; }
.topbar nav a:hover { background:#0b121b; color:var(--text); }

.foot { padding:12px 18px; border-top:1px solid var(--line); color:var(--muted); }
#app { padding:20px; max-width:1200px; margin:0 auto; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0; }

.grid { display:grid; gap:12px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:900px){ .grid.cols-2, .grid.cols-3 { grid-template-columns:1fr; } }

.btn {
  appearance:none; border:none; background:#182334; color:#dfe7f1; padding:10px 14px;
  border-radius:999px; cursor:pointer; border:1px solid var(--line); font-weight:600; letter-spacing:.2px;
  transition:.15s transform ease,.15s background ease;
}
.btn:hover { background:#1b2a45; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn.primary { background:#0f2d22; border-color:#124636; color:#dbffee; }
.btn.primary:hover { background:#124636; }
.btn.danger { background:#3a1113; border-color:#5a171b; color:#ffdfe2; }
.btn.warn { background:#3a2a11; border-color:#5d4a18; color:#fff1d6; }

.input, select, textarea { width:100%; padding:10px 12px; border-radius:10px; background:#0c121a; border:1px solid var(--line); color:var(--text); }
textarea { min-height:92px; resize:vertical; }

.row { display:flex; gap:10px; }
.row > * { flex:1; }

.badge { display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; background:#0b121b; color:var(--muted); border:1px solid var(--line); }
.badge.win { color:#0affc5; border-color:#0affc5; }
.badge.lose { color:#ff8ea1; border-color:#ff8ea1; }

.kpi { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); }
.kpi b { color:var(--text); font-size:18px; }

/* ---------- ATP-like ranking table ---------- */
.table-wrap { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0b1017; }
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; line-height:1.2; }
.table thead th {
  position:sticky; top:0; z-index:1;
  background:#0b1017; color:#93a5bb; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  font-size:12px; padding:12px 14px; border-bottom:1px solid var(--line);
}
.table tbody td { padding:14px; border-bottom:1px solid var(--line); background:var(--tableRow); }
.table tbody tr:nth-child(even) td { background:var(--tableRowAlt); }
.table tbody tr:hover td { background:var(--tableHover); }

.col-rank { width:68px; text-align:right; color:#cfe2ff; font-weight:800; font-variant-numeric:tabular-nums; }
.col-player { font-weight:650; }
.col-points { width:140px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
.col-wl { width:120px; text-align:right; color:#b9c6d8; font-variant-numeric:tabular-nums; }
.col-sets { width:150px; text-align:right; color:#a8b6c9; font-variant-numeric:tabular-nums; }
.player-link { color:#e9f2ff; text-decoration:none; }
.player-link:hover { text-decoration:underline; }

@media (max-width:760px){ .col-sets { display:none; } }
@media (max-width:560px){ .col-wl { display:none; } .col-points { width:auto; } }

/* ---------- Home swiper (no visible scrollbar, free mode feel) ---------- */
.swiper{
  position:relative;
  display:flex; gap:16px;
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding:4px 2px 8px;
  cursor:grab; user-select:none;
  scrollbar-width:none;
}
.swiper::-webkit-scrollbar{ display:none; }
.swiper:active{ cursor:grabbing; }

.card{
  flex:0 0 46%;
  max-width:46%;
  min-width:340px;
  scroll-snap-align:start;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px;
}
@media (max-width:1100px){ .card{ flex-basis:70%; max-width:70%; } }
@media (max-width:700px){ .card{ flex-basis:88%; max-width:88%; min-width:280px; } }

.card h3{ margin:6px 8px 10px; font-size:16px; }

/* Glass “+ New Ranking” card */
.card.glass{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--glassBg); border:1px solid var(--glassBorder);
  backdrop-filter:var(--glassBlur) saturate(130%); -webkit-backdrop-filter:var(--glassBlur) saturate(130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
}
.plus-icon{
  width:64px; height:64px; border-radius:16px; border:1px solid var(--glassBorder);
  display:flex; align-items:center; justify-content:center;
  font-size:44px; line-height:1; color:#dfffee;
  background:linear-gradient(180deg,rgba(19,211,142,0.2),rgba(19,211,142,0.05));
  box-shadow:0 6px 24px rgba(19,211,142,0.18), inset 0 0 0 1px rgba(19,211,142,0.25);
}
.card.glass:hover{ background:rgba(255,255,255,0.08); }

/* ---------- Modals with glossy/blurred backdrop ---------- */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(8,12,18,0.45); z-index:1000; padding:14px;
  backdrop-filter:blur(14px) saturate(125%); -webkit-backdrop-filter:blur(14px) saturate(125%);
}
.modal.open{ display:flex; }
.modal-card{
  width:min(640px,96vw); background:var(--panel);
  border:1px solid var(--glassBorder); border-radius:16px; padding:16px;
  box-shadow:0 16px 64px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter:var(--glassBlur); -webkit-backdrop-filter:var(--glassBlur);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.modal-head h3{ margin:0; font-size:18px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.close-x{ cursor:pointer; color:var(--muted); font-weight:700; }

.muted{ color:var(--muted); }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#0e141d; border:1px solid #1c2636; padding:4px 6px; border-radius:8px; }

/* ---------- Glossy glassy scroll container ---------- */
.glass-scroll{
  overflow:auto;
  background:transparent;
  border-radius:12px;
  scrollbar-width:thin;                 /* Firefox */
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}
.glass-scroll::-webkit-scrollbar{
  width:10px; height:10px;
}
.glass-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius:999px;
  backdrop-filter: var(--glassBlur);
}
.glass-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.16));
  border:1px solid var(--glassBorder);
  border-radius:999px;
}
.glass-scroll:hover::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.22));
}