:root{
  --bg:#0f1724; --card:#0b1220; --muted:#9aa4b2; --accent:#6ee7b7; --danger:#ef4444;
  --radius:14px; --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:#e6eef6; background: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 10% 10%, rgba(110,231,183,.07), transparent),
    radial-gradient(900px 400px at 90% 90%, rgba(99,102,241,.07), transparent);
}
.container{max-width:720px; margin:48px auto; padding:0 20px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  border-radius: var(--radius); padding:28px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
h1{margin:0 0 6px}
.subtitle{color:var(--muted); margin:0 0 22px}
label{display:block; margin:0 0 8px}
input[type="tel"]{
  width:100%; padding:14px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#0b1424; color:#fff; font-size:16px; outline:none;
}
.row{display:flex; gap:12px; margin:14px 0 2px; flex-wrap:wrap}
.btn{
  appearance:none; border:none; border-radius:10px; padding:12px 16px; font-weight:600; cursor:pointer;
}
.btn-primary{ background: var(--accent); color:#0b1220 }
.btn-ghost{ background: transparent; color:#e6eef6; border:1px solid rgba(255,255,255,.14)}
.badge{display:inline-block; font-size:12px; padding:4px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--muted)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#cdd7e0}
small.muted{color:var(--muted)}
.notice{margin-top:12px; font-size:13px; color:#cdd7e0}
.error{color:var(--danger); font-weight:600}
.success{color:#22c55e; font-weight:600}
hr{border:none; border-top:1px solid rgba(255,255,255,.08); margin:18px 0}
footer{margin-top:22px; font-size:13px; color:#aeb9c6}
a{color:#93c5fd; text-decoration:underline}