/* ================================================================
   NetDesk design system — enterprise dark, RustDesk/TeamViewer-style
   ================================================================ */
:root {
  --bg: #0b0e14;
  --bg2: #11151f;
  --bg3: #171d2a;
  --bg4: #1d2536;
  --fg: #e8edf6;
  --muted: #8b95a9;
  --faint: #5d6777;
  --accent: #3d7eff;
  --accent-h: #5c93ff;
  --accent-dim: rgba(61, 126, 255, .14);
  --ok: #2fbf71;
  --warn: #f5a524;
  --danger: #e5484d;
  --danger-h: #f2666b;
  --border: #222b3d;
  --border-soft: #1a2233;
  --shadow: 0 12px 40px rgba(0, 0, 0, .5);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}
/* light (corporate) theme - TeamViewer-style */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --bg2: #ffffff;
  --bg3: #f0f3f8;
  --bg4: #e4e9f2;
  --fg: #17202f;
  --muted: #5b6577;
  --faint: #98a1b3;
  --border: #d9e0ea;
  --border-soft: #e7ebf2;
  --accent-dim: rgba(61, 126, 255, .10);
  --shadow: 0 12px 40px rgba(23, 32, 47, .12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
svg.ic { width: 16px; height: 16px; display: block; }

/* ================= connect screen : split layout ================= */
#screenConnect { min-height: 100vh; }

.brand-pane {
  flex: 1.1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(61, 126, 255, .16), transparent 60%),
    radial-gradient(700px 500px at 110% 115%, rgba(47, 191, 113, .10), transparent 60%),
    var(--bg2);
  border-right: 1px solid var(--border-soft);
}
.brand-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.brand-logo h1 { font-size: 26px; font-weight: 600; letter-spacing: .2px; }
.brand-tag { font-size: 22px; font-weight: 600; line-height: 1.3; max-width: 460px; margin-bottom: 10px; }
.brand-sub { color: var(--muted); max-width: 440px; margin-bottom: 30px; }
.brand-feats { display: flex; flex-direction: column; gap: 12px; }
.feat { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); max-width: 440px; }
.feat .fic {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent-h);
  display: flex; align-items: center; justify-content: center;
}
.feat b { color: var(--fg); font-weight: 600; display: block; font-size: 13.5px; }
.feat span { font-size: 12.5px; }
.brand-foot { margin-top: 40px; color: var(--faint); font-size: 12px; }

.form-pane {
  flex: 1;
  min-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
}
.card {
  width: 400px;
  max-width: 96vw;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow);
}
.card .logo { display: none; }
.card h2 { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.card .sub { color: var(--muted); margin-bottom: 18px; font-size: 13px; }

label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; }
input[type=text], input[type=password], input:not([type]) {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input::placeholder { color: var(--faint); }
.pw-wrap { display: flex; gap: 6px; }
.pw-wrap input { flex: 1; }
.row { display: flex; gap: 10px; }
.grow { flex: 1; }
#inId { font-size: 17px; letter-spacing: 2px; font-variant-numeric: tabular-nums; font-weight: 600; }
.chk {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 400; margin: 10px 0; cursor: pointer; user-select: none;
}
.chk input { accent-color: var(--accent); width: 14px; height: 14px; }

button.primary {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(180deg, #4b88ff, #2f6ef2);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(61, 126, 255, .35);
  transition: background .12s, filter .12s, transform .06s;
}
button.primary:hover { filter: brightness(1.07); }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { opacity: .55; cursor: wait; }

.ghost {
  background: var(--bg3);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ghost:hover { color: var(--fg); border-color: var(--accent); }

.error {
  margin-top: 12px;
  background: rgba(229, 72, 77, .10);
  border: 1px solid rgba(229, 72, 77, .45);
  color: #f6a9ac;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.hint { margin-top: 16px; color: var(--faint); font-size: 12px; line-height: 1.55; }
.hint code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; }
.foot { color: var(--faint); font-size: 12px; }
.form-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--accent); }
body, .card, #toolbar, .panel { transition: background-color .18s, border-color .18s, color .18s; }
#toolbar { background: var(--bg2); }

/* address book */
#abookWrap { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ab-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; }
.ab-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.ab-row:hover { background: var(--bg3); }
.ab-ava {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent-h);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.ab-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-id { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.ab-shared { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 999px; background: rgba(77,139,255,.16); color: #9cc0ff; vertical-align: 1px; }
.ab-row .tb { padding: 3px 7px; }

/* ================= session screen ================= */
#screenSession { height: 100vh; display: flex; flex-direction: column; }
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #151a26, #10141d);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  min-height: 46px;
  z-index: 30;
}
.tb-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.tb-title { font-weight: 600; margin-right: 4px; font-size: 13.5px; }
.state { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.state.ok::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.state.warn::before { background: var(--warn); }
.state.err::before { background: var(--danger); }
.tb {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0 9px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  white-space: nowrap;
}
.tb:hover { background: var(--bg3); border-color: var(--border); }
.tb:active { background: var(--bg4); }
.tb.active { background: var(--accent-dim); color: var(--accent-h); border-color: rgba(61, 126, 255, .45); }
.tb.danger:hover { background: rgba(229, 72, 77, .12); color: var(--danger-h); border-color: rgba(229, 72, 77, .4); }
.tb.rec-on { color: var(--danger-h); }
.tb.rec-on:hover { background: rgba(229, 72, 77, .12); }
select {
  height: 30px;
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 8px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
select:hover { border-color: var(--accent); }
.stats { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#tbStats { background: var(--bg3); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 4px 10px; }
:root[data-theme="light"] .brand-pane {
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(61, 126, 255, .12), transparent 60%),
    radial-gradient(700px 500px at 110% 115%, rgba(47, 191, 113, .08), transparent 60%),
    var(--bg2);
}
:root[data-theme="light"] #stage { background: #10141d; }

#stage { position: relative; flex: 1; overflow: hidden; background: #05070c; }
#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: none;
}
#canvas.viewonly { cursor: default; }
.banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(229, 72, 77, .14);
  border: 1px solid rgba(229, 72, 77, .5);
  color: #fecaca;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  z-index: 20;
  max-width: 80%;
  backdrop-filter: blur(6px);
}
.banner.info { background: rgba(61, 126, 255, .14); border-color: rgba(61, 126, 255, .5); color: #cfe1ff; }
#dropHint {
  position: absolute;
  inset: 14px;
  border: 2px dashed var(--accent);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent-h);
  background: rgba(61, 126, 255, .08);
  z-index: 25;
  pointer-events: none;
}

/* ================= panels ================= */
.panel {
  position: absolute;
  top: 54px;
  right: 12px;
  width: 470px;
  max-width: calc(100vw - 24px);
  max-height: calc(100% - 70px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  z-index: 40;
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13.5px;
}
.file-path { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.file-path input { flex: 1; font-size: 12.5px; }
.file-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.file-row:hover { background: var(--bg3); }
.file-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.file-row .acts { display: none; gap: 2px; }
.file-row:hover .acts { display: flex; }
.file-row .acts button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px; }
.file-row .acts button:hover { color: var(--fg); background: var(--bg4); }
.panel-foot { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-soft); align-items: center; }
.panel-foot input { flex: 1; min-width: 0; font-size: 12.5px; }
#fileStatus { white-space: nowrap; }

.chat-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.chat-msg {
  max-width: 85%;
  background: var(--bg3);
  border-radius: 10px 10px 10px 3px;
  padding: 7px 11px;
  font-size: 13px;
  word-wrap: break-word;
}
.chat-msg.me { align-self: flex-end; background: var(--accent-dim); border-radius: 10px 10px 3px 10px; }
.chat-msg .who { font-size: 10.5px; color: var(--muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px; }
.chat-input { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-soft); }

.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.sys-grid .tb { background: var(--bg3); border-color: var(--border); height: 36px; justify-content: center; }
.sys-grid .tb:hover { border-color: var(--accent); }

.proc-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; border-top: 1px solid var(--border-soft); margin-top: 4px; }
#procList { max-height: 200px; }

