:root{color-scheme:dark;--bg:#101317;--panel:#191e24;--line:#303943;--text:#edf3f7;--muted:#9aa8b6;--accent:#a4e8d0;--field:#12171c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,sans-serif}body.light{color-scheme:light;--bg:#edf2f4;--panel:#fff;--line:#d6dfe4;--text:#182a32;--muted:#586b76;--accent:#087b5c;--field:#f5f8fa}header{height:90px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand,.actions{display:flex;align-items:center;gap:16px}.brand small{display:block;color:var(--muted);font-size:12px}.mark{background:var(--accent);color:var(--bg);border-radius:12px;width:42px;height:42px;text-align:center;font-size:25px;font-weight:800}.actions{gap:10px}#status{font-size:12px;color:var(--accent);margin-right:12px}button,input,select{font:inherit;border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--field);color:var(--text)}button{cursor:pointer}button:hover:enabled{border-color:var(--accent)}button:disabled{cursor:not-allowed;opacity:.45}input:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}main{padding:48px 4vw}.card{max-width:470px;margin:7vh auto;padding:40px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 80px #0002}.eyebrow{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:2px}h1{font-size:32px;line-height:1.2;letter-spacing:-1px}p{color:var(--muted)}label{display:block;font-size:13px;margin-top:25px}form input,form button{width:100%;margin-top:8px}form button{margin-top:18px;background:var(--accent);color:var(--bg);font-weight:700}.muted{font-size:12px}.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}.tabs,.toolbar,footer{padding:12px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.tabs{justify-content:space-between;font-size:13px}.tabs select{font-size:12px}.toolbar input{flex:1;min-width:80px}.viewport{min-height:55vh;display:grid;place-items:center;padding:35px}.empty{text-align:center;max-width:530px}footer{justify-content:space-between;color:var(--muted);font-size:11px;border-top:1px solid var(--line);border-bottom:0}#notice{color:var(--accent);text-align:center;min-height:24px}[hidden]{display:none!important}@media(max-width:600px){header{padding:0 18px}.brand small,#status{display:none}main{padding:24px 14px}.card{padding:28px;margin:4vh auto}.toolbar{padding:8px;gap:4px}.toolbar button{padding:8px}.tabs{flex-wrap:wrap}h1{font-size:27px}}
.toolbar #navigate{display:flex;flex:1;gap:8px}.toolbar #navigate input{margin:0;flex:1;width:auto}.toolbar #navigate button{margin:0;width:auto;padding:8px 14px}.connection-tools,.text-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}.connection-tools span{font-size:12px;color:var(--muted)}.text-tools input{flex:1;min-width:100px;margin:0;width:auto}.text-tools button{margin:0;width:auto;background:var(--field);color:var(--text);padding:8px 14px}#frame{display:block;max-width:100%;width:1280px;height:auto;outline-offset:2px}.viewport:has(#frame:not([hidden])){padding:0;min-height:0;display:block;background:#fff}.viewport:has(#frame:not([hidden])) #frame{margin:auto}.viewport:has(#frame:not([hidden])) #empty{display:none}#loading{color:var(--accent)}
.keyboard-capture{position:fixed;left:-10000px;top:0;width:1px;height:1px;opacity:0}.viewport,.viewport:has(#frame:not([hidden])){height:clamp(320px,calc(100vh - 360px),1080px);min-height:320px;display:grid;place-items:center;overflow:hidden;background:#11161b;padding:0}#frame{width:auto;height:auto;max-width:100%;max-height:100%;margin:auto}.tabs select{flex:1;max-width:65%;min-width:100px}.tabs>div{display:flex;gap:8px}.connection-tools select{max-width:210px}main{padding-top:22px}#workspace .viewport .empty{padding:24px}@media(max-width:700px){.connection-tools{gap:6px;padding:8px}.connection-tools button,.connection-tools select{padding:6px 8px;font-size:12px}.toolbar #navigate{min-width:80px}.toolbar #navigate input{width:80px}.actions button{padding:8px}.viewport,.viewport:has(#frame:not([hidden])){height:calc(100vh - 390px)}}
.transfer-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line)}.transfer-tools button{font-size:12px;padding:7px 10px}#picker-status{font-size:12px;color:var(--accent)}#transfer-progress{display:flex;gap:12px;align-items:center;padding:12px 18px}#upload-progress{width:220px}#transfer-list{padding:12px 18px;border-bottom:1px solid var(--line);max-height:220px;overflow:auto}#transfer-list>div{display:flex;gap:10px;align-items:center;padding:6px}#transfer-list span{flex:1;overflow-wrap:anywhere}#transfer-list button{padding:4px 10px;font-size:12px}.drop-active{outline:4px dashed var(--accent);outline-offset:-6px}dialog{max-width:760px;width:85vw;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);padding:24px}dialog::backdrop{background:#0009}dialog textarea{width:100%;min-height:160px;padding:12px;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:8px}dialog>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}dialog a{color:var(--accent)}.viewport,.viewport:has(#frame:not([hidden])){height:clamp(320px,calc(100vh - 440px),1080px)}
