body.wrap { font-family: Arial, sans-serif; background:#0f172a; color:#e2e8f0; margin:0; }
.card { max-width: 980px; margin: 40px auto; background:#111827; padding:20px; border-radius:14px; box-shadow: 0 10px 25px rgba(0,0,0,.35); }
.topbar { max-width: 980px; margin: 20px auto 0; display:flex; justify-content:space-between; align-items:center; padding: 0 10px; }
h1, h2 { margin: 0 0 12px; }
label { display:block; margin-top: 10px; font-size: 13px; }
input { width: 100%; padding: 10px; border-radius:10px; border: 1px solid #334155; background:#0b1220; color:#e2e8f0; }
button { padding: 10px 14px; border-radius: 10px; border: 0; background:#2563eb; color:white; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:10px; align-items:center; }
.row input { flex:1; }
.muted { color:#94a3b8; font-size: 13px; margin-left: 10px; }
.error { background:#7f1d1d; padding:10px; border-radius:10px; margin: 10px 0; }
.result { margin-top: 12px; padding: 12px; border-radius: 10px; }
.result.ok { background:#064e3b; }
.result.bad { background:#7f1d1d; }
table { width:100%; border-collapse: collapse; margin-top: 10px; }
th, td { border-bottom: 1px solid #334155; padding: 8px; font-size: 13px; }
a.link { color:#93c5fd; text-decoration:none; }
hr { border:0; border-top:1px solid #334155; margin: 16px 0; }