/* collapsible panel sections (TeamViewer-style) */
details.sec { border-top: 1px solid var(--border-soft); }
details.sec:first-of-type { border-top: 0; }
details.sec > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  transition: color .12s, background .12s;
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary:hover { color: var(--fg); background: var(--bg3); }
details.sec[open] > summary { color: var(--accent-h); }
details.sec .chev { margin-left: auto; transition: transform .15s; color: var(--faint); }
details.sec[open] .chev { transform: rotate(180deg); }
details.sec summary .tb { padding: 2px 8px; font-size: 12px; }
#sysPanel { width: 380px; }
.panel-head { cursor: grab; }
.panel-head:active { cursor: grabbing; }

/* ================= portal ================= */
body.portal { min-height: 100vh; }
body.console { display: flex; min-height: 100vh; }
.side {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.side-sub { color: var(--muted); font-size: 11px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-it {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  transition: background .1s, color .1s; border: 0; background: transparent;
  font-family: inherit; cursor: pointer; text-align: left; width: 100%;
}
.nav-it:hover { background: var(--bg3); color: var(--fg); }
.nav-it.on { background: var(--accent-dim); color: var(--accent-h); }
.side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.mainc { flex: 1; min-width: 0; padding: 22px 24px 48px; max-width: 1100px; }
.keyrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.keyrow:last-child { border-bottom: 0; }
.key-l { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.key-v { font-size: 13px; word-break: break-all; }
@media (max-width: 900px) { .side { display: none; } }
.portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.portal-main { max-width: 1060px; margin: 0 auto; padding: 22px 16px 48px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; text-align: center; }
.stat-n { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-l { color: var(--muted); font-size: 11.5px; margin-top: 2px; text-transform: uppercase; letter-spacing: .6px; }
.p-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 20px; }
.p-card h2 { font-size: 12.5px; margin-bottom: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; }
.p-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) {
  .p-cols { grid-template-columns: 1fr; }
  .brand-pane { display: none; }
  .form-pane { min-width: 0; }
}
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 7px 8px; border-bottom: 1px solid var(--border); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.tbl td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); }
.tbl tr:hover td { background: var(--bg3); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.dot.off { background: var(--faint); }
a.connect { text-decoration: none; color: var(--accent-h); border: 1px solid rgba(61, 126, 255, .45); background: var(--accent-dim); }
a.tb { color: var(--fg); text-decoration: none; }
.feed { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.feed-row { display: flex; gap: 10px; font-size: 13px; }
.feed-row .stats { flex-shrink: 0; }
.feed-row.kind-auth-fail, .feed-row.kind-deny { color: #f6a9ac; }
.feed-row.kind-session { color: #a9c9ff; }
.dl-row { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-sm); color: var(--fg); text-decoration: none; }
.dl-row:hover { background: var(--bg3); }
.dl-row .name { flex: 1; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.muted code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; }

/* ================= scrollbars ================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 5px; border: 2px solid var(--bg2); }
::-webkit-scrollbar-thumb:hover { background: var(--border); }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 760px) {
  #screenConnect { flex-direction: column; }
  .brand-pane { display: none; }
  .form-pane { padding: 16px; }
}

/* auth modal + account chip + fullscreen pill */
.modal-wrap { position: fixed; inset: 0; background: rgba(5,7,12,.7); backdrop-filter: blur(4px);
  z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-wrap[hidden] { display: none; }
.modal-card { width: 360px; max-width: 94vw; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px; position: relative; box-shadow: var(--shadow); }
.modal-x { position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--muted); font-size: 15px; cursor: pointer; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.atab { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  padding: 8px 4px; border-radius: var(--r-sm); cursor: pointer; font-size: 12.5px; font-family: inherit; }
.atab.on { background: var(--accent-dim); color: var(--accent-h); border-color: rgba(61,126,255,.45); }
.apane { display: flex; flex-direction: column; gap: 10px; }
.apane[hidden] { display: none; }
.apane .primary { margin-top: 2px; }
.auok { margin-top: 12px; background: rgba(47,191,113,.12); border: 1px solid rgba(47,191,113,.45);
  color: #8fe6bd; padding: 9px 12px; border-radius: var(--r-sm); font-size: 12.5px; }
#authChip { display: inline-flex; align-items: center; gap: 6px; }
#authChip .tb { padding: 2px 8px; font-size: 11.5px; }
.fs-pill { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 45;
  background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px;
  font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  font-family: inherit; }
#toolbar.autohide { transform: translateY(-110%); transition: transform .25s ease; }
#toolbar { transition: transform .25s ease; }

.plan-strip { display: flex; gap: 8px; align-items: center; justify-content: center;
  margin-top: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.dotsep { color: var(--faint); }
.linkbtn { background: none; border: 0; color: var(--accent-h); cursor: pointer;
  font-size: 12px; padding: 0; text-decoration: underline; font-family: inherit; }
#tbStats.limit-warn { color: #f6a9ac; }

/* ================= RustDesk-style landing ================= */
.topnote { background: #eaf2ff; color: #1e3a6e; text-align: center;
  padding: 9px 16px; font-size: 13.5px; border-bottom: 1px solid #d6e4ff; }
:root[data-theme="dark"] .topnote, body[data-theme="dark"] .topnote { background: #16233d; color: #b9d2ff; border-color: #1d3054; }
.nav { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 5vw; background: var(--bg2); border-bottom: 1px solid var(--border); }
.nav-brand { display: flex; align-items: center; gap: 9px; font-size: 20px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--fg); text-decoration: none; font-size: 14.5px; opacity: .85; }
.nav-links a:hover { opacity: 1; color: var(--accent-h); }
.hero { display: flex; gap: 40px; align-items: center; justify-content: center;
  padding: 64px 5vw 48px; flex-wrap: wrap;
  background:
    radial-gradient(900px 500px at 8% 0%, rgba(61,126,255,.10), transparent 55%),
    radial-gradient(700px 500px at 95% 100%, rgba(61,126,255,.07), transparent 55%);
}
.hero-copy h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.2px; font-weight: 800; }
.hero-sub { font-size: 17px; color: var(--muted); max-width: 560px; margin: 18px 0 26px; line-height: 1.6; }
.hero-cta { display: flex; gap: 14px; }
.btn-big { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px;
  border-radius: 999px; font-size: 15.5px; font-weight: 600; text-decoration: none;
  transition: transform .08s, filter .15s, background .15s; }
.btn-blue { background: var(--accent); color: #fff; box-shadow: 0 6px 22px rgba(61,126,255,.4); }
.btn-blue:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { border: 1.5px solid var(--border); color: var(--fg); background: var(--bg2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-h); }
.dl-ic { font-size: 13px; }
.hero-card { width: 400px; max-width: 94vw; }
.hero-card .card { padding: 22px; }
.feat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; padding: 30px 5vw 40px; max-width: 1250px; margin: 0 auto; }
.dl-band { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; background: var(--bg2); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 34px 5vw; }
.dl-band h2 { font-size: 24px; margin-bottom: 6px; }
.dl-band p { color: var(--muted); max-width: 560px; }
.foot-band { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 18px 5vw; color: var(--muted); font-size: 12.5px;
  border-top: 1px solid var(--border); }
:root[data-theme="dark"] .hero { background:
  radial-gradient(900px 500px at 8% 0%, rgba(61,126,255,.16), transparent 55%),
  radial-gradient(700px 500px at 95% 100%, rgba(61,126,255,.08), transparent 55%); }
:root[data-theme="light"] .hero { background:
  radial-gradient(900px 500px at 8% 0%, rgba(61,126,255,.10), transparent 55%),
  radial-gradient(700px 500px at 95% 100%, rgba(61,126,255,.05), transparent 55%); }

/* docked (minimized to right edge) panels */
.panel.docked { width: 42px !important; min-height: 170px; cursor: pointer; }
.panel.docked > *:not(.panel-head) { display: none !important; }
.panel.docked .panel-head { padding: 12px 0; justify-content: center; cursor: pointer; }
.panel.docked .panel-head span { display: none; }
.panel.docked .panel-head button { display: none; }
.panel.docked::after {
  content: attr(data-title);
  writing-mode: vertical-rl;
  color: var(--accent-h);
  font-size: 12.5px;
  font-weight: 600;
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 1px;
}
.panel.docked .panel-head .dock-arrow { display: block; color: var(--accent-h); }

/* session tab: landing fully hidden, pure dark stage */
body.nw #screenConnect { display: none !important; }
body.nw { background: #05070c; }
#screenConnect.launched { opacity: .35; pointer-events: none; filter: saturate(.4); }
#screenConnect { transition: opacity .3s, filter .3s; }

.nav-auth-btn { background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.nav-auth-btn:hover { filter: brightness(1.1); }
.nav-auth-email { color: var(--muted); font-size: 13px; }

/* ---- fixes: hidden must always win; letterboxed canvas with a visible cursor ---- */
[hidden] { display: none !important; }
#canvas { object-fit: contain; cursor: default; }
/* my computers (account device list) */
#myDevsWrap { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.dev-dot { width: 8px; height: 8px; border-radius: 50%; background: #8b95a5; flex-shrink: 0; }
.dev-dot.on { background: #2fbf71; box-shadow: 0 0 6px #2fbf71; }
.dev-dot.busy { background: #e0a53a; }

/* ================= premium polish (v21) ================= */
/* toolbar: soft depth + crisper separators */
#toolbar { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 20px rgba(0,0,0,.28); }
.tb { transition: background .12s, border-color .12s, color .12s, transform .06s, box-shadow .12s; }
.tb:hover { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.tb:active { transform: translateY(1px); }
.tb.active { box-shadow: 0 0 0 1px rgba(61,126,255,.25), 0 2px 10px rgba(61,126,255,.18); }
.tb svg.ic { transition: transform .12s; }
.tb:hover svg.ic { transform: scale(1.06); }

/* live connection-quality dot on the stats pill */
#tbStats { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
#tbStats::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint); flex-shrink: 0; transition: background .3s, box-shadow .3s;
}
#tbStats[data-q="good"]::before { background: var(--ok);   box-shadow: 0 0 7px var(--ok); }
#tbStats[data-q="ok"]::before   { background: var(--warn); box-shadow: 0 0 7px var(--warn); }
#tbStats[data-q="bad"]::before  { background: var(--danger); box-shadow: 0 0 7px var(--danger); }

/* selects: match the premium button feel */
select { transition: border-color .12s, box-shadow .12s; }
select:hover, select:focus { box-shadow: 0 0 0 3px var(--accent-dim); }

/* floating panels: deeper, softer, glassy */
.panel {
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px) saturate(120%);
}
:root[data-theme="light"] .panel { backdrop-filter: blur(10px) saturate(105%); }
.panel-head { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }

/* connect card: subtle premium lift + accent top edge */
.hero-card .card, #connect {
  box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 0 1px var(--border);
  position: relative; overflow: hidden;
}
.hero-card .card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #7aa8ff 45%, var(--ok));
  opacity: .9;
}
.primary {
  background: linear-gradient(180deg, var(--accent-h), var(--accent));
  box-shadow: 0 6px 18px rgba(61,126,255,.30);
  transition: filter .12s, transform .06s, box-shadow .12s;
}
.primary:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(61,126,255,.38); }
.primary:active { transform: translateY(1px); }

/* state label: pill-ify while live for a pro look */
.state.ok { color: var(--ok); }

/* smooth canvas cursor feel */
#canvas { image-rendering: auto; }

/* remote cursor overlay (RustDesk-style: the real remote cursor shape) */
#remoteCursor {
  position: absolute; pointer-events: none; z-index: 5;
  image-rendering: auto; will-change: left, top;
}
#stage.remote-cursor #canvas { cursor: none; }

/* ================================================================
   FIX: the live-session screen is ALWAYS dark (the toolbar bg is dark),
   so pin every toolbar/panel control color explicitly. Before this, light
   theme set --fg to a dark color -> dark icons on the dark toolbar =
   "invisible buttons / no disconnect button".
   ================================================================ */
#screenSession { color-scheme: dark; }
#toolbar { color: #e8edf6; }
#toolbar .tb { color: #e8edf6; }
#toolbar .tb:hover { background: #1d2637; border-color: #2c3a55; color: #ffffff; }
#toolbar .tb.active { background: rgba(61,126,255,.16); color: #6aa1ff; border-color: rgba(61,126,255,.5); }
#toolbar .tb.danger { background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.45); color: #f2868b; }
#toolbar .tb.danger:hover { background: rgba(229,72,77,.26); color: #ffb3b6; }
#toolbar .tb-title { color: #e8edf6; }
#toolbar .state { color: #9aa4b9; }
#toolbar .sep { background: #26314a; }
#toolbar select { background: #171d2a; color: #e8edf6; border-color: #26314a; }
#toolbar #tbStats { background: #171d2a; border-color: #202a40; color: #aab4c8; }
#toolbar svg.ic { stroke: currentColor; }

/* app page responsiveness: stack the connect hero on narrow screens */
@media (max-width: 980px) {
  .hero { flex-direction: column; gap: 22px; padding: 24px 16px; }
  .hero-copy h1 { font-size: clamp(26px, 7vw, 40px); }
  .hero-card, .hero-card .card { width: 100%; max-width: 520px; }
}

/* ===== RustDesk-style floating session toolbar (1.5) ===== */
#screenSession { position: relative; }
#toolbar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: auto; max-width: calc(100vw - 20px);
  border: 1px solid #26314a; border-top: none;
  border-radius: 0 0 14px 14px;
  background: rgba(13,17,26,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 6px 12px; justify-content: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
#toolbar.autohide { transform: translate(-50%, -110%); }
#toolbar.collapsed { transform: translate(-50%, -100%); }
#toolbar.collapsed.autohide { transform: translate(-50%, -110%); }
#stage { position: absolute; inset: 0; }
#tbTab {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 52px; height: 17px; border: 1px solid #26314a; border-top: none;
  border-radius: 0 0 11px 11px; background: rgba(13,17,26,.95);
  color: #9aa4b9; cursor: pointer; font-size: 10px; line-height: 13px;
  padding: 0; text-align: center;
}
#tbTab:hover { color: #fff; background: #1d2637; }
@media (max-width: 900px) { #toolbar { max-width: calc(100vw - 8px); padding: 5px 8px; } }

/* portal dashboard layout: sidebar + main side by side */
#viewDash { display: flex; flex: 1; min-width: 0; }

/* ===== TeamViewer-style session menus (1.5) ===== */
.menu-btn { font-weight: 600; }
.menu-btn.open { background: #1d2637; border-color: #2c3a55; }
.tmenu {
  position: absolute; top: 100%; margin-top: 4px; z-index: 60;
  min-width: 230px; max-height: 62vh; overflow-y: auto;
  background: rgba(13,17,26,.98); border: 1px solid #26314a; border-radius: 10px;
  padding: 6px; box-shadow: 0 16px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tmenu .mi {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 14px; background: transparent; border: 0; border-radius: 7px;
  color: #dbe3f0; font-size: 12.5px; padding: 7px 10px; cursor: pointer;
  text-align: left; font-family: inherit;
}
.tmenu .mi:hover { background: #1d2637; color: #fff; }
.tmenu .mhead {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6b7891; padding: 8px 10px 4px;
}
.tmenu .msep { height: 1px; background: #222c42; margin: 5px 4px; }
.tmenu .mtick { visibility: hidden; color: #4ade80; font-weight: 700; }
.tmenu .mi.on .mtick { visibility: visible; }

/* Original (1:1) scaling: real pixels + scrollbars, like TeamViewer's "Original" */
#stage.orig { overflow: auto; }
#stage.orig #canvas { position: static; inset: auto; width: auto; height: auto; }

/* ===== premium account modal (1.5) ===== */
.auth-card.modal-card {
  width: 408px; max-width: 94vw; padding: 26px 28px 18px; border-radius: 18px;
  background: linear-gradient(180deg, #141b26, #0e131c);
  border: 1px solid #27334a;
  box-shadow: 0 40px 110px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset,
    0 24px 60px -30px rgba(61,126,255,.35);
}
.auth-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.auth-logo {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(180deg, #25d386, #16a765);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(37,211,134,.35);
}
.auth-brand { font-size: 18px; font-weight: 800; color: #e8edf6; letter-spacing: -.3px; }
.auth-brand i { font-style: normal; font-weight: 500; color: #64748b; }
.auth-card .auth-tabs {
  display: flex; gap: 0; margin-bottom: 18px; background: #0b0f16;
  border: 1px solid #202b3f; border-radius: 11px; padding: 4px;
}
.auth-card .atab {
  flex: 1; background: transparent; border: 0; border-radius: 8px;
  color: #8b96a6; font-size: 12.5px; font-weight: 600; padding: 8px 4px;
  cursor: pointer; transition: color .15s, background .15s;
}
.auth-card .atab:hover { color: #cbd5e1; }
.auth-card .atab.on {
  background: linear-gradient(180deg, #3d7eff, #2f66db); color: #fff;
  box-shadow: 0 4px 14px rgba(61,126,255,.4);
}
.auth-title { font-size: 19px; font-weight: 750; color: #f1f5fb; margin: 0 0 4px; letter-spacing: -.3px; }
.auth-sub { font-size: 12.5px; color: #7d8a9d; margin: 0 0 12px; line-height: 1.55; }
.auth-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: #6b7891; margin: 2px 0 -3px;
}
.auth-card .apane input {
  height: 43px; background: #0d1219; border: 1px solid #263241; border-radius: 10px;
  color: #e8edf6; font-size: 13.5px; padding: 0 14px; outline: none;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.auth-card .apane input:focus {
  border-color: #3d7eff; box-shadow: 0 0 0 3px rgba(61,126,255,.18);
}
/* Chrome autofill was painting the field WHITE - pin it to the dark theme */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 60px #0d1219 inset !important;
  -webkit-text-fill-color: #e8edf6 !important;
  caret-color: #e8edf6;
  border: 1px solid #263241;
}
.auth-card .auth-cta {
  height: 43px; margin-top: 8px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #4d8dff, #2f6ae0); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 10px 26px -8px rgba(61,126,255,.55);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.auth-card .auth-cta:hover { filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(61,126,255,.65); }
.auth-card .auth-cta:active { transform: translateY(0); }
.auth-card .foot {
  font-size: 11.5px; color: #6b7891; line-height: 1.55; margin-top: 10px;
  background: rgba(61,126,255,.06); border: 1px solid rgba(61,126,255,.14);
  border-radius: 9px; padding: 9px 12px;
}
.auth-secure {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #1c2534;
  font-size: 10.5px; color: #56637a; text-align: center; letter-spacing: .2px;
}
.auth-card .modal-x { top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
  color: #6b7891; font-size: 13px; transition: background .15s, color .15s; }
.auth-card .modal-x:hover { background: #1b2434; color: #fff; }
.auth-card .error, .auth-card .auok { margin-top: 12px; }

/* ===== docked slim menu-bar toolbar (TeamViewer style, 1.5.1) =====
   The bar sits ABOVE the video in normal flow - it never covers the screen.
   ▲ collapses it to a tiny top-center tab; ▼ brings it back. */
#screenSession { display: flex; flex-direction: column; position: relative; }
#toolbar {
  position: relative; top: auto; left: auto; transform: none;
  width: 100%; max-width: none;
  border: 0; border-bottom: 1px solid #232e45; border-radius: 0;
  background: linear-gradient(180deg, #101623, #0c111b);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 4px 10px; min-height: 42px;
  flex-wrap: nowrap; justify-content: flex-start; gap: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#toolbar.autohide, #toolbar.collapsed.autohide { transform: none; }
#toolbar.collapsed { display: none; }
#stage { position: relative; inset: auto; flex: 1; min-height: 0; }

/* single-row discipline: groups never wrap; the stats text yields first */
#toolbar .tb-group { flex-wrap: nowrap; flex-shrink: 0; }
#toolbar .tb-group:last-of-type { flex-shrink: 1; min-width: 0; margin-left: auto; }
#tbStats { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; }
.tb-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; }
#toolbar .tb { height: 29px; padding: 0 8px; font-size: 12px; }
#toolbar select { height: 29px; font-size: 11.5px; max-width: 160px; }
#toolbar .menu-btn { padding: 0 10px; }
#toolbar .sep { height: 18px; margin: 0 2px; }

/* the ▲ collapse control lives IN the bar, far right */
#toolbar #tbTab {
  position: static; top: auto; left: auto; transform: none;
  width: 30px; height: 29px; flex-shrink: 0; margin-left: 2px;
  border: 1px solid #26314a; border-radius: 7px;
  background: transparent; color: #9aa4b9; font-size: 10px; line-height: 1;
}
#toolbar #tbTab:hover { background: #1d2637; color: #fff; }

/* tiny reopen tab when collapsed - hangs at top-center, TeamViewer style */
#tbShow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 55;
  height: 22px; padding: 0 14px; border: 1px solid #26314a; border-top: 0;
  border-radius: 0 0 12px 12px; background: rgba(13,17,26,.94);
  color: #9aa4b9; font-size: 11px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
#tbShow:hover { color: #fff; background: #1a2334; }
#tbShow[hidden] { display: none; }

/* progressive slimming on narrow windows - never a second row */
@media (max-width: 1300px) { #tbState { display: none; } }
@media (max-width: 1180px) { #selQuality { display: none; } .tb-title { max-width: 110px; } }
@media (max-width: 1020px) { #btnViewOnly span, #btnKbdLock span { display: none; }
  #toolbar .menu-btn { padding: 0 7px; font-size: 11.5px; } }
@media (max-width: 880px) { #tbStats { display: none; } #selMonitor { max-width: 120px; } }

/* ===== touch / mobile support (1.5.1) ===== */
/* without touch-action:none the browser pans/zooms instead of sending
   pointer events - THE reason touch "didn't work" on tablets/phones */
#canvas { touch-action: none; }
#stage { touch-action: none; }
.touch-only { display: none !important; }
@media (pointer: coarse) {
  .touch-only { display: inline-flex !important; }
}
/* invisible input that summons the phone/tablet on-screen keyboard */
#oskInput {
  position: fixed; bottom: 0; left: 0; width: 2px; height: 2px;
  opacity: 0.01; border: 0; padding: 0; background: transparent; color: transparent;
  pointer-events: none; z-index: -1;
}

/* ===== 3D polish for the docked control bar (1.5.2) ===== */
#toolbar {
  min-height: 46px; padding: 6px 12px; gap: 8px;
  background: linear-gradient(180deg, #1b2434 0%, #141b29 45%, #0e141f 100%);
  border-bottom: 1px solid #05080f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
              inset 0 -1px 0 rgba(255,255,255,.02),
              0 8px 26px rgba(0,0,0,.55);
}
#toolbar .tb-group { gap: 6px; }

/* raised 3D buttons with a real pressed state */
#toolbar .tb {
  height: 31px; padding: 0 10px; border-radius: 8px;
  background: linear-gradient(180deg, #253044, #1a2333);
  border: 1px solid #0b111d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 3px rgba(0,0,0,.45);
  color: #c9d4e3;
  transition: background .12s, box-shadow .12s, transform .06s, color .12s;
}
#toolbar .tb:hover {
  background: linear-gradient(180deg, #2d3a54, #222d42);
  color: #fff; border-color: #0b111d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 3px 8px rgba(0,0,0,.5);
}
#toolbar .tb:active { transform: translateY(1px);
  background: #18202f; box-shadow: inset 0 2px 6px rgba(0,0,0,.55); }
#toolbar .tb.active {
  background: linear-gradient(180deg, #2d5290, #234070);
  border-color: #142643; color: #d9e7ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 12px rgba(61,126,255,.3);
}
#toolbar .tb.danger {
  background: linear-gradient(180deg, #93323a, #701f26);
  border-color: #400f13; color: #ffdcde;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 10px rgba(229,72,77,.35);
}
#toolbar .tb.danger:hover {
  background: linear-gradient(180deg, #aa3b45, #86262e); color: #fff;
}

/* Actions / View / Extras behave like real app menus: flat, raise on hover */
#toolbar .menu-btn {
  background: transparent; border-color: transparent; box-shadow: none;
  font-weight: 650; color: #d5dde9;
}
#toolbar .menu-btn:hover, #toolbar .menu-btn.open {
  background: linear-gradient(180deg, #2b3852, #202b3f);
  border-color: #0b111d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 2px 6px rgba(0,0,0,.45);
}

/* selects match the 3D buttons, custom chevron */
#toolbar select {
  height: 31px; border-radius: 8px; padding: 0 26px 0 11px;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(180deg, #253044, #1a2333)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b96a6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 9px center;
  border: 1px solid #0b111d; color: #c9d4e3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 3px rgba(0,0,0,.45);
  cursor: pointer;
}
#toolbar select:hover { color: #fff;
  background-image: linear-gradient(180deg, #2d3a54, #222d42),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cfd8e6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* engraved separators */
#toolbar .sep {
  width: 1px; height: 24px; margin: 0 3px; background:
    linear-gradient(180deg, transparent, #05080f 25%, #05080f 75%, transparent);
  box-shadow: 1px 0 0 rgba(255,255,255,.05);
}

/* title + live pill + inset stats chip */
#toolbar .tb-title { font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#tbState {
  background: #0c1320; border: 1px solid #080d17; border-radius: 999px;
  padding: 3px 11px; box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
}
#tbStats {
  background: #0b101b; border: 1px solid #070c15; border-radius: 8px;
  padding: 6px 11px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
}

/* dropdown menus + reopen tab share the depth */
.tmenu {
  background: linear-gradient(180deg, #171f2f, #0f1522);
  border-color: #0b111d;
  box-shadow: 0 20px 54px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}
#tbShow {
  background: linear-gradient(180deg, #1b2434, #10161f);
  border-color: #0b111d;
  box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}

/* single-row overflow guards: Disconnect and the collapse tab must NEVER clip;
   the stats chip yields first, then labels, then stats hides entirely */
#toolbar .tb-group:last-of-type > .tb, #toolbar #tbTab { flex-shrink: 0; }
#tbStats { flex: 0 1 auto; max-width: 300px; }
#toolbar .menu-btn { padding: 0 8px; }
#toolbar .tb-title { max-width: 128px; }
#toolbar select { max-width: 150px; }
@media (max-width: 1520px) {
  #btnViewOnly span, #btnKbdLock span { display: none; }
}
@media (max-width: 1400px) { #tbStats { display: none; } }
@media (max-width: 1080px) { #btnDisconnect span { display: none; } #tbState { display: none; } }

/* ===== control bar: TeamViewer-grade flat premium (1.5.3, final pass) =====
   Calm flat surface, ghost controls that light up on hover, one bold red
   Disconnect pill. Overrides the heavier 3D pass above. */
#toolbar {
  min-height: 50px; padding: 8px 14px; gap: 10px;
  background: linear-gradient(180deg, #121926, #0d1219);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
#toolbar .tb-group { gap: 4px; }

/* ghost buttons: quiet until you need them */
#toolbar .tb {
  height: 34px; min-width: 34px; padding: 0 11px; border-radius: 9px;
  background: transparent; border: 1px solid transparent; box-shadow: none;
  color: #b9c6d8; font-size: 12.5px; justify-content: center;
}
#toolbar .tb:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.06);
  color: #fff; box-shadow: none;
}
#toolbar .tb:active { transform: none; background: rgba(0,0,0,.35);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
#toolbar .tb.active {
  background: rgba(61,126,255,.16); border-color: rgba(61,126,255,.4);
  color: #7fb0ff; box-shadow: none;
}
#toolbar .menu-btn { font-weight: 650; color: #dbe3ee; padding: 0 12px;
  background: transparent; border-color: transparent; box-shadow: none; }
#toolbar .menu-btn:hover, #toolbar .menu-btn.open {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.06); box-shadow: none; }

/* selects as quiet inset wells */
#toolbar select {
  height: 34px; border-radius: 9px; padding: 0 28px 0 12px;
  background-color: rgba(255,255,255,.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b96a6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  border: 1px solid rgba(255,255,255,.09); color: #c6d2e2; box-shadow: none;
}
#toolbar select:hover { background-color: rgba(255,255,255,.09); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cfd8e6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* hairline separators */
#toolbar .sep { width: 1px; height: 22px; margin: 0 6px;
  background: rgba(255,255,255,.08); box-shadow: none; }

/* identity cluster: bold name + breathing live dot, no boxes */
#toolbar .tb-title { font-size: 13px; font-weight: 700; color: #eef3fa; text-shadow: none; }
#tbState { background: transparent; border: 0; box-shadow: none; padding: 0 4px;
  font-size: 12px; color: #8ea3bd; }
#tbState.ok::before { animation: livepulse 2.2s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { box-shadow: 0 0 4px var(--ok); } 50% { box-shadow: 0 0 11px var(--ok); } }

/* stats: quiet telemetry text, no box */
#tbStats { background: transparent; border: 0; box-shadow: none; padding: 0 6px;
  font-size: 11.5px; color: #7f93ad; letter-spacing: .2px; }

/* THE red pill - always fully visible, unmistakable */
#toolbar .tb.danger {
  height: 34px; padding: 0 18px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(180deg, #ef5158, #d63a41);
  border: 1px solid #b02a30; color: #fff; font-weight: 650;
  box-shadow: 0 4px 16px rgba(229,72,77,.4), inset 0 1px 0 rgba(255,255,255,.22);
}
#toolbar .tb.danger:hover {
  background: linear-gradient(180deg, #ff5f66, #e2444b);
  box-shadow: 0 6px 20px rgba(229,72,77,.55), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff;
}
#toolbar #tbTab { width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: #8ea3bd; }
#toolbar #tbTab:hover { background: rgba(255,255,255,.08); color: #fff; }

/* stats only when there is truly room; never a crushed "1920×…" fragment */
@media (max-width: 1620px) { #tbStats { display: none; } }
#toolbar .tb-title { max-width: 175px; }

/* exact TeamViewer right-edge order: … [icons] | ▲ collapse | [red end button] */
#toolbar #tbTab { order: 8; margin-left: auto; }
#toolbar .tb-group:last-of-type { order: 9; margin-left: 0; }
#toolbar { padding-right: 10px; }

/* ===== TeamViewer light skin for the session bar (reference-matched) ===== */
#toolbar {
  margin: 8px 10px 0; border-radius: 11px; width: auto;
  min-height: 46px; padding: 5px 10px;
  background: linear-gradient(180deg, #ffffff, #f2f4f7);
  border: 1px solid #d8dde4; border-bottom: 1px solid #c9cfd8;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
}
#toolbar .tb {
  color: #3d4756; background: transparent; border: 1px solid transparent;
  height: 34px; border-radius: 8px;
}
#toolbar .tb:hover { background: #e8ecf1; border-color: #d6dbe2; color: #1d2530;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
#toolbar .tb:active { background: #dde2e9; box-shadow: inset 0 2px 4px rgba(0,0,0,.12); }
#toolbar .tb.active { background: #e3edff; border-color: #bdd3f5; color: #1e64d8; box-shadow: none; }
#toolbar .menu-btn { color: #2c3644; font-weight: 600; }
#toolbar .menu-btn:hover, #toolbar .menu-btn.open {
  background: #e8ecf1; border-color: #d6dbe2; box-shadow: none; }
#toolbar select {
  background-color: #fbfcfd; color: #2c3644; border: 1px solid #ccd3dc;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6878' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
#toolbar select:hover { background-color: #fff; color: #10151d; border-color: #b9c2cd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232c3644' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
#toolbar .sep { background: #d8dde4; box-shadow: 1px 0 0 #ffffff; height: 24px; }
#toolbar .tb-title { color: #16202e; }
#tbState { color: #5b6878; }
#tbStats { color: #6a7686; }

/* the red end button: compact, filled, unmistakable - like the reference */
#toolbar .tb.danger {
  padding: 0 12px; border-radius: 8px;
  background: linear-gradient(180deg, #ee4048, #d92730);
  border: 1px solid #b21e26; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 3px 10px rgba(217,39,48,.4);
}
#toolbar .tb.danger:hover { background: linear-gradient(180deg, #f9525a, #e63039); }
#toolbar #tbTab { color: #5b6878; }
#toolbar #tbTab:hover { background: #e8ecf1; color: #1d2530; }

/* dropdown menus + info panel go light to match */
.tmenu {
  background: #ffffff; border: 1px solid #d8dde4;
  box-shadow: 0 16px 44px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15);
}
.tmenu .mi { color: #2c3644; }
.tmenu .mi:hover { background: #eef2f7; color: #10151d; }
.tmenu .mhead { color: #7c8898; }
.tmenu .msep { background: #e5e9ee; }
.tmenu .mtick { color: #1e64d8; }

/* reopen tab matches the light bar */
#tbShow {
  background: linear-gradient(180deg, #ffffff, #eef1f5);
  border: 1px solid #ccd3dc; border-top: 0; color: #3d4756;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
#tbShow:hover { background: #fff; color: #10151d; }

/* ===== reference-exact: airy sparse bar, menus-first (v41) ===== */
/* identity + dropdown boxes leave the bar - like the reference image */
#toolbar .tb-title, #tbState, #selMonitor, #selQuality { display: none !important; }
/* icon-only everywhere */
#btnViewOnly span, #btnKbdLock span, #btnDisconnect span { display: none !important; }
/* generous breathing room between groups */
#toolbar { gap: 16px; padding: 6px 12px; }
#toolbar .tb-group { gap: 10px; }
#toolbar .sep { margin: 0 6px; }
#toolbar .menu-btn { padding: 0 13px; font-size: 13px; }
/* compact square-ish red end button, icon only */
#toolbar .tb.danger { padding: 0 12px; min-width: 40px; }
#toolbar .tb.danger svg { width: 15px; height: 15px; }
/* menus can hold the new Monitor / Quality sections comfortably */
.tmenu { min-width: 250px; }

/* monitor cycle label + disabled menu items (v44) */
#monCycleLbl { font-size: 11px; font-weight: 700; margin-left: 5px; letter-spacing: .3px; }
.tmenu .mi[disabled] { opacity: .45; cursor: default; }
.tmenu .mi[disabled]:hover { background: transparent; color: #2c3644; }

/* iOS: no long-press callout / text-selection bubbles over the session */
#stage, #canvas, #toolbar, .tmenu {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== mobile session layout (phones) ===== */
.tmenu { position: fixed; }        /* JS sets top/left, clamped to the viewport */
@media (max-width: 700px) {
  #toolbar {
    min-height: 44px; margin: 6px 6px 0; padding: 5px 6px; gap: 5px;
    border-radius: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #toolbar::-webkit-scrollbar { display: none; }
  #toolbar .tb { height: 36px; min-width: 36px; }
  #toolbar .menu-btn { padding: 0 10px; font-size: 12.5px; }
  /* secondary controls live inside the menus on phones - keep the bar clean */
  #btnViewOnly, #btnKbdLock, #btnClipboard, #btnPrivacy, #btnRec,
  #btnSys, #btnChat, #btnFiles, #toolbar .sep { display: none !important; }
  .tmenu { max-height: 68vh; overflow-y: auto; min-width: 230px; max-width: 92vw; }
  #tbShow { height: 26px; padding: 0 16px; font-size: 12px; }
}

/* phones: consolidate to the essentials - everything else stays in menus */
@media (max-width: 700px) {
  .menu-btn[data-menu="mComm"] { display: none !important; }  /* chat lives in Extras */
  #btnFullscreen { display: none !important; }   /* no Fullscreen API on iPhone */
  #btnOsk span { display: none !important; }
  #monCycleLbl { font-size: 10px; margin-left: 3px; }
  #toolbar { gap: 3px; }
  #toolbar .menu-btn { padding: 0 8px; font-size: 12px; }
  #toolbar .tb.danger { min-width: 38px; padding: 0 10px; }
}

/* inside the desktop app's viewer window: no website chrome */
body.embed .nav-links, body.embed a.btn-ghost[href="/portal"] { display: none !important; }

/* =========================================================================
   ELEVATION LAYER v2 — glass, gradient accents, refined depth. Matches the
   marketing site's elevation pass. Component-scoped overrides only; the base
   design above is untouched so behaviour/layout stay identical.
   ====================================================================== */
:root{
  --accent-grad: linear-gradient(135deg,#4d8bff,#6aa1ff 44%,#34d399);
  --glass: rgba(18,24,36,.72);
  --hair: rgba(255,255,255,.07);
  --hair-strong: rgba(255,255,255,.13);
  --shadow-lg: 0 24px 70px -18px rgba(0,0,0,.72);
  --ring: 0 0 0 3px rgba(77,139,255,.26);
}
:root[data-theme="light"]{
  --glass: rgba(255,255,255,.76);
  --hair: rgba(16,22,34,.08);
  --hair-strong: rgba(16,22,34,.14);
  --shadow-lg: 0 24px 70px -22px rgba(23,32,47,.22);
  --ring: 0 0 0 3px rgba(61,126,255,.18);
}

/* primary buttons: gradient fill + sheen sweep (sheen sits behind the text) */
button.primary, .btn-blue{
  position:relative; overflow:hidden; z-index:0;
  background:var(--accent-grad) !important; background-size:160% 160% !important;
  box-shadow:0 8px 22px -6px rgba(61,126,255,.5), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
button.primary::before, .btn-blue::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.4) 50%,transparent 78%);
  transform:translateX(-120%); transition:transform .6s ease;
}
button.primary:hover::before, .btn-blue:hover::before{ transform:translateX(120%); }
button.primary:hover, .btn-blue:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* toolbar: frosted glass + a gradient hairline underline */
#toolbar{
  position:relative;
  background:var(--glass) !important;
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--hair) !important;
  box-shadow:0 1px 0 var(--hair) inset, 0 10px 26px -14px rgba(0,0,0,.55) !important;
}
#toolbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(77,139,255,.55),rgba(52,211,153,.4),transparent);
  opacity:.75;
}

/* connect card + modals: gradient hairline border + deeper shadow */
.card, .modal-card{ position:relative; border-color:var(--hair-strong) !important; box-shadow:var(--shadow-lg) !important; }
.card::before, .modal-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.85;
  background:linear-gradient(135deg,rgba(77,139,255,.5),transparent 42%,transparent 58%,rgba(52,211,153,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.modal-wrap{ background:rgba(5,7,12,.62) !important; backdrop-filter:blur(9px) saturate(1.2) !important; -webkit-backdrop-filter:blur(9px) saturate(1.2) !important; }

/* inputs: softer gradient-tinted focus ring */
input:focus{ box-shadow:var(--ring) !important; }

/* active states get the gradient tint */
.atab.on{ background:linear-gradient(135deg,rgba(77,139,255,.22),rgba(52,211,153,.12)) !important; border-color:rgba(77,139,255,.5) !important; color:#bcd4ff !important; }
#toolbar .tb.active{ background:linear-gradient(135deg,rgba(77,139,255,.24),rgba(52,211,153,.12)) !important; border-color:rgba(77,139,255,.5) !important; }

/* operator-console (portal) cards: refined hairline + depth */
.p-card{ border-color:var(--hair-strong) !important; box-shadow:0 1px 2px rgba(0,0,0,.22), 0 12px 30px -16px rgba(0,0,0,.55) !important; }
:root[data-theme="light"] .p-card{ box-shadow:0 1px 2px rgba(23,32,47,.06), 0 12px 30px -18px rgba(23,32,47,.18) !important; }