/* =====================================================================
   TempleConnect v2 — overlay stylesheet
   =====================================================================
   OVERRIDES app.css. Loaded AFTER it in app.html so these rules win. To
   revert instantly, add ?legacy=1 to the URL or run `localStorage.setItem
   ("hcTheme","legacy")` in the console; the <link> in app.html honors it.
   This is a RE-SKIN: tokens, typography, borders, radius, and a handful of
   high-signal component tweaks. Structural CSS stays in app.css so no JS
   wiring, selectors, or layout grids need to change.
   ===================================================================== */

/* ----- 1. design tokens --------------------------------------------- */
:root {
  /* warm charcoal ground with a cold-blue accent (user picked blue over
     the mockup's amber). Keeps your existing accent hex so brand consistency
     survives, but refines bg/panel/border to the denser mockup palette. */
  --bg:          #0E1218;
  --bg2:         #10151D;
  --panel:       #141A24;
  --panel2:      #1A2130;
  --panel3:      #212A3C;
  --line:        #232B3B;
  --line2:       #2D374B;
  --txt:         #E8EDF5;
  --txt2:        #9FA8BA;
  --txt3:        #6B7489;
  --accent:      #4F8CFF;
  --accent2:     #2B5BD4;
  --accent-wash: rgba(79,140,255,0.12);
  /* Keep semantic colors visible but calmer than the originals. */
  --green:       #4CBD7A;
  --green-glow:  rgba(76,189,122,0.25);
  --amber:       #D9A842;
  --sleep:       #8AA0FF;
  --red:         #E05257;
  --red-dim:     #B2434A;
  /* Tighter geometry — mockup uses 3-8px radii, not 10-14. */
  --radius:      8px;
  --radius-sm:   5px;
  --shadow:      0 20px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.25);
  --font-sans:   "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  font-family: var(--font-sans);
  font-size: 13px;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* digits align in all data/metrics */
.mono, code, kbd, pre, .num, .ver, .sess-name, .fname, .dep-out, .tele .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ----- 2. buttons: flatten, remove gradient + glow ------------------- */
.btn {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line2);
  background: var(--panel2);
  color: var(--txt);
  font-weight: 500;
  font-size: 12.5px;
  transition: background .15s, border-color .15s;
}
.btn:hover {
  background: var(--panel3);
  border-color: var(--txt3);
  transform: none;
}
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: none;
}
.btn.primary:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  box-shadow: none;
  filter: none;
}
.btn.ghost { background: transparent; border-color: var(--line2); }
.btn.ghost:hover { background: var(--panel2); border-color: var(--txt3); }
.btn.danger {
  background: transparent;
  border-color: rgba(224,82,87,0.4);
  color: var(--red);
}
.btn.danger:hover { background: rgba(224,82,87,0.1); border-color: var(--red); }
.btn.small { padding: 5px 9px; font-size: 11.5px; border-radius: 4px; }

/* ----- 3. auth: calmer card, drop the glow + grid tiling ------------- */
.auth-bg {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(79,140,255,0.08), transparent 60%),
    var(--bg);
}
.auth-bg::after { opacity: 0.25; mask-image: radial-gradient(circle at 50% 30%, #000, transparent 80%); }
.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  padding: 32px 30px 26px;
}
.auth-logo { filter: none; margin-bottom: 10px; }
.auth-title { font-weight: 500; letter-spacing: -0.02em; font-size: 20px; }
.auth-sub { color: var(--txt2); font-size: 12.5px; }
.field input {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  border: 1px solid var(--line2);
  font-size: 13px;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}

/* ----- 4. sidebar / nav items --------------------------------------- */
.sidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--line) !important;
  padding: 16px 10px !important;
}
.side-brand { font-weight: 500 !important; font-size: 15px !important; letter-spacing: -0.015em; padding: 6px 10px 14px !important; }
.side-brand b { color: var(--accent); font-weight: 600 !important; }
.side-brand svg { filter: none !important; }
.nav-item {
  padding: 8px 11px !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--txt2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.nav-item:hover { background: var(--panel) !important; color: var(--txt) !important; }
.nav-item.active {
  background: var(--panel2) !important;
  color: var(--txt) !important;
  font-weight: 500 !important;
  position: relative;
}
.nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: -10px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 2px !important;
  height: auto !important;
  background: var(--accent) !important;
  border-radius: 2px !important;
  transform: none !important;
  box-shadow: none !important;
}
.nav-item .ic { width: 16px !important; height: 16px !important; }

