/* Influencer UX — dashboard (dark-glass theme) */
:root {
  --cyan:#5de0e6; --blue:#3a6df0; --purple:#9b5de5; --navy:#04121f;
  --ink:#eef4fb; --slate:#9fb3c8; --bg:#070a12; --line:rgba(255,255,255,.12); --card:rgba(255,255,255,.05);
  --g-bg:linear-gradient(135deg,#5de0e6,#3a6df0); --g-accent:linear-gradient(135deg,#5de0e6,#3a6df0);
  --g-text:linear-gradient(120deg,#fff 26%,#5de0e6 66%,#9b5de5);
  --glass:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Fredoka",var(--font);
  --r:16px; --pill:999px;
}
* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
body { font-family:var(--font); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  background:var(--bg); position:relative; min-height:100vh; }
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 50% at 8% -5%, rgba(93,224,230,.14), transparent 60%),
    radial-gradient(55% 55% at 105% 105%, rgba(58,109,240,.18), transparent 60%),
    radial-gradient(40% 40% at 92% 5%, rgba(155,93,229,.10), transparent 60%);
}
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; line-height:1.15; color:#fff; }
a { color:var(--cyan); }

.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:#04121f; background:var(--g-bg); box-shadow:0 8px 24px rgba(58,109,240,.38); transition:transform .15s; }
.btn:hover { transform:translateY(-1px); }
.btn-full { width:100%; }
.btn-ghost { background:rgba(255,255,255,.06); color:var(--ink); box-shadow:none; border:1px solid var(--line); }

/* Auth pages */
.auth-bg { min-height:100vh; display:grid; place-items:center; background:var(--bg); padding:24px; }
.auth-card { width:100%; max-width:430px; background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16); padding:34px 30px; }
.auth-brand { display:flex; align-items:center; gap:9px; justify-content:center; text-decoration:none;
  color:#fff; font-family:var(--display); font-weight:700; font-size:20px; margin-bottom:16px; }
.auth-brand b { color:#fff; }
.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, textarea { font-family:var(--font); font-size:15px; padding:11px 13px; border:1px solid var(--line);
  border-radius:12px; background:rgba(255,255,255,.04); color:var(--ink); outline:none; width:100%; }
input::placeholder, textarea::placeholder { color:#6b7e92; }
input:focus, select:focus, textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(93,224,230,.18); }
select option { background:#0b1020; color:var(--ink); }
.slug-row { display:flex; align-items:stretch; }
.slug-prefix { font-size:13px; color:var(--slate); background:rgba(255,255,255,.04); 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:#ff7a7a; font-size:14px; min-height:18px; text-align:center; }
.ok-box { margin-top:18px; background:rgba(22,224,106,.1); border:1px solid rgba(22,224,106,.3); border-radius:12px;
  padding:16px; font-size:14px; color:#7ef0b0; }
.devlink { margin-top:10px; font-size:12px; word-break:break-all; }
.center-links { margin-top:18px; text-align:center; font-size:14px; }

/* Dashboard shell */
.topbar { height:64px; background:rgba(7,10,18,.7); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  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:#fff; text-decoration:none; }
.topbar .brand b { color:#fff; }
.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:rgba(255,255,255,.02); 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(93,224,230,.12); color:#5de0e6; }
.side a .soon { margin-left:auto; }
.main { padding:28px 32px; background:transparent; }
.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:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:0 16px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.1); }
.card h3 { font-size:17px; margin-bottom:10px; }
.stat .n { font-family:var(--display); font-weight:700; font-size:34px; background:var(--g-text);
  -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(--cyan); }
.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(22,224,106,.16); color:#7ef0b0; }
.badge.pending { background:rgba(255,145,77,.18); color:#ffb98a; }
.soon { font-size:11px; color:var(--slate); background:rgba(255,255,255,.06); 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; }
}