*{box-sizing:border-box}
body{margin:0;font-family:system-ui,"Segoe UI",Tahoma,sans-serif;background:#f4f6f8;color:#14202b;line-height:1.5}
main{max-width:720px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:.4em 0}h2{font-size:1.1rem;margin:1.2em 0 .4em}
label{display:block;margin:.8em 0}
input,textarea{display:block;width:100%;padding:10px;font:inherit;border:1px solid #9aa7b3;border-radius:8px;background:#fff}
textarea{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;direction:ltr;text-align:left}
button,.btn{display:inline-block;padding:12px 18px;margin:.6em 0;font:inherit;color:#fff;background:#1b5fa8;border:0;border-radius:8px;text-decoration:none;cursor:pointer}
button.plain{background:#5b6b7a}
.bar{display:flex;gap:10px;flex-wrap:wrap}
.list{list-style:none;padding:0}.list li{background:#fff;border-radius:8px;padding:12px;margin:8px 0}
.tag{color:#5b6b7a;font-size:.85rem}.err{color:#a4161a}.ok{color:#146c2e}
@media (prefers-color-scheme:dark){body{background:#10161c;color:#e6edf3}input,textarea,.list li{background:#18222c;color:#e6edf3;border-color:#3b4a58}}