/* ---- agent version chip (dr-ver, added by app.js when v2 is on) ---- */
.dr-ver {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  margin-left: 2px;
  background: var(--panel2);
  color: var(--txt2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 3px;
  border: 1px solid var(--line);
  letter-spacing: -0.01em;
  vertical-align: middle;
  line-height: 1.4;
}
.dr-ver.stale {
  color: var(--amber);
  background: rgba(217,168,66,0.08);
  border-color: rgba(217,168,66,0.3);
}

/* ---- devices-page segmented filter: production uses .seg + .seg-btn,
       but at the top of the Devices page it renders as a horizontal row of
       filter chips, not a pill group — restyle it that way for consistency
       with the mockup. */
#dev-filter.seg {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
#dev-filter .seg-btn {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt2) !important;
  padding: 5px 11px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}
#dev-filter .seg-btn:hover {
  background: var(--panel2) !important;
  color: var(--txt) !important;
}
#dev-filter .seg-btn.active {
  background: var(--accent-wash) !important;
  border-color: rgba(79,140,255,0.35) !important;
  color: var(--accent) !important;
}
.seg-count {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 5px;
  background: var(--panel2);
  color: var(--txt3);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  min-width: 15px;
  justify-content: center;
}
#dev-filter .seg-btn.active .seg-count {
  background: rgba(79,140,255,0.2);
  color: var(--accent);
}

/* ---- side-foot "Sign out" + user pill flattened ---- */
.side-foot .btn {
  background: transparent !important;
  border: 1px solid var(--line2) !important;
  color: var(--txt2) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}
.side-foot .btn:hover { background: var(--panel) !important; color: var(--txt) !important; }

/* Earlier iterations put a 2px accent band across the top of the whole app
   shell. Removed per user request — the topbar + rail already carry the
   identity, the extra line read as a browser-tab underline and leaked onto
   the session view too. */
/* flatten the avatar */
.avatar {
  background: var(--accent) !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  font-family: var(--font-mono);
  font-size: 13px !important;
  width: 32px !important; height: 32px !important;
}
.su-name { font-weight: 500 !important; font-size: 12.5px !important; }
.su-role { color: var(--txt3); font-size: 11px; }

/* search box */
.search {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
.search:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-wash) !important;
}

/* page headers */
.page-title { font-weight: 500 !important; letter-spacing: -0.02em !important; font-size: 22px !important; }
.page-sub   { color: var(--txt2) !important; font-size: 12.5px !important; }

/* ----- 5. page header + metrics ------------------------------------- */
.dash-top h1, .dev-top h1, .page-title, h1, h2 {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
.main { padding: 20px 24px 32px !important; }

/* Dashboard metric strip — PRODUCTION classes: .stats > .stat > .stat-top > .stat-label + .stat-ic, .stat-num */
.stats {
  gap: 1px !important;
  background: var(--line) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}
.stat {
  background: var(--panel) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 14px 14px !important;
  transition: none !important;
  position: relative !important;
}
.stat:hover { transform: none !important; background: var(--panel2) !important; }
.stat-top { margin-bottom: 4px !important; }
.stat-label {
  color: var(--txt3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.stat-num {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  font-size: 20px !important;
  color: var(--txt) !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}
.stat-foot { color: var(--txt3) !important; font-size: 10.5px !important; }
.stat-ic { font-size: 7px !important; }
.stat-svg { width: 12px !important; height: 12px !important; }

/* ----- 6. device list: hairline card + chunky left status stripe ---- */
.device-list {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
}
/* v2 only: 8-column grid shared by the synthetic header and every row.
   OS stripe · Device · Status · Tags · Signed-in · Agent · Last seen · Actions.
   Keep column widths identical in the two selectors so the header lines up
   with the row cells exactly. */
.v2-list-head {
  display: grid;
  grid-template-columns: 20px minmax(220px, 2fr) 110px 90px 110px 70px 110px 100px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 22px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt3);
}
.v2-list-head span { white-space: nowrap; }
.v2-list-head span:last-child { text-align: right; }

[data-v2] .device-row {
  display: grid !important;
  grid-template-columns: 20px minmax(220px, 2fr) 110px 90px 110px 70px 110px 100px !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 11px 14px 11px 22px !important;
}
[data-v2] .device-row .dr-os       { grid-column: 1 !important; color: var(--txt3) !important; }
[data-v2] .device-row .dr-os svg   { width: 14px; height: 14px; }
[data-v2] .device-row .dr-status   { display: none !important; }
[data-v2] .device-row .dr-main     { grid-column: 2 !important; min-width: 0 !important; }
[data-v2] .device-row .dr-presence { grid-column: 3 !important; justify-self: start !important; }
[data-v2] .device-row .dr-tag      { grid-column: 4 !important; justify-self: start !important; min-width: 0; }
[data-v2] .device-row .dr-user     { grid-column: 5 !important; justify-self: start !important;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
[data-v2] .device-row .dr-agent    { grid-column: 6 !important; justify-self: start !important; }
[data-v2] .device-row .dr-seen     { grid-column: 7 !important; text-align: left !important; justify-self: start !important; }
[data-v2] .device-row .dr-actions  { grid-column: 8 !important; justify-self: end !important; opacity: 1 !important; }
[data-v2] .device-row .dr-lock     { position: absolute; right: 110px; top: 50%; transform: translateY(-50%); }
[data-v2] .device-row .dr-sub {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.dr-tag-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  background: var(--panel3);
  color: var(--txt2);
  border-radius: 3px;
  text-transform: lowercase;
  letter-spacing: 0;
}
.device-row:last-child { border-bottom: none !important; }
.device-row::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--txt3) !important;
  opacity: 0.35 !important;
}
.device-row.online::before      { background: var(--green)  !important; opacity: 1 !important; }
.device-row.busy::before        { background: var(--accent) !important; opacity: 1 !important; }
.device-row.asleep::before      { background: var(--sleep)  !important; opacity: 0.9 !important; }
.device-row.uninstalled::before { background: var(--red)    !important; opacity: 0.5 !important; }
.device-row:hover { background: var(--panel2) !important; }

/* host name as a technical mono-ID */
.dr-name {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--txt) !important;
}
.dr-sub { font-size: 11.5px !important; color: var(--txt3) !important; font-family: var(--font-sans) !important; }
.dr-seen {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 11.5px !important;
  color: var(--txt3) !important;
}

