@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root{color-scheme:dark;--bg:#000;--panel:#0c0c0c;--line:#232323;--fg:#eceef2;--muted:#9ca1aa;--grad:linear-gradient(120deg,#1b45ff 0%,#12a4d9 68%,#14d8c6 100%)}
@media (prefers-color-scheme:light){:root{color-scheme:light;--bg:#eceef2;--panel:#fff;--line:#e2e5ea;--fg:#14161a;--muted:#59606b}}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{display:flex;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 16px 40px}
.box{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px;margin-top:6vh;height:fit-content}
.lg{display:flex;align-items:center;gap:10px;margin-bottom:18px}.lg b{font-size:15px}.mk{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800}
h1{font-size:22px;margin:0 0 14px;letter-spacing:-.02em}h2{font-size:15px;margin:18px 0 6px}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:12px}
input,textarea{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px}
textarea{min-height:100px;resize:vertical}input:focus,textarea:focus{outline:2px solid #12a4d9;outline-offset:1px}
button{font:inherit;font-weight:700;border:0;border-radius:10px;padding:12px 16px;background:var(--grad);color:#fff;cursor:pointer;width:100%;font-size:15px}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.row{display:flex;gap:10px}.row button{flex:1}
.sm{font-size:13px;color:var(--muted)}a{color:#38b2d9}
.err{background:#ef44441f;color:#f87171;border-radius:10px;padding:10px 12px;font-size:14px}.ok{background:#22c55e1f;color:#4ade80;border-radius:10px;padding:10px 12px;font-size:14px}
.pv{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:12px;background:#111;margin:10px 0}
.cap{white-space:pre-wrap;background:color-mix(in srgb,var(--fg) 5%,transparent);border-radius:10px;padding:10px 12px;font-size:14px}
.pw{position:relative;display:block}.pw input{width:100%;padding-right:46px}
.pw .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:34px;padding:0;background:none;border:0;color:var(--muted);display:grid;place-items:center;border-radius:8px}
.pw .eye:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.blogo{width:132px;height:43px;background:url(/logo-dark.png) left center/contain no-repeat;display:block}
@media (prefers-color-scheme:light){.blogo{background-image:url(/logo-light.png)}}
.bsub{font-size:13px;font-weight:600;color:var(--muted);border-left:1px solid var(--line);padding-left:10px}