:root {
  --bg:#0b0d16; --panel:rgba(30,33,48,.92); --panel2:#232636; --line:rgba(255,255,255,.09);
  --text:#eef0f8; --muted:#a7abbd; --blue:#4c8dff; --violet:#a06bff; --green:#3fbf74;
  --glow:0 0 40px rgba(90,120,255,.25);
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); font:15.5px/1.6 Inter, system-ui, sans-serif; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden }
h1,h2,h3,.brand { font-family:Sora, Inter, sans-serif }

/* --- sky: layered gradients + gentle stars (no blur filters - cheap to composite) --- */
.sky { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55vw 40vh at 8% -5%, rgba(42,63,143,.55), transparent 70%),
    radial-gradient(48vw 36vh at 95% -2%, rgba(90,42,143,.5), transparent 70%),
    radial-gradient(46vw 34vh at 45% 55%, rgba(23,59,99,.35), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #141a33 0%, #0b0d16 55%) }
.aurora { display:none }
.stars { position:absolute; inset:0; will-change:opacity; animation:twinkle 6s ease-in-out infinite alternate;
  background-image:radial-gradient(1.4px 1.4px at 12% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 32% 68%, #cfe0ff 60%, transparent),
    radial-gradient(1.6px 1.6px at 54% 14%, #fff 60%, transparent), radial-gradient(1px 1px at 71% 47%, #ffe9c9 60%, transparent),
    radial-gradient(1.2px 1.2px at 86% 24%, #fff 60%, transparent), radial-gradient(1px 1px at 44% 84%, #cfe0ff 60%, transparent),
    radial-gradient(1.4px 1.4px at 92% 76%, #fff 60%, transparent), radial-gradient(1px 1px at 8% 82%, #ffe9c9 60%, transparent) }
.stars.s2 { transform:scale(1.6) rotate(38deg); opacity:.6; animation-duration:8s; animation-delay:-3s }
@keyframes twinkle { from { opacity:.4 } to { opacity:.95 } }

/* --- header --- */
header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 4vw, 40px); background:rgba(11,13,22,.92); border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800; color:var(--text); text-decoration:none; letter-spacing:.2px }
.brand b { font-weight:800 }
.brand span { background:linear-gradient(90deg, #8ab8ff, #c98bff); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600 }
.wand { filter:drop-shadow(0 0 6px rgba(150,140,255,.8)) }
.who { display:flex; gap:12px; align-items:center; font-size:13.5px; color:var(--muted) }
a.ghost { color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:8px 16px; font-weight:600 }
a.ghost:hover { border-color:var(--blue) }
button.linky { background:none; border:0; color:#9fc5ff; cursor:pointer; font-size:13px }

/* --- layout --- */
main { flex:1; width:min(1020px, 100%); margin:0 auto; padding:0 clamp(16px, 4vw, 40px) 40px }
.hero { text-align:center; padding:clamp(48px, 10vh, 110px) 0 30px }
.eyebrow { display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#9fc5ff;
  border:1px solid var(--line); border-radius:999px; padding:7px 16px; background:rgba(76,141,255,.08) }
.hero h1 { font-size:clamp(34px, 6.5vw, 62px); line-height:1.08; margin:22px 0 14px; font-weight:800 }
.hero h1 em { font-style:normal; background:linear-gradient(90deg, #8ab8ff 10%, #c98bff 55%, #ffb86b 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.lead { max-width:640px; margin:0 auto; color:var(--muted); font-size:clamp(15px, 2vw, 17.5px) }
.cta { margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:12px }
.hint { font-size:13px; color:var(--muted) }
.primary { display:inline-block; background:linear-gradient(90deg, var(--blue), var(--violet)); color:#fff; border:0; border-radius:12px;
  padding:13px 26px; font-weight:700; font-size:15.5px; cursor:pointer; text-decoration:none; box-shadow:var(--glow); transition:transform .15s, filter .15s }
.primary:hover { transform:translateY(-1px); filter:brightness(1.12) }
.primary.big { padding:16px 34px; font-size:17px }

/* --- how it works --- */
.how { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:44px 0 10px }
.step { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.step .n { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800;
  background:linear-gradient(135deg, var(--blue), var(--violet)); box-shadow:var(--glow); margin-bottom:12px }
.step h3 { margin:0 0 6px; font-size:17px } .step p { margin:0; color:var(--muted); font-size:14px }

/* --- auth card --- */
.card.auth { position:relative; max-width:440px; margin:40px auto; background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:26px; box-shadow:0 20px 60px rgba(0,0,0,.45) }
.card.auth::before { content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; z-index:-1;
  background:linear-gradient(120deg, rgba(76,141,255,.6), rgba(160,107,255,.25), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }
#enter { position:absolute; top:-90px }
.tabs { display:flex; gap:8px; margin-bottom:16px }
.tab { flex:1; background:var(--panel2); border:0; border-radius:10px; padding:10px; color:var(--muted); font-weight:600; cursor:pointer }
.tab.active { background:linear-gradient(90deg, var(--blue), var(--violet)); color:#fff }
form { display:flex; flex-direction:column; gap:11px }
input { background:rgba(16,18,28,.8); color:var(--text); border:1px solid #33374a; border-radius:10px; padding:13px 14px; font-size:15px }
input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(76,141,255,.18) }

/* --- wizard cards --- */
.wizards { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px; margin-top:34px }
.wiz { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:10px;
 ; transition:transform .15s, border-color .15s }
.wiz:hover { transform:translateY(-3px); border-color:rgba(76,141,255,.5) }
.wiz .ico { font-size:30px; line-height:1 }
.wiz h3 { margin:0; font-size:20px } .wiz p { margin:0; color:var(--muted); font-size:14px; flex:1 }
.wiz a { align-self:flex-start; background:linear-gradient(90deg, var(--green), #2f9f7f); color:#fff; text-decoration:none; border-radius:10px;
  padding:10px 18px; font-weight:700; margin-top:10px }
.wiz a:hover { filter:brightness(1.12) }
.wiz.soon { opacity:.65 } .wiz.soon .badge { align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#ffd9a0; border:1px solid rgba(255,184,107,.4); border-radius:999px; padding:4px 10px }
.wiz.wip { border-color:rgba(224,176,80,.45) }
.badge.wip { align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#ffd98a; background:rgba(224,176,80,.12); border:1px solid rgba(224,176,80,.45); border-radius:999px; padding:4px 11px; margin-bottom:2px }

.wiz.vip { border-color:rgba(224,179,65,.55); box-shadow:0 0 0 1px rgba(224,179,65,.18) inset }
.badge.vip { align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#ffe29a; background:rgba(224,179,65,.12); border:1px solid rgba(224,179,65,.5); border-radius:999px; padding:4px 11px; margin-bottom:2px }
.wizsection { grid-column:1 / -1; margin:18px 0 -4px } .wizsection h2 { margin:0 0 2px; font-size:20px; color:#ffe29a }

footer { text-align:center; padding:22px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); background:rgba(11,13,22,.5) }
.small { font-size:12.5px } .muted { color:var(--muted) } .err { color:#ff9a9a } .ok { color:#7fd49a }

@media (max-width:820px) { .how { grid-template-columns:1fr } .hero { padding-top:40px } }
@media (prefers-reduced-motion:reduce) { .aurora, .stars, .stars::after { animation:none } }

.closed { text-align:center; padding:18px 8px 8px; display:flex; flex-direction:column; gap:6px; align-items:center }
.closed .ico { font-size:34px } .closed b { font-size:17px; font-family:Sora, Inter, sans-serif }
.closed p { margin:0; color:var(--muted); font-size:14px }

[hidden] { display:none !important }

.impbar { background:#7a4a12; color:#ffe9c9; padding:8px 20px; font-size:13.5px; display:flex; gap:10px; align-items:center }
.impbar .linky { color:#fff; text-decoration:underline }
.utable { width:100%; border-collapse:collapse; font-size:13.5px }
.utable th, .utable td { text-align:left; padding:8px 10px; border-bottom:1px solid #33343f }
.utable th { color:var(--muted); font-weight:600 }
.utable button { padding:5px 12px; font-size:12px }
.utable thead th { position:sticky; top:0; background:var(--bg); z-index:1 }
th.sortable { cursor:pointer; user-select:none; white-space:nowrap }
th.sortable:hover { color:var(--text) }
th.sortable.active { color:#9fc5ff }
button.secondary { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px;
  padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer }
button.secondary:hover { border-color:var(--blue) }
.upagehead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 4px; flex-wrap:wrap }
.upagetools { display:flex; align-items:center; gap:12px }
#consentLine a { color:#9fc5ff }

.admindrop { position:relative; margin-left:auto; margin-right:14px }
.dropmenu { position:absolute; right:0; top:calc(100% + 8px); background:var(--panel2); border:1px solid #3a3b44; border-radius:10px;
  padding:8px; min-width:170px; display:flex; flex-direction:column; gap:4px; z-index:40; box-shadow:0 14px 40px rgba(0,0,0,.5) }
.dropmenu a { color:var(--text); text-decoration:none; padding:8px 12px; border-radius:8px; font-size:14px }
.dropmenu a:hover { background:var(--blue); color:#fff }
.who { margin-left:0 }
.admincontent { min-width:0; overflow-x:auto }

/* --- phones --- */
@media (max-width: 640px) {
  header { flex-wrap:wrap; gap:8px 12px; padding:10px 14px }
  .brand { font-size:18px }
  .who { font-size:12.5px; flex-wrap:wrap; max-width:100%; overflow:hidden }
  .who .linky { max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .admindrop { margin-left:0; margin-right:0 }
  a.ghost { padding:7px 12px }
  .impbar { flex-wrap:wrap }
  .utable { font-size:12px } .utable th, .utable td { padding:6px }
}
.pconly { align-self:flex-start; color:#ffd9a0; border:1px solid rgba(255,184,107,.4); border-radius:10px;
  padding:9px 14px; font-size:13px; margin-top:8px }
.turnstile { margin:4px 0 }