/* dr-presence becomes a visible status PILL instead of plain text */
.dr-presence {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 9px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line2) !important;
  background: var(--panel2) !important;
  color: var(--txt2) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.device-row.online .dr-presence {
  color: var(--green) !important;
  background: rgba(76,189,122,0.08) !important;
  border-color: rgba(76,189,122,0.35) !important;
}
.device-row.busy .dr-presence,
.dr-busy {
  color: var(--accent) !important;
  background: var(--accent-wash) !important;
  border: 1px solid rgba(79,140,255,0.35) !important;
  padding: 2px 9px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
}
.device-row.asleep .dr-presence {
  color: var(--sleep) !important;
  background: rgba(138,160,255,0.08) !important;
  border-color: rgba(138,160,255,0.35) !important;
}

/* status dot — tint to match */
.device-row.online .dr-status  { color: var(--green)  !important; }
.device-row.busy .dr-status    { color: var(--accent) !important; }
.device-row.asleep .dr-status  { color: var(--sleep)  !important; }
.device-row.offline .dr-status { color: var(--txt3)   !important; }
.device-row.online .dr-os      { color: var(--accent) !important; }
.dr-os { color: var(--txt3) !important; }

/* ----- 7. pills, badges, status chips ------------------------------- */
.pill, .badge, .sess-pill, .rtc-mode {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--panel2);
  color: var(--txt2);
  letter-spacing: 0;
}
.pill.online, .badge.online, .pill.ok, .badge.ok {
  color: var(--green);
  background: rgba(76,189,122,0.08);
  border-color: rgba(76,189,122,0.3);
}
.pill.in-session, .pill.insession, .pill.active, .badge.active {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: rgba(79,140,255,0.3);
}
.pill.sleeping, .badge.sleeping {
  color: var(--sleep);
  background: rgba(138,160,255,0.08);
  border-color: rgba(138,160,255,0.3);
}
.pill.offline, .badge.offline {
  color: var(--txt3);
  background: var(--panel2);
  border-color: var(--line);
}
.rtc-mode {
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  background: rgba(76,189,122,0.1);
  color: var(--green);
  border-color: rgba(76,189,122,0.3);
}

/* ----- 8. session top bar + sc-tabs toolbar ------------------------- */
.sc-bar {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 20px !important;
  min-height: 56px;
  position: relative !important; /* anchor for the absolutely-centered .sc-tabs */
}
.sess-name { color: var(--txt); font-weight: 500 !important; letter-spacing: -0.01em; font-family: var(--font-mono); font-size: 13px; }
/* ScreenConnect-style flat icon strip. The icons sit directly on .sc-bar
   with no boxed container — just evenly-spaced square buttons that light up
   accent on hover/active. */
