:root{
  --bg-main:#0e1116;
  --bg-card:#1a1f27;
  --bg-soft:#232a35;

  --accent:#4da3ff;
  --accent-strong:#1f7ae0;

  --ok:#35d07f;
  --warn:#ffcc33;
  --bad:#ff5a5a;

  --text:#f2f5f9;
  --text-dim:#aab4c3;

  --border:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 20%, #1a2230 0%, #0c0f14 70%);
  color:var(--text);
}

.wrap{max-width:1100px;margin:auto;padding:24px}
.top h1{margin:0;font-size:40px;letter-spacing:.5px}
.sub{color:var(--text-dim)}

.card{
  margin-top:20px;
  padding:20px;
  border-radius:16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.box{
  padding:18px;
  border-radius:14px;
  background:var(--bg-soft);
  border:1px solid var(--border);
}

.label{
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:4px;
  display:block;
}

.btn{
  border:none;
  border-radius:12px;
  padding:14px 18px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}

.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px)}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

input,select{
  width:100%;
  background:#0f141c;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:12px;
  font-weight:800;
}
input::placeholder{color:#6f7a8b}

.err{color:#ff8080;font-weight:700;margin-top:10px}
.hidden{display:none !important}

@media(max-width:700px){
  .top h1{font-size:28px}
}