:root{
  --bg0:#04020b;
  --bg1:#0c0720;
  --panel:rgba(10, 15, 29, 0.84);
  --panel-strong:rgba(14, 20, 35, 0.96);
  --border:rgba(255,255,255,.16);
  --text:#f7f8ff;
  --muted:rgba(240,244,255,.76);
  --cyan:#52e8ff;
  --magenta:#ff4ac7;
  --lime:#73f7a5;
  --amber:#f6c65b;
  --shadowC:0 14px 42px rgba(82,232,255,.16);
  --shadowM:0 14px 42px rgba(255,74,199,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(900px 460px at 12% -6%, rgba(255,74,199,.16), transparent 55%),
    radial-gradient(800px 420px at 88% 4%, rgba(82,232,255,.14), transparent 55%),
    linear-gradient(140deg, var(--bg0), var(--bg1));
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position:relative;
  overflow-x:hidden;
}
body::before,
body::after{
  content:'';
  position:fixed;
  width:26rem;
  height:26rem;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:-1;
  opacity:.24;
  animation:drift 14s ease-in-out infinite alternate;
}
body::before{ background:var(--cyan); top:-8rem; left:-8rem; }
body::after{ background:var(--magenta); right:-8rem; bottom:-7rem; }

 .panel-card{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  box-shadow:var(--shadowC);
  backdrop-filter: blur(16px);
  position:relative;
  overflow:hidden;
  margin:20px;
  padding:25px;
  }
.panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-110%);
 
  pointer-events:none;
}
@keyframes shimmer{ to{ transform:translateX(110%);} }

.muted{ color:var(--muted); }

.page-shell{ max-width:1280px; margin:0 auto; padding:24px; }
.page-header{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-title{ margin:0; font-size:clamp(1.5rem, 2.3vw, 2.2rem); letter-spacing:.02em; }
.page-subtitle{ margin-top:6px; color:var(--muted); }
.page-kicker{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

.card{ padding:18px; border-radius:20px; }
.section-card{ padding:22px; border-radius:24px; }
.hero-card{ position:relative; overflow:hidden; }
.hero-card::after{ content:''; position:absolute; inset:auto -20% -60px auto; width:220px; height:220px; background:radial-gradient(circle, rgba(82,232,255,.22), transparent 70%); filter:blur(20px); pointer-events:none; }

.neon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(82,232,255,.40);
  background:linear-gradient(135deg, rgba(82,232,255,.20), rgba(255,74,199,.16));
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  position:relative;
  overflow:hidden;
}
.neon-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform:translateX(-120%);
  transition:transform .45s ease;
}
.neon-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadowC); }
.neon-btn:hover::before{ transform:translateX(120%); }

.neon-btn.magenta{
  border-color:rgba(255,43,214,.42);
  background:linear-gradient(135deg, rgba(255,74,199,.24), rgba(255,74,199,.12));
}
.neon-btn.magenta:hover{ box-shadow:var(--shadowM); }
.neon-btn.cyan{
  border-color:rgba(82,232,255,.42);
  background:linear-gradient(135deg, rgba(82,232,255,.24), rgba(82,232,255,.12));
}

.flash{ margin-top:12px; color:var(--lime); }
.err{ margin-top:12px; color:#ff8bdc; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); font-size:12px; background:rgba(255,255,255,.06); }

.footer {
  text-align: center;
  padding: 22px 20px 8px;
  color: var(--muted);
  font-size: 13px;
}