/* Lock the icon strip to the TRUE center of the session bar — regardless of
   how long the hostname / rtc pill on the left runs. Absolute positioning
   on the strip (with .sc-bar as the containing block) keeps it fixed in
   the middle; the device name stays left, Control/Disconnect stay right. */
.sc-tabs {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  margin: 0 !important;
  z-index: 2;
}
.sc-tab {
  width: 44px !important; height: 40px !important;
  display: grid !important; place-items: center !important;
  border-radius: 5px !important;
  color: var(--txt2) !important;
  background: transparent !important;
  border: none !important;
  transition: color .12s, background .12s;
}
.sc-tab svg { width: 18px !important; height: 18px !important; stroke-width: 1.6; }
.sc-tab:hover { color: var(--txt) !important; background: var(--panel2) !important; }
.sc-tab.active {
  color: var(--accent) !important;
  background: var(--accent-wash) !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* sc-panel (hover dropdown) — tighten the frame */
.sc-panel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  animation: none !important;
  margin-top: 4px !important;
}
.sc-col-t {
  color: var(--txt3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
}
.sc-tile {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
.sc-tile:hover { border-color: var(--accent) !important; background: var(--panel3) !important; }
.sc-tile.q-btn.active, .sc-tile.on { border-color: var(--accent) !important; }
.sc-tile-l { font-size: 11.5px !important; font-weight: 500 !important; color: var(--txt2) !important; }

/* RTC mode pill — tighter design */
.rtc-mode {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.03em !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

/* control-blocked warning: calmer background, same signal */
.ctl-warn {
  background: rgba(224,82,87,0.08);
  border: 1px solid rgba(224,82,87,0.3);
  color: var(--red);
  border-radius: var(--radius-sm);
  font-weight: 500;
  padding: 4px 10px;
}

/* ----- 9. sys-tabs (System overlay segmented tabs) ------------------ */
.seg {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
}
.seg-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt2);
  border-radius: 4px;
  background: transparent;
  border: none;
}
.seg-btn:hover { color: var(--txt); background: var(--panel2); }
.seg-btn.active { color: var(--txt); background: var(--panel3); }

/* ----- 10. tables / files / proc lists ------------------------------ */
.files-table thead th,
table thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt3);
  font-weight: 500;
  padding: 9px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.files-table tbody td,
table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--txt2);
  font-size: 12.5px;
}
.files-table tbody tr:hover td,
table tbody tr:hover td { background: var(--panel2); }

/* ----- 11. form inputs ---------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="number"], select, textarea,
.dep-args, .proc-search {
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--txt);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}

/* ----- 12. toolbox tiles (upload + list) ---------------------------- */
.tb-tile { position: relative; }
.tb-tile.tb-run:hover { color: var(--accent); }

/* ----- 13. toasts, modals, dropdowns -------------------------------- */
.toast {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--txt);
  font-size: 12.5px;
}
.toast.ok { border-color: rgba(76,189,122,0.4); }
.toast.err { border-color: rgba(224,82,87,0.4); }

.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ----- 14. small refinements that reinforce the identity ------------ */
::selection { background: var(--accent-wash); color: var(--txt); }
hr, .divider { border-color: var(--line); }

/* dense scrollbars that read "ops tool" not "consumer app" */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border: 2px solid var(--bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--txt3); }

/* lastly: a thin top border on the main content region ties the chrome
   together regardless of which page is open */
.main > .topbar,
.sess-bar,
.devices-top,
.dash-top { border-bottom-color: var(--line); }

/* make the whole app visibly flatter — drop pop-in animations that hide
   the restyle, remove hover-translate micro-interactions */
.page { animation: none !important; }
.stat:hover { transform: none !important; border-color: var(--line) !important; }
.btn:hover { transform: none !important; }
.device-row.enter { animation: none !important; }

/* =====================================================================
   v2 chrome — DOM injected by app.js on DOMContentLoaded (gated by HC_V2)
   The rules below style classes that only exist in v2 mode, so they add
   no risk to the legacy path.
   ===================================================================== */

/* ---------- shared bits ---------- */
.v2-kbd {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  padding: 1px 5px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--txt2); background: var(--panel2);
  letter-spacing: 0;
}
.btn.primary .v2-kbd { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); background: transparent; }

/* ---------- topbar ---------- */
/* The topbar is injected as the first child of .main. Zero out .main's top
   padding so the bar hugs the top edge, then give the bar a bottom margin to
   put daylight between its hairline border and the page-head below (the Build
   installer / Add device CTAs were visibly crammed against the bar). */
