:root{
  --bg:#f9fbff; --panel:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;
  --accent:#ff71a8; --accent-600:#ff5b98; --ring:rgba(255,113,168,.25);
  --shadow:0 16px 40px rgba(17,24,39,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:24px; color:var(--text);
  font-family: ui-rounded, "SF Pro Rounded","Segoe UI Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background:
    radial-gradient(1100px 550px at -10% -10%, #ffe5f1 0, transparent 60%),
    radial-gradient(900px 500px at 110% 0%, #e7f2ff 0, transparent 60%),
    var(--bg);
}
.container{max-width:980px;margin:0 auto}
.hero{text-align:center;margin:6px 0 18px}
.hero h1{
  margin:0;font-size:40px;line-height:1.1;font-weight:900;
  background: linear-gradient(90deg, #ff71a8, #7c83ff 55%, #4cc9f0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{margin:6px 0 0;color:#374151;font-weight:600}
.card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.pane h2{margin:0 0 10px 0;font-size:18px;font-weight:800}
label{display:block;font-size:13px;color:#4b5563;margin-bottom:6px}
input{
  width:100%;height:44px;border-radius:999px;border:1px solid var(--border);
  padding:0 14px;background:#fff;outline:none;
  transition:border-color .15s, box-shadow .15s, transform .06s;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
input::placeholder{color:#8e96a4}
input:focus{border-color:var(--accent);box-shadow:0 0 0 6px var(--ring);transform:translateY(-1px)}
.btn{
  width:100%;height:44px;border:0;border-radius:999px;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-600));
  box-shadow:0 10px 20px rgba(255,113,168,.25);
  transition:transform .06s, filter .15s, box-shadow .2s;
}
.btn:disabled{opacity:.7;filter:grayscale(.1);cursor:not-allowed}
.btn:not(:disabled):hover{filter:saturate(110%) brightness(1.02)}
.btn:active{transform:translateY(1px)}
.msg{margin-top:8px;color:#ef4444;font-size:13px;min-height:18px}

.rules ol{margin:0 0 8px 18px;padding:0}
.rules li{margin:8px 0;line-height:1.5}
.rules .muted{color:var(--muted)}
.footer{margin-top:16px;text-align:center}