:root{--bg:#f6f4f0;--panel:#ffffff;--ink:#1c2020;--muted:#5f6663;--accent:#e8962e; --accent-ink: #1c2020; --link: #a85a00;--line:#e3ded5}
@media(prefers-color-scheme:dark){:root{--bg:#141717;--panel:#1d2121;--ink:#f1ede6;--muted:#9aa19e;--accent:#ec9a2e; --accent-ink: #141717; --link: #f0a94a;--line:#2e3333}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;line-height:1.5}
main{max-width:40rem;margin:0 auto;padding:1.5rem 1.2rem 3rem}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
h1{font-size:1.6rem;margin:0 0 1rem;letter-spacing:-.02em}
h2{font-size:1.1rem;margin:0 0 .8rem}
a { color: var(--link); }
section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.1rem;margin-bottom:1rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap}
input[type=text],input[type=password]{flex:1;min-width:0;font:1.05rem ui-monospace,Consolas,monospace;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem}
select{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem}
button{font:inherit;background:var(--accent);color: var(--accent-ink);border:0;border-radius:8px;padding:.6rem .9rem;cursor:pointer}
button.ghost{background:transparent;color:var(--link);border:1px solid var(--accent)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline: 2px solid var(--link);outline-offset:2px}
.note{color:var(--muted);font-size:.85rem;margin:.8rem 0 0}
.result{margin-top:1rem;padding:.8rem 1rem;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
table{width:100%;border-collapse:collapse}
td{padding:.45rem .3rem;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
td:first-child{color:var(--muted);width:38%}
tr:last-child td{border-bottom:0}
.logo{display:inline-flex;line-height:0}
.logo img{width:44px;height:44px;display:block}
textarea{width:100%;min-height:8rem;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;resize:vertical}
textarea:focus-visible{outline:2px solid var(--link);outline-offset:2px}
label.l{display:block;font-weight:600;margin:.8rem 0 .3rem}
ul.f{padding-left:1.2rem;margin:.5rem 0}
ul.f li{margin:.35rem 0}