[data-v2] .main { padding-top: 0 !important; }
.v2-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  margin: 0 -24px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  min-height: 52px;
  position: sticky; top: 0; z-index: 5;
}
.v2-crumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--txt3);
  min-width: 0;
}
.v2-crumbs .v2-sep { color: var(--txt3); opacity: 0.5; font-weight: 300; }
.v2-crumbs .here { color: var(--txt); font-weight: 500; }
.v2-top-search {
  flex: 1 1 320px; max-width: 440px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 5px;
}
.v2-top-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.v2-top-search .ic { width: 14px; height: 14px; color: var(--txt3); flex: 0 0 14px; }
.v2-top-search input {
  background: none; border: none; outline: none;
  color: var(--txt); font-family: inherit; font-size: 13px;
  width: 100%; min-width: 0;
}
.v2-top-search input::placeholder { color: var(--txt3); }
.v2-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.v2-icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 5px;
  color: var(--txt2);
  background: transparent;
  border: none; cursor: pointer;
}
.v2-icon-btn:hover { background: var(--panel2); color: var(--txt); }
.v2-icon-btn .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.v2-user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 12.5px; color: var(--txt);
  cursor: pointer;
}
.v2-user-pill .v2-user-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
}

/* ---------- rail polish: org picker, section labels, badges, foot ---------- */
.v2-org {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 10px;
  padding: 7px 9px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--txt); font-size: 12.5px;
  cursor: pointer;
}
.v2-org:hover { border-color: var(--line2); }
.v2-org-av {
  width: 22px; height: 22px; border-radius: 3px;
  background: linear-gradient(135deg, #3b4a6b, #5d7aa5);
  color: #d9e2f3;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  flex: 0 0 22px;
}
.v2-org-meta { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.v2-org-name { font-weight: 500; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-org-role { color: var(--txt3); font-size: 11px; }
.v2-org-caret { color: var(--txt3); font-size: 10px; }

.v2-sect {
  padding: 14px 10px 6px 11px;
  color: var(--txt3);
  text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.1em; font-weight: 500;
}

.v2-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--txt3);
  padding: 1px 5px;
  background: var(--panel2);
  border-radius: 3px;
  min-width: 15px; text-align: center;
}
.v2-badge:empty { visibility: hidden; }
.nav-item.active .v2-badge { color: var(--txt); background: var(--panel3); }

.v2-relay {
  margin: 10px 2px 0;
  padding: 10px 11px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--txt3);
}
.v2-relay-dot {
  width: 7px; height: 7px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(76,189,122,0.15);
  flex: 0 0 7px;
}
.v2-relay-txt > div:first-child { color: var(--txt2); }
.v2-relay-lat { font-family: var(--font-mono); font-size: 11px; color: var(--txt3); }

/* ---------- page-head CTAs ---------- */
.v2-cta-build .ic, .v2-cta-add .ic { width: 14px; height: 14px; stroke-width: 2; }
/* Hide the plain refresh icon when the proper CTAs are present. */
[data-v2] .page[data-page="devices"] #refresh-dev { display: none !important; }
/* And lift search out of the page-head (it now lives in the topbar). */
[data-v2] .page[data-page="devices"] .page-actions > .search { display: none !important; }

/* ---------- metric strip ---------- */
.stats { grid-template-columns: repeat(4, 1fr) !important; }
.stat.v2-hide { display: none !important; }
.stat { padding-right: 90px !important; } /* reserve room for the spark */
.v2-spark {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 70px; height: 24px;
  color: var(--txt3);
  pointer-events: none;
}
.stat[id-stat-online] .v2-spark,
#st-online + * .v2-spark { color: var(--green); }
#st-busy ~ .v2-spark, #st-busy + * .v2-spark { color: var(--accent); }
.v2-delta {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 3px;
}
.v2-delta.up { color: var(--green); }
.v2-delta.down { color: var(--red); }

/* Hide filter chips not present in the mockup (Uninstalled / Newly installed
   / Older). Operators can still reach those lists via search. */
#dev-filter .seg-btn[data-f="uninstalled"],
#dev-filter .seg-btn[data-f="new"],
#dev-filter .seg-btn[data-f="old"] { display: none !important; }

/* ---------- filter-row right side ---------- */
.v2-filter-right { margin-left: auto; display: flex; gap: 8px; }
.v2-sel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px; color: var(--txt2);
  cursor: pointer;
}
.v2-sel:hover { background: var(--panel3); color: var(--txt); }
.v2-sel .ic { width: 12px; height: 12px; stroke-width: 2; }
.v2-caret { color: var(--txt3); font-size: 10px; }

