:root{
  --bg:#ffff;
  --card:#0f1c35;
  --muted:#8aa4d4;
  --blue:#2a66f8;
  --blue-dark:#fffff;
  --green:#1cc88a;
  --red:#e74c3c;
  --yellow:#f6c23e;
  --text:black;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, #1b2b55 0%, var(--bg) 60%);
  color:var(--text);
}
.container{
  max-width:960px;margin:0 auto;padding:24px;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(108,128,222,0.18);
  border-radius:16px;padding:24px;box-shadow:0 10px 40px rgba(16,34,90,.25);
  backdrop-filter: blur(8px);
}
h1,h2{margin:0 0 12px}
h1{font-size:28px;letter-spacing:.2px}
h2{font-size:20px;color:#cfe0ff}
.label{font-size:13px;color:var(--muted);margin-bottom:6px}
input,button{
  font-size:16px;border-radius:12px;border:1px solid rgba(108,128,222,0.35);
  background:#0b1832;color:var(--text);outline:none;
}
input{padding:14px 16px;width:100%}
input:focus{border-color:var(--blue)}
.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1 1 280px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border:none;background:var(--blue);
  color:white;font-weight:600;cursor:pointer;transition:.2s;border-radius:12px;
  box-shadow:0 8px 24px rgba(42,102,248,.35);
}
.btn:hover{background:var(--blue-dark)}
.btn.secondary{background:transparent;border:1px solid rgba(108,128,222,0.35)}
.small{font-size:13px;color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px}
.badge.success{background:rgba(41,168,102,.15);color:#7ef2bd;border:1px solid rgba(41,168,102,.35)}
.badge.warn{background:rgba(246,194,62,.15);color:#ffe7a3;border:1px solid rgba(246,194,62,.35)}
.badge.error{background:rgba(231,76,60,.15);color:#ffb0a6;border:1px solid rgba(231,76,60,.35)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){.grid{grid-template-columns:1fr}}
.kv{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid rgba(108,128,222,0.2);border-radius:12px;margin-bottom:8px;background:#0a1530}
.kv code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
hr{border:none;border-top:1px solid rgba(108,128,222,0.18);margin:16px 0}
.footer{opacity:.7;font-size:12px;margin-top:20px}
.code{font-family:ui-monospace,Consolas,monospace;background:#071126;border:1px solid rgba(108,128,222,.25);padding:10px 12px;border-radius:10px}
.copy{cursor:pointer;font-size:12px;color:#9bc0ff;text-decoration:underline}
.timer{font-variant-numeric:tabular-nums}
.qr{display:flex;align-items:center;justify-content:center;background:#071126;border:1px solid rgba(108,128,222,.25);border-radius:12px;padding:16px}