:root {
  color-scheme:dark;
  --bg:#0b1018;
  --sidebar:#0e141e;
  --surface:#111923;
  --surface-hover:#17212d;
  --line:#232e3c;
  --muted:#778596;
  --text:#e7eef4;
  --accent:#65ddc2;
  --accent-dim:#173b37;
  --blue:#77aaf5;
  --purple:#b296e7;
  --amber:#dfb678;
  --mono:'IBM Plex Mono','Cascadia Code',Consolas,monospace;
  --sans:'DM Sans','Microsoft YaHei','PingFang SC',sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  -webkit-font-smoothing:antialiased
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.46
}
button,a {
  -webkit-user-select:none;
  user-select:none
}
button {
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select {
  outline:none
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
input:focus,select:focus {
  border-color:var(--accent)!important
}
input::placeholder {
  color:#69778a
}
button {
  border:0;
  background:none
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
[hidden] {
  display:none!important
}
.sidebar {
  width:224px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--sidebar);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:35px 18px 0;
  z-index:5
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:12px;
  font-size:22px;
  font-weight:650;
  letter-spacing:-.8px
}
.brand b {
  font-weight:450;
  color:#b6c0cc
}
.brand small {
  display:block;
  letter-spacing:2px;
  font-size:7px;
  font-weight:500;
  color:var(--muted);
  margin-top:5px
}
.brand-mark {
  display:grid;
  grid-template-columns:12px 12px;
  gap:4px;
  transform:rotate(-5deg)
}
.brand-mark span {
  width:12px;
  height:12px;
  border-radius:3px;
  background:var(--accent)
}
.brand-mark span:last-child {
  opacity:.45
}
.workspace-label {
  font-size:10px;
  letter-spacing:1px;
  color:#66758a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  margin:44px 0 17px
}
.workspace-label span {
  font-family:var(--mono);
  font-size:8px;
  background:#1a2531;
  padding:3px 5px;
  border-radius:4px;
  color:#8795a6
}
.main-nav {
  display:flex;
  flex-direction:column;
  gap:6px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  height:45px;
  padding:0 14px;
  color:#8e9caf;
  font-size:12px;
  text-align:left;
  border-radius:7px;
  transition:background .18s,color .18s
}
.nav-item:hover {
  background:#17212c;
  color:var(--text)
}
.nav-item svg {
  width:18px;
  height:18px
}
.nav-item.active {
  color:var(--accent);
  background:linear-gradient(90deg,#193831,#152c2b);
  box-shadow:inset 0 0 0 1px #29473f
}
.nav-count {
  margin-left:auto;
  background:#33564c;
  color:#99eddb;
  min-width:22px;
  text-align:center;
  padding:1px 5px;
  border-radius:4px;
  font-family:var(--mono);
  font-size:10px
}
.key-hint {
  margin-left:auto;
  color:#617085;
  font-size:15px
}
.sidebar-note {
  margin:42px 12px 20px;
  border-top:1px solid var(--line);
  padding-top:24px
}
.small-overline {
  font-size:7px;
  letter-spacing:1.3px;
  color:#627085
}
.orbit-art {
  position:relative;
  height:98px;
  margin-top:8px;
  display:grid;
  place-items:center;
  color:#5b948c
}
.orbit-art>span {
  position:absolute;
  width:130px;
  height:58px;
  border:1px solid #293b43;
  border-radius:50%;
  transform:rotate(-24deg)
}
.orbit-art>span:nth-child(2) {
  width:103px;
  height:43px;
  transform:rotate(24deg);
  border-color:#22323c
}
.orbit-art svg {
  width:27px;
  height:43px;
  transform:rotate(-10deg);
  stroke-width:1
}
.orbit-art i {
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  top:24px;
  right:24px;
  box-shadow:0 0 13px #66e2bf66
}
.sidebar-note h3 {
  font-weight:500;
  font-size:12px;
  color:#acb8c5;
  margin:8px 0
}
.sidebar-note p {
  font-size:10px;
  color:#637185;
  line-height:1.8;
  margin:0
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:20px
}
.sidebar-bottom .nav-item {
  height:41px;
  font-size:11px
}
.external-arrow {
  margin-left:auto;
  width:14px!important;
  transform:rotate(-40deg)
}
.local-profile {
  margin:18px -18px 0;
  border-top:1px solid var(--line);
  padding:20px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:#b8c4d1
}
.avatar,.top-avatar {
  display:grid;
  place-items:center;
  border:1px solid #3c4a5a;
  background:#25323e;
  border-radius:9px;
  width:32px;
  height:32px;
  color:#b4c5d2;
  font-weight:600
}
.local-profile small {
  display:block;
  margin-top:5px;
  font-size:8px;
  color:var(--muted)
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  vertical-align:middle;
  flex-shrink:0
}
.local-profile .status-dot {
  width:4px;
  height:4px
}
.version {
  margin-left:auto;
  font-size:9px;
  font-family:var(--mono);
  color:#56677a
}
.main-shell {
  margin-left:224px
}
.topbar {
  height:77px;
  border-bottom:1px solid var(--line);
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#0d131c
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:11px;
  color:#6d7c8e
}
.breadcrumb svg {
  width:12px;
  height:12px;
  color:#4e6076
}
.breadcrumb span {
  color:#bac5d2
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:19px
}
.environment-badge {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#a2b2c0
}
.environment-badge.demo {
  color:#d2bb8f
}
.environment-badge.demo .status-dot {
  background:#d2bb8f
}
.topbar-divider {
  height:22px;
  width:1px;
  background:var(--line)
}
.top-avatar {
  width:29px;
  height:29px;
  border-radius:50%;
  background:#252e3d;
  font-size:11px
}
.text-button {
  display:flex;
  align-items:center;
  gap:6px;
  color:#94a3b6;
  font-size:11px;
  padding:5px 0;
  white-space:nowrap
}
.text-button:hover {
  color:var(--accent)
}
.text-button svg {
  width:14px;
  height:14px
}
main {
  max-width:1750px;
  padding:32px 34px 0;
  margin:0 auto
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:29px;
  gap:20px
}
.eyebrow {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1.7px;
  color:#65788b;
  margin-bottom:9px
}
.page-heading h1 {
  font-size:27px;
  font-weight:600;
  letter-spacing:-.6px;
  margin:0 0 9px
}
.title-dot {
  color:var(--accent);
  margin-left:4px
}
.page-heading p {
  color:#7f8fa2;
  font-size:11px;
  letter-spacing:.3px;
  margin:0
}
.heading-actions {
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:9px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:37px;
  padding:0 15px;
  border-radius:6px;
  font-size:11px;
  font-weight:550;
  white-space:nowrap;
  transition:filter .15s,background .15s
}
.button svg {
  width:16px;
  height:16px
}
.button.primary {
  background:var(--accent);
  border:1px solid #80e9d0;
  color:#102c28;
  box-shadow:0 3px 12px #5ce9c908
}
.button.primary:hover {
  background:#8cebd5
}
.button.secondary {
  background:#141e29;
  border:1px solid #2b3745;
  color:#b5c1ce
}
.button.secondary:hover {
  background:#1b2936
}
.button.small {
  min-height:33px;
  font-size:10px;
  padding:0 12px
}
.button.danger {
  background:#552933;
  color:#ffc9cf;
  border:1px solid #733441
}
.notice {
  border:1px solid #6d5735;
  background:#29231b;
  padding:12px 16px;
  border-radius:7px;
  margin-bottom:22px;
  font-size:11px;
  line-height:1.7;
  color:#d9c09b
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:33px
}
.stat-card {
  background:linear-gradient(110deg,#121c27,#111922);
  border:1px solid var(--line);
  border-radius:9px;
  padding:19px 19px 17px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:125px
}
.stat-card>div>span {
  font-size:11px;
  color:#8d9bad
}
.stat-card strong {
  display:block;
  font-size:29px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:-1px;
  margin:7px 0 4px
}
.stat-card small {
  font-size:9px;
  color:#647589;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap
}
.stat-card small .status-dot {
  width:4px;
  height:4px
}
.stat-icon {
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center
}
.stat-icon svg {
  width:18px;
  height:18px
}
.teal {
  color:var(--accent);
  background:#1a3635
}
.blue {
  color:var(--blue);
  background:#1a2a42
}
.purple {
  color:var(--purple);
  background:#29263d
}
.amber {
  color:var(--amber);
  background:#332d26
}
.blue-dot {
  background:var(--blue)
}
.purple-dot {
  background:var(--purple)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px;
  gap:12px
}
.section-title {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
h2 {
  font-size:14px;
  font-weight:550;
  letter-spacing:.2px;
  margin:0
}
.count-pill {
  font-size:9px;
  line-height:19px;
  min-width:22px;
  padding:0 6px;
  text-align:center;
  border:1px solid #2a394a;
  background:#1a2532;
  color:#a0afc0;
  border-radius:5px;
  font-family:var(--mono)
}
.subtle {
  color:#627386;
  font-size:9px
}
.section-title>.subtle {
  margin-left:6px
}
.device-tools {
  display:flex;
  gap:17px;
  align-items:center
}
.search-field {
  display:flex;
  align-items:center;
  gap:8px;
  background:#101823;
  border:1px solid #26313f;
  border-radius:6px;
  padding:0 10px;
  height:33px;
  min-width:180px
}
.search-field svg {
  width:14px;
  height:14px;
  color:#687b90
}
.search-field input {
  border:0;
  background:none;
  color:#c3d0db;
  width:168px;
  font-size:10px;
  min-width:0
}
.device-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px
}
.device-card {
  border:1px solid #2a3543;
  border-radius:9px;
  background:#121b26;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  min-height:225px;
  transition:border-color .15s,background .15s
}
.device-card:hover {
  background:#15202c;
  border-color:#446077
}
.device-card.is-active {
  border-color:#508f82;
  background:linear-gradient(135deg,#14252b,#121b26 80%)
}
.device-card.is-active:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent),#356058)
}
.device-card.offline {
  background:#101721
}
.device-card.offline .device-information,.device-card.offline .device-metrics {
  opacity:.46
}
.device-card-top {
  padding:15px 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.device-status {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  color:var(--accent)
}
.device-status.offline {
  color:#7b8594
}
.device-status.offline .status-dot {
  background:#6f7a89
}
.device-status.unauthorized {
  color:var(--amber)
}
.device-status.unauthorized .status-dot {
  background:var(--amber)
}
.device-checkbox {
  appearance:none;
  display:block;
  width:14px;
  height:14px;
  border:1px solid #445363;
  border-radius:4px;
  margin:0;
  cursor:pointer;
  position:relative;
  background:#121c28
}
.device-checkbox:checked {
  background:var(--accent);
  border-color:var(--accent)
}
.device-checkbox:checked:after {
  content:'';
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:7px;
  border:solid #14332d;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg)
}
.device-checkbox:disabled {
  opacity:.3;
  cursor:not-allowed
}
.device-information {
  display:flex;
  align-items:center;
  gap:13px;
  padding:21px 16px 17px
}
.device-illustration {
  height:47px;
  width:28px;
  flex-shrink:0;
  border:1.5px solid #829895;
  border-radius:5px;
  padding:3px;
  transform:rotate(-7deg);
  background:#192927;
  box-shadow:3px 3px 0 #0a141c
}
.device-illustration:before {
  content:'';
  display:block;
  width:100%;
  height:100%;
  border-radius:2px;
  background:linear-gradient(150deg,#274c4a 15%,#6baa97 47%,#203d49 48%,#142b3d 80%)
}
.device-illustration.blue-phone {
  border-color:#7e8fa8;
  background:#233044;
  transform:rotate(6deg)
}
.device-illustration.blue-phone:before {
  background:linear-gradient(35deg,#26395d,#8d9cd3 48%,#455e88 50%,#172839)
}
.device-illustration.purple-phone {
  border-color:#9a90a9;
  transform:rotate(-5deg)
}
.device-illustration.purple-phone:before {
  background:linear-gradient(155deg,#3a334e,#a594b8 45%,#605b81 48%,#292e44)
}
.device-illustration.orange-phone {
  border-color:#9e8c7b;
  transform:rotate(4deg)
}
.device-illustration.orange-phone:before {
  background:linear-gradient(135deg,#9c6b46,#3a3331 50%,#594b3f)
}
.device-name {
  font-size:13px;
  font-weight:550;
  letter-spacing:-.1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%
}
.device-name-wrap {
  min-width:0;
  flex:1
}
.device-tags {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:8px;
  color:#8192a7;
  white-space:nowrap
}
.connection-tag {
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid #2e3e4f;
  border-radius:3px;
  padding:2px 4px;
  color:#9cadbe;
  font-size:8px
}
.connection-tag svg {
  width:10px;
  height:10px;
  stroke-width:1.5
}
.tag-divider {
  color:#35465b
}
.device-metrics {
  padding:0 16px 17px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.metric-row {
  display:flex;
  justify-content:space-between;
  gap:4px;
  font-size:8px;
  color:#7d8da0;
  margin-bottom:7px
}
.metric-row b {
  font-family:var(--mono);
  font-size:8px;
  font-weight:400;
  color:#a8b6c4
}
.metric-track {
  height:3px;
  background:#253240;
  border-radius:3px;
  overflow:hidden
}
.metric-track span {
  display:block;
  height:100%;
  background:var(--accent);
  border-radius:3px
}
.metric-track.storage span {
  background:#728fbb
}
.device-card-footer {
  padding:11px 14px;
  border-top:1px solid #22303e;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  font-size:8px;
  color:#74859b;
  background:#0a131b24;
  font-family:var(--mono)
}
.device-card-footer>span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.device-card-footer button {
  font-family:var(--sans);
  font-size:8px;
  color:#93a8bd;
  display:flex;
  align-items:center;
  gap:3px;
  padding:0;
  white-space:nowrap
}
.device-card-footer button svg {
  height:11px;
  width:11px
}
.device-card.is-active .device-card-footer button {
  color:var(--accent)
}
.host-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 16px;
  margin-bottom:24px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface)
}
.host-picker,.host-bar-actions {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.host-picker>svg { width:18px; height:18px; color:var(--accent); flex-shrink:0 }
.host-picker label { white-space:nowrap; color:var(--muted); font-size:11px }
.host-picker select { max-width:260px; min-width:120px; background:#15202c; color:var(--text); border:1px solid #334253; border-radius:6px; padding:8px }
#hostAddress { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; font-family:var(--mono) }
.host-bar-actions { flex-shrink:0 }
.hosts-dialog { width:580px; max-height:calc(100vh - 40px); overflow:auto }
.pairing-setup { padding:15px; border:1px solid #37635c; border-radius:8px; background:#132c2c }
.pairing-setup .form-label { margin-top:0 }
.pairing-code-row { display:flex; align-items:center; gap:8px }
.pairing-code-row .form-input { min-width:0; flex:1 }
.pairing-code-row .button { flex-shrink:0 }
.pairing-setup>.subtle { margin:9px 0 0; font-size:11px; line-height:1.7 }
.pairing-status-row { display:flex; align-items:center; gap:12px; margin-top:12px }
.pairing-status { flex:1; margin:0; color:var(--muted); font-size:11px; line-height:1.8 }
.pairing-status[data-state="waiting"] { color:#dac184 }
.pairing-status[data-state="matched"] { color:var(--accent) }
.pairing-status-row .text-button { flex-shrink:0; font-size:11px }
.pairing-setup .form-error:empty { display:none }
.host-setup { background:#102528; border:1px solid #28413f; padding:14px; border-radius:8px; font-size:11px; line-height:1.8 }
.host-setup ol { padding-left:20px; margin:8px 0 }
.host-setup p { color:var(--muted); margin:8px 0 0 }
.host-setup code { color:var(--accent) }
.browser-share-setup { display:flex; flex-direction:column; gap:10px }
.browser-share-setup p { margin:0 }
.browser-node-identity { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid #29424b; background:#0d1d25; border-radius:5px; color:var(--muted); font-size:10px }
.browser-node-identity code { max-width:65%; overflow-wrap:anywhere; text-align:right }
.browser-share-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:3px }
.shared-usb-devices { border-top:1px solid #29413f; margin-top:2px; padding-top:4px }
.shared-usb-device { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #263b3d }
.shared-usb-device:last-child { border-bottom:0 }
.shared-usb-device b,.shared-usb-device small { display:block; overflow-wrap:anywhere }
.shared-usb-device small { color:var(--muted); margin-top:4px; font:9px var(--mono) }
.shared-usb-state { color:var(--accent); font-size:9px; white-space:nowrap }
.source-list-title { margin:18px 0 4px; font-size:12px }
.registered-hosts { margin:18px 0 }
.registered-host { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:12px 0 }
.registered-host-details { min-width:0; overflow-wrap:anywhere }
.registered-host>.button { flex-shrink:0 }
.registered-host small { display:block; color:var(--muted); margin-top:5px; overflow-wrap:anywhere }
#addHostForm h3 { font-size:14px }
#addHostForm .form-label { margin-top:15px }
@media(max-width:1050px) { #hostAddress { display:none } }
@media(max-width:650px) {
  .host-bar { padding:10px; gap:10px; flex-wrap:wrap }
  .host-picker { flex:1; flex-wrap:wrap }
  .host-picker select { max-width:100%; min-width:110px; font-size:11px }
  .host-picker>svg { display:none }
  .host-bar-actions { flex-wrap:wrap; width:100% }
  .pairing-code-row { flex-wrap:wrap }
  .pairing-code-row .form-input { flex-basis:100% }
  .pairing-status-row { align-items:flex-start }
}
.workbench {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);
  gap:20px;
  margin-top:27px
}
.panel {
  background:#111923;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden
}
.panel-heading {
  min-height:58px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid #24303e;
  gap:12px
}
.panel-heading h2 {
  font-size:12px
}
.panel-icon {
  color:#8ba1b6;
  display:flex
}
.panel-icon svg {
  width:16px;
  height:16px
}
.tiny-label {
  font-size:7px;
  color:#72879b;
  font-family:var(--mono);
  letter-spacing:1px;
  border:1px solid #2b3949;
  border-radius:3px;
  padding:3px 5px
}
.terminal-actions {
  display:flex;
  align-items:center;
  gap:11px
}
.target-badge {
  display:flex;
  align-items:center;
  gap:5px;
  color:#80c2b2;
  background:#19312f;
  border:1px solid #294740;
  border-radius:4px;
  padding:4px 7px;
  font-size:8px
}
.icon-button {
  width:27px;
  height:27px;
  display:inline-grid;
  place-items:center;
  flex-shrink:0;
  color:#7a8c9e;
  border-radius:4px
}
.icon-button:hover {
  background:#25303d;
  color:#d0dce5
}
.icon-button svg {
  width:14px;
  height:14px
}
.terminal-tabs {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:35px;
  border-bottom:1px solid #212c38;
  background:#0e1721;
  padding:0 18px
}
.terminal-tab {
  height:35px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:#a9bebf;
  border-bottom:1px solid var(--accent)
}
.terminal-tab .status-dot {
  width:4px;
  height:4px
}
.terminal-mode {
  font-family:var(--mono);
  font-size:8px;
  color:#617286
}
.terminal-output {
  height:184px;
  overflow:auto;
  padding:17px 19px 12px;
  font-family:var(--mono);
  font-size:10px;
  background:#0c141e;
  line-height:1.85;
  scrollbar-width:thin;
  scrollbar-color:#304053 transparent;
  overflow-wrap:anywhere
}
.terminal-welcome {
  display:flex;
  flex-direction:column;
  color:#839bad;
  line-height:2.05
}
.terminal-brand {
  color:var(--accent);
  font-size:10px;
  letter-spacing:2px;
  font-weight:500
}
.terminal-muted {
  color:#51677b;
  font-family:var(--sans);
  font-size:9px
}
.log-command {
  color:#d2dedf;
  margin:13px 0 7px;
  white-space:pre-wrap
}
.log-command>span {
  color:var(--accent);
  margin-right:8px
}
.log-result {
  margin-bottom:11px
}
.log-result-header {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  color:#7eb5de;
  font-size:9px
}
.log-result-header .log-state {
  color:var(--accent);
  font-size:8px
}
.log-result-header .log-state.error {
  color:#ef989f
}
.log-duration {
  margin-left:auto;
  color:#526a7d;
  font-size:8px
}
.log-result pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:2px 0;
  color:#aab8c7;
  font:inherit
}
.log-info {
  font-family:var(--sans);
  color:#6c8799;
  font-size:9px;
  margin:8px 0
}
.command-form {
  display:flex;
  align-items:center;
  gap:11px;
  height:46px;
  background:#101b26;
  border-top:1px solid #253340;
  padding:0 12px 0 18px
}
.prompt-symbol {
  font-family:var(--mono);
  color:var(--accent);
  font-size:16px
}
.command-form input {
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  color:#c8d7df;
  font-family:var(--mono);
  font-size:9px
}
.command-form input::placeholder {
  font-family:var(--sans);
  font-size:9px;
  color:#5e7387
}
.run-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:9px;
  color:#b4c5d2;
  border:1px solid #384b5b;
  border-radius:4px;
  background:#1c2b38;
  padding:5px 9px
}
.run-button:hover {
  border-color:var(--accent);
  color:var(--accent)
}
.run-button svg {
  width:12px;
  height:12px
}
.terminal-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 17px;
  font-size:8px;
  color:#596e82;
  border-top:1px solid #22303d;
  gap:8px
}
.keyboard-key {
  font-family:var(--mono);
  font-size:7px;
  display:inline-block;
  min-width:13px;
  line-height:13px;
  background:#18232e;
  border:1px solid #2a3848;
  border-radius:3px;
  text-align:center;
  padding:0 3px;
  margin-right:2px;
  color:#7a8ea2
}
.overview-quick-panel {
  margin-top:27px
}
.quick-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  padding:17px
}
.quick-grid button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  border:1px solid #283544;
  border-radius:7px;
  background:#15202c;
  padding:12px 13px;
  transition:background .2s,border-color .2s
}
.quick-grid button:hover {
  border-color:#4d6e79;
  background:#1a2b36
}
.quick-icon {
  display:grid;
  place-items:center;
  border-radius:6px;
  width:28px;
  height:28px;
  margin-bottom:9px
}
.quick-icon svg {
  width:15px;
  height:15px
}
.quick-grid b {
  font-size:10px;
  font-weight:500;
  margin-bottom:5px
}
.quick-grid small {
  font-size:8px;
  color:#71859a
}
.tip {
  display:flex;
  gap:10px;
  border:1px solid #293b40;
  background:#132328;
  border-radius:6px;
  margin:0 17px 15px;
  padding:10px 11px
}
.tip>svg {
  color:#72b7a8;
  height:15px;
  width:15px;
  margin-top:1px
}
.tip p {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:5px
}
.tip b {
  color:#98bdb5;
  font-size:9px;
  font-weight:500
}
.tip span {
  font-size:8px;
  line-height:1.6;
  color:#688e92
}
.page-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:21px 0 19px;
  color:#4e6477;
  font-size:8px;
  gap:15px
}
.page-footer>span:first-child {
  display:flex;
  gap:6px;
  align-items:center
}
.page-footer .status-dot {
  height:4px;
  width:4px;
  background:#598c7f
}
.footer-spark {
  color:#728b93;
  margin:0 5px
}
.content-panel {
  min-height:470px
}
.panel-toolbar {
  display:flex;
  align-items:center;
  gap:9px
}
.device-select {
  max-width:240px;
  background:#17232f;
  border:1px solid #354859;
  color:#b6cbd3;
  padding:7px 10px;
  border-radius:5px;
  font-size:10px
}
.filter-toolbar {
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 18px;
  border-bottom:1px solid var(--line)
}
.filter-toolbar .search-field {
  min-width:250px
}
.filter-toolbar .search-field input {
  width:100%
}
.checkbox-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#859bad
}
.checkbox-label input {
  accent-color:var(--accent)
}
.filter-toolbar>.icon-button:last-child {
  margin-left:auto
}
.table-scroll {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
th {
  font-weight:450;
  font-size:9px;
  color:#6c8196;
  padding:12px 22px;
  background:#0d1722;
  letter-spacing:.5px
}
td {
  padding:14px 22px;
  border-top:1px solid #1d2b39;
  font-size:11px;
  color:#a4b7c7
}
tr:hover td {
  background:#14202c
}
.align-right {
  text-align:right
}
.app-cell,.file-cell {
  display:flex;
  align-items:center;
  gap:12px;
  max-width:600px
}
.app-cell>div:last-child {
  min-width:0
}
.app-cell strong {
  font-weight:450;
  color:#d1dce6;
  display:block;
  font-size:11px;
  overflow-wrap:anywhere
}
.app-cell small {
  font-family:var(--mono);
  color:#607b92;
  font-size:9px;
  display:block;
  margin-top:4px;
  overflow-wrap:anywhere
}
.app-symbol {
  width:32px;
  height:32px;
  border-radius:8px;
  background:#25384b;
  color:#94bacd;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-family:var(--mono);
  font-size:13px
}
.type-tag {
  color:#95acae;
  font-size:9px;
  background:#1b3033;
  border:1px solid #2b4448;
  border-radius:4px;
  padding:4px 7px
}
.type-tag.system {
  background:#2b283c;
  color:#aaa2c3;
  border-color:#3c3553
}
.delete-button {
  font-size:10px;
  color:#b38c96;
  padding:6px 9px;
  border-radius:4px
}
.delete-button:hover {
  background:#402631;
  color:#eea9b7
}
.path-field {
  display:flex;
  align-items:center;
  gap:9px;
  flex:1;
  background:#0b151e;
  border:1px solid #2c3a4b;
  border-radius:5px;
  height:33px;
  padding:0 12px
}
.path-field svg {
  width:16px;
  height:16px;
  color:#819cb3
}
.path-field input {
  background:none;
  border:0;
  font-family:var(--mono);
  font-size:11px;
  color:#bdd4df;
  width:100%;
  min-width:0
}
.file-cell {
  background:none;
  text-align:left;
  padding:0;
  color:#bbcbda;
  cursor:pointer;
  font-size:11px
}
.file-cell svg {
  width:20px;
  height:20px;
  color:#7cb4cf
}
.file-cell.directory svg {
  color:#e0bb7f;
  fill:#423b2d
}
.file-name {
  overflow-wrap:anywhere
}
.table-footer {
  border-top:1px solid var(--line);
  padding:14px 22px;
  font-size:9px;
  color:#6e8397
}
.empty-state {
  grid-column:1/-1;
  padding:58px 24px;
  text-align:center;
  color:#72879a;
  font-size:12px;
  line-height:1.9
}
.empty-state h3 {
  font-size:15px;
  font-weight:500;
  color:#afc2ce;
  margin-bottom:8px
}
.empty-state p {
  font-size:11px;
  max-width:470px;
  margin:8px auto 17px
}
.empty-state>svg {
  width:35px;
  height:35px;
  margin:0 auto 8px;
  color:#4f758c
}
.empty-state.error {
  color:#d09a9f
}
.device-grid>.empty-state {
  border:1px dashed #324152;
  border-radius:8px;
  background:#101923;
  min-height:225px;
  padding:30px
}
.screen-preview {
  min-height:480px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px;
  background:radial-gradient(ellipse at center,#1a2c37,#101923 70%)
}
.screen-preview img {
  max-height:650px;
  max-width:100%;
  border:6px solid #090e15;
  border-radius:23px;
  box-shadow:0 14px 48px #0006
}
.workbench.terminal-full {
  grid-template-columns:minmax(0,1fr);
  margin-top:0
}
.terminal-full .terminal-output {
  height:470px
}
dialog {
  background:#141e29;
  border:1px solid #354656;
  color:var(--text);
  border-radius:13px;
  padding:27px;
  width:460px;
  max-width:calc(100vw - 32px);
  box-shadow:0 24px 100px #0008
}
dialog::backdrop {
  background:#030911a6;
  backdrop-filter:blur(5px)
}
dialog h2 {
  font-size:20px;
  line-height:1.5;
  margin:14px 0 10px;
  font-weight:550
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dialog-icon {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:#1b3635;
  border:1px solid #30534c;
  border-radius:10px
}
.dialog-description {
  font-size:11px;
  color:#8da2b7;
  line-height:1.9;
  white-space:pre-line;
  overflow-wrap:anywhere
}
.form-label {
  display:block;
  font-size:11px;
  color:#b5c7d3;
  margin:21px 0 9px
}
.form-input {
  width:100%;
  height:42px;
  border:1px solid #3b4c5d;
  background:#0d1721;
  color:#d3e3ec;
  border-radius:6px;
  padding:0 12px;
  font-family:var(--mono);
  font-size:12px
}
.inline-tip {
  font-size:10px;
  line-height:1.9;
  color:#839eae;
  background:#10232b;
  border:1px solid #294049;
  border-radius:6px;
  padding:12px 13px;
  margin-top:16px
}
.inline-tip code,.guide-steps code {
  color:#a5cbbb;
  font-family:var(--mono);
  font-size:10px
}
.dialog-footer {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:23px
}
.form-error {
  font-size:11px;
  color:#e49b9f;
  line-height:1.7;
  min-height:0
}
.form-error:empty {
  display:none
}
.guide-steps {
  padding-left:23px;
  margin-top:23px
}
.guide-steps li {
  padding-left:5px;
  color:var(--accent);
  margin-bottom:20px;
  font-family:var(--mono);
  font-size:12px
}
.guide-steps b {
  color:#c2d1dc;
  font-family:var(--sans);
  font-weight:500;
  font-size:12px
}
.guide-steps p {
  font-family:var(--sans);
  font-size:10px;
  line-height:1.9;
  color:#8399ad;
  margin:7px 0
}
.toast-region {
  position:fixed;
  right:26px;
  bottom:25px;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:9px;
  max-width:400px;
  pointer-events:none
}
.toast {
  display:flex;
  gap:9px;
  align-items:center;
  padding:13px 17px;
  border:1px solid #3a675b;
  border-radius:7px;
  background:#1b332f;
  box-shadow:0 6px 28px #0005;
  color:#b1e6d7;
  font-size:11px;
  animation:toast-in .2s ease-out;
  line-height:1.6
}
.toast.error {
  background:#3d262e;
  border-color:#724451;
  color:#eeb9c0
}
.toast svg {
  width:16px;
  height:16px
}
.spin {
  animation:rotate 1s linear infinite
}
@keyframes rotate {
  to {
    transform:rotate(360deg)
  }
}
@keyframes toast-in {
  from {
    transform:translateY(7px);
    opacity:0
  }
  to {
    transform:translateY(0);
    opacity:1
  }
}
@media(min-width:1550px) {
  main {
    padding:38px 44px 0
  }
  .device-information {
    padding:23px 20px;
    gap:17px
  }
  .device-name {
    font-size:15px
  }
  .device-card-top {
    padding:17px 20px 0
  }
  .device-metrics {
    padding:0 20px 20px
  }
  .device-card {
    min-height:243px
  }
  .terminal-output {
    height:225px
  }
  .quick-grid button {
    padding:17px
  }
  .stat-card {
    min-height:140px;
    padding:22px
  }
  .stat-card strong {
    font-size:33px
  }
  .page-heading {
    margin-bottom:32px
  }
}
@media(max-width:1250px) {
  .sidebar {
    width:195px;
    padding-left:12px;
    padding-right:12px
  }
  .brand {
    font-size:20px
  }
  .main-shell {
    margin-left:195px
  }
  .local-profile {
    margin-left:-12px;
    margin-right:-12px;
    padding:18px 15px
  }
  .topbar {
    padding:0 25px
  }
  main {
    padding:28px 25px 0
  }
  .device-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .device-information {
    padding-top:16px;
    padding-bottom:16px
  }
  .device-card {
    min-height:208px
  }
  .device-name {
    font-size:14px
  }
  .stats-grid {
    gap:11px
  }
  .stat-card {
    padding:16px 13px
  }
  .stat-icon {
    width:29px;
    height:29px
  }
  .stat-card small {
    font-size:8px
  }
  .workbench {
    grid-template-columns:minmax(0,1.4fr) minmax(275px,1fr);
    gap:15px
  }
  .section-title>.subtle {
    display:none
  }
  .quick-panel .panel-heading>.subtle {
    display:none
  }
  .terminal-output {
    height:199px
  }
}
@media(max-width:950px) {
  .sidebar {
    width:74px;
    padding:28px 10px 0
  }
  .brand {
    padding:0;
    justify-content:center
  }
  .brand>span:last-child,.workspace-label,.nav-item>span,.sidebar-note,.local-profile,.sidebar-bottom,.key-hint {
    display:none
  }
  .brand-mark {
    margin-bottom:37px
  }
  .main-nav .nav-item {
    font-size:0;
    justify-content:center;
    gap:0;
    padding:0;
    height:48px
  }
  .main-nav .nav-item svg {
    width:20px;
    height:20px
  }
  .main-shell {
    margin-left:74px
  }
  .stats-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .stat-icon {
    display:none
  }
  .workbench {
    grid-template-columns:1fr
  }
  .terminal-output {
    height:210px
  }
  .quick-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .quick-panel .tip {
    margin-top:0
  }
  .device-tools {
    gap:10px
  }
  .quick-grid button {
    padding:12px
  }
  .panel-toolbar {
    gap:6px
  }
  .device-select {
    max-width:180px
  }
  .section-heading .search-field {
    min-width:160px
  }
  .section-heading .search-field input {
    width:140px
  }
  .page-heading h1 {
    font-size:24px
  }
}
@media(max-width:650px) {
  .sidebar {
    position:fixed;
    inset:auto 0 0;
    width:100%;
    height:63px;
    padding:5px 8px;
    background:#101922f5;
    backdrop-filter:blur(15px);
    border-right:0;
    border-top:1px solid var(--line)
  }
  .brand {
    display:none
  }
  .main-nav {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:3px;
    width:100%
  }
  .main-nav .nav-item {
    font-size:8px;
    flex-direction:column;
    gap:4px;
    padding:5px;
    height:51px
  }
  .main-nav .nav-item svg {
    width:18px;
    height:18px
  }
  .main-shell {
    margin-left:0
  }
  .topbar {
    height:57px;
    padding:0 18px
  }
  .topbar-right {
    gap:12px
  }
  .topbar-divider,.top-avatar {
    display:none
  }
  .breadcrumb {
    font-size:10px;
    gap:8px
  }
  .topbar .text-button {
    font-size:9px
  }
  .environment-badge {
    font-size:8px
  }
  main {
    padding:25px 16px 65px
  }
  .page-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin-bottom:24px
  }
  .heading-actions {
    align-self:flex-end;
    padding-top:0;
    margin-top:0
  }
  .eyebrow {
    font-size:8px
  }
  .page-heading h1 {
    font-size:26px
  }
  .page-heading p {
    font-size:10px
  }
  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:25px
  }
  .stat-icon {
    display:grid
  }
  .stat-card {
    min-height:113px
  }
  .stat-card strong {
    font-size:27px;
    margin:3px 0
  }
  .section-heading {
    flex-wrap:wrap;
    gap:12px
  }
  .device-tools {
    width:100%;
    justify-content:space-between
  }
  .device-grid {
    gap:10px
  }
  .device-card-top {
    padding:12px 12px 0
  }
  .device-information {
    padding:16px 11px;
    gap:9px
  }
  .device-illustration {
    width:23px;
    height:40px
  }
  .device-name {
    font-size:11px
  }
  .device-tags {
    gap:4px;
    font-size:7px
  }
  .connection-tag {
    font-size:7px;
    gap:2px
  }
  .device-metrics {
    padding:0 11px 14px;
    gap:9px
  }
  .metric-row {
    font-size:7px
  }
  .metric-row b {
    font-size:7px
  }
  .device-card {
    min-height:198px
  }
  .device-card-footer {
    padding:10px 10px;
    font-size:7px
  }
  .device-card-footer button {
    font-size:7px
  }
  .workbench, .overview-quick-panel {
    margin-top:22px
  }
  .quick-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .terminal-output {
    font-size:9px;
    height:210px
  }
  .terminal-mode {
    font-size:7px
  }
  .panel-heading {
    padding:0 13px
  }
  .terminal-footer {
    font-size:7px;
    padding:9px 12px
  }
  .page-footer>span:last-child {
    display:none
  }
  .content-panel>.panel-heading {
    padding:13px;
    align-items:flex-start;
    flex-direction:column
  }
  .panel-toolbar {
    width:100%;
    flex-wrap:wrap
  }
  .device-select {
    flex:1;
    max-width:none;
    min-width:130px
  }
  .filter-toolbar {
    padding:12px;
    gap:8px;
    flex-wrap:wrap
  }
  .filter-toolbar .search-field {
    min-width:160px;
    flex:1
  }
  .checkbox-label {
    font-size:9px
  }
  .path-field {
    min-width:140px
  }
  .table-scroll th,.table-scroll td {
    padding:13px 12px
  }
  .file-cell {
    min-width:130px
  }
  .app-cell {
    min-width:190px
  }
  td {
    font-size:10px
  }
  .app-cell strong {
    font-size:10px
  }
  .app-cell small {
    font-size:8px
  }
  .screen-preview {
    padding:20px
  }
  .toast-region {
    bottom:79px;
    left:16px;
    right:16px;
    max-width:none
  }
  .terminal-full .terminal-output {
    height:360px
  }
  .terminal-full {
    margin-top:0
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
.device-card {
  display:flex;
  flex-direction:column
}
.device-card-footer {
  margin-top:auto
}
.device-card:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
.nav-new {
  margin-left:auto;
  color:#668c90;
  font:8px var(--mono)
}
.device-footer-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}
.device-footer-actions>button:first-child {
  color:#83c5b6
}
.terminal-scope {
  display:flex;
  align-items:center;
  align-self:stretch;
  gap:15px;
  flex-shrink:0
}
.scope-button {
  color:#6f859a;
  font-size:9px;
  padding:0 2px;
  border-bottom:2px solid transparent
}
.scope-button.active {
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.terminal-tabs {
  gap:12px;
  height:39px
}
.terminal-device-select {
  font-size:8px;
  padding:3px 5px;
  max-width:195px;
  background:#12202a;
  border-color:#2b4148;
  margin-left:auto;
  height:25px
}
.terminal-mode {
  white-space:nowrap
}
.control-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:408px
}
.control-visual {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:28px;
  background:radial-gradient(ellipse at 50% 38%,#1b3639,#101b26 70%);
  border-right:1px solid var(--line)
}
.mirror-illustration {
  position:relative;
  width:205px;
  height:127px;
  margin:10px 0 18px
}
.mirror-desktop {
  position:absolute;
  top:0;
  left:0;
  width:170px;
  height:101px;
  border-radius:8px;
  border:1px solid #517c78;
  background:linear-gradient(135deg,#284643,#162c35);
  box-shadow:0 12px 36px #0003;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:9px
}
.mirror-desktop:after {
  content:'';
  position:absolute;
  bottom:-12px;
  left:65px;
  width:38px;
  height:11px;
  background:#2c464b;
  border-bottom:2px solid #789b96;
  clip-path:polygon(35% 0,65% 0,75% 85%,100% 85%,100% 100%,0 100%,0 85%,25% 85%)
}
.mirror-desktop svg {
  height:29px;
  width:29px;
  stroke-width:1;
  color:var(--accent)
}
.mirror-desktop span {
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:1.4px;
  color:#6b9c96
}
.mirror-phone {
  position:absolute;
  right:8px;
  bottom:5px;
  width:43px;
  height:81px;
  display:grid;
  place-items:center;
  border:1px solid #7893a8;
  border-radius:7px;
  transform:rotate(8deg);
  background:linear-gradient(135deg,#355d68,#1b2c45);
  box-shadow:0 8px 14px #0005;
  z-index:1;
  color:#a2c5c7
}
.mirror-phone svg {
  width:29px;
  height:43px;
  stroke-width:1
}
.mirror-link {
  position:absolute;
  right:46px;
  bottom:28px;
  border-bottom:1px dashed #66dec38a;
  width:46px;
  transform:rotate(-10deg)
}
.control-visual>.eyebrow {
  font-size:8px;
  letter-spacing:1.5px;
  color:#6e9599;
  margin-top:4px
}
.control-visual>h2 {
  font-size:19px;
  margin:6px 0 10px;
  font-weight:500
}
.control-visual>p {
  text-align:center;
  font-size:11px;
  line-height:1.9;
  color:#7d96a7;
  margin:0 0 18px
}
.mirror-status {
  font-family:var(--mono);
  font-size:9px;
  border:1px solid #30434d;
  background:#152630;
  color:#91a8b5;
  padding:6px 11px;
  border-radius:5px;
  max-width:100%;
  overflow-wrap:anywhere
}
.mirror-status.running {
  color:var(--accent);
  border-color:#397166;
  background:#193a35
}
.control-options {
  padding:28px 30px;
  background:#131e2a
}
.control-options>.section-title {
  margin-bottom:22px
}
.control-options h2 {
  font-size:12px
}
.option-field {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:10px;
  color:#8ea4b8;
  margin-bottom:17px
}
.option-field select {
  background:#0e1925;
  border:1px solid #344658;
  border-radius:5px;
  min-height:36px;
  padding:0 10px;
  color:#c1d0dc;
  font-size:11px;
  width:100%
}
.option-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.mirror-check {
  margin-bottom:12px;
  font-size:10px;
  align-items:flex-start;
  line-height:1.7
}
.mirror-check input {
  margin:2px 4px 0 0
}
.mirror-buttons {
  display:flex;
  gap:9px;
  margin-top:22px;
  flex-wrap:wrap
}
.control-note {
  font-size:9px;
  line-height:1.8;
  color:#6e8b9e;
  margin:14px 0 0
}
.sessions-panel {
  margin-top:22px
}
.session-list>.empty-state {
  padding:35px 24px;
  font-size:11px
}
.session-row {
  padding:17px 23px;
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid #23323f
}
.session-row:last-child {
  border-bottom:0
}
.session-symbol {
  width:35px;
  height:35px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:#1b3738;
  color:var(--accent)
}
.session-symbol svg {
  width:19px;
  height:19px
}
.session-name {
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:0
}
.session-name b {
  font-size:12px;
  font-weight:500
}
.session-name>span {
  font:9px var(--mono);
  color:#7392a3;
  overflow-wrap:anywhere
}
.session-details {
  font-size:10px;
  color:#7390a3
}
.session-running {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--accent);
  margin:0 9px
}
.session-running .status-dot {
  width:5px;
  height:5px
}
.detail-actions {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:19px
}
.detail-actions button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:13px 8px;
  border-radius:6px;
  border:1px solid #334959;
  background:#1b2b38;
  color:#bad0db;
  font-size:10px
}
.detail-actions button:hover {
  background:#22413f;
  border-color:#548e7c;
  color:var(--accent)
}
.detail-actions svg {
  width:19px;
  height:19px
}
@media(max-width:1250px) {
  .terminal-tabs .terminal-mode {
    display:none
  }
  .terminal-device-select {
    max-width:210px
  }
  .control-options {
    padding:25px
  }
  .control-layout {
    grid-template-columns:.95fr 1fr
  }
}
@media(max-width:950px) {
  .control-layout {
    grid-template-columns:1fr 1fr
  }
  .control-options {
    padding:21px
  }
  .mirror-buttons .button {
    font-size:9px;
    padding:0 10px
  }
  .session-details {
    display:none
  }
  .device-footer-actions {
    gap:8px
  }
}
@media(max-width:650px) {
  .main-nav {
    grid-template-columns:repeat(6,1fr)
  }
  .control-layout {
    grid-template-columns:1fr
  }
  .control-visual {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:24px
  }
  .control-options {
    padding:23px
  }
  .control-main>.panel-heading {
    padding:15px;
    flex-direction:column;
    align-items:flex-start
  }
  .sessions-panel .panel-heading>.subtle {
    display:none
  }
  .session-row {
    gap:9px;
    padding:15px 12px;
    flex-wrap:wrap
  }
  .session-name b {
    font-size:11px
  }
  .session-name>span {
    font-size:8px
  }
  .session-running {
    font-size:8px;
    margin:0
  }
  .session-symbol {
    width:27px;
    height:31px
  }
  .session-row .button {
    font-size:9px;
    padding:0 7px
  }
  .terminal-scope {
    gap:9px
  }
  .terminal-tabs {
    padding:0 12px;
    gap:7px
  }
  .terminal-device-select {
    max-width:155px;
    font-size:7px
  }
  .terminal-tabs .terminal-mode {
    display:none
  }
  .device-card-footer {
    align-items:flex-start;
    gap:8px;
    flex-direction:column
  }
  .device-footer-actions {
    justify-content:space-between;
    width:100%
  }
  .device-card {
    min-height:220px
  }
  .device-card-footer>span {
    max-width:100%
  }
  .device-footer-actions>button {
    font-size:8px
  }
  .mirror-buttons .button {
    font-size:11px
  }
  .detail-actions {
    grid-template-columns:repeat(3,1fr)
  }
}

/* Live Logcat workspace */
.logcat-panel { overflow: hidden; }
.logcat-heading { min-height: 62px; }
.log-live-badge { font-size: 9px; color: #8297aa; border: 1px solid #334354; padding: 4px 8px; border-radius: 4px; background: #172431; }
.log-live-badge.live { color: var(--accent); border-color: #315a51; background: #18352f; }
.log-live-badge.live::before { content: ''; display: inline-block; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-right: 6px; }
.log-live-badge.error { color: #ef9aa7; background: #3a232d; border-color: #69404b; }
.log-select, .log-input { min-width: 0; max-width: 100%; height: 33px; border: 1px solid #304253; background: #101c27; color: #b8cedb; border-radius: 5px; padding: 0 10px; font-size: 10px; }
.log-filter-grid { display: grid; grid-template-columns: .9fr 1.2fr 1.4fr 1fr; gap: 15px; padding: 19px 20px 15px; }
.log-filter-grid>label { display: flex; flex-direction: column; gap: 8px; font-size: 10px; color: #788fa3; min-width: 0; }
.log-filter-grid .log-input, .log-filter-grid .log-select { width: 100%; }
.log-process-control { display: flex; align-items: center; gap: 5px; min-width: 0; }
.log-process-control select { min-width: 0; flex: 1; }
.log-query-area { padding: 0 20px 15px; border-bottom: 1px solid var(--line); }
.log-query-box { display: flex; align-items: center; gap: 9px; padding: 0 11px; height: 39px; background: #0d1823; border: 1px solid #3c5466; border-radius: 6px; }
.log-query-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px #65ddc20a; }
.log-query-box>svg { color: #738fa6; width: 16px; height: 16px; }
.log-query-box>input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; color: #d1e2ec; font: 11px var(--mono); }
.log-query-box>input::placeholder { font-family: var(--sans); font-size: 10px; color: #577388; }
.log-query-box .icon-button { width: 23px; }
.log-toggle { position: relative; display: flex; cursor: pointer; flex-shrink: 0; }
.log-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.log-toggle span { display: grid; place-items: center; border: 1px solid #304555; border-radius: 4px; width: 25px; height: 24px; font: 11px var(--mono); color: #7993a8; }
.log-toggle input:checked+span { background: #1e463e; border-color: #4b8a79; color: var(--accent); }
.log-toggle input:focus-visible+span { outline: 2px solid var(--accent); outline-offset: 2px; }
.log-query-extras { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 11px; flex-wrap: wrap; }
.log-presets { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.log-presets>span { font-size: 8px; color: #526e83; margin-right: 3px; }
.log-presets button { border: 1px solid #2a3c4b; border-radius: 4px; padding: 4px 7px; font-size: 9px; color: #8da9ba; background: #16232f; }
.log-presets button:hover { color: var(--accent); border-color: #427064; background: #19372f; }
.log-saved-controls { display: flex; align-items: center; gap: 11px; }
.log-saved-controls .text-button { font-size: 9px; }
.log-saved-controls .log-select { max-width: 145px; height: 27px; font-size: 9px; }
.log-filter-error { font-size: 10px; line-height: 1.8; color: #eea4ad; background: #3c232b; border: 1px solid #613441; padding: 7px 10px; border-radius: 5px; margin-top: 8px; }
.log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 20px; background: #101a25; border-bottom: 1px solid #263848; }
.log-toolbar>div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-toolbar .button { min-height: 28px; font-size: 9px; padding: 0 9px; }
.log-toolbar .button svg { width: 12px; height: 12px; }
.log-toolbar .checkbox-label { white-space: nowrap; font-size: 9px; }
.log-viewport { position: relative; height: min(52vh,560px); min-height: 330px; overflow: auto; scrollbar-width: thin; scrollbar-color: #395064 #0b141e; background: #0b141e; font: 10px var(--mono); outline-offset: -2px; }
.log-column-head, .log-row { display: grid; grid-template-columns: 155px 95px 38px 150px 170px minmax(340px,1fr); min-width: 1050px; width: 100%; }
.log-column-head { position: sticky; top: 0; z-index: 2; height: 31px; align-items: center; color: #6e8b9f; background: #142332; border-bottom: 1px solid #2d4150; font-family: var(--sans); font-size: 9px; }
.log-column-head>span, .log-row>span { padding: 0 9px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.log-column-head>span:first-child, .log-row>span:first-child { padding-left: 16px; }
.log-rows { position: relative; min-width: 1050px; }
.log-row { position: absolute; height: 25px; line-height: 25px; align-items: center; cursor: pointer; color: #93a8b9; border-bottom: 1px solid #192b382b; }
.log-row:nth-child(even) { background: #11223144; }
.log-row:hover { background: #1c3346; }
.log-row.selected { background: #203e48; box-shadow: inset 2px 0 var(--accent); }
.log-row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.log-time { color: #526e82; font-size: 9px; }
.log-pid { color: #658799; font-size: 9px; }
.log-tag { color: #83afd2; }
.log-process { color: #718fa4; font-size: 9px; }
.log-level b { display: inline-grid; place-items: center; min-width: 18px; height: 17px; border-radius: 3px; background: #29343c; font-size: 9px; font-weight: 500; }
.level-V .log-level b { color: #8192a4; background: #24313d; }
.level-D .log-level b { color: #80b6e9; background: #203b56; }
.level-I .log-level b { color: #88d6bf; background: #203b35; }
.level-W .log-level b { color: #e3bf7e; background: #473d28; }
.level-E .log-level b, .level-F .log-level b { color: #ffacb8; background: #562a37; }
.level-W .log-message { color: #dab985; }
.level-E .log-message, .level-F .log-message { color: #e798a7; }
.level-F { background: #4223304d!important; }
.log-empty { position: sticky; left: 0; width: 100%; text-align: center; color: #688197; padding: 70px 25px; line-height: 1.9; font-family: var(--sans); font-size: 11px; }
.log-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; border-top: 1px solid #2a3a49; font-size: 9px; color: #6c8699; background: #121d29; flex-wrap: wrap; }
.log-bottom-bar>span:first-child { color: #96b0c1; }
.log-detail-panel { border-top: 1px solid #486275; background: #101c28; }
.log-detail-heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid #263c4b; gap: 12px; }
.log-detail-heading>span { font: 10px var(--mono); color: #acc7d5; overflow-wrap: anywhere; }
.log-detail-heading>div { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.log-detail-heading .text-button { font-size: 9px; }
.log-detail-panel pre { padding: 12px 18px; margin: 0; font: 11px/1.9 var(--mono); color: #c1d4df; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.log-query-examples { display: flex; flex-direction: column; margin-top: 18px; gap: 6px; }
.log-query-examples code { color: var(--accent); background: #0c1d26; border: 1px solid #2c444f; padding: 9px 11px; border-radius: 5px; font: 10px/1.8 var(--mono); white-space: normal; overflow-wrap: anywhere; }
.log-query-examples>span { font-size: 10px; color: #768fa4; margin: 0 0 8px 4px; }
.tool-settings-fields { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.tool-path-status { margin: 8px 0 20px; color: var(--muted); font: 11px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
#toolSettingsDialog { width: min(610px, calc(100vw - 32px)); }
.tool-path-input, .tool-browse-path { display: flex; gap: 8px; align-items: center; }
.tool-path-input input, .tool-browse-path input { flex: 1; min-width: 0; }
.tool-path-input button, .tool-browse-path button { flex-shrink: 0; white-space: nowrap; }
#toolBrowseDialog { width: min(760px, calc(100vw - 32px)); }
.tool-browse-path { margin: 18px 0 12px; }
.tool-browse-path input { font: 11px var(--mono); }
.tool-browser { display: grid; grid-template-columns: 150px 1fr; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tool-browse-roots { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-right: 1px solid var(--border); overflow-y: auto; max-height: 320px; }
.tool-browse-entries { min-height: 240px; max-height: 320px; overflow: auto; padding: 8px; }
.tool-browse-roots button, .tool-browse-entry { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 5px; padding: 10px; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.tool-browse-roots button:hover, .tool-browse-entry:hover { background: #19323c; }
.tool-browse-entry svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.tool-browse-entry span { overflow-wrap: anywhere; }
.tool-browse-entry small { margin-left: auto; color: var(--muted); white-space: nowrap; }
.tool-browse-entries .subtle { padding: 12px; }
#toolBrowseStatus { margin-bottom: 0; }
@media(max-width:650px) { .tool-browser { grid-template-columns: 100px 1fr; } .tool-browse-roots { padding: 4px; } .tool-browse-entry { gap: 6px; padding: 8px 4px; } .tool-browse-entry small { display: none; } }
@media(max-width:1250px) { .logcat-heading { flex-wrap: wrap; padding: 14px 18px; gap: 12px; } .log-filter-grid { gap: 11px; grid-template-columns: 1fr 1.2fr; } }
@media(max-width:950px) { .logcat-heading .device-select { max-width: 190px; } .log-query-extras { gap: 10px; } .log-bottom-bar>span:last-child { display: none; } }
@media(max-width:650px) {
  .main-nav { grid-template-columns: repeat(7,1fr); }
  .main-nav .nav-item { font-size: 7px; }
  .logcat-heading { padding: 13px; align-items: flex-start; }
  .logcat-heading .panel-toolbar { gap: 7px; }
  .logcat-heading .device-select { min-width: 0; max-width: none; flex: 1 1 100%; }
  .logcat-heading .log-select { flex: 1; }
  .log-filter-grid { padding: 15px 13px 12px; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .log-query-area { padding: 0 13px 13px; }
  .log-query-box { gap: 7px; padding: 0 8px; }
  .log-query-box>input { font-size: 10px; }
  .log-query-extras { gap: 12px; }
  .log-presets { gap: 5px; }
  .log-presets>span { display: none; }
  .log-presets button { font-size: 8px; padding: 5px 6px; }
  .log-saved-controls { width: 100%; }
  .log-saved-controls .log-select { flex: 1; max-width: none; }
  .log-toolbar { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .log-toolbar .button { font-size: 8px; gap: 5px; padding: 0 7px; }
  .log-viewport { height: 385px; }
  .log-bottom-bar { font-size: 8px; padding: 11px 13px; gap: 8px; }
  .log-detail-heading { align-items: flex-start; padding: 9px 12px; }
  .log-detail-heading>span { font-size: 9px; }
  .log-detail-panel pre { font-size: 10px; }
}