:root {
  --cyan:#5de0e6; --blue:#004aad; --yellow:#ffde59; --orange:#ff914d; --navy:#00264d;
  --ink:#0f2233; --slate:#51647a; --bg:#f4f9ff; --line:rgba(0,74,173,.14); --card:#fff;
  --g-bg:linear-gradient(135deg,#5de0e6,#004aad); --g-accent:linear-gradient(135deg,#ffde59,#ff914d);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Fredoka",var(--font);
  --r:16px; --pill:999px;
}
* { box-sizing:border-box; margin:0; }
body { font-family:var(--font); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; line-height:1.15; }
a { color:var(--blue); }

.btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:600; font-size:16px; border:0; border-radius:var(--pill); padding:12px 22px; cursor:pointer;
  text-decoration:none; color:var(--navy); background:var(--g-accent); box-shadow:0 8px 20px rgba(255,145,77,.32);
  transition:transform .15s; }
.btn:hover { transform:translateY(-1px); }
.btn-full { width:100%; }
.btn-ghost { background:transparent; color:var(--slate); box-shadow:none; border:1px solid var(--line); }

/* Auth pages */
.auth-bg { min-height:100vh; display:grid; place-items:center; background:var(--g-bg); padding:24px; }
.auth-card { width:100%; max-width:430px; background:var(--card); border-radius:22px;
  box-shadow:0 30px 60px rgba(0,40,80,.25); padding:34px 30px; }
.auth-brand { display:flex; align-items:center; gap:9px; justify-content:center; text-decoration:none;
  color:var(--navy); font-family:var(--display); font-weight:700; font-size:20px; margin-bottom:16px; }
.auth-brand b { color:var(--orange); }
.auth-card h1 { font-size:25px; text-align:center; }
.auth-card form { margin-top:20px; display:grid; gap:14px; }
label { display:grid; gap:6px; font-size:14px; font-weight:600; color:var(--ink); }
input, select { font-family:var(--font); font-size:15px; padding:11px 13px; border:1px solid var(--line);
  border-radius:12px; background:#fbfdff; outline:none; width:100%; }
input:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,74,173,.12); }
.slug-row { display:flex; align-items:stretch; }
.slug-prefix { font-size:13px; color:var(--slate); background:#eef4fb; border:1px solid var(--line);
  border-right:0; border-radius:12px 0 0 12px; padding:11px 10px; white-space:nowrap; display:flex; align-items:center; }
.slug-row input { border-radius:0 12px 12px 0; }
.muted { color:var(--slate); }
.small { font-size:13px; }
.center { text-align:center; }
.err { color:#c0392b; font-size:14px; min-height:18px; text-align:center; }
.ok-box { margin-top:18px; background:#eafaf2; border:1px solid #bfe9d4; border-radius:12px;
  padding:16px; font-size:14px; color:#0f6e56; }
.devlink { margin-top:10px; font-size:12px; word-break:break-all; }
.center-links { margin-top:18px; text-align:center; font-size:14px; }

/* Dashboard */
.topbar { height:64px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; padding:0 20px; position:sticky; top:0; z-index:10; }
.topbar .brand { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700;
  font-size:19px; color:var(--navy); text-decoration:none; }
.topbar .brand b { color:var(--orange); }
.topbar .who { display:flex; align-items:center; gap:14px; font-size:14px; color:var(--slate); }
.layout { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 64px); }
.side { border-right:1px solid var(--line); background:#fbfdff; padding:18px 12px; }
.side a { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px; color:var(--ink);
  text-decoration:none; font-weight:500; font-size:15px; margin-bottom:4px; }
.side a .em { width:20px; text-align:center; }
.side a.active, .side a:hover { background:rgba(0,74,173,.08); color:var(--blue); }
.side a .soon { margin-left:auto; }
.main { padding:28px 32px; background:var(--bg); }
.page-head { margin-bottom:22px; }
.page-head h1 { font-size:28px; }
.page-head p { color:var(--slate); }
.grid { display:grid; gap:16px; }
.stat-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.card h3 { font-size:17px; margin-bottom:10px; }
.stat .n { font-family:var(--display); font-weight:700; font-size:34px; background:var(--g-bg);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l { color:var(--slate); font-size:14px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gamelink { font-family:var(--display); font-weight:600; color:var(--blue); }
.badge { display:inline-block; font-family:var(--display); font-weight:600; font-size:12px; padding:4px 11px;
  border-radius:var(--pill); }
.badge.active { background:rgba(29,158,117,.14); color:#0f6e56; }
.badge.pending { background:rgba(255,145,77,.16); color:#993c1d; }
.soon { font-size:11px; color:var(--slate); background:#eef4fb; padding:3px 9px; border-radius:var(--pill);
  font-weight:600; }
.muted-note { font-size:13px; color:var(--slate); margin-top:6px; }
@media (max-width:760px) {
  .layout { grid-template-columns:1fr; }
  .side { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .side a { white-space:nowrap; margin-bottom:0; }
  .side a .soon { display:none; }
}