:root{--bg:#17202a;--panel:#243342;--ink:#f3f7fb;--muted:#c2cfdd;--border:#587089}
*{box-sizing:border-box}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),radial-gradient(circle at top left, rgba(93,179,255,.20), transparent 34rem),linear-gradient(180deg,var(--bg),#1d2834);
  background-size:32px 32px,32px 32px,auto,auto;color:var(--ink)
}
header{padding:16px 20px;background:rgba(31,45,58,.94);border-bottom:1px solid rgba(140,202,255,.28)}
header h1{margin:0;font-size:18px;letter-spacing:.08em;text-transform:uppercase}
h2{margin:0 0 14px}
main{max-width:520px;margin:44px auto;padding:0 16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px;box-shadow:0 18px 42px rgba(5,12,20,.28)}
label{display:block;margin:8px 0 6px;color:var(--muted);font-size:13px}
input{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;background:#1b2a39;color:var(--ink);outline:none}
input:focus{border-color:#8ccaff;box-shadow:0 0 0 3px rgba(140,202,255,.22)}
button{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #57b9ff;background:linear-gradient(180deg,#39a9ff,#177bd1);color:#fff;font-weight:800;margin-top:10px;cursor:pointer}
button:hover{filter:brightness(1.06)}
.helper{color:var(--muted);font-size:13px;line-height:1.45}
.row{display:grid;grid-template-columns:1fr;gap:12px}
.app-footer{max-width:520px;margin:26px auto 0;padding:18px 16px 26px;color:var(--muted);font-size:12px;line-height:1.5;border-top:1px solid rgba(140,202,255,.20)}
.app-footer strong{color:var(--ink);font-weight:800}
.app-footer span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}