:root{
  --bg:#0f1115;
  --panel:#171a21;
  --panel-2:#1c2029;
  --text:#e9e9ee;
  --muted:#a9adbb;
  --primary:#ff4f88;
  --primary-2:#ff6fa0;
  --chip:#232734;
  --chip-active:#ff4f8830;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 100% -10%, #ff4f880f, transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, #6f89ff10, transparent 55%),
    var(--bg);
}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 18px;
  background:linear-gradient(to bottom, #0f1115f0, #0f1115d0 70%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid #ffffff10;
}

.brand{display:flex; align-items:center; gap:10px; letter-spacing:.2px}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 0 0 4px #ff4f8822;
}

.nav{display:flex; gap:10px}
.nav__link{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px;
}
.nav__link:is(:hover,:focus){background:#ffffff0e; color:var(--text)}
.nav__link.is-active{color:var(--text); background:#ffffff14}

/* layout */
.container{max-width:980px; margin:32px auto; padding:0 16px; display:grid; gap:18px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #ffffff12;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.hero h1{margin:0 0 6px}
.hero h1 span{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.muted{color:var(--muted)}

.levels{display:flex; gap:10px; margin:18px 0 10px}
.chip{
  border:0; padding:10px 14px; border-radius:999px; cursor:pointer;
  background:var(--chip); color:var(--text);
}
.chip.is-selected{background:var(--chip-active); outline:1px solid var(--primary);}

.actions{display:flex; gap:10px; margin-top:10px}

.btn{
  border:0; cursor:pointer; border-radius:12px; padding:12px 16px;
  background:#ffffff12; color:var(--text); transition:.2s transform, .2s background;
}
.btn:is(:hover,:focus){background:#ffffff18; transform:translateY(-1px)}
.btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:white; box-shadow:0 8px 20px #ff4f8840;
}
.btn--primary:is(:hover,:focus){filter:brightness(1.05)}

textarea{
  width:100%; resize:vertical; min-height:120px; color:var(--text);
  background:#0e121a; border:1px solid #ffffff1a; border-radius:var(--radius-sm);
  padding:12px 14px; outline:none;
}
textarea:focus{border-color:#ffffff33; box-shadow:0 0 0 4px #ffffff12}

.notice{
  margin-top:10px; padding:10px 12px; border-radius:10px; font-size:.95rem;
  background:#ffffff12; border:1px solid #ffffff1f; color:var(--text);
}

.footer{opacity:.7; text-align:center; padding:40px 16px}
@media (min-width:900px){
  .container{grid-template-columns:1fr}
}