:root{
  --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --text:#e2e8f0;
  --primary:#2563eb; --primary-600:#1d4ed8; --ring: rgba(37,99,235,.35);
  --success:#16a34a; --warning:#f59e0b; --danger:#ef4444; --border:#1f2937;
  --radius:12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 10% -10%, rgba(37,99,235,.15), transparent),
              radial-gradient(800px 500px at 110% 10%, rgba(99,102,241,.12), transparent),
              var(--bg);
  color: var(--text);
}

.container{ max-width: 1080px; margin: 0 auto; padding: 20px; }

.site-header, .site-footer{ border-bottom:1px solid var(--border); }
.site-footer{ border-top:1px solid var(--border); border-bottom:0; color: var(--muted); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
h1{ font-size: 22px; margin: 0; letter-spacing:.3px; }
h2{ margin:0 0 16px 0; font-size: 18px; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.card-title{ margin-bottom: 10px; color: var(--muted); font-weight: 600; letter-spacing:.2px; }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 14px 18px;
}
.field{ display:grid; gap:6px; }
.field.full{ grid-column: 1 / -1; }
label{ font-size: 13px; color: var(--muted); }
input{
  background: #0b1220;
  border:1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
}
input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
input:hover{ border-color:#334155; }
.hint{ margin:0; font-size:12px; color:#64748b; }

.actions{ display:flex; gap:12px; margin-top: 8px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px;
  border-radius: 10px;
  border:1px solid transparent;
  cursor:pointer; user-select:none;
  transition: transform .04s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-icon{ filter: saturate(0) brightness(1.2); }

.btn-primary{ background: var(--primary); color: white; }
.btn-primary:hover{ background: var(--primary-600); }
.btn-primary:focus{ box-shadow: 0 0 0 3px var(--ring); }

.btn-outline{ background: transparent; color: var(--text); border-color:#334155; }
.btn-outline:hover{ background: #0b1220; border-color:#475569; }

.btn-secondary{ background:#1f2937; color:#e5e7eb; border-color:#374151; }
.btn-secondary:hover{ background:#111827; }

.btn-ghost{ background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:hover{ background:#0b1220; }

.status{ min-height: 20px; margin-top: 6px; color: var(--muted); }
.result{
  padding: 16px;
  background: #0b1220;
  border:1px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
}

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

@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
  .nav-actions{ flex-wrap: wrap; }
}