:root{--bg:#eef1f5;--panel:#fff;--ink:#16202e;--mute:#566274;--line:#c9d1dc;--accent:#1b4fd8;--on:#fff;--ok:#0b7a43;--bad:#b3261e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e141d;--panel:#161e2a;--ink:#e8edf4;--mute:#97a3b5;--line:#2c3849;--accent:#6f98ff;--on:#0e141d;--ok:#4cc38a;--bad:#ff8a80}}
:root{color-scheme:light dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif}
main{max-width:34rem;margin:0 auto;padding:2.5rem 1.25rem}
h1{font-size:2.4rem;line-height:1.1;letter-spacing:-.03em;margin:0 0 .5rem}
.lede{color:var(--mute);margin:0 0 1.75rem;max-width:44ch}
label{display:block;font-weight:600;font-size:.9rem;margin:1.25rem 0 .4rem}
.drop{display:block;margin:0;padding:2rem 1rem;border:2px dashed var(--line);border-radius:6px;background:var(--panel);text-align:center;cursor:pointer;font-weight:500}
.drop:hover,.drop:focus-within{border-color:var(--accent)}
.drop input{display:block;margin:.9rem auto 0;max-width:100%;color:var(--mute)}
.row{display:flex;gap:.5rem}
input[type=password],input[type=text]{flex:1;min-width:0;padding:.65rem .75rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace}
button{padding:.65rem 1.1rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:var(--on);font:inherit;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:var(--accent)}
button:disabled{opacity:.5;cursor:wait}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.actions{margin-top:1.25rem}.actions button{flex:1}
#status{min-height:1.5rem;margin:1rem 0;font-weight:600}
#status.ok{color:var(--ok)}#status.bad{color:var(--bad)}
#preview{display:block;max-width:100%;border-radius:6px;border:1px solid var(--line)}
details{margin-top:2rem;color:var(--mute);font-size:.92rem}summary{cursor:pointer;color:var(--ink);font-weight:600}