:root{--bg:#fbf7f8;--card:#fff;--ink:#2b2226;--muted:#8a7a80;--line:#eadfe3;--accent:#d9487a;--accent2:#fbe4ec;--ok:#1f9d63;--err:#d33}
@media (prefers-color-scheme: dark){:root{--bg:#1a1517;--card:#241d20;--ink:#f3eaee;--muted:#a8979e;--line:#3a2f34;--accent:#ff6f9f;--accent2:#40242f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:24px 16px 60px}
h1{margin:0 0 4px;font-size:24px}
h2{font-size:17px;margin:0 0 12px}
.sub{color:var(--muted);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
label{font-weight:600;font-size:13px;display:block;margin:10px 0 6px}
input[type=text],input[type=password],input[type=number],textarea,select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font:inherit}
select option{background:var(--card)}
textarea{min-height:220px;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
.hint{color:var(--muted);font-size:12px;margin-top:4px}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:11px 20px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.drop{border:2px dashed var(--line);border-radius:12px;min-height:280px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;overflow:hidden;text-align:center;color:var(--muted);transition:.15s;padding:8px}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent2)}
.drop img,.preview{max-width:100%;max-height:360px;border-radius:8px;display:block;margin:0 auto}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.msg{font-size:14px;color:var(--muted)}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.result img{width:100%;border-radius:10px;display:block}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:s 1s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gallery a img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.notice{background:var(--accent2);border-radius:10px;padding:10px 12px;font-size:14px}