:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e8edf6;background:#0c111a;font-synthesis:none;color-scheme:dark;--accent:#a5c9ff;--muted:#8592a6;--line:#2a3445}
*{box-sizing:border-box}body{margin:0;min-width:350px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button,input,select,textarea{outline-offset:4px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent)}
.masthead{height:80px;max-width:1664px;padding:0 36px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:650;letter-spacing:-.5px}.brand-light{font-weight:400;color:#acb8ca}.brand-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #6f91ba;border-radius:9px;color:#bed8ff;font-size:27px;font-weight:400}.connection{display:flex;gap:8px;align-items:center;font-size:12px;color:#acb8ca}.dot,.small-dot{width:6px;height:6px;background:#e5ba75;display:inline-block;border-radius:50%;flex-shrink:0}.dot.connected,.small-dot{background:#9ddcb4}.dot.offline{background:#ec9b8e}
main{max-width:1664px;margin:auto;padding:0 30px 22px}.browser{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#182130;box-shadow:0 20px 70px #0004}.tabbar{display:flex;align-items:center;gap:3px;padding:10px 11px 0;background:#121a27;min-height:45px}.tabs{display:flex;gap:3px;overflow-x:auto;max-width:calc(100% - 42px);scrollbar-width:thin}.tab{display:flex;align-items:center;gap:10px;min-width:110px;max-width:210px;border:0;background:transparent;color:#9daabd;padding:9px 10px 10px 13px;border-radius:7px 7px 0 0;font-size:12px;cursor:pointer}.tab.selected{background:#202b3c;color:#e9eff8}.tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.tab-close{font-size:17px;line-height:12px;display:grid;place-items:center;width:20px;height:20px;border:0;background:transparent;color:#a5b4c7;border-radius:4px}.tab-close:hover{background:#40516b}
.icon-button{border:0;background:transparent;color:#acb9cd;min-width:34px;height:34px;border-radius:6px;font-size:22px;line-height:1}.icon-button:hover,.tool-button:hover{background:#2d3b50;color:#fff}.navigation{display:flex;align-items:center;gap:12px;padding:11px 15px;background:#202b3c}.history-buttons{display:flex;gap:2px}.address-form{display:flex;align-items:center;flex:1;gap:10px;min-width:0;border:1px solid #3a4a61;border-radius:7px;padding:0 6px 0 12px;background:#131d2b;transition:border-color .15s}.address-form:focus-within{border-color:#8aafd9}.address-icon{color:#91a7c1;font-size:20px}#address{border:0;outline:0;background:transparent;width:100%;min-width:0;color:#e4edf8;padding:11px 0;font-size:13px}#address::placeholder{color:#8494a9}.go-button{border:0;border-radius:4px;background:#a5c9ff;color:#142b4c;padding:6px 12px;font-size:12px;font-weight:650;white-space:nowrap}.go-button span{margin-left:7px;font-size:16px}
.tools{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;gap:12px;background:#1a2535;border-bottom:1px solid var(--line)}.server-badge{display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:11px;color:#b9c8da}.small-dot{width:5px;height:5px}.tool-buttons{display:flex;gap:2px;align-items:center;overflow-x:auto}.tool-button{font-size:11px;color:#b7c5d9;border:0;background:transparent;border-radius:4px;padding:6px 9px;white-space:nowrap}.size-control select{font-size:11px;border:1px solid #3b4a61;border-radius:4px;padding:4px 7px;background:#1a2535;color:#c2cfe0}.loading-track{height:2px;background:#1a2535;overflow:hidden}#loading-progress{height:100%;background:#a5c9ff;width:0}#loading-progress.active{width:35%;animation:loading 1.2s ease-in-out infinite}@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(400%)}}
.screen-wrap{position:relative;min-height:380px;background:#fff;overflow:hidden}#screen{display:block;width:100%;height:auto;min-height:380px;object-fit:contain;object-position:top left;touch-action:none;user-select:none;-webkit-user-drag:none;outline:none}.welcome{position:absolute;inset:0;background:#f3f6f9;color:#1b2b43;display:flex;align-items:center;justify-content:center;padding:40px 25px}.welcome-inner{max-width:600px;width:100%;margin-top:-10px}.eyebrow{font-size:10px;letter-spacing:2.1px;color:#6a7b91;font-weight:700}h1{font-size:clamp(30px,3.7vw,54px);font-weight:550;letter-spacing:-2px;line-height:1.13;margin:22px 0}.welcome p{color:#617084;line-height:1.8;font-size:14px;max-width:420px}.quick-links{display:flex;gap:10px;margin-top:29px}.quick-links button{border:1px solid #c6d1de;border-radius:6px;background:white;color:#314663;font-size:12px;padding:11px 14px}.quick-links button span{margin-left:26px;color:#7186a1}.quick-links button:hover{border-color:#7c96b8;background:#f9fbfd}.route{display:flex;align-items:center;gap:18px;border-top:1px solid #d9e0e9;padding-top:21px;margin-top:48px;color:#7c8a9c;font-size:11px}.route-server{background:#e1eaf5;color:#34547e;padding:5px 10px;border-radius:4px;font-weight:600}.statusbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 15px;color:#9fb0c6;background:#172131;font-size:10px;min-height:32px}#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:85%}#server-ip{white-space:nowrap;color:#7f95af}.hint{color:#6f8097;font-size:11px;text-align:center;line-height:1.7;margin:17px 0}kbd{border:1px solid #344256;padding:1px 4px;border-radius:3px;font-size:10px;color:#a5b7cf}.hint strong{font-weight:500;color:#a4b6cc}
#remote-keyboard{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:.01;border:0;resize:none;padding:0;font-size:16px}.disconnect-overlay{position:absolute;inset:0;background:#101b2aec;color:#f0f5fc;display:grid;place-items:center;text-align:center;padding:20px}.disconnect-overlay h2{font-size:24px;font-weight:500}.disconnect-overlay p{color:#a7b9cf;max-width:440px;line-height:1.6}.primary-button,.secondary-button{padding:10px 16px;border-radius:5px;border:0;font-size:13px}.primary-button{background:#a5c9ff;color:#152e50}.secondary-button{background:#2a3a50;color:#d4dfed}.hidden{display:none!important}dialog{border:1px solid #46536a;border-radius:12px;background:#192536;color:#e7effa;padding:27px;max-width:min(520px,92vw);width:100%}dialog::backdrop{background:#0008}dialog h2{font-size:18px;font-weight:500;margin-top:0}dialog p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:14px;max-height:250px;overflow:auto}.modal-input,#copy-content{width:100%;background:#0f1927;border:1px solid #40536d;color:#e4edfa;border-radius:5px;padding:10px;font-size:14px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}#copy-content{height:180px;resize:vertical}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1700px){.screen-wrap{max-height:calc(100vh - 270px);overflow:auto}}@media(max-width:700px){.masthead{height:65px;padding:0 16px}.brand{font-size:17px}.connection{font-size:10px}.brand-icon{height:27px;width:27px;font-size:22px}main{padding:0 8px 12px}.navigation{gap:4px;padding:8px 6px}.history-buttons{gap:0}.icon-button{min-width:27px;font-size:19px}.address-form{gap:4px;padding-left:7px}.address-icon{display:none}#address{font-size:12px;padding:10px 0}.go-button{padding:5px 8px}.go-button span{display:none}.tools{padding:6px 7px;gap:4px}.server-badge{font-size:9px}.tool-button{font-size:10px;padding:6px}.size-control select{font-size:10px;max-width:72px}.welcome-inner{max-width:330px}.welcome{padding:30px}.welcome h1{letter-spacing:-1px;font-size:31px}.welcome p{font-size:12px}.quick-links button{font-size:11px;padding:9px}.quick-links button span{margin-left:10px}.route{gap:12px;margin-top:30px}.hint{padding:0 12px;font-size:10px}.statusbar{font-size:9px;padding:8px}#server-ip{display:none}.screen-wrap,#screen{min-height:520px}}
@media(prefers-reduced-motion:reduce){#loading-progress.active{animation:none;width:100%}}
#screen{min-height:0}