*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
 color:#e8eef8;background:#07111d;font-synthesis:none;text-rendering:optimizeLegibility}
html,body{width:100%;min-height:100%;margin:0}
body{font-size:15px;line-height:1.5}
button,input{font:inherit}
button{color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,[tabindex="0"]:focus-visible{
 outline:2px solid #66d9ce;outline-offset:3px}
[hidden]{display:none!important}

.login-shell{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;min-height:100svh;display:grid;place-items:center;padding:24px;
 background:radial-gradient(ellipse at 50% 0%,#1b3852 0%,#0a1725 43%,#050a11 100%)}
.login-shell:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
 background-image:linear-gradient(#a7c5e008 1px,transparent 1px),linear-gradient(90deg,#a7c5e008 1px,transparent 1px);
 background-size:58px 58px;mask-image:radial-gradient(ellipse at 50% 42%,#000 0%,transparent 76%)}
.login-shell:after{content:"";position:fixed;z-index:-1;pointer-events:none;width:min(70vw,720px);aspect-ratio:1;
 left:50%;top:50%;transform:translate(-50%,-55%);border:1px solid #79d9e012;border-radius:50%;
 box-shadow:0 0 0 42px #79d9e008,0 0 0 120px #79d9e005,0 0 130px #327f9630}
.login-card{position:relative;width:min(100%,510px);padding:clamp(27px,6vw,52px);overflow:hidden;
 border:1px solid #b9d7ed20;border-radius:28px;background:linear-gradient(145deg,#12243aed,#0a1422f5 72%);
 box-shadow:0 34px 120px #0009,inset 0 1px #ffffff13;backdrop-filter:blur(24px)}
.login-card:before{content:"";position:absolute;top:0;left:13%;right:13%;height:1px;
 background:linear-gradient(90deg,transparent,#75e5d7aa,#8ebdff88,transparent)}
.login-header{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand-copy{display:grid;gap:3px}
.brand-copy strong{font-size:12px;letter-spacing:.18em;color:#f2f7ff}
.brand-copy small{font-size:9px;letter-spacing:.13em;color:#8196ac}
.status-chip{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #73dfd426;
 border-radius:999px;background:#53d6c20a;color:#a8cdc9;font-size:10px;white-space:nowrap}
.secure-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#62dfb4;
 box-shadow:0 0 12px #62dfb477}
.login-hero{margin-top:clamp(44px,9vw,70px)}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 15px;color:#78e0d2;
 font-size:10px;letter-spacing:.14em;font-weight:750}
.eyebrow span{width:28px;height:1px;background:linear-gradient(90deg,#74e6d3,#74e6d300)}
.login-card h1{margin:0 0 15px;font-size:clamp(36px,8vw,52px);line-height:1.13;letter-spacing:-.055em}
.login-card h1 em{font-style:normal;color:#93b9df;text-shadow:0 0 34px #5aa5d52b}
.login-intro{max-width:390px;margin:0 0 32px;color:#9cacc0;font-size:14px;line-height:1.85}
#login label{display:block;margin-bottom:9px;color:#d8e1ef;font-size:13px;font-weight:650}
.credential-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:9px}
#login .credential-heading label{flex:1;margin:0;min-width:0}
#input-count{color:#91a8bb;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.login-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:23px 0 17px}
.login-methods.single{grid-template-columns:1fr}
.engine-picker{min-width:0;margin:18px 0 0}
.engine-picker>label{display:block;margin-bottom:8px;color:#c3d3e3;font-size:13px}
.engine-picker select{display:block;width:100%;min-width:0;min-height:46px;padding:10px 12px;
 color:#eef5ff;background:#101e30;border:1px solid #96bce342;border-radius:12px;font:inherit;font-size:14px}
.engine-picker select:focus-visible{outline:2px solid #9acaed;outline-offset:3px}
.engine-picker select:disabled{opacity:.65}
.engine-picker p{font-size:12px;color:#a6b9d0;line-height:1.6;overflow-wrap:anywhere;margin:8px 0}
.engine-alternatives summary{width:fit-content;cursor:pointer;color:#a6b9d0;font-size:12px;padding:4px 0}
.engine-alternatives strong{font-weight:500;color:#c4d4e5}
.method-choice{min-height:39px;padding:0 12px;border:1px solid #ffffff18;border-radius:11px;
 background:#ffffff07;color:#9fb0c4;font-size:12px;transition:background .16s,border-color .16s,color .16s}
.method-choice.selected{border-color:#60d9c677;background:#5bd5c51b;color:#a8f0e2}
.method-choice:disabled{cursor:not-allowed;border-color:#ffffff10;background:#ffffff03;color:#718196;opacity:.68}
.method-choice[hidden]{display:none}
#code{width:100%;height:60px;padding:0 17px;border:1px solid #a9c8e226;border-radius:14px;
 color:#f5fbff;background:linear-gradient(100deg,#06101cd9,#0b1925e8);letter-spacing:.115em;
 font:600 15px ui-monospace,SFMono-Regular,Consolas,monospace;transition:border-color .18s,box-shadow .18s}
#code::placeholder{color:#61758a;letter-spacing:.035em;font-size:13px}
#code:focus{border-color:#59cbbb;box-shadow:0 0 0 4px #43c9bb19;outline:none}
#code[aria-invalid=true]{border-color:#ffaaa5;box-shadow:0 0 0 3px #ffaaa514}
.field-help{display:block;margin-top:9px;color:#7c90a5;font-size:11px}
.primary-button{width:100%;height:55px;margin-top:23px;padding:0 18px;border:1px solid #b2fff12a;border-radius:14px;
 display:flex;align-items:center;justify-content:space-between;background:linear-gradient(105deg,#80ead7,#54cbd1 65%,#68b8d9);
 color:#06121c;font-weight:780;box-shadow:0 12px 38px #39c5b62c,inset 0 1px #ffffff6b;
 transition:transform .18s,filter .18s,box-shadow .18s}
.primary-button:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 17px 46px #39c5b638,inset 0 1px #ffffff88}
.primary-button:disabled{opacity:.6;cursor:wait;transform:none}
#error{min-height:20px;margin:12px 0 0;color:#ffaaa5;font-size:12px}
.auth-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;
 padding:24px;border:1px solid #9edbd62e;border-radius:20px;background:linear-gradient(145deg,#13283a,#091521);
 color:#e8eef8;box-shadow:0 24px 100px #000b}
.auth-dialog::backdrop{background:#02070dcc;backdrop-filter:blur(8px)}
.auth-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.auth-dialog-head h2{margin:2px 0 0;font-size:21px;letter-spacing:-.025em}
.auth-dialog-head .eyebrow{margin:0;font-size:9px}
.auth-summary{color:#a9b8c9;font-size:12px;line-height:1.7}
.auth-enabled{display:block;margin:12px 0;padding:12px;border:1px solid #5cd6bf38;border-radius:12px;
 background:#5cd6bf0c;color:#a8eade;font-size:13px}
.auth-dialog label{display:block;margin:14px 0 7px;color:#d9e4ef;font-size:12px;font-weight:650}
.totp-secret{display:block;overflow-wrap:anywhere;padding:14px;border:1px solid #6fdacb35;border-radius:11px;
 background:#050e17;color:#a5f2e2;font:600 15px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em}
#totp-device-code-a,#totp-device-code-b{width:100%;height:48px;padding:0 14px;border:1px solid #ffffff24;border-radius:11px;
 background:#050e17;color:#f2f7fb;font:600 17px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.3em}
#totp-management-code,#totp-confirm-code-a,#totp-confirm-code-b{width:100%;height:48px;padding:0 14px;border:1px solid #ffffff24;border-radius:11px;
 background:#050e17;color:#f2f7fb;font:600 17px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.3em}
#totp-device-name{width:100%;height:44px;padding:0 12px;border:1px solid #ffffff24;border-radius:11px;
 background:#050e17;color:#f2f7fb}
#totp-generate{margin-top:10px}
.totp-device-list{display:grid;gap:8px;margin:12px 0}
.totp-device-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
 padding:11px;border:1px solid #ffffff14;border-radius:12px;background:#06111c}
.totp-device-info{display:grid;gap:3px;min-width:0}
.totp-device-info strong{overflow-wrap:anywhere;color:#e7f1fb;font-size:12px}
.totp-device-info small{color:#8598ad;font-size:10px}
.totp-device-actions{display:flex;gap:5px}
.totp-device-actions button{min-height:34px;padding:0 9px;border:1px solid #ffffff16;border-radius:8px;
 background:#ffffff08;color:#b9c9d9;font-size:10px}
.totp-device-actions button:hover{border-color:#65d9c66b;background:#65d9c611}
.auth-dialog-actions{display:flex;gap:9px;margin-top:13px}
.auth-dialog-actions .primary-button{margin-top:0;flex:1}
.auth-dialog-actions .soft-button{min-height:48px}
#totp-enabled-state .auth-dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#totp-enabled-state .auth-dialog-actions .soft-button{width:100%;white-space:normal}
.auth-recovery-note{margin-top:17px;padding-top:13px;border-top:1px solid #ffffff12;line-height:1.65}
#auth-error{min-height:0;margin:7px 0 0;color:#ffaaa5;font-size:12px}
.login-foot{margin-top:22px;padding-top:17px;border-top:1px solid #ffffff12;display:flex;
 align-items:center;gap:8px;color:#8093a8;font-size:10px}
.login-foot small{margin-left:auto;color:#53697e;font-size:8px;letter-spacing:.12em;white-space:nowrap}

.desk-shell{--topbar-height:72px;min-height:100dvh;overflow-x:clip;overflow-y:visible;background:#050b13}
#desk-page{position:relative;width:100%;height:auto;min-height:100dvh;min-width:0;display:flex;
 flex-direction:column;background:
 radial-gradient(ellipse at 50% -25%,#132a3b 0%,transparent 52%),#070e17}
.topbar{position:sticky;top:0;z-index:5;display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;min-height:var(--topbar-height);gap:20px;padding:8px 24px;
 border-bottom:1px solid #ffffff10;background:#07111dd9;backdrop-filter:blur(18px)}
.compact .brand-copy strong{font-size:13px;letter-spacing:.02em}
.compact .brand-copy small{font-size:9px;letter-spacing:.12em}
.connection-state{display:flex;align-items:center;gap:9px;margin-left:18px;color:#99abc0;font-size:12px}
.top-actions{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;min-width:0}
.top-actions>button{white-space:nowrap;flex:0 0 auto}
.soft-button,.disconnect-button,.icon-button{
 border:1px solid #ffffff16;background:#ffffff09;transition:background .15s,border-color .15s,transform .15s}
.control-button{min-height:40px;padding:0 14px;border:1px solid #6ad9ca66;border-radius:12px;
 display:inline-flex;align-items:center;justify-content:center;background:#5edbc81b;color:#aaf0e4;
 font-size:13px;font-weight:700;transition:background .15s,border-color .15s,transform .15s}
.control-button:hover,.control-button.selected{border-color:#71e4d3aa;background:#5edbc833}
.control-button:disabled{opacity:.7;cursor:wait}
.soft-button{min-height:40px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;
 justify-content:center;gap:8px;color:#c2d0df;font-size:13px}
.soft-button:hover,.soft-button.selected,.icon-button:hover{
 border-color:#6ad9ca66;background:#6ad9ca16}
.disconnect-button{min-height:40px;padding:0 15px;border-radius:12px;display:inline-flex;
 align-items:center;gap:8px;color:#ffb6b0;background:#ff67590c;border-color:#ff675925;font-size:13px}
.disconnect-button:hover{background:#ff675921;border-color:#ff675955}
.disconnect-button:disabled{opacity:.7;cursor:wait}
.desktop-recovery{position:absolute;z-index:4;top:24px;left:50%;transform:translateX(-50%);
 width:min(430px,calc(100% - 36px));padding:12px;border:1px solid #83d8c766;border-radius:12px;
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;background:#102637;color:#e2f5f0;box-shadow:0 5px 18px #0007}
.desktop-recovery strong{font-size:13px;align-self:center;overflow-wrap:anywhere}
.desktop-recovery small{grid-column:1 / -1;color:#aac6cd;font-size:11px}
.desktop-recovery button{min-height:36px;border:1px solid #85daca88;border-radius:8px;padding:0 10px;background:#21554a;color:#eefff8;font-size:12px}
.desktop-recovery button:disabled{opacity:.65;cursor:wait}
.screen-stage{position:relative;flex:1 0 auto;width:100%;height:max(280px,calc(100dvh - var(--topbar-height)));min-width:0;min-height:280px;padding:14px 18px 18px;overflow:hidden}
.screen-glow{position:absolute;inset:14px 18px 18px;border:1px solid #ffffff14;border-radius:18px;
 pointer-events:none;box-shadow:0 22px 80px #0007}
.screen-stage iframe{position:relative;display:block;width:100%;height:100%;min-width:0;border:1px solid #ffffff12;
 border-radius:18px;background:#0b111b}
.disconnect-overlay{position:absolute;inset:14px 18px 18px;z-index:3;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff16;border-radius:18px;
 background:#07111df2;color:#e8eef8}
.disconnect-overlay span:last-child{color:#8799ae;font-size:13px}
.spinner{width:28px;height:28px;margin-bottom:7px;border:2px solid #ffffff20;border-top-color:#65dccc;
 border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.launch-note{position:absolute;top:28px;left:50%;z-index:2;transform:translateX(-50%);
 padding:8px 14px;border:1px solid #70ddca35;border-radius:999px;background:#10241fe8;color:#a9eee0;
 font-size:12px;white-space:nowrap}

.help-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.help-panel-heading div{display:grid;gap:2px}
.help-panel-heading strong{font-size:14px}
.help-panel-heading small{color:#8194a9;font-size:11px}
.icon-button{min-height:34px;padding:0 12px;border-radius:10px;color:#aebdd0;font-size:12px}







.live-message{position:fixed;z-index:11;left:50%;bottom:22px;transform:translate(-50%,14px);
 padding:9px 14px;border:1px solid #ffffff17;border-radius:12px;background:#142334;color:#d7e4ef;
 opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.live-message:not(:empty){opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
 .desk-shell{--topbar-height:60px}
 .topbar{gap:8px;padding:0 12px}
 .compact .brand-copy small{display:none}
 .connection-state{margin-left:4px;gap:6px;font-size:10px;white-space:nowrap}
 .screen-stage{height:max(240px,calc(100dvh - var(--topbar-height)));min-height:240px;padding:8px 8px 6px;}
 .screen-glow{inset:8px 8px 6px;border-radius:13px}
 .screen-stage iframe{border-radius:13px}
 .disconnect-overlay{inset:8px 8px 6px;border-radius:13px}

 .help-panel-heading{margin-bottom:9px}
 .help-panel-heading small{font-size:10px}




 .live-message{top:66px;bottom:auto;max-width:calc(100vw - 24px);text-align:center}
 .totp-device-row{grid-template-columns:1fr}
 .totp-device-actions button{flex:1}
}
@media(max-width:600px){
 .desk-shell{--topbar-height:74px}
 .topbar{padding:4px 9px;gap:6px}
 .top-actions{width:100%;margin-left:0}
}
@media(max-width:390px){
 .login-shell{padding:14px}
 .login-card{padding:24px 21px;border-radius:23px}
 #totp-enabled-state .auth-dialog-actions{grid-template-columns:1fr}
 .brand-copy strong{font-size:11px}
 .brand-copy small{font-size:8px;letter-spacing:.09em}
 .status-chip{gap:6px;padding:6px 8px;font-size:9px}
 .login-card h1{font-size:38px}
 .login-foot small{display:none}

 .connection-state{display:none}
 .topbar{padding:0 9px}
 .disconnect-button{padding:0 8px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(max-width:1024px) and (min-width:761px){
 .topbar{gap:12px;padding-inline:16px;}
 .connection-state{margin-left:4px;}
}
@media(max-height:560px){
 .login-shell{place-items:start center;padding:12px;}
 .login-hero{margin-top:20px;}
 .login-intro{margin-bottom:18px;line-height:1.65;}
 .login-foot{margin-top:14px;padding-top:12px;}
}
.mouse-mode-panel{position:fixed;z-index:10;right:16px;top:90px;width:min(320px,calc(100vw - 24px));
 max-height:calc(100dvh - 110px);overflow:auto;padding:14px;border:1px solid #88dfd077;border-radius:16px;background:#091523;box-shadow:0 10px 32px #0006}
.mouse-mode-options{display:flex;gap:8px}.mouse-mode-options button{flex:1;min-height:40px;padding:0 8px;border:1px solid #ffffff29;border-radius:8px;background:#163044;color:#c4eee4;font-size:13px}
.mouse-mode-options button.selected{background:#26594e;border-color:#73e1cc;color:#dcfff4}
.mouse-mode-options button:disabled{opacity:.6}.mouse-mode-panel p{font-size:12px;color:#adcad3;margin:10px 0 0}
/* All geometry derives from the panel, in both dimensions. Key slots retain
   ANSI quarter-unit proportions even when the panel becomes short or narrow. */
.virtual-keyboard{--vk-ui:1;--vk-key-gap:4px;--vk-key-font:13px;--vk-key-radius:6px;
 position:fixed;z-index:7;display:flex;flex-direction:column;box-sizing:border-box;
 gap:calc(6px * var(--vk-ui));container-type:inline-size;padding:calc(10px * var(--vk-ui));
 border:1px solid #88dfd077;border-radius:calc(16px * var(--vk-ui));
 background:#091523;opacity:var(--vk-opacity,.85);box-shadow:0 10px 32px #0006;
 overflow:hidden;overscroll-behavior:contain;isolation:isolate}
.virtual-keyboard button{white-space:nowrap;line-height:1.1;letter-spacing:normal;box-sizing:border-box}
.virtual-keyboard.vk-menu-open{visibility:hidden;pointer-events:none}
.vk-heading{display:flex;flex:0 0 auto;align-items:stretch;gap:calc(6px * var(--vk-ui));min-width:0;height:calc(32px * var(--vk-ui))}
.vk-drag-handle{display:flex;align-items:center;gap:calc(7px * var(--vk-ui));flex:1;min-width:0;
 padding:0 calc(5px * var(--vk-ui));border:0;border-radius:calc(7px * var(--vk-ui));text-align:left;
 background:#ffffff08;color:#eaf3fb;cursor:grab;touch-action:none;user-select:none}
.vk-drag-handle:active{cursor:grabbing;background:#7aded51a}
.vk-drag-handle>span{font-size:calc(21px * var(--vk-ui));color:#9cdacf}
.vk-drag-handle strong{font-size:calc(14px * var(--vk-ui));white-space:nowrap}
.vk-drag-handle small{color:#adbfce;font-size:calc(12px * var(--vk-ui));white-space:nowrap}
.vk-mode-label,#virtual-keyboard-close,.vk-selection{flex:0 0 auto;min-width:0;min-height:0;
 padding:0 calc(9px * var(--vk-ui));border:1px solid #ffffff29;border-radius:calc(7px * var(--vk-ui));
 background:#163044;color:#c4eee4;font-size:calc(12px * var(--vk-ui));cursor:pointer}
.vk-mode-label:hover,.vk-selection:hover,#virtual-keyboard-close:hover{background:#25534f}
.vk-mode-label{font-variant-numeric:tabular-nums}
.vk-selection[aria-checked=true]{background:#26594e;border-color:#73e1cc;color:#dcfff4}
.vk-mode-label:disabled{opacity:1;background:#102333;border-color:#708b9c66;color:#b2c6d0;cursor:default}
.vk-page-tabs{display:flex;flex:0 0 auto;gap:calc(4px * var(--vk-ui));height:calc(30px * var(--vk-ui));min-width:0}
.vk-page-tab{flex:1 1 0;min-width:0;min-height:0;padding:0 calc(3px * var(--vk-ui));border:1px solid #ffffff29;
 border-radius:calc(7px * var(--vk-ui));background:#142c42;color:#c6d9e7;font-size:calc(12px * var(--vk-ui));cursor:pointer}
.vk-page-tab[aria-selected=true]{border-color:#73e1cc;background:#26594e;color:#dcfff4}
.vk-body{flex:1;min-height:0;min-width:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.vk-board{display:grid;grid-template-columns:minmax(0,15fr) minmax(0,3fr) minmax(0,4fr);
 gap:calc(var(--vk-key-gap) * 2);height:100%;min-height:0}
.virtual-keyboard[data-layout=tkl] .vk-board{grid-template-columns:minmax(0,15fr) minmax(0,3fr)}
.vk-alpha-group,.vk-phone-main{display:grid;grid-template-rows:repeat(var(--vk-main-rows,5),minmax(0,1fr));
 gap:var(--vk-key-gap);height:100%;min-width:0;min-height:0}
.vk-row{display:grid;grid-template-columns:repeat(var(--vk-columns,60),minmax(0,1fr));min-width:0;min-height:0}
.vk-key{min-width:0;min-height:0;height:100%;margin:0;padding:0;border:1px solid #8294aa55;
 border-radius:var(--vk-key-radius);display:flex;align-items:center;justify-content:center;
 background:linear-gradient(#293d53,#1d3047);box-shadow:inset 0 1px #d6ebff18,inset 0 -2px #0004;
 color:#f2f8ff;font:600 var(--vk-key-font) ui-monospace,SFMono-Regular,Consolas,monospace;
 touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
.vk-row>.vk-key,.vk-common-keys>.vk-key{margin-inline:calc(var(--vk-key-gap) / 2)}
.vk-key:focus-visible{outline:2px solid #8bf0da;outline-offset:-2px}
.vk-key:active,.vk-key.pressed{background:#327e70;border-color:#bcffe8;box-shadow:inset 0 2px 4px #0005}
.vk-key.modifier-active{border-color:#80f0cd;background:#23694f;color:#e0fff2}
.vk-dual-key{flex-direction:column;gap:0;line-height:1}
.vk-key-upper,.vk-key-lower{display:block;line-height:1;pointer-events:none;text-decoration:none}
.vk-key-upper{font-size:.78em;color:#a9bdcf}
.vk-key-lower{font-size:.96em}
.vk-shift-layer .vk-key-upper{color:#e5fff7}
.vk-shift-layer .vk-key-lower{color:#93a9bb}
.vk-key:disabled{opacity:.5;cursor:wait}
.vk-key[data-keysym="102"],.vk-key[data-keysym="106"]{text-decoration:underline;text-underline-offset:.32em}
.vk-key[data-keysym="65377"],.vk-key[data-keysym="65300"],.vk-key[data-keysym="65299"]{font-size:calc(var(--vk-key-font) * .8)}
.vk-navigation-page{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-rows:repeat(var(--vk-page-rows,4),minmax(0,1fr));gap:var(--vk-key-gap);height:100%;min-height:0;min-width:0}
.vk-numpad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 grid-template-rows:repeat(5,minmax(0,1fr));gap:var(--vk-key-gap);min-width:0;min-height:0}
.vk-numpad-grid [data-keysym="65421"]{font-size:calc(var(--vk-key-font) * .8)}
.vk-numpad-plus{grid-column:4;grid-row:2 / span 2}.vk-numpad-enter{grid-column:4;grid-row:4 / span 2}
.vk-numpad-zero{grid-column:1 / span 2;grid-row:5}
.vk-numpad-full{grid-template-rows:repeat(6,minmax(0,1fr))}
.vk-numpad-spacer{grid-column:1 / span 4;grid-row:1}
.vk-numpad-full .vk-numpad-plus{grid-row:3 / span 2}.vk-numpad-full .vk-numpad-enter{grid-row:5 / span 2}
.vk-numpad-full .vk-numpad-zero{grid-row:6}
.vk-page{width:100%;height:100%;min-height:0;margin:0 auto}
.vk-page-grid{display:grid;grid-template-columns:repeat(var(--vk-page-columns,5),minmax(0,1fr));
 grid-template-rows:repeat(var(--vk-page-rows,4),minmax(0,1fr));gap:var(--vk-key-gap)}
.vk-symbols-page{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--vk-key-gap)}
.vk-nav-page{max-width:480px}
#vk-page-numpad{max-width:440px}
#vk-page-function{max-width:680px}
.vk-common-keys{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));flex:0 0 auto;height:calc(32px * var(--vk-ui))}
.vk-common-keys .vk-key{font-size:var(--vk-common-font)}
.virtual-keyboard[data-layout=phone] .vk-phone-main{--vk-main-rows:3}
.vk-footer{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:stretch;gap:calc(6px * var(--vk-ui));height:calc(28px * var(--vk-ui));min-width:0}
.vk-footer>.vk-mode-label,.vk-footer>.vk-selection{padding-inline:calc(7px * var(--vk-ui))}
.vk-opacity{display:flex;flex:1 1 140px;max-width:calc(220px * var(--vk-ui));align-items:center;gap:calc(5px * var(--vk-ui));white-space:nowrap;color:#c1d2df;font-size:calc(11px * var(--vk-ui));min-width:0}
.vk-opacity input{flex:1 1 60px;width:0;min-width:calc(36px * var(--vk-ui));height:100%;margin:0;accent-color:#70dbc1}
.vk-opacity output{flex:0 0 4ch;text-align:right;font-variant-numeric:tabular-nums}
.vk-status{margin:0;flex:0 0 auto;max-height:calc(30px * var(--vk-ui));overflow:auto;color:#b2eddf;
 font-size:calc(11px * var(--vk-ui));line-height:1.25;overflow-wrap:anywhere}
.vk-status:empty{display:none}
.vk-resize-handle{margin-left:auto;flex:0 0 calc(36px * var(--vk-ui));min-width:0;min-height:0;padding:0;
 border:1px solid #9ae7d94d;border-radius:calc(7px * var(--vk-ui));background:#173931;color:#bdffe7;
 cursor:nwse-resize;touch-action:none;font-size:calc(21px * var(--vk-ui))}
.vk-manipulating iframe{pointer-events:none}.vk-manipulating,.vk-manipulating *{user-select:none!important}
.vk-drag-handle:focus-visible,.vk-resize-handle:focus-visible,.vk-mode-label:focus-visible,.vk-selection:focus-visible{outline:2px solid #9ffae0;outline-offset:1px}
@container(max-width:590px){.vk-drag-handle small{display:none}}
@container(max-width:390px){.vk-opacity-caption{display:none}}

/* Keep the ORIGINAL drag handle in the visible intersection, including when
   the panel is above/left of the viewport. No duplicate input controls. */
.vk-heading{position:relative;z-index:2;width:calc(var(--vk-visible-width,100%) - 20px * var(--vk-ui) - 2px);
 transform:translate(var(--vk-dock-x,0px),var(--vk-dock-y,0px))}
.vk-edge-docked .vk-heading{background:#102638;border-radius:calc(8px * var(--vk-ui));box-shadow:0 3px 10px #0007}
.vk-edge-compact .vk-drag-handle strong,.vk-edge-compact .vk-drag-handle small{display:none}
.vk-edge-compact .vk-drag-handle:after{content:"拖回";font-size:calc(12px * var(--vk-ui));white-space:nowrap}
/* Overlay controls never resize the remote desktop or intercept it when off. */
.remote-wheel{position:fixed;z-index:7;left:0;top:0;
 width:80px;max-height:calc(100dvh - 24px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 7px;
 border:1px solid #7aded57a;border-radius:18px;background:#0c1e2fed;box-shadow:0 8px 28px #0005;color:#d6f6ef;
 user-select:none;-webkit-user-select:none}
.wheel-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:3px;font-size:12px}
.wheel-drag{flex:1;min-width:0;min-height:38px;display:flex;align-items:center;justify-content:center;gap:1px;
 padding:0;border:0;border-radius:7px;background:#ffffff08;color:#d6f6ef;font-size:12px;white-space:nowrap;cursor:grab;touch-action:none}
.wheel-drag span{display:none}.wheel-dragging .wheel-drag{cursor:grabbing;background:#5edbc82b}
.wheel-drag:focus-visible{outline:2px solid #98f9da;outline-offset:1px}
.wheel-close{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;padding:0;border:1px solid #ffffff2c;
 border-radius:7px;background:#ffffff08;color:#d6f6ef;font-size:18px;line-height:1}
.wheel-slider{position:relative;width:52px;height:clamp(166px,calc(24dvh + 62px),278px);min-height:80px;flex:1 1 auto;touch-action:none;
 border:1px solid #76d4c73b;border-radius:30px;background:linear-gradient(#11384a,#0d2233 50%,#11384a);cursor:ns-resize;outline-offset:3px}
.wheel-slider:before{content:'';position:absolute;left:12px;right:12px;top:50%;border-top:1px dashed #8dbbbd88}
.wheel-direction{position:absolute;left:0;right:0;text-align:center;font-size:16px;color:#a3ceca;pointer-events:none}
.wheel-up{top:5px}.wheel-down{bottom:5px}
.wheel-thumb{position:absolute;left:50%;top:50%;width:38px;height:36px;border:1px solid #a1ffe08c;border-radius:13px;
 display:grid;place-items:center;background:linear-gradient(#2d7469,#205348);color:#d2fff1;transform:translate(-50%,-50%);
 box-shadow:0 2px 7px #0005;font-size:20px;line-height:1;pointer-events:none}
.wheel-active .wheel-thumb{background:#449b88;border-color:#c1ffee}
.remote-wheel.wheel-menu-open{visibility:hidden;pointer-events:none}
.remote-wheel.wheel-tiny{padding:5px;gap:0}
.wheel-tiny .wheel-drag,.wheel-tiny .wheel-slider{display:none}
.wheel-tiny .wheel-heading{justify-content:center}
@media(max-width:600px){.remote-wheel{width:80px}}
@media(max-height:460px){.remote-wheel{gap:3px;padding:5px}.wheel-slider{height:166px}}
.text-entry{position:fixed;z-index:7;display:grid;grid-template-rows:32px 32px minmax(0,1fr) 34px;gap:6px;
 padding:10px;border:1px solid #88dfd077;border-radius:16px;background:#091523;box-shadow:0 10px 32px #0006;
 overflow:hidden;isolation:isolate;container-type:inline-size}
.te-heading{position:relative;z-index:2;display:flex;gap:6px;width:calc(var(--te-visible-width,100%) - 22px);
 transform:translate(var(--te-dock-x,0px),var(--te-dock-y,0px))}
.te-drag{flex:1;min-width:0;padding:0 8px;border:0;border-radius:7px;background:#ffffff08;color:#eaf3fb;
 text-align:left;white-space:nowrap;font-size:14px;font-weight:650;cursor:grab;touch-action:none;user-select:none}
.te-close,.te-send,.te-resize{border:1px solid #ffffff29;border-radius:7px;background:#163044;color:#c4eee4;
 font:inherit;font-size:12px;white-space:nowrap;padding:0 10px;min-width:0}
.te-close{flex:0 0 auto}.te-docked .te-heading{background:#102638;border-radius:7px}
.te-narrow .te-drag{font-size:0;padding:0 3px}.te-narrow .te-drag strong{display:none}
.te-field{width:100%;height:100%;min-width:0;min-height:0;resize:none;overflow:auto;margin:0;padding:8px;
 border:1px solid #82aeae66;border-radius:8px;background:#06111e;color:#f2f8ff;font:16px/1.4 system-ui,sans-serif;
 white-space:pre-wrap;tab-size:4;overscroll-behavior:contain}
.te-field:focus-visible{outline:2px solid #70dbc1;outline-offset:-2px}
.te-status{margin:0;max-height:2.5em;overflow:auto;font-size:11px;line-height:1.25;color:#adcad3;overflow-wrap:anywhere}
.te-footer{display:flex;align-items:stretch;gap:8px;min-width:0}
.te-send{flex:0 0 auto;background:#26594e;border-color:#73e1cc;color:#dcfff4;min-width:48px}
.te-send:disabled{opacity:.6;cursor:default}
.te-opacity{display:flex;flex:1;align-items:center;gap:5px;min-width:0;font-size:11px;color:#c1d2df;white-space:nowrap}
.te-opacity input{flex:1;width:0;min-width:24px;margin:0;accent-color:#70dbc1}
.te-opacity output{flex:0 0 4ch;text-align:right;font-variant-numeric:tabular-nums}
.te-resize{flex:0 0 32px;padding:0;cursor:nwse-resize;touch-action:none;font-size:21px;background:#173931}
.te-manipulating{user-select:none}.text-entry.te-menu-open{visibility:hidden;pointer-events:none}
.te-tiny{display:block;padding:5px}.te-tiny .te-tabs,.te-tiny .te-text,.te-tiny .te-files,.te-tiny .te-footer{display:none}
.te-tiny .te-heading{height:30px;max-width:100%}.te-tiny .te-drag{display:none}.te-tiny .te-close{padding:0 4px}
@container(max-width:460px){.te-opacity-caption{display:none}.te-footer{gap:6px}}

.te-paste-method{flex:0 0 60px;min-width:0;border:1px solid #ffffff29;border-radius:7px;padding:0 3px;background:#163044;color:#c4eee4;font:12px system-ui,sans-serif}
@container(max-width:260px){
 .te-footer{gap:4px}.te-send{min-width:40px;padding-inline:4px}
 .te-paste-method{flex-basis:48px}.te-resize{flex-basis:24px;font-size:18px}
 .te-opacity output{display:none}
}

.te-tabs{display:flex;gap:6px;min-width:0}
.te-tabs button{flex:1;min-width:0;padding:0 6px;border:1px solid #86bfb54d;border-radius:7px;
 background:#102333;color:#b9d3dd;font:12px system-ui,sans-serif;white-space:nowrap}
.te-tabs button[aria-selected="true"]{border-color:#70dbc1;background:#1b4d43;color:#dbfff3}
.te-text{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;min-height:0;min-width:0}
.te-files{display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain}
.tf-hint,.tf-selection{margin:0;font-size:11px;line-height:1.35;color:#adcad3;overflow-wrap:anywhere}
.tf-actions{display:flex;flex-wrap:wrap;gap:6px}
.tf-actions button,.tf-picker,.tf-download{display:inline-flex;align-items:center;justify-content:center;
 min-height:30px;padding:4px 8px;border:1px solid #86bfb54d;border-radius:7px;background:#163044;
 color:#d6f6ef;font:12px system-ui,sans-serif;white-space:nowrap;text-decoration:none;cursor:pointer}
.tf-actions button:disabled,.tf-picker:has(input:disabled){opacity:.5;cursor:default}
.tf-picker{position:relative}.tf-picker:focus-within{outline:2px solid #70dbc1}
.tf-native-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tf-progress{width:100%;height:8px;flex:none;accent-color:#70dbc1}
.tf-list{min-height:40px;flex:1;overflow:auto;border:1px solid #82aeae44;border-radius:8px;background:#06111e}
.tf-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding:7px;border-bottom:1px solid #82aeae22}
.tf-row:last-child{border-bottom:0}.tf-name{font-size:12px;color:#e2f5f0;overflow-wrap:anywhere}
.tf-size{display:block;font-size:10px;color:#adcad3}.tf-empty{padding:8px;margin:0;font-size:12px;color:#adcad3}
/* Common chrome for keyboard, wheel and text. Keyboard retains scaled chrome
   at tiny sizes so its actual keys do not give way to oversized controls. */
.virtual-keyboard,.text-entry,.remote-wheel{--panel-ui:1;border:1px solid #88dfd077;border-radius:16px;
 background:#091523;box-shadow:0 10px 32px #0006;isolation:isolate;box-sizing:border-box}
.virtual-keyboard{--panel-ui:var(--vk-ui,1);border-radius:calc(16px * var(--panel-ui))}
.vk-drag-handle,.te-drag,.wheel-drag{display:flex;align-items:center;justify-content:flex-start;gap:calc(7px * var(--panel-ui));
 min-width:0;min-height:0;padding:0 calc(5px * var(--panel-ui));border:0;border-radius:calc(7px * var(--panel-ui));
 background:#ffffff08;color:#eaf3fb;cursor:grab;touch-action:none;user-select:none;text-align:left}
.vk-drag-handle>span,.te-drag>.panel-grip,.wheel-drag>.panel-grip{display:inline-block;flex:none;
 font-size:calc(21px * var(--panel-ui));line-height:1;color:#9cdacf}
.vk-drag-handle strong,.te-drag strong{font-size:calc(14px * var(--panel-ui));font-weight:650;white-space:nowrap}
.vk-drag-handle:active,.te-drag:active,.wheel-drag:active{cursor:grabbing;background:#7aded51a}
#virtual-keyboard-close,.te-close,.wheel-close{height:auto;min-height:0;display:grid;place-items:center;
 padding:0 calc(8px * var(--panel-ui));border:1px solid #ffffff29;border-radius:calc(7px * var(--panel-ui));
 background:#163044;color:#c4eee4;font-size:calc(12px * var(--panel-ui));line-height:1}
.vk-resize-handle,.te-resize{border:1px solid #9ae7d94d;border-radius:calc(7px * var(--panel-ui));
 background:#173931;color:#bdffe7;font-size:calc(21px * var(--panel-ui));cursor:nwse-resize;touch-action:none;padding:0}
.vk-opacity input,.te-opacity input,.wheel-opacity input{accent-color:#70dbc1}
.vk-footer,.te-footer,.wheel-footer{align-items:stretch;gap:calc(6px * var(--panel-ui))}
.te-footer .te-send{margin-left:auto}
.remote-wheel{display:grid;grid-template-rows:32px minmax(44px,1fr) 24px;justify-items:center;align-items:stretch;
 gap:6px;padding:10px;overflow:hidden;container-type:inline-size;max-height:none;opacity:.85}
.wheel-heading{height:32px;position:relative;z-index:2;width:calc(var(--wheel-visible-width,100%) - 22px);
 transform:translate(var(--wheel-dock-x,0px),var(--wheel-dock-y,0px));align-items:stretch;gap:4px;justify-self:start}
.wheel-docked .wheel-heading{background:#102638;border-radius:7px}
.wheel-drag{justify-content:flex-start;flex:1;min-height:0}
.wheel-close{width:24px;flex:0 0 24px;font-size:18px;padding:0}
.wheel-slider{width:clamp(44px,64%,88px);height:auto;min-height:0;align-self:stretch;flex:none;border-radius:26px}
.wheel-thumb{width:min(38px,85%)}
.wheel-footer{display:flex;min-width:0;width:100%;height:24px}
.wheel-opacity{display:flex;align-items:center;width:100%;min-width:0}
.wheel-opacity input{width:100%;min-width:24px;margin:0}
.wheel-opacity output{display:none}
.remote-wheel.wheel-tiny{display:block;padding:5px}
.wheel-tiny .wheel-slider,.wheel-tiny .wheel-footer,.wheel-tiny .wheel-drag{display:none}
.wheel-tiny .wheel-heading{height:30px;width:100%;transform:none;justify-content:center}
@container(max-width:260px){.te-footer{gap:4px}}
/* One responsive connection summary; detailed diagnostics are optional. */
.connection-state{position:relative;display:block!important;min-width:0;max-width:100%;margin:0;white-space:normal}
.connection-state summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;cursor:pointer;
 padding:5px 8px;border:1px solid #ffffff16;border-radius:9px;font-size:12px;color:#bfd4e3;list-style:none}
.connection-state summary::-webkit-details-marker{display:none}
.connection-state summary::after{content:'⌄';color:#94afa9}
.connection-state summary small{font-size:10px;color:#8ba8b7;overflow-wrap:anywhere}
.connection-state [data-phase="connected"]{color:#92e6cc}
.connection-state [data-phase="error"],.connection-state [data-phase="offline"]{color:#ffb7a9}
.connection-detail{position:absolute;top:calc(100% + 6px);left:0;z-index:20;
 width:min(440px,calc(100vw - 28px));max-height:50dvh;overflow:auto;padding:12px;
 border:1px solid #88dfd077;border-radius:12px;background:#091523;box-shadow:0 10px 32px #0008}
.connection-detail p{margin:0;color:#c2d6df;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.connection-detail p+p{margin-top:6px;color:#94adb9}
.connection-progress{position:absolute;z-index:3;top:24px;left:50%;transform:translateX(-50%);
 width:min(470px,calc(100% - 32px));display:grid;gap:9px;padding:15px;border:1px solid #88dfd044;
 border-radius:13px;background:#0a1727f5;box-shadow:0 10px 30px #0005;overflow-wrap:anywhere}
.connection-progress strong{font-size:14px;color:#def3ee}.connection-progress p{margin:0;font-size:12px;line-height:1.6;color:#a6c4ce}
.connection-progress button{justify-self:start;min-height:34px;padding:4px 12px;font-size:12px;border-radius:8px;background:#1c463e;color:#d9fff0}
@media(max-width:600px){.connection-state{flex:1}.connection-detail{position:fixed;top:var(--topbar-height,80px);left:12px}}

.connection-progress ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.connection-progress li{padding:4px 7px;border:1px solid #ffffff20;border-radius:6px;font-size:11px;color:#8ba8b7}
.connection-progress [data-state="done"]{color:#92e6cc;border-color:#92e6cc55}
.connection-progress [data-state="current"]{color:#eef6ff;border-color:#7bb2ee88;background:#214263}