:root { color-scheme: dark; font: 16px system-ui, "Segoe UI", sans-serif; background: #111827; color: #e5e7eb; }
* { box-sizing: border-box; }
body { margin: 0; padding: 22px; }
main { max-width: 1000px; margin: auto; }
h1 { font-size: 24px; margin: 0 0 10px; }
p { line-height: 1.5; color: #b6c4d8; }
.box { background: #1c293c; padding: 16px; border: 1px solid #3b4e67; border-radius: 10px; margin: 14px 0; }
.controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
label { display: grid; gap: 6px; font-size: 14px; }
input, button { font: inherit; padding: 9px; border: 1px solid #7990ab; border-radius: 5px; background: #101b2c; color: #fff; }
input[type=password] { width: 340px; max-width: 100%; }
button { cursor: pointer; background: #215f83; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #75e0b0; outline-offset: 3px; }
dl { display: grid; grid-template-columns: 185px 1fr; gap: 9px; margin: 0; }
dt { color: #a5b8d2; }
dd { margin: 0; overflow-wrap: anywhere; }
.ok { color: #75e0b0; }
.bad { color: #ffacac; }
pre, textarea { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px ui-monospace, monospace; }
pre { max-height: 180px; overflow: auto; }
textarea { display: block; width: 100%; height: 150px; margin-top: 12px; background: #0b1320; color: #dbeafe; }
.small { font-size: 13px; }
#status { font-weight: 700; }
@media (max-width: 600px) { body { padding: 12px; } dl { grid-template-columns: 1fr; } dd { margin-bottom: 8px; } }