:root{
  --bg:#0b0c10;
  --card:#12141c;
  --text:#eef0f6;
  --muted:#b6bdd0;
  --accent:#8ae1ff;
  --ok:#7dffb2;
  --err:#ff7d7d;
  --border:rgba(255,255,255,.12);
  --shadow: 0 16px 50px rgba(0,0,0,.45);
  --radius:16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(138,225,255,.15), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(125,255,178,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  font:16px/1.5 var(--sans);
}

.wrap{max-width:820px; margin:0 auto; padding:56px 20px 40px;}
.header{margin-bottom:22px;}
.kicker{font: 12px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

h1{font-size:44px; line-height:1.05; margin:10px 0 12px;}
.lede{color:var(--muted); font-size:18px; margin:0; max-width:62ch;}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
}

h2{font-size:20px; margin:0 0 6px;}
.small{color:var(--muted); margin:0 0 14px;}

.form{display:grid; gap:12px; margin-top:10px;}
label span{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
input{
  width:100%;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 12px;
  outline:none;
}
input:focus{border-color: rgba(138,225,255,.6); box-shadow: 0 0 0 4px rgba(138,225,255,.12);}

button{
  justify-self:start;
  background: rgba(138,225,255,.16);
  border: 1px solid rgba(138,225,255,.35);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  cursor:pointer;
  font-weight:600;
}
button:hover{background: rgba(138,225,255,.22);}
button:disabled{opacity:.6; cursor:not-allowed;}

.status{min-height:1.2em; margin:2px 0 0; font-size:14px;}
.status[data-kind="ok"]{color:var(--ok)}
.status[data-kind="err"]{color:var(--err)}

.details{margin-top:14px;}
summary{cursor:pointer; color:var(--accent);}

.footer{margin-top:18px;}
.footer .small{margin:0}

@media (max-width: 520px){
  h1{font-size:34px;}
  .wrap{padding-top:40px;}
}