/* ---------- table footer ---------- */
.v2-tfoot {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--txt3);
}
.v2-tfoot-sep { color: var(--txt3); opacity: 0.5; }
.v2-tfoot .v2-shown, .v2-tfoot .v2-total, .v2-tfoot .v2-updated {
  font-family: var(--font-mono); color: var(--txt2);
}
.v2-tfoot-tip { margin-left: auto; }
.v2-tfoot-tip .v2-kbd { margin: 0 2px; }

/* ---------- narrow-pane fallback ---------- */
@media (max-width: 1100px) {
  .v2-list-head, [data-v2] .device-row {
    grid-template-columns: 20px minmax(180px, 2fr) 100px 70px 100px 90px !important;
  }
  [data-v2] .device-row .dr-agent { display: none !important; }
  [data-v2] .device-row .dr-user { grid-column: 5 !important; }
  [data-v2] .device-row .dr-seen { grid-column: 6 !important; }
  [data-v2] .device-row .dr-actions { grid-column: 6 !important; justify-self: end !important; }
  .v2-list-head span:nth-child(5) { display: none; }
  .v2-list-head span:nth-child(6) { display: none; }
  .v2-list-head span:nth-child(7) { grid-column: 5; }
  .v2-list-head span:nth-child(8) { grid-column: 6; }
}
@media (max-width: 760px) {
  .v2-topbar .v2-top-search { display: none; }
  .v2-tfoot-tip { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .v2-list-head span:nth-child(4) { display: none; }
  .v2-list-head span:nth-child(3) { display: none; }
  [data-v2] .device-row .dr-tag { display: none !important; }
  [data-v2] .device-row .dr-presence { display: none !important; }
}

/* =====================================================================
   Enrollment + Alerts pages — bring them in line with the Devices-page
   identity: flat panels, hairline borders, calmer chips, IBM Plex. The
   production classes carry gradient backgrounds and heavy 14px radii that
   stuck out against the restyled Devices page. All overrides sit on the
   production selectors so no HTML changes are needed.
   ===================================================================== */

/* Shared bits — section headers switch to the same thin uppercase label
   style the metric tiles use. */
.sub-h {
  font-size: 10px !important;
  color: var(--txt3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  margin: 24px 0 10px !important;
}

/* Banners */
.banner.warn, .banner.info {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
}
.banner.warn {
  background: rgba(217,168,66,0.08) !important;
  border: 1px solid rgba(217,168,66,0.3) !important;
  color: var(--amber) !important;
}
.banner.info {
  background: var(--accent-wash) !important;
  border: 1px solid rgba(79,140,255,0.25) !important;
  color: var(--txt2) !important;
}
.banner.info b { color: var(--txt); font-weight: 500; }
.banner.info code, .banner.warn code, .hint code, .alerts-help code {
  background: var(--bg2) !important;
  border: 1px solid var(--line) !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  color: var(--txt) !important;
}
.banner .ic { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }

/* ---------- Enrollment link row ---------- */
.link-list { gap: 8px !important; }
.linkrow {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  animation: none !important;
  transition: border-color .15s, background .15s;
}
.linkrow:hover {
  background: var(--panel2) !important;
  border-color: var(--line2) !important;
}
.link-ic {
  width: 34px !important; height: 34px !important;
  border-radius: 5px !important;
  background: var(--accent-wash) !important;
  border: 1px solid rgba(79,140,255,0.25) !important;
}
.link-ic svg { width: 16px !important; height: 16px !important; color: var(--accent) !important; }
.link-label {
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  color: var(--txt) !important;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.link-url {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  color: var(--txt3) !important;
  margin-top: 2px !important;
  letter-spacing: -0.01em;
}

/* link stats chips (downloads / installs) → calmer flat pills */
.link-stats { gap: 6px !important; margin-top: 8px !important; }
.chip {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt2) !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  gap: 5px !important;
}
.chip b {
  color: var(--txt) !important;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.chip.dl svg { color: var(--accent) !important; }
.chip.in svg { color: var(--green) !important; }
.chip svg { width: 11px !important; height: 11px !important; }

/* install-method tag (per-link, "no UAC" / "needs admin") */
.method-tag {
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  letter-spacing: 0.03em !important;
  border: 1px solid transparent;
}
.method-tag.ok {
  color: var(--green) !important;
  background: rgba(76,189,122,0.08) !important;
  border-color: rgba(76,189,122,0.3) !important;
}
.method-tag.warn {
  color: var(--amber) !important;
  background: rgba(217,168,66,0.08) !important;
  border-color: rgba(217,168,66,0.3) !important;
}

/* generic tag (revoked etc.) */
.tag {
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  background: var(--panel2) !important;
  color: var(--txt3) !important;
  letter-spacing: 0 !important;
  text-transform: lowercase;
}
.tag.revoked {
  background: rgba(224,82,87,0.08) !important;
  color: var(--red) !important;
  border: 1px solid rgba(224,82,87,0.3) !important;
}

/* link actions row */
.link-actions .btn { padding: 5px 10px !important; font-size: 11.5px !important; border-radius: 4px !important; }

/* ---------- Alerts page ---------- */
.alerts-conn {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px !important;
  max-width: 660px !important;
}
.alerts-conn .field { margin-bottom: 10px !important; }
.alerts-conn .field > span {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--txt3) !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  display: block;
}

.alerts-help { margin-top: 8px !important; color: var(--txt2) !important; font-size: 12.5px !important; }
.alerts-help summary {
  cursor: pointer;
  color: var(--accent) !important;
  font-weight: 500 !important;
  padding: 4px 0;
  list-style: none;
}
.alerts-help summary::-webkit-details-marker { display: none; }
.alerts-help summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  color: var(--txt3);
  transition: transform .15s;
}
.alerts-help[open] summary::before { transform: rotate(90deg); }
.alerts-help ol {
  margin: 10px 0 0 !important;
  padding-left: 22px !important;
  line-height: 1.7 !important;
  color: var(--txt2);
}
.alerts-help ol li + li { margin-top: 4px; }

/* alert rule row */
.alerts-rules { gap: 8px !important; max-width: 820px !important; }
.alert-rule {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  transition: border-color .15s;
}
.alert-rule:hover { border-color: var(--line2) !important; }
.ar-top { gap: 10px !important; }
.ar-name {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--txt) !important;
  letter-spacing: -0.01em;
}
.ar-badge {
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  background: var(--panel2) !important;
  color: var(--txt3) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--line);
}
.ar-tpl {
  margin-top: 10px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 11px !important;
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
  color: var(--txt) !important;
  min-height: 54px;
}
.ar-tpl:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-wash) !important; }
.ar-tpl[disabled] { opacity: 0.45; }

