:root{--bg:#111418;--fg:#e8e8e8;--box:#1b2027;--acc:#4da3ff;--ok:#3ecf6f;--bad:#ff5d5d}
[data-theme=light]{--bg:#f4f4f4;--fg:#111;--box:#fff}
*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;margin:0}
header{display:flex;gap:.6rem;align-items:center;padding:.7rem 1rem;background:var(--box)}
header h1{font-size:1.1rem;margin:0;flex:1}
main{padding:1rem;max-width:900px;margin:auto}
.box{background:var(--box);border-radius:.6rem;padding:1rem;margin-bottom:1rem}
.row{display:flex;gap:.5rem;align-items:center;margin:.4rem 0;flex-wrap:wrap}
button{font-size:1rem;padding:.55rem .9rem;border-radius:.5rem;border:0;background:var(--acc);color:#fff;cursor:pointer}
button:active{transform:scale(.97)}
input{font-size:1rem;padding:.55rem;border-radius:.5rem;border:1px solid #555;background:transparent;color:var(--fg)}
code{font-size:1.05rem;background:#0006;padding:.4rem .6rem;border-radius:.4rem;word-break:break-all}
table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:.4rem;border-bottom:1px solid #444;text-align:left}
.done{margin-top:.6rem;padding:.6rem;background:#0a3;border-radius:.5rem}
pre{white-space:pre-wrap;font-size:.8rem;max-height:300px;overflow:auto}
ul{list-style:none;padding:0}li{padding:.4rem 0;border-bottom:1px solid #444}
.code-big{font-size:2rem;letter-spacing:.3rem;background:#0008;padding:.5rem 1rem;border-radius:.5rem;display:inline-block;margin:.4rem 0}
.msg{border:1px solid #555;border-radius:.5rem;padding:.7rem;margin:.5rem 0}
@media(max-width:600px){table{font-size:.75rem}button{padding:.6rem}}