*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;background:#121212;color:#f5f5f5;font-size:18px}
header{background:#b71c1c;padding:14px 16px}header h1{margin:0;font-size:22px}header small{color:#ffd54f}
nav{display:flex;position:sticky;top:0;background:#1e1e1e;z-index:2}nav button{flex:1;padding:16px 4px;font-size:16px;background:none;color:#ccc;border:0;border-bottom:4px solid transparent}
nav button.on{color:#fff;border-color:#ffd54f;font-weight:bold}
main{padding:12px;max-width:640px;margin:auto}section{display:none}section.on{display:block}
.card{background:#1e1e1e;border-radius:12px;padding:14px;margin-bottom:14px;border:1px solid #333}.card h2{margin:0 0 10px;font-size:19px;color:#ffd54f}
label{display:block;margin:8px 0 4px;font-size:15px;color:#bbb}
input,select{width:100%;padding:14px;font-size:20px;background:#000;color:#fff;border:2px solid #555;border-radius:8px}input:focus,select:focus{border-color:#ffd54f;outline:0}
.row{display:flex;gap:8px}.row>*{flex:1}
button.go{width:100%;margin-top:12px;padding:16px;font-size:19px;font-weight:bold;background:#ffd54f;color:#000;border:0;border-radius:10px}
.out{margin-top:12px;padding:12px;background:#0d2b0d;border-left:5px solid #66bb6a;border-radius:6px;font-size:19px;white-space:pre-line;min-height:1em}.out.err{background:#2b0d0d;border-color:#ef5350}
.note{font-size:13px;color:#999}footer{text-align:center;padding:20px;font-size:14px;color:#999}footer a{color:#ffd54f}