:root {
  color-scheme:dark;
  --bg:#0b111e;
  --card:#121c2c;
  --border:#263248;
  --text:#ecf2fd;
  --muted:#8e9eb6;
  --blue:#6d9dff;
  --green:#57d7a4;
  --danger:#ff9b9b;
  font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 20% -10%,#172842 0,transparent 47%),var(--bg);
  color:var(--text);
  min-width:320px
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.4
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px
}
button {
  color:inherit
}
a {
  text-decoration:none;
  color:inherit
}
[hidden] {
  display:none!important
}
.workspace {
  max-width:1640px;
  margin:auto;
  padding:0 38px
}
.topbar {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #223047
}
.brand {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:18px;
  font-weight:650;
  letter-spacing:.5px
}
.brand small {
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-top:4px;
  letter-spacing:2px
}
.brand-mark {
  width:42px;
  height:42px;
  border-radius:13px;
  background:#1d3255;
  display:grid;
  place-items:center;
  color:#8fb2ff
}
.brand-mark svg {
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round
}
.status {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #2c384b;
  border-radius:30px;
  padding:8px 13px;
  color:#a8b5c9;
  font-size:12px
}
.status i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#748098
}
.status.online {
  color:#91e3bf;
  border-color:#315347;
  background:#152d28
}
.status.online i {
  background:var(--green);
  box-shadow:0 0 10px #57d7a450
}
.status.connecting i {
  background:var(--blue);
  animation:pulse 1.4s ease-in-out infinite
}
.status.error i {
  background:var(--danger)
}
.main-layout {
  display:grid;
  grid-template-columns:282px minmax(0,1fr);
  gap:28px;
  padding:32px 0 20px
}
.sidebar {
  display:flex;
  flex-direction:column;
  gap:22px
}
.connect-card {
  background:linear-gradient(150deg,#172338,#121c2c 70%);
  border:1px solid var(--border);
  padding:25px 22px;
  border-radius:17px
}
.eyebrow {
  font-size:11px;
  color:#9bbcff;
  letter-spacing:2px
}
h1 {
  font-size:27px;
  line-height:1.4;
  margin:14px 0 11px;
  font-weight:600;
  letter-spacing:.7px
}
.intro {
  color:#a6b3c7;
  font-size:12px;
  line-height:1.9;
  margin:0 0 26px
}
label {
  display:block;
  font-size:12px;
  color:#c8d3e6;
  margin:16px 0 9px
}
input,textarea {
  width:100%;
  background:#0d1626;
  border:1px solid #30405a;
  border-radius:9px;
  padding:12px 13px;
  color:var(--text);
  outline:none;
  transition:border-color .15s,box-shadow .15s
}
input:focus,textarea:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #6d9dff14
}
input:disabled {
  opacity:.6
}
input::placeholder,textarea::placeholder {
  color:#60718c
}
#connection-code {
  font-size:18px;
  letter-spacing:2px;
  font-variant-numeric:tabular-nums
}
.field-help {
  margin:7px 0 0;
  font-size:10px;
  color:#7d8da6
}
.password-field {
  position:relative
}
.password-field input {
  padding-right:55px
}
.password-toggle {
  position:absolute;
  right:9px;
  top:7px;
  height:32px;
  border:0;
  background:transparent;
  font-size:11px;
  color:#91a3be;
  padding:0 5px
}
.primary-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  border:0;
  border-radius:9px;
  background:#729fff;
  color:#07162f;
  padding:12px 15px;
  font-weight:650;
  margin-top:22px;
  box-shadow:0 4px 15px #5d90ee12;
  transition:background .15s
}
.primary-button:hover:not(:disabled) {
  background:#8bb0ff
}
.primary-button span {
  font-size:18px
}
.feedback {
  font-size:12px;
  line-height:1.7;
  background:#17304a;
  border:1px solid #304a68;
  border-radius:9px;
  padding:10px 12px;
  margin:15px 0 0;
  overflow-wrap:anywhere
}
.feedback.error {
  color:#ffb7b7;
  border-color:#633b49;
  background:#332332
}
.disconnect-button {
  width:100%;
  margin-top:14px;
  padding:10px;
  border-radius:9px;
  color:#ffb1b1;
  background:#2c202b;
  border:1px solid #5b3544
}
.disconnect-button:hover {
  background:#3c2734
}
.tips-card {
  padding:0 5px
}
.directory-card {
  border:1px solid var(--border);
  background:#111c2d;
  border-radius:14px;
  padding:18px
}
.directory-heading,.directory-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.directory-heading h2 {
  font-size:13px;
  font-weight:600;
  margin:0
}
.directory-count {
  color:#8cabc9;
  font-size:10px
}
#directory-locked p,.directory-help,.directory-empty,.directory-updated,.directory-feedback {
  color:#8e9fba;
  font-size:11px;
  line-height:1.7
}
#directory-locked p {
  margin:12px 0
}
.directory-login-button {
  width:100%;
  color:#b6cfff;
  background:#1b2d48;
  border:1px solid #344d70;
  border-radius:8px;
  padding:9px
}
.directory-actions {
  margin:12px 0 9px
}
.directory-actions button {
  font-size:11px;
  color:#a4bce0;
  border:0;
  background:transparent;
  padding:5px 0
}
.computer-list {
  list-style:none;
  margin:0;
  padding:0;
  max-height:260px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin
}
.computer-list li+li {
  margin-top:7px
}
.computer-button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  text-align:left;
  border:1px solid #2b3c55;
  border-radius:8px;
  background:#0c1728;
  padding:10px
}
.computer-button:hover:not(:disabled) {
  border-color:#5479af;
  background:#152740
}
.computer-button:disabled {
  opacity:.7
}
.computer-description {
  min-width:0
}
.computer-name,.computer-code {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.computer-name {
  color:#cfdaec;
  font-size:12px
}
.computer-code {
  margin-top:4px;
  color:#7e97b8;
  font-size:10px;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums
}
.computer-status {
  white-space:nowrap;
  font-size:10px;
  color:#8897ae
}
.computer-status.online {
  color:#83d8b5
}
.computer-status.busy {
  color:#dcbb82
}
.directory-help,.directory-updated {
  font-size:10px;
  margin:11px 0 0
}
.directory-empty {
  padding:15px 0;
  margin:0;
  text-align:center
}
.directory-feedback {
  margin:12px 0 0;
  overflow-wrap:anywhere
}
.directory-feedback.error {
  color:#ffb5b5
}
.text-dialog.directory-dialog {
  width:min(420px,calc(100vw - 36px));
  max-height:calc(100dvh - 36px);
  overflow-y:auto
}
.tips-card h2 {
  font-size:12px;
  letter-spacing:1px;
  font-weight:600;
  color:#afbdd2;
  margin:0 0 12px
}
.tips-card ul {
  list-style:none;
  margin:0;
  padding:0
}
.tips-card li {
  position:relative;
  padding-left:13px;
  color:#8fa1bb;
  font-size:11px;
  line-height:1.9;
  margin:7px 0
}
.tips-card li:before {
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#607a9e
}
.permission-note {
  border-top:1px solid #263044;
  margin:18px 0 0;
  padding-top:14px;
  font-size:11px;
  line-height:1.8;
  color:#7f90aa
}
.privacy-note {
  font-size:10px;
  line-height:1.6;
  color:#657894;
  margin:0;
  padding:0 5px
}
.desktop-panel {
  border:1px solid var(--border);
  border-radius:17px;
  background:#111a29;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:570px;
  overflow:hidden
}
.desktop-toolbar {
  height:62px;
  min-height:62px;
  padding:0 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #243047
}
.desktop-name {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap
}
.desktop-dot {
  width:7px;
  height:7px;
  background:#687b97;
  border-radius:50%
}
.desktop-panel.connected .desktop-dot {
  background:var(--green)
}
.toolbar-actions {
  display:flex;
  align-items:center;
  gap:12px
}
.mode-switch {
  display:flex;
  border-radius:8px;
  padding:3px;
  background:#0a1424;
  border:1px solid #28364d
}
.mode-button {
  font-size:11px;
  border:0;
  padding:6px 13px;
  background:transparent;
  color:#8092b0;
  border-radius:5px
}
.mode-button.selected {
  background:#213753;
  color:#c2d6fc;
  box-shadow:0 1px 4px #0003
}
.toolbar-divider {
  height:19px;
  width:1px;
  background:#2b384d;
  margin:0 2px
}
.tool-button {
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  border:0;
  background:transparent;
  padding:6px 0;
  color:#a6b6ce;
  font-size:11px
}
.tool-button:hover:not(:disabled) {
  color:#dfebff
}
.tool-button svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.desktop-stage {
  position:relative;
  flex:1;
  min-height:440px;
  background:#080e18;
  overflow:hidden;
  touch-action:none
}
.control-diagnostics {
  flex-shrink:0;
  padding:8px 19px;
  max-height:150px;
  overflow-y:auto;
  border-bottom:1px solid #243047;
  font-size:11px;
  line-height:1.6;
  overflow-wrap:anywhere
}
.transport-field {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
  font-size:12px;
  color:var(--muted)
}
.transport-field select {
  max-width:160px;
  min-width:0;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  color:inherit;
  background:#17202e;
  font:inherit
}
#transport-status { overflow-wrap:anywhere; white-space:normal }
.mode-note {
  flex-shrink:0;
  margin:0;
  padding:5px 19px;
  border-bottom:1px solid #243047;
  font-size:10px;
  line-height:1.7;
  color:#8c9eb8
}
.desktop-fullscreen-help {
  flex-shrink:0;
  margin:0;
  padding:5px 19px;
  border-bottom:1px solid #243047;
  color:#9fb7d4;
  font-size:11px;
  line-height:1.6
}
.sas-status {
  flex-shrink:0;
  margin:0;
  padding:5px 19px;
  color:#c3d5ef;
  border-bottom:1px solid #243047;
  font-size:11px;
  line-height:1.6
}
.sas-button { white-space:nowrap }
.mobile-sas-button { grid-column:span 2 }
.control-diagnostics p {
  margin:0
}
.performance-strip {
  margin-top:3px;
  color:#9fb7d4;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}
.native-status {
  color:#b8cce8;
  white-space:pre-wrap
}
.frame-health {
  color:#f0c58f
}
.sent-operations {
  color:#7d92b0;
  font-size:10px
}
.desktop-panel.connected .desktop-stage {
  min-height:0
}
.desktop-stage:focus-within {
  box-shadow:inset 0 0 0 1px #638edf70
}
#desktop-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  outline:0;
  touch-action:none;
  cursor:default
}
.rtc-video-source {
  position:absolute;
  width:1px;
  height:1px;
  left:0;
  top:0;
  opacity:0;
  pointer-events:none
}
.desktop-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:28px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,#12203835,transparent 65%)
}
.placeholder-art {
  width:168px;
  height:134px;
  position:relative;
  margin-bottom:22px
}
.mini-screen {
  position:absolute;
  width:157px;
  height:105px;
  left:5px;
  top:3px;
  border:2px solid #365071;
  border-radius:12px;
  background:linear-gradient(140deg,#1b304d,#101c30);
  box-shadow:0 12px 45px #0005;
  overflow:hidden
}
.mini-screen:before {
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  left:-30px;
  top:-22px;
  background:#355c9345
}
.mini-screen>span {
  position:absolute;
  right:13px;
  bottom:13px;
  width:25px;
  height:5px;
  background:#33587f;
  border-radius:5px
}
.mini-window {
  position:absolute;
  left:36px;
  top:21px;
  width:90px;
  height:59px;
  border:1px solid #52759b;
  background:#1c3354;
  border-radius:6px;
  padding:5px 6px;
  box-shadow:-7px 8px 0 #0e1b2d
}
.mini-window i {
  display:inline-block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#84a3ca;
  margin-right:3px;
  vertical-align:top
}
.mini-window b {
  position:absolute;
  left:15px;
  top:26px;
  width:55px;
  height:5px;
  border-radius:4px;
  background:#517aa9
}
.mini-window b:after {
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:34px;
  height:4px;
  border-radius:4px;
  background:#355c8a
}
.mini-base {
  position:absolute;
  top:107px;
  left:50px;
  width:65px;
  height:19px;
  border-bottom:3px solid #365071
}
.mini-base:before {
  content:"";
  position:absolute;
  left:24px;
  width:17px;
  height:16px;
  border-left:2px solid #365071;
  border-right:2px solid #365071;
  background:#142439
}
.desktop-placeholder h2 {
  font-size:20px;
  font-weight:500;
  letter-spacing:1px;
  margin:0 0 12px;
  color:#c2cfe4
}
.desktop-placeholder p {
  font-size:12px;
  line-height:1.8;
  text-align:center;
  color:#7286a6;
  margin:0;
  max-width:330px
}
.placeholder-tag {
  font-size:10px;
  color:#607898;
  margin-top:26px;
  padding:7px 13px;
  border:1px solid #233247;
  border-radius:30px
}
.focus-hint {
  position:absolute;
  bottom:17px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:11px;
  pointer-events:none;
  color:#d0e0fc;
  background:#15243bdc;
  border:1px solid #3c577b;
  border-radius:24px;
  padding:8px 15px
}
.desktop-footer {
  min-height:39px;
  display:flex;
  flex-shrink:0;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:3px 15px;
  padding:8px 19px;
  border-top:1px solid #243047;
  font-size:10px;
  color:#7d92b0;
  line-height:1.6
}
.desktop-footer span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
#frame-statistics {
  flex:1 1 240px;
  min-width:0;
  text-align:right;
  white-space:normal;
  overflow-wrap:anywhere
}
.desktop-footer .network-latency {
  flex:0 0 auto;
  color:#aec5e4;
  font-variant-numeric:tabular-nums
}
.page-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#586d8b;
  padding:0 0 22px
}
.desktop-panel:fullscreen {
  border:0;
  border-radius:0;
  background:#0b1423;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none
}
.desktop-panel:fullscreen .desktop-stage {
  min-height:0
}
.text-dialog {
  width:min(520px,calc(100vw - 36px));
  color:var(--text);
  background:#152137;
  border:1px solid #364860;
  border-radius:15px;
  padding:23px;
  box-shadow:0 25px 70px #0008
}
.text-dialog::backdrop {
  background:#040916b8;
  backdrop-filter:blur(3px)
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dialog-heading h2 {
  font-size:17px;
  margin:0;
  font-weight:600
}
.dialog-close {
  border:0;
  background:transparent;
  color:#91a3bf;
  font-size:25px;
  padding:0 4px
}
.text-dialog p {
  font-size:12px;
  line-height:1.7;
  color:#98aac6;
  margin:12px 0 17px
}
.text-dialog textarea {
  resize:vertical;
  max-height:50vh;
  line-height:1.7
}
.dialog-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:15px
}
.dialog-footer>span {
  font-size:11px;
  color:#7f95b6
}
.dialog-footer .primary-button {
  width:auto;
  min-width:116px;
  margin:0
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@keyframes pulse {
  50% {
    opacity:.3
  }
}
@media(min-width:1300px) {
  .desktop-panel {
    min-height:calc(100vh - 174px);
    max-height:calc(100vh - 174px)
  }
}
@media(max-width:1050px) {
  .workspace {
    padding:0 24px
  }
  .main-layout {
    grid-template-columns:250px minmax(0,1fr);
    gap:20px
  }
  .connect-card {
    padding:23px 18px
  }
  .desktop-toolbar {
    padding:0 13px
  }
  .toolbar-actions {
    gap:10px
  }
  .desktop-name {
    font-size:11px
  }
  .tool-button span {
    display:none
  }
  .desktop-footer {
    padding:0 13px
  }
  .mode-button {
    padding:6px 10px
  }
}
@media(max-width:740px) {
  .workspace {
    padding:0 16px
  }
  .topbar {
    height:77px
  }
  .brand {
    font-size:16px
  }
  .brand-mark {
    width:37px;
    height:37px
  }
  .brand small {
    font-size:9px
  }
  .main-layout {
    grid-template-columns:1fr;
    padding-top:21px;
    gap:19px
  }
  .sidebar {
    gap:14px
  }
  .directory-card {
    padding:15px 18px
  }
  .computer-list {
    max-height:180px
  }
  .connect-card {
    padding:21px
  }
  .connect-card h1 {
    font-size:23px;
    line-height:1.4;
    margin:10px 0 8px
  }
  .connect-card h1 br {
    display:none
  }
  .intro {
    margin-bottom:17px
  }
  .tips-card,.privacy-note {
    display:none
  }
  #connect-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 13px
  }
  #connect-form label {
    margin-top:8px
  }
  #connect-form label[for="connection-code"] {
    grid-column:1;
    grid-row:1
  }
  #connect-form label[for="connection-password"] {
    grid-column:2;
    grid-row:1
  }
  #connection-code {
    grid-column:1;
    grid-row:2;
    font-size:16px;
    letter-spacing:1px
  }
  #connect-form.admin-connect label[for="connection-code"],
  #connect-form.admin-connect #connection-code,
  #connect-form.admin-connect .field-help {
    grid-column:1/-1
  }
  .password-field {
    grid-column:2;
    grid-row:2
  }
  .field-help {
    grid-column:1;
    grid-row:3
  }
  .primary-button {
    grid-column:1/-1;
    margin-top:17px
  }
  .desktop-panel {
    min-height:390px
  }
  .desktop-stage {
    min-height:320px
  }
  .desktop-toolbar {
    min-height:54px;
    height:auto;
    padding:10px 13px;
    flex-wrap:wrap;
    gap:8px
  }
  .toolbar-actions {
    flex:1 1 220px;
    justify-content:flex-end
  }
  .desktop-placeholder h2 {
    font-size:17px
  }
  .placeholder-art {
    transform:scale(.8);
    margin-bottom:4px
  }
  .page-footer {
    flex-direction:column;
    gap:8px;
    padding-bottom:20px
  }
}
.mobile-mode-button {
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:7px
}
.view-controls {
  position:absolute; z-index:4; top:7px; left:7px; display:flex; gap:5px;
  padding:3px; border-radius:8px; background:#112137de
}
.view-controls select,.view-controls button,.view-pan-controls button {
  min-height:44px; min-width:44px; border:1px solid #47617f; border-radius:6px;
  background:#182e48; color:#e7f1ff; font:inherit; font-size:12px; padding:5px 9px
}
.view-controls select { width:auto; margin:0 }
.view-pan-controls {
  position:absolute; z-index:5; top:64px; left:7px; right:7px; max-width:450px;
  max-height:calc(100% - 71px); overflow-y:auto; padding:7px 11px;
  border:1px solid #486280; border-radius:8px; background:#14253af5; color:#e7f1ff;
  overscroll-behavior:contain
}
.view-pan-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px }
.view-pan-controls label { display:flex; align-items:center; gap:8px; font-size:12px; white-space:nowrap }
.view-pan-controls input[type="range"] { flex:1; width:0; min-width:0; min-height:44px; padding:0; margin:0; accent-color:#74aeff; touch-action:pan-y }
.view-hint { margin:2px 0 4px; font-size:11px; line-height:1.6; color:#bdcce2 }
.desktop-scroll-x,.desktop-scroll-y {
  position:absolute;
  z-index:6;
  background:#182334;
  scrollbar-width:thin;
  scrollbar-color:#72849c #182334;
  overscroll-behavior:contain;
  touch-action:auto;
  cursor:default
}
.desktop-scroll-x {
  left:0;
  right:0;
  bottom:0;
  height:16px;
  overflow-x:auto;
  overflow-y:hidden
}
.desktop-scroll-y {
  top:0;
  right:0;
  bottom:0;
  width:16px;
  overflow-x:hidden;
  overflow-y:auto
}
#desktop-scroll-x-content { width:1px; height:1px }
#desktop-scroll-y-content { width:1px; height:1px }
.desktop-stage:has(.desktop-scroll-y:not([hidden])) .desktop-scroll-x { right:16px }
.desktop-stage:has(.desktop-scroll-x:not([hidden])) .desktop-scroll-y { bottom:16px }
.mobile-mode-button[aria-pressed="true"] {
  color:#c2d6fc;
  background:#213753;
  border-color:#3c5c89
}
.mobile-cursor {
  position:absolute;
  z-index:2;
  width:22px;
  height:29px;
  pointer-events:none;
  filter:drop-shadow(0 1px 2px #000b)
}
.mobile-cursor:before,.mobile-cursor:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:22px;
  height:29px;
  background:#07101d;
  clip-path:polygon(0 0,100% 62%,60% 67%,44% 100%)
}
.mobile-cursor:after {
  top:3px;
  left:3px;
  width:16px;
  height:21px;
  background:#f5f9ff
}
.floating-mouse {
  position:absolute;
  z-index:3;
  width:176px;
  height:212px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none
}
.floating-mouse button {
  position:absolute;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border:1px solid #8ea3c07d;
  color:#edf5ff;
  background:linear-gradient(145deg,#263244ed,#111b29e8);
  box-shadow:0 3px 10px #0006,inset 0 1px 0 #fff2;
  font-size:12px;
  font-weight:500;
  line-height:1;
  touch-action:none;
  pointer-events:auto;
  -webkit-touch-callout:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
.floating-mouse button:hover:not(:disabled) {
  border-color:#c2d7f4;
  background:linear-gradient(145deg,#344a66f5,#1b2e47ed)
}
.floating-mouse button:active:not(:disabled),
.floating-mouse button[aria-pressed="true"] {
  border-color:#cae1ff;
  background:linear-gradient(145deg,#416c9ff5,#264b77ed);
  box-shadow:0 2px 6px #0007,inset 0 1px 4px #07122366
}
.floating-mouse button:focus-visible {
  outline-offset:2px
}
.floating-mouse svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none
}
.floating-mouse .mouse-collapse {
  left:132px;
  top:2px;
  width:44px;
  height:44px;
  border-color:#8298b246;
  border-radius:50%;
  background:#142032b8
}
.mouse-collapse svg {
  width:23px;
  height:23px
}
.floating-mouse .mouse-wheel {
  left:56px;
  top:0;
  width:64px;
  height:64px;
  border-radius:50%
}
.mouse-wheel svg {
  position:absolute;
  inset:3px;
  width:56px;
  height:56px;
  color:#b9cce6
}
.mouse-wheel .mouse-wheel-track {
  opacity:.25;
  stroke-dasharray:1 5
}
.mouse-wheel span {
  position:relative;
  pointer-events:none;
  font-size:10px
}
.floating-mouse .mouse-side {
  top:76px;
  width:48px;
  height:84px;
  border-radius:24px
}
.floating-mouse .mouse-left {
  left:0
}
.floating-mouse .mouse-right {
  left:128px
}
.floating-mouse .mouse-center {
  left:56px;
  top:78px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 25%,#4b607be8,#27394ee8 60%,#182738eb);
  border-color:#a5bedcc7
}
.mouse-center svg {
  display:block;
  width:30px;
  height:30px;
  margin:0 auto 1px;
  opacity:.9
}
.mouse-center-label {
  font-size:10px;
  pointer-events:none
}
.mouse-expand-label {
  display:none;
  pointer-events:none
}
.floating-mouse .mouse-middle {
  left:66px;
  top:168px;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:11px
}
.floating-mouse.collapsed {
  width:60px;
  height:60px
}
.floating-mouse.collapsed button:not(.mouse-center) {
  display:none
}
.floating-mouse.collapsed .mouse-center {
  left:0;
  top:0;
  width:60px;
  height:60px
}
.floating-mouse.collapsed .mouse-center svg,
.floating-mouse.collapsed .mouse-center-label {
  display:none
}
.floating-mouse.collapsed .mouse-expand-label {
  display:inline;
  font-size:11px
}
.mobile-controls {
  flex-shrink:0;
  padding:8px 6px 6px;
  background:#142137;
  border-top:1px solid #334661;
  user-select:none;
  -webkit-user-select:none
}
.mobile-action-row {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(44px,1fr);
  gap:4px
}
.mobile-controls button {
  min-width:44px;
  min-height:44px;
  padding:6px 3px;
  font-size:12px;
  line-height:1.3;
  border:1px solid #3b506d;
  border-radius:8px;
  background:#21344f;
  color:#d6e4fc;
  touch-action:manipulation
}
.mobile-controls button:hover:not(:disabled) {
  background:#2b4263
}
.mobile-controls button[aria-pressed="true"],
.mobile-controls button[aria-expanded="true"] {
  background:#40679f;
  border-color:#87b2f3;
  color:#fff
}
.mobile-controls .mobile-exit-button {
  border-color:#536786;
  background:#2d3b50
}
.mobile-keys {
  display:grid;
  grid-template-columns:repeat(4,minmax(44px,1fr));
  gap:5px;
  max-height:150px;
  overflow-y:auto;
  overscroll-behavior:contain;
  margin-top:7px;
  padding:2px;
  scrollbar-width:thin
}
.mobile-help {
  margin:6px 0 0;
  font-size:10px;
  line-height:1.5;
  color:#a5b8d5;
  text-align:center
}
.mobile-ime-panel {
  margin-top:7px;
  max-height:130px;
  overflow-y:auto;
  overscroll-behavior:contain
}
.mobile-ime-row {
  display:flex;
  align-items:center;
  gap:6px
}
.mobile-ime-row textarea {
  min-width:0;
  flex:1;
  min-height:44px;
  max-height:80px;
  margin:0;
  padding:9px 10px;
  font-size:16px;
  line-height:1.5;
  resize:none
}
.mobile-ime-row button {
  flex:0 0 72px
}
.mobile-ime-help {
  margin:4px 0 0;
  color:#a5b8d5;
  font-size:10px;
  line-height:1.5
}
.desktop-panel.mobile-ime-open .mode-note,
.desktop-panel.mobile-ime-open .control-diagnostics,
.desktop-panel.mobile-ime-open .mobile-help {
  display:none
}
.desktop-panel.mobile-mode .desktop-toolbar {
  flex-shrink:0
}
.desktop-panel.mobile-mode .tool-button {
  min-width:44px;
  min-height:44px;
  justify-content:center
}
.desktop-panel.mobile-mode .mobile-mode-button span {
  display:inline
}
.desktop-panel.mobile-mode #text-button,
.desktop-panel.mobile-mode #sas-button,
.desktop-panel.mobile-mode .toolbar-divider {
  display:none
}
.desktop-panel.mobile-mode #desktop-canvas {
  user-select:none;
  -webkit-user-select:none
}
.desktop-panel.mobile-mode .focus-hint {
  display:none
}
.desktop-panel.mobile-mode .desktop-fullscreen-help {
  display:none
}
.desktop-panel.mobile-mode .sas-status { padding:4px 8px; font-size:10px }
.desktop-panel.immersive {
  position:fixed;
  inset:0;
  z-index:100;
  width:100%;
  height:var(--mobile-viewport-height,100vh);
  height:var(--mobile-viewport-height,100dvh);
  min-height:0;
  max-height:none;
  max-width:none;
  border:0;
  border-radius:0;
  background:#0b1423;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
}
body.mobile-immersive {
  overflow:hidden;
  overscroll-behavior:none
}
.desktop-panel.immersive .desktop-stage,
.desktop-panel:fullscreen .desktop-stage {
  min-height:0
}
.desktop-panel:fullscreen {
  min-height:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
}
.text-dialog {
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  overscroll-behavior:contain
}
@media(max-width:740px),(pointer:coarse) and (max-width:1100px) {
  .workspace {
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right))
  }
  .main-layout {
    grid-template-columns:minmax(0,1fr);
    gap:16px
  }
  .workspace input,.workspace select {
    font-size:16px
  }
  .directory-login-button,.directory-actions button,.computer-button,
  .disconnect-button,.password-toggle {
    min-height:44px
  }
  .password-toggle {
    top:1px
  }
  .desktop-panel.mobile-mode.connected {
    order:-1;
    height:calc(100vh - 111px);
    height:calc(100dvh - 111px);
    min-height:540px;
    max-height:none
  }
  .desktop-panel.mobile-mode.connected .desktop-name {
    display:none
  }
  .desktop-panel.mobile-mode .desktop-toolbar {
    padding:5px 6px;
    min-height:56px;
    gap:4px
  }
  .desktop-panel.mobile-mode .toolbar-actions {
    min-width:0;
    flex:1;
    justify-content:space-between;
    gap:4px
  }
  .desktop-panel.mobile-mode .mode-switch {
    padding:2px
  }
  .desktop-panel.mobile-mode .mode-button {
    min-width:44px;
    min-height:44px;
    padding:6px 7px
  }
  .desktop-panel.mobile-mode .mobile-mode-button {
    gap:3px;
    padding:6px 4px;
    font-size:11px
  }
  .desktop-panel.mobile-mode .mobile-mode-button svg {
    display:none
  }
  .desktop-panel.mobile-mode #fullscreen-button span {
    display:none
  }
  .desktop-panel.mobile-mode .mode-note {
    padding:4px 8px;
    font-size:9px
  }
  .desktop-panel.mobile-mode .control-diagnostics {
    max-height:70px;
    padding:5px 8px;
    font-size:10px;
    line-height:1.4
  }
  .desktop-panel.mobile-mode .desktop-footer {
    padding:5px 8px;
    min-height:30px;
    gap:2px 8px;
    font-size:9px;
    line-height:1.4
  }
  .desktop-panel.mobile-mode #frame-statistics {
    flex-basis:100%;
    text-align:left
  }
  .desktop-panel.mobile-mode .desktop-footer span {
    max-width:100%
  }
  .desktop-panel.mobile-mode.immersive,
  .desktop-panel.mobile-mode:fullscreen {
    height:var(--mobile-viewport-height,100vh);
    height:var(--mobile-viewport-height,100dvh);
    min-height:0
  }
  .text-dialog,.text-dialog.directory-dialog {
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
    padding:16px
  }
  .text-dialog input,.text-dialog textarea {
    font-size:16px
  }
  .text-dialog textarea {
    min-height:80px;
    max-height:40vh;
    max-height:40dvh
  }
  .dialog-close {
    min-width:44px;
    min-height:44px
  }
  .dialog-footer .primary-button {
    min-height:44px
  }
  .page-footer {
    padding-bottom:max(20px,env(safe-area-inset-bottom))
  }
}
@media(max-height:500px) and (orientation:landscape) {
  .workspace:has(.desktop-panel.mobile-mode.connected) .topbar {
    height:56px
  }
  .main-layout:has(.desktop-panel.mobile-mode.connected) {
    padding-top:12px
  }
  .desktop-panel.mobile-mode.connected {
    min-height:390px;
    height:calc(100vh - 85px);
    height:calc(100dvh - 85px)
  }
  .desktop-panel.mobile-mode .desktop-toolbar {
    min-height:52px;
    padding-top:2px;
    padding-bottom:2px
  }
  .desktop-panel.mobile-mode .mode-note,
  .desktop-panel.mobile-mode .mobile-help {
    display:none
  }
  .desktop-panel.mobile-mode .control-diagnostics {
    max-height:30px;
    padding-top:2px;
    padding-bottom:2px
  }
  .desktop-panel.mobile-mode .mobile-controls {
    padding-top:4px;
    padding-bottom:4px
  }
  .desktop-panel.mobile-mode .mobile-keys {
    grid-template-columns:repeat(6,minmax(44px,1fr));
    max-height:54px;
    margin-top:3px
  }
  .desktop-panel.mobile-mode .desktop-footer {
    min-height:22px;
    padding-top:2px;
    padding-bottom:2px
  }
  .desktop-panel.mobile-mode #frame-statistics {
    flex:1 1 200px;
    text-align:right
  }
  .desktop-panel.mobile-mode.immersive,
  .desktop-panel.mobile-mode:fullscreen {
    min-height:0;
    height:var(--mobile-viewport-height,100vh);
    height:var(--mobile-viewport-height,100dvh)
  }
  .text-dialog textarea {
    min-height:70px
  }
}
@media(max-height:360px) and (orientation:landscape) {
  .floating-mouse:not(.collapsed) {
    height:140px
  }
  .floating-mouse:not(.collapsed) .mouse-wheel {
    left:66px;
    width:44px;
    height:44px
  }
  .floating-mouse:not(.collapsed) .mouse-wheel svg {
    width:36px;
    height:36px
  }
  .floating-mouse:not(.collapsed) .mouse-wheel span {
    font-size:9px
  }
  .floating-mouse:not(.collapsed) .mouse-center {
    left:66px;
    top:48px;
    width:44px;
    height:44px
  }
  .floating-mouse:not(.collapsed) .mouse-center svg {
    width:22px;
    height:22px;
    margin-bottom:0
  }
  .floating-mouse:not(.collapsed) .mouse-center-label {
    font-size:9px
  }
  .floating-mouse:not(.collapsed) .mouse-side {
    top:48px
  }
  .floating-mouse:not(.collapsed) .mouse-middle {
    top:96px
  }
  .floating-mouse:not(.collapsed) .mouse-collapse {
    top:0
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}

/* 方向锁定的 iPhone 也能横向操作；画布与触摸坐标由同一 90 度变换处理。 */
.desktop-panel.mobile-mode.landscape-view .desktop-toolbar { min-height:48px; padding:2px 6px }
.desktop-panel.mobile-mode.landscape-view .desktop-name,
.desktop-panel.mobile-mode.landscape-view .mode-note,
.desktop-panel.mobile-mode.landscape-view .control-diagnostics,
.desktop-panel.mobile-mode.landscape-view .mobile-help { display:none }
.desktop-panel.mobile-mode.landscape-view .mobile-controls { padding:3px 6px }
.desktop-panel.mobile-mode.landscape-view .mobile-keys {
  grid-template-columns:repeat(6,minmax(44px,1fr)); max-height:54px; margin-top:3px
}
.desktop-panel.mobile-mode.landscape-view .desktop-footer { min-height:22px; padding:2px 8px }
.desktop-panel.mobile-mode.landscape-view #frame-statistics { flex:1 1 180px; text-align:right }
.desktop-panel.mobile-mode.rotated-landscape {
  inset:auto;
  left:var(--mobile-viewport-width,100vw);
  top:0;
  width:var(--mobile-viewport-height,100dvh);
  height:var(--mobile-viewport-width,100vw);
  transform-origin:0 0;
  transform:rotate(90deg);
  padding:env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-top)
}
.landscape-view .floating-mouse:not(.collapsed) { height:140px }
.landscape-view .floating-mouse:not(.collapsed) .mouse-wheel { left:66px; width:44px; height:44px }
.landscape-view .floating-mouse:not(.collapsed) .mouse-wheel svg { width:36px; height:36px }
.landscape-view .floating-mouse:not(.collapsed) .mouse-center { left:66px; top:48px; width:44px; height:44px }
.landscape-view .floating-mouse:not(.collapsed) .mouse-center svg { width:22px; height:22px; margin-bottom:0 }
.landscape-view .floating-mouse:not(.collapsed) .mouse-side { top:48px }
.landscape-view .floating-mouse:not(.collapsed) .mouse-middle { top:96px }
.landscape-view .floating-mouse:not(.collapsed) .mouse-collapse { top:0 }

/* 桌面键盘接管后只保留画面与必要的浏览器滚动条，释放接管即恢复原布局。 */
.desktop-panel.desktop-clean {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:#080e18
}
.desktop-panel.desktop-clean > :not(.desktop-stage),
.desktop-panel.desktop-clean .desktop-stage > :not(#desktop-canvas):not(.desktop-scroll-x):not(.desktop-scroll-y) {
  display:none!important
}
.desktop-panel.desktop-clean .desktop-stage {
  flex:1 1 100%;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none
}