:root{font-family:Inter,Pretendard,"Noto Sans KR","Segoe UI",sans-serif;color:#20242a;background:#f4f6f8;color-scheme:light;--orange:#ed6b1a;--ink:#17202b;--line:#dfe4ea}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{overflow-x:hidden;background:#f4f6f8}button,input,select{font:inherit}.hidden{display:none!important}.brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#fb7b28,#e95010);color:#fff;font-weight:900;box-shadow:0 8px 20px #ed6b1a35}
.login-page{min-height:100dvh;display:grid;place-items:center;background:#fff}.login-shell{width:min(1120px,100%);min-height:100dvh;display:grid;grid-template-columns:1.1fr .95fr}.brand-panel{position:relative;display:flex;flex-direction:column;justify-content:center;padding:52px;background:#faf7f4;overflow:hidden}.brand-panel:after{content:"";position:absolute;left:-20%;right:10%;bottom:-18%;height:38%;border:3px solid #ed6b1a22;border-radius:50%}.brand-panel>.brand-icon{position:absolute;top:34px;left:40px}.brand-panel h1{margin:0;color:#30221b;font-size:clamp(52px,6vw,76px);line-height:.9;letter-spacing:-.06em}.brand-panel p{margin:14px 0;color:#9a6c4e;font-size:13px;font-weight:800;letter-spacing:.15em}.login-panel{display:flex;align-items:center;padding:clamp(32px,6vw,78px)}.login-form{width:100%;display:grid;gap:26px}.login-form label:not(.remember){display:grid;gap:8px}.login-form label>span{font-size:12px;font-weight:800;letter-spacing:.14em;color:#667085}.login-form input:not([type=checkbox]){height:54px;border:0;border-bottom:1px solid #d4d7dc;border-radius:0;outline:none;font-size:19px;background:transparent}.login-form input:focus{border-color:var(--orange)}.remember{display:flex;align-items:center;gap:8px;font-size:13px}.remember input{accent-color:var(--orange)}.login-form button{justify-self:end;width:150px;height:50px;border:0;background:var(--orange);color:#fff;font-weight:800;cursor:pointer}
.dashboard{min-height:100dvh;padding-right:34px;background:#20252b}.appbar{position:sticky;top:0;z-index:20;height:68px;display:flex;align-items:center;gap:16px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line)}.appbrand{display:flex;align-items:center;gap:9px}.appbrand small{padding-left:2px;color:#8993a0}.manager-rail-toggle{display:none}.manager-picker{display:flex;align-items:center;gap:10px;margin-left:auto}.manager-picker span{font-size:10px;font-weight:900;letter-spacing:.14em;color:#8490a0}.manager-picker select{min-width:170px;height:38px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 10px}.app-actions{display:flex;align-items:center;gap:8px}.connection-status{font-size:12px;color:#677383}.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer}.mobile-logout{display:none}.grid-summary{height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 7px;border-radius:7px;color:#cbd3dc;background:#30363d}.grid-summary>div:first-child{display:flex;gap:5px;align-items:baseline}.grid-summary strong{color:#fff}.grid-summary span{font-size:12px}.grid-density{display:flex;gap:3px}.grid-density button{width:28px;height:26px;border:0;border-radius:3px;background:#414951;color:#cbd3dc}.grid-density button.active{background:var(--orange);color:#fff}.thumbnail-grid{--grid-cols:4;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:3px;padding:3px;background:#5b6168;align-content:start}.thumbnail-tile{position:relative;aspect-ratio:16/10;overflow:hidden;border:0;background:#07090c;color:#fff;padding:0;cursor:pointer;content-visibility:auto;contain-intrinsic-size:320px 200px}.thumbnail-tile canvas{width:100%;height:100%;display:block;object-fit:contain}.thumbnail-tile:hover:after,.thumbnail-tile:focus-visible:after{content:"";position:absolute;inset:0;border:3px solid var(--orange);pointer-events:none}.tile-label{position:absolute;z-index:3;left:8px;top:7px;display:flex;gap:6px;align-items:center;padding:3px 6px;border-radius:3px;background:#050608aa;font-size:12px;font-weight:800}.tile-label i{width:6px;height:6px;border-radius:50%;background:#4bd17d}.thumbnail-tile.is-offline .tile-label i{background:#7c8795}.tile-state{position:absolute;inset:0;display:grid;place-items:center;color:#5e6670;font-weight:900;letter-spacing:.1em}.tile-state small{display:block;margin-top:7px;text-align:center;font-weight:500;letter-spacing:0;font-size:11px}.utility-rail{position:fixed;z-index:30;right:0;top:0;bottom:0;width:34px;display:flex;align-items:center;flex-direction:column;background:#fff;border-left:1px solid var(--line)}.utility-rail button{width:34px;height:42px;border:0;background:#fff;color:var(--orange);cursor:pointer}.utility-rail button:last-child{margin-top:auto}.utility-rail span{margin:auto 0;writing-mode:vertical-rl;font-size:8px;letter-spacing:.3em;color:#e5b799}
.viewer{position:fixed;z-index:100;inset:0;display:grid;grid-template-rows:52px 1fr;background:#020305;color:#fff;padding-top:env(safe-area-inset-top)}.viewerbar{display:flex;align-items:center;gap:12px;padding:0 12px;background:#11161dcc;border-bottom:1px solid #27303b}.viewerbar>div{display:grid;gap:2px}.viewerbar strong{font-size:14px}.viewerbar span{font-size:10px;color:#8896a8}.viewer-exit{width:34px;height:34px;border:1px solid #39424e;border-radius:50%;background:#171d25;color:#fff;font-size:24px}.control-badge{margin-left:auto!important;padding:5px 9px;border-radius:20px;background:#253143;color:#a9b6c8!important}.control-badge.is-control{background:#163c2d;color:#6ee7a5!important}.stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;background:#000;touch-action:none}.stage canvas{display:block;max-width:100%;max-height:100%;object-fit:contain}.stage:not(.is-full) canvas{width:100%;height:100%}.stage.is-full{display:block;overflow:auto}.stage.is-full canvas{max-width:none;max-height:none}.empty{position:absolute;display:grid;justify-items:center;gap:8px;color:#707987;font-size:12px}.empty b{letter-spacing:.14em}.empty small{color:#454d58}.spinner{width:24px;height:24px;border:2px solid #333;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.remote-cursor{position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #0008;pointer-events:none;transform:translate(-50%,-50%)}.tap-dot{position:absolute;width:28px;height:28px;border:2px solid #ff7a26;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:tap .35s ease-out forwards}@keyframes tap{to{opacity:0;scale:1.8}}.keyboard-sink{position:fixed;left:-1000px;width:1px;height:1px}
.floating-menu{position:absolute;z-index:120;left:12px;top:42%;display:flex;align-items:center}.menu-launcher{position:relative;z-index:2;width:48px;height:48px;padding:0;border:0;border-radius:13px;background:transparent;color:#fff;box-shadow:0 8px 26px #0008;touch-action:none;overflow:hidden}.menu-launcher img{display:block;width:100%;height:100%;object-fit:cover}.menu-items{position:absolute;left:54px;display:flex;gap:5px;padding:6px;border-radius:10px;background:#111923e8;opacity:0;pointer-events:none;transform:translateX(-10px);transition:.16s}.floating-menu.open .menu-items{opacity:1;pointer-events:auto;transform:none}.menu-items button{min-width:52px;height:38px;border:0;border-radius:6px;background:#27313e;color:#fff;font-size:11px}.menu-items button:hover{background:#39485a}
.focus-status-panel{position:absolute;z-index:150;top:64px;right:14px;width:min(360px,calc(100% - 28px));overflow:hidden;border:1px solid #536173;border-radius:10px;background:#10161ee8;color:#e9f0f7;box-shadow:0 14px 44px #000a;backdrop-filter:blur(10px);font:12px/1.4 Consolas,"SFMono-Regular",monospace}.focus-status-panel header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #34404e;background:#18212c}.focus-status-panel header>div{display:flex;align-items:baseline;gap:9px}.focus-status-panel header strong{font-size:12px;letter-spacing:.08em;color:#fff}.focus-status-panel header span{font-size:10px;color:#8c9bad}.focus-status-panel header button{width:25px;height:25px;border:0;border-radius:5px;background:#2a3542;color:#fff;font-size:18px;line-height:1;cursor:pointer}.focus-status-panel dl{display:grid;grid-template-columns:minmax(108px,.8fr) minmax(0,1.2fr);gap:0;margin:0;padding:7px 0}.focus-status-panel dt,.focus-status-panel dd{margin:0;padding:4px 12px}.focus-status-panel dt{color:#8998aa}.focus-status-panel dd{overflow:hidden;color:#e9f0f7;text-align:right;text-overflow:ellipsis;white-space:nowrap}.focus-status-panel dd.is-good{color:#68e69d}.focus-status-panel dd.is-warn{color:#ffbd67}
.settings-scrim{position:fixed;z-index:190;inset:0;background:#0005}.settings-panel{position:fixed;z-index:200;top:0;right:0;width:min(680px,100%);height:100dvh;display:grid;grid-template-rows:64px 50px 1fr 64px;background:#fff;box-shadow:-20px 0 60px #0002;transform:translateX(105%);transition:.2s}.settings-panel.open{transform:none}.settings-panel header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line)}.settings-panel h2{font-size:19px}.settings-panel header button{border:0;background:none;font-size:30px}.settings-panel nav{display:flex;gap:22px;padding:0 20px;border-bottom:1px solid var(--line)}.settings-panel nav button{border:0;border-bottom:2px solid transparent;background:none;font-weight:700;color:#697586}.settings-panel nav button.active{border-color:var(--orange);color:var(--orange)}.settings-body{overflow:auto;padding:14px 20px}.settings-body section{display:flex;flex-wrap:wrap;gap:12px 28px}.settings-body h3{flex-basis:100%;margin:16px 0 0;font-size:14px}.settings-body label{display:flex;align-items:center;gap:7px;font-size:13px}.settings-body input{accent-color:var(--orange)}.settings-body input[type=range]{width:min(360px,80%)}.settings-body select{height:40px;border:1px solid var(--line);padding:0 10px}.settings-panel footer{display:flex;justify-content:flex-end;gap:8px;padding:10px 20px;border-top:1px solid var(--line)}.settings-panel footer button{width:82px;border:1px solid var(--line);background:#fff}.settings-panel footer button:last-child{border-color:var(--orange);background:var(--orange);color:#fff}.error{position:fixed;z-index:300;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border-radius:8px;background:#b42318;color:#fff;font-size:13px;box-shadow:0 8px 30px #0004}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.brand-panel{min-height:34dvh;justify-content:flex-end;padding:34px}.brand-panel>.brand-icon{top:22px;left:24px}.brand-panel h1{font-size:48px}.login-panel{align-items:flex-start;padding:34px}.dashboard{padding-right:0}.appbar{height:46px;gap:7px;padding:0 7px}.appbar .brand-icon{width:28px;height:28px;border-radius:8px;font-size:13px}.appbrand{gap:6px}.appbrand strong{font-size:14px}.appbrand small,.manager-picker span,.connection-status{display:none}.manager-picker{min-width:0;margin-left:auto}.manager-picker select{min-width:100px;max-width:38vw;height:32px;padding:0 7px;font-size:12px}.app-actions{gap:4px}.icon-button{width:32px;height:32px;border-radius:6px;padding:0;font-size:16px}.mobile-logout{display:block}.grid-summary{height:26px;padding:0 7px}.grid-summary strong{font-size:13px}.grid-summary span{font-size:10px}.grid-density{display:none}.thumbnail-grid{gap:1px;padding:1px}.tile-label{left:4px;top:3px;gap:4px;padding:2px 4px;font-size:10px}.tile-label i{width:5px;height:5px}.tile-state{font-size:12px}.tile-state small{margin-top:3px;font-size:9px}.utility-rail{display:none}.viewerbar{height:48px}.floating-menu{left:8px}.menu-items{left:52px;display:grid;grid-template-columns:repeat(3,56px)}}
@media(max-width:430px){.brand-panel{min-height:31dvh}.brand-panel h1{font-size:40px}.login-panel{padding:26px}.login-form{gap:20px}.appbrand strong{font-size:13px}.manager-picker select{width:108px;max-width:32vw}.app-actions .icon-button:first-of-type{display:none}.thumbnail-tile{aspect-ratio:16/9}.menu-items{max-width:190px;flex-wrap:wrap}}

/* Focus input feedback: RemoteT-compatible 3 px click point + expanding ripple. */
.remote-cursor{z-index:7}
.tap-dot{z-index:8;width:3px;height:3px;border:0;border-radius:50%;background:#f00;box-shadow:0 0 2px #fff;animation:none}
.click-ripple{position:absolute;z-index:7;width:3px;height:3px;border:2px solid rgba(35,130,255,.9);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:click-ripple 1.5s ease-out forwards}
@keyframes click-ripple{0%{width:3px;height:3px;opacity:.95}100%{width:108px;height:108px;opacity:0}}

/* Brand-guide aligned login: keep credentials and submit action in one viewport. */
.login-page{
  --brand-ink:#24232e;
  --brand-coral:#f24b43;
  --brand-violet:#a178df;
  min-height:100dvh;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(135deg,#f5f1fa 0%,#fff7f5 52%,#f6f7fb 100%);
}
.login-shell{
  width:min(1040px,100%);
  min-height:0;
  height:min(650px,calc(100dvh - 32px));
  overflow:hidden;
  grid-template-columns:minmax(300px,.92fr) minmax(390px,1.08fr);
  border:1px solid #ffffffcc;
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 80px #3529481a;
}
.brand-panel{
  min-height:0;
  padding:clamp(32px,4.5vw,58px);
  justify-content:flex-start;
  background:linear-gradient(155deg,#f7f3fb 0%,#fff8f5 100%);
  isolation:isolate;
}
.brand-panel:before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-72px;
  top:-86px;
  border-radius:50%;
  background:#a178df22;
}
.brand-panel:after{
  left:-26%;
  right:-18%;
  bottom:-23%;
  height:46%;
  border:2px solid #f24b4326;
}
.brand-copy{position:relative;z-index:2;max-width:420px}
.brand-lockup{display:block;width:min(100%,320px);height:auto}
.brand-eyebrow{margin:22px 0 0;color:#8a6aa5;font-size:11px;font-weight:900;letter-spacing:.2em}
.brand-panel h1{margin:20px 0 0;color:var(--brand-ink);font-size:clamp(32px,4vw,50px);line-height:1.12;letter-spacing:-.055em}
.brand-description{max-width:330px;margin:16px 0 0;color:#686474;font-size:14px;line-height:1.65}
.brand-character{position:absolute;z-index:1;right:28px;bottom:16px;width:clamp(104px,13vw,148px);height:auto;filter:drop-shadow(0 18px 24px #39265526);transform-origin:50% 100%;transition:opacity .2s ease,transform .24s ease}
.brand-character.is-changing{opacity:0;transform:translateY(8px) rotate(-2deg) scale(.96)}
.brand-scene{position:absolute;z-index:3;left:clamp(32px,4vw,58px);bottom:38px;display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #ffffffcc;border-radius:999px;background:#ffffffb8;color:#6d6275;box-shadow:0 8px 22px #4a35531a;backdrop-filter:blur(8px);font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.brand-scene i{width:7px;height:7px;border-radius:50%;background:var(--brand-coral);box-shadow:0 0 0 4px #f24b4316}
.login-panel{align-items:center;padding:clamp(34px,5vw,70px);background:#fff}
.login-form{max-width:420px;margin:auto;gap:18px}
.login-heading{margin-bottom:5px}
.login-heading>span{color:var(--brand-violet);font-size:10px;font-weight:900;letter-spacing:.2em}
.login-heading h2{margin:8px 0 0;color:var(--brand-ink);font-size:clamp(25px,3vw,34px);line-height:1.2;letter-spacing:-.04em}
.login-heading p{margin:8px 0 0;color:#777382;font-size:13px;line-height:1.5}
.manager-required-notice{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid #e7def2;border-radius:12px;background:#faf7fd;color:#555161}
.manager-required-icon{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#a178df;color:#fff;font-size:13px;font-weight:900}
.manager-required-notice strong{display:block;color:#393442;font-size:12px;line-height:1.45}
.manager-required-notice p{margin:3px 0 0;color:#777080;font-size:11px;line-height:1.45}
.login-form .login-field{display:grid;gap:7px}
.login-form .login-field>span{color:#555161;font-size:12px;font-weight:800;letter-spacing:0}
.login-form .login-field input{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid #ddd9e4;
  border-radius:12px;
  background:#fbfafc;
  color:var(--brand-ink);
  font-size:16px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.login-form .login-field input::placeholder{color:#aaa5b1}
.login-form .login-field input:focus{border-color:var(--brand-violet);background:#fff;box-shadow:0 0 0 4px #a178df1a}
.login-actions{display:flex;align-items:center;justify-content:space-between;min-height:24px}
.login-form .remember{gap:8px;color:#676271;font-size:13px}
.login-form .remember>span{color:inherit;font-size:13px;font-weight:600;letter-spacing:0}
.login-form .remember input{width:17px;height:17px;accent-color:var(--brand-coral)}
.secure-access{display:flex;align-items:center;gap:6px;color:#8a8591;font-size:11px}
.secure-access:before{content:"";width:7px;height:7px;border-radius:50%;background:#41b87a;box-shadow:0 0 0 3px #41b87a18}
.login-form .login-submit{
  width:100%;
  height:54px;
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:12px;
  background:linear-gradient(105deg,var(--brand-coral),#ff6956);
  color:#fff;
  box-shadow:0 12px 26px #f24b4330;
  font-size:15px;
  font-weight:900;
}
.login-submit b{font-size:20px;font-weight:500;transition:transform .16s}
.login-submit:hover b{transform:translateX(4px)}
.login-submit:focus-visible{outline:3px solid #a178df66;outline-offset:3px}
.manager-offline-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid #f2cdbf;background:#fff4ef;color:#693b2b}
.manager-offline-notice>div{display:flex;align-items:baseline;gap:10px;min-width:0}
.manager-offline-notice strong{font-size:13px;white-space:nowrap}
.manager-offline-notice span{font-size:12px;color:#8a5c4b}
.manager-offline-notice button{flex:0 0 auto;height:32px;padding:0 13px;border:1px solid #ed6b1a;border-radius:7px;background:#fff;color:#d75b11;font-size:12px;font-weight:800;cursor:pointer}

@media(max-width:800px){
  .login-page{padding:12px}
  .login-shell{height:calc(100dvh - 24px);grid-template-columns:1fr;grid-template-rows:minmax(150px,29%) 1fr;border-radius:22px}
  .brand-panel{min-height:0;padding:24px 28px;justify-content:center}
  .brand-lockup{width:min(68%,270px)}
  .brand-eyebrow{margin-top:12px}
  .brand-panel h1{display:none}
  .brand-description{max-width:62%;margin-top:8px;font-size:12px;line-height:1.45}
  .brand-character{right:28px;bottom:10px;width:84px}
  .brand-scene{left:28px;bottom:18px;padding:5px 8px;font-size:8px}
  .login-panel{min-height:0;align-items:center;padding:24px 30px}
  .login-form{gap:14px}
  .login-heading h2{font-size:26px}
  .login-heading p{margin-top:5px}
  .login-form .login-field input{height:48px}
  .login-form .login-submit{height:50px}
}

@media(max-width:800px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
  .login-page{padding:8px}
  .login-shell{height:calc(100dvh - 16px);grid-template-columns:minmax(250px,.78fr) minmax(390px,1.22fr);grid-template-rows:1fr;border-radius:18px}
  .brand-panel{padding:24px}
  .brand-lockup{width:min(100%,250px)}
  .brand-eyebrow{margin-top:12px;font-size:9px}
  .brand-description{max-width:80%;font-size:11px}
  .brand-character{right:18px;bottom:12px;width:90px;opacity:.95}
  .brand-scene{left:24px;bottom:22px}
  .login-panel{padding:18px clamp(28px,5vw,54px)}
  .login-form{max-width:460px;grid-template-columns:1fr 1fr;gap:10px 12px}
  .login-heading{grid-column:1/-1;margin-bottom:0}
  .manager-required-notice{grid-column:1/-1;padding:8px 11px}
  .manager-required-notice>div{display:flex;align-items:baseline;gap:8px}
  .manager-required-notice p{margin:0}
  .login-heading>span,.login-heading p{display:none}
  .login-heading h2{margin:0;font-size:22px}
  .login-form .login-field input{height:44px;font-size:14px}
  .login-actions{grid-column:1/-1}
  .login-form .login-submit{grid-column:1/-1;height:44px}
}

@media(max-width:430px){
  .login-shell{grid-template-rows:150px 1fr}
  .brand-panel{padding:20px 22px}
  .brand-lockup{width:min(72%,230px)}
  .brand-eyebrow{font-size:9px}
  .brand-description{display:none}
  .brand-character{right:20px;bottom:8px;width:82px}
  .brand-scene{left:20px;bottom:14px}
  .login-panel{padding:20px 22px}
  .login-form{gap:12px}
  .login-heading h2{font-size:23px}
  .login-heading p{font-size:12px}
  .login-form .login-field input{height:46px}
  .login-form .login-submit{height:48px}
  .manager-offline-notice{align-items:flex-start;padding:10px 12px}
  .manager-offline-notice>div{display:grid;gap:3px}
  .manager-offline-notice strong{white-space:normal}
}

@media(max-height:640px) and (orientation:portrait){
  .login-shell{grid-template-rows:116px 1fr}
  .brand-panel{padding:16px 22px}
  .brand-lockup{width:min(68%,220px)}
  .brand-eyebrow,.brand-description{display:none}
  .brand-character{bottom:5px;width:65px}
  .brand-scene{display:none}
  .login-panel{padding:16px 22px}
  .login-form{gap:9px}
  .login-heading p{display:none}
  .manager-required-notice{padding:7px 10px}
  .manager-required-notice p{display:none}
  .login-form .login-field input{height:43px}
  .login-form .login-submit{height:44px}
}

@media(prefers-reduced-motion:reduce){.brand-character{transition:none}}

/* Mobile monitoring: dedicate the full vertical span to thumbnails and move chrome to the right rail. */
@media(max-width:800px){
  .dashboard{padding-right:44px}
  .appbar{position:fixed;z-index:40;inset:0 0 0 auto;width:44px;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 4px;border:0;border-left:1px solid var(--line);background:#fff}
  .appbrand{margin:0}.appbrand strong,.appbrand small{display:none}.appbar .brand-icon{width:34px;height:34px;border-radius:8px;font-size:13px}
  .manager-rail-toggle{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:#586575;font-size:12px;font-weight:900;cursor:pointer}
  .manager-rail-toggle[aria-expanded="true"]{border-color:var(--orange);color:var(--orange);background:#fff7f2}
  .manager-picker{position:fixed;z-index:45;right:48px;top:44px;width:min(280px,calc(100vw - 60px));display:none;margin:0;padding:7px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 10px 30px #0003}
  .manager-picker.open{display:flex}.manager-picker span{display:none}.manager-picker select{width:100%;min-width:0;max-width:none;height:36px;font-size:12px}
  .grid-summary{width:34px;height:auto;min-height:38px;display:grid;place-items:center;padding:4px 1px;border-radius:6px;gap:0}
  .grid-summary>div:first-child{display:grid;justify-items:center;gap:0;line-height:1}.grid-summary strong{font-size:12px}.grid-summary span{max-width:30px;font-size:7px;line-height:1.1;text-align:center}.grid-density{display:none}
  .app-actions{display:contents}.connection-status{display:none}.icon-button{flex:0 0 auto;width:34px;height:34px;padding:0;font-size:16px}.mobile-logout{display:block;margin-top:auto}
  .thumbnail-grid{gap:1px;padding:1px}.utility-rail{display:none}
}

/* Compact mobile controls: full-screen viewer and a touch-safe radial action menu. */
.brand-icon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media(max-width:800px){
  .appbar .brand-icon{width:34px;height:34px;padding:2px;border-radius:6px;background:transparent;box-shadow:none}
  .appbar .brand-icon img{width:30px;height:30px;border-radius:6px}
}

.viewer{grid-template-rows:1fr;padding-top:0}
.viewerbar{display:none}
.stage{grid-row:1;inset:0}

.floating-menu{left:max(7px,env(safe-area-inset-left));width:44px;height:44px;display:block}
.menu-launcher{width:44px;height:44px;border-radius:12px;box-shadow:0 8px 24px #000b;transition:transform .18s ease,box-shadow .18s ease}
.floating-menu.open .menu-launcher{transform:scale(.92);box-shadow:0 0 0 3px #ff645055,0 8px 24px #000b}
.menu-items{left:22px;top:22px;width:0;height:0;display:block;max-width:none;padding:0;border:0;border-radius:0;background:transparent;opacity:1;transform:none;transition:none;overflow:visible}
.menu-items button{--fan-x:0px;--fan-y:0px;position:absolute;left:0;top:0;width:54px;min-width:54px;height:34px;padding:0 7px;border:1px solid #526174;border-radius:17px;background:#17202beF;color:#fff;box-shadow:0 5px 16px #000a;font-size:10px;font-weight:800;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-50%) translate(0,0) scale(.55);transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .14s ease;touch-action:manipulation}
.menu-items button:nth-child(1){--fan-x:32px;--fan-y:-116px}
.menu-items button:nth-child(2){--fan-x:68px;--fan-y:-96px}
.menu-items button:nth-child(3){--fan-x:96px;--fan-y:-64px}
.menu-items button:nth-child(4){--fan-x:112px;--fan-y:-22px}
.menu-items button:nth-child(5){--fan-x:112px;--fan-y:22px}
.menu-items button:nth-child(6){--fan-x:96px;--fan-y:64px}
.menu-items button:nth-child(7){--fan-x:68px;--fan-y:96px}
.menu-items button:nth-child(8){--fan-x:32px;--fan-y:116px}
.floating-menu.open .menu-items button{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translate(var(--fan-x),var(--fan-y)) scale(1)}
.floating-menu.open .menu-items button:nth-child(1){transition-delay:0ms}
.floating-menu.open .menu-items button:nth-child(2){transition-delay:18ms}
.floating-menu.open .menu-items button:nth-child(3){transition-delay:36ms}
.floating-menu.open .menu-items button:nth-child(4){transition-delay:54ms}
.floating-menu.open .menu-items button:nth-child(5){transition-delay:72ms}
.floating-menu.open .menu-items button:nth-child(6){transition-delay:90ms}
.floating-menu.open .menu-items button:nth-child(7){transition-delay:108ms}
.floating-menu.open .menu-items button:nth-child(8){transition-delay:126ms}
.menu-items button:active{background:#ff554c;border-color:#ff8a7f;transform:translate(-50%,-50%) translate(var(--fan-x),var(--fan-y)) scale(.94)}

/* Two-finger focus zoom is applied by RemoteInputController. */
.stage canvas{transform-origin:0 0;will-change:transform}

.keyboard-dismiss{display:none;position:fixed;z-index:190;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));height:38px;padding:0 14px;border:1px solid #647386;border-radius:19px;background:#17202bea;color:#fff;box-shadow:0 6px 20px #0009;font-size:12px;font-weight:800;touch-action:manipulation}
.viewer.keyboard-active .keyboard-dismiss{display:block}

.special-key-bar{display:none;position:fixed;z-index:185;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(142px,calc(env(safe-area-inset-right) + 142px));height:38px;align-items:center;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x}.special-key-bar::-webkit-scrollbar{display:none}.viewer.keyboard-active .special-key-bar{display:flex}.special-key-bar button{flex:0 0 auto;height:34px;min-width:38px;padding:0 9px;border:1px solid #526174;border-radius:8px;background:#17202bea;color:#fff;box-shadow:0 4px 14px #0008;font-size:11px;font-weight:800;touch-action:manipulation}.special-key-bar button.active{border-color:#ff8a7f;background:#d9473e;color:#fff}

.virtual-keyboard{display:none;position:fixed;z-index:180;left:0;right:0;bottom:0;max-height:min(48dvh,360px);flex-direction:column;padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:1px solid #526174;background:#111923f5;box-shadow:0 -10px 30px #000b;backdrop-filter:blur(12px);touch-action:none}.viewer.remote-keyboard-active .virtual-keyboard{display:flex}.virtual-keyboard header{display:flex;align-items:center;gap:6px;min-height:32px;padding:0 2px 5px}.virtual-keyboard header strong{margin-right:auto;color:#9eacbd;font:10px/1 Consolas,monospace;letter-spacing:.12em}.virtual-keyboard header button{height:28px;padding:0 10px;border:1px solid #526174;border-radius:6px;background:#26313e;color:#fff;font-size:11px;font-weight:800}.vk-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:none}.vk-scroll::-webkit-scrollbar{display:none}.vk-row{display:flex;width:max-content;min-width:100%;justify-content:center;gap:3px;margin-top:3px}.vk-row button{flex:0 0 34px;height:34px;padding:0;border:1px solid #465363;border-radius:5px;background:#25303d;color:#f5f7fa;box-shadow:0 2px 5px #0008;font-size:11px;font-weight:700;touch-action:none;user-select:none}.vk-row button.vk-wide{flex-basis:52px}.vk-row button.vk-enter{flex-basis:58px}.vk-row button.vk-mod{flex-basis:55px}.vk-row button.vk-space{flex-basis:180px}.vk-row button.pressed{background:#ff6559;border-color:#ff9a91;transform:translateY(1px)}.vk-row button.active{background:#d9473e;border-color:#ff9a91;color:#fff}.vk-function button{height:27px;color:#cbd5e1;background:#1d2631}

/* RemoteT WebRemote3 keyboard layout and pointer interaction model. */
.remote-keyboard-panel{--rk-side-gap:clamp(8px,1.4vw,18px);--rk-panel-pad-x:clamp(8px,1.1vw,12px);--rk-panel-pad-top:clamp(6px,.9vw,10px);--rk-panel-pad-bottom:clamp(8px,1vw,12px);--rk-gap:clamp(3px,.55vw,6px);--rk-key-height:clamp(28px,3.8vw,36px);--rk-key-radius:clamp(8px,.9vw,10px);--rk-font-size:clamp(10px,1.2vw,12px);position:fixed;z-index:9200;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);display:none;width:min(920px,calc(100vw - (var(--rk-side-gap) * 2)));max-width:calc(100vw - (var(--rk-side-gap) * 2));padding:var(--rk-panel-pad-top) var(--rk-panel-pad-x) var(--rk-panel-pad-bottom);border:1px solid #ffffff1f;border-radius:18px;background:#0a0a0a52;box-shadow:0 16px 36px #0000002e;transform:translateX(-50%);backdrop-filter:blur(10px);touch-action:none}.remote-keyboard-panel.is-open{display:block}.remote-keyboard-layout{display:flex;flex-direction:column;gap:var(--rk-gap)}.remote-keyboard-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:var(--rk-gap)}.remote-keyboard-key{appearance:none;display:flex;align-items:center;justify-content:center;min-height:var(--rk-key-height);padding:0 clamp(3px,.45vw,5px);border:1px solid #ffffff1f;border-radius:var(--rk-key-radius);background:#1c1c1cbd;color:#fff;font-size:var(--rk-font-size);font-weight:600;line-height:1;user-select:none;-webkit-user-select:none;touch-action:none;transition:background-color .12s,border-color .12s,transform .12s}.remote-keyboard-keycap{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:2px}.remote-keyboard-keycap-main{font-size:1em;font-weight:700;line-height:1}.remote-keyboard-keycap-sub{font-size:.68em;font-weight:500;line-height:1;opacity:.82}.remote-keyboard-key.key-wide{grid-column:span 2}.remote-keyboard-key.key-space{grid-column:span 3}.remote-keyboard-key.key-close{font-size:clamp(12px,1.5vw,14px);background:#2c2c2cd1}.remote-keyboard-key.key-spacer{visibility:hidden;pointer-events:none;border-color:transparent;background:transparent;box-shadow:none}.remote-keyboard-key.key-active,.remote-keyboard-key:active{border-color:#dd6a1ff0;background:#dd6a1feb;transform:translateY(-1px)}.remote-keyboard-key.key-sticky-on{border-color:#dd6a1ff0;background:#dd6a1feb;box-shadow:0 10px 22px #8541133d}
@media (orientation:portrait){.remote-keyboard-panel{--rk-side-gap:clamp(6px,1.2vw,12px);--rk-panel-pad-x:clamp(6px,1vw,10px);--rk-panel-pad-top:clamp(5px,.9vw,8px);--rk-panel-pad-bottom:clamp(6px,1vw,10px);--rk-gap:clamp(3px,.55vw,5px);--rk-key-height:clamp(27px,7.2vw,34px);--rk-font-size:clamp(10px,2.7vw,11px);border-radius:14px}}
@media (max-width:900px) and (orientation:landscape){.remote-keyboard-panel{--rk-side-gap:clamp(6px,1vw,12px);--rk-key-height:clamp(26px,4.1vh,32px);--rk-font-size:clamp(10px,1.55vw,11px)}}