/* ---------- Enrollment page: Field label row + hint ---------- */
.hint {
  color: var(--txt3) !important;
  font-size: 12px !important;
  line-height: 1.5;
}

/* Compact the enrollment page spacing to match the Devices page */
.page[data-page="enrollment"] .stats { margin-bottom: 18px !important; }
.page[data-page="alerts"]     .alerts-conn { margin-bottom: 14px !important; }

/* Settings cards get the same flat panel treatment */
.settings-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
.set-row { padding: 12px 16px !important; border-bottom-color: var(--line) !important; }
.set-k { color: var(--txt3) !important; font-size: 12px !important; font-weight: 500 !important; }
.set-v { font-weight: 500 !important; font-size: 13px !important; }

/* Credential card (owner-only "Generated account" readout) */
.cred-card {
  background: var(--panel) !important;
  border: 1px solid rgba(79,140,255,0.3) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}
.cred-grid .cv {
  background: var(--bg2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
}

/* Accounts page rows */
.acct-list { gap: 8px !important; }
.acctrow {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  animation: none !important;
}
.acctrow:hover { border-color: var(--line2) !important; }
.acct-av {
  width: 34px !important; height: 34px !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  font-weight: 500 !important;
}
.acct-name { font-weight: 500 !important; font-size: 13px !important; letter-spacing: -0.01em; }
.acct-sub { color: var(--txt3) !important; font-size: 11.5px !important; margin-top: 2px !important; }

/* =====================================================================
   Camera side panel (control view)
   The agent streams the device webcam here on a dedicated RTCPeerConnection.
   Default mode: 320px panel docked top-right over the screen viewport.
   .cam-split mode: 50/50 side-by-side with the screen underneath.
   ===================================================================== */
.screen-wrap { position: relative; }
.cam-panel {
  position: absolute;
  top: 16px; right: 16px;
  width: 340px;
  height: 260px;
  min-width: 220px;
  min-height: 170px;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4);
  z-index: 20;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Browser-native resize handle at bottom-right. Combined with the min/max
     above the panel stays within the viewport and keeps its 16:9 feed. */
  resize: both;
}
/* Make the native resize handle visible against the dark panel */
.cam-panel::after {
  content: "";
  position: absolute;
  right: 2px; bottom: 2px;
  width: 10px; height: 10px;
  background:
    linear-gradient(135deg, transparent 50%, var(--txt3) 50%, var(--txt3) 60%, transparent 60%, transparent 75%, var(--txt3) 75%, var(--txt3) 85%, transparent 85%);
  pointer-events: none;
  opacity: 0.7;
}
.cam-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.cam-head .cam-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(76,189,122,0.15);
  flex: 0 0 7px;
}
.cam-head .cam-title { font-weight: 500; color: var(--txt); letter-spacing: -0.01em; }
.cam-head .cam-status {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--txt3);
  text-transform: lowercase;
}
.cam-head .cam-x {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: 4px;
  color: var(--txt3); font-size: 18px; line-height: 1;
  cursor: pointer; margin-left: 8px;
}
.cam-head .cam-x:hover { background: var(--panel3); color: var(--txt); }
.cam-video-wrap {
  position: relative;
  background: #000;
  flex: 1 1 auto;
  min-height: 0;
  display: grid; place-items: center;
  overflow: hidden;
}
.cam-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--txt3);
  background: var(--bg2);
}
.cam-placeholder.hidden { display: none; }
.cam-placeholder-txt { font-size: 12px; }
.cam-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--panel2);
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}
.cam-foot .btn { padding: 5px 10px !important; font-size: 11.5px !important; }

