* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #fff; font: 12px/1.45 Tahoma, Verdana, "Segoe UI", Arial, sans-serif; color: #000; }
.titlebar { padding: 6px 12px; background: linear-gradient(#3a80f3, #0a54d6 45%, #0846c2); border-bottom: 1px solid #003399; color: #fff; font-size: 17px; font-weight: bold; text-shadow: 1px 1px 0 #002a80; }
.toolbar { height: 8px; background: linear-gradient(#f9f8f3, #e6e3d6); border-bottom: 1px solid #aca899; }
.box { width: 100%; max-width: 340px; margin: 60px auto; background: #ece9d8; border: 1px solid #0831d9; padding: 0 14px 14px; }
.box h1 { margin: 0 -14px 12px; padding: 5px 10px; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 #002a80; background: linear-gradient(#3a80f3, #0a54d6 45%, #0846c2); }
.muted { color: #333; margin: 0 0 12px; }
label { display: block; font-weight: bold; font-size: 11px; margin-bottom: 8px; }
input { display: block; width: 100%; margin-top: 2px; padding: 3px 4px; border: 1px solid #7f9db9; font: 12px Tahoma, Verdana, sans-serif; background: #fff; }
input:focus { outline: 1px dotted #000; }
button { margin-top: 4px; padding: 3px 18px; font: bold 12px Tahoma, Verdana, sans-serif; color: #fff; cursor: pointer; border: 1px solid #0a3a8c; border-radius: 3px; text-shadow: 0 1px 0 #0a3a8c;
  background: linear-gradient(#5f9df7, #2a6ee0 50%, #165ad1 51%, #1f63d8); }
button:hover { background: linear-gradient(#7db2fa, #3f80ec 50%, #2a6be0 51%, #3474e6); }
button:disabled { opacity: .6; }
.err { background: #fff0f0; border: 1px solid #c00; color: #900; padding: 4px 6px; margin-bottom: 8px; }
[hidden] { display: none !important; }
.two { display: flex; gap: 8px; } .two label { flex: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.small { font-size: 11px; margin: 10px 0 0; }
.box + .box { margin-top: 0; }
a { color: #0033cc; }