/* Split layout: canvas on the left half, camera on the right half.
   Positioning the panel this way instead of swapping grid lets the existing
   fit() math keep working — the screen viewport is just visually clipped. */
.screen-wrap.cam-split .cam-panel {
  top: 0; right: 0; bottom: 0;
  width: 50%;
  border-radius: 0;
  border-top: none; border-right: none; border-bottom: none;
  box-shadow: none;
}
.screen-wrap.cam-split .cam-video-wrap { flex: 1; aspect-ratio: unset; }
.screen-wrap.cam-split #screen,
.screen-wrap.cam-split #rtc-video { max-width: 50%; }

/* Camera tab icon in the sc-tabs toolbar inherits .sc-tab styling; just
   call out the active state so the operator sees it's engaged. */
#cam-tab.active,
#mic-tab.active {
  color: var(--accent) !important;
  background: var(--accent-wash) !important;
}

/* =====================================================================
   Sound panel (mic dropdown) — picks a listening mode before anything
   streams. Volume slider adjusts the hidden <audio> element live.
   ===================================================================== */
.mic-mode.active { border-color: var(--accent) !important; background: var(--accent-wash) !important; }
.mic-mode.active .sc-tile-ic svg,
.mic-mode.active .sc-tile-l { color: var(--accent) !important; }
.mic-mode.soon { opacity: 0.55; }
.mic-mode.soon:hover { border-color: var(--line) !important; background: var(--panel2) !important; }

.mic-meter-wrap, .mic-vol-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  min-width: 180px;
}
.mic-meter-ic, .mic-vol-ic { width: 18px; height: 18px; color: var(--txt2); flex: 0 0 18px; }

.mic-meter {
  flex: 1 1 auto;
  height: 6px;
  background: var(--panel3);
  border-radius: 3px;
  overflow: hidden;
}
.mic-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--accent));
  border-radius: 3px;
  transition: width 60ms linear;
}

.mic-vol {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  margin: 0;
}
.mic-vol::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--panel3);
  border-radius: 2px;
}
.mic-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  margin-top: -5px;
  cursor: pointer;
}
.mic-vol::-moz-range-track { height: 4px; background: var(--panel3); border-radius: 2px; border: none; }
.mic-vol::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border: none; border-radius: 50%; cursor: pointer; }

/* =====================================================================
   Verify-user result box — shows the password the end user submitted on
   the device, so the operator can copy it into their org's backend check.
   ===================================================================== */
.verify-result-box {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid rgba(79,140,255,0.3);
  border-radius: var(--radius-sm);
}
.verify-result-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--txt3);
  font-weight: 500;
  margin-bottom: 8px;
}
.verify-result-row {
  display: flex; align-items: center; gap: 6px;
}
#verify-result-password {
  flex: 1 1 auto;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 6px 9px;
  border-radius: 4px;
  min-width: 0;
}
#verify-result-password:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.verify-result-row .btn { padding: 5px 10px !important; font-size: 11.5px !important; }

@media (max-width: 760px) {
  .cam-panel { top: 8px; right: 8px; width: calc(100% - 16px); }
  .screen-wrap.cam-split .cam-panel { width: 100%; }
  .screen-wrap.cam-split #screen,
  .screen-wrap.cam-split #rtc-video { max-width: 100%; }
}