/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE SHELL — full-site smart reflow (load LAST)
   Breakpoints: 1280 / 900 / 640
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR — 2 rows, no horizontal scroll
   Row 1: brand · device chip · purchase/search/logout
   Row 2: full-width nav that wraps (all labels visible)
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  /* Allow 2 rows — never force a single scroller strip */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 8px 14px 8px !important;
}
/* Row 1 items */
#btnBackToList.tb-back { order: 1 !important; flex: 0 0 auto !important; }
.topbar-brand {
  order: 2 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
#topbarDeviceChip.topbar-device-chip {
  order: 3 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
#notifCenter.notif-center {
  order: 4 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: min(520px, 52vw) !important;
}
.topbar-right {
  order: 5 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-left: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
}

/* Row 2: full-width wrapping nav — every item visible, no X-scroll */
.topbar-nav,
#topbarNav.topbar-nav {
  order: 10 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: none !important;
  box-sizing: border-box !important;
}
.topbar-nav::-webkit-scrollbar { display: none !important; height: 0 !important; }

/* Compact but fully labeled nav chips — wrap instead of scroll */
.topbar-nav .topnav-btn,
.topbar button.topnav-btn,
a.topnav-btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  gap: 5px !important;
}
.topbar-nav .topnav-btn > span:not(.topnav-badge) {
  display: inline !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}
.topbar-nav .topnav-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Overflow menu still available (device view / very narrow) */
.topbar-overflow-btn {
  display: none !important;
  flex: 0 0 auto !important;
  min-width: 40px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: #f5f5f7 !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  padding: 0 10px !important;
}
/* Position is set in JS (fixed under ☰). Never use top:auto on body — menu was invisible. */
.topbar-overflow-menu {
  display: none;
  position: fixed;
  right: auto;
  top: 0;
  left: 0;
  z-index: 10050;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: min(70vh, 480px);
  overflow-y: auto;
  background: #1d1d1f;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  padding: 6px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.topbar-overflow-menu.open {
  display: block !important;
}
.topbar-overflow-menu button,
.topbar-overflow-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.topbar-overflow-menu button:hover,
.topbar-overflow-menu a:hover {
  background: rgba(255,255,255,.1);
}
.topbar-overflow-menu button.ov-danger {
  color: #ff8a80;
}
.topbar-overflow-menu .topbar-overflow-empty {
  padding: 14px;
  color: rgba(235,235,245,.55);
  font-size: 13px;
  text-align: center;
}
/* Make ☰ easier to hit when top nav is hidden */
.topbar-overflow-btn {
  border-radius: 50% !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  background: rgba(20, 22, 30, 0.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
}
.topbar-overflow-btn:hover {
  background: rgba(40, 44, 56, 0.98) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* Device mode: hide fleet nav — must beat #topbarNav.topbar-nav { display:flex } */
body.device-view-active .topbar-nav,
body.device-view-active #topbarNav,
body.device-view-active #topbarNav.topbar-nav,
body.device-view-active header.topbar .topbar-nav,
body.device-view-active header.topbar #topbarNav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  order: unset !important;
  flex: none !important;
  width: 0 !important;
  min-width: 0 !important;
}
body.device-view-active #searchInput,
body.device-view-active #deviceCount {
  display: none !important;
}
body.device-view-active .topbar-overflow-btn {
  display: inline-flex !important;
}
/* Single-row height when nav hidden (device view) */
body.device-view-active .topbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  flex-wrap: nowrap !important; /* no second row for ghost nav */
}

/* Medium: keep labels, slightly denser */
@media (max-width: 1279px) {
  .topbar-nav .topnav-btn {
    padding: 0 8px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
  #searchInput.search {
    max-width: 160px !important;
  }
  .topbar-title {
    font-size: 15px !important;
  }
}

/* Narrow: still wrap — no horizontal nav scroll */
@media (max-width: 900px) {
  .topbar {
    padding: 6px 8px 8px !important;
    row-gap: 6px !important;
  }
  .topbar-nav .topnav-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }
  /* Optional: hide long brand author line */
  .topbar-author {
    display: none !important;
  }
  #searchInput.search {
    max-width: 120px !important;
  }
  .dev-count {
    display: none !important;
  }
}

/* ── ≤ 900: keep 2-row wrapping nav (no hide/scroll) ─────────────────────── */
@media (max-width: 900px) {
  .topbar {
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
  }
  .topbar-title { font-size: 15px !important; }
  /* Nav stays visible and wraps — do not force overflow menu only */
  .topbar-nav {
    display: flex !important;
  }
  .topbar-overflow-btn {
    display: none !important; /* only shown in device-view-active */
  }
  #searchInput.search {
    max-width: 110px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  .topnav-exit span,
  #logoutBtn span {
    display: none !important;
  }
  /* Device feature rail horizontal */
  .dev-body {
    flex-direction: column !important;
  }
  .dtab-nav,
  .dtab-nav.expanded {
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    min-height: 48px !important;
  }
  .dtab-label { display: none !important; }
}

/* ── ≤ 640: phone shell ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Keep short brand; nav still wraps on row 2 */
  .topbar-brand .topbar-title {
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #searchInput.search { max-width: 96px !important; }
  #deviceCount { display: none !important; }
  .topbar-nav .topnav-btn {
    padding: 0 7px !important;
    font-size: 11px !important;
  }
  .login-box {
    width: min(100%, 100vw - 24px) !important;
    max-width: 100% !important;
    padding: 28px 18px 22px !important;
    margin: 12px !important;
  }
  .login-overlay {
    align-items: flex-start !important;
    padding: 24px 0 !important;
    overflow-y: auto !important;
  }
  .dev-grid:not(.view-list) {
    grid-template-columns: 1fr !important;
    padding: 10px 12px 32px !important;
  }
  .fleet-view .list-toolbar,
  .list-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Prevent whole-page horizontal scroll from chrome */
html, body, #app {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
#app {
  overflow-x: hidden !important;
}

/* Paywall lock */
#paywallOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#paywallOverlay.open {
  display: flex;
}
.paywall-card {
  width: min(400px, 100%);
  background: #1d1d1f;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.paywall-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #f5f5f7;
}
.paywall-card p {
  margin: 0 0 20px;
  color: rgba(245,245,247,.55);
  font-size: 14px;
  line-height: 1.45;
}
.paywall-card .paywall-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paywall-card button {
  min-height: 48px;
  border-radius: 980px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.paywall-card .paywall-buy {
  background: #0071e3;
  color: #fff;
}
.paywall-card .paywall-logout {
  background: rgba(255,255,255,.08);
  color: #f5f5f7;
}

/* ── APK wait modal (trial personal build) ───────────────────────────────── */
.apk-wait-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-sizing: border-box;
  pointer-events: none; /* default: never steal clicks from login */
}
.apk-wait-overlay.open {
  display: flex !important;
  pointer-events: auto;
}
.apk-wait-overlay[hidden],
.apk-wait-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* While login is visible, APK modal must never intercept clicks */
#loginOverlay:not(.hidden) ~ #apkWaitOverlay,
body:has(#loginOverlay:not(.hidden)) #apkWaitOverlay {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* Keep trial CTA always tappable on success panel */
#trialEnterApp {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}
.apk-wait-card {
  position: relative;
  width: min(360px, 100%);
  background: #1d1d1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px 14px 12px;
  text-align: left;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.apk-wait-x {
  position: absolute;
  top: 8px;
  right: 8px;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(245, 245, 247, 0.45);
  font-size: 14px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
}
.apk-wait-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.apk-wait-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 22px;
  margin-bottom: 10px;
}
.apk-wait-logo {
  flex-shrink: 0;
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}
.apk-wait-head-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.apk-wait-card h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.apk-wait-msg {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(245, 245, 247, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apk-wait-progress {
  width: 100%;
  height: 5px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 6px;
}
.apk-wait-progress-fill {
  height: 100%;
  width: 5%;
  border-radius: 980px;
  background: linear-gradient(90deg, #0071e3, #2997ff, #64d2ff);
  background-size: 200% 100%;
  transition: width 0.45s ease;
  animation: apkWaitShimmer 1.6s linear infinite;
}
.apk-wait-overlay.is-done .apk-wait-progress-fill {
  background: linear-gradient(90deg, #30d158, #64d2ff);
  animation: none;
}
.apk-wait-overlay.is-error .apk-wait-progress-fill {
  background: #ff453a;
  animation: none;
}
/* When ready: hide long progress chrome — focus download */
.apk-wait-overlay.is-done .apk-wait-progress,
.apk-wait-overlay.is-done .apk-wait-step {
  display: none;
}
.apk-wait-overlay.is-done .apk-wait-msg {
  color: rgba(48, 209, 88, 0.9);
}
@keyframes apkWaitShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.apk-wait-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 245, 247, 0.5);
  flex-shrink: 0;
  line-height: 1.2;
}
.apk-wait-step {
  margin: 0 0 8px;
  font-size: 11px;
  color: #2997ff;
  min-height: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apk-wait-overlay.is-done .apk-wait-step { color: #30d158; }
.apk-wait-overlay.is-error .apk-wait-step { color: #ff453a; }
.apk-wait-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.apk-wait-primary,
.apk-wait-secondary {
  min-height: 34px;
  border-radius: 980px;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 14px;
}
.apk-wait-primary {
  flex: 1 1 auto;
  background: #0071e3;
  color: #fff;
}
.apk-wait-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.apk-wait-primary.is-ready {
  background: #30d158;
  color: #000;
}
.apk-wait-secondary {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 247, 0.85);
}
/* Left of live-chat FAB (~56px) so FAB never covers / closes the chip */
.apk-wait-chip {
  position: fixed;
  right: max(88px, calc(16px + 64px + env(safe-area-inset-right, 0px)));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 980px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(28, 28, 30, 0.94);
  color: #f5f5f7;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  max-width: min(240px, calc(100vw - 120px));
}
.apk-wait-chip.hidden { display: none !important; }
/* Device page: topbar already has APK ready menu — hide float so it never covers live chat */
body.device-view-active .apk-wait-chip {
  display: none !important;
}
.apk-wait-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2997ff;
  box-shadow: 0 0 0 0 rgba(41, 151, 255, 0.5);
  animation: apkWaitPulse 1.4s ease infinite;
}
.apk-wait-chip.is-ready .apk-wait-chip-dot {
  background: #30d158;
  animation: none;
}
@keyframes apkWaitPulse {
  0% { box-shadow: 0 0 0 0 rgba(41, 151, 255, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(41, 151, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(41, 151, 255, 0); }
}

/* Trial countdown + purchase (side by side in topbar) */
.trial-actions {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.trial-actions.show { display: inline-flex; }
#trialCountdown {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,159,10,.18);
  color: #ff9f0a;
  white-space: nowrap;
  flex-shrink: 0;
}
#trialCountdown.show { display: inline-flex; }
#trialCountdown.warn {
  background: rgba(255,69,58,.2);
  color: #ff453a;
}
.topbar-purchase-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  min-height: 28px;
  border-radius: 980px;
  border: 1px solid rgba(48, 209, 88, 0.4);
  background: rgba(48, 209, 88, 0.16);
  color: #30d158;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s ease, transform .12s ease;
}
.topbar-purchase-btn.show { display: inline-flex; }
.topbar-purchase-btn:hover {
  background: rgba(48, 209, 88, 0.28);
  transform: translateY(-0.5px);
}
.topbar-purchase-btn:focus-visible {
  outline: 2px solid #30d158;
  outline-offset: 2px;
}
/* Ensure purchase click is never blocked */
.topbar-right .trial-actions,
.topbar-right .topbar-purchase-btn {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Purchase panel always on top of dashboard chrome — centered, no page scroll */
#purchasePanel.purchase-panel:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10060 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
#purchasePanel.purchase-panel.hidden,
#purchasePanel.purchase-panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Close button always clickable above content */
#purchasePanel .pur-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}
#purchasePanel .pur-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
#purchasePanel .purchase-box {
  position: relative !important;
}
/* Step 2: amount + wallet side-by-side on wider screens */
@media (min-width: 520px) {
  #purchaseStep2 .pur-pay-grid {
    grid-template-columns: 1fr 1.15fr !important;
    align-items: stretch !important;
  }
}
#purchaseStep2 .pur-wallet-section {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
#purchaseStep2 .pur-wallet-qr {
  width: 128px !important;
  height: 128px !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
.pur-qr-hint {
  font-size: 10px !important;
  color: rgba(235, 235, 245, 0.4) !important;
  text-align: center !important;
  margin-top: 4px !important;
}
.pur-account-box {
  width: 100% !important;
  margin: 10px 0 8px !important;
  padding: 12px 12px !important;
  border-radius: 14px !important;
  background: rgba(48, 209, 88, 0.08) !important;
  border: 1px solid rgba(48, 209, 88, 0.28) !important;
  box-sizing: border-box !important;
}
.pur-account-label {
  font-size: 10.5px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(48, 209, 88, 0.9) !important;
  margin-bottom: 8px !important;
}
.pur-account-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 !important;
  min-width: 0 !important;
}
.pur-account-k {
  flex: 0 0 72px !important;
  font-size: 12px !important;
  color: rgba(235, 235, 245, 0.5) !important;
}
.pur-account-v {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #f5f5f7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  word-break: break-all !important;
}
.pur-account-v.is-empty { opacity: 0.45 !important; }
.pur-account-copy {
  appearance: none !important;
  flex-shrink: 0 !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}
.pur-account-hint {
  margin: 8px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: rgba(235, 235, 245, 0.5) !important;
}
.pur-account-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
.pur-btn-sm {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  border-radius: 9px !important;
}
.pur-edit-form {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.pur-edit-form[hidden] { display: none !important; }
.pur-edit-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  color: rgba(235, 235, 245, 0.5) !important;
}
.pur-edit-input {
  min-height: 34px !important;
  font-size: 13px !important;
}
.pur-edit-actions {
  display: flex !important;
  gap: 8px !important;
}
.pur-email-step2 {
  margin: 0 0 8px !important;
}
.pur-copy-xs {
  min-height: 24px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  margin-left: 6px !important;
}
#purchaseStep2 .pur-step2-actions-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: stretch !important;
}
#purchaseStep2 .pur-step2-actions-row .pur-btn-ghost {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html[data-theme="light"] .pur-account-box {
  background: rgba(48, 209, 88, 0.08) !important;
  border-color: rgba(48, 209, 88, 0.25) !important;
}
html[data-theme="light"] .pur-account-v {
  color: #1c1c1e !important;
}
html[data-theme="light"] .pur-account-k,
html[data-theme="light"] .pur-account-hint {
  color: #6c6c70 !important;
}
.pur-account-box {
  width: 100%;
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(48, 209, 88, 0.08);
  border: 1px solid rgba(48, 209, 88, 0.28);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pur-account-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #30d158;
  margin: 0;
}
/* Slot model: label | value+copy — keys share a fixed edge */
.pur-account-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  min-width: 0;
}
.pur-account-k {
  color: rgba(245, 245, 247, 0.55);
  font-weight: 600;
  flex: 0 0 88px;
  width: 88px;
  padding-top: 6px;
  line-height: 1.3;
}
.pur-account-val-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}
/* Full credentials visible — no ellipsis (user must copy exact password) */
.pur-account-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f7;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 10px;
  border-radius: 8px;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  text-overflow: clip;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.35;
  text-align: end;
  user-select: all;
  -webkit-user-select: all;
}
.pur-account-v.is-empty {
  color: rgba(245, 245, 247, 0.4);
  font-style: italic;
}
.pur-account-pass {
  color: #30d158;
  letter-spacing: 0.02em;
}
.pur-account-copy {
  appearance: none;
  flex-shrink: 0;
  border: 1px solid rgba(48, 209, 88, 0.4);
  background: rgba(48, 209, 88, 0.12);
  color: #30d158;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.pur-account-copy:hover {
  background: rgba(48, 209, 88, 0.22);
}
.pur-account-copy:active {
  transform: scale(0.97);
}
.pur-account-hint {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(245, 245, 247, 0.55);
  word-break: break-word;
}
.pur-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.pur-account-actions-compact {
  margin-top: 4px;
}
.pur-edit-creds {
  appearance: none;
  flex: 1 1 auto;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  padding: 0 12px;
}
.pur-edit-creds:hover {
  background: rgba(255, 255, 255, 0.1);
}
.pur-edit-creds:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.4);
}
.pur-download-creds {
  flex: 1 1 auto;
}
.pur-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pur-edit-form[hidden] {
  display: none !important;
}
.pur-edit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
  margin: 2px 0 0;
}
.pur-edit-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.4);
  color: #f5f5f7;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pur-edit-input:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}
.pur-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.pur-edit-save {
  appearance: none;
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 980px;
  background: #0071e3;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pur-edit-save:hover { filter: brightness(1.06); }
.pur-edit-cancel {
  appearance: none;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 980px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(245, 245, 247, 0.75);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pur-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}
.dc-shot-preview.has-img {
  cursor: pointer;
}
.dc-shot-preview-demo {
  cursor: pointer;
  opacity: 0.85;
}
.dc-shot-preview-demo .dc-shot-refresh {
  display: none !important;
}

/* ── Trial / non-paid promo banner (recurring) ───────────────────────────── */
.trial-promo-banner {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(120%);
  z-index: 9500;
  width: min(560px, calc(100vw - 24px));
  pointer-events: none;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.trial-promo-banner.is-open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.trial-promo-banner[hidden] {
  display: none !important;
}
.trial-promo-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 14px;
  border-radius: 18px;
  background: rgba(28, 28, 30, 0.96);
  border: 1px solid rgba(48, 209, 88, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(48, 209, 88, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.trial-promo-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.trial-promo-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.trial-promo-title {
  font-size: 14px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  line-height: 1.25;
}
.trial-promo-text {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245, 245, 247, 0.72);
  max-width: 36ch;
}
.trial-promo-tg {
  color: #64d2ff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.trial-promo-tg:hover { text-decoration: underline; }
.trial-promo-bug {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(235, 235, 245, 0.55);
  max-width: 42ch;
}
/* Light theme: keep dark glass panel + light text (global light rules force #1c1c1e otherwise) */
html[data-theme="light"] .trial-promo-banner .trial-promo-inner,
body.theme-light .trial-promo-banner .trial-promo-inner {
  background: rgba(28, 28, 30, 0.97) !important;
  border-color: rgba(48, 209, 88, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 40px rgba(48, 209, 88, 0.1) !important;
}
html[data-theme="light"] .trial-promo-title,
html[data-theme="light"] .trial-promo-banner .trial-promo-title,
body.theme-light .trial-promo-title {
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
}
html[data-theme="light"] .trial-promo-text,
html[data-theme="light"] .trial-promo-banner .trial-promo-text,
html[data-theme="light"] .trial-promo-banner .trial-promo-text span,
html[data-theme="light"] .trial-promo-banner .trial-promo-copy,
html[data-theme="light"] .trial-promo-banner .trial-promo-copy span,
html[data-theme="light"] .trial-promo-banner .trial-promo-copy div,
body.theme-light .trial-promo-text {
  color: rgba(245, 245, 247, 0.82) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.82) !important;
}
html[data-theme="light"] .trial-promo-bug,
html[data-theme="light"] .trial-promo-banner .trial-promo-bug,
body.theme-light .trial-promo-bug {
  color: rgba(235, 235, 245, 0.62) !important;
  -webkit-text-fill-color: rgba(235, 235, 245, 0.62) !important;
}
html[data-theme="light"] .trial-promo-tg,
html[data-theme="light"] .trial-promo-banner .trial-promo-tg,
body.theme-light .trial-promo-tg {
  color: #64d2ff !important;
  -webkit-text-fill-color: #64d2ff !important;
}
html[data-theme="light"] .trial-promo-icon,
html[data-theme="light"] .trial-promo-icon .ico,
html[data-theme="light"] .trial-promo-banner .trial-promo-icon,
body.theme-light .trial-promo-icon {
  color: rgba(245, 245, 247, 0.75) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.75) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .trial-promo-contact,
body.theme-light .trial-promo-contact {
  color: #64d2ff !important;
  -webkit-text-fill-color: #64d2ff !important;
  border-color: rgba(100, 210, 255, 0.4) !important;
  background: rgba(10, 132, 255, 0.16) !important;
}
html[data-theme="light"] .trial-promo-bug-btn,
body.theme-light .trial-promo-bug-btn {
  color: #ffd60a !important;
  -webkit-text-fill-color: #ffd60a !important;
  border-color: rgba(255, 159, 10, 0.5) !important;
  background: rgba(255, 159, 10, 0.16) !important;
}
html[data-theme="light"] .trial-promo-buy,
body.theme-light .trial-promo-buy {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] .trial-promo-dismiss,
body.theme-light .trial-promo-dismiss {
  color: rgba(245, 245, 247, 0.55) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.55) !important;
}
html[data-theme="light"] .trial-promo-dismiss:hover,
body.theme-light .trial-promo-dismiss:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.trial-promo-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.trial-promo-buy {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #30d158, #248a3d);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(48, 209, 88, 0.35);
}
.trial-promo-buy:hover { filter: brightness(1.06); }
.trial-promo-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 600;
  color: #64d2ff;
  border: 1px solid rgba(100, 210, 255, 0.35);
  background: rgba(10, 132, 255, 0.12);
  text-decoration: none;
  white-space: nowrap;
}
.trial-promo-contact:hover { background: rgba(10, 132, 255, 0.22); }
.trial-promo-bug-btn {
  appearance: none;
  border: 1px solid rgba(255, 159, 10, 0.45);
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 600;
  color: #ffd60a;
  background: rgba(255, 159, 10, 0.12);
  white-space: nowrap;
}
.trial-promo-bug-btn:hover { background: rgba(255, 159, 10, 0.22); }
.trial-promo-dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(245, 245, 247, 0.45);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 6px;
  position: absolute;
  top: 6px;
  right: 8px;
}
.trial-promo-dismiss:hover { color: #fff; }
@media (max-width: 560px) {
  .trial-promo-inner {
    flex-wrap: wrap;
    padding: 12px 36px 12px 12px;
    align-items: flex-start;
  }
  .trial-promo-text { max-width: none; }
  .trial-promo-actions {
    width: 100%;
    margin-top: 4px;
  }
  .trial-promo-buy { flex: 1; }
}

/* Login trial UI */
.login-box.login-comfortable {
  width: min(400px, 94vw) !important;
  gap: 16px !important;
}
.login-trial-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-trial-cta {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 980px !important;
  background: #0071e3 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 24px rgba(0,113,227,.28) !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}
.login-trial-cta:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 28px rgba(0,113,227,.36) !important;
}
.login-trial-cta:active:not(:disabled) { transform: translateY(0); filter: brightness(.98); }
.login-trial-cta:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,113,227,.45), 0 8px 24px rgba(0,113,227,.28) !important;
}
.login-trial-cta:disabled { opacity: .5; cursor: not-allowed; }
.login-trial-hint {
  font-size: 12px;
  color: rgba(245,245,247,.45);
  text-align: center;
  line-height: 1.4;
}
.login-success-panel {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  padding: 4px 0 2px;
  animation: loginSuccessIn .28s ease both;
}
@keyframes loginSuccessIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-success-panel { animation: none; }
  .login-trial-cta { transition: none !important; }
  .login-trial-cta:hover:not(:disabled) { transform: none; }
}
.login-success-panel.show { display: flex; }
.login-cred-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(29,29,31,.92);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  min-height: 44px;
}
.login-cred-row code {
  font-family: ui-monospace, Menlo, monospace;
  color: #2997ff;
  word-break: break-all;
  user-select: all;
}
.login-success-panel .login-register-btn {
  width: 100%;
}
.login-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245,245,247,.4);
  margin: 4px 0 0;
}
/* Hide only trial captcha block after success — keep sign-in form visible */
.login-box.mode-success .login-trial-block,
.login-box.mode-success .login-register {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: topbar alignment + device card Operate docks (2026-08-02)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar: fixed height, 3 zones, no crush ─────────────────────────────── */
header.topbar,
.topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 14px !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
.topbar-brand {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.topbar-nav {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 3px !important;
  background: rgba(120,120,128,.16) !important;
  border-radius: 12px !important;
}
/* Back button sits in brand zone when visible — hide on fleet */
body:not(.device-view-active) #btnBackToList,
#btnBackToList.hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
}
body.device-view-active #btnBackToList:not(.hidden) {
  display: inline-flex !important;
  grid-column: 1 !important;
  margin-left: 4px !important;
}
/* When in device view, hide the tab strip (use ☰) */
body.device-view-active .topbar-nav {
  display: none !important;
}
body.device-view-active header.topbar {
  grid-template-columns: auto 1fr auto !important;
}

.topbar-right {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}
.topbar-right .search,
#searchInput {
  width: 160px !important;
  max-width: 160px !important;
  min-width: 120px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
}
#deviceCount {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* Equal icon tabs */
.topbar-nav .topnav-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  gap: 6px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.topbar-nav .topnav-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1100px) {
  .topbar-nav .topnav-btn > span:not(.topnav-badge) {
    display: none !important;
  }
  .topbar-nav .topnav-btn {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
  }
  .topbar-nav .topnav-btn .topnav-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    min-width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    margin: 0 !important;
  }
  .topbar-nav .topnav-btn {
    position: relative !important;
  }
}
@media (max-width: 900px) {
  header.topbar {
    grid-template-columns: auto 1fr auto !important;
  }
  .topbar-nav {
    display: none !important;
  }
  .topbar-overflow-btn {
    display: inline-flex !important;
  }
  #searchInput {
    width: 110px !important;
    min-width: 90px !important;
  }
}

/* ── Device cards: Operate dock INSIDE card, clean 2-up pairs ────────────── */
.fleet-view .dev-grid.view-cards,
.fleet-view #devGrid.view-cards {
  align-items: stretch !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 24px !important;
  row-gap: 32px !important;
  gap: 32px 24px !important;
  padding-bottom: 48px !important;
}
.dc {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* clip shine; dock is inside */
  border-radius: 18px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  background: rgba(28,28,30,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.dc-head,
.dc-metrics,
.dc-foot {
  flex-shrink: 0 !important;
  min-width: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.dc-foot {
  flex: 1 1 auto !important;
  align-content: flex-start !important;
  padding-bottom: 8px !important;
  border-top: none !important;
  background: transparent !important;
  margin-top: 0 !important;
}
.dc-chips {
  max-width: 100% !important;
}
.dc-chip {
  max-width: 100% !important;
}

/* Action dock: 2 fixed rows, always inside */
.dc > .dc-actions,
.dc > .qa-bar,
.fleet-view .dc > .dc-actions,
.fleet-view .dc > .qa-bar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  align-items: stretch !important;
  padding: 10px 12px 12px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.28) !important;
  border-radius: 0 0 17px 17px !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Operate: full width row 1 */
.dc .dc-act.primary,
.dc-act.primary {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  order: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: #0071e3 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Icon row: full width row 2, even spacing */
.dc .dc-act-group,
.dc-act-group {
  grid-row: 2 !important;
  grid-column: 1 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  order: 0 !important;
  margin: 0 !important;
  flex: none !important;
}
.dc .dc-act-group .dc-act,
.dc-act-group .dc-act {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 44px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
}
.dc .dc-act.more,
.dc-act.more {
  grid-row: 2 !important;
  /* place more as last in group via DOM; if outside group: */
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
  flex: 1 1 0 !important;
  max-width: 44px !important;
  height: 36px !important;
}

/* If "more" is sibling after group, put both on row 2 via subgrid-like flex */
.dc > .dc-actions {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.dc > .dc-actions > .dc-act.primary {
  width: 100% !important;
  flex: 0 0 auto !important;
}
.dc > .dc-actions > .dc-act-group {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}
.dc > .dc-actions > .dc-act.more {
  position: static !important;
}
.dc > .dc-actions > .dc-act-group {
  padding-right: 0 !important;
}

/* Cred Pass chip must not sit over dock */
.dc-chip.cred {
  position: static !important;
  margin-bottom: 4px !important;
}

/* No hover lift that breaks alignment */
.dc:hover {
  transform: none !important;
}
.dc .dc-act:hover {
  transform: none !important;
}

@media (max-width: 640px) {
  #devGrid {
    grid-template-columns: 1fr !important;
  }
  .dc > .dc-actions > .dc-act.primary {
    height: 44px !important;
    min-height: 44px !important;
  }
  .dc-act-group .dc-act {
    height: 40px !important;
    min-height: 40px !important;
    max-width: none !important;
  }
}

/* ── Login shell (center card in viewport; lang fixed top) ───────────────── */
.login-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important; /* vertical center — not top-aligned */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  min-height: 100dvh !important;
  height: 100% !important;
  width: 100% !important;
}
/* CRITICAL: must beat `.login-overlay { display:flex !important }` or Open dashboard / login never leave this screen */
#loginOverlay.login-overlay.hidden,
.login-overlay.hidden,
#loginOverlay.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -1 !important;
  opacity: 0 !important;
}
/* Chrome lives fixed outside normal flow — hide with overlay */
#loginOverlay.hidden .login-chrome,
#loginOverlay.login-overlay.hidden .login-chrome,
body.app-entered .login-chrome {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#app.hidden {
  display: none !important;
}
#app:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
}
/* Invite-code registration hidden (trial is primary path) */
.login-register,
details.login-register {
  display: none !important;
}

/* Card: compact, full width of column, no fixed min-height that overflows */
.login-box,
.login-box.login-comfortable {
  width: min(100%, 400px) !important;
  max-width: 400px !important;
  margin: 0 auto 24px !important;
  padding: 20px 18px 18px !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.login-ghost {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 2px !important;
}
.login-brand {
  text-align: center;
  margin-bottom: 0 !important;
}
.login-title {
  font-size: 24px !important;
  line-height: 1.15 !important;
}
.login-tagline,
.login-sub {
  text-align: center;
  max-width: 36ch;
  margin: 4px auto 0 !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
}

/* Lang row: always near top so never “below the fold” */
.login-lang-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 2px 0 4px !important;
  order: 0;
}
.login-lang-row .lang-btn {
  min-width: 40px !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  font-size: 12px !important;
}

.login-trial-block,
.login-section {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

/* Success panel: HIDDEN by default (was incorrectly always flex) */
.login-success-panel {
  display: none !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.login-success-panel.show {
  display: flex !important;
}

/* After trial success: hide only captcha/trial CTA — keep sign-in form so
   credentials from the .txt file can be used (Connect) without refreshing */
.login-box.mode-success .login-trial-block {
  display: none !important;
}
.login-box.mode-success .login-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.login-box.mode-success .login-divider {
  display: flex !important;
}
.login-box.mode-success .login-register {
  display: none !important;
}

.login-captcha-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.login-captcha-label {
  flex: 0 0 auto !important;
  min-width: 4.5rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  padding: 0 10px !important;
  font-size: 14px !important;
}
.login-captcha-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}
.login-invite-input,
.login-trial-cta,
.login-register-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
}
.login-trial-cta {
  min-height: 46px !important;
}
.login-trial-hint {
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.login-section-title {
  margin: 2px 0 0 !important;
  font-size: 10px !important;
}
.login-contacts {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.login-divider {
  width: 100% !important;
  text-align: center !important;
  margin: 2px 0 !important;
}
.login-cred-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
}
#trialApkStatus:empty { display: none !important; }

/* Short viewports: tighter still */
@media (max-height: 780px) {
  .login-box,
  .login-box.login-comfortable {
    padding: 14px 14px 14px !important;
    gap: 8px !important;
  }
  .login-ghost {
    width: 48px !important;
    height: 48px !important;
  }
  .login-title { font-size: 22px !important; }
  .login-trial-hint:not(#trialApkStatus) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Keep language picker visible after login on mobile */
@media (max-width: 640px) {
  .fleet-header-right .lang-picker {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
  }
  .fleet-header-right .lang-picker .lang-btn {
    min-width: 36px;
    min-height: 32px;
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* When login overlay is open, page itself must not trap scroll */
html:has(#loginOverlay:not(.hidden)),
body:has(#loginOverlay:not(.hidden)) {
  overflow: hidden !important;
  height: 100% !important;
}
/* Fallback if :has unsupported — login overlay owns scroll */
#loginOverlay:not(.hidden) {
  overflow-y: auto !important;
}

/* Full viewport: center card; allow scroll only if content taller than screen */
#loginOverlay.login-overlay {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  width: 100% !important;
  padding: 56px 12px 16px !important; /* room for fixed lang bar */
  box-sizing: border-box !important;
}
#loginOverlay .login-box {
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

/* Short laptop: keep the comfortable card (do not crush padding/CTA). */

/* Trial success: drop redundant sign-in block on small screens so no scroll */
@media (max-height: 900px) {
  #loginOverlay .login-box.mode-success .login-divider,
  #loginOverlay .login-box.mode-success .login-section {
    display: none !important;
  }
  #loginOverlay .login-box.mode-success .login-contacts {
    margin-top: 4px !important;
  }
  #loginOverlay .login-box.mode-success .login-trial-hint:not(#trialApkStatus) {
    display: none !important;
  }
  #loginOverlay .login-box.mode-success {
    padding: 12px 14px 10px !important;
    gap: 6px !important;
  }
}
/* Very short: hide contacts too; Open dashboard is enough */
@media (max-height: 640px) {
  #loginOverlay .login-box.mode-success .login-contacts {
    display: none !important;
  }
  #loginOverlay .login-ghost.login-logo {
    width: 40px !important;
    max-height: 44px !important;
  }
}

/* ── BTMOB brand logo ────────────────────────────────────────────────────── */
.login-ghost.login-logo {
  display: block !important;
  width: 80px !important;
  height: auto !important;
  max-height: 96px !important;
  margin: 0 auto 4px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 18px rgba(57, 255, 140, 0.35))
          drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)) !important;
  background: transparent !important;
}
.login-title {
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.topbar-ghost.topbar-logo {
  width: 28px !important;
  height: 32px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 6px rgba(57, 255, 140, 0.45)) !important;
  background: transparent !important;
}
.topbar-title {
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html[data-theme="light"] .topbar-title,
body.theme-light .topbar-title {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
/* Telegram — topbar right (not under brand) */
.topbar-tg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 980px !important;
  border: 1px solid rgba(41, 151, 255, 0.35) !important;
  background: rgba(41, 151, 255, 0.12) !important;
  color: #64d2ff !important;
  -webkit-text-fill-color: #64d2ff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease !important;
}
.topbar-tg:hover {
  background: rgba(41, 151, 255, 0.22) !important;
  border-color: rgba(41, 151, 255, 0.55) !important;
  filter: brightness(1.05) !important;
}
.topbar-tg svg { flex-shrink: 0 !important; }
html[data-theme="light"] .topbar-tg,
body.theme-light .topbar-tg {
  background: rgba(0, 113, 227, 0.1) !important;
  border-color: rgba(0, 113, 227, 0.28) !important;
  color: #0071e3 !important;
  -webkit-text-fill-color: #0071e3 !important;
}
/* Desktop version — icon-only next to Telegram in topbar */
.topbar-desktop {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 980px !important;
  border: 1px solid rgba(100, 210, 255, 0.32) !important;
  background: rgba(100, 210, 255, 0.10) !important;
  color: #64d2ff !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease !important;
}
.topbar-desktop:hover {
  background: rgba(100, 210, 255, 0.20) !important;
  border-color: rgba(100, 210, 255, 0.55) !important;
  filter: brightness(1.06) !important;
}
.topbar-desktop svg {
  flex-shrink: 0 !important;
  display: block !important;
}
html[data-theme="light"] .topbar-desktop,
body.theme-light .topbar-desktop {
  background: rgba(0, 113, 227, 0.08) !important;
  border-color: rgba(0, 113, 227, 0.25) !important;
  color: #0071e3 !important;
}

@media (max-width: 720px) {
  .topbar-tg-label { display: none !important; }
  .topbar-tg { padding: 0 9px !important; min-width: 36px !important; justify-content: center !important; }
}

/* Sidebar: Telegram + desktop icon row */
.app-side-links {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 8px 10px 12px !important;
}
.app-side-links .app-side-tg {
  flex: 1 1 auto !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.app-side-desktop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(100, 210, 255, 0.28) !important;
  background: linear-gradient(135deg, rgba(100, 210, 255, 0.12), rgba(0, 113, 227, 0.06)) !important;
  color: #64d2ff !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.app-side-desktop:hover {
  border-color: rgba(100, 210, 255, 0.5) !important;
  background: linear-gradient(135deg, rgba(100, 210, 255, 0.22), rgba(0, 113, 227, 0.1)) !important;
}
.app-side-desktop svg {
  display: block !important;
  flex-shrink: 0 !important;
}
#app.sidebar-collapsed .app-side-links {
  flex-direction: column !important;
  align-items: center !important;
  margin: 8px 6px 12px !important;
  gap: 6px !important;
}
#app.sidebar-collapsed .app-side-desktop {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}
html[data-theme="light"] .app-side-desktop {
  background: rgba(0, 113, 227, 0.08) !important;
  border-color: rgba(0, 113, 227, 0.22) !important;
  color: #0071e3 !important;
}

/* Sidebar support card (Telegram) */
.app-side-tg {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 10px 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(41, 151, 255, 0.28) !important;
  background: linear-gradient(135deg, rgba(41, 151, 255, 0.14), rgba(0, 113, 227, 0.06)) !important;
  color: #f5f5f7 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.app-side-tg:hover {
  border-color: rgba(41, 151, 255, 0.5) !important;
  background: linear-gradient(135deg, rgba(41, 151, 255, 0.22), rgba(0, 113, 227, 0.1)) !important;
}
.app-side-tg svg {
  flex-shrink: 0 !important;
  color: #64d2ff !important;
}
.app-side-tg-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}
.app-side-tg-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
}
.app-side-tg-handle {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64d2ff !important;
  letter-spacing: 0.01em !important;
}
#app.sidebar-collapsed .app-side-tg {
  justify-content: center !important;
  padding: 10px !important;
  margin: 8px 6px 12px !important;
}
#app.sidebar-collapsed .app-side-tg-text {
  display: none !important;
}
html[data-theme="light"] .app-side-tg {
  background: rgba(0, 113, 227, 0.08) !important;
  border-color: rgba(0, 113, 227, 0.22) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .app-side-tg-label {
  color: #1c1c1e !important;
}
html[data-theme="light"] .app-side-tg-handle,
html[data-theme="light"] .app-side-tg svg {
  color: #0071e3 !important;
}
@media (max-height: 780px) {
  .login-ghost.login-logo {
    width: 64px !important;
    max-height: 76px !important;
  }
}

/* ── Login chrome: one top-center pill (langs + theme) — pixel-aligned ───── */
#loginOverlay .login-chrome,
.login-overlay .login-chrome,
.login-chrome {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10050 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: min(98vw, 720px) !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  border-radius: 980px !important;
  background: rgba(28, 28, 30, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  pointer-events: auto !important;
  overflow: visible !important;
  line-height: 1 !important;
}
#loginOverlay .login-chrome-langs,
.login-chrome-langs {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Back-compat: old class name still used in a few selectors */
.login-lang-bar {
  display: none !important;
}
/* Language chips — fixed box, centered flag+code (emoji baseline fix) */
#loginOverlay .login-chrome .lang-btn,
.login-overlay .login-chrome .lang-btn,
.login-chrome .lang-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 52px !important;
  width: auto !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border-radius: 980px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(245, 245, 247, 0.92) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  position: relative !important;
  float: none !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
#loginOverlay .login-chrome .lang-btn .lang-flag,
.login-chrome .lang-btn .lang-flag,
.lang-dd-flag,
.lang-popup-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 14px !important;
  min-width: 18px !important;
  min-height: 12px !important;
  font-size: 0 !important; /* hide emoji fallback letters on Windows */
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}
/* PNG flags — Windows cannot render emoji flags (shows US/CN text) */
img.flag-img,
.lang-flag img.flag-img,
.lang-popup-flag img.flag-img,
.lang-dd-flag img.flag-img,
.dc-chip.flag img.flag-img,
.fleet-row-flag-lg img.flag-img,
.hdr-chip img.flag-img {
  display: block !important;
  width: 16px !important;
  height: 12px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}
.lang-popup-flag {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 18px !important;
}
.lang-popup-flag img.flag-img {
  width: 22px !important;
  height: 16px !important;
  border-radius: 3px !important;
}
#loginOverlay .login-chrome .lang-btn .lang-code,
.login-chrome .lang-btn .lang-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.02em !important;
}
@media (max-width: 520px) {
  .login-chrome {
    gap: 4px !important;
    padding: 5px 6px !important;
    max-width: calc(100vw - 12px) !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  .login-chrome-langs { gap: 3px !important; height: 30px !important; }
  .login-chrome .lang-btn {
    min-width: 36px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    gap: 3px !important;
  }
  .login-chrome .lang-btn .lang-code {
    font-size: 10px !important;
  }
  .login-theme-toggle .side-theme-lbl {
    display: none !important;
  }
}
/* Active = same size as siblings (border-color only, no outer glow / no inset size shift) */
#loginOverlay .login-chrome .lang-btn.active,
#loginOverlay .login-chrome .lang-btn[aria-pressed="true"],
.login-chrome .lang-btn.active,
.login-chrome .lang-btn[aria-pressed="true"] {
  background: rgba(0, 113, 227, 0.38) !important;
  border-color: rgba(120, 190, 255, 0.95) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}
.login-chrome .lang-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.login-chrome .lang-btn:focus,
.login-chrome .lang-btn:focus-visible {
  outline: 2px solid rgba(41, 151, 255, 0.95) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28) !important;
}
/* Theme toggle: same 32px row height as lang chips */
#loginOverlay .login-theme-toggle,
#loginOverlay #btnLoginThemeToggle,
.login-chrome .login-theme-toggle,
.login-chrome #btnLoginThemeToggle {
  position: static !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 10px 0 6px !important;
  border-radius: 980px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
#loginOverlay .login-theme-toggle .side-theme-track,
.login-chrome .login-theme-toggle .side-theme-track {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 22px !important;
  flex: 0 0 42px !important;
  margin: 0 !important;
  align-self: center !important;
}
#loginOverlay .login-theme-toggle .side-theme-lbl,
.login-chrome .login-theme-toggle .side-theme-lbl {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 4.5em !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-theme="light"] #loginOverlay .login-theme-toggle,
html[data-theme="light"] .login-chrome .login-theme-toggle {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.18) !important;
  color: #1c1c1e !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Light theme — login language bar: pale bar + white chips (not dark strip) */
html[data-theme="light"] .login-chrome,
html[data-theme="light"] #loginOverlay .login-chrome,
html[data-theme="light"] body.theme-light .login-chrome,
body.theme-light .login-chrome {
  background: #f2f2f7 !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .login-chrome .login-lang-sep,
html[data-theme="light"] .login-lang-sep {
  background: rgba(60, 60, 67, 0.18) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .login-chrome .lang-btn,
html[data-theme="light"] .login-lang-bar .lang-btn,
html[data-theme="light"] .lang-picker .lang-btn,
html[data-theme="light"] .login-lang-row .lang-btn,
html[data-theme="light"] .fleet-header-right .lang-btn,
html[data-theme="light"] button.lang-btn,
body.theme-light .login-chrome .lang-btn {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-theme="light"] .login-chrome .lang-btn .lang-flag,
html[data-theme="light"] .login-lang-bar .lang-btn .lang-flag,
html[data-theme="light"] .lang-picker .lang-btn .lang-flag,
html[data-theme="light"] button.lang-btn .lang-flag {
  font-size: 15px !important;
  opacity: 1 !important;
  filter: none !important;
  /* Prevent OS/emoji greying on pale chips */
  -webkit-text-fill-color: initial !important;
  color: initial !important;
}
html[data-theme="light"] .login-chrome .lang-btn .lang-code,
html[data-theme="light"] .login-lang-bar .lang-btn .lang-code,
html[data-theme="light"] .lang-picker .lang-btn .lang-code,
html[data-theme="light"] button.lang-btn .lang-code {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .login-chrome .lang-btn:hover,
html[data-theme="light"] .login-lang-bar .lang-btn:hover,
html[data-theme="light"] .lang-picker .lang-btn:hover,
html[data-theme="light"] button.lang-btn:hover {
  background: #ffffff !important;
  border-color: rgba(10, 132, 255, 0.45) !important;
  color: #1c1c1e !important;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.12) !important;
}
html[data-theme="light"] .login-chrome .lang-btn.active,
html[data-theme="light"] .login-chrome .lang-btn[aria-pressed="true"],
html[data-theme="light"] .login-lang-bar .lang-btn.active,
html[data-theme="light"] .login-lang-bar .lang-btn[aria-pressed="true"],
html[data-theme="light"] .lang-picker .lang-btn.active,
html[data-theme="light"] button.lang-btn.active {
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, #fff) !important;
  border: 1.5px solid var(--accent, #0a84ff) !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  /* Same box as inactive — no outer glow that breaks row alignment */
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme="light"] .login-chrome .lang-btn.active .lang-code,
html[data-theme="light"] .login-lang-bar .lang-btn.active .lang-code,
html[data-theme="light"] button.lang-btn.active .lang-code {
  color: var(--accent, #0a84ff) !important;
  -webkit-text-fill-color: var(--accent, #0a84ff) !important;
}

/* Overlay stacks: lang bar on top, then card */
.login-overlay {
  flex-direction: column !important;
  align-items: center !important;
}

/* Transparent bat logo — crisp SVG, soft glow */
.login-ghost.login-logo {
  display: block !important;
  width: min(140px, 42vw) !important;
  height: auto !important;
  max-height: 72px !important;
  margin: 4px auto 2px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,.18))
    drop-shadow(0 6px 16px rgba(0,0,0,.4)) !important;
}
.topbar-ghost.topbar-logo {
  width: 34px !important;
  height: 18px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.25)) !important;
}
@media (max-width: 380px) {
  .login-lang-bar .lang-btn .lang-code { display: none !important; }
  .login-lang-bar .lang-btn {
    min-width: 32px !important;
    padding: 2px 6px !important;
  }
}
@media (max-height: 780px) {
  .login-ghost.login-logo {
    width: 110px !important;
    max-height: 56px !important;
  }
  .login-lang-bar { padding: 6px 8px !important; margin-bottom: 4px !important; }
}

/* ── Site-wide BTMOB logo (transparent PNG from brand mark) ──────────────── */
.login-ghost.login-logo {
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  max-height: 96px !important;
  margin: 4px auto 6px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  filter:
    drop-shadow(0 0 16px rgba(57, 255, 140, 0.35))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4)) !important;
}
.topbar-ghost.topbar-logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 0 6px rgba(57, 255, 140, 0.4)) !important;
  flex-shrink: 0 !important;
}
.apk-wait-icon img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 12px rgba(57, 255, 140, 0.35)) !important;
}
@media (max-height: 780px) {
  .login-ghost.login-logo {
    width: 72px !important;
    height: 72px !important;
    max-height: 76px !important;
  }
}

/* ── Dashboard APK progress banner (compact single strip) ─────────────────── */
.apk-progress-banner {
  margin: 8px 12px 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 113, 227, 0.12);
  border: 1px solid rgba(41, 151, 255, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
.apk-progress-banner.hidden { display: none !important; }
.apk-progress-banner.is-done {
  background: rgba(48, 209, 88, 0.12);
  border-color: rgba(48, 209, 88, 0.35);
}
.apk-progress-banner.is-error {
  background: rgba(255, 69, 58, 0.12);
  border-color: rgba(255, 69, 58, 0.35);
}
.apk-progress-banner-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apk-progress-banner-logo {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(57, 255, 140, 0.3));
}
.apk-progress-banner-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.apk-progress-banner-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.apk-progress-banner-step {
  font-size: 11px;
  color: rgba(245, 245, 247, 0.55);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apk-progress-banner-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 245, 247, 0.55);
  flex-shrink: 0;
}
.apk-progress-banner-bar {
  height: 4px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.apk-progress-banner.is-done .apk-progress-banner-bar {
  display: none;
}
.apk-progress-banner-fill {
  height: 100%;
  width: 5%;
  border-radius: 980px;
  background: linear-gradient(90deg, #0071e3, #2997ff, #64d2ff);
  background-size: 200% 100%;
  transition: width 0.4s ease;
  animation: apkWaitShimmer 1.6s linear infinite;
}
.apk-progress-banner.is-done .apk-progress-banner-fill {
  background: linear-gradient(90deg, #30d158, #64d2ff);
  animation: none;
}
.apk-progress-banner.is-error .apk-progress-banner-fill {
  background: #ff453a;
  animation: none;
}
.apk-progress-banner-actions {
  display: none; /* actions live in main row now */
}
.apk-progress-dl {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 980px;
  border: none;
  background: #0071e3;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.apk-progress-banner.is-done .apk-progress-dl {
  background: #30d158;
  color: #000;
}
.apk-progress-dl:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.apk-progress-dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(245, 245, 247, 0.45);
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 8px;
}
.apk-progress-dismiss:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.apk-progress-dl.is-ready {
  background: #30d158;
  color: #000;
}
/* Topbar APK badge + animated options menu */
.apk-topbar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
  overflow: visible;
}
.apk-ready-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12000;
  min-width: 220px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.apk-ready-menu.hidden {
  display: none !important;
}
.apk-ready-menu.is-open {
  display: block !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.apk-ready-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #f5f5f7;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: background 0.12s ease, opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.apk-ready-menu.is-open .apk-ready-menu-item {
  opacity: 1;
  transform: translateY(0);
}
.apk-ready-menu.is-open .apk-ready-menu-item:nth-child(1) { transition-delay: 0.04s; }
.apk-ready-menu.is-open .apk-ready-menu-item:nth-child(2) { transition-delay: 0.09s; }
.apk-ready-menu.is-open .apk-ready-menu-item:nth-child(3) { transition-delay: 0.14s; }
.apk-ready-menu-item:hover {
  background: rgba(10, 132, 255, 0.16);
}
.apk-ready-menu-ico {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.apk-ready-menu-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.apk-ready-menu-txt strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.apk-ready-menu-txt small {
  font-size: 11px;
  color: rgba(245, 245, 247, 0.5);
  font-weight: 500;
}
html[data-theme="light"] .apk-ready-menu {
  background: #fff;
  border-color: rgba(60, 60, 67, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .apk-ready-menu-item { color: #1c1c1e; }
html[data-theme="light"] .apk-ready-menu-txt small { color: #6c6c70; }

.apk-topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Size to full label — do not clip "APK 83% · 1:42" mid-timer */
  max-width: none;
  width: max-content;
  min-width: max-content;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 980px;
  border: 1px solid rgba(41, 151, 255, 0.4);
  background: rgba(0, 113, 227, 0.18);
  color: #f5f5f7;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex-shrink: 0;
  box-sizing: border-box;
}
.apk-topbar-badge.hidden { display: none !important; }
#apkTopbarBadgeText {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
  min-width: max-content;
  line-height: 1.2;
}
.apk-topbar-badge.is-done {
  border-color: rgba(48, 209, 88, 0.45);
  background: rgba(48, 209, 88, 0.16);
}
.apk-topbar-badge.is-error {
  border-color: rgba(255, 69, 58, 0.45);
  background: rgba(255, 69, 58, 0.16);
}
.apk-topbar-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2997ff;
  flex-shrink: 0;
  animation: apkWaitPulse 1.4s ease infinite;
}
.apk-topbar-badge.is-done .apk-topbar-badge-dot {
  background: #30d158;
  animation: none;
}
.apk-topbar-badge.is-error .apk-topbar-badge-dot {
  background: #ff453a;
  animation: none;
}
@media (max-width: 640px) {
  .apk-progress-banner { margin: 8px 10px 0; padding: 10px 12px; }
  .apk-topbar-badge {
    max-width: none;
    min-width: max-content;
    font-size: 10px;
    padding: 4px 10px;
    gap: 5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR: smart sizing — full labels + scroll, overflow menu when tight
   ═══════════════════════════════════════════════════════════════════════════ */
header.topbar,
.topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
.topbar-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
  scrollbar-width: thin !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%) !important;
}
.topbar-nav .topnav-btn,
.topbar-nav a.topnav-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-width: auto !important;
  padding: 0 12px !important;
  height: 36px !important;
  gap: 6px !important;
}
.topbar-nav .topnav-btn > span:not(.topnav-badge) {
  display: inline !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}
/* ≥1100: full labels always */
@media (min-width: 1100px) {
  .topbar-nav .topnav-btn > span:not(.topnav-badge) { display: inline !important; }
  .topbar-overflow-btn { display: none !important; }
  body:not(.device-view-active) .topbar-nav { display: flex !important; }
}
/* 900–1099: top nav stays hidden (sidebar primary); keep overflow off */
@media (min-width: 900px) and (max-width: 1099px) {
  .topbar-overflow-btn { display: none !important; }
}
/* ≤899: hamburger only (already set) — ensure labels work inside overflow menu */
@media (max-width: 899px) {
  body:not(.device-view-active) .topbar-nav { display: none !important; }
  body:not(.device-view-active) .topbar-overflow-btn { display: inline-flex !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREAM: mode pills always visible + Wake/Sleep pinned
   ═══════════════════════════════════════════════════════════════════════════ */
.stream-action-row.operate-primary-bar,
#streamActionRow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  row-gap: 8px !important;
}
/* Power under phone frame */
.phone-power-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}
.phone-power-row .scr-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.phone-power-row .power-wake {
  background: rgba(48, 209, 88, 0.18) !important;
  color: #30d158 !important;
  border: 1px solid rgba(48, 209, 88, 0.4) !important;
  font-weight: 700 !important;
}
.phone-power-row .power-sleep {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 600 !important;
}
.phone-ctrl-sep {
  width: 1px !important;
  height: 22px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  flex-shrink: 0 !important;
  margin: 0 2px !important;
}
/* Reliable button icons (SVG) — never rely on lucide font for operate chrome */
.scr-btn .btn-ico,
.ctrl-action-btn .btn-ico,
.ctrl-action-wide .btn-ico,
.ctrl-action-file .btn-ico,
.phone-power-row .btn-ico {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  display: block !important;
  pointer-events: none !important;
}
/* Hide broken lucide font glyphs in controls (prefer .btn-ico SVGs) */
.screen-ctrl-sidebar .scr-btn > i[class^="icon-"],
.screen-ctrl-sidebar .scr-btn > i[class*=" icon-"] {
  font-size: 13px !important;
  line-height: 1 !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* ACTIONS panel layout — no clipped text / icons */
.ctrl-actions-cell {
  min-width: 0 !important;
  gap: 8px !important;
}
.ctrl-action-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
}
.ctrl-action-row .ti {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
.ctrl-action-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 72px !important;
  padding: 0 12px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.ctrl-action-wide {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
.ctrl-action-trio {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ctrl-action-trio .scr-btn,
.ctrl-action-trio .ctrl-action-file {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.ctrl-action-file {
  cursor: pointer !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.ctrl-actions-cell #htmlOverlayInput {
  width: 100% !important;
  resize: vertical !important;
  min-height: 56px !important;
  max-height: 120px !important;
  box-sizing: border-box !important;
}
/* Override sidebar button clipping that chopped icons */
#screenCtrlSidebar .ctrl-actions-cell .scr-btn,
.screen-ctrl-sidebar .ctrl-actions-cell .scr-btn {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
.stream-mode-pills {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: 980px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}
.mode-pill {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.72) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 980px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.mode-pill:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.mode-pill.active {
  background: #0071e3 !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 113, 227, 0.4) !important;
}
.stream-chrome-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  order: 2 !important;
}
#screenStatusBadge { order: 3 !important; flex-shrink: 0 !important; }
.tab-row-legacy,
#tabRow.tab-row-legacy[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLS SIDEBAR: readable, aligned, fully scrollable
   ═══════════════════════════════════════════════════════════════════════════ */
#dtab-screen .screen-ctrl-sidebar,
#screenCtrlSidebar {
  flex: 0 0 min(360px, 40vw) !important;
  width: min(360px, 40vw) !important;
  min-width: 300px !important;
  max-width: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body.ctrl-sidebar-collapsed #screenCtrlSidebar,
body.ctrl-sidebar-collapsed .screen-ctrl-sidebar {
  display: none !important;
}
#screenCtrlSidebar .ctrl-body,
.screen-ctrl-sidebar .ctrl-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px 12px !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-content: start !important;
  box-sizing: border-box !important;
}
#screenCtrlSidebar .ctrl-cell,
.screen-ctrl-sidebar .ctrl-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-sizing: border-box !important;
}
#screenCtrlSidebar .ctrl-cell.span2,
.screen-ctrl-sidebar .ctrl-cell.span2 {
  grid-column: 1 / -1 !important;
}
#screenCtrlSidebar .ctrl-label,
.screen-ctrl-sidebar .ctrl-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.45) !important;
  margin: 0 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#screenCtrlSidebar .ti,
#screenCtrlSidebar input.ti,
#screenCtrlSidebar textarea.ti,
.screen-ctrl-sidebar .ti,
.screen-ctrl-sidebar input.ti {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  min-height: 34px !important;
}
#screenCtrlSidebar .scr-btn,
.screen-ctrl-sidebar .scr-btn {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#screenCtrlSidebar .perm-grid,
.screen-ctrl-sidebar .perm-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  #screenCtrlSidebar .ctrl-body,
  .screen-ctrl-sidebar .ctrl-body {
    grid-template-columns: 1fr !important;
  }
}
/* Pinned overlay drawer: full height scroll + padding bottom for last rows */
@media (max-width: 1279px) {
  body.ctrl-sidebar-pinned #screenCtrlSidebar,
  body.ctrl-sidebar-pinned .screen-ctrl-sidebar {
    width: min(380px, 94vw) !important;
    max-width: 94vw !important;
    min-width: 300px !important;
  }
  body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-body {
    padding-bottom: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEVICE VIEW TOPBAR: [ ← Devices ] [ logo ] [ chip ] ........ [ Exit ]
   ═══════════════════════════════════════════════════════════════════════════ */
body.device-view-active header.topbar,
body.device-view-active .topbar {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  min-height: 52px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
body.device-view-active .topbar-nav,
body.device-view-active #topbarNav,
body.device-view-active #topbarNav.topbar-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body.device-view-active #btnBackToList:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 980px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: auto !important;
  visibility: visible !important;
  line-height: 1 !important;
}
body.device-view-active .topbar-brand {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
/* Wordmark optional on device view — logo only keeps row clean */
body.device-view-active .topbar-title,
body.device-view-active .topbar-author,
body.device-view-active .topbar-brand-text {
  display: none !important;
}
body.device-view-active .topbar-logo,
body.device-view-active .topbar-ghost {
  width: 26px !important;
  height: 26px !important;
}
body.device-view-active .topbar-right {
  grid-column: 4 !important;
  grid-row: 1 !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Info tab grid — never let long package/activity bleed into next card */
#dtab-info .info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
}
#dtab-info .info-item {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#dtab-info .info-item label {
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}
#dtab-info .info-item .info-val,
#dtab-info .info-item > span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  display: block !important;
}

/* Debug tab */
.debug-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 28px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.debug-card {
  background: rgba(28, 28, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
}
.debug-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}
.debug-card p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: rgba(235, 235, 245, 0.5);
  line-height: 1.45;
}
.debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.debug-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.debug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.debug-row-meta {
  flex: 1 1 160px;
  min-width: 0;
}
.debug-row-title {
  font-size: 13px;
  font-weight: 600;
}
.debug-row-sub {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.45);
  margin-top: 2px;
}
.debug-preview {
  margin-top: 12px;
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(235, 235, 245, 0.85);
}
html[data-theme="light"] .debug-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .debug-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .debug-preview {
  background: #f2f2f7;
  color: #1c1c1e;
}

/* ══ Calls tab — modern rail + list ═══════════════════════════════════════ */
#dtab-calls.dtab.active,
#dtab-calls.dtab:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.calls-page {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--bg, #0b0b0f) !important;
}
.calls-rail {
  width: 220px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 14px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(22, 22, 26, 0.96) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}
.calls-rail-kicker {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(235, 235, 245, 0.4) !important;
}
.calls-rail-title {
  font-size: 18px !important;
  font-weight: 750 !important;
  color: #f5f5f7 !important;
  letter-spacing: -0.02em !important;
  margin-top: 2px !important;
}
.calls-fetch-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ff6b5a 0%, #ff453a 100%) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(255, 69, 58, 0.28) !important;
  transition: filter 0.15s ease, transform 0.12s ease !important;
}
.calls-fetch-btn:hover {
  filter: brightness(1.06) !important;
}
.calls-fetch-btn:active {
  transform: scale(0.98) !important;
}
.calls-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.calls-filter-lbl {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(235, 235, 245, 0.38) !important;
  margin: 4px 2px 2px !important;
}
.calls-filter-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 245, 247, 0.88) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
}
.calls-filter-chip:has(input:checked) {
  background: rgba(10, 132, 255, 0.12) !important;
  border-color: rgba(10, 132, 255, 0.28) !important;
}
.calls-filter-chip input {
  accent-color: #0a84ff !important;
  width: 14px !important;
  height: 14px !important;
}
.calls-chip-ico {
  width: 18px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.calls-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}
.calls-stat {
  padding: 10px 8px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  text-align: center !important;
}
.calls-stat-n {
  display: block !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  color: #f5f5f7 !important;
  font-variant-numeric: tabular-nums !important;
}
.calls-stat-l {
  display: block !important;
  font-size: 10.5px !important;
  color: rgba(235, 235, 245, 0.42) !important;
  margin-top: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.calls-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.calls-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(16, 16, 20, 0.6) !important;
  flex-shrink: 0 !important;
}
.calls-heading {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: #f5f5f7 !important;
  letter-spacing: -0.02em !important;
}
.calls-sub {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  color: rgba(235, 235, 245, 0.45) !important;
}
.calls-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.calls-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(235, 235, 245, 0.45) !important;
  min-width: 200px !important;
}
.calls-search {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: #f5f5f7 !important;
  font-size: 13px !important;
  outline: none !important;
  width: 180px !important;
  min-width: 0 !important;
}
.calls-search::placeholder {
  color: rgba(235, 235, 245, 0.35) !important;
}
.calls-clear-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(245, 245, 247, 0.85) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}
.calls-clear-btn:hover {
  background: rgba(255, 69, 58, 0.12) !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
  color: #ff6961 !important;
}
.calls-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 10px 14px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.calls-empty {
  margin: auto !important;
  max-width: 320px !important;
  text-align: center !important;
  padding: 40px 16px !important;
}
.calls-empty-ico {
  font-size: 36px !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  opacity: 0.85 !important;
}
.calls-empty-title {
  font-size: 16px !important;
  font-weight: 750 !important;
  color: rgba(245, 245, 247, 0.9) !important;
  margin-bottom: 6px !important;
}
.calls-empty-desc {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(235, 235, 245, 0.45) !important;
}
.call-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}
.call-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
.call-avatar {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  background: rgba(10, 132, 255, 0.15) !important;
  color: #64d2ff !important;
  font-weight: 750 !important;
  font-size: 15px !important;
}
.call-avatar.call-type-incoming { background: rgba(48, 209, 88, 0.14) !important; color: #30d158 !important; }
.call-avatar.call-type-outgoing { background: rgba(10, 132, 255, 0.15) !important; color: #64d2ff !important; }
.call-avatar.call-type-missed,
.call-avatar.call-type-rejected { background: rgba(255, 69, 58, 0.14) !important; color: #ff6961 !important; }
.call-type-badge {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: #1c1c1e !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  line-height: 1 !important;
}
.call-info { flex: 1 1 auto !important; min-width: 0 !important; }
.call-number {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.call-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: rgba(235, 235, 245, 0.45) !important;
  min-width: 0 !important;
}
.call-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 160px !important;
}
.call-type-label.call-type-incoming { color: #30d158 !important; }
.call-type-label.call-type-outgoing { color: #64d2ff !important; }
.call-type-label.call-type-missed,
.call-type-label.call-type-rejected { color: #ff6961 !important; }
.call-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}
.call-date {
  font-size: 11.5px !important;
  color: rgba(235, 235, 245, 0.42) !important;
  font-variant-numeric: tabular-nums !important;
}
.call-dur {
  font-size: 11.5px !important;
  font-weight: 650 !important;
  color: rgba(235, 235, 245, 0.65) !important;
  font-variant-numeric: tabular-nums !important;
}
.call-dur--empty { opacity: 0.35 !important; }
html[data-theme="light"] .calls-page { background: #f2f2f7 !important; }
html[data-theme="light"] .calls-rail {
  background: #fff !important;
  border-right-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .calls-rail-title,
html[data-theme="light"] .calls-heading,
html[data-theme="light"] .call-number,
html[data-theme="light"] .calls-stat-n { color: #1c1c1e !important; }
html[data-theme="light"] .calls-toolbar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .call-row {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .calls-search-wrap,
html[data-theme="light"] .calls-filter-chip,
html[data-theme="light"] .calls-stat {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .calls-search { color: #1c1c1e !important; }
html[data-theme="light"] .calls-clear-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #3a3a3c !important;
}
@media (max-width: 720px) {
  .calls-page { flex-direction: column !important; overflow: auto !important; }
  .calls-rail {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .calls-stats { margin-top: 0 !important; }
}

/* Compact device chip (replaces #devHdr strip) */
.topbar-device-chip {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  padding: 0 12px 0 10px !important;
  border-radius: 980px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  justify-self: start !important;
}
.topbar-device-chip.hidden {
  display: none !important;
}
body:not(.device-view-active) .topbar-device-chip {
  display: none !important;
}
.topbar-device-chip-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: #8e8e93 !important;
}
.topbar-device-chip-dot.on {
  background: #30d158 !important;
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.2) !important;
}
.topbar-device-chip-dot.off {
  background: #8e8e93 !important;
}
.topbar-device-chip-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f5f5f7 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 14ch !important;
}
.topbar-device-chip-status {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: rgba(245, 245, 247, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.topbar-device-chip.is-online .topbar-device-chip-status {
  color: #30d158 !important;
  background: rgba(48, 209, 88, 0.16) !important;
  border-color: rgba(48, 209, 88, 0.4) !important;
}
.topbar-device-chip.is-offline .topbar-device-chip-status {
  color: #ff453a !important;
  background: rgba(255, 69, 58, 0.12) !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
}
@media (max-width: 640px) {
  body.device-view-active .topbar-device-chip-name { display: none !important; }
  body.device-view-active .topbar-device-chip-status { display: inline-flex !important; }
  body.device-view-active #btnBackToList:not(.hidden) {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* Hide bulky device header strip — frees stream/controls space */
#viewDevice .dev-hdr,
#viewDevice #devHdr,
.dev-hdr {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* Fleet: keep original grid without back/chip */
body:not(.device-view-active) header.topbar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
body:not(.device-view-active) .topbar-brand {
  grid-column: auto !important;
}
body:not(.device-view-active) .topbar-right {
  grid-column: auto !important;
}

/* Screen + Skeleton only — compact pair next to Wake/Sleep */
.stream-mode-pills {
  order: 1 !important;
  margin-left: 2px !important;
}
.stream-mode-pills .mode-pill {
  min-width: 72px !important;
  text-align: center !important;
}
/* Hide leftover all/reader pane toggles if present in DOM */
.phone-column .all-panel-toggles,
#allPanelToggles {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUAL VIEW: Screen + Skeleton always side-by-side (no mode switch)
   ═══════════════════════════════════════════════════════════════════════════ */
.phone-column.mode-dual,
#phoneColumn.mode-dual {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}
.phone-column.mode-dual .tab-host.dual-screen-skel,
#phoneColumn.mode-dual .tab-host {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 10px !important;
  padding: 0 4px !important;
  align-items: stretch !important;
}
.phone-column.mode-dual #tabVideo.dual-pane,
.phone-column.mode-dual #tabSkeleton.dual-pane,
.phone-column.mode-dual #tabVideo,
.phone-column.mode-dual #tabSkeleton {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 50% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 50% !important;
  overflow: hidden !important;
  /* Soft continuous corners — outer chrome */
  border-radius: 22px !important;
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
.phone-column.mode-dual #tabReader,
.phone-column.mode-dual #tabAll {
  display: none !important;
}
.dual-pane-label {
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.48) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
.phone-column.mode-dual #tabVideo .video-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Keep flex column so HUD stays pinned above the phone (no jump on updates) */
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 0 21px 21px !important;
}
.phone-column.mode-dual #tabSkeleton .reader-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important; /* absolute skeleton canvas needs a box */
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 0 21px 21px !important;
}
/* Skeleton canvas is sized by JS to letterbox device aspect into the wrap */
.phone-column.mode-dual #tabSkeleton #skeletonCanvas,
.phone-column.mode-dual #skeletonCanvas {
  position: absolute !important;
  box-sizing: border-box !important;
}
/* Dual mode: drop the stacked phone-bezel ring (it fights dual-pane radius) */
.phone-column.mode-dual #tabVideo .screen-viewer,
.phone-column.mode-dual .screen-viewer {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  overflow: hidden !important;
}
/* Dynamic Island disabled (was covering stream) */
.phone-column.mode-dual #tabVideo .screen-viewer::before {
  content: none !important;
  display: none !important;
}
.phone-column.mode-dual #tabSkeleton .reader-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #050506 !important;
}
/* Canvas size/position is set by JS (letterbox) — do not flex-stretch it */
.phone-column.mode-dual #tabSkeleton .reader-canvas,
.phone-column.mode-dual #skeletonCanvas {
  flex: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.phone-column.mode-dual #tabVideo #screenImg,
.phone-column.mode-dual #tabVideo .screen-viewer > img {
  border-radius: 0 !important;
  /* Fill the viewer box; letterbox only if aspect needs it */
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  /* Prefer using full height of the pane so phone is as large as possible */
  height: 100% !important;
  width: auto !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  .phone-column.mode-dual .tab-host.dual-screen-skel,
  #phoneColumn.mode-dual .tab-host {
    flex-direction: column !important;
  }
  .phone-column.mode-dual #tabVideo,
  .phone-column.mode-dual #tabSkeleton {
    max-width: 100% !important;
    flex: 1 1 50% !important;
    min-height: 180px !important;
  }
}
/* Hide mode pills if any leftover */
#streamModePills { display: none !important; }

/* Controls: NEVER auto-show — only when pinned by user click */
body:not(.ctrl-sidebar-pinned) .screen-ctrl-sidebar,
body:not(.ctrl-sidebar-pinned) #screenCtrlSidebar,
body.ctrl-sidebar-collapsed .screen-ctrl-sidebar,
body.ctrl-sidebar-collapsed #screenCtrlSidebar,
body.operate-compact:not(.ctrl-sidebar-pinned) .screen-ctrl-sidebar,
body.operate-compact:not(.ctrl-sidebar-pinned) #screenCtrlSidebar {
  display: none !important;
}
body.ctrl-sidebar-pinned .screen-ctrl-sidebar,
body.ctrl-sidebar-pinned #screenCtrlSidebar {
  display: flex !important;
}

/* Dual Screen|Skeleton: kill absolute stacking from .tab-pane { position:absolute; inset:0 } */
.phone-column.mode-dual .tab-host,
#phoneColumn.mode-dual .tab-host.dual-screen-skel,
#phoneColumn.mode-dual .tab-host {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  gap: 10px !important;
  overflow: hidden !important;
}
.phone-column.mode-dual .tab-pane,
.phone-column.mode-dual #tabVideo,
.phone-column.mode-dual #tabSkeleton {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
.phone-column.mode-dual #tabReader,
.phone-column.mode-dual #tabAll {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* Keylog side pane must not force-open layout; only when not .hidden */
#screenKeylogPane.hidden {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: none !important;
  flex: 0 0 0 !important;
}
/* When keylog closed, main pane uses full width */
.screen-split-wrap:has(#screenKeylogPane.hidden) .screen-main-pane,
body:not(.keylog-split-open) .screen-main-pane {
  flex: 1 1 auto !important;
  max-width: 100% !important;
}
@media (max-width: 960px) {
  .phone-column.mode-dual .tab-host {
    flex-direction: column !important;
  }
  .phone-column.mode-dual #tabVideo,
  .phone-column.mode-dual #tabSkeleton {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 50% !important;
    min-height: 200px !important;
  }
}

/* Full-width dual column host (not a single narrow phone frame) */
#phoneColumn.mode-dual,
.phone-column.mode-dual {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#dtab-screen .phone-stage {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
/* Override dashboard absolute panes specifically for dual */
#phoneColumn.mode-dual .tab-pane.active,
#phoneColumn.mode-dual #tabVideo.tab-pane,
#phoneColumn.mode-dual #tabSkeleton.tab-pane {
  position: relative !important;
  inset: unset !important;
  display: flex !important;
}

/* ── Login exit (last file, highest priority) ─────────────────────────────── */
/* When enterApp() runs it sets body.app-entered — never leave user stuck on login */
body.app-entered #loginOverlay,
body.app-entered #loginOverlay.login-overlay,
body.app-entered #loginOverlay.hidden,
body.app-entered .login-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}
body.app-entered #app,
body.app-entered #app:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Black-screen lock modal — fit on screen, NO internal scroll */
#blockStyleModal.bsm-backdrop:not(.hidden),
.bsm-backdrop:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  z-index: 10080 !important;
  overflow: hidden !important; /* never scroll the dimmed backdrop */
  overscroll-behavior: none !important;
}
#blockStyleModal .bsm-box,
.bsm-backdrop .bsm-box {
  width: min(440px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(92vh, 720px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* no scrollbars on the card */
  box-sizing: border-box !important;
}
#blockStyleModal .bsm-header,
.bsm-backdrop .bsm-header {
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
}
#blockStyleModal .bsm-body,
.bsm-backdrop .bsm-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 14px 10px !important;
  overflow: hidden !important; /* was overflow-y:auto — caused scrollable black modal */
  overflow-y: hidden !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
}
#blockStyleModal .bsm-footer,
.bsm-backdrop .bsm-footer {
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
}
#blockStyleModal .bsm-field,
.bsm-backdrop .bsm-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
}
#blockStyleModal .bsm-label,
.bsm-backdrop .bsm-label {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 11.5px !important;
}
#blockStyleModal .bsm-select,
#blockStyleModal .bsm-input,
#blockStyleModal .bsm-select-wrap,
.bsm-backdrop .bsm-select,
.bsm-backdrop .bsm-input,
.bsm-backdrop .bsm-select-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex: none !important;
}
#blockStyleModal .bsm-select,
#blockStyleModal input.bsm-input,
.bsm-backdrop .bsm-select,
.bsm-backdrop input.bsm-input {
  min-height: 38px !important;
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}
#blockStyleModal textarea.bsm-input,
.bsm-backdrop textarea.bsm-input {
  min-height: 56px !important;
  max-height: 72px !important;
  height: 64px !important;
  resize: none !important; /* fixed height — no grow/scroll thrash */
  white-space: pre-wrap !important;
  overflow-y: auto !important; /* only message field scrolls if long */
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
#blockStyleModal .bsm-hint,
.bsm-backdrop .bsm-hint {
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
/* Lock page scroll under black-screen modal */
html.bsm-open,
html.bsm-open body,
body.bsm-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Very short viewports: still no page scroll — slightly tighter */
@media (max-height: 640px) {
  #blockStyleModal .bsm-body,
  .bsm-backdrop .bsm-body {
    gap: 8px !important;
    padding: 10px 12px 8px !important;
  }
  #blockStyleModal textarea.bsm-input,
  .bsm-backdrop textarea.bsm-input {
    min-height: 48px !important;
    height: 52px !important;
    max-height: 56px !important;
  }
  #blockStyleModal .bsm-hint-foot,
  .bsm-backdrop .bsm-hint-foot {
    display: none !important; /* drop long help text when space is tight */
  }
}

/* Fleet card screenshots — LANDSCAPE strip (not 9:16 towers that break the grid) */
body.fleet-shots-on .dc .dc-shot-preview,
.dc .dc-shot-preview {
  max-height: 132px !important;
  min-height: 100px !important;
  aspect-ratio: 16 / 10 !important;
  background: #0a0a0c !important;
}
body.fleet-shots-on .dc .dc-shot-preview {
  display: block !important;
}
body.fleet-shots-on .dc .dc-shot-preview img {
  object-fit: cover !important;
  object-position: top center !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── Live Keylog: always-visible chrome + counts ─────────────────────────── */
.stream-chrome-group #btnSplitKeylog,
.stream-chrome-group #btnKeylogPopout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.kl-inline-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.4em !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  background: rgba(48, 209, 88, 0.2) !important;
  color: #30d158 !important;
  border: 1px solid rgba(48, 209, 88, 0.35) !important;
}
.kl-inline-count[hidden] {
  display: none !important;
}
#btnSplitKeylog.active .kl-inline-count {
  background: rgba(100, 210, 255, 0.22) !important;
  color: #64d2ff !important;
  border-color: rgba(100, 210, 255, 0.45) !important;
}
.skl-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.skl-count-badge {
  flex-shrink: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(10, 132, 255, 0.2) !important;
  color: #64d2ff !important;
  border: 1px solid rgba(10, 132, 255, 0.4) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.skl-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.skl-popout-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(0, 113, 227, 0.2) !important;
  border: 1px solid rgba(0, 113, 227, 0.45) !important;
  color: #7dd3fc !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.skl-popout-btn:hover {
  background: rgba(0, 113, 227, 0.32) !important;
}
.skl-footer-actions {
  display: flex !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
/* Side pane: roomier so long history is readable */
#screenKeylogPane:not(.hidden) {
  width: min(520px, 42vw) !important;
  min-width: 320px !important;
}
.kl-count-badge {
  font-variant-numeric: tabular-nums !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL ALIGNMENT LAYER (better-layout · form-design · repeated-component)
   Shared edges, 8/16 spacing rhythm, stacked fields, equal card slots,
   min-width:0 flex shrink, pin anchors. Last-loaded so it wins cascades.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --align-gap-xs: 4px;
  --align-gap-sm: 8px;
  --align-gap-md: 16px;
  --align-gap-lg: 24px;
  --align-field-h: 40px;
  --align-radius: 12px;
}

/* ── Universal flex safety: allow truncation / wrap inside flex rows ─────── */
#app .topbar > *,
#app .dev-hdr-controls > *,
#app .fleet-toolbar > *,
#app .stats-topbar > *,
.modal-box .modal-body,
.purchase-box,
.login-box {
  min-width: 0;
}

/* ── Forms: label above control, full-width inputs (form-design anatomy) ─── */
.login-box .login-field,
.login-box .field,
#loginBox .login-field,
.purchase-box .pur-email-wrap,
#blockStyleModal .bsm-field,
#screenCtrlSidebar .ctrl-cell,
.screen-ctrl-sidebar .ctrl-cell,
.modal-box .form-field,
.modal-box .field-row,
.users-modal .field,
.apkb-options .apkb-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--align-gap-sm) !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Labels share leading edge */
.login-box label,
.login-field label,
.bsm-label,
.ctrl-label,
.pur-email-wrap + label,
.modal-box label,
.field-label {
  display: block;
  width: 100%;
  margin: 0;
  text-align: start;
}

/* Inputs/selects/textareas fill the field slot */
.login-box input:not([type="checkbox"]):not([type="radio"]),
.login-box select,
.login-box textarea,
.purchase-box input:not([type="checkbox"]):not([type="radio"]),
.purchase-box select,
.purchase-box textarea,
#blockStyleModal input,
#blockStyleModal select,
#blockStyleModal textarea,
#screenCtrlSidebar .ti,
#screenCtrlSidebar input,
#screenCtrlSidebar select,
#screenCtrlSidebar textarea,
.screen-ctrl-sidebar .ti,
.screen-ctrl-sidebar input,
.screen-ctrl-sidebar select,
.screen-ctrl-sidebar textarea,
.modal-box input:not([type="checkbox"]):not([type="radio"]),
.modal-box select,
.modal-box textarea,
.apkb-options input:not([type="checkbox"]):not([type="radio"]),
.apkb-options select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Inter-group spacing ≥ 2× intra-group (8 → 16) */
.login-box,
.purchase-box #purchaseStep1,
.purchase-box #purchaseStep2 {
  gap: var(--align-gap-md);
}

/* ── Purchase plan cards: equal-height slot model ────────────────────────── */
.pur-plans,
#purchasePlans,
#purchasePlansGrid.pur-plans,
.purchase-box .pur-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
}
.pur-plan {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 10px 8px 12px !important;
  gap: 4px !important;
}
.pur-plan .pur-plan-price,
.pur-plan .pur-plan-name {
  min-width: 0;
}
.pur-plan-feats,
.pur-plan ul {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding-inline-start: 1.1em !important;
  min-height: 0;
}
/* Pin CTA / selection affordance to bottom of card */
.pur-plan .pur-plan-cta,
.pur-plan > button:last-child {
  margin-top: auto !important;
}

/* ── Fleet device cards: fixed slots, pin actions ────────────────────────── */
.fleet-view .dev-grid,
#devicesGrid,
.devices-grid {
  align-items: start !important;
}
.fleet-view .dev-card,
.fleet-view .dc,
#devicesGrid .dev-card,
#devicesGrid .dc {
  display: flex !important;
  flex-direction: column !important;
  /* NEVER height:100% — it equalizes rows and content overflows into the next card */
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
}
.fleet-view .dev-card-body,
.fleet-view .dc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: var(--align-gap-sm) !important;
}
.fleet-view .dev-card-name,
.fleet-view .dc-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.fleet-view .dev-card-meta,
.fleet-view .dc-meta {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}
/* Action bar pinned to card bottom */
.fleet-view .dev-card > .qa-bar,
.fleet-view .dc > .qa-bar,
.fleet-view .dc > .dc-actions,
.fleet-view .dev-card-actions {
  margin-top: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Table / list rows: title absorbs width, status pinned trailing ─────── */
.dev-table tbody td,
.kl-agg-table tbody td,
.notif-table tbody td {
  vertical-align: middle !important;
}
.dev-table .dt-name,
.kl-agg-table .kl-app,
.notif-row .notif-title {
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-status,
.kl-agg-status,
.row-status {
  margin-inline-start: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Toolbars: one shared vertical center + consistent gap ───────────────── */
.topbar,
.stats-topbar,
.dev-hdr,
.dev-hdr-controls,
.fleet-toolbar,
.stream-chrome-group,
.kl-agg-filters,
.skl-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--align-gap-sm) !important;
  min-width: 0 !important;
}
.topbar-right,
.stats-topbar-right,
.dev-hdr-controls {
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* ── Buttons in a group: equal height, 12px between filled controls ──────── */
.btn-row,
.pur-amount-row,
.pur-wallet-addr-row,
.modal-actions,
.login-actions,
.skl-footer-actions,
.ctrl-cell .btn-row,
.action-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.btn-row > .sm-btn,
.btn-row > button,
.action-row > button,
.modal-actions > button {
  min-height: var(--align-field-h);
  box-sizing: border-box;
}

/* ── Modals: stacked body, full-width primary ────────────────────────────── */
.modal-box,
.bsm-box,
.purchase-box,
.login-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  max-width: min(100vw - 32px, 100%) !important;
}
.modal-box .modal-body,
.bsm-box {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--align-gap-md) !important;
  min-width: 0 !important;
}
/* Purchase wizard steps: layout only when active — never force all steps visible */
#purchaseStep1,
#purchaseStep2,
#purchaseStep3 {
  flex-direction: column !important;
  gap: var(--align-gap-md) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#purchaseStep1.pur-step-active,
#purchaseStep2.pur-step-active,
#purchaseStep3.pur-step-active {
  display: flex !important;
}
#purchaseStep1.pur-step-hidden,
#purchaseStep2.pur-step-hidden,
#purchaseStep3.pur-step-hidden,
#purchaseStep1[hidden],
#purchaseStep2[hidden],
#purchaseStep3[hidden] {
  display: none !important;
}
.modal-box .modal-actions,
.bsm-actions,
.pur-btn-primary {
  width: 100%;
  box-sizing: border-box;
}
button.pur-btn-primary,
#purchaseGetInvoiceBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ── Login / trial success credentials: readable full password ───────────── */
#trialPassOut,
#trialUserOut,
.login-success-cred code,
.trial-cred-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  user-select: all !important;
  -webkit-user-select: all !important;
  word-break: break-all !important;
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ── KPI / stat chips: equal columns ─────────────────────────────────────── */
.stats-row,
.kpi-row,
.ssr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: var(--align-gap-md) !important;
  align-items: stretch !important;
}
.stat-card,
.kpi-tile {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
  gap: var(--align-gap-xs) !important;
}
.stat-card .stat-value,
.kpi-tile .kpi-value {
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}

/* ── Controls sidebar: already strong; reinforce equal cell slots ────────── */
#screenCtrlSidebar .ctrl-cell,
.screen-ctrl-sidebar .ctrl-cell {
  min-height: 0;
}
#screenCtrlSidebar .scr-btn,
.screen-ctrl-sidebar .scr-btn {
  width: 100% !important;
  justify-content: center !important;
}

/* ── Safe area + content inset (controls float inside margins) ───────────── */
#app {
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}

/* ── Narrow screens: single column, no horizontal squeeze ────────────────── */
@media (max-width: 640px) {
  .pur-plans,
  #purchasePlans,
  #purchasePlansGrid.pur-plans,
  .purchase-box .pur-plan-grid {
    grid-template-columns: 1fr !important;
  }
  .pur-account-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .pur-account-k {
    width: auto !important;
    flex: none !important;
    padding-top: 0 !important;
  }
  .pur-account-val-wrap {
    justify-content: stretch !important;
  }
  .pur-account-v {
    text-align: start !important;
  }
  #screenCtrlSidebar,
  .screen-ctrl-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
  }
}

/* Trial login success — full password in clear text, aligned rows */
.login-success-panel .login-cred-row {
  align-items: flex-start !important;
}
.login-success-panel .login-cred-row > span {
  flex: 0 0 96px !important;
  color: rgba(245, 245, 247, 0.55) !important;
  font-weight: 600 !important;
}
.login-success-panel .login-cred-row > code {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: end !important;
  user-select: all !important;
  -webkit-user-select: all !important;
  -webkit-text-security: none !important;
  word-break: break-all !important;
  white-space: pre-wrap !important;
  overflow: visible !important;
}
#trialPassOut {
  color: #30d158 !important;
  font-weight: 700 !important;
}
.pur-hint-pass {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #30d158;
  font-weight: 700;
  user-select: all;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE PLANS: clear selection + centered third plan
   ═══════════════════════════════════════════════════════════════════════════ */
/* Three compact plans in one row */
#purchasePlansGrid.pur-plans,
.purchase-box .pur-plans {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* Two live plans ($700 + $2000) — centered pair */
#purchasePlansGrid.pur-plans-2,
#purchasePlansGrid.pur-plans:not(:has(.pur-plan[data-plan="source"]:not([hidden]))),
.purchase-box .pur-plans:not(:has(.pur-plan[data-plan="source"]:not([hidden]))) {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 10px !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: none !important;
}

/* Source Code is a normal column (same row as Monthly + Lifetime) */
#purchasePlansGrid .pur-plan[data-plan="source"],
.purchase-box .pur-plan[data-plan="source"] {
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  margin-inline: 0 !important;
}
#purchasePlansGrid .pur-plan[data-plan="source"][hidden],
.purchase-box .pur-plan[data-plan="source"][hidden] {
  display: none !important;
}

/* Base card — compact + quiet until selected */
#purchasePlansGrid .pur-plan,
.purchase-box .pur-plan {
  position: relative !important;
  cursor: pointer !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 8px 6px 22px !important;
  gap: 2px !important;
  min-width: 0 !important;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease,
    opacity 0.18s ease !important;
  -webkit-tap-highlight-color: transparent;
}
#purchasePlansGrid .pur-plan-label,
.purchase-box .pur-plan-label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.04em !important;
}
#purchasePlansGrid .pur-plan-price,
.purchase-box .pur-plan-price {
  font-size: 16px !important;
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
}
#purchasePlansGrid .pur-plan-price span,
.purchase-box .pur-plan-price span {
  font-size: 10px !important;
}
#purchasePlansGrid .pur-plan-period,
.purchase-box .pur-plan-period {
  font-size: 10px !important;
  margin-bottom: 6px !important;
}
#purchasePlansGrid .pur-plan-feats,
.purchase-box .pur-plan-feats {
  gap: 2px !important;
}
#purchasePlansGrid .pur-plan-feats li,
.purchase-box .pur-plan-feats li {
  font-size: 10px !important;
  line-height: 1.25 !important;
  gap: 4px !important;
}
#purchasePlansGrid .pur-popular-badge,
#purchasePlansGrid .pur-best-badge,
.purchase-box .pur-popular-badge,
.purchase-box .pur-best-badge {
  font-size: 8px !important;
  padding: 2px 6px !important;
  letter-spacing: 0.04em !important;
}
/* Popular / best badges stay decorative — NOT the selection signal */
#purchasePlansGrid .pur-plan-popular:not(.selected),
#purchasePlansGrid .pur-plan-best:not(.selected),
.purchase-box .pur-plan-popular:not(.selected),
.purchase-box .pur-plan-best:not(.selected) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
#purchasePlansGrid .pur-plan:hover:not(.selected),
.purchase-box .pur-plan:hover:not(.selected) {
  border-color: rgba(10, 132, 255, 0.45) !important;
  background: rgba(10, 132, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* ── SELECTED: unmistakable (thick ring + fill + glow + check) ───────────── */
#purchasePlansGrid .pur-plan.selected,
.purchase-box .pur-plan.selected,
.pur-plan.selected {
  border: 2.5px solid #0a84ff !important;
  background:
    linear-gradient(165deg, rgba(10, 132, 255, 0.28) 0%, rgba(10, 132, 255, 0.1) 55%, rgba(255, 255, 255, 0.04) 100%) !important;
  box-shadow:
    0 0 0 3px rgba(10, 132, 255, 0.35),
    0 10px 32px rgba(10, 132, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transform: scale(1.02) !important;
  z-index: 2 !important;
  opacity: 1 !important;
}
/* Dim non-selected siblings so choice is obvious */
#purchasePlansGrid:has(.pur-plan.selected) .pur-plan:not(.selected),
.purchase-box .pur-plans:has(.pur-plan.selected) .pur-plan:not(.selected) {
  opacity: 0.58 !important;
  filter: saturate(0.85) !important;
}
/* "Selected" chip — compact bottom-right */
#purchasePlansGrid .pur-plan.selected::after,
.purchase-box .pur-plan.selected::after,
.pur-plan.selected::after {
  content: "✓" !important;
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  left: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: var(--accent, #0a84ff) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* Room for the Selected chip so it doesn't cover features */
#purchasePlansGrid .pur-plan.selected,
.purchase-box .pur-plan.selected {
  padding-bottom: 28px !important;
}
/* Slight scale only — keep 3-col row stable */
#purchasePlansGrid .pur-plan.selected,
.purchase-box .pur-plan.selected,
.pur-plan.selected {
  transform: scale(1.01) !important;
}
/* Price pops when selected */
#purchasePlansGrid .pur-plan.selected .pur-plan-price,
.purchase-box .pur-plan.selected .pur-plan-price {
  color: #fff !important;
  text-shadow: 0 0 20px rgba(10, 132, 255, 0.55) !important;
}
#purchasePlansGrid .pur-plan.selected .pur-plan-label,
.purchase-box .pur-plan.selected .pur-plan-label {
  color: #64d2ff !important;
}

/* Focus-visible for keyboard */
#purchasePlansGrid .pur-plan:focus-visible,
.purchase-box .pur-plan:focus-visible {
  outline: 2px solid #64d2ff !important;
  outline-offset: 2px !important;
}

/* Keep the pair centered; stack only when very narrow */
@media (max-width: 420px) {
  #purchasePlansGrid.pur-plans,
  .purchase-box .pur-plans,
  #purchasePanel #purchasePlansGrid {
    flex-wrap: wrap !important;
    max-width: 280px !important;
  }
  #purchasePanel #purchasePlansGrid .pur-plan:not([hidden]),
  #purchasePlansGrid .pur-plan:not([hidden]) {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  #purchasePlansGrid .pur-plan[data-plan="source"],
  .purchase-box .pur-plan[data-plan="source"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (min-width: 421px) and (max-width: 560px) {
  #purchasePlansGrid .pur-plan-feats,
  .purchase-box .pur-plan-feats {
    display: none !important; /* tight width: hide feature list, keep price + label */
  }
  #purchasePlansGrid .pur-plan,
  .purchase-box .pur-plan {
    padding: 10px 6px 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME + ACCENT + NAV CONTRAST (last wins over phantom/ios/apple hardcodes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Accent tokens must drive CTAs / badges / focus (settings colour picker) ─ */
.topnav-badge,
#topNavDevCount {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--accent, #0a84ff) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 8px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
}
.topnav-btn.active .topnav-badge,
.topnav-btn[aria-selected="true"] .topnav-badge {
  background: var(--accent, #0a84ff) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Active nav uses accent (visible in dark + light) */
.topbar-nav .topnav-btn.active,
.topbar button.topnav-btn.active,
.topbar-nav .topnav-btn[aria-selected="true"] {
  color: #fff !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 28%, #1c1c1e) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 55%, transparent),
    0 2px 10px color-mix(in srgb, var(--accent, #0a84ff) 30%, transparent) !important;
  -webkit-text-fill-color: #fff !important;
}
.topbar-nav .topnav-btn:not(.active) {
  color: rgba(245, 245, 247, 0.72) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.72) !important;
}
.topbar-nav .topnav-btn:not(.active):hover {
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Primary buttons / CTAs follow accent */
.sm-btn.accent,
.scr-btn.go,
.empty-cta,
.login-register-btn,
.pur-btn-primary,
#purchaseGetInvoiceBtn,
.topbar-purchase-btn,
button.pur-btn-primary,
.ios-confirm-btn.confirm,
.accent-swatch.active {
  background: var(--accent, #0a84ff) !important;
  border-color: var(--accent, #0a84ff) !important;
  color: #fff !important;
}
.sm-btn.ghost,
.tb-back {
  color: var(--accent, #0a84ff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 55%, transparent) !important;
}
/* Focus rings */
.search:focus,
#searchInput:focus,
.ti:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
  border-color: var(--accent, #0a84ff) !important;
}
/* Purchase plan selected uses accent */
#purchasePlansGrid .pur-plan.selected,
.purchase-box .pur-plan.selected,
.pur-plan.selected {
  border-color: var(--accent, #0a84ff) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent),
    0 10px 32px color-mix(in srgb, var(--accent, #0a84ff) 28%, transparent) !important;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--accent, #0a84ff) 30%, transparent) 0%,
      color-mix(in srgb, var(--accent, #0a84ff) 10%, transparent) 55%,
      rgba(255, 255, 255, 0.04) 100%) !important;
}
#purchasePlansGrid .pur-plan.selected::after,
.purchase-box .pur-plan.selected::after,
.pur-plan.selected::after {
  background: var(--accent, #0a84ff) !important;
}

/* ── Search devices: always readable text + established placeholder ──────── */
#searchInput.search,
input#searchInput,
.list-toolbar .search,
.topbar-right .search {
  color: var(--text, #f5f5f7) !important;
  -webkit-text-fill-color: var(--text, #f5f5f7) !important;
  caret-color: var(--accent, #0a84ff) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  min-width: 160px !important;
  max-width: 260px !important;
  opacity: 1 !important;
}
#searchInput.search::placeholder,
input#searchInput::placeholder,
.list-toolbar .search::placeholder,
.topbar-right .search::placeholder {
  color: var(--text3, rgba(245, 245, 247, 0.48)) !important;
  -webkit-text-fill-color: var(--text3, rgba(245, 245, 247, 0.48)) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
#deviceCount.dev-count,
.dev-count {
  color: var(--text2, rgba(245, 245, 247, 0.65)) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ── LIGHT THEME — full chrome (beats apple-components + phantom hardcodes) ─ */
html[data-theme="light"],
html[data-theme="light"] body,
body.theme-light {
  --bg: #f2f2f7 !important;
  --s1: #ffffff !important;
  --s2: #f2f2f7 !important;
  --s3: #e5e5ea !important;
  --s4: #d1d1d6 !important;
  --border: rgba(60, 60, 67, 0.14) !important;
  --border2: rgba(60, 60, 67, 0.2) !important;
  --text: #1c1c1e !important;
  --text1: #1c1c1e !important;
  --text2: #3a3a3c !important;
  --text3: #6c6c70 !important;
  --ios-bg: #f2f2f7 !important;
  --ios-elevated: #ffffff !important;
  --ios-elevated-2: #f2f2f7 !important;
  --ios-elevated-3: #e5e5ea !important;
  --ios-label: #1c1c1e !important;
  --ios-label-2: #3a3a3c !important;
  --ios-label-3: #6c6c70 !important;
  --ios-fill: rgba(120, 120, 128, 0.14) !important;
  --ios-fill-2: rgba(120, 120, 128, 0.18) !important;
  --ios-fill-3: rgba(120, 120, 128, 0.12) !important;
  --glass-bg: rgba(255, 255, 255, 0.82) !important;
  --ph-bg: #f2f2f7 !important;
  --ph-s1: #ffffff !important;
  --ph-s2: #f2f2f7 !important;
  --ph-t1: #1c1c1e !important;
  --ph-t2: #3a3a3c !important;
  --ph-t3: #6c6c70 !important;
  --apple-label: #1c1c1e !important;
  --apple-label-2: #3a3a3c !important;
  --apple-label-3: #6c6c70 !important;
  --apple-elevated: #ffffff !important;
  --apple-elevated-2: #f2f2f7 !important;
  --apple-fill: rgba(120, 120, 128, 0.14) !important;
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  color-scheme: light !important;
}

html[data-theme="light"] body::before,
body.theme-light::before {
  background:
    radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--accent, #0a84ff) 10%, transparent), transparent 55%),
    radial-gradient(700px 420px at 92% 8%, rgba(94, 92, 230, 0.05), transparent 50%) !important;
  opacity: 1 !important;
}

/* Topbar + nav strip */
html[data-theme="light"] .topbar,
body.theme-light .topbar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(60, 60, 67, 0.16) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .topbar-title,
body.theme-light .topbar-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1c1c1e !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .topbar-nav,
body.theme-light .topbar-nav {
  background: rgba(120, 120, 128, 0.14) !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
}
html[data-theme="light"] .topbar-nav .topnav-btn,
html[data-theme="light"] .topbar button.topnav-btn,
html[data-theme="light"] a.topnav-btn,
body.theme-light .topbar-nav .topnav-btn {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
  background: transparent !important;
}
html[data-theme="light"] .topbar-nav .topnav-btn:hover,
body.theme-light .topbar-nav .topnav-btn:hover {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="light"] .topbar-nav .topnav-btn.active,
html[data-theme="light"] .topbar button.topnav-btn.active,
html[data-theme="light"] .topbar-nav .topnav-btn[aria-selected="true"],
body.theme-light .topbar-nav .topnav-btn.active {
  background: #ffffff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 1.5px color-mix(in srgb, var(--accent, #0a84ff) 65%, transparent) !important;
}
html[data-theme="light"] .topnav-badge,
html[data-theme="light"] #topNavDevCount,
body.theme-light .topnav-badge {
  background: var(--accent, #0a84ff) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1.5px solid #ffffff !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent),
    0 2px 6px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}

/* Search on light */
html[data-theme="light"] #searchInput.search,
html[data-theme="light"] input#searchInput,
html[data-theme="light"] .search,
body.theme-light #searchInput.search {
  background: rgba(120, 120, 128, 0.14) !important;
  background-color: rgba(120, 120, 128, 0.14) !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] #searchInput.search::placeholder,
html[data-theme="light"] input#searchInput::placeholder,
html[data-theme="light"] .search::placeholder,
body.theme-light #searchInput::placeholder {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .dev-count,
body.theme-light .dev-count {
  color: #3a3a3c !important;
}

/* Overflow menu light */
html[data-theme="light"] .topbar-overflow-btn,
body.theme-light .topbar-overflow-btn {
  border-color: rgba(60, 60, 67, 0.18) !important;
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .topbar-overflow-menu,
body.theme-light .topbar-overflow-menu {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14) !important;
}
html[data-theme="light"] .topbar-overflow-menu button,
html[data-theme="light"] .topbar-overflow-menu a,
body.theme-light .topbar-overflow-menu button,
body.theme-light .topbar-overflow-menu a {
  color: #1c1c1e !important;
}
html[data-theme="light"] .topbar-overflow-menu button:hover,
html[data-theme="light"] .topbar-overflow-menu a:hover {
  background: rgba(120, 120, 128, 0.12) !important;
}

/* Surfaces / cards / panels */
html[data-theme="light"] .list-toolbar,
html[data-theme="light"] .fleet-toolbar,
html[data-theme="light"] .settings-view,
html[data-theme="light"] .s-panel,
html[data-theme="light"] .s-group,
html[data-theme="light"] .all-panel,
html[data-theme="light"] .dev-card,
html[data-theme="light"] .dc,
html[data-theme="light"] .stats-kpi-card,
html[data-theme="light"] .kl-table-wrap,
html[data-theme="light"] .screen-ctrl-sidebar,
html[data-theme="light"] #screenCtrlSidebar,
html[data-theme="light"] .dmodal-box,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .purchase-box,
html[data-theme="light"] .login-box,
html[data-theme="light"] .toast,
html[data-theme="light"] .bulk-bar,
html[data-theme="light"] .ss-root,
html[data-theme="light"] .stats-root,
html[data-theme="light"] .kl-agg-root,
body.theme-light .dev-card,
body.theme-light .list-toolbar {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .dev-card-name,
html[data-theme="light"] .dc-name,
html[data-theme="light"] .s-label,
html[data-theme="light"] .empty-title,
html[data-theme="light"] .lt-title,
html[data-theme="light"] .ss-title,
html[data-theme="light"] .section-title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
body.theme-light .dev-card-name {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: none !important;
}

html[data-theme="light"] .scr-btn,
html[data-theme="light"] .sm-btn:not(.accent):not(.danger):not(.go),
html[data-theme="light"] .qa-btn,
html[data-theme="light"] .fleet-filter-btn,
html[data-theme="light"] .view-mode-btn,
html[data-theme="light"] .theme-btn,
html[data-theme="light"] .font-btn,
html[data-theme="light"] .font-size-btn,
html[data-theme="light"] .ui-scale-btn {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .theme-btn.active,
html[data-theme="light"] .font-btn.active,
html[data-theme="light"] .font-size-btn.active,
html[data-theme="light"] .fleet-filter-btn.active,
html[data-theme="light"] .view-mode-btn.active {
  background: #ffffff !important;
  color: #1c1c1e !important;
  box-shadow: 0 0 0 1.5px var(--accent, #0a84ff) !important;
}

html[data-theme="light"] .dtab-nav,
html[data-theme="light"] .dtab-btn {
  background: rgba(120, 120, 128, 0.1) !important;
  color: #3a3a3c !important;
}
html[data-theme="light"] .dtab-btn.active {
  background: #fff !important;
  color: #1c1c1e !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .login-overlay {
  background: #f2f2f7 !important;
}
html[data-theme="light"] #app,
html[data-theme="light"] .devices-view,
html[data-theme="light"] .fleet-view {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}

html[data-theme="light"] .ti,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .sel {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .ghost-btn,
html[data-theme="light"] .topnav-exit {
  color: #3a3a3c !important;
}
html[data-theme="light"] .topnav-exit:hover {
  color: #ff3b30 !important;
}

/* Tables / list rows */
html[data-theme="light"] .dev-table th,
html[data-theme="light"] .kl-agg-table th {
  color: #6c6c70 !important;
  background: #f2f2f7 !important;
}
html[data-theme="light"] .dev-table td,
html[data-theme="light"] .kl-agg-table td,
html[data-theme="light"] .dev-list-row {
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}

/* Settings nav */
html[data-theme="light"] .snav-btn {
  color: #3a3a3c !important;
}
html[data-theme="light"] .snav-btn.active {
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, #fff) !important;
  color: var(--accent, #0a84ff) !important;
}

/* Trial pill still readable on light topbar */
html[data-theme="light"] #trialCountdown {
  color: #c93400 !important;
  background: rgba(255, 149, 0, 0.15) !important;
  border-color: rgba(255, 149, 0, 0.35) !important;
}
html[data-theme="light"] .topbar-purchase-btn {
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, #fff) !important;
  color: var(--accent, #0a84ff) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
}

/* Dark scheme explicit (reset if user flips back) */
html[data-theme="dark"] {
  color-scheme: dark !important;
}

/* Purchase — download account info button */
.pur-download-creds {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent);
  color: var(--accent, #64d2ff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, transform 0.1s ease;
}
.pur-download-creds:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 22%, transparent);
}
.pur-download-creds:active {
  transform: scale(0.98);
}
html[data-theme="light"] .pur-download-creds {
  color: var(--accent, #0a84ff);
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff);
}

/* Purchase modal: room for 3 compact plan columns */
.purchase-box {
  width: min(640px, calc(100vw - 24px)) !important;
  max-width: min(640px, calc(100vw - 24px)) !important;
  padding: 22px 18px 18px !important;
}

/* Full invoice ID — one string, centered group + copy */
.pur-invoice-id-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 4px auto 10px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.pur-invoice-id-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
}
.pur-invoice-id-lbl {
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(245, 245, 247, 0.5) !important;
  padding-top: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}
.pur-invoice-id,
#invId.pur-invoice-id {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #f5f5f7 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-x: auto !important;
  text-overflow: clip !important;
  user-select: all !important;
  -webkit-user-select: all !important;
  line-height: 1.35 !important;
}
.pur-copy-id {
  flex-shrink: 0 !important;
  align-self: center !important;
  margin: 0 auto !important;
}
html[data-theme="light"] .pur-invoice-id-row {
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .pur-invoice-id,
html[data-theme="light"] #invId.pur-invoice-id {
  color: #1c1c1e !important;
}
html[data-theme="light"] .pur-invoice-id-lbl {
  color: #6c6c70 !important;
}

/* ── APK Builder paywall overlay (non-paid can view, not build) ───────────── */
#viewApkBuild.apkv-root {
  position: relative !important;
  min-height: 0 !important;
}
#viewApkBuild .apkb-wrap {
  transition: filter 0.2s ease, opacity 0.2s ease;
}
/* Locked: form is hidden via JS; paywall is the only visible surface */
#viewApkBuild.apk-gated .apkb-wrap,
#viewApkBuild.apk-gated #apkBuilderForm {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.apk-paywall-overlay {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 16px 56px !important;
  box-sizing: border-box !important;
  min-height: min(72vh, 640px) !important;
  width: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow-y: auto !important;
}
.apk-paywall-overlay:not(.hidden):not([hidden]) {
  display: flex !important;
}
#viewApkBuild.apk-gated .apk-paywall-overlay {
  display: flex !important;
  flex: 1 1 auto !important;
}
.apk-paywall-hint {
  margin: 14px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: rgba(235, 235, 245, 0.45) !important;
  text-align: center !important;
}
html[data-theme="light"] .apk-paywall-hint { color: #6c6c70 !important; }
/* Paid-only unlock / credentials controls */
.paid-gated,
button.paid-gated,
input.paid-gated {
  opacity: 0.72 !important;
  cursor: pointer !important; /* still clickable → shows Controls paywall */
  filter: grayscale(0.15);
}
[data-paid-feature="unlock-cred"].paid-feature-locked {
  position: relative;
}
[data-paid-feature="unlock-cred"].paid-feature-locked::after {
  content: 'Paid';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.95);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
  z-index: 2;
}

/* Paywall card drawn over the Controls modal */
#screenCtrlSidebar {
  position: relative !important;
}
.ctrl-paid-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;
  background: rgba(8, 8, 14, 0.72) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  border-radius: inherit !important;
}
.ctrl-paid-overlay.is-open,
.ctrl-paid-overlay:not([hidden]) {
  display: flex !important;
}
.ctrl-paid-card {
  width: min(100%, 320px) !important;
  background: rgba(28, 28, 36, 0.98) !important;
  border: 1px solid rgba(255, 214, 10, 0.28) !important;
  border-radius: 16px !important;
  padding: 22px 18px 16px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  text-align: center !important;
}
.ctrl-paid-ico {
  font-size: 28px !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}
.ctrl-paid-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #f5f5f7 !important;
  margin-bottom: 8px !important;
}
.ctrl-paid-sub {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(235, 235, 245, 0.55) !important;
  margin: 0 0 16px !important;
}
.ctrl-paid-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.ctrl-paid-actions .scr-btn {
  width: 100% !important;
  justify-content: center !important;
}
html[data-theme="light"] .ctrl-paid-overlay {
  background: rgba(255, 255, 255, 0.72) !important;
}
html[data-theme="light"] .ctrl-paid-card {
  background: #fff !important;
  border-color: rgba(200, 150, 0, 0.35) !important;
}
html[data-theme="light"] .ctrl-paid-title { color: #1c1c1e !important; }
html[data-theme="light"] .ctrl-paid-sub { color: #6c6c70 !important; }
.myapk-dl.is-disabled,
.myapk-pdf-btn.is-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.apkb-field-hint {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: var(--text3, rgba(245, 245, 247, 0.42)) !important;
  max-width: 36rem !important;
}
.apk-paywall-card {
  width: min(420px, 100%) !important;
  padding: 28px 24px 22px !important;
  border-radius: 20px !important;
  background: rgba(28, 28, 30, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  text-align: center !important;
  color: #f5f5f7 !important;
}
.apk-paywall-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 14px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 18%, transparent) !important;
  color: var(--accent, #64d2ff) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}
.apk-paywall-title {
  margin: 0 0 10px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f7 !important;
}
.apk-paywall-msg {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: rgba(245, 245, 247, 0.68) !important;
}
.apk-paywall-feats {
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.apk-paywall-feats li {
  font-size: 12.5px !important;
  color: rgba(245, 245, 247, 0.78) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.apk-paywall-feats li::before {
  content: "✓ " !important;
  color: var(--accent, #30d158) !important;
  font-weight: 800 !important;
}
.apk-paywall-cta {
  appearance: none !important;
  width: 100% !important;
  min-height: 46px !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: var(--accent, #0a84ff) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
  margin-bottom: 8px !important;
}
.apk-paywall-cta:hover { filter: brightness(1.06); }
.apk-paywall-secondary {
  appearance: none !important;
  width: 100% !important;
  min-height: 40px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.55) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 10px !important;
}
.apk-paywall-secondary:hover {
  color: #f5f5f7 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="light"] .apk-paywall-card {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .apk-paywall-title { color: #1c1c1e !important; }
html[data-theme="light"] .apk-paywall-msg { color: #3a3a3c !important; }
html[data-theme="light"] .apk-paywall-feats li {
  background: rgba(120, 120, 128, 0.1) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .apk-paywall-secondary { color: #6c6c70 !important; }
html[data-theme="light"] .apk-paywall-overlay {
  background: rgba(242, 242, 247, 0.55) !important;
}

/* ── Live chat widget (always above purchase/paywall) ───────────────────── */
.live-chat-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  /* Must beat #purchasePanel (10060–10080) and paywall */
  z-index: 10150;
  font-family: inherit;
  pointer-events: none; /* let clicks pass except fab/panel */
}
.live-chat-widget .lc-fab,
.live-chat-widget .lc-panel {
  pointer-events: auto;
}
/*
 * Device screen tools ("More ▾") sit bottom-right of the phone chrome.
 * Keep live-chat FAB clear of that control strip.
 */
body.device-view-active .live-chat-widget {
  /* Sit above phone control bars (~56–72px) on the LEFT so More stays tappable */
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)) !important;
  z-index: 900 !important; /* below device modals; above content */
}
body.device-view-active .live-chat-widget .lc-panel.open {
  left: 0 !important;
  right: auto !important;
  bottom: 68px !important;
}
/* Login / purchase: keep FAB bottom-right, slightly raised so it never covers CTAs */
body:not(.device-view-active) .live-chat-widget {
  bottom: max(20px, env(safe-area-inset-bottom));
}
/* When phone tools expanded, give even more clearance */
body.device-view-active.phone-tools-open .live-chat-widget {
  bottom: max(120px, calc(env(safe-area-inset-bottom) + 110px)) !important;
}
.lc-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent, #0a84ff), #5856d6);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent);
  position: relative;
  transition: transform 0.15s ease, filter 0.15s ease, bottom 0.15s ease;
}
/* Slightly smaller FAB in device view so it stays out of the way */
body.device-view-active .lc-fab {
  width: 48px;
  height: 48px;
}
.lc-fab:hover { filter: brightness(1.08); transform: scale(1.04); }
.lc-fab.open { transform: scale(0.96); opacity: 0.92; }
.lc-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a0f;
}
.lc-badge.show { display: inline-flex; }
.lc-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: min(360px, calc(100vw - 24px));
  height: min(480px, calc(100vh - 100px));
  display: none;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(22, 22, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.lc-panel.open { display: flex; }
.lc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #0a84ff) 35%, #1c1c1e), #1c1c1e);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lc-header-text { flex: 1; min-width: 0; }
.lc-title { font-size: 15px; font-weight: 800; color: #fff; }
.lc-sub { font-size: 11px; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }
.lc-close {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
.lc-close:hover { background: rgba(255, 255, 255, 0.2); }
.lc-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.lc-msg {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.lc-msg-user {
  align-self: flex-end;
  background: var(--accent, #0a84ff);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.lc-msg-admin {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
  border-bottom-left-radius: 4px;
}
.lc-msg-system {
  align-self: center;
  max-width: 95%;
  background: transparent;
  color: rgba(245, 245, 247, 0.5);
  font-size: 12px;
  text-align: center;
}
.lc-msg-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 3px;
}
.lc-msg-user .lc-msg-meta { color: rgba(255, 255, 255, 0.85); }
.lc-footer,
.lc-compose {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(28, 28, 30, 0.95) !important;
  box-sizing: border-box !important;
}
.lc-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  resize: none !important;
  max-height: 96px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.lc-input:focus {
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 55%, transparent) !important;
}
.lc-attach {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 245, 247, 0.85) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.lc-attach:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.lc-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: #ff453a !important; /* coral send matching screenshot accent */
  flex-shrink: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important; /* never show raw i18n text if mis-applied */
  line-height: 0 !important;
  box-sizing: border-box !important;
}
.lc-send svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.lc-send:hover { filter: brightness(1.08) !important; }
.lc-send:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
html[data-theme="light"] .lc-panel {
  background: #fff;
  border-color: rgba(60, 60, 67, 0.14);
}
html[data-theme="light"] .lc-messages { background: #f2f2f7; }
html[data-theme="light"] .lc-msg-admin {
  background: #e5e5ea;
  color: #1c1c1e;
}
html[data-theme="light"] .lc-footer,
html[data-theme="light"] .lc-compose {
  background: #fff !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .lc-input {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .lc-attach {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  color: #3a3a3c !important;
}
html[data-theme="light"] .lc-msg-system { color: #6c6c70; }
/* Keep above trial promo / purchase */
.live-chat-widget { z-index: 10150; }

/* Chat above payment — keep normal bottom-right place (not centered) */
body.payment-only-mode .live-chat-widget,
body.purchase-open .live-chat-widget,
body:has(#purchasePanel:not(.hidden)) .live-chat-widget,
body.lc-over-purchase .live-chat-widget {
  z-index: 10200 !important;
  pointer-events: none !important;
  /* Anchor stays bottom-right */
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
}
body.payment-only-mode .live-chat-widget .lc-fab,
body.payment-only-mode .live-chat-widget .lc-panel,
body.purchase-open .live-chat-widget .lc-fab,
body.purchase-open .live-chat-widget .lc-panel,
body:has(#purchasePanel:not(.hidden)) .live-chat-widget .lc-fab,
body:has(#purchasePanel:not(.hidden)) .live-chat-widget .lc-panel,
body.lc-over-purchase .live-chat-widget .lc-fab,
body.lc-over-purchase .live-chat-widget .lc-panel {
  pointer-events: auto !important;
}
/* Panel stays docked above the FAB at bottom-right */
body.payment-only-mode .lc-panel.open,
body.purchase-open .lc-panel.open,
body:has(#purchasePanel:not(.hidden)) .lc-panel.open,
body.lc-over-purchase .lc-panel.open {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: 0 !important;
  bottom: 68px !important;
  transform: none !important;
  width: min(360px, calc(100vw - 24px)) !important;
  height: min(480px, calc(100vh - 100px)) !important;
  max-height: calc(100vh - 100px) !important;
  z-index: 10220 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.55) !important;
}
body.payment-only-mode .lc-fab,
body.purchase-open .lc-fab,
body:has(#purchasePanel:not(.hidden)) .lc-fab,
body.lc-over-purchase .lc-fab {
  z-index: 10230 !important;
  position: relative !important;
}

/* Purchase — change package control */
.pur-change-plan-btn,
#purchaseChangePlanBtn {
  width: 100% !important;
  margin-top: 8px !important;
  min-height: 40px !important;
  font-weight: 700 !important;
  color: var(--accent, #64d2ff) !important;
  border: 1px dashed color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 8%, transparent) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
.pur-change-plan-btn:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 16%, transparent) !important;
}

/* ── Tasks page (admin) ─────────────────────────────────────────────────── */
.tasks-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 28px;
  min-height: 0;
  overflow: auto;
}
.tasks-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tasks-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text, #f5f5f7);
}
.tasks-sub {
  margin: 4px 0 8px;
  font-size: 12px;
  color: var(--text2, #aeaeb2);
  max-width: 42rem;
  line-height: 1.4;
}
.tasks-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2, #aeaeb2);
}
.tasks-stat b { color: var(--text, #fff); font-weight: 700; }
.tasks-stat-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text3, #636366);
}
.tasks-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tasks-section { margin-top: 4px; }
.tasks-section-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3, #8e8e93);
}
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tasks-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text3, #636366) 35%, transparent);
  background: color-mix(in srgb, var(--bg2, #1c1c1e) 90%, transparent);
}
.tasks-row.status-stuck {
  border-color: color-mix(in srgb, #ff453a 55%, transparent);
  background: color-mix(in srgb, #ff453a 8%, transparent);
}
.tasks-row.status-active {
  border-color: color-mix(in srgb, #0a84ff 40%, transparent);
}
.tasks-row-main,
.tasks-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tasks-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text2, #aeaeb2);
}
.tasks-pill.stuck { background: rgba(255,69,58,0.2); color: #ff6961; }
.tasks-pill.active { background: rgba(10,132,255,0.2); color: #64d2ff; }
.tasks-pill.ok { background: rgba(48,209,88,0.18); color: #30d158; }
.tasks-pill.fail { background: rgba(255,159,10,0.18); color: #ff9f0a; }
.tasks-kind {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text3, #8e8e93);
  font-weight: 600;
}
.tasks-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f5f5f7);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-dev {
  font-size: 12px;
  color: var(--text2, #aeaeb2);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-online {
  font-size: 11px;
  color: var(--text3, #8e8e93);
}
.tasks-online.on { color: #30d158; }
.tasks-dur {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #64d2ff);
  font-weight: 600;
}
.tasks-when {
  font-size: 11px;
  color: var(--text3, #8e8e93);
}
.tasks-stop-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, #ff453a 50%, transparent);
  background: color-mix(in srgb, #ff453a 12%, transparent);
  color: #ff6961;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.tasks-stop-btn:hover {
  background: color-mix(in srgb, #ff453a 22%, transparent);
}
.tasks-stop-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.tasks-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--text3, #8e8e93);
  text-align: center;
}

/* Light theme — Tasks page: white cards, dark text (not dark strips on pale UI) */
html[data-theme="light"] .tasks-root,
body.theme-light .tasks-root {
  color: #1c1c1e;
}
html[data-theme="light"] .tasks-title,
body.theme-light .tasks-title {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .tasks-sub,
html[data-theme="light"] .tasks-stats,
html[data-theme="light"] .tasks-section-title,
html[data-theme="light"] .tasks-empty,
body.theme-light .tasks-sub,
body.theme-light .tasks-stats,
body.theme-light .tasks-section-title {
  color: #636366 !important;
}
html[data-theme="light"] .tasks-stat b,
body.theme-light .tasks-stat b {
  color: #1c1c1e !important;
}
html[data-theme="light"] .tasks-row,
body.theme-light .tasks-row {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .tasks-row.status-active,
body.theme-light .tasks-row.status-active {
  border-color: rgba(0, 113, 227, 0.35) !important;
  background: rgba(0, 113, 227, 0.04) !important;
}
html[data-theme="light"] .tasks-row.status-stuck,
body.theme-light .tasks-row.status-stuck {
  border-color: rgba(255, 69, 58, 0.4) !important;
  background: rgba(255, 69, 58, 0.06) !important;
}
html[data-theme="light"] .tasks-type,
body.theme-light .tasks-type {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .tasks-kind,
html[data-theme="light"] .tasks-dev,
html[data-theme="light"] .tasks-when,
html[data-theme="light"] .tasks-online,
body.theme-light .tasks-kind,
body.theme-light .tasks-dev,
body.theme-light .tasks-when {
  color: #636366 !important;
}
html[data-theme="light"] .tasks-online.on,
body.theme-light .tasks-online.on {
  color: #1a7f37 !important;
}
html[data-theme="light"] .tasks-dur,
body.theme-light .tasks-dur {
  color: #0071e3 !important;
}
html[data-theme="light"] .tasks-pill,
body.theme-light .tasks-pill {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #3a3a3c !important;
}
html[data-theme="light"] .tasks-pill.active,
body.theme-light .tasks-pill.active {
  background: rgba(0, 113, 227, 0.12) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .tasks-pill.ok,
body.theme-light .tasks-pill.ok {
  background: rgba(48, 209, 88, 0.14) !important;
  color: #1a7f37 !important;
}
html[data-theme="light"] .tasks-pill.stuck,
body.theme-light .tasks-pill.stuck {
  background: rgba(255, 69, 58, 0.12) !important;
  color: #d70015 !important;
}
html[data-theme="light"] .tasks-pill.fail,
body.theme-light .tasks-pill.fail {
  background: rgba(255, 159, 10, 0.14) !important;
  color: #c93400 !important;
}
html[data-theme="light"] .tasks-stop-btn,
body.theme-light .tasks-stop-btn {
  border-color: rgba(215, 0, 21, 0.35) !important;
  background: rgba(215, 0, 21, 0.06) !important;
  color: #d70015 !important;
}
html[data-theme="light"] .tasks-toolbar-right .ss-btn.ghost,
body.theme-light .tasks-toolbar-right .ss-btn.ghost {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .tasks-toolbar-right .ss-btn.ghost.danger,
body.theme-light .tasks-toolbar-right .ss-btn.ghost.danger {
  color: #d70015 !important;
  border-color: rgba(215, 0, 21, 0.28) !important;
  background: rgba(215, 0, 21, 0.05) !important;
}

#btnFleetShotsAll.is-busy,
#btnFleetShotsAll:disabled {
  opacity: 0.75;
  cursor: wait;
}

/* Agent bar — Appetize "Demo check" hidden (real devices only) */
#demoApkDemoCheck.hidden,
#demoApkDemoCheck[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

/* Purchase — create brand-new invoice (cancels pending, fresh 24h timer) */
.pur-new-invoice-btn,
#purchaseNewInvoiceBtn {
  width: 100% !important;
  margin-top: 6px !important;
  min-height: 36px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--text2, #aeaeb2) !important;
  border: 1px solid color-mix(in srgb, var(--text3, #636366) 50%, transparent) !important;
  background: transparent !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.pur-new-invoice-btn:hover,
#purchaseNewInvoiceBtn:hover {
  color: var(--text, #f5f5f7) !important;
  border-color: color-mix(in srgb, #ff9f0a 55%, transparent) !important;
  background: color-mix(in srgb, #ff9f0a 10%, transparent) !important;
}
.pur-new-invoice-btn:active,
#purchaseNewInvoiceBtn:active {
  background: color-mix(in srgb, #ff9f0a 18%, transparent) !important;
}
.pur-new-invoice-btn:disabled,
#purchaseNewInvoiceBtn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
#purchaseStep2 .pur-new-invoice-btn,
#purchaseStep2 #purchaseNewInvoiceBtn {
  width: 100% !important;
  margin-top: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APK BUILD UI
   - Main fleet banner: dismissable (✕ works) — NOT sticky/forced open
   - Build APK page: high-visibility progress + log (what “transparency” meant)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fleet banner: only show when NOT .hidden — never force display over dismiss */
#apkProgressBanner.apk-progress-banner.hidden,
.apk-progress-banner.hidden,
#apkProgressBanner.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  opacity: 0 !important;
}
/* Visible fleet banner — compact, fully contained (no clip overflow) */
#apkProgressBanner.apk-progress-banner:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  margin: 8px 8px 6px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(12, 40, 80, 0.88) !important;
  border: 1px solid rgba(100, 210, 255, 0.4) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  gap: 6px !important;
  overflow: hidden !important; /* keep bar fill inside rounded box */
  min-width: 0 !important;
}
#apkProgressBanner .apk-progress-banner-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#apkProgressBanner .apk-progress-banner-copy {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#apkProgressBanner .apk-progress-banner-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#apkProgressBanner .apk-progress-banner-step {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
#apkProgressBanner .apk-progress-banner-meta {
  flex-shrink: 0 !important;
}
#apkProgressBanner .apk-progress-banner-bar {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
#apkProgressBanner.is-done .apk-progress-banner-bar {
  display: none !important;
}
#apkProgressBanner .apk-progress-banner-fill {
  display: block !important;
  height: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(90deg, #0071e3, #64d2ff) !important;
}
#apkProgressBanner .apk-progress-dl {
  min-height: 30px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
  flex: 0 0 auto !important;
}
#apkProgressBanner .apk-progress-dismiss {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 6 !important;
  opacity: 1 !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 auto !important;
}
@media (max-width: 640px) {
  #apkProgressBanner.apk-progress-banner:not(.hidden) {
    margin: 6px 6px 4px !important;
    padding: 8px !important;
    max-width: calc(100% - 12px) !important;
  }
  #apkProgressBanner .apk-progress-banner-step {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  #apkProgressBanner .apk-progress-dl {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}
/* Topbar badge only when visible */
.apk-topbar-badge.hidden {
  display: none !important;
}
.apk-topbar-badge:not(.hidden) {
  display: inline-flex !important;
  min-height: 30px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: rgba(0, 113, 227, 0.45) !important;
  border: 1px solid rgba(100, 210, 255, 0.55) !important;
  max-width: none !important;
  min-width: max-content !important;
  width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
#apkTopbarBadgeText {
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}
.apk-topbar-badge.is-done:not(.hidden) {
  background: rgba(48, 209, 88, 0.4) !important;
  border-color: rgba(48, 209, 88, 0.65) !important;
}

/* ── Build APK PAGE only — clear / high-contrast progress (not main devices) ─ */
#viewApkBuild .apkb-wrap {
  position: relative;
}
#viewApkBuild #apkProgress.apkb-progress:not(.hidden),
#viewApkBuild .apkb-progress:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 18px 18px 16px !important;
  border-radius: 16px !important;
  background: rgba(8, 28, 58, 0.96) !important;
  border: 1.5px solid rgba(100, 210, 255, 0.55) !important;
  box-shadow: 0 12px 36px rgba(0, 113, 227, 0.28) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}
#viewApkBuild .apkb-progress-bar {
  height: 14px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}
#viewApkBuild .apkb-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #0071e3, #2997ff, #64d2ff) !important;
  box-shadow: 0 0 16px rgba(41, 151, 255, 0.65) !important;
  transition: width 0.35s ease !important;
}
#viewApkBuild .apkb-status {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#viewApkBuild .apkb-log {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  max-height: min(42vh, 360px) !important;
  min-height: 120px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(245, 245, 247, 0.92) !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}
#viewApkBuild .apkb-log .apkl-step { color: #64d2ff !important; font-weight: 700 !important; }
#viewApkBuild .apkb-log .apkl-ok,
#viewApkBuild .apkb-log .apkl-done { color: #30d158 !important; }
#viewApkBuild .apkb-log .apkl-error { color: #ff6b6b !important; }
#viewApkBuild .apkb-download {
  font-weight: 800 !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
}

/* Build log modal (opened from builder) — clear solid panel */
.apklm-backdrop:not(.hidden) {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 10070 !important;
}
.apklm-box {
  background: #12141c !important;
  border: 1.5px solid rgba(100, 210, 255, 0.4) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65) !important;
  opacity: 1 !important;
}
.apklm-pbar {
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}
.apklm-pfill {
  height: 100% !important;
  background: linear-gradient(90deg, #0071e3, #64d2ff) !important;
  box-shadow: 0 0 12px rgba(41, 151, 255, 0.55) !important;
}
.apklm-log {
  background: #0a0c12 !important;
  color: #e8eaed !important;
  font-size: 12.5px !important;
  min-height: 200px !important;
  max-height: min(50vh, 420px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.apklm-badge.running {
  background: rgba(10, 132, 255, 0.35) !important;
  color: #7dd3fc !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
.apklm-badge.done {
  background: rgba(48, 209, 88, 0.3) !important;
  color: #30d158 !important;
  font-weight: 800 !important;
}
.apklm-badge.error {
  background: rgba(255, 69, 58, 0.3) !important;
  color: #ff6b6b !important;
  font-weight: 800 !important;
}

/* Light: builder page */
html[data-theme="light"] #viewApkBuild #apkProgress.apkb-progress:not(.hidden) {
  background: #e8f2ff !important;
  border-color: #0a84ff !important;
}
html[data-theme="light"] #viewApkBuild .apkb-status {
  color: #0a2540 !important;
  -webkit-text-fill-color: #0a2540 !important;
}
html[data-theme="light"] #viewApkBuild .apkb-log {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #apkProgressBanner.apk-progress-banner:not(.hidden) {
  background: #e8f2ff !important;
  border-color: rgba(10, 132, 255, 0.45) !important;
}
html[data-theme="light"] #apkProgressBanner .apk-progress-banner-title {
  color: #0a2540 !important;
}
html[data-theme="light"] #apkProgressBanner .apk-progress-banner-step {
  color: #3a3a3c !important;
}

/* Live chat welcome CTA */
.lc-welcome {
  max-width: 100% !important;
  text-align: left !important;
  padding: 12px 14px !important;
  background: rgba(10, 132, 255, 0.12) !important;
  border: 1px solid rgba(100, 210, 255, 0.35) !important;
  border-radius: 14px !important;
  color: rgba(245, 245, 247, 0.92) !important;
}
.lc-welcome .lc-msg-body {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}
.lc-welcome-cta {
  appearance: none;
  margin-top: 10px;
  width: 100%;
  min-height: 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--accent, #0a84ff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent);
}
.lc-welcome-cta:hover { filter: brightness(1.06); }
html[data-theme="light"] .lc-welcome {
  background: rgba(10, 132, 255, 0.1) !important;
  border-color: rgba(10, 132, 255, 0.3) !important;
  color: #1c1c1e !important;
}

/* Live chat — image attach */
.lc-attach {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(245, 245, 247, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lc-attach:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.lc-image-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px 0;
  background: rgba(28, 28, 30, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* display:flex above overrides UA [hidden] — force hide until an image is attached */
.lc-image-preview[hidden],
.lc-image-preview.hidden,
#lcImagePreview[hidden],
#lcImagePreview.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
  pointer-events: none !important;
}
.lc-image-preview img {
  max-width: 120px;
  max-height: 90px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lc-image-clear {
  appearance: none;
  border: none;
  background: rgba(255, 59, 48, 0.25);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.lc-image-clear[hidden] {
  display: none !important;
}
.lc-msg-img-wrap { display: block; margin: 4px 0 6px; }
.lc-msg-img {
  max-width: min(240px, 100%);
  max-height: 200px;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: zoom-in;
}
html[data-theme="light"] .lc-attach {
  background: rgba(120, 120, 128, 0.12);
  border-color: rgba(60, 60, 67, 0.16);
  color: #3a3a3c;
}
html[data-theme="light"] .lc-image-preview {
  background: #fff;
  border-color: rgba(60, 60, 67, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE MODAL — centered; card scrolls when the viewport is short
   ═══════════════════════════════════════════════════════════════════════════ */
#purchasePanel.purchase-panel:not(.hidden) {
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  overflow: hidden !important;
}
#purchasePanel .purchase-box,
.purchase-box {
  width: min(520px, calc(100vw - 24px)) !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  max-height: min(94dvh, 100%) !important;
  margin: 0 auto !important;
  padding: 14px 14px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* methods + CTA must stay reachable */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
}

/* Step 1: grow to content; the card (not this step) is the scrollport */
#purchasePanel #purchaseStep1,
#purchaseStep1.pur-step-active {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
#purchasePanel .pur-brand {
  margin-bottom: 0 !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
#purchasePanel .pur-brand-ico { width: 28px !important; height: 28px !important; }
#purchasePanel .pur-brand-name { font-size: 14px !important; }
#purchasePanel .pur-brand-sub { display: none !important; }
#purchasePanel .pur-plans,
#purchasePanel #purchasePlansGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 auto 12px !important;
  width: 100% !important;
  max-width: 420px !important;
  justify-items: stretch !important;
  flex-shrink: 0 !important;
}
#purchasePanel #purchasePlansGrid .pur-plan:not([hidden]),
#purchasePanel .pur-plans .pur-plan:not([hidden]) {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 200px !important;
  min-width: 148px !important;
}
/* When Full Source is on sale, allow three equal cards */
#purchasePanel #purchasePlansGrid:has(.pur-plan[data-plan="source"]:not([hidden])) {
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#purchasePanel #purchasePlansGrid:has(.pur-plan[data-plan="source"]:not([hidden])) .pur-plan {
  max-width: none !important;
}
#purchasePanel .pur-plan {
  padding: 8px 6px 10px !important;
  gap: 1px !important;
  border-radius: 10px !important;
  min-height: 0 !important;
}
/* Always hide feature lists — prices + period are enough for compact modal */
#purchasePanel .pur-plan-feats,
#purchasePanel .pur-plan ul {
  display: none !important;
}
#purchasePanel .pur-plan-label { font-size: 9px !important; margin-bottom: 0 !important; }
#purchasePanel .pur-plan-price { font-size: 15px !important; line-height: 1.1 !important; margin: 0 !important; }
#purchasePanel .pur-plan-price span { font-size: 9px !important; }
#purchasePanel .pur-plan-period { font-size: 9px !important; margin: 0 !important; }
#purchasePanel .pur-account-box {
  margin: 2px 0 !important;
  padding: 6px 8px !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 10px !important;
}
#purchasePanel .pur-account-label { font-size: 9px !important; margin: 0 0 2px !important; }
#purchasePanel .pur-account-row { gap: 6px !important; margin: 0 !important; font-size: 12px !important; }
#purchasePanel .pur-account-k { flex-basis: 64px !important; width: 64px !important; padding-top: 2px !important; font-size: 11px !important; }
#purchasePanel .pur-account-hint { display: none !important; }
#purchasePanel .pur-account-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
#purchasePanel .pur-account-actions .pur-btn-sm,
#purchasePanel .pur-account-actions .pur-btn-ghost {
  flex: 1 1 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  margin: 0 !important;
}
#purchasePanel .pur-edit-form {
  margin-top: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}
#purchasePanel .pur-edit-form[hidden] { display: none !important; }
#purchasePanel .pur-edit-field { gap: 2px !important; font-size: 10px !important; }
#purchasePanel .pur-edit-input,
#purchasePanel .pur-edit-form input {
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}
#purchasePanel .pur-edit-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 0 !important;
}
#purchasePanel .pur-edit-actions .pur-btn-primary,
#purchasePanel .pur-edit-actions .pur-btn-ghost {
  flex: 1 1 0 !important;
  min-height: 30px !important;
  height: 30px !important;
}
#purchasePanel .pur-email-field { margin: 0 !important; flex-shrink: 0 !important; gap: 3px !important; }
#purchasePanel .pur-email-field-lbl { font-size: 11px !important; }
#purchasePanel .pur-email-input { min-height: 34px !important; height: 34px !important; font-size: 13px !important; }

/* Payment methods — dense 3-col grid so all 5 fit without scroll */
#purchasePanel .pur-method-block,
#purchasePanel #purchaseMethodBlock {
  margin: 2px 0 0 !important;
  flex-shrink: 0 !important;
}
#purchasePanel .pur-method-label {
  font-size: 9px !important;
  margin-bottom: 4px !important;
}
#purchasePanel .pur-method-block,
#purchasePanel #purchaseMethodBlock {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
#purchasePanel .pur-method-label {
  width: 100% !important;
  text-align: center !important;
}
#purchasePanel .pur-method-grid,
#purchasePanel #purchaseMethodGrid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}
#purchasePanel button.pur-method-opt,
#purchasePanel .pur-method-opt {
  flex: 0 1 calc(33.333% - 6px) !important;
  min-width: 108px !important;
  max-width: 132px !important;
}
#purchasePanel button.pur-method-opt,
#purchasePanel .pur-method-opt {
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  gap: 1px !important;
}
#purchasePanel .pur-method-name { font-size: 12px !important; }
#purchasePanel .pur-method-net { font-size: 9px !important; }
#purchasePanel .pur-method-tag {
  margin-top: 2px !important;
  font-size: 8px !important;
  padding: 1px 5px !important;
}
#purchasePanel .pur-method-hint {
  font-size: 9px !important;
  margin-top: 4px !important;
  line-height: 1.25 !important;
  opacity: 0.75 !important;
}
#purchasePanel #purchaseGetInvoiceBtn,
#purchasePanel .pur-btn-primary {
  flex-shrink: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  margin-top: 2px !important;
  font-size: 13px !important;
}
#purchasePanel .pur-secure-note {
  font-size: 9px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* Short viewports: even tighter */
@media (max-height: 720px) {
  #purchasePanel .purchase-box {
    padding: 8px 10px 8px !important;
  }
  #purchasePanel #purchaseStep1 { gap: 4px !important; }
  #purchasePanel .pur-secure-note { display: none !important; }
  #purchasePanel .pur-method-hint { display: none !important; }
  #purchasePanel .pur-plan { padding: 6px 5px !important; }
  #purchasePanel .pur-plan-price { font-size: 14px !important; }
  #purchasePanel button.pur-method-opt { padding: 5px 6px !important; }
  #purchasePanel #purchaseGetInvoiceBtn { min-height: 34px !important; height: 34px !important; }
  #purchasePanel .pur-account-actions { display: none !important; } /* edit/download still in step2 */
}

/* Login: Desktop version button */
.login-contacts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}
.login-desktop-btn {
  color: #64d2ff !important;
  border-color: rgba(100, 210, 255, 0.28) !important;
}
.login-desktop-btn:hover {
  background: rgba(100, 210, 255, 0.10) !important;
}

/* No amounts / tags / hints on method tiles — brand icons stay visible */
#purchasePanel .pur-method-amt,
#purchasePanel .pur-method-tag,
#purchasePanel .pur-method-hint {
  display: none !important;
}
/* Crypto brand icons — force visible (was previously hidden with method svgs) */
#purchasePanel .pur-method-opt .pur-method-ico,
#purchasePanel .pur-method-opt .pur-method-ico svg,
#purchasePanel .pur-method-ico svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex-shrink: 0 !important;
}
#purchasePanel .pur-method-opt .pur-method-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}
#purchasePanel .pur-method-ico svg circle,
#purchasePanel .pur-method-ico svg path {
  display: block !important;
}

/* Step 2 — fit in one viewport; scroll only as last resort */
#purchaseStep2 .pur-step2-header-compact {
  padding: 0 32px 6px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
#purchaseStep2 .pur-step2-header-compact .pur-step2-icon { display: none !important; }
#purchaseStep2 .pur-step2-header-compact .pur-step2-title {
  font-size: 15px !important;
}
#purchaseStep2 .pur-step2-header-compact .pur-step2-sub {
  font-size: 11px !important;
}
#purchaseStep2 .pur-step2-scroll-fit {
  gap: 6px !important;
  padding: 0 0 4px !important;
  overflow-y: auto !important; /* allow if viewport tiny */
  overflow-x: hidden !important;
}
#purchaseStep2 .pur-account-dense {
  padding: 6px 8px !important;
  gap: 3px !important;
}
#purchaseStep2 .pur-cred-tools-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  margin-top: 2px !important;
  align-items: center !important;
}
#purchaseStep2 .pur-link-btn,
#purchaseStep2 .pur-cred-tools-inline .pur-link-btn,
#purchaseStep2 .pur-cred-tools-inline button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #64d2ff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}
#purchaseStep2 .pur-link-btn:hover {
  text-decoration: underline !important;
  filter: none !important;
  background: none !important;
}
/* Kill full-width Change plan / New invoice pills if any leftover CSS */
#purchaseStep2 #purchaseChangePlanBtn.pur-change-plan-btn,
#purchaseStep2 #purchaseNewInvoiceBtn.pur-new-invoice-btn,
#purchaseStep2 .pur-change-plan-btn,
#purchaseStep2 .pur-new-invoice-btn {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  color: #64d2ff !important;
  font-size: 11px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#purchaseStep2 .pur-email-step2-compact {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 2px !important;
}
#purchaseStep2 .pur-email-step2-k {
  font-size: 11px !important;
  color: var(--text3, #8e8e93) !important;
  flex: 0 0 auto !important;
}
#purchaseStep2 .pur-email-step2-input {
  flex: 1 1 auto !important;
  min-height: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
}
#purchaseStep2 .pur-pay-compact {
  padding: 8px 10px !important;
  gap: 6px !important;
}
#purchaseStep2 .pur-pay-compact-top {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: start !important;
}
#purchaseStep2 .pur-amount-val {
  font-size: 22px !important;
}
#purchaseStep2 .pur-wallet-qr,
#purchaseStep2 .pur-wallet-qr-frame img {
  width: 84px !important;
  height: 84px !important;
}
#purchaseStep2 .pur-qr-hint { display: none !important; }
#purchaseStep2 .pur-wallet-addr {
  font-size: 10px !important;
  word-break: break-all !important;
  line-height: 1.3 !important;
}
#purchaseStep2 .pur-wallet-net {
  font-size: 10px !important;
  margin-top: 2px !important;
}
#purchaseStep2 .pur-wallet-manual {
  margin-top: 4px !important;
  font-size: 10px !important;
  color: var(--text3, #8e8e93) !important;
  line-height: 1.3 !important;
}
#purchaseStep2 .pur-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  font-size: 11px !important;
  margin: 0 !important;
  padding: 0 2px !important;
}
#purchaseStep2 .pur-check-status {
  font-size: 11px !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
}
#purchaseStep2 .pur-step2-actions {
  flex-shrink: 0 !important;
  gap: 6px !important;
  padding-top: 6px !important;
  margin-top: 2px !important;
}
#purchaseStep2 .pur-step2-actions .pur-btn-primary {
  min-height: 38px !important;
  height: 38px !important;
  font-size: 13px !important;
}
#purchaseStep2 .pur-step2-actions-row {
  display: flex !important;
  gap: 6px !important;
}
#purchaseStep2 .pur-step2-actions-row .pur-btn-ghost {
  flex: 1 1 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}
/* Hide decorative SVGs inside step2 action buttons (user: no icons clutter) */
#purchaseStep2 .pur-btn-primary svg,
#purchaseStep2 .pur-btn-ghost svg,
#purchaseStep2 .pur-mini-btn svg {
  display: none !important;
}

/* Step 2 fills box; scroll only middle if needed; actions always visible */
#purchaseStep2.pur-step-active,
#purchaseStep2.pur-step2-compact.pur-step-active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
#purchaseStep2 .pur-step2-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch;
}

/* Compact header */
#purchaseStep2 .pur-step2-header {
  margin-bottom: 0 !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
#purchaseStep2 .pur-step2-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
#purchaseStep2 .pur-step2-title {
  font-size: 15px !important;
}
#purchaseStep2 .pur-step2-sub {
  font-size: 11px !important;
}

/* Account box denser */
#purchaseStep2 .pur-account-box {
  margin: 0 !important;
  padding: 8px 10px !important;
  gap: 4px !important;
  border-radius: 12px !important;
}
#purchaseStep2 .pur-account-label {
  font-size: 10px !important;
  margin: 0 !important;
}
#purchaseStep2 .pur-account-row {
  gap: 8px !important;
  margin: 0 !important;
  align-items: center !important;
}
#purchaseStep2 .pur-account-k {
  flex: 0 0 72px !important;
  width: 72px !important;
  padding-top: 0 !important;
  font-size: 11px !important;
}
#purchaseStep2 .pur-account-v {
  padding: 3px 6px !important;
  font-size: 12px !important;
}
#purchaseStep2 .pur-account-copy {
  padding: 3px 7px !important;
  font-size: 10px !important;
}
#purchaseStep2 .pur-download-compact {
  margin-top: 4px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  min-height: 0 !important;
}

/* Amount + wallet side by side when space allows */
#purchaseStep2 .pur-pay-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
#purchaseStep2 .pur-amount-box {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}
#purchaseStep2 .pur-amount-lbl {
  font-size: 9px !important;
  margin-bottom: 4px !important;
}
#purchaseStep2 .pur-amount-val {
  font-size: 26px !important;
}
#purchaseStep2 .pur-amount-unit {
  font-size: 12px !important;
}
#purchaseStep2 .pur-amount-plan {
  font-size: 10px !important;
  margin-top: 2px !important;
}

#purchaseStep2 .pur-wallet-section {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#purchaseStep2 .pur-wallet-qr-wrap,
#purchaseStep2 .pur-wallet-qr {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
}
#purchaseStep2 .pur-wallet-qr {
  object-fit: contain !important;
  background: #fff !important;
}
#purchaseStep2 .pur-wallet-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#purchaseStep2 .pur-wallet-lbl {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}
#purchaseStep2 .pur-wallet-addr {
  font-size: 11px !important;
  word-break: break-all !important;
  line-height: 1.3 !important;
}
#purchaseStep2 .pur-wallet-net {
  font-size: 10px !important;
  margin-top: 4px !important;
}

/* Expires + ID — stacked & centered (overridden further below if needed) */
#purchaseStep2 .pur-meta-row {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  text-align: center !important;
}
#purchaseStep2 .pur-countdown-item {
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
#purchaseStep2 .pur-invoice-id-inline,
#purchaseStep2 .pur-invoice-id-row {
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  padding: 10px 14px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  gap: 8px !important;
}
#purchaseStep2 .pur-check-status {
  margin: 0 !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Spinner — keyframes were only in unused mdm-theme.css; restore animation */
@keyframes pur-spin {
  to { transform: rotate(360deg); }
}
.pur-spinner,
#purchaseStep2 .pur-spinner {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  border-top-color: var(--accent, #0a84ff) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  animation: pur-spin 0.7s linear infinite !important;
  vertical-align: middle !important;
}
.pur-spinner.is-paused,
#purchaseStep2 .pur-spinner.is-paused {
  animation: none !important;
  opacity: 0.35 !important;
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}
html[data-theme="light"] .pur-spinner,
html[data-theme="light"] #purchaseStep2 .pur-spinner {
  border-color: rgba(60, 60, 67, 0.18) !important;
  border-top-color: var(--accent, #0a84ff) !important;
}
html[data-theme="light"] #purchaseStep2 .pur-check-status {
  color: #3a3a3c !important;
}

/* Sticky action footer — always on screen */
#purchaseStep2 .pur-step2-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: inherit !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}
#purchaseStep2 .pur-step2-actions .pur-btn-primary {
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  margin: 0 !important;
}
#purchaseStep2 .pur-step2-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
#purchaseStep2 .pur-step2-actions-row .pur-btn-ghost,
#purchaseStep2 .pur-change-plan-btn {
  width: 100% !important;
  margin: 0 !important;
  min-height: 38px !important;
  padding: 8px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}
#purchaseStep2 .pur-change-plan-btn {
  border: 1px solid color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
  color: var(--accent, #64d2ff) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent) !important;
}

/* Also densify step 1 slightly so plans + account fit */
#purchaseStep1.pur-step-active {
  gap: 10px !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
}
#purchaseStep1 .pur-brand {
  margin-bottom: 0 !important;
  gap: 8px !important;
  align-items: center !important;
}
.pur-brand-ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 3px !important;
  box-sizing: border-box !important;
}
#purchaseStep1 .pur-plans {
  margin-bottom: 0 !important;
}
#purchaseStep1 .pur-account-box {
  margin: 0 !important;
  padding: 10px 12px !important;
}
#purchaseStep1 .pur-email-wrap {
  margin-bottom: 0 !important;
  padding: 8px 12px !important;
}
#purchaseStep1 .pur-secure-note {
  margin-top: 4px !important;
}

@media (min-width: 520px) and (max-height: 900px) {
  #purchaseStep2 .pur-pay-grid {
    grid-template-columns: 1.1fr 1fr !important;
    align-items: stretch !important;
  }
  #purchaseStep2 .pur-wallet-section {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #purchaseStep2 .pur-wallet-qr-wrap,
  #purchaseStep2 .pur-wallet-qr {
    width: 64px !important;
    height: 64px !important;
    align-self: center !important;
  }
}

/* Very short viewports: keep actions, shrink QR more */
@media (max-height: 700px) {
  .purchase-box {
    padding: 10px 12px 8px !important;
  }
  #purchaseStep2 .pur-wallet-qr-wrap,
  #purchaseStep2 .pur-wallet-qr {
    width: 56px !important;
    height: 56px !important;
  }
  #purchaseStep2 .pur-amount-val {
    font-size: 22px !important;
  }
  #purchaseStep2 .pur-download-compact {
    display: none !important; /* still on step 1 */
  }
  #purchaseStep2 .pur-step2-sub {
    display: none !important;
  }
}

html[data-theme="light"] #purchaseStep2 .pur-wallet-section {
  background: rgba(120, 120, 128, 0.1) !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] #purchaseStep2 .pur-step2-actions {
  border-top-color: rgba(60, 60, 67, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME FIX — device stage, phone dock, tools, fleet cards (fonts/colors)
   Beats ios-panel !important dark hardcodes via html[data-theme=light] + ids
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page / stage chrome */
html[data-theme="light"] #dtab-screen,
html[data-theme="light"] .dev-body,
html[data-theme="light"] .phone-column,
html[data-theme="light"] .tab-host,
html[data-theme="light"] #tabAll,
html[data-theme="light"] .all-panels-row,
html[data-theme="light"] .dev-stage,
html[data-theme="light"] .device-workspace,
body.theme-light #dtab-screen,
body.theme-light .dev-body {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}

/* Dual panel shells (SCREEN | SKELETON headers) */
html[data-theme="light"] .all-panel,
html[data-theme="light"] .all-panel-header,
html[data-theme="light"] .all-panel-bar,
html[data-theme="light"] .stream-toolbar,
html[data-theme="light"] .scr-toolbar,
html[data-theme="light"] .phone-column .stream-chrome,
html[data-theme="light"] .stream-chrome-group {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
  box-shadow: none !important;
}
html[data-theme="light"] .all-panel-header,
html[data-theme="light"] .all-panel-header *,
html[data-theme="light"] .stream-toolbar,
html[data-theme="light"] .scr-toolbar {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* Stream toolbar buttons — readable on light */
html[data-theme="light"] .stream-toolbar .scr-btn,
html[data-theme="light"] .scr-toolbar .scr-btn,
html[data-theme="light"] .stream-toolbar button,
html[data-theme="light"] .phone-column .scr-btn,
html[data-theme="light"] #tabVideo .scr-btn {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.18) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .scr-btn.go {
  background: rgba(48, 209, 88, 0.18) !important;
  color: #1b7a34 !important;
  -webkit-text-fill-color: #1b7a34 !important;
  border-color: rgba(48, 209, 88, 0.4) !important;
}
html[data-theme="light"] .scr-btn.stop {
  background: rgba(255, 59, 48, 0.12) !important;
  color: #c41e16 !important;
  -webkit-text-fill-color: #c41e16 !important;
  border-color: rgba(255, 59, 48, 0.35) !important;
}
html[data-theme="light"] .stream-badge,
html[data-theme="light"] .stream-badge.off,
html[data-theme="light"] .stream-badge.live {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.2) !important;
}
html[data-theme="light"] .stream-badge.live {
  color: #1b7a34 !important;
  background: rgba(48, 209, 88, 0.15) !important;
  border-color: rgba(48, 209, 88, 0.4) !important;
}

/* ── Phone dock (inject + BACK/HOME/RECENTS) — light solid surface ───────── */
html[data-theme="light"] .phone-dock,
html[data-theme="light"] #phoneDock,
html[data-theme="light"] .phone-column .phone-dock,
html[data-theme="light"] .phone-column.mode-all .phone-dock,
html[data-theme="light"] .phone-column.mode-single .phone-dock {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
  border-top: 1px solid rgba(60, 60, 67, 0.14) !important;
  box-shadow:
    0 0 0 6px #e5e5ea,
    0 0 0 7px rgba(60, 60, 67, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.08) !important;
  color: #1c1c1e !important;
}

html[data-theme="light"] .phone-text-input,
html[data-theme="light"] #phoneDock .phone-text-input,
html[data-theme="light"] .phone-dock input[type="text"],
html[data-theme="light"] .phone-dock-input-row input {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.18) !important;
  caret-color: var(--accent, #0a84ff) !important;
  font-weight: 500 !important;
}
html[data-theme="light"] .phone-text-input::placeholder,
html[data-theme="light"] #phoneDock .phone-text-input::placeholder,
html[data-theme="light"] .phone-dock input::placeholder {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .phone-text-input:focus {
  background: #ffffff !important;
  border-color: var(--accent, #0a84ff) !important;
  color: #1c1c1e !important;
}

html[data-theme="light"] .phone-nav-key,
html[data-theme="light"] #phoneDock .phone-nav-key {
  background: #f2f2f7 !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .phone-nav-key:hover {
  background: #e5e5ea !important;
  border-color: rgba(60, 60, 67, 0.28) !important;
  color: #000 !important;
}
html[data-theme="light"] .phone-nav-key.home {
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
  color: var(--accent, #0a84ff) !important;
  -webkit-text-fill-color: var(--accent, #0a84ff) !important;
}
html[data-theme="light"] .phone-nav-key svg,
html[data-theme="light"] .phone-nav-key svg * {
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  color: inherit !important;
}
html[data-theme="light"] .phone-send-btn {
  background: var(--accent, #0a84ff) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}

/* Tools bar: Wake Sleep Block No Touch */
html[data-theme="light"] .phone-tools-bar.phone-ctrl-bar,
html[data-theme="light"] .phone-ctrl-bar,
html[data-theme="light"] .phone-tools-bar {
  background: #ffffff !important;
  border-top: 1px solid rgba(60, 60, 67, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .phone-tools-bar .scr-btn,
html[data-theme="light"] .phone-ctrl-row .scr-btn,
html[data-theme="light"] .phone-tools-bar button {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .phone-tools-bar .scr-btn.go,
html[data-theme="light"] .scr-btn.go {
  background: rgba(48, 209, 88, 0.16) !important;
  color: #1b7a34 !important;
  -webkit-text-fill-color: #1b7a34 !important;
  border-color: rgba(48, 209, 88, 0.4) !important;
}
html[data-theme="light"] .phone-tools-bar .scr-btn.block-black,
html[data-theme="light"] .scr-btn.block-black {
  background: rgba(255, 59, 48, 0.12) !important;
  color: #c41e16 !important;
  -webkit-text-fill-color: #c41e16 !important;
  border-color: rgba(255, 59, 48, 0.4) !important;
}
html[data-theme="light"] .phone-tools-bar .scr-btn.block-touch,
html[data-theme="light"] .scr-btn.block-touch {
  background: rgba(88, 86, 214, 0.12) !important;
  color: #3d3b9a !important;
  -webkit-text-fill-color: #3d3b9a !important;
  border-color: rgba(88, 86, 214, 0.35) !important;
}

/* Empty / placeholder text on black video area stays light (on black is OK) */
html[data-theme="light"] .screen-ph,
html[data-theme="light"] .screen-placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Device left tab rail */
html[data-theme="light"] .dtab-nav {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .dtab-btn {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
  background: transparent !important;
}
html[data-theme="light"] .dtab-btn.active {
  background: #ffffff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .dtab-btn svg {
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Device header / chip */
html[data-theme="light"] .dev-hdr,
html[data-theme="light"] .device-header,
html[data-theme="light"] .topbar-device-chip {
  color: #1c1c1e !important;
}
html[data-theme="light"] .dev-hdr-name,
html[data-theme="light"] .topbar-device-chip-name {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* ── Fleet cards (Image #2) — clear dark text on white body ───────────────── */
html[data-theme="light"] .dc,
html[data-theme="light"] .dev-card,
html[data-theme="light"] .fleet-view .dc,
html[data-theme="light"] .fleet-view .dev-card {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .dc-name,
html[data-theme="light"] .dev-card-name,
html[data-theme="light"] .fleet-view .dc-name {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .dc-sub,
html[data-theme="light"] .dev-card-model,
html[data-theme="light"] .fleet-view .dc-sub {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] .dc-status,
html[data-theme="light"] .dc-status.on {
  color: #1b7a34 !important;
  background: rgba(48, 209, 88, 0.14) !important;
  border-color: rgba(48, 209, 88, 0.35) !important;
}
html[data-theme="light"] .dc-metric,
html[data-theme="light"] .dc-metric-val,
html[data-theme="light"] .dc-chip,
html[data-theme="light"] .dc-ago {
  color: #3a3a3c !important;
}
html[data-theme="light"] .dc-shot-ph,
html[data-theme="light"] .dc-shot-preview .dc-shot-ph {
  color: rgba(60, 60, 67, 0.55) !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 113, 227, 0.08), transparent 70%),
    linear-gradient(165deg, #f2f2f7 0%, #e5e5ea 55%, #d1d1d6 100%) !important;
}
html[data-theme="light"] .dc-shot-preview.is-empty,
html[data-theme="light"] .dc-shot-preview:not(.has-img) {
  background: #e8e8ed !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .dc-shot-preview.has-img {
  background: #111 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .dc-shot-preview.has-img .dc-shot-ph {
  /* image present — ph hidden; keep dark if overlay */
  color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="light"] .dc-shot-preview.is-waiting .dc-shot-ph {
  color: #0071e3 !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(0, 113, 227, 0.14), transparent 65%),
    linear-gradient(165deg, #e8f1fc 0%, #d6e6f8 100%) !important;
}
html[data-theme="light"] .dc-shot-preview.is-offline .dc-shot-ph {
  color: rgba(60, 60, 67, 0.45) !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, rgba(120, 120, 128, 0.08), transparent 70%),
    linear-gradient(165deg, #ececf0 0%, #dedee3 100%) !important;
}
html[data-theme="light"] .dc .dc-shot-refresh,
html[data-theme="light"] .dc-shot-refresh.is-always {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0071e3 !important;
  border: 1px solid rgba(0, 113, 227, 0.28) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .dc .dc-shot-refresh:hover {
  background: #ffffff !important;
  border-color: rgba(0, 113, 227, 0.5) !important;
}
html[data-theme="light"] .dc .dc-shot-preview .fleet-shot-ico {
  color: rgba(60, 60, 67, 0.45) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .dc-shot-preview-demo .dc-shot-ph {
  color: rgba(60, 60, 67, 0.5) !important;
  background: linear-gradient(165deg, #f2f2f7, #e5e5ea) !important;
}
html[data-theme="light"] .dc .go-device-btn,
html[data-theme="light"] .dc-go,
html[data-theme="light"] button.dc-go-btn,
html[data-theme="light"] .fleet-view .empty-cta {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* List/table rows light */
html[data-theme="light"] .dev-list-row,
html[data-theme="light"] .dev-table td,
html[data-theme="light"] .dev-table th {
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .dev-list-name,
html[data-theme="light"] .dev-list-model {
  color: #1c1c1e !important;
}
html[data-theme="light"] .dev-list-model {
  color: #6c6c70 !important;
}

/* Empty states / fleet header */
html[data-theme="light"] .lt-title,
html[data-theme="light"] .fleet-title-row h1,
html[data-theme="light"] .empty-title {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty-state p,
html[data-theme="light"] .fleet-stat {
  color: #3a3a3c !important;
}

/* Controls sidebar text */
html[data-theme="light"] #screenCtrlSidebar,
html[data-theme="light"] .screen-ctrl-sidebar {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] #screenCtrlSidebar .ctrl-label,
html[data-theme="light"] .screen-ctrl-sidebar .ctrl-label {
  color: #6c6c70 !important;
}
html[data-theme="light"] #screenCtrlSidebar .ti,
html[data-theme="light"] .screen-ctrl-sidebar .ti,
html[data-theme="light"] #screenCtrlSidebar input,
html[data-theme="light"] .screen-ctrl-sidebar input {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}

/* Fleet card CTA + dock overrides that match apple-components IDs */
html[data-theme="light"] .dc-open-btn,
html[data-theme="light"] .dc-act.primary,
html[data-theme="light"] .dc-act.primary span {
  background: var(--accent, #0a84ff) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
}
html[data-theme="light"] #phoneDock .phone-text-input,
html[data-theme="light"] #screenTextInput {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] #phoneDock .phone-text-input::placeholder,
html[data-theme="light"] #screenTextInput::placeholder {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
  opacity: 1 !important;
}
html[data-theme="light"] #phoneDock .phone-nav-key {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] #phoneDock .phone-nav-key.home {
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, #fff) !important;
  color: var(--accent, #0a84ff) !important;
  -webkit-text-fill-color: var(--accent, #0a84ff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
}
html[data-theme="light"] #phoneDock .phone-send-btn {
  background: var(--accent, #0a84ff) !important;
  color: #fff !important;
}
/* "No video input" card on stream — keep readable */
html[data-theme="light"] .screen-viewer .empty-msg,
html[data-theme="light"] .screen-ph-card,
html[data-theme="light"] .no-video-card {
  color: #f5f5f7 !important;
}
/* Battery / metric labels */
html[data-theme="light"] .dc-metric-val {
  font-weight: 700 !important;
}

/* Purchase step2 — distinct actions + centered invoice ID */
#purchaseStep2 .pur-step2-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}
#purchaseStep2 .pur-step2-actions-row {
  display: none !important; /* replaced by stacked distinct buttons */
}
/* Primary check payment */
#purchaseStep2 #purchaseCheckNowBtn.pur-btn-primary {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  background: var(--accent, #0a84ff) !important;
  color: #fff !important;
  border: none !important;
}
/* Change package — OUTLINE secondary (clearly different from solid primary + text back) */
#purchaseStep2 #purchaseChangePlanBtn,
#purchaseStep2 button.pur-btn-change-plan,
.purchase-box #purchaseChangePlanBtn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: var(--accent, #64d2ff) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid color-mix(in srgb, var(--accent, #0a84ff) 70%, #fff) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#purchaseStep2 #purchaseChangePlanBtn:hover,
.purchase-box #purchaseChangePlanBtn:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, transparent) !important;
  filter: none !important;
  color: #fff !important;
  border-color: var(--accent, #0a84ff) !important;
}
#purchaseStep2 #purchaseChangePlanBtn .pur-change-plan-ico {
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}
/* Contact live support — soft tertiary full-width button */
#purchaseStep2 #purchaseLiveSupportBtn,
#purchaseStep2 button.pur-btn-support,
.purchase-box #purchaseLiveSupportBtn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  color: rgba(245, 245, 247, 0.88) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration: none !important;
}
#purchaseStep2 #purchaseLiveSupportBtn:hover,
.purchase-box #purchaseLiveSupportBtn:hover {
  background: rgba(48, 209, 88, 0.12) !important;
  border-color: rgba(48, 209, 88, 0.45) !important;
  color: #30d158 !important;
  filter: none !important;
}
#purchaseStep2 #purchaseLiveSupportBtn .pur-support-ico {
  font-size: 14px;
  line-height: 1;
}
/* Legacy back button — removed from UI */
#purchaseStep2 #purchaseBackBtn,
#purchaseStep2 button.pur-btn-back-text,
.purchase-box #purchaseBackBtn {
  display: none !important;
}

/* Invoice ID — one continuous string, centered as a group */
#purchaseStep2 .pur-meta-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  width: 100% !important;
}
#purchaseStep2 .pur-countdown-item {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 auto !important;
}
#purchaseStep2 .pur-invoice-id-row,
#purchaseStep2 .pur-invoice-id-inline,
#purchaseStep2 .pur-invoice-id-centered {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 14px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
/* Single line: "ID: uuid" — no stretch, no side gaps */
#purchaseStep2 .pur-invoice-id-line {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
#purchaseStep2 .pur-invoice-id-lbl {
  flex: 0 0 auto !important;
  display: inline !important;
  width: auto !important;
  text-align: center !important;
  padding-top: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.45) !important;
  white-space: nowrap !important;
}
#purchaseStep2 .pur-invoice-id,
#purchaseStep2 #invId.pur-invoice-id {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  /* One string — never split mid-uuid across columns */
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: inline !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  user-select: all !important;
  -webkit-user-select: all !important;
  font-variant-ligatures: none !important;
  letter-spacing: 0 !important;
}
#purchaseStep2 .pur-copy-id {
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  align-self: center !important;
}
/* Very narrow panels: allow horizontal scroll on the id line, stay centered */
@media (max-width: 420px) {
  #purchaseStep2 .pur-invoice-id,
  #purchaseStep2 #invId.pur-invoice-id {
    font-size: 11px !important;
  }
}

html[data-theme="light"] #purchaseStep2 #purchaseChangePlanBtn,
html[data-theme="light"] .purchase-box #purchaseChangePlanBtn {
  color: var(--accent, #0a84ff) !important;
  background: transparent !important;
  border-color: var(--accent, #0a84ff) !important;
}
html[data-theme="light"] #purchaseStep2 #purchaseChangePlanBtn:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff) !important;
  color: var(--accent, #0071e3) !important;
}
html[data-theme="light"] #purchaseStep2 #purchaseLiveSupportBtn,
html[data-theme="light"] .purchase-box #purchaseLiveSupportBtn {
  color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.10) !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] #purchaseStep2 #purchaseLiveSupportBtn:hover {
  color: #248a3d !important;
  background: rgba(48, 209, 88, 0.12) !important;
  border-color: rgba(52, 199, 89, 0.45) !important;
}
html[data-theme="light"] #purchaseStep2 .pur-invoice-id-lbl {
  color: #8e8e93 !important;
}
html[data-theme="light"] #purchaseStep2 .pur-invoice-id,
html[data-theme="light"] #purchaseStep2 #invId.pur-invoice-id {
  color: #1c1c1e !important;
}

/* Dual Screen|Skeleton panes — light theme smooth corners (no silver bezel ring) */
html[data-theme="light"] .phone-column.mode-dual #tabVideo,
html[data-theme="light"] .phone-column.mode-dual #tabSkeleton,
html[data-theme="light"] .phone-column.mode-dual #tabVideo.dual-pane,
html[data-theme="light"] .phone-column.mode-dual #tabSkeleton.dual-pane {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 28px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}
html[data-theme="light"] .phone-column.mode-dual .dual-pane-label {
  color: #6c6c70 !important;
  background: rgba(120, 120, 128, 0.08) !important;
  border-bottom-color: rgba(60, 60, 67, 0.10) !important;
}
/* Kill nested light phone bezel (was the harsh silver ring at corners) */
html[data-theme="light"] .phone-column.mode-dual #tabVideo .screen-viewer,
html[data-theme="light"] .phone-column.mode-dual .screen-viewer {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  overflow: hidden !important;
}
html[data-theme="light"] .phone-column.mode-dual #tabSkeleton .reader-wrap,
html[data-theme="light"] .phone-column.mode-dual #skeletonCanvas {
  background: #0c0c0e !important;
  border-radius: 0 !important;
}

/* ── Skeleton on light theme: black phone canvas + LIGHT node text ─────────
   Global light rules force #1c1c1e on .skel-node → unreadable on black. */
html[data-theme="light"] .skel-wrap,
html[data-theme="light"] .reader-wrap,
html[data-theme="light"] #skeletonCanvas,
html[data-theme="light"] .skel-all-canvas,
html[data-theme="light"] #tabSkeleton .reader-wrap,
html[data-theme="light"] #tabSkeleton .skel-wrap,
body.theme-light .skel-wrap,
body.theme-light .reader-wrap,
body.theme-light #skeletonCanvas {
  background: #0a0a0c !important;
}
html[data-theme="light"] .skel-node,
html[data-theme="light"] .skel-node.cl,
html[data-theme="light"] .skel-node.ed,
html[data-theme="light"] .skel-node.sc,
html[data-theme="light"] .skel-node.skel-all,
html[data-theme="light"] #tabSkeleton .skel-node,
html[data-theme="light"] #tabSkeleton .skel-node.skel-all,
body.theme-light .skel-node,
body.theme-light .skel-node.skel-all {
  color: rgba(245, 245, 247, 0.92) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.92) !important;
  border-color: rgba(100, 210, 255, 0.28) !important;
}
html[data-theme="light"] .skel-node.cl,
html[data-theme="light"] #tabSkeleton .skel-node.cl,
body.theme-light .skel-node.cl {
  color: #64d2ff !important;
  -webkit-text-fill-color: #64d2ff !important;
  background: rgba(10, 132, 255, 0.14) !important;
  border-color: rgba(100, 210, 255, 0.55) !important;
}
html[data-theme="light"] .skel-node.cl:hover,
body.theme-light .skel-node.cl:hover {
  background: rgba(10, 132, 255, 0.24) !important;
}
html[data-theme="light"] .skel-node.kb,
body.theme-light .skel-node.kb {
  color: rgba(220, 220, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(220, 220, 255, 0.95) !important;
  background: rgba(94, 92, 230, 0.22) !important;
  border-color: rgba(94, 92, 230, 0.55) !important;
}
html[data-theme="light"] .skel-node.skel-match,
html[data-theme="light"] .skel-match,
body.theme-light .skel-node.skel-match {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(255, 214, 10, 0.35) !important;
  outline-color: rgba(255, 214, 10, 0.7) !important;
}
html[data-theme="light"] .skel-kb-plate,
body.theme-light .skel-kb-plate {
  background: linear-gradient(180deg, rgba(40, 40, 56, 0.75), rgba(22, 22, 34, 0.9)) !important;
  border-color: rgba(94, 92, 230, 0.35) !important;
}
/* Keep chrome around skeleton light; canvas stays black */
html[data-theme="light"] .skel-pane-header,
html[data-theme="light"] .skel-pane-footer,
html[data-theme="light"] .skel-toolbar {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}

/* ── Toast / notifications — always centered text in the capsule ───────────
   phantom-hig sets display:flex without justify-content, so long messages
   hug the left edge. Force center for all toast types. */
#toast.toast,
.toast {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
  max-width: min(440px, calc(100vw - 32px)) !important;
  width: max-content !important;
  min-width: min(240px, calc(100vw - 32px)) !important;
  box-sizing: border-box !important;
  padding: 12px 20px !important;
  left: 50% !important;
  right: auto !important;
  bottom: 28px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10300 !important; /* above purchase (10080) + live chat (10220) */
}
#toast.toast.hidden,
.toast.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(8px) !important;
}
/* Payment page: pin toast to the TOP so “Copied!” isn’t under the modal */
#toast.toast.toast-top,
.toast.toast-top,
body.purchase-open #toast.toast,
body.purchase-open .toast,
body.payment-only-mode #toast.toast,
body.payment-only-mode .toast,
body:has(#purchasePanel:not(.hidden)) #toast.toast,
body:has(#purchasePanel:not(.hidden)) .toast {
  top: max(20px, env(safe-area-inset-top, 0px) + 16px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10350 !important;
}
#toast.toast.toast-top.hidden,
.toast.toast-top.hidden,
body.purchase-open #toast.toast.hidden,
body.purchase-open .toast.hidden,
body.payment-only-mode #toast.toast.hidden,
body.payment-only-mode .toast.hidden {
  transform: translateX(-50%) translateY(-8px) !important;
}
/* Keep content block centered even when message wraps to multiple lines */
#toast.toast::before,
#toast.toast::after {
  content: none !important;
}

/* Light theme toasts + topbar notifications: white surface, black text */
html[data-theme="light"] #toast.toast,
html[data-theme="light"] .toast,
html[data-theme="light"] body.theme-light #toast.toast,
body.theme-light #toast.toast,
body.theme-light .toast {
  background: #ffffff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.18) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.08) !important;
  text-align: center !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
html[data-theme="light"] #toast.toast.success,
html[data-theme="light"] .toast.success,
body.theme-light .toast.success {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border-color: rgba(36, 138, 61, 0.45) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(36, 138, 61, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] #toast.toast.error,
html[data-theme="light"] .toast.error,
body.theme-light .toast.error {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border-color: rgba(215, 0, 21, 0.40) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(215, 0, 21, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] #toast.toast.warn,
html[data-theme="light"] .toast.warn,
body.theme-light .toast.warn {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border-color: rgba(178, 112, 0, 0.45) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 149, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] #toast.toast.info,
html[data-theme="light"] .toast.info,
body.theme-light .toast.info {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border-color: rgba(0, 113, 227, 0.40) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0, 113, 227, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
/* Signal / topbar notif pill — white + black on light */
html[data-theme="light"] #notifCenter.notif-center,
html[data-theme="light"] .notif-center,
body.theme-light #notifCenter.notif-center,
body.theme-light .notif-center {
  background: #ffffff !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}
html[data-theme="light"] #notifCenter .notif-text,
html[data-theme="light"] .notif-center .notif-text,
body.theme-light #notifCenter .notif-text,
body.theme-light .notif-center .notif-text {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] #notifCenter .notif-dismiss,
html[data-theme="light"] .notif-center .notif-dismiss,
body.theme-light #notifCenter .notif-dismiss {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
html[data-theme="light"] #notifCenter .notif-dismiss:hover,
html[data-theme="light"] .notif-center .notif-dismiss:hover {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] #notifCenter .notif-icon,
html[data-theme="light"] .notif-center .notif-icon {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  opacity: 0.92 !important;
}
/* Typed notif pills stay white with semantic border, black text */
html[data-theme="light"] #notifCenter.notif-center.type-info,
html[data-theme="light"] .notif-center.type-info,
body.theme-light .notif-center.type-info {
  background: #ffffff !important;
  border-color: rgba(0, 113, 227, 0.35) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #notifCenter.notif-center.type-success,
html[data-theme="light"] .notif-center.type-success,
body.theme-light .notif-center.type-success {
  background: #ffffff !important;
  border-color: rgba(36, 138, 61, 0.40) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #notifCenter.notif-center.type-warn,
html[data-theme="light"] .notif-center.type-warn,
body.theme-light .notif-center.type-warn {
  background: #ffffff !important;
  border-color: rgba(178, 112, 0, 0.40) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #notifCenter.notif-center.type-error,
html[data-theme="light"] .notif-center.type-error,
body.theme-light .notif-center.type-error {
  background: #ffffff !important;
  border-color: rgba(215, 0, 21, 0.40) !important;
  color: #1c1c1e !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — global readability (labels, muted text, bars, purchase)
   Fixes white/low-contrast text on white surfaces across the app.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"],
body.theme-light {
  color: #1c1c1e;
}

/* Base text hierarchy on light */
html[data-theme="light"] body,
html[data-theme="light"] #app,
html[data-theme="light"] .main,
html[data-theme="light"] .content,
html[data-theme="light"] .view,
html[data-theme="light"] .panel,
html[data-theme="light"] .s-desc,
html[data-theme="light"] .text2,
html[data-theme="light"] .muted,
html[data-theme="light"] .sub,
html[data-theme="light"] .hint,
html[data-theme="light"] .aged,
html[data-theme="light"] .empty-msg,
html[data-theme="light"] .empty-sub,
html[data-theme="light"] .section-lbl,
html[data-theme="light"] .ctrl-label,
html[data-theme="light"] .s-row-info .s-desc {
  color: #3a3a3c !important;
  -webkit-text-fill-color: unset !important;
}

html[data-theme="light"] .text3,
html[data-theme="light"] .dim,
html[data-theme="light"] .placeholder-like {
  color: #6c6c70 !important;
}

/* Topbar / device bar — back, collapse, titles */
html[data-theme="light"] .topbar,
html[data-theme="light"] .dev-topbar,
html[data-theme="light"] .device-header,
html[data-theme="light"] .detail-topbar,
html[data-theme="light"] #deviceTopbar,
html[data-theme="light"] .operate-topbar {
  color: #1c1c1e !important;
}
html[data-theme="light"] .topbar-back,
html[data-theme="light"] .tb-back,
html[data-theme="light"] #btnBackDevices,
html[data-theme="light"] #btnBackToList,
html[data-theme="light"] button.tb-back,
html[data-theme="light"] .dev-back-btn,
html[data-theme="light"] .btn-back-devices {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.14) !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="light"] .topbar-back:hover,
html[data-theme="light"] .tb-back:hover,
html[data-theme="light"] #btnBackDevices:hover {
  color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.18) !important;
}
html[data-theme="light"] .dev-name,
html[data-theme="light"] .device-title,
html[data-theme="light"] .detail-title,
html[data-theme="light"] #deviceTitle,
html[data-theme="light"] .topbar-device-name {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* Stream toolbar pills (Controls / Live Keylog / Pop-out / Tools / Quality) */
html[data-theme="light"] .stream-toolbar,
html[data-theme="light"] .screen-toolbar,
html[data-theme="light"] .scr-toolbar,
html[data-theme="light"] .phone-tools-bar,
html[data-theme="light"] .video-tool-bar {
  color: #1c1c1e !important;
}
html[data-theme="light"] .stream-toolbar button,
html[data-theme="light"] .scr-toolbar button,
html[data-theme="light"] .phone-tools-bar button,
html[data-theme="light"] .mode-pill,
html[data-theme="light"] .tool-pill,
html[data-theme="light"] .st-btn {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .stream-toolbar button.active,
html[data-theme="light"] .mode-pill.active,
html[data-theme="light"] .st-btn.active {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* Collapse / sidebar labels */
html[data-theme="light"] .dtab-collapse,
html[data-theme="light"] #dtabCollapseBtn,
html[data-theme="light"] .sidebar-collapse,
html[data-theme="light"] .collapse-btn {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
  opacity: 1 !important;
}

/* Purchase panel — force dark readable text on light surfaces */
html[data-theme="light"] .purchase-panel,
html[data-theme="light"] .purchase-box,
html[data-theme="light"] #purchasePanel,
html[data-theme="light"] #purchaseStep1,
html[data-theme="light"] #purchaseStep2,
html[data-theme="light"] #purchaseStep3 {
  color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-brand-name,
html[data-theme="light"] .purchase-box .pur-step2-title,
html[data-theme="light"] .purchase-box .pur-success-title,
html[data-theme="light"] .purchase-box h1,
html[data-theme="light"] .purchase-box h2,
html[data-theme="light"] .purchase-box h3 {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-brand-sub,
html[data-theme="light"] .purchase-box .pur-step2-sub,
html[data-theme="light"] .purchase-box .pur-success-sub,
html[data-theme="light"] .purchase-box .pur-plan-label,
html[data-theme="light"] .purchase-box .pur-plan-period,
html[data-theme="light"] .purchase-box .pur-plan-feats li,
html[data-theme="light"] .purchase-box .pur-secure-note,
html[data-theme="light"] .purchase-box .pur-check-status,
html[data-theme="light"] .purchase-box .pur-wallet-lbl,
html[data-theme="light"] .purchase-box .pur-wallet-net,
html[data-theme="light"] .purchase-box .pur-amount-lbl,
html[data-theme="light"] .purchase-box .pur-meta-row,
html[data-theme="light"] .purchase-box .pur-countdown-item {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
html[data-theme="light"] .purchase-box .pur-plan-price,
html[data-theme="light"] .purchase-box #invAmount,
html[data-theme="light"] .purchase-box .pur-plan-price span {
  color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-wallet-addr,
html[data-theme="light"] .purchase-box #invWallet,
html[data-theme="light"] .purchase-box #invPlanLabel {
  color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-email-input,
html[data-theme="light"] .purchase-box input {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.10) !important;
}
html[data-theme="light"] .purchase-box .pur-email-input::placeholder {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
}
/* Password capture when missing from session */
.pur-pass-capture {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 159, 10, 0.1) !important;
  border: 1px solid rgba(255, 159, 10, 0.35) !important;
}
.pur-pass-capture[hidden] { display: none !important; }
.pur-pass-capture-lbl {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(245, 245, 247, 0.75) !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}
.pur-pass-capture-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.pur-pass-capture-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  color: #f5f5f7 !important;
  font-size: 13px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.pur-pass-capture-input::placeholder { color: rgba(245, 245, 247, 0.35) !important; }
/* Force password always readable on payment (never masked / never faded) */
#purchaseAccountPass,
#invAccountPass,
.pur-account-pass,
code.pur-account-pass {
  -webkit-text-security: none !important;
  text-security: none !important;
  color: #30d158 !important;
  -webkit-text-fill-color: #30d158 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  user-select: all !important;
  -webkit-user-select: all !important;
}
#purchaseAccountPass.is-empty,
#invAccountPass.is-empty {
  color: rgba(245, 245, 247, 0.45) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.45) !important;
  font-weight: 600 !important;
}

/* Account creds on payment — full contrast (fixes “grey bars”) */
html[data-theme="light"] .purchase-box .pur-account-box {
  background: rgba(48, 209, 88, 0.10) !important;
  border-color: rgba(52, 199, 89, 0.35) !important;
}
html[data-theme="light"] .pur-pass-capture {
  background: rgba(255, 149, 0, 0.1) !important;
  border-color: rgba(255, 149, 0, 0.35) !important;
}
html[data-theme="light"] .pur-pass-capture-lbl { color: #3a3a3c !important; }
html[data-theme="light"] .pur-pass-capture-input {
  background: #fff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] #purchaseAccountPass,
html[data-theme="light"] #invAccountPass,
html[data-theme="light"] .pur-account-pass {
  color: #1a7f37 !important;
  -webkit-text-fill-color: #1a7f37 !important;
}
html[data-theme="light"] .purchase-box .pur-account-label {
  color: #248a3d !important;
  -webkit-text-fill-color: #248a3d !important;
}
html[data-theme="light"] .purchase-box .pur-account-k {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] .purchase-box .pur-account-v,
html[data-theme="light"] .purchase-box #invAccountUser,
html[data-theme="light"] .purchase-box #invAccountPass,
html[data-theme="light"] .purchase-box #purchaseAccountUser,
html[data-theme="light"] .purchase-box #purchaseAccountPass,
html[data-theme="light"] .purchase-box .pur-account-v code {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .purchase-box .pur-account-v.is-empty {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
}
html[data-theme="light"] .purchase-box .pur-account-pass {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-account-copy {
  color: #248a3d !important;
  background: rgba(48, 209, 88, 0.14) !important;
  border-color: rgba(52, 199, 89, 0.4) !important;
}
html[data-theme="light"] .purchase-box .pur-download-creds {
  color: var(--accent, #0a84ff) !important;
  -webkit-text-fill-color: var(--accent, #0a84ff) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}
/* Secondary copy buttons on light */
html[data-theme="light"] .purchase-box .pur-copy-btn {
  color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
/* Amount / plan on light */
html[data-theme="light"] .purchase-box .pur-amount-box,
html[data-theme="light"] .purchase-box .pur-wallet-section {
  color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-amount-val,
html[data-theme="light"] .purchase-box #invAmount {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .purchase-box .pur-amount-unit,
html[data-theme="light"] .purchase-box .pur-amount-plan {
  color: #3a3a3c !important;
}

/* Generic buttons / chips that inherit white text */
html[data-theme="light"] .sm-btn:not(.accent):not(.go):not(.stop):not(.primary),
html[data-theme="light"] .ghost-btn,
html[data-theme="light"] .scr-btn:not(.go):not(.stop):not(.accent) {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* Settings rows */
html[data-theme="light"] .s-label {
  color: #1c1c1e !important;
}
html[data-theme="light"] .s-desc {
  color: #6c6c70 !important;
}

/* Icons that force white fill */
html[data-theme="light"] .topbar svg:not(.keep-color),
html[data-theme="light"] .tb-back svg,
html[data-theme="light"] .ghost-btn svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Login page light readability */
html[data-theme="light"] .login-box,
html[data-theme="light"] .login-box label,
html[data-theme="light"] .login-box .login-title,
html[data-theme="light"] .login-box .login-sub {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .login-box input {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* Dual pane labels already handled; ensure skeleton empty text visible on dark panes only */
html[data-theme="light"] .reader-empty {
  color: rgba(245, 245, 247, 0.55) !important; /* sits on black canvas */
}

/* Ensure disabled/ghost topbar Devices is still readable */
html[data-theme="light"] .topbar .disabled,
html[data-theme="light"] .topbar [disabled],
html[data-theme="light"] .topbar button:disabled {
  opacity: 0.55 !important;
  color: #3a3a3c !important;
}

/* Logo mark is mint/white for dark UI — darken for light theme readability */
.btmob-logo-mark {
  object-fit: contain;
}
/* Dark theme: keep soft mint glow */
html:not([data-theme="light"]) .btmob-logo-mark,
html:not([data-theme="light"]) .topbar-logo,
html:not([data-theme="light"]) .login-logo,
html:not([data-theme="light"]) .pur-brand-logo {
  filter: drop-shadow(0 0 8px rgba(57, 255, 140, 0.35));
}
html[data-theme="light"] .topbar-logo,
html[data-theme="light"] .topbar-ghost,
html[data-theme="light"] .login-logo,
html[data-theme="light"] .login-ghost,
html[data-theme="light"] .apk-progress-banner-logo,
html[data-theme="light"] .apk-wait-icon img,
html[data-theme="light"] .apk-wait-logo,
html[data-theme="light"] .pur-brand img,
html[data-theme="light"] .pur-brand-logo,
html[data-theme="light"] .btmob-logo-mark,
html[data-theme="light"] img.topbar-logo,
html[data-theme="light"] img[src*="btmob-logo"],
html[data-theme="light"] img[src*="btmob-bat"] {
  /* Light mint → solid dark charcoal (readable on white) */
  filter: brightness(0) saturate(100%) invert(10%) sepia(6%) saturate(400%)
    hue-rotate(170deg) brightness(0.9) contrast(1.1)
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
  opacity: 1 !important;
  -webkit-filter: brightness(0) saturate(100%) invert(10%) sepia(6%) saturate(400%)
    hue-rotate(170deg) brightness(0.9) contrast(1.1)
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
}

/* ── Payment-only mode (expired account) — purchase wizard + always-exit ─ */
body.payment-only-mode #loginOverlay {
  display: none !important;
  pointer-events: none !important;
}
body.payment-only-mode #app {
  pointer-events: none !important;
  filter: blur(2px) saturate(0.7) !important;
  opacity: 0.45 !important;
}
body.payment-only-mode #paywallOverlay,
body.payment-only-mode #paywallOverlay.open {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.payment-only-mode #purchasePanel:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10080 !important;
}
/* Allow Close / Back to login to actually hide the panel (was stuck open) */
body.payment-only-mode #purchasePanel.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Fixed escape hatch above purchase modal */
#paymentOnlyBackLogin,
button.payment-only-back-login {
  position: fixed !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10120 !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(28, 28, 30, 0.96) !important;
  color: #fff !important;
  font: 650 13px/1.2 system-ui, -apple-system, sans-serif !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
  white-space: nowrap !important;
}
#paymentOnlyBackLogin:hover,
button.payment-only-back-login:hover {
  background: #3a3a3c !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
html[data-theme="light"] #paymentOnlyBackLogin,
html[data-theme="light"] button.payment-only-back-login {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.2) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}
body.payment-only-mode #liveChatWidget,
body.payment-only-mode .live-chat-widget {
  pointer-events: none !important;
  z-index: 10200 !important;
}
body.payment-only-mode #liveChatWidget .lc-fab,
body.payment-only-mode #liveChatWidget .lc-panel,
body.payment-only-mode .lc-fab,
body.payment-only-mode .lc-panel {
  pointer-events: auto !important;
  z-index: 10220 !important;
}
/* Hide logout option if paywall card flashes briefly */
#paywallOverlay .paywall-logout {
  display: none !important;
}
body.payment-only-mode #paywallOverlay .paywall-actions {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — stream quality bar, screen chrome, keylog pane
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .stream-prefs-row,
html[data-theme="light"] #streamPrefsRow {
  background: #f2f2f7 !important;
  border-bottom: 1px solid rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .stream-prefs-scroll {
  scrollbar-color: rgba(60, 60, 67, 0.28) transparent !important;
}
html[data-theme="light"] .stream-prefs-scroll::-webkit-scrollbar-thumb {
  background: rgba(60, 60, 67, 0.28) !important;
}
html[data-theme="light"] .sprefs-group {
  border-right-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .sprefs-label {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] .stream-prefs-row .sel,
html[data-theme="light"] #streamPrefsRow select.sel,
html[data-theme="light"] #streamPreset,
html[data-theme="light"] #screenQuality,
html[data-theme="light"] #screenFpsLimit,
html[data-theme="light"] #screenViewScale {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] .stream-prefs-row .sel:focus,
html[data-theme="light"] #streamPrefsRow select.sel:focus {
  border-color: var(--accent, #0a84ff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0a84ff) 25%, transparent) !important;
}
html[data-theme="light"] .stream-prefs-actions {
  background: #e8e8ed !important;
  border-left-color: rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .stream-detail-toggle {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
html[data-theme="light"] .stream-detail-toggle:hover {
  color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.12) !important;
}
html[data-theme="light"] body.stream-detailed .stream-detail-toggle:has(#chkStreamDetailed) {
  color: #1c1c1e !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, #fff) !important;
}
html[data-theme="light"] .sdet-k {
  color: #6c6c70 !important;
}
html[data-theme="light"] .sdet-v {
  color: #1c1c1e !important;
}
html[data-theme="light"] .stream-prefs-row .scr-btn,
html[data-theme="light"] .stream-prefs-actions .scr-btn,
html[data-theme="light"] #btnStreamPrefsSave {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] #btnStreamPrefsSave.scr-btn.go,
html[data-theme="light"] .stream-prefs-actions .scr-btn.go {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--accent, #0a84ff) !important;
  border-color: var(--accent, #0a84ff) !important;
}

/* Screen action toolbar (Controls / Live Keylog / Quality ▾) */
html[data-theme="light"] .screen-actions,
html[data-theme="light"] .scr-toolbar,
html[data-theme="light"] .screen-bar,
html[data-theme="light"] #screenActionBar,
html[data-theme="light"] .dtab-screen-toolbar {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .scr-btn:not(.go):not(.stop):not(.accent),
html[data-theme="light"] #btnToggleQualityPanel,
html[data-theme="light"] #btnSplitKeylog,
html[data-theme="light"] #btnKeylogPopout {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .scr-btn.go,
html[data-theme="light"] #btnSplitKeylog.scr-btn.go,
html[data-theme="light"] .btn-live-keylog {
  color: #1a7f37 !important;
  -webkit-text-fill-color: #1a7f37 !important;
  background: rgba(48, 209, 88, 0.16) !important;
  border-color: rgba(52, 199, 89, 0.4) !important;
}
html[data-theme="light"] .scr-btn.go.active,
html[data-theme="light"] .btn-live-keylog.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #34c759 !important;
  border-color: #34c759 !important;
}

/* Video HUD above stream */
html[data-theme="light"] .video-hud {
  background: #f2f2f7 !important;
  border-bottom-color: rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .vhud-btn:not(.go):not(.stop) {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .vhud-pill {
  color: #3a3a3c !important;
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .vhud-pill.active[data-state="live"] {
  color: #1a7f37 !important;
  background: rgba(48, 209, 88, 0.18) !important;
}
html[data-theme="light"] .vhud-pill.active[data-state="stopped"],
html[data-theme="light"] .vhud-pill.active[data-state="offline"] {
  color: #1c1c1e !important;
}

/* Live keylog side pane */
html[data-theme="light"] #screenKeylogPane,
html[data-theme="light"] .screen-keylog-pane,
html[data-theme="light"] .skl-pane,
html[data-theme="light"] .live-keylog-pane {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .skl-toolbar,
html[data-theme="light"] .skl-header,
html[data-theme="light"] .keylog-toolbar {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .skl-search,
html[data-theme="light"] .keylog-search,
html[data-theme="light"] #sklSearch {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] .lk-row,
html[data-theme="light"] .skl-row,
html[data-theme="light"] .keylog-row {
  background: #f9f9fb !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .lk-msg,
html[data-theme="light"] .skl-msg,
html[data-theme="light"] .keylog-msg {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .lk-time,
html[data-theme="light"] .skl-time,
html[data-theme="light"] .lk-meta {
  color: #6c6c70 !important;
}
html[data-theme="light"] .lk-app,
html[data-theme="light"] .skl-app {
  color: var(--accent, #0a84ff) !important;
}

/* Device detail chrome / selects globally on light */
html[data-theme="light"] .sel,
html[data-theme="light"] select.sel,
html[data-theme="light"] select {
  color: #1c1c1e !important;
  background-color: #ffffff !important;
}
html[data-theme="light"] option {
  color: #1c1c1e !important;
  background: #ffffff !important;
}

/* Skeleton toolbar on light */
html[data-theme="light"] .skel-toolbar {
  background: rgba(120, 120, 128, 0.1) !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .skel-tool-label,
html[data-theme="light"] .skel-font-label,
html[data-theme="light"] .skel-search-count {
  color: #3a3a3c !important;
}
html[data-theme="light"] .skel-search {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Files / Mic / Notifications / device tabs (contrast)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic tab chrome */
html[data-theme="light"] .tab-inner-toolbar,
html[data-theme="light"] .sms-toolbar,
html[data-theme="light"] .contacts-toolbar {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .path-chip,
html[data-theme="light"] #filesCurrentPath {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .tab-inner-toolbar .ti,
html[data-theme="light"] #filesCustomPath,
html[data-theme="light"] .ti.sm {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] .tab-inner-toolbar .sm-btn,
html[data-theme="light"] #btnFilesUp,
html[data-theme="light"] #btnFilesGo,
html[data-theme="light"] #btnFilesRefresh {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .tab-inner-toolbar .sm-btn.accent,
html[data-theme="light"] .sm-btn.accent {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--accent, #0a84ff) !important;
  border-color: var(--accent, #0a84ff) !important;
}
html[data-theme="light"] .tab-inner-toolbar .sm-btn.ghost {
  color: #3a3a3c !important;
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .empty-msg,
html[data-theme="light"] .aged,
html[data-theme="light"] .status-line,
html[data-theme="light"] .section-lbl {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}

/* File shortcuts (Home / DCIM / Download / …) */
html[data-theme="light"] #fileShortcuts,
html[data-theme="light"] #dtab-files #fileShortcuts {
  background: #ffffff !important;
  border-bottom-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .fs-sc,
html[data-theme="light"] #fileShortcuts .fs-sc {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}
html[data-theme="light"] .fs-sc:hover {
  background: #e8e8ed !important;
  color: #000 !important;
  border-color: rgba(60, 60, 67, 0.28) !important;
}
html[data-theme="light"] .fs-sc.active {
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, #fff) !important;
  color: var(--accent, #0071e3) !important;
  -webkit-text-fill-color: var(--accent, #0071e3) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .fs-sc svg {
  stroke: currentColor !important;
  color: inherit !important;
}

/* File list rows */
html[data-theme="light"] .files-list,
html[data-theme="light"] #filesList {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .file-row {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.1) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .file-row:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 8%, #fff) !important;
}
html[data-theme="light"] .file-name {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .file-sz,
html[data-theme="light"] .file-dt {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] #dlQueue {
  background: #ffffff !important;
  border-top-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}

/* Microphone tab */
html[data-theme="light"] #dtab-mic,
html[data-theme="light"] .mic-page {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .mic-live-bar {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}
html[data-theme="light"] .mic-live-label,
html[data-theme="light"] .mic-live-label span {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .mic-hero {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .mic-btn {
  background: #f2f2f7 !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .mic-btn:hover {
  background: #e5e5ea !important;
  border-color: rgba(60, 60, 67, 0.28) !important;
}
html[data-theme="light"] .mic-btn svg {
  stroke: #1c1c1e !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .mic-status,
html[data-theme="light"] #micStatus,
html[data-theme="light"] #micLiveStatus {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
html[data-theme="light"] .mic-status.active {
  color: #d70015 !important;
}
html[data-theme="light"] .mic-page .section-lbl,
html[data-theme="light"] #dtab-mic .section-lbl {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] #btnRefreshRecordings,
html[data-theme="light"] #dtab-mic .sm-btn {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] #micRecordingsList .empty-msg {
  color: #6c6c70 !important;
}
html[data-theme="light"] #micTimedSecs {
  color: #1c1c1e !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] #btnMicLiveStart.scr-btn.go {
  color: #fff !important;
  background: #34c759 !important;
  border-color: #34c759 !important;
}
html[data-theme="light"] #btnMicLiveStop.scr-btn.stop {
  color: #d70015 !important;
  background: rgba(255, 69, 58, 0.12) !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
}

/* Fleet notifications view */
html[data-theme="light"] .nf-root,
html[data-theme="light"] #viewNotifications {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .nf-toolbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .nf-title {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .nf-sub {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] .nf-stat {
  color: #6c6c70 !important;
}
html[data-theme="light"] .nf-stat b {
  color: #1c1c1e !important;
}
html[data-theme="light"] .nf-stat-dot {
  background: rgba(60, 60, 67, 0.28) !important;
}
html[data-theme="light"] .nf-list {
  background: #f2f2f7 !important;
}
html[data-theme="light"] .nf-card,
html[data-theme="light"] .nf-row {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .nf-card:hover,
html[data-theme="light"] .nf-row:hover {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
}
html[data-theme="light"] .nf-empty,
html[data-theme="light"] #nfEmpty {
  color: #3a3a3c !important;
}
html[data-theme="light"] .ss-empty-title {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .ss-empty-desc {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}
html[data-theme="light"] .ss-empty-icon,
html[data-theme="light"] .ss-empty-icon svg {
  color: #8e8e93 !important;
  stroke: #8e8e93 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .ss-btn.ghost,
html[data-theme="light"] #nfBtnRefresh,
html[data-theme="light"] #nfBtnClear {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .ss-btn.ghost.danger,
html[data-theme="light"] #nfBtnClear {
  color: #d70015 !important;
  -webkit-text-fill-color: #d70015 !important;
  border-color: rgba(255, 69, 58, 0.3) !important;
  background: rgba(255, 69, 58, 0.06) !important;
}
html[data-theme="light"] .ss-filter-chk,
html[data-theme="light"] .ss-filter-chk span {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .nf-search-wrap,
html[data-theme="light"] #nfSearch,
html[data-theme="light"] .kla-search {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] #nfSearch::placeholder,
html[data-theme="light"] .kla-search::placeholder {
  color: #8e8e93 !important;
  opacity: 1 !important;
}
html[data-theme="light"] #nfDeviceFilter.sel,
html[data-theme="light"] .fleet-sel {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}

/* Screenshots fleet view (same family as notifications) */
html[data-theme="light"] .ss-root,
html[data-theme="light"] #viewScreenshots {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .ss-toolbar {
  background: #ffffff !important;
  border-bottom-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .ss-title {
  color: #1c1c1e !important;
}
html[data-theme="light"] .ss-sub,
html[data-theme="light"] .ss-stat {
  color: #6c6c70 !important;
}
html[data-theme="light"] .ss-stat b {
  color: #1c1c1e !important;
}
html[data-theme="light"] .ss-btn:not(.primary) {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .ss-card {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}

/* SMS / Calls sidebars on light */
html[data-theme="light"] .sms-sidebar,
html[data-theme="light"] .sms-page {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .sms-sidebar {
  background: #ffffff !important;
  border-right-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .sms-item,
html[data-theme="light"] .sms-list .sms-item {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .sms-from,
html[data-theme="light"] .kl-date-title {
  color: #1c1c1e !important;
}
html[data-theme="light"] .sms-body,
html[data-theme="light"] .sms-date {
  color: #3a3a3c !important;
}
html[data-theme="light"] .kl-sidebar-hdr {
  color: #6c6c70 !important;
}
html[data-theme="light"] .kl-date-item {
  color: #1c1c1e !important;
}
html[data-theme="light"] .kl-date-item.active {
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, #fff) !important;
  color: #1c1c1e !important;
}

/* Device notifications tab + empty helpers */
html[data-theme="light"] #dtab-notifications,
html[data-theme="light"] #dtab-files,
html[data-theme="light"] #dtab-sms,
html[data-theme="light"] #dtab-calls,
html[data-theme="light"] #dtab-contacts {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #devNotifsEmpty,
html[data-theme="light"] .dev-notifs-empty {
  color: #3a3a3c !important;
}

/* Higher-specificity light overrides for hard-coded white text in ios-panel */
html[data-theme="light"] .mic-live-bar {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .mic-live-label {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .mic-live-dot:not(.on) {
  background: #8e8e93 !important;
}
html[data-theme="light"] .nf-title-line {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme="light"] .nf-text-line {
  color: #3a3a3c !important;
  -webkit-text-fill-color: #3a3a3c !important;
}
html[data-theme="light"] .nf-pkg {
  color: #6c6c70 !important;
  background: rgba(120, 120, 128, 0.12) !important;
}
html[data-theme="light"] .nf-time {
  color: #8e8e93 !important;
}
html[data-theme="light"] .nf-dev {
  color: var(--accent, #0071e3) !important;
}
/* Device tab panels base */
html[data-theme="light"] .dtab:not(.hidden),
html[data-theme="light"] #viewDevice .dtab {
  color: #1c1c1e !important;
}
html[data-theme="light"] .sm-label {
  color: #3a3a3c !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY APKs — redesign (typography, cards, buttons, light/dark)
   ═══════════════════════════════════════════════════════════════════════════ */
.myapkv-root {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent, #0a84ff) 18%, transparent), transparent 55%),
    var(--bg, #000) !important;
}
.myapkv-wrap {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 28px 22px 56px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  box-sizing: border-box !important;
}
.myapkv-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 4px 2px 8px !important;
}
.myapkv-header-main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 260px !important;
}
.myapkv-icon-badge {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--accent, #0a84ff), #5856d6) !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.myapkv-titles { min-width: 0 !important; }
.myapkv-title {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  color: var(--text, #f5f5f7) !important;
  -webkit-text-fill-color: unset !important;
}
.myapkv-sub {
  margin: 5px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: rgba(245, 245, 247, 0.5) !important;
}
.myapkv-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
/* Shared header / empty CTAs */
.myapkv-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
}
.myapkv-btn:active { transform: scale(0.96) !important; }
.myapkv-btn-primary {
  color: #fff !important;
  background: var(--accent, #0a84ff) !important;
  border-color: var(--accent, #0a84ff) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}
.myapkv-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
}
.myapkv-btn-secondary {
  color: var(--accent, #64d2ff) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
}
.myapkv-btn-secondary:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 20%, transparent) !important;
  color: #fff !important;
}
.myapkv-btn-ghost {
  color: rgba(245, 245, 247, 0.75) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.myapkv-btn-ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.myapkv-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Cards — compact: body row + horizontal action bar (no tall empty side rail) */
.myapk-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: rgba(28, 28, 30, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 20px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.myapk-card:hover {
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 42%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 10px 28px rgba(0, 0, 0, 0.32) !important;
}
.myapk-card.is-expanded {
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 50%, transparent) !important;
}
.myapk-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px 12px !important;
  min-width: 0 !important;
}
.myapk-icon-wrap {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}
.myapk-icon-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.myapk-icon-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(245, 245, 247, 0.4) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.06), transparent) !important;
}
.myapk-info { min-width: 0 !important; }
.myapk-info-top { min-width: 0 !important; }
.myapk-name {
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #f5f5f7 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.myapk-pkg {
  margin-top: 3px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: rgba(245, 245, 247, 0.42) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.myapk-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
.myapk-chip {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(245, 245, 247, 0.78) !important;
  white-space: nowrap !important;
}
.myapk-chip-ver {
  color: var(--accent, #64d2ff) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 30%, transparent) !important;
}
.myapk-chip-muted {
  color: rgba(245, 245, 247, 0.45) !important;
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 2px !important;
  font-weight: 500 !important;
}
.myapk-perms {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 10px !important;
}
.myapk-perm-chip {
  font-size: 10px !important;
  font-weight: 650 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #0a84ff) 28%, transparent) !important;
  color: var(--accent, #64d2ff) !important;
  white-space: nowrap !important;
}
.myapk-perm-more {
  color: rgba(245, 245, 247, 0.5) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.myapk-detail {
  display: none !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 16px 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.myapk-detail:not([hidden]) {
  display: flex !important;
}
.myapk-detail-row {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: baseline !important;
}
.myapk-detail-lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.4) !important;
}
.myapk-detail-val {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(245, 245, 247, 0.85) !important;
  word-break: break-all !important;
}
.myapk-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11.5px !important;
}

/* Horizontal action bar — full width under content (no empty void) */
.myapk-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  min-width: 0 !important;
}
.myapk-dl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  color: #fff !important;
  background: var(--accent, #0a84ff) !important;
  border: none !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
  margin-right: auto !important; /* primary left; secondaries right cluster */
}
.myapk-dl:hover {
  filter: brightness(1.07);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
}
.myapk-dl:active { transform: scale(0.96) !important; }
.myapk-pdf-btn,
.myapk-qr-btn,
.myapk-info-btn,
.myapk-del {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(245, 245, 247, 0.82) !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease !important;
  flex: 0 0 auto !important;
}
.myapk-pdf-btn:hover {
  color: #ffc266 !important;
  background: rgba(255, 159, 10, 0.14) !important;
  border-color: rgba(255, 159, 10, 0.4) !important;
}
.myapk-qr-btn:hover {
  color: #30d158 !important;
  background: rgba(48, 209, 88, 0.12) !important;
  border-color: rgba(48, 209, 88, 0.35) !important;
}
.myapk-info-btn:hover,
.myapk-info-btn.active {
  color: var(--accent, #64d2ff) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
}
.myapk-del {
  padding: 0 !important;
  width: 36px !important;
}
.myapk-del:hover {
  color: #ff6961 !important;
  background: rgba(255, 69, 58, 0.12) !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
}
.myapk-pdf-btn:active,
.myapk-qr-btn:active,
.myapk-info-btn:active,
.myapk-del:active { transform: scale(0.96) !important; }
.myapk-btn-lbl { line-height: 1 !important; }

/* Empty / loading */
.myapk-loading {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 72px 20px !important;
}
.myapk-loading-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--accent, #0a84ff) !important;
  opacity: 0.35 !important;
  animation: myapk-pulse 1.15s ease-in-out infinite !important;
}
.myapk-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 56px 24px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
}
.myapk-empty-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(245, 245, 247, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 4px !important;
}
.myapk-empty-title {
  font-size: 17px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f7 !important;
}
.myapk-empty-desc {
  max-width: 320px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(245, 245, 247, 0.48) !important;
  margin-bottom: 6px !important;
}
.myapk-empty-error .myapk-empty-icon {
  color: #ff6961 !important;
  border-color: rgba(255, 69, 58, 0.25) !important;
  background: rgba(255, 69, 58, 0.08) !important;
}
.myapk-empty-error .myapk-empty-title { color: #ff8a84 !important; }

/* QR modal polish */
.qrm-backdrop {
  z-index: 10250 !important;
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(10px) !important;
}
.qrm-box {
  background: rgba(28, 28, 30, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  width: min(340px, calc(100vw - 32px)) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
.qrm-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.qrm-title { color: #f5f5f7 !important; font-weight: 700 !important; }
.qrm-hint, .qrm-url { color: rgba(245, 245, 247, 0.5) !important; }
.qrm-copy-btn {
  border-radius: 12px !important;
  font-weight: 650 !important;
}
.qrm-footer .myapk-dl {
  flex: 1 !important;
  min-height: 42px !important;
}

/* Responsive */
@media (max-width: 640px) {
  .myapk-body { padding: 12px !important; gap: 12px !important; }
  .myapk-icon-wrap { width: 44px !important; height: 44px !important; border-radius: 11px !important; }
  .myapk-actions {
    gap: 6px !important;
    padding: 10px !important;
  }
  .myapk-dl {
    flex: 1 1 100% !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .myapk-pdf-btn span,
  .myapk-qr-btn span,
  .myapk-info-btn span { display: none !important; }
  .myapk-pdf-btn,
  .myapk-qr-btn,
  .myapk-info-btn { flex: 1 1 0 !important; min-width: 44px !important; }
  .myapkv-title { font-size: 22px !important; }
  .myapkv-header { flex-direction: column !important; align-items: stretch !important; }
  .myapkv-header-actions { width: 100% !important; }
  .myapkv-header-actions .myapkv-btn { flex: 1 !important; }
}

/* Light theme */
html[data-theme="light"] .myapkv-root {
  background:
    radial-gradient(ellipse 80% 45% at 50% -8%, color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent), transparent 55%),
    #f2f2f7 !important;
}
html[data-theme="light"] .myapkv-title {
  color: #1c1c1e !important;
}
html[data-theme="light"] .myapkv-sub {
  color: #6c6c70 !important;
}
html[data-theme="light"] .myapkv-btn-ghost {
  color: #1c1c1e !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .myapkv-btn-ghost:hover {
  background: #e8e8ed !important;
  color: #000 !important;
}
html[data-theme="light"] .myapkv-btn-secondary {
  color: var(--accent, #0071e3) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}
html[data-theme="light"] .myapk-card {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .myapk-card:hover {
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .myapk-actions {
  background: #f5f5f7 !important;
  border-top-color: rgba(60, 60, 67, 0.1) !important;
}
html[data-theme="light"] .myapk-pdf-btn,
html[data-theme="light"] .myapk-qr-btn,
html[data-theme="light"] .myapk-info-btn,
html[data-theme="light"] .myapk-del {
  color: #3a3a3c !important;
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .myapk-name { color: #1c1c1e !important; }
html[data-theme="light"] .myapk-pkg { color: #6c6c70 !important; }
html[data-theme="light"] .myapk-chip {
  color: #3a3a3c !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .myapk-chip-ver {
  color: var(--accent, #0071e3) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 28%, transparent) !important;
}
html[data-theme="light"] .myapk-chip-muted { color: #8e8e93 !important; }
html[data-theme="light"] .myapk-perm-chip {
  color: var(--accent, #0071e3) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 25%, transparent) !important;
}
html[data-theme="light"] .myapk-icon-wrap {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  outline-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .myapk-icon-placeholder { color: #8e8e93 !important; }
html[data-theme="light"] .myapk-detail {
  background: #f9f9fb !important;
  border-color: rgba(60, 60, 67, 0.1) !important;
}
html[data-theme="light"] .myapk-detail-lbl { color: #8e8e93 !important; }
html[data-theme="light"] .myapk-detail-val { color: #1c1c1e !important; }
html[data-theme="light"] .myapk-qr-btn,
html[data-theme="light"] .myapk-info-btn,
html[data-theme="light"] .myapk-del {
  color: #3a3a3c !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .myapk-qr-btn:hover {
  color: #1a7f37 !important;
  background: rgba(48, 209, 88, 0.12) !important;
  border-color: rgba(52, 199, 89, 0.35) !important;
}
html[data-theme="light"] .myapk-info-btn:hover,
html[data-theme="light"] .myapk-info-btn.active {
  color: var(--accent, #0071e3) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent) !important;
}
html[data-theme="light"] .myapk-del:hover {
  color: #d70015 !important;
  background: rgba(255, 69, 58, 0.1) !important;
  border-color: rgba(255, 69, 58, 0.3) !important;
}
html[data-theme="light"] .myapk-empty {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .myapk-empty-icon {
  color: #8e8e93 !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .myapk-empty-title { color: #1c1c1e !important; }
html[data-theme="light"] .myapk-empty-desc { color: #6c6c70 !important; }
html[data-theme="light"] .qrm-box {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .qrm-title { color: #1c1c1e !important; }
html[data-theme="light"] .qrm-hint,
html[data-theme="light"] .qrm-url { color: #6c6c70 !important; }
html[data-theme="light"] .qrm-copy-btn {
  color: #1c1c1e !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .qrm-header,
html[data-theme="light"] .qrm-footer {
  border-color: rgba(60, 60, 67, 0.1) !important;
}

/* ── APK → PDF button + modal ─────────────────────────────────────────────── */
.myapk-pdf-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(245, 245, 247, 0.72) !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease !important;
}
.myapk-pdf-btn:hover {
  color: #ff9f0a !important;
  background: rgba(255, 159, 10, 0.12) !important;
  border-color: rgba(255, 159, 10, 0.4) !important;
}
.myapk-pdf-btn:active { transform: scale(0.96) !important; }
html[data-theme="light"] .myapk-pdf-btn {
  color: #3a3a3c !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .myapk-pdf-btn:hover {
  color: #b25000 !important;
  background: rgba(255, 159, 10, 0.14) !important;
  border-color: rgba(255, 149, 0, 0.4) !important;
}
.apkpdf-box { width: min(400px, calc(100vw - 32px)) !important; }
.apkpdf-body { gap: 12px !important; }
.apkpdf-status {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(245, 245, 247, 0.7) !important;
  text-align: center !important;
}
.apkpdf-qr {
  border-radius: 12px !important;
  outline: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #fff !important;
  min-height: 120px !important;
}
.apkpdf-url {
  font-size: 11px !important;
  word-break: break-all !important;
  max-height: none !important;
  user-select: all !important;
}
.apkpdf-footer {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.apkpdf-footer .myapk-dl,
.apkpdf-footer .myapkv-btn,
.apkpdf-footer .qrm-copy-btn {
  flex: 1 1 40% !important;
  min-height: 40px !important;
  text-align: center !important;
  text-decoration: none !important;
}
.apkpdf-footer a.is-disabled,
.apkpdf-footer .is-disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}
.apkpdf-apk-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px 16px !important;
  font-size: 12px !important;
}
.apkpdf-apk-lbl { color: rgba(245, 245, 247, 0.45) !important; }
.apkpdf-apk-link {
  color: var(--accent, #64d2ff) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  word-break: break-all !important;
}
.apkpdf-apk-link:hover { text-decoration: underline !important; }
html[data-theme="light"] .apkpdf-status { color: #3a3a3c !important; }
html[data-theme="light"] .apkpdf-apk-lbl { color: #6c6c70 !important; }
html[data-theme="light"] .apkpdf-apk-link { color: var(--accent, #0071e3) !important; }
html[data-theme="light"] .apkpdf-qr {
  outline-color: rgba(60, 60, 67, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCENT COLOR — force brand tokens on ALL primary/highlight controls
   Hardcoded #0071e3 / #0a84ff in apple/ios layers are overridden here.
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
html {
  --accent: var(--accent, #0a84ff);
}

/* Primary solid CTAs */
.sm-btn.accent,
.sm-btn.primary,
button.sm-btn.accent,
.scr-btn.go,
.scr-btn.accent,
.scr-btn.primary,
button.scr-btn.go,
.pur-btn-primary,
button.pur-btn-primary,
#purchaseGetInvoiceBtn,
#purchaseCheckNowBtn,
.topbar-purchase-btn,
button.topbar-purchase-btn,
.login-register-btn,
.login-box button:not(.lang-btn):not(.login-contact-btn):not(.pur-close):not(.pur-copy-btn):not(.pur-btn-ghost):not(.pur-btn-change-plan):not(.pur-btn-support):not(.pur-account-copy),
.empty-cta,
.ios-confirm-btn.primary,
.ios-confirm-btn.confirm,
.myapk-dl,
a.myapk-dl,
.myapkv-btn-primary,
.ss-btn.primary,
.dmodal-btn.go,
.cred-use:hover,
.kl-filter.active,
.tab-btn.active,
.all-panel-toggle.active,
.perm-step-num,
.font-btn.active,
.theme-btn.active,
.vhud-btn.go,
#btnStreamPrefsSave.scr-btn.go,
#btnMicLiveStart.scr-btn.go {
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ══ Mic tab v2 — live visualizer + proven scr-btn controls ═══════════════ */
#dtab-mic.dtab.active,
#dtab-mic.dtab:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
.mic-page-v2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 18px 32px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Live bar — use solid scr-btn styles (not invisible custom pills) */
.mic-page-v2 .mic-live-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: var(--s2, rgba(28, 28, 32, 0.92)) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important;
  box-sizing: border-box !important;
}
.mic-page-v2 .mic-live-bar .scr-btn,
.mic-page-v2 .mic-live-bar button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.mic-page-v2 .mic-live-bar .scr-btn:disabled,
.mic-page-v2 .mic-live-bar button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.mic-page-v2 #btnMicLiveStart.scr-btn.go {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.mic-page-v2 #btnMicLiveStop.scr-btn.stop {
  background: rgba(255, 69, 58, 0.18) !important;
  border: 1px solid rgba(255, 69, 58, 0.4) !important;
  color: #ff6961 !important;
  -webkit-text-fill-color: #ff6961 !important;
}
.mic-page-v2 .mic-live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-right: 4px !important;
  color: var(--text, #f5f5f7) !important;
}
.mic-lib-card {
  background: var(--s2, rgba(28, 28, 32, 0.92)) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}
.mic-live-head,
.mic-record-head,
.mic-lib-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.mic-live-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
  letter-spacing: -0.01em !important;
}
.mic-live-sub {
  font-size: 12px !important;
  color: rgba(235, 235, 245, 0.5) !important;
  margin-top: 2px !important;
}
.mic-live-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mic-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 8px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(235, 235, 245, 0.55) !important;
}
.mic-badge.is-live {
  background: rgba(255, 69, 58, 0.2) !important;
  color: #ff453a !important;
  box-shadow: 0 0 0 1px rgba(255, 69, 58, 0.35) !important;
  animation: mic-live-pulse 1.4s ease-in-out infinite !important;
}
@keyframes mic-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.mic-timer {
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(235, 235, 245, 0.7) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.mic-viz-wrap {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 12px !important;
  min-height: 120px !important;
}
.mic-visualizer {
  display: block !important;
  width: 100% !important;
  height: 120px !important;
}
.mic-viz-idle {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 12.5px !important;
  color: rgba(235, 235, 245, 0.35) !important;
  pointer-events: none !important;
}
.mic-viz-idle.hidden { display: none !important; }

.mic-live-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
/* Keep mic-ctl as alias for any leftover markup — map to solid buttons */
.mic-ctl,
button.mic-ctl {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border2, rgba(255, 255, 255, 0.14)) !important;
  background: var(--s3, rgba(255, 255, 255, 0.08)) !important;
  color: var(--text, #f5f5f7) !important;
  -webkit-text-fill-color: var(--text, #f5f5f7) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
.mic-ctl:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.mic-ctl:not(:disabled):hover {
  filter: brightness(1.08) !important;
}
.mic-ctl-primary {
  background: #0a84ff !important;
  border-color: transparent !important;
  color: #fff !important;
}
.mic-ctl-primary:not(:disabled):hover {
  filter: brightness(1.08) !important;
  background: #0a84ff !important;
}
.mic-ctl-danger {
  background: rgba(255, 69, 58, 0.18) !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
  color: #ff6961 !important;
}
.mic-ctl.is-recording {
  background: rgba(255, 69, 58, 0.28) !important;
  border-color: #ff453a !important;
  color: #ff453a !important;
  animation: mic-live-pulse 1s ease-in-out infinite !important;
}
.mic-ctl-ico { font-size: 11px !important; line-height: 1 !important; }

.mic-page-v2 .mic-volume-row,
.mic-volume-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 4px !important;
  box-sizing: border-box !important;
}
.mic-page-v2 .mic-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 28px 24px !important;
  border-radius: 16px !important;
  background: var(--s2, rgba(28, 28, 32, 0.92)) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important;
  box-sizing: border-box !important;
}
.mic-page-v2 .mic-btn {
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border2, rgba(255, 255, 255, 0.14)) !important;
  background: var(--s3, rgba(255, 255, 255, 0.08)) !important;
  color: var(--text, #f5f5f7) !important;
  cursor: pointer !important;
  visibility: visible !important;
}
.mic-vol-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(235, 235, 245, 0.55) !important;
  min-width: 48px !important;
}
.mic-vol-slider {
  flex: 1 !important;
  accent-color: #0a84ff !important;
  height: 4px !important;
}
.mic-vol-val {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(235, 235, 245, 0.55) !important;
  min-width: 40px !important;
  text-align: right !important;
}

.mic-record-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}
.mic-dur-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  color: rgba(235, 235, 245, 0.55) !important;
  margin-left: auto !important;
}
.mic-dur-input {
  width: 64px !important;
  text-align: center !important;
}
.mic-record-card .mic-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  color: #f5f5f7 !important;
  flex-shrink: 0 !important;
}
.mic-record-card .mic-btn.active {
  background: rgba(255, 69, 58, 0.2) !important;
  border-color: rgba(255, 69, 58, 0.5) !important;
  color: #ff453a !important;
}

.mic-lib-head .section-lbl {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.mic-lib-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  margin-left: 8px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(10, 132, 255, 0.2) !important;
  color: #64d2ff !important;
}
.mic-lib-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}
.mic-lib-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mic-lib-local {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.mic-lib-local-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(235, 235, 245, 0.45) !important;
  margin-bottom: 8px !important;
}
.mic-rec-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-wrap: wrap !important;
}
.mic-rec-check {
  display: grid !important;
  place-items: center !important;
}
.mic-rec-meta {
  flex: 1 1 140px !important;
  min-width: 0 !important;
}
.mic-rec-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f5f5f7 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.mic-rec-sub {
  font-size: 11.5px !important;
  color: rgba(235, 235, 245, 0.45) !important;
  margin-top: 2px !important;
}
.mic-rec-audio {
  width: 100% !important;
  height: 32px !important;
  margin-top: 4px !important;
  flex-basis: 100% !important;
}

html[data-theme="light"] .mic-live-card,
html[data-theme="light"] .mic-record-card,
html[data-theme="light"] .mic-lib-card {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .mic-live-title,
html[data-theme="light"] .mic-rec-name { color: #1c1c1e !important; }
html[data-theme="light"] .mic-live-sub,
html[data-theme="light"] .mic-rec-sub,
html[data-theme="light"] .mic-vol-label,
html[data-theme="light"] .mic-vol-val { color: rgba(60, 60, 67, 0.55) !important; }
html[data-theme="light"] .mic-viz-wrap { background: #f2f2f7 !important; border-color: rgba(0, 0, 0, 0.06) !important; }
html[data-theme="light"] .mic-ctl {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .mic-ctl-primary {
  background: #007aff !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="light"] .mic-rec-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .mic-record-card .mic-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1c1c1e !important;
}

/* Soft / outline accent controls */
.sm-btn.ghost,
.tb-back,
.scr-btn.ghost,
.myapkv-btn-secondary,
.pur-btn-change-plan,
#purchaseChangePlanBtn,
.login-contact-btn,
a.login-contact-btn {
  /* ghost stays ghost, but tint border/text with accent where intended below */
}

.sm-btn.ghost {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
}
.tb-back:hover,
.scr-btn.ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Active nav / tabs / chips */
.dtab-btn.active,
.topnav-btn.active,
.topbar-nav .topnav-btn.active,
.lang-btn.active,
.login-lang-bar .lang-btn.active,
.skl-filter.active,
.pur-plan.selected {
  border-color: var(--accent) !important;
}
.dtab-btn.active {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.topnav-btn.active,
.topbar-nav .topnav-btn.active {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 0 0 1.5px color-mix(in srgb, var(--accent) 65%, transparent) !important;
}
.kl-filter.active,
.tab-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Focus rings */
.search:focus,
#searchInput:focus,
.ti:focus,
input.ti:focus,
select.sel:focus,
select:focus,
textarea:focus,
.login-box input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  outline-color: var(--accent) !important;
}

/* Links & accents text */
a,
.accent-link,
.photo-dl,
.nf-dev,
.myapk-perm-chip,
.myapk-chip-ver,
.apkpdf-apk-link {
  color: var(--accent) !important;
}
a:hover {
  color: var(--accent2, var(--accent)) !important;
}

/* Selection + progress */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
.pur-spinner,
#purchaseStep2 .pur-spinner {
  border-top-color: var(--accent) !important;
}
.myapk-loading-dot {
  background: var(--accent) !important;
}

/* Purchase primary + change package outline */
#purchaseStep2 #purchaseCheckNowBtn.pur-btn-primary,
#purchaseGetInvoiceBtn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
#purchaseStep2 #purchaseChangePlanBtn,
#purchaseStep2 .pur-btn-change-plan {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, #fff) !important;
}
#purchaseStep2 #purchaseChangePlanBtn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.pur-plan.selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
.pur-plan-feats li::before {
  color: var(--accent) !important;
}
.pur-popular-badge,
.pur-best-badge {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Live chat FAB + send */
.lc-fab {
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #5856d6)) !important;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
.lc-send,
.lc-msg-user {
  background: var(--accent) !important;
}
.lc-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, #1c1c1e), #1c1c1e) !important;
}
.lc-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
}

/* My APKs brand pieces */
.myapkv-icon-badge {
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #5856d6)) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
.myapk-dl,
a.myapk-dl {
  background: var(--accent) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}
.myapk-info-btn:hover,
.myapk-info-btn.active {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.myapk-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
  background-clip: padding-box !important;
}

/* Accent swatches — ring uses current accent */
.accent-swatch.active {
  box-shadow:
    0 0 0 2px var(--bg, #000),
    0 0 0 4px var(--accent) !important;
  outline: none !important;
}

/* Toggle / switch when available */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent) !important;
}

/* Login CTA (apple hardcode #0071e3) */
html .login-register-btn,
html .login-box > button.login-register-btn,
html button.login-register-btn {
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
}

/* iOS panel hard blues */
html .ss-btn.primary,
html .all-panel-toggle.active,
html .perm-step-num {
  background: var(--accent) !important;
}

/* Stream quality save + go buttons already covered */

/* Topbar purchase */
html .topbar-purchase-btn,
html #topbarPurchaseBtn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Ensure stop/danger stay red (not recolored by broad rules) */
.scr-btn.stop,
.sm-btn.stop,
.sm-btn.red,
.vhud-btn.stop,
#btnMicLiveStop.scr-btn.stop,
.myapk-del:hover {
  /* keep semantic red — restate so accent rules don't leak */
}
.scr-btn.stop,
.sm-btn.stop,
.vhud-btn.stop {
  background: rgba(255, 69, 58, 0.14) !important;
  border-color: rgba(255, 69, 58, 0.4) !important;
  color: #ff6961 !important;
  -webkit-text-fill-color: #ff6961 !important;
  background-image: none !important;
}

/* ── Demo preview banner (stats / keylogs / notifications / screenshots) ─── */
.demo-preview-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(245, 245, 247, 0.88);
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.16), rgba(10, 132, 255, 0.12));
  border: 1px solid rgba(192, 132, 252, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.demo-preview-banner svg { flex-shrink: 0; margin-top: 1px; color: #c084fc; }
html[data-theme="light"] .demo-preview-banner {
  color: #3a3a3c;
  background: linear-gradient(135deg, rgba(175, 82, 222, 0.08), rgba(0, 113, 227, 0.06));
  border-color: rgba(175, 82, 222, 0.25);
  box-shadow: none;
}
.kla-demo-row td { padding: 8px 10px !important; background: transparent !important; border: none !important; }
.kla-demo-data { opacity: 0.95; }
.nf-card-demo { border-style: dashed !important; }
.ss-card-demo { opacity: 0.92; }
.ss-demo-ph { background: linear-gradient(160deg, rgba(10,132,255,.12), rgba(192,132,252,.1)) !important; }

/* ── Agent install strip (compact, closable) ──────────────────────────────── */
.demo-apk-bar {
  display: block !important;
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #0071e3) 12%, #1d1d1f) 0%, #141416 100%) !important;
}
.demo-apk-bar.is-hidden {
  display: none !important;
}
.demo-apk-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.demo-apk-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #30d158 !important;
  background: rgba(48, 209, 88, 0.14) !important;
  border: 1px solid rgba(48, 209, 88, 0.35) !important;
  flex-shrink: 0 !important;
}
.demo-apk-bar[data-ready="shared"] .demo-apk-badge,
.demo-apk-bar[data-ready="0"] .demo-apk-badge,
.demo-apk-bar[data-ready="queued"] .demo-apk-badge {
  color: #64d2ff !important;
  background: rgba(10, 132, 255, 0.14) !important;
  border-color: rgba(100, 210, 255, 0.35) !important;
}
.demo-apk-bar[data-ready="1"] .demo-apk-badge {
  color: #30d158 !important;
}
.demo-apk-title,
.demo-apk-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f7 !important;
  flex-shrink: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}
.demo-apk-status {
  font-size: 11px !important;
  color: rgba(245, 245, 247, 0.5) !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}
.demo-apk-real-only {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #ffd60a !important;
  background: rgba(255, 214, 10, 0.1) !important;
  border: 1px solid rgba(255, 214, 10, 0.28) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
  margin-right: 6px !important;
}
.demo-apk-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.demo-apk-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease !important;
}
.demo-apk-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.45) !important;
}
.demo-apk-btn:active { transform: scale(0.97) !important; }
.demo-apk-btn-landing {
  position: relative !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff3b7a 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 6px 16px rgba(255,59,122,.32) !important;
  padding-right: 14px !important;
}
.demo-apk-btn-landing:hover { filter: brightness(1.08); }
.demo-apk-new {
  position: absolute !important;
  top: -7px !important;
  right: -2px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  line-height: 1 !important;
  padding: 2px 5px !important;
  border-radius: 999px !important;
  background: #ffd60a !important;
  color: #1a1200 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}
.demo-apk-btn-primary {
  color: #fff !important;
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 14px rgba(0,113,227,.28) !important;
}
.demo-apk-btn-primary:hover { filter: brightness(1.07); }
.demo-apk-btn-secondary {
  color: #fff !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
}
.demo-apk-btn-ghost {
  color: rgba(245, 245, 247, 0.88) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.demo-apk-btn-demo {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.22), rgba(94, 92, 230, 0.28)) !important;
  color: #64d2ff !important;
  border: 1px solid rgba(10, 132, 255, 0.35) !important;
  gap: 5px !important;
}
.demo-apk-btn-demo:hover {
  filter: brightness(1.1);
  border-color: rgba(100, 210, 255, 0.55) !important;
}
html[data-theme="light"] .demo-apk-btn-demo {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(88, 86, 214, 0.14)) !important;
  color: #007aff !important;
  border-color: rgba(0, 122, 255, 0.28) !important;
}
.lk-ctx {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(235, 235, 245, 0.42) !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html[data-theme="light"] .lk-ctx {
  color: rgba(60, 60, 67, 0.45) !important;
}
.demo-apk-btn-ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.demo-apk-close {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.4) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.demo-apk-close:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.demo-apk-reopen {
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 12px 0 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 14%, transparent) !important;
  color: #f5f5f7 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.demo-apk-reopen:not(.hidden) {
  display: inline-flex !important;
}
.demo-apk-reopen.hidden { display: none !important; }
/* legacy / light */
.demo-apk-desc, .demo-apk-hint, .demo-apk-card, .demo-apk-head, .demo-apk-icon, .demo-apk-copy, .demo-apk-title-row {
  display: none !important;
}
html[data-theme="light"] .demo-apk-bar {
  background: color-mix(in srgb, var(--accent, #0a84ff) 8%, #fff) !important;
  border-bottom-color: rgba(60, 60, 67, 0.1) !important;
}
html[data-theme="light"] .demo-apk-title,
html[data-theme="light"] .demo-apk-label { color: #1c1c1e !important; }
html[data-theme="light"] .demo-apk-btn-ghost {
  color: #1c1c1e !important;
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
}
html[data-theme="light"] .demo-apk-btn-secondary {
  color: var(--accent, #0071e3) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
}
html[data-theme="light"] .demo-apk-reopen {
  color: #1c1c1e !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, #fff) !important;
}
@media (max-width: 640px) {
  .demo-apk-bar { padding: 6px 8px !important; }
  .demo-apk-btn { min-height: 30px !important; padding: 0 9px !important; font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL SCREENS — device tabs: icons only (no labels, no expand, no tooltips)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Force horizontal icon rail */
  .dtab-nav,
  .dtab-nav.expanded,
  #dtabNav,
  #dtabNav.expanded {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 4px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .dtab-nav::-webkit-scrollbar,
  #dtabNav::-webkit-scrollbar { display: none !important; }

  /* Hide expand / collapse control entirely on small screens */
  .dtab-toggle,
  #dtabToggle,
  .dtab-nav .dtab-toggle,
  .dtab-nav.expanded .dtab-toggle {
    display: none !important;
  }

  /* Labels off — icons only */
  .dtab-label,
  .dtab-nav .dtab-label,
  .dtab-nav.expanded .dtab-label,
  .dtab-btn .dtab-label {
    display: none !important;
    max-width: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* No floating tooltips / title bubbles on small screens */
  .dtab-btn::after,
  .dtab-btn:hover::after,
  .dtab-nav .dtab-btn::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  /* Icon buttons — square, clear hover + selected */
  .dtab-btn,
  .dtab-nav .dtab-btn,
  .dtab-nav.expanded .dtab-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    border-left: none !important;
    border-bottom: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 40px !important;
    background: transparent !important;
    color: rgba(245, 245, 247, 0.42) !important;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease !important;
  }
  .dtab-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    opacity: 0.85 !important;
  }
  .dtab-btn:hover,
  .dtab-btn:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
  }
  .dtab-btn:hover svg,
  .dtab-btn:focus-visible svg {
    opacity: 1 !important;
  }
  .dtab-btn.active {
    background: color-mix(in srgb, var(--accent, #0a84ff) 22%, transparent) !important;
    color: var(--accent, #0a84ff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent) !important;
  }
  .dtab-btn.active svg {
    opacity: 1 !important;
    stroke: currentColor !important;
  }
  .dtab-btn:active {
    transform: scale(0.94) !important;
  }

  html[data-theme="light"] .dtab-btn {
    color: rgba(60, 60, 67, 0.45) !important;
  }
  html[data-theme="light"] .dtab-btn:hover,
  html[data-theme="light"] .dtab-btn:focus-visible {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1c1c1e !important;
  }
  html[data-theme="light"] .dtab-btn.active {
    background: color-mix(in srgb, var(--accent, #0071e3) 14%, #fff) !important;
    color: var(--accent, #0071e3) !important;
  }
}

/* Even tighter phones */
@media (max-width: 480px) {
  .dtab-btn,
  .dtab-nav .dtab-btn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
  }
  .dtab-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX 2026-08-02: Controls drawer alignment + compact phone dock + skel mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skeleton All | Click segmented control */
.skel-mode-seg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 2px !important;
  border-radius: 980px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex-shrink: 0 !important;
}
.skel-mode-btn {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.7) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  min-height: 26px !important;
  padding: 0 12px !important;
  border-radius: 980px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.skel-mode-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.skel-mode-btn.active {
  background: #0071e3 !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 113, 227, 0.4) !important;
}

/* Controls sidebar — solid, aligned, never a messy translucent pile */
#screenCtrlSidebar,
.screen-ctrl-sidebar {
  background: #141416 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#screenCtrlSidebar .ctrl-body,
.screen-ctrl-sidebar .ctrl-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  align-content: start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  isolation: isolate !important;
}
#screenCtrlSidebar .ctrl-cell,
.screen-ctrl-sidebar .ctrl-cell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-sizing: border-box !important;
  z-index: 0 !important;
}
#screenCtrlSidebar .ctrl-cell.span2,
.screen-ctrl-sidebar .ctrl-cell.span2 {
  grid-column: 1 / -1 !important;
}
#screenCtrlSidebar .ctrl-cell > *,
.screen-ctrl-sidebar .ctrl-cell > * {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
}
#screenCtrlSidebar .ctrl-cell .scr-btn,
.screen-ctrl-sidebar .ctrl-cell .scr-btn {
  position: static !important;
  float: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: 40px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  transform: none !important;
}
#screenCtrlSidebar .ctrl-cell > div[style*="display:flex"],
.screen-ctrl-sidebar .ctrl-cell > div[style*="display:flex"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}
#screenCtrlSidebar .ti,
.screen-ctrl-sidebar .ti {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* Overlay drawer when Controls is opened on mid/small screens */
@media (max-width: 1279px) {
  body.ctrl-sidebar-pinned #screenCtrlSidebar,
  body.ctrl-sidebar-pinned .screen-ctrl-sidebar {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 40 !important;
    width: min(360px, 94vw) !important;
    max-width: 94vw !important;
    min-width: 280px !important;
    background: #141416 !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.65) !important;
    opacity: 1 !important;
  }
  body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-body {
    grid-template-columns: 1fr !important; /* one column = no crush/overlap */
    gap: 8px !important;
    padding: 12px 12px 32px !important;
  }
}
/* Also single-column when sidebar is narrow */
@media (max-width: 1100px) {
  #screenCtrlSidebar .ctrl-body,
  .screen-ctrl-sidebar .ctrl-body {
    grid-template-columns: 1fr !important;
  }
}

/* Compact phone dock — more room for the live screen */
#phoneDock,
.phone-dock {
  gap: 6px !important;
  padding: 6px 8px 7px !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow:
    0 0 0 5px #1c1c1e,
    0 0 0 6px rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.4) !important;
}
.phone-dock-input-row {
  gap: 6px !important;
}
.phone-text-input,
#screenTextInput {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}
.phone-send-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.phone-send-btn svg {
  width: 14px !important;
  height: 14px !important;
}
.phone-nav-keys {
  gap: 6px !important;
}
.phone-nav-key {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  gap: 0 !important;
  padding: 0 4px !important;
  border-radius: 10px !important;
  flex-direction: row !important;
  font-size: 0 !important; /* hide labels — icons only, less vertical space */
}
.phone-nav-key span {
  display: none !important;
}
.phone-nav-key svg {
  width: 16px !important;
  height: 16px !important;
}
.phone-nav-key.home,
#btnScreenHome {
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3) !important;
}

/* Slightly tighter security strip under dock too */
.phone-primary-security,
#phonePrimarySecurity {
  padding: 6px 8px 8px !important;
}
.phone-primary-security .scr-btn,
#phonePrimarySecurity .scr-btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}


/* Skeleton pane bottom bar: label + All | Click */
#tabSkeleton.dual-pane,
#tabSkeleton {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
#tabSkeleton .reader-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}
#tabSkeleton #skeletonCanvas,
#skeletonCanvasAll {
  position: absolute !important;
  box-sizing: border-box !important;
}
/* Top of skeleton pane: title + font size − / + */
.skel-pane-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  z-index: 5 !important;
}
.skel-pane-header-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.55) !important;
}
.skel-font-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  padding: 2px 4px !important;
}
.skel-font-btn {
  appearance: none !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.12s ease !important;
}
.skel-font-btn:hover {
  background: rgba(0, 113, 227, 0.35) !important;
  color: #fff !important;
}
.skel-font-btn:active {
  transform: scale(0.94) !important;
}
.skel-font-size-label {
  min-width: 22px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: #64d2ff !important;
  user-select: none !important;
}
html[data-theme="light"] .skel-pane-header {
  background: rgba(0, 0, 0, 0.04) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .skel-pane-header-title {
  color: rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="light"] .skel-font-ctrl {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .skel-font-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .skel-font-size-label {
  color: #0071e3 !important;
}

.skel-pane-footer {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  z-index: 4 !important;
}
.skel-pane-footer-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.55) !important;
  white-space: nowrap !important;
}
.skel-pane-footer .skel-mode-seg {
  margin-left: auto !important;
}
.phone-column.mode-dual #tabSkeleton .skel-pane-footer {
  border-radius: 0 0 12px 12px !important;
}
html[data-theme="light"] .skel-pane-footer {
  background: rgba(0, 0, 0, 0.04) !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .skel-pane-footer-title {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DENSITY SHELL — 100% zoom must fit without Ctrl-minus
   Fixes: zoom-based scaling, fixed minmax cards, chrome overflow, stacking
   ═══════════════════════════════════════════════════════════════════════════ */

/* Root box model — full viewport, no document scroll fights */
html {
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  /* Base rem; Settings → Font Size also scales #app via --font-zoom */
  font-size: 14px !important;
}
html[data-fontsize="sm"] { font-size: 13px !important; }
html[data-fontsize="md"] { font-size: 14px !important; }
html[data-fontsize="lg"] { font-size: 16px !important; }
html[data-fontsize="xl"] { font-size: 18px !important; }

body {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* App shell: zoom = font size × panel UI scale (Settings). Must not force zoom:1. */
#app {
  --app-sidebar-w: 220px;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  /* Room for left sidebar (collapsed = 64px) */
  padding-left: var(--app-sidebar-w) !important;
  transition: padding-left 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Combined by JS via --app-zoom; CSS fallback uses font-zoom × panel scale */
  zoom: var(--app-zoom, calc(var(--font-zoom, 1) * var(--panel-ui-scale, 1))) !important;
}
#app.sidebar-collapsed {
  --app-sidebar-w: 64px;
}

/* ── Left expandable sidebar ───────────────────────────────────────────── */
.app-sidebar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--app-sidebar-w) !important;
  z-index: 80 !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(12, 14, 22, 0.97) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
  transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html[data-theme="light"] .app-sidebar {
  background: rgba(250, 250, 252, 0.98) !important;
  border-right-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.06) !important;
}
.app-sidebar-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-shrink: 0 !important;
}
.app-sidebar-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(245, 245, 247, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.app-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.app-sidebar-brand {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: rgba(245, 245, 247, 0.92) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
#app.sidebar-collapsed .app-sidebar-brand,
#app.sidebar-collapsed .app-side-lbl,
#app.sidebar-collapsed .app-side-credit,
#app.sidebar-collapsed .app-side-badge {
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.app-sidebar-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.app-side-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(235, 235, 245, 0.72) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap !important;
}
.app-side-btn svg {
  flex-shrink: 0 !important;
  opacity: 0.9;
}
.app-side-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}
.app-side-btn.active {
  background: rgba(10, 132, 255, 0.16) !important;
  border-color: rgba(10, 132, 255, 0.35) !important;
  color: #64d2ff !important;
}
.app-side-lbl {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity 0.15s;
}
.app-side-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(245, 245, 247, 0.85) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.app-side-btn.active .app-side-badge {
  background: rgba(100, 210, 255, 0.22) !important;
  color: #64d2ff !important;
}
.app-side-sep {
  height: 1px !important;
  margin: 8px 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}
.app-sidebar-foot {
  flex-shrink: 0 !important;
  padding: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.app-side-credit {
  font-size: 10px !important;
  color: rgba(235, 235, 245, 0.35) !important;
  padding: 4px 10px 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.app-sidebar-scrim {
  display: none !important;
}
/* Sidebar is primary nav — hide top segmented menu (all breakpoints). */
.topbar-nav,
#topbarNav,
#topbarNav.topbar-nav,
header.topbar #topbarNav,
header.topbar .topbar-nav,
body:not(.device-view-active) .topbar-nav,
body:not(.device-view-active) #topbarNav,
body:not(.device-view-active) #topbarNav.topbar-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
  order: 99 !important;
}
/* Mobile: sidebar as drawer overlay */
@media (max-width: 899px) {
  #app {
    padding-left: 0 !important;
  }
  .app-sidebar {
    transform: translateX(-105%);
    width: min(260px, 84vw) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45) !important;
  }
  body.sidebar-open-mobile .app-sidebar {
    transform: translateX(0);
  }
  body.sidebar-open-mobile .app-sidebar-scrim {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 75 !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }
  /* On mobile keep top nav if space; still allow hamburger via topbar overflow */
}
html[data-fontsize="sm"] { --font-zoom: 0.9; }
html[data-fontsize="md"] { --font-zoom: 1; }
html[data-fontsize="lg"] { --font-zoom: 1.12; }
html[data-fontsize="xl"] { --font-zoom: 1.25; }
html[data-ui-scale="85"]  { --panel-ui-scale: 0.85; }
html[data-ui-scale="100"] { --panel-ui-scale: 1; }
html[data-ui-scale="110"] { --panel-ui-scale: 1.1; }
html[data-ui-scale="125"] { --panel-ui-scale: 1.25; }
html[data-ui-scale="140"] { --panel-ui-scale: 1.4; }

/* Topbar: one row, clip/scroll — never grow and push content off-screen */
.topbar {
  flex: 0 0 auto !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 10px 0 12px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.topbar-nav .topnav-btn {
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
}
.topbar-title { font-size: 15px !important; }
.topbar-right .search,
.topbar #searchInput {
  max-width: min(200px, 22vw) !important;
  min-width: 0 !important;
  height: 32px !important;
  font-size: 12.5px !important;
}

/* Main views fill remaining height — ONLY when not .hidden
   (ID selectors must not beat .hidden { display:none !important } or list+device stack) */
#viewList:not(.hidden),
#viewList.fleet-view:not(.hidden),
#viewDevice:not(.hidden),
#viewStats:not(.hidden),
#viewSettings:not(.hidden),
#viewApkBuild:not(.hidden),
#viewMyApps:not(.hidden),
#viewKeylogs:not(.hidden),
#viewScreenshots:not(.hidden),
#viewNotifications:not(.hidden),
#viewTutorial:not(.hidden),
#viewBugs:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Build / tutorial / my-apks must scroll */
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Inner roots fill width; page scrolls on outer view */
#viewApkBuild:not(.hidden) .apkv-root,
#viewApkBuild.apkv-root:not(.hidden),
#viewMyApps.myapkv-root:not(.hidden),
#viewTutorial.tutorial-root:not(.hidden) {
  overflow: visible !important;
  min-height: min-content !important;
  height: auto !important;
  max-height: none !important;
}
#viewApkBuild.apk-gated:not(.hidden) {
  overflow-y: auto !important;
}

/* Hard hide — wins over any display:flex !important from ID rules */
#viewList.hidden,
#viewDevice.hidden,
#viewStats.hidden,
#viewSettings.hidden,
#viewApkBuild.hidden,
#viewMyApps.hidden,
#viewKeylogs.hidden,
#viewScreenshots.hidden,
#viewNotifications.hidden,
#viewTutorial.hidden,
#viewBugs.hidden,
.fleet-view.hidden {
  display: none !important;
  flex: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Fleet: header + bars; grid scrolls — only when visible */
#viewList.fleet-view:not(.hidden),
.fleet-view:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.fleet-header {
  flex: 0 0 auto !important;
  padding: 10px 16px 4px !important;
  gap: 10px !important;
}
.fleet-view .lt-title {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important; /* ~18–22px */
  font-weight: 700 !important;
}
.fleet-stat { font-size: 11.5px !important; }
.demo-apk-bar,
.apk-progress-banner {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.fleet-toolbar.list-toolbar,
.list-toolbar.fleet-toolbar {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 10px 16px 14px !important;
  position: relative !important; /* not sticky over cards */
  top: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
/* Stop display:contents from breaking flex wrap order */
.fleet-toolbar > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}
.fleet-toolbar-spacer {
  display: none !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}
.fleet-filter-group {
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
.fleet-filter-btn {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.fleet-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  margin-inline: auto !important;
}
.fleet-sel,
.fleet-toolbar .sel,
.fleet-toolbar select {
  height: 30px !important;
  max-width: 140px !important;
  font-size: 12px !important;
}
.fleet-btn {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Device grid is THE scroll surface */
.fleet-view .dev-grid,
.fleet-view #devGrid,
#devGrid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* Cards: always 2 per row (left | right), clear gap after each pair */
.fleet-view .dev-grid.view-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  column-gap: 24px !important;
  row-gap: 32px !important; /* space after each pair */
  gap: 32px 24px !important;
  padding: 18px 24px 48px !important;
  max-width: 1100px !important;
  margin-inline: auto !important;
  width: 100% !important;
  align-content: start !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
.dc {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  /* solid surface so offline cards never ghost through neighbors */
  isolation: isolate !important;
  background: rgba(28, 28, 32, 0.96) !important;
}
/* Natural DOM order only — no flex order reshuffle (was stacking shot under next card) */
.dc-head {
  order: 0 !important;
  padding: 14px 16px 8px !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}
.dc-shot-preview,
body.fleet-shots-on .dc .dc-shot-preview,
.dc .dc-shot-preview {
  order: 0 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 88px !important;
  max-height: 88px !important;
  min-height: 88px !important;
  overflow: hidden !important;
  inset: auto !important;
}
.dc-metrics {
  order: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 16px 10px !important;
  gap: 10px !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}
.dc .watch-apps-row {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 16px 8px !important;
  min-height: 0 !important;
}
.dc-foot {
  order: 0 !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 6px 16px 10px !important;
  box-sizing: border-box !important;
  align-content: flex-start !important;
  position: relative !important;
  z-index: 1 !important;
}
.dc .dc-actions,
.dc .qa-bar {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding: 0 14px 14px !important;
}

.dc-avatar { width: 40px !important; height: 40px !important; border-radius: 12px !important; font-size: 15px !important; }
.dc-name { font-size: 14.5px !important; }
.dc-sub { font-size: 12px !important; }
.dc-status { height: 24px !important; padding: 0 10px !important; font-size: 11px !important; }
.dc-metric { font-size: 12px !important; }
.dc-chip { font-size: 11px !important; padding: 4px 8px !important; max-width: 140px !important; }
.dc-act,
.dc .dc-act.primary {
  height: 38px !important;
  font-size: 13px !important;
  border-radius: 11px !important;
}

/* Preview strip: landscape under name — not a tower of empty boxes */
.dc .dc-shot-preview,
body.fleet-shots-on .dc .dc-shot-preview {
  max-height: 100px !important;
  min-height: 80px !important;
  aspect-ratio: 16 / 10 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
}
/* When screenshots toggle OFF, hide previews completely */
body:not(.fleet-shots-on) .dc .dc-shot-preview {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  border: none !important;
}
.dc .dc-shot-refresh {
  width: 28px !important;
  height: 28px !important;
  top: 6px !important;
  right: 6px !important;
  font-size: 12px !important;
}

/* Bulk bar shouldn't cover the grid awkwardly */
.bulk-bar {
  max-width: min(960px, calc(100vw - 24px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 12px !important;
  flex-wrap: wrap !important;
  z-index: 40 !important;
}

/* Device detail: keep sidebars from crushing center */
#viewDevice:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#viewDevice .dev-body,
#viewDevice .device-shell,
.dev-layout {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
}

/* Universal: no element wider than viewport */
#app *,
.fleet-view * {
  box-sizing: border-box !important;
}

/* Keep 2-up until phone; then single column */
@media (max-width: 1200px) {
  .fleet-view .dev-grid.view-cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 20px !important;
    row-gap: 28px !important;
    gap: 28px 20px !important;
    max-width: 960px !important;
  }
  .fleet-header-right .lang-picker { display: none !important; }
}
@media (max-width: 900px) {
  .fleet-view .dev-grid.view-cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
    gap: 24px 16px !important;
    padding: 14px 16px 36px !important;
    max-width: none !important;
  }
  .fleet-filter-btn .fleet-filter-n { display: none !important; }
  .fleet-btn-label { display: none !important; }
  .fleet-btn span:not(.fleet-filter-n) { /* keep icons */ }
}
@media (max-width: 640px) {
  .fleet-view .dev-grid.view-cards {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 18px !important;
    gap: 18px !important;
    padding: 14px 16px 36px !important;
    max-width: none !important;
  }
  .topbar-nav { display: none !important; }
  .topbar-overflow-btn { display: inline-flex !important; }
}

/* Prefer reduced density on short viewports (laptops) */
@media (max-height: 800px) {
  .fleet-header { padding: 8px 14px 2px !important; }
  .fleet-view .lt-title { font-size: 1.15rem !important; }
  .dc .dc-shot-preview,
  body.fleet-shots-on .dc .dc-shot-preview {
    max-height: 88px !important;
    min-height: 72px !important;
  }
  .dc-act, .dc .dc-act.primary { height: 34px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Controls as MODAL (2026-08-04) — full access over stream; not a crushed sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Placeholder in split layout takes no space */
#screenCtrlSidebarHome,
.screen-ctrl-sidebar-home {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Backdrop */
#ctrlModalBackdrop.ctrl-modal-backdrop,
.ctrl-modal-backdrop {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 11900 !important;
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
body.ctrl-sidebar-pinned #ctrlModalBackdrop.hidden,
body.ctrl-sidebar-pinned .ctrl-modal-backdrop.hidden,
body.ctrl-sidebar-pinned #ctrlModalBackdrop[hidden],
body.ctrl-sidebar-pinned .ctrl-modal-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
}
body.ctrl-sidebar-pinned #ctrlModalBackdrop,
body.ctrl-sidebar-pinned .ctrl-modal-backdrop {
  display: block !important;
}

/* Default: hidden until pinned */
body:not(.ctrl-sidebar-pinned) #screenCtrlSidebar,
body:not(.ctrl-sidebar-pinned) .screen-ctrl-sidebar,
body.ctrl-sidebar-collapsed #screenCtrlSidebar,
body.ctrl-sidebar-collapsed .screen-ctrl-sidebar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Open: fixed centered modal — wide enough for tabs, no vertical scroll */
body.ctrl-sidebar-pinned #screenCtrlSidebar,
body.ctrl-sidebar-pinned .screen-ctrl-sidebar,
body.ctrl-sidebar-pinned:not(.ctrl-sidebar-collapsed) #screenCtrlSidebar {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(1080px, 96vw) !important;
  max-width: 96vw !important;
  height: auto !important;
  max-height: min(92vh, 860px) !important;
  min-height: 0 !important;
  min-width: min(320px, 96vw) !important;
  z-index: 11910 !important;
  margin: 0 !important;
  flex-direction: column !important;
  flex: none !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #121214 !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 28px 80px rgba(0, 0, 0, 0.75) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Modal header */
#screenCtrlSidebar .ctrl-modal-hdr,
.screen-ctrl-sidebar .ctrl-modal-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
.ctrl-modal-hdr-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.ctrl-modal-ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 159, 10, 0.15) !important;
  color: #ff9f0a !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.ctrl-modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f7 !important;
  line-height: 1.2 !important;
}
.ctrl-modal-sub {
  font-size: 11px !important;
  color: rgba(235, 235, 245, 0.55) !important;
  margin-top: 2px !important;
}
.ctrl-modal-hdr-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.ctrl-modal-btn {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.ctrl-modal-close {
  min-width: 36px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Body hosts one tab pane — prefer fit without scroll */
body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-body,
body.ctrl-sidebar-pinned .screen-ctrl-sidebar .ctrl-body {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 12px 14px 14px !important;
  align-content: start !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  isolation: isolate !important;
}

body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell,
body.ctrl-sidebar-pinned .screen-ctrl-sidebar .ctrl-cell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  z-index: auto !important;
  float: none !important;
  transform: none !important;
}

body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell.span2 {
  grid-column: 1 / -1 !important;
}

body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell .scr-btn,
body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell button.scr-btn {
  position: static !important;
  float: none !important;
  transform: none !important;
  max-height: none !important;
  min-height: 34px !important;
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.ctrl-sidebar-pinned #screenCtrlSidebar .ti,
body.ctrl-sidebar-pinned #screenCtrlSidebar input.ti,
body.ctrl-sidebar-pinned #screenCtrlSidebar textarea.ti {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Narrow → full screen, still tabbed */
@media (max-width: 720px) {
  body.ctrl-sidebar-pinned #screenCtrlSidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-pane-grid-3,
  body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-pane-grid-2 {
    grid-template-columns: 1fr !important;
  }
  body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-body {
    overflow-y: auto !important; /* only on very small screens */
  }
}

@media (max-width: 1279px) {
  body.ctrl-sidebar-pinned #screenCtrlSidebar,
  body.ctrl-sidebar-pinned .screen-ctrl-sidebar {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(1080px, 96vw) !important;
  }
}

/* Active Controls button chrome */
#btnToggleCtrlSidebar[aria-pressed="true"] {
  background: rgba(255, 159, 10, 0.22) !important;
  color: #ffcc66 !important;
  border-color: rgba(255, 159, 10, 0.45) !important;
}

/* Pop-out window page body (optional document) */
body.ctrl-popout-page {
  background: #0c0c0e !important;
  margin: 0 !important;
  min-height: 100vh !important;
}
body.ctrl-popout-page #screenCtrlSidebar {
  display: flex !important;
  position: relative !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Docked controls: side panel (stream remains usable) */
body.ctrl-sidebar-pinned.ctrl-docked #ctrlModalBackdrop,
body.ctrl-sidebar-pinned.ctrl-docked .ctrl-modal-backdrop {
  display: none !important;
}
body.ctrl-sidebar-pinned.ctrl-docked #screenCtrlSidebar,
body.ctrl-sidebar-pinned.ctrl-docked .screen-ctrl-sidebar {
  left: auto !important;
  right: 10px !important;
  top: 10px !important;
  bottom: 10px !important;
  transform: none !important;
  width: min(480px, 44vw) !important;
  max-width: 96vw !important;
  height: auto !important;
  max-height: calc(100vh - 20px) !important;
  min-height: 0 !important;
}
body.ctrl-sidebar-pinned.ctrl-docked #screenCtrlSidebar .ctrl-pane-grid-3,
body.ctrl-sidebar-pinned.ctrl-docked #screenCtrlSidebar .ctrl-pane-grid-2 {
  grid-template-columns: 1fr !important;
}
body.ctrl-sidebar-pinned.ctrl-docked #screenCtrlSidebar .ctrl-body {
  overflow-y: auto !important; /* dock is narrow — tabs help, scroll ok as fallback */
}
@media (max-width: 900px) {
  body.ctrl-sidebar-pinned.ctrl-docked #screenCtrlSidebar {
    width: min(100vw - 16px, 480px) !important;
    right: 8px !important;
  }
}

/* Pop-out browser window fills the chrome */
body.ctrl-popout-page #screenCtrlSidebar {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  position: relative !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLS MODAL — tabs + labeled SVG buttons (no scroll primary layout)
   ═══════════════════════════════════════════════════════════════════════════ */

body.ctrl-sidebar-pinned #screenCtrlSidebar,
body.ctrl-sidebar-pinned .screen-ctrl-sidebar {
  contain: layout style !important;
}

/* Tabs */
.ctrl-tabs {
  display: flex !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  padding: 8px 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
.ctrl-tab {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: rgba(235, 235, 245, 0.55) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  padding: 8px 14px 10px !important;
  border-radius: 8px 8px 0 0 !important;
  cursor: pointer !important;
  position: relative !important;
  white-space: nowrap !important;
  transition: color 0.12s, background 0.12s !important;
}
.ctrl-tab:hover {
  color: #f5f5f7 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.ctrl-tab.active {
  color: #ffcc66 !important;
  background: rgba(255, 159, 10, 0.12) !important;
}
.ctrl-tab.active::after {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 2px 2px 0 0 !important;
  background: #ff9f0a !important;
}

/* One pane visible */
.ctrl-pane {
  display: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.ctrl-pane.active {
  display: block !important;
}
.ctrl-pane[hidden] {
  display: none !important;
}

.ctrl-pane-grid {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}
.ctrl-pane-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ctrl-pane-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ctrl-cell-wide {
  grid-column: 1 / -1 !important;
}

body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell,
body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell.span2 {
  display: flex !important;
  flex-direction: column !important;
  grid-column: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px !important;
  z-index: auto !important;
  transform: none !important;
  inset: auto !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}
body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell.ctrl-cell-wide {
  grid-column: 1 / -1 !important;
}

.ctrl-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}
.ctrl-status-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: var(--s2, #2c2c2e) !important;
  color: var(--text3, #8e8e93) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
  letter-spacing: 0.04em !important;
}
.ctrl-row {
  display: flex !important;
  gap: 6px !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}
.ctrl-row > .ti,
.ctrl-row > input.ti {
  flex: 1 1 80px !important;
  min-width: 0 !important;
}
.ctrl-row > .scr-btn {
  flex: 1 1 auto !important;
}

/* Swipe unlock — 2×2 labeled direction buttons */
.ctrl-swipe-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.ctrl-dir-btn {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 52px !important;
  padding: 8px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.ctrl-dir-btn .btn-ico {
  width: 16px !important;
  height: 16px !important;
}

/* Ensure every control button shows icon + text */
body.ctrl-sidebar-pinned #screenCtrlSidebar .scr-btn,
body.ctrl-sidebar-pinned #screenCtrlSidebar button.scr-btn,
body.ctrl-sidebar-pinned #screenCtrlSidebar label.scr-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  height: auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  padding: 0 12px !important;
}
body.ctrl-sidebar-pinned #screenCtrlSidebar .scr-btn .btn-ico,
body.ctrl-sidebar-pinned #screenCtrlSidebar .scr-btn svg {
  flex-shrink: 0 !important;
  display: block !important;
  opacity: 0.95 !important;
}
body.ctrl-sidebar-pinned #screenCtrlSidebar .scr-btn span {
  display: inline !important;
  line-height: 1.2 !important;
}

.perm-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
@media (max-width: 900px) {
  .perm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.ctrl-action-row {
  display: flex !important;
  gap: 6px !important;
  align-items: stretch !important;
}
.ctrl-action-row .ti {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ctrl-action-btn {
  flex: 0 0 auto !important;
  min-width: 72px !important;
}
.ctrl-action-wide {
  width: 100% !important;
}
.ctrl-action-trio {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 6px !important;
}
.ctrl-action-file {
  cursor: pointer !important;
  margin: 0 !important;
}
.ctrl-html-ta {
  min-height: 96px !important;
  resize: vertical !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
}

.ctrl-latency-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}
.ctrl-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 10px !important;
  color: rgba(235, 235, 245, 0.5) !important;
  font-weight: 600 !important;
}
.ctrl-kb-grid {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  gap: 4px 14px !important;
  font-size: 11.5px !important;
  color: rgba(235, 235, 245, 0.55) !important;
  line-height: 1.5 !important;
}
.ctrl-kb-grid code {
  color: rgba(235, 235, 245, 0.85) !important;
  font-size: 11px !important;
}

/* Kill dead icon-font glyphs that showed blank buttons */
body.ctrl-sidebar-pinned #screenCtrlSidebar i[class^="icon-"],
body.ctrl-sidebar-pinned #screenCtrlSidebar i[class*=" icon-"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

/* Action trio stays a 3-col grid (override generic flex row rules) */
body.ctrl-sidebar-pinned #screenCtrlSidebar .ctrl-cell .ctrl-action-trio {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

/* Appetize modal: phone frame always dark, not pure white void */
#appetizeFramePlaceholder {
  background: #1c1c1e !important;
  color: rgba(235,235,245,.75) !important;
  border-radius: 12px !important;
}
#appetizeFrame {
  background: #000 !important;
  border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fleet pill list — reference rows + mini screenshot frame (2026-08-04)
   ═══════════════════════════════════════════════════════════════════════════ */

#devGrid.view-list.fleet-pill-list,
#devGrid.view-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 16px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  align-content: start !important;
}

.fleet-row {
  display: grid !important;
  grid-template-columns: 52px minmax(96px, 1.4fr) 64px minmax(72px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px 14px !important;
  min-height: 58px !important;
  padding: 8px 14px 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(28, 28, 32, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.fleet-row:hover {
  background: rgba(40, 40, 46, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.fleet-row.selected {
  outline: 2px solid rgba(10, 132, 255, 0.65) !important;
  outline-offset: 1px !important;
}
.fleet-row.offline {
  opacity: 0.72 !important;
}
.fleet-row.online .fleet-row-title {
  color: #32d74b !important;
}

/* Mini phone screenshot frame */
.fleet-row-shot {
  position: relative !important;
  width: 40px !important;
  height: 52px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: #0c0c0e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.fleet-row-shot-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  background: #111 !important;
}
/* Empty / offline / capturing — never a plain black void */
.fleet-row-shot-ph,
.fleet-row-shot .dc-shot-ph,
.dc-shot-preview .dc-shot-ph {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 3px !important;
  font-size: 9px !important;
  color: rgba(235, 235, 245, 0.55) !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(10, 132, 255, 0.12), transparent 70%),
    linear-gradient(165deg, #2c2c2e 0%, #1c1c1e 45%, #121214 100%) !important;
  border: none !important;
}
.fleet-row-shot.is-empty,
.dc-shot-preview.is-empty {
  background: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.fleet-row-shot.is-offline .fleet-row-shot-ph,
.fleet-row-shot.is-offline .dc-shot-ph,
.dc-shot-preview.is-offline .dc-shot-ph {
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, rgba(142, 142, 147, 0.1), transparent 70%),
    linear-gradient(165deg, #2a2a2c 0%, #18181a 100%) !important;
  color: rgba(235, 235, 245, 0.4) !important;
}
.fleet-row-shot.is-waiting .fleet-row-shot-ph,
.dc-shot-preview.is-waiting .dc-shot-ph {
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(10, 132, 255, 0.18), transparent 65%),
    linear-gradient(165deg, #1a2740 0%, #121820 100%) !important;
  color: #64d2ff !important;
}
.fleet-shot-ico {
  font-size: 16px !important;
  opacity: 0.85 !important;
  color: inherit !important;
}
.fleet-shot-ico.is-spin {
  animation: fleet-shot-spin 0.9s linear infinite !important;
}
@keyframes fleet-shot-spin {
  to { transform: rotate(360deg); }
}
.fleet-shot-ph-lbl {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.fleet-shot-ph-hint {
  font-size: 7.5px !important;
  font-weight: 600 !important;
  opacity: 0.55 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}
/* Larger frame: show fuller empty state */
.fleet-row-shot-wrap .fleet-row-shot {
  width: 64px !important;
  height: 84px !important;
}
.fleet-row-shot-wrap .fleet-shot-ico {
  font-size: 22px !important;
}
.fleet-row-shot-wrap .fleet-shot-ph-lbl {
  font-size: 10px !important;
}
.fleet-row-shot-wrap .fleet-shot-ph-hint {
  font-size: 9px !important;
}
.fleet-row-shot.has-img .fleet-row-shot-ph:not(.ph-overlay),
.dc-shot-preview.has-img .dc-shot-ph:not(.ph-overlay) {
  display: none !important;
}
.fleet-row-shot-ph.ph-overlay,
.dc-shot-ph.ph-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 2 !important;
  color: #fff !important;
}
/* Capture button always visible when no screenshot */
.fleet-row-shot-refresh.is-always,
.dc-shot-refresh.is-always,
.fleet-row-shot.is-empty .fleet-row-shot-refresh,
.dc-shot-preview.is-empty .dc-shot-refresh {
  opacity: 1 !important;
}
.fleet-row-shot-refresh:disabled,
.dc-shot-refresh:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* Card grid empty shot — same icon+label stack */
.dc .dc-shot-preview.is-empty .dc-shot-ph,
.dc .dc-shot-preview .dc-shot-ph {
  flex-direction: column !important;
  gap: 4px !important;
  color: rgba(235, 235, 245, 0.55) !important;
}
.dc .dc-shot-preview .fleet-shot-ico {
  font-size: 28px !important;
}
.dc .dc-shot-preview .fleet-shot-ph-lbl {
  font-size: 12px !important;
}
.dc .dc-shot-preview .fleet-shot-ph-hint {
  font-size: 11px !important;
}
.dc .dc-shot-refresh.is-always {
  opacity: 1 !important;
}
.fleet-row-shot-refresh {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  z-index: 3 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
}
.fleet-row:hover .fleet-row-shot-refresh,
.fleet-row-shot-refresh.is-busy {
  opacity: 1 !important;
}

.fleet-row-avatar {
  position: absolute !important;
  right: -5px !important;
  bottom: -4px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #2c2c2e !important;
  border: 2px solid #121214 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 4 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
.fleet-row-avatar.on {
  box-shadow: 0 0 0 1.5px rgba(50, 215, 75, 0.7), 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
.fleet-row-flag {
  position: absolute !important;
  left: -3px !important;
  bottom: -3px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  z-index: 5 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.fleet-row-name {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.fleet-row-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgba(235, 235, 245, 0.92) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fleet-row-sub {
  font-size: 11px !important;
  color: rgba(235, 235, 245, 0.4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fleet-row-age {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(235, 235, 245, 0.75) !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}
.fleet-row.online .fleet-row-age {
  color: #32d74b !important;
}

.fleet-row-status {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(235, 235, 245, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}
.fleet-row-status.is-on {
  color: rgba(235, 235, 245, 0.72) !important;
}
.fleet-row-status.is-limited {
  color: #ff9f0a !important;
}
.fleet-row-status.is-off {
  color: rgba(235, 235, 245, 0.35) !important;
}

.fleet-row-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
}
.fr-act {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: rgba(235, 235, 245, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 15px !important;
  padding: 0 !important;
  transition: color 0.12s, background 0.12s !important;
}
.fr-act:hover {
  color: #f5f5f7 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.fr-act-star.is-on {
  color: #ffd60a !important;
}

/* Hide legacy list styles when using pills */
.fleet-pill-list .dev-list-row { display: none !important; }

/* Narrow screens: collapse columns */
@media (max-width: 720px) {
  .fleet-row {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    border-radius: 18px !important;
    gap: 8px 10px !important;
  }
  .fleet-row-age,
  .fleet-row-status {
    display: none !important;
  }
}

html[data-theme="light"] .fleet-row {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .fleet-row:hover {
  background: #fff !important;
}
html[data-theme="light"] .fleet-row-title {
  color: #1c1c1e !important;
}
html[data-theme="light"] .fleet-row.online .fleet-row-title {
  color: #248a3d !important;
}
html[data-theme="light"] .fleet-row-sub,
html[data-theme="light"] .fleet-row-status {
  color: rgba(60, 60, 67, 0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Appetize test modal — upload progress → live phone emulator
   ═══════════════════════════════════════════════════════════════════════════ */

.apz-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.apz-overlay.hidden {
  display: none !important;
}
body.apz-open {
  overflow: hidden !important;
}

.apz-shell {
  width: min(400px, 96vw) !important;
  max-height: min(94vh, 900px) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  background: #141416 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65) !important;
  overflow: hidden !important;
}

.apz-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-shrink: 0 !important;
}
.apz-top-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.apz-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #0a84ff, #5e5ce6) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.apz-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
  letter-spacing: -0.01em !important;
}
.apz-sub {
  font-size: 11.5px !important;
  color: rgba(235, 235, 245, 0.5) !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 240px !important;
}
.apz-close {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(235, 235, 245, 0.7) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.apz-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

/* Loading stage */
.apz-stage-load {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 28px 24px 32px !important;
  gap: 22px !important;
}
.apz-stage-load.hidden {
  display: none !important;
}
.apz-phone-ghost {
  width: 140px !important;
  height: 260px !important;
  border-radius: 22px !important;
  padding: 8px !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}
.apz-phone-ghost-screen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, #0a0a0c, #1a1a22) !important;
  display: grid !important;
  place-items: center !important;
}
.apz-spinner {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255, 255, 255, 0.12) !important;
  border-top-color: #0a84ff !important;
  animation: apz-spin 0.75s linear infinite !important;
}
@keyframes apz-spin {
  to { transform: rotate(360deg); }
}
.apz-load-copy {
  width: 100% !important;
  max-width: 280px !important;
  text-align: center !important;
}
.apz-load-h {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
  margin-bottom: 6px !important;
}
.apz-load-d {
  font-size: 12.5px !important;
  color: rgba(235, 235, 245, 0.5) !important;
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
  min-height: 1.4em !important;
}
.apz-progress {
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.apz-progress-bar {
  height: 100% !important;
  width: 0% !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #0a84ff, #64d2ff) !important;
  transition: width 0.35s ease !important;
}
.apz-steps {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.apz-step {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  color: rgba(235, 235, 245, 0.35) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.apz-step.is-active {
  color: #fff !important;
  background: rgba(10, 132, 255, 0.35) !important;
}
.apz-step.is-done {
  color: #32d74b !important;
  background: rgba(50, 215, 75, 0.12) !important;
}

/* Live stage */
.apz-stage-live {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 16px 16px !important;
  gap: 12px !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
.apz-stage-live.hidden {
  display: none !important;
}

.apz-device-frame {
  position: relative !important;
  width: min(320px, 86vw) !important;
  height: min(62vh, 640px) !important;
  min-height: 420px !important;
  border-radius: 28px !important;
  padding: 10px !important;
  background: #0c0c0e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 20px 50px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
}
.apz-device-notch {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 72px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.apz-iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #000 !important;
  display: block !important;
}
.apz-iframe-ph {
  position: absolute !important;
  inset: 10px !important;
  border-radius: 20px !important;
  background: #121214 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(235, 235, 245, 0.55) !important;
  font-size: 13px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.apz-iframe-ph.hidden {
  display: none !important;
}

.apz-live-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 320px !important;
}
.apz-live-badge {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #32d74b !important;
}
.apz-live-actions {
  display: flex !important;
  gap: 6px !important;
}
.apz-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}
.apz-btn-primary {
  background: #0a84ff !important;
  color: #fff !important;
}
.apz-btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(235, 235, 245, 0.85) !important;
}
.apz-btn.hidden {
  display: none !important;
}

@media (max-height: 700px) {
  .apz-device-frame {
    min-height: 360px !important;
    height: min(54vh, 520px) !important;
  }
  .apz-phone-ghost {
    height: 200px !important;
    width: 110px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fleet row v3 — BIG screenshot LEFT, flag, name, age, battery, tags, ★
   ═══════════════════════════════════════════════════════════════════════════ */

#devGrid.view-list.fleet-pill-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px 16px 28px !important;
}

.fleet-row {
  display: grid !important;
  grid-template-columns:
    72px                          /* shot */
    minmax(140px, 1.5fr)          /* name + tags */
    56px                          /* age */
    78px                          /* battery */
    minmax(72px, 0.85fr)          /* location */
    minmax(100px, 1.15fr)         /* note (after location) */
    auto !important;              /* actions */
  align-items: center !important;
  gap: 12px 14px !important;
  min-height: 88px !important;
  padding: 10px 14px 10px 10px !important;
  border-radius: 18px !important;
  background: rgba(28, 28, 32, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  direction: ltr !important;
}

/* Force left-to-right column order (shot always first / left) */
.fleet-row-shot-wrap,
.fleet-row-shot { grid-column: 1 !important; order: 1 !important; }
.fleet-row-main,
.fleet-row-id   { grid-column: 2 !important; order: 2 !important; }
.fleet-row-age  { grid-column: 3 !important; order: 3 !important; }
.fleet-row-batt { grid-column: 4 !important; order: 4 !important; }
.fleet-row-status { grid-column: 5 !important; order: 5 !important; }
.fleet-row-note { grid-column: 6 !important; order: 6 !important; }
.fleet-row-actions { grid-column: 7 !important; order: 7 !important; }

/* Bigger phone frame on the left */
.fleet-row-shot {
  width: 64px !important;
  height: 84px !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #1c1c1e !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0 !important;
}
.fleet-row-shot-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}
/* empty-state styles for .fleet-row-shot-ph defined above (gradient + icon) */
.fleet-row-shot-refresh {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  z-index: 3 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  opacity: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.fleet-row-shot-refresh .mi {
  font-size: 14px !important;
  color: #fff !important;
}
.fleet-row:hover .fleet-row-shot-refresh,
.fleet-row-shot-refresh.is-busy { opacity: 1 !important; }

/* Hide old avatar-on-thumb if any leftover */
.fleet-row-avatar { display: none !important; }

/* Flag + device name */
.fleet-row-id {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.fleet-row-flag-lg {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  text-align: center !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.fleet-row-name {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.fleet-row-title {
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  color: rgba(245, 245, 247, 0.95) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fleet-row.online .fleet-row-title {
  color: #32d74b !important;
}
.fleet-row-sub {
  font-size: 11.5px !important;
  color: rgba(235, 235, 245, 0.42) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Age / time */
.fleet-row-age {
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: center !important;
  color: rgba(235, 235, 245, 0.7) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.fleet-row.online .fleet-row-age {
  color: #32d74b !important;
}

/* Battery */
.fleet-row-batt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.fleet-batt-track {
  width: 100% !important;
  max-width: 56px !important;
  height: 5px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}
.fleet-batt-fill {
  height: 100% !important;
  border-radius: 99px !important;
  min-width: 2px !important;
  transition: width 0.3s ease !important;
}
.fleet-batt-pct {
  font-size: 11.5px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.fleet-batt-pct.muted {
  color: rgba(235, 235, 245, 0.35) !important;
}

/* Status */
.fleet-row-status {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(235, 235, 245, 0.5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fleet-row-status.is-on { color: rgba(235, 235, 245, 0.72) !important; }
.fleet-row-status.is-limited { color: #ff9f0a !important; }
.fleet-row-status.is-off { color: rgba(235, 235, 245, 0.32) !important; }

/* Actions: favorite, tags, open */
.fleet-row-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}
.fr-act {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: rgba(235, 235, 245, 0.42) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 15px !important;
  padding: 0 !important;
}
.fr-act:hover {
  color: #f5f5f7 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.fr-act-star.is-on {
  color: #ffd60a !important;
}

@media (max-width: 900px) {
  .fleet-row {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    min-height: 80px !important;
  }
  .fleet-row-age,
  .fleet-row-batt,
  .fleet-row-status {
    display: none !important;
  }
  .fleet-row-shot { width: 56px !important; height: 74px !important; }
  .fleet-row-actions { grid-column: 3 !important; }
}

html[data-theme="light"] .fleet-row {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .fleet-row-title { color: #1c1c1e !important; }
html[data-theme="light"] .fleet-row.online .fleet-row-title { color: #248a3d !important; }
html[data-theme="light"] .fleet-row-sub { color: rgba(60, 60, 67, 0.5) !important; }
html[data-theme="light"] .fleet-batt-track { background: rgba(0, 0, 0, 0.08) !important; }

/* Fleet v4 — centered screenshot crop + note popup above rows */
.fleet-row-shot {
  width: 72px !important;
  height: 96px !important;
  border-radius: 14px !important;
}
.fleet-row-shot-img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.02) !important; /* slight zoom so edges don't show empty bars */
}
.fleet-row {
  grid-template-columns:
    80px
    minmax(140px, 1.8fr)
    56px
    78px
    minmax(72px, 1fr)
    auto !important;
  min-height: 100px !important;
  padding: 10px 14px 10px 10px !important;
}
.fleet-row-shot { grid-column: 1 !important; }

/* Favorites filter chip accent when active */
.fleet-filter-btn[data-status="favorites"].active {
  color: #ffd60a !important;
  border-color: rgba(255, 214, 10, 0.35) !important;
  background: rgba(255, 214, 10, 0.1) !important;
}

/* Note/tags popup always on top of fleet */
.note-popup,
#notePopup {
  z-index: 14000 !important;
  position: fixed !important;
  min-width: 280px !important;
  max-width: min(320px, 92vw) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

/* Fleet v5 — larger centered shot frame + visible note/tags on row */
#devGrid.view-list.fleet-pill-list {
  gap: 12px !important;
  padding: 16px 18px 32px !important;
}

.fleet-row {
  display: grid !important;
  grid-template-columns:
    104px
    minmax(160px, 2fr)
    56px
    78px
    minmax(80px, 1fr)
    auto !important;
  align-items: center !important;
  gap: 14px 16px !important;
  min-height: 120px !important;
  padding: 12px 16px 12px 12px !important;
  border-radius: 20px !important;
}

/* Wrapper centers the phone frame in its column */
.fleet-row-shot-wrap {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 108px !important;
}
.fleet-row-shot {
  width: 88px !important;
  height: 112px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.45) !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
}
.fleet-row-shot-img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.fleet-row-main {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  justify-content: center !important;
}
.fleet-row-id {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.fleet-row-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-left: 38px !important; /* align under name, past flag */
  min-width: 0 !important;
}
.fleet-row-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.fleet-tag-chip {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: rgba(10, 132, 255, 0.18) !important;
  color: #64d2ff !important;
  border: 1px solid rgba(100, 210, 255, 0.25) !important;
  white-space: nowrap !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fleet-tag-chip.more {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(235, 235, 245, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Note sits after location — own column, truncated */
.fleet-row-note {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 12px !important;
  color: rgba(235, 235, 245, 0.72) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.fleet-row-note.is-empty {
  visibility: hidden !important;
  background: transparent !important;
  border-color: transparent !important;
  padding: 0 !important;
}
.fleet-row-note-ico {
  flex-shrink: 0 !important;
  font-size: 11px !important;
  opacity: 0.85 !important;
}
.fleet-row-note-txt {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fleet-row-age { grid-column: 3 !important; }
.fleet-row-batt { grid-column: 4 !important; }
.fleet-row-status { grid-column: 5 !important; }
.fleet-row-note { grid-column: 6 !important; }
.fleet-row-actions { grid-column: 7 !important; }

/* Note popup always visible above fleet */
#notePopup.note-popup:not(.hidden),
.note-popup:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  z-index: 14000 !important;
  position: fixed !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 900px) {
  .fleet-row {
    grid-template-columns: 96px minmax(0, 1fr) auto !important;
    min-height: 108px !important;
  }
  .fleet-row-shot-wrap { min-height: 100px !important; }
  .fleet-row-shot { width: 80px !important; height: 100px !important; }
  .fleet-row-age,
  .fleet-row-batt,
  .fleet-row-status { display: none !important; }
  .fleet-row-main { grid-column: 2 !important; }
  .fleet-row-note {
    grid-column: 2 !important;
    order: 5 !important;
    max-width: 100% !important;
  }
  .fleet-row-actions { grid-column: 3 !important; }
  .fleet-row-meta { padding-left: 0 !important; }
}

/* ── UI icons: prefer SVG (.ico.mi); Material font is fallback only ───────── */
svg.ico.mi,
svg.mi {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  overflow: visible !important;
}
svg.ico.mi.mi-sm,
svg.mi.mi-sm { width: 15px !important; height: 15px !important; }
svg.ico.mi.mi-xs,
svg.mi.mi-xs { width: 14px !important; height: 14px !important; }
svg.ico.mi.mi-lg,
svg.mi.mi-lg { width: 20px !important; height: 20px !important; }

/* Legacy Material Symbols — hide ligature text if font never loads */
.material-symbols-outlined.mi {
  font-family: 'Material Symbols Outlined', sans-serif !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20 !important;
  vertical-align: middle !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}
.material-symbols-outlined.mi.mi-fill {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20 !important;
}
.material-symbols-outlined.mi.mi-sm { font-size: 15px !important; }
.material-symbols-outlined.mi.mi-xs { font-size: 14px !important; }
.material-symbols-outlined.mi.mi-lg { font-size: 20px !important; }
/* Buttons that contain an mi + label */
.scr-btn .mi,
.sm-btn .mi,
.vhud-btn .mi,
.fleet-filter-btn .mi,
.ctrl-tab .mi,
.fr-act .mi,
.ctrl-modal-btn .mi {
  margin-inline-end: 0 !important;
}
.sm-btn svg.ico,
.fleet-btn svg.ico,
.fleet-filter-btn svg.ico {
  margin-inline-end: 4px;
}
.scr-btn:has(.mi),
.sm-btn:has(.mi),
.vhud-btn:has(.mi),
.fleet-filter-btn:has(.mi),
.ctrl-tab:has(.mi) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.fr-act .mi {
  font-size: 18px !important;
  margin: 0 !important;
}
.fleet-row-note .mi {
  font-size: 14px !important;
  opacity: 0.85 !important;
  color: rgba(235, 235, 245, 0.65) !important;
}
.fleet-batt-pct .mi {
  font-size: 13px !important;
  margin-left: 1px !important;
  vertical-align: -2px !important;
}
.fr-act-star.is-on .mi,
.fr-act-star .mi.mi-fill {
  color: #ffd60a !important;
}
.vhud-pill .mi { font-size: 12px !important; }
.stream-badge .mi { font-size: 12px !important; }

/* Tag filter bar — reusable stored tags */
.tag-filter-bar,
#tagFilterBar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 8px 16px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.18) !important;
}
.tag-filter-bar.hidden,
#tagFilterBar.hidden {
  display: none !important;
}
.tag-filter-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(235, 235, 245, 0.45) !important;
  flex-shrink: 0 !important;
}
.tag-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
}
.tag-chip-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 99px !important;
  border: 1px solid rgba(100, 210, 255, 0.22) !important;
  background: rgba(10, 132, 255, 0.12) !important;
  overflow: visible !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 2px 4px 2px 0 !important;
}
.tag-chip-wrap.is-active {
  border-color: #0a84ff !important;
  background: rgba(10, 132, 255, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.35) !important;
}
.tag-chip-wrap.is-empty {
  opacity: 0.55 !important;
  border-style: dashed !important;
}
.tag-chip {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: #64d2ff !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  padding: 4px 14px 4px 10px !important; /* room for corner × */
  border-radius: 99px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: background 0.12s, color 0.12s !important;
  min-height: 24px !important;
  height: auto !important;
  line-height: 1.2 !important;
}
.tag-chip:hover {
  background: rgba(10, 132, 255, 0.15) !important;
}
.tag-chip.active {
  color: #fff !important;
  box-shadow: none !important;
  background: transparent !important;
}
.tag-chip-count {
  font-size: 10px !important;
  font-weight: 700 !important;
  opacity: 0.7 !important;
  min-width: 1em !important;
  text-align: center !important;
}
.tag-chip.active .tag-chip-count {
  opacity: 0.95 !important;
}
/* Small × badge over top-right of chip */
.tag-chip-remove {
  appearance: none !important;
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  z-index: 3 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 69, 58, 0.55) !important;
  border-radius: 50% !important;
  background: #1c1c1e !important;
  color: #ff453a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
  transition: background 0.12s, color 0.12s, transform 0.1s !important;
}
.tag-chip-remove:hover {
  background: #ff453a !important;
  color: #fff !important;
  border-color: #ff453a !important;
  transform: scale(1.08) !important;
}
html[data-theme="light"] .tag-chip-wrap {
  background: rgba(0, 113, 227, 0.08) !important;
  border-color: rgba(0, 113, 227, 0.22) !important;
}
html[data-theme="light"] .tag-chip {
  color: #0071e3 !important;
}
html[data-theme="light"] .tag-chip-remove {
  background: #fff !important;
  color: #d70015 !important;
  border-color: rgba(215, 0, 21, 0.45) !important;
}
html[data-theme="light"] .tag-chip-remove:hover {
  background: #d70015 !important;
  color: #fff !important;
}
.tag-filter-active {
  font-size: 11px !important;
  color: #ffd60a !important;
  font-weight: 600 !important;
  margin-left: auto !important;
}
.tag-chip.is-empty {
  opacity: 0.55 !important;
  border-style: dashed !important;
}
/* Note popup — reuse previously stored tags with one click */
.note-popup-tag-suggest {
  margin-top: 8px !important;
}
.note-popup-tag-suggest-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(235, 235, 245, 0.4) !important;
  margin-bottom: 6px !important;
}
.note-popup-tag-suggest-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.note-tag-suggest-chip {
  appearance: none !important;
  border: 1px solid rgba(100, 210, 255, 0.22) !important;
  background: rgba(10, 132, 255, 0.1) !important;
  color: #64d2ff !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s !important;
}
.note-tag-suggest-chip:hover {
  background: rgba(10, 132, 255, 0.22) !important;
  border-color: rgba(100, 210, 255, 0.4) !important;
}
.note-tag-suggest-chip.is-on {
  background: rgba(10, 132, 255, 0.38) !important;
  border-color: #0a84ff !important;
  color: #fff !important;
}
.fleet-tag-chip {
  cursor: pointer !important;
  appearance: none !important;
  border: 1px solid rgba(100, 210, 255, 0.25) !important;
  background: rgba(10, 132, 255, 0.16) !important;
  color: #64d2ff !important;
  font: inherit !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
}
.fleet-tag-chip.is-active,
.fleet-tag-chip.active {
  background: rgba(10, 132, 255, 0.4) !important;
  color: #fff !important;
  border-color: #0a84ff !important;
}
.fleet-tag-chip:hover {
  filter: brightness(1.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH — unified buttons, type, HUD (2026-08-04)
   Concentric radii · icon+label gap · press scale · focus rings · sentence case
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ui-r-sm: 8px;
  --ui-r-md: 10px;
  --ui-r-lg: 12px;
  --ui-r-pill: 999px;
  --ui-btn-h: 34px;
  --ui-btn-h-sm: 30px;
  --ui-gap-ico: 6px;
  --ui-focus: 0 0 0 2px rgba(10, 132, 255, 0.45);
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
  --ui-press: 0.12s var(--ui-ease);
}

/* —— Shared button anatomy —— */
.scr-btn,
.sm-btn,
.vhud-btn,
.fleet-filter-btn,
.fleet-btn,
.ctrl-tab,
.fr-act,
.topnav-btn,
.bsm-ok,
.bsm-cancel,
.ctrl-modal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ui-gap-ico) !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    background-color var(--ui-press),
    border-color var(--ui-press),
    color var(--ui-press),
    box-shadow var(--ui-press),
    transform 0.1s var(--ui-ease),
    opacity var(--ui-press) !important;
}
.scr-btn:active:not(:disabled),
.sm-btn:active:not(:disabled),
.vhud-btn:active:not(:disabled),
.fleet-filter-btn:active,
.fleet-btn:active:not(:disabled),
.fr-act:active,
.topnav-btn:active,
.ctrl-tab:active,
.bsm-ok:active,
.bsm-cancel:active {
  transform: scale(0.96) !important;
}
.scr-btn:focus-visible,
.sm-btn:focus-visible,
.vhud-btn:focus-visible,
.fleet-filter-btn:focus-visible,
.topnav-btn:focus-visible,
.ctrl-tab:focus-visible,
.fr-act:focus-visible,
.bsm-ok:focus-visible,
.bsm-cancel:focus-visible {
  outline: none !important;
  box-shadow: var(--ui-focus) !important;
}
.scr-btn:disabled,
.sm-btn:disabled,
.vhud-btn:disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Material icon optical size next to labels */
.scr-btn .mi,
.sm-btn .mi,
.vhud-btn .mi,
.fleet-filter-btn .mi,
.ctrl-tab .mi,
.fr-act .mi,
.ctrl-modal-btn .mi,
.topnav-btn .mi {
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.92 !important;
  flex-shrink: 0 !important;
}
.vhud-btn .mi,
.vhud-pill .mi {
  font-size: 15px !important;
}
.fr-act .mi {
  font-size: 18px !important;
  opacity: 1 !important;
}

/* —— Screen / control buttons —— */
.scr-btn,
#screenCtrlSidebar .scr-btn,
.phone-ctrl-bar .scr-btn {
  min-height: var(--ui-btn-h) !important;
  height: auto !important;
  padding: 0 12px !important;
  border-radius: var(--ui-r-md) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 245, 247, 0.92) !important;
}
.scr-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
.scr-btn.ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(235, 235, 245, 0.72) !important;
}
.scr-btn.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.scr-btn.go {
  color: #30d158 !important;
  border-color: rgba(48, 209, 88, 0.35) !important;
  background: rgba(48, 209, 88, 0.1) !important;
}
.scr-btn.go:hover:not(:disabled) {
  background: rgba(48, 209, 88, 0.18) !important;
  border-color: rgba(48, 209, 88, 0.5) !important;
}
.scr-btn.stop {
  color: #ff453a !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
  background: rgba(255, 69, 58, 0.1) !important;
}
.scr-btn.stop:hover:not(:disabled) {
  background: rgba(255, 69, 58, 0.18) !important;
}
.scr-btn.warn {
  color: #ff9f0a !important;
  border-color: rgba(255, 159, 10, 0.35) !important;
  background: rgba(255, 159, 10, 0.1) !important;
}
.scr-btn.teal {
  color: #64d2ff !important;
  border-color: rgba(100, 210, 255, 0.35) !important;
  background: rgba(100, 210, 255, 0.1) !important;
}

/* —— Small toolbar buttons —— */
.sm-btn,
.fleet-btn.sm-btn {
  min-height: var(--ui-btn-h-sm) !important;
  padding: 0 11px !important;
  border-radius: var(--ui-r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 245, 247, 0.9) !important;
}
.sm-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.sm-btn.ghost {
  background: transparent !important;
}

/* —— Fleet filter chips —— */
.fleet-filter-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: var(--ui-r-lg) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.fleet-filter-btn {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(235, 235, 245, 0.55) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.fleet-filter-btn:hover {
  color: rgba(245, 245, 247, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.fleet-filter-btn.active {
  color: #fff !important;
  background: rgba(10, 132, 255, 0.28) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}
.fleet-filter-n {
  font-variant-numeric: tabular-nums !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: 0.75 !important;
  margin-left: 2px !important;
}
.fleet-filter-btn.active .fleet-filter-n {
  opacity: 1 !important;
  color: #64d2ff !important;
}

/* —— Stream video HUD (collapsible bar + body) —— */
.video-hud,
[data-video-hud] {
  gap: 0 !important;
  padding: 0 !important;
  background: rgba(10, 10, 12, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.video-hud-status,
.video-hud-actions {
  gap: 5px !important;
}
/* Essential stream controls never hide with HUD collapse */
.video-hud-essential,
[data-video-hud-essential] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 9px 8px !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  max-height: none !important;
  visibility: visible !important;
}
/* Collapsed: minimal chrome so stream fills the phone */
.video-hud.is-collapsed {
  gap: 0 !important;
}
.video-hud.is-collapsed .video-hud-essential {
  padding: 2px 6px 3px !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  max-height: 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.video-hud.is-collapsed .video-hud-essential .vhud-btn {
  min-height: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  gap: 2px !important;
  font-size: 9.5px !important;
  border-radius: 5px !important;
  line-height: 1 !important;
}
.video-hud.is-collapsed .video-hud-essential .vhud-btn .mi {
  font-size: 12px !important;
}
.video-hud.is-collapsed .video-hud-essential .vhud-lbl {
  font-size: 9.5px !important;
  max-width: 7.5em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.video-hud.is-collapsed .video-hud-bar {
  min-height: 26px !important;
  padding: 2px 6px !important;
}
.video-hud.is-collapsed .vhud-pill {
  min-height: 18px !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}
.video-hud.is-collapsed .vhud-collapse-btn {
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}
.video-hud.is-collapsed .video-hud-body {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: none !important;
}
html[data-theme="light"] .vhud-collapse-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(28, 28, 30, 0.85) !important;
}
html[data-theme="light"] .vhud-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #000 !important;
}
.vhud-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: var(--ui-r-pill) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(235, 235, 245, 0.4) !important;
  opacity: 1 !important;
}
.vhud-pill .vhud-lbl {
  line-height: 1 !important;
}
.vhud-pill.active {
  opacity: 1 !important;
}
.vhud-pill[data-state="live"].active {
  color: #30d158 !important;
  border-color: rgba(48, 209, 88, 0.45) !important;
  background: rgba(48, 209, 88, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(48, 209, 88, 0.12), 0 0 16px rgba(48, 209, 88, 0.12) !important;
}
.vhud-pill[data-state="stopped"].active {
  color: rgba(235, 235, 245, 0.85) !important;
  border-color: rgba(142, 142, 147, 0.4) !important;
  background: rgba(142, 142, 147, 0.14) !important;
  box-shadow: none !important;
}
.vhud-pill[data-state="offline"].active {
  color: #ff453a !important;
  border-color: rgba(255, 69, 58, 0.4) !important;
  background: rgba(255, 69, 58, 0.12) !important;
  box-shadow: none !important;
}
.vhud-btn {
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 245, 247, 0.88) !important;
}
.vhud-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
.vhud-btn.go {
  color: #30d158 !important;
  border-color: rgba(48, 209, 88, 0.38) !important;
  background: rgba(48, 209, 88, 0.12) !important;
}
.vhud-btn.go:hover:not(:disabled) {
  background: rgba(48, 209, 88, 0.2) !important;
}
.vhud-btn.stop {
  color: #ff453a !important;
  border-color: rgba(255, 69, 58, 0.38) !important;
  background: rgba(255, 69, 58, 0.12) !important;
}
.vhud-btn.stop:hover:not(:disabled) {
  background: rgba(255, 69, 58, 0.2) !important;
}
/* Volume cluster — subtle visual group */
.vhud-btn[data-vaction="volup"],
.vhud-btn[data-vaction="voldown"],
.vhud-btn[data-vaction="mute"] {
  color: #64d2ff !important;
  border-color: rgba(100, 210, 255, 0.28) !important;
  background: rgba(100, 210, 255, 0.08) !important;
}
.vhud-btn[data-vaction="volup"]:hover:not(:disabled),
.vhud-btn[data-vaction="voldown"]:hover:not(:disabled),
.vhud-btn[data-vaction="mute"]:hover:not(:disabled) {
  background: rgba(100, 210, 255, 0.16) !important;
  border-color: rgba(100, 210, 255, 0.42) !important;
}
.vhud-meta {
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(148, 163, 184, 0.95) !important;
  padding: 0 6px !important;
  min-width: 14ch !important;
  width: 14ch !important;
  max-width: 14ch !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
.video-hud,
[data-video-hud] {
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.video-hud-status,
.video-hud-actions,
.video-hud-quality {
  width: 100% !important;
}
.video-hud-quality .vhud-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
}
.video-hud-quality .vhud-check input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  appearance: none !important;
}
.video-hud-quality .vhud-switch {
  position: relative !important;
  display: inline-block !important;
  width: 36px !important;
  height: 20px !important;
  min-width: 36px !important;
  min-height: 20px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  flex: 0 0 36px !important;
}
.video-hud-quality .vhud-switch::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  transform: none !important;
}
.video-hud-quality .vhud-check input:checked + .vhud-switch {
  background: #30d158 !important;
  border-color: #30d158 !important;
}
.video-hud-quality .vhud-check input:checked + .vhud-switch::after {
  transform: translateX(16px) !important;
}
html[data-theme="light"] .video-hud-quality .vhud-switch {
  background: rgba(60, 60, 67, 0.18) !important;
  border-color: rgba(60, 60, 67, 0.28) !important;
}
html[data-theme="light"] .video-hud-quality .vhud-switch::after {
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="light"] .video-hud-quality .vhud-check input:checked + .vhud-switch {
  background: #34c759 !important;
  border-color: #34c759 !important;
}

/* —— Top nav —— */
.topbar-nav {
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  gap: 3px !important;
}
.topbar-nav .topnav-btn {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(235, 235, 245, 0.58) !important;
  border: none !important;
  background: transparent !important;
}
.topbar-nav .topnav-btn:hover {
  color: rgba(245, 245, 247, 0.95) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.topbar-nav .topnav-btn.active,
.topbar-nav .topnav-btn[aria-selected="true"] {
  color: #fff !important;
  background: rgba(10, 132, 255, 0.28) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(255, 255, 255, 0.06) inset !important;
}
.topnav-badge {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: var(--ui-r-pill) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  background: rgba(10, 132, 255, 0.9) !important;
}

/* —— Controls modal tabs —— */
.ctrl-tab {
  min-height: 34px !important;
  padding: 0 14px 8px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: rgba(235, 235, 245, 0.5) !important;
}
.ctrl-tab:hover {
  color: rgba(245, 245, 247, 0.9) !important;
}
.ctrl-tab.active {
  color: #ffcc66 !important;
}
.ctrl-label,
#screenCtrlSidebar .ctrl-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(235, 235, 245, 0.42) !important;
  margin-bottom: 2px !important;
}

/* —— Fleet row actions —— */
.fr-act {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(235, 235, 245, 0.75) !important;
}
.fr-act:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.fr-act-star.is-on,
.fr-act-star .mi.mi-fill {
  color: #ffd60a !important;
  border-color: rgba(255, 214, 10, 0.3) !important;
  background: rgba(255, 214, 10, 0.1) !important;
}

/* —— Inputs (shared polish) —— */
.ti,
input.ti,
select.sel,
.fleet-sel,
#searchInput.search,
.bsm-input,
.bsm-select {
  border-radius: var(--ui-r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: border-color 0.12s var(--ui-ease), box-shadow 0.12s var(--ui-ease) !important;
}
.ti:focus,
input.ti:focus,
select.sel:focus,
#searchInput.search:focus,
.bsm-input:focus,
.bsm-select:focus {
  outline: none !important;
  border-color: rgba(10, 132, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18) !important;
}

/* —— Stream status badge —— */
.stream-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: var(--ui-r-pill) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .scr-btn,
  .sm-btn,
  .vhud-btn,
  .fleet-filter-btn,
  .topnav-btn,
  .fr-act,
  .ctrl-tab {
    transition: none !important;
  }
  .scr-btn:active,
  .sm-btn:active,
  .vhud-btn:active,
  .fr-act:active {
    transform: none !important;
  }
}

/* ── Watched apps chips (fleet + device header) ──────────────────────────── */
.watch-apps-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
  margin-top: 4px !important;
  min-width: 0 !important;
}
.watch-app-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 140px !important;
  padding: 2px 8px 2px 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 159, 10, 0.12) !important;
  border: 1px solid rgba(255, 159, 10, 0.32) !important;
  color: #ffd60a !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.watch-app-chip.more {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(235, 235, 245, 0.55) !important;
  padding: 2px 8px !important;
}
.watch-app-ico {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: rgba(0, 0, 0, 0.25) !important;
}
.watch-app-letter {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: rgba(255, 159, 10, 0.25) !important;
  color: #ffd60a !important;
  flex-shrink: 0 !important;
}
.watch-app-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.watch-app-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.15em !important;
  height: 1.15em !important;
  margin-left: 6px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  vertical-align: middle !important;
  background: rgba(255, 159, 10, 0.28) !important;
  color: #ffd60a !important;
  border: 1px solid rgba(255, 159, 10, 0.4) !important;
}
.fleet-row.has-watch-apps {
  border-color: rgba(255, 159, 10, 0.22) !important;
  box-shadow: 0 0 0 1px rgba(255, 159, 10, 0.08) inset !important;
}
.dev-watch-apps-strip {
  padding: 6px 14px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.dev-watch-apps-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(235, 235, 245, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
}
.hdr-chip.watch-hdr {
  color: #ffd60a !important;
  border-color: rgba(255, 159, 10, 0.35) !important;
  background: rgba(255, 159, 10, 0.12) !important;
}
.dc .watch-apps-row {
  padding: 0 14px 8px !important;
}

/* Empty fleet CTA links */
.empty-link-btn {
  appearance: none !important;
  border: none !important;
  background: none !important;
  color: #0a84ff !important;
  font: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
}
.empty-link-btn:hover {
  color: #64d2ff !important;
}

/* Light theme adjustments */
html[data-theme="light"] .scr-btn,
html[data-theme="light"] .sm-btn,
html[data-theme="light"] .vhud-btn {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.82) !important;
}
html[data-theme="light"] .topbar-nav {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .fleet-filter-group {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — readable text (beats apple-components / phantom hardcodes)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"],
html[data-theme="light"] body,
body.theme-light {
  --apple-label: #1c1c1e !important;
  --apple-label-2: #3a3a3c !important;
  --apple-label-3: #6c6c70 !important;
  --apple-label-4: #8e8e93 !important;
  --text: #1c1c1e !important;
  --text1: #1c1c1e !important;
  --text2: #3a3a3c !important;
  --text3: #6c6c70 !important;
  --ph-t1: #1c1c1e !important;
  --ph-t2: #3a3a3c !important;
  --ph-t3: #6c6c70 !important;
  --ios-label: #1c1c1e !important;
  --ios-label-2: #3a3a3c !important;
  --ios-label-3: #6c6c70 !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #f2f2f7 !important;
  color-scheme: light !important;
}

/* Primary readable text — broad surface sweep */
html[data-theme="light"] #app,
html[data-theme="light"] #app *,
html[data-theme="light"] .devices-view,
html[data-theme="light"] .fleet-view,
html[data-theme="light"] .settings-view,
html[data-theme="light"] .stats-root,
html[data-theme="light"] .ss-root,
html[data-theme="light"] .list-toolbar,
html[data-theme="light"] .dev-card,
html[data-theme="light"] .dc,
html[data-theme="light"] .s-panel,
html[data-theme="light"] .s-group,
html[data-theme="light"] .login-box,
html[data-theme="light"] .purchase-panel,
html[data-theme="light"] .dmodal-box,
html[data-theme="light"] .modal-box {
  color: #1c1c1e;
}

/* Force dark text where sheets used pure white / near-white */
html[data-theme="light"] .topbar,
html[data-theme="light"] .topbar-title,
html[data-theme="light"] .topnav-btn,
html[data-theme="light"] .lt-title,
html[data-theme="light"] .login-title,
html[data-theme="light"] .login-tagline,
html[data-theme="light"] .login-sub,
html[data-theme="light"] .login-register-sub,
html[data-theme="light"] .login-section-title,
html[data-theme="light"] .dev-card-name,
html[data-theme="light"] .dc-name,
html[data-theme="light"] .dc-meta,
html[data-theme="light"] .dc-sub,
html[data-theme="light"] .s-label,
html[data-theme="light"] .s-hint,
html[data-theme="light"] .s-row,
html[data-theme="light"] .empty-title,
html[data-theme="light"] .empty-sub,
html[data-theme="light"] .section-title,
html[data-theme="light"] .ss-title,
html[data-theme="light"] .stats-kpi-val,
html[data-theme="light"] .stats-kpi-label,
html[data-theme="light"] .stats-kpi-card,
html[data-theme="light"] .fleet-stat,
html[data-theme="light"] .fleet-stat b,
html[data-theme="light"] .dev-count,
html[data-theme="light"] .snav-btn,
html[data-theme="light"] .dtab-btn,
html[data-theme="light"] .filter-chip,
html[data-theme="light"] .view-mode-btn,
html[data-theme="light"] .fleet-filter-btn,
html[data-theme="light"] .theme-btn,
html[data-theme="light"] .font-btn,
html[data-theme="light"] .font-size-btn,
html[data-theme="light"] .ui-scale-btn,
html[data-theme="light"] .scr-btn,
html[data-theme="light"] .sm-btn:not(.accent):not(.danger):not(.go),
html[data-theme="light"] .qa-btn,
html[data-theme="light"] .kl-row,
html[data-theme="light"] .kl-table,
html[data-theme="light"] .dev-table,
html[data-theme="light"] .dev-table td,
html[data-theme="light"] .dev-table th,
html[data-theme="light"] .dev-list-row,
/* skel-node / reader-canvas intentionally NOT here — they sit on black phone canvas */
html[data-theme="light"] .phone-side-label,
html[data-theme="light"] .device-name,
html[data-theme="light"] .dmodal-name,
html[data-theme="light"] .pur-account-k,
html[data-theme="light"] .pur-account-v,
html[data-theme="light"] .pur-account-hint,
html[data-theme="light"] .pur-account-label,
html[data-theme="light"] label,
html[data-theme="light"] p,
html[data-theme="light"] span:not(.topnav-badge):not(.badge):not(.pill):not(.chip-on):not(.status-live),
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] li,
body.theme-light .topbar-title,
body.theme-light .dev-card-name {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

/* Muted secondary text — still dark enough on white */
html[data-theme="light"] .s-hint,
html[data-theme="light"] .empty-sub,
html[data-theme="light"] .dc-meta,
html[data-theme="light"] .dc-sub,
html[data-theme="light"] .stats-kpi-label,
html[data-theme="light"] .login-tagline,
html[data-theme="light"] .login-sub,
html[data-theme="light"] .login-register-sub,
html[data-theme="light"] .pur-account-hint,
html[data-theme="light"] .pur-account-k,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .meta,
html[data-theme="light"] .dev-table th,
html[data-theme="light"] .kl-agg-table th {
  color: #6c6c70 !important;
  -webkit-text-fill-color: #6c6c70 !important;
}

/* Inputs on light */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .ti,
html[data-theme="light"] .sel,
html[data-theme="light"] .search,
html[data-theme="light"] #searchInput {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  caret-color: #1c1c1e !important;
  background: rgba(120, 120, 128, 0.12) !important;
  border-color: rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .search::placeholder {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
  opacity: 1 !important;
}

/* Keep white text only on filled accent/danger buttons */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .login-register-btn,
html[data-theme="light"] .login-trial-cta,
html[data-theme="light"] .pur-btn-primary,
html[data-theme="light"] .pur-edit-save,
html[data-theme="light"] .sm-btn.accent,
html[data-theme="light"] .sm-btn.go,
html[data-theme="light"] .sm-btn.danger,
html[data-theme="light"] .demo-apk-btn-primary,
html[data-theme="light"] .topnav-badge,
html[data-theme="light"] button.accent,
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .btn.go {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Semantic colors must stay (online green, offline red, accents) */
html[data-theme="light"] #statOnline,
html[data-theme="light"] .stat-online,
html[data-theme="light"] .fleet-stat.online,
html[data-theme="light"] .fleet-stat.online b,
html[data-theme="light"] .status-online,
html[data-theme="light"] .dot-online,
html[data-theme="light"] .online-text {
  color: #248a3d !important;
  -webkit-text-fill-color: #248a3d !important;
}
html[data-theme="light"] #statOffline,
html[data-theme="light"] .fleet-stat.offline,
html[data-theme="light"] .fleet-stat.offline b,
html[data-theme="light"] .status-offline {
  color: #d70015 !important;
  -webkit-text-fill-color: #d70015 !important;
}
html[data-theme="light"] a:not(.topnav-btn):not(.btn),
html[data-theme="light"] .link,
html[data-theme="light"] .empty-link-btn {
  color: #0071e3 !important;
  -webkit-text-fill-color: #0071e3 !important;
}
html[data-theme="light"] .text-accent,
html[data-theme="light"] .accent-text {
  color: var(--accent, #0a84ff) !important;
  -webkit-text-fill-color: var(--accent, #0a84ff) !important;
}

/* Icons that inherit currentColor */
html[data-theme="light"] .material-symbols-outlined,
html[data-theme="light"] .btn-ico,
html[data-theme="light"] .topnav-btn .material-symbols-outlined {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Cards / panels stay white with dark type */
html[data-theme="light"] .login-box {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.14) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .login-overlay {
  background: #f2f2f7 !important;
}
html[data-theme="light"] .stats-kpi-card,
html[data-theme="light"] .dev-card,
html[data-theme="light"] .s-group {
  background: #ffffff !important;
  color: #1c1c1e !important;
}

/* Watch-apps strip was near-white on dark */
html[data-theme="light"] .dev-watch-apps-label {
  color: #6c6c70 !important;
}
html[data-theme="light"] .dev-watch-apps-strip {
  border-top-color: rgba(60, 60, 67, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS KPI CARDS — fix clipped / misaligned labels (override dashboard + ios)
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-kpi-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px 16px 12px !important;
  box-sizing: border-box !important;
}

.stats-kpi-card {
  flex: 1 1 148px !important;
  min-width: 148px !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.stats-kpi-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

.stats-kpi-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.stats-kpi-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  max-width: 100% !important;
}

.stats-kpi-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.25 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  max-width: 100% !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Wide screens: keep one even row without crushing */
@media (min-width: 1200px) {
  .stats-kpi-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .stats-kpi-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Narrow: stack icon above value for readability */
@media (max-width: 640px) {
  .stats-kpi-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: calc(50% - 8px) !important;
    flex: 1 1 calc(50% - 8px) !important;
  }
  .stats-kpi-body { width: 100% !important; }
}

html[data-theme="light"] .stats-kpi-val {
  color: #1c1c1e !important;
}
html[data-theme="light"] .stats-kpi-label {
  color: #6c6c70 !important;
}
html[data-theme="light"] #statOnline,
html[data-theme="light"] .stats-kpi-card #statOnline {
  color: #248a3d !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT FLEET TOOLBAR — more room for device list
   Stats → topbar · langs → sidebar · agent collapsed · one control row
   ═══════════════════════════════════════════════════════════════════════════ */

/* Topbar fleet summary — full counts, no orphan dots */
.topbar-fleet-stats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 8px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(245, 245, 247, 0.72) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}
.topbar-fleet-stats .tbf-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}
.topbar-fleet-stats .tbf-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.topbar-fleet-stats .tbf-on,
.topbar-fleet-stats .tbf-off {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.topbar-fleet-stats .tbf-on span,
.topbar-fleet-stats .tbf-off span {
  display: inline !important;
  visibility: visible !important;
  text-transform: capitalize !important;
}
.topbar-fleet-stats .tbf-on {
  color: #30d158 !important;
}
.topbar-fleet-stats .tbf-on b {
  margin-right: 2px !important;
}
.topbar-fleet-stats b {
  color: #f5f5f7 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.topbar-fleet-stats .tbf-on b { color: #30d158 !important; }
.topbar-fleet-stats .tbf-off b { color: #ff453a !important; }
.topbar-fleet-stats .tbf-age {
  color: rgba(245, 245, 247, 0.42) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  margin-left: 2px !important;
}
.tbf-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.tbf-dot.on { background: #30d158 !important; box-shadow: 0 0 6px rgba(48, 209, 88, 0.5) !important; }
.tbf-dot.off { background: #8e8e93 !important; }
body.device-view-active .topbar-fleet-stats {
  display: none !important;
}
html[data-theme="light"] .topbar-fleet-stats {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #3a3a3c !important;
}
html[data-theme="light"] .topbar-fleet-stats b { color: #1c1c1e !important; }
html[data-theme="light"] .topbar-fleet-stats .tbf-on b { color: #248a3d !important; }
html[data-theme="light"] .topbar-fleet-stats .tbf-age { color: #8e8e93 !important; }

/* Sidebar language chips */
.app-side-lang {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 8px 10px 4px !important;
  justify-content: center !important;
}
.app-side-lang .lang-btn {
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
}
#app.sidebar-collapsed .app-side-lang {
  flex-direction: column !important;
  padding: 6px 4px !important;
}
#app.sidebar-collapsed .app-side-lang .lang-code {
  display: none !important;
}

/* Hide legacy fleet header if any leftover */
.fleet-header { display: none !important; }

/* Compact single toolbar row — centered */
.fleet-toolbar.fleet-toolbar-compact,
.list-toolbar.fleet-toolbar-compact {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 10px !important;
  padding: 8px 14px 12px !important;
  min-height: 0 !important;
  row-gap: 8px !important;
}
.fleet-toolbar-compact .fleet-filter-group {
  flex: 0 1 auto !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 2px !important;
  min-height: 0 !important;
}
.fleet-toolbar-compact .fleet-filter-btn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}
.fleet-toolbar-compact .fleet-controls {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.fleet-toolbar-compact .fleet-sel,
.fleet-toolbar-compact .sel,
.fleet-toolbar-compact select {
  min-height: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
}
.fleet-toolbar-compact .sm-btn,
.fleet-toolbar-compact .fleet-btn,
.fleet-toolbar-compact .view-mode-btn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}
.fleet-toolbar-compact .view-mode-group {
  display: inline-flex !important;
  gap: 2px !important;
  padding: 2px !important;
}
.fleet-toolbar-compact .view-mode-btn {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}
.fleet-toolbar-compact .demo-apk-reopen {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 113, 227, 0.35) !important;
  background: rgba(0, 113, 227, 0.14) !important;
  color: #64d2ff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.fleet-toolbar-compact .demo-apk-reopen.hidden {
  display: none !important;
}
/* When bar is open, hide reopen chip */
.demo-apk-bar:not(.is-hidden):not([hidden]) ~ .fleet-toolbar-compact .demo-apk-reopen,
.demo-apk-bar:not(.is-hidden) + .fleet-toolbar-compact .demo-apk-reopen {
  display: none !important;
}

/* Tags inline one-line scroll */
.tag-filter-bar.tag-filter-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 160px !important;
  min-width: 120px !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden !important;
}
.tag-filter-bar.tag-filter-inline.hidden {
  display: none !important;
}
.tag-filter-bar.tag-filter-inline .tag-filter-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 4px !important;
  max-width: min(420px, 40vw) !important;
  padding-bottom: 2px !important;
  scrollbar-width: thin !important;
}
.tag-filter-bar.tag-filter-inline .tag-filter-label {
  flex-shrink: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
  font-size: 0 !important;
}
.tag-filter-bar.tag-filter-inline .tag-chip-wrap,
.tag-filter-bar.tag-filter-inline .tag-chip {
  flex-shrink: 0 !important;
}
.tag-filter-bar.tag-filter-inline .tag-chip {
  min-height: 26px !important;
  padding: 0 6px 0 8px !important;
  font-size: 11px !important;
}
.tag-filter-bar.tag-filter-inline .fleet-btn {
  flex-shrink: 0 !important;
}

/* Agent bar thinner when expanded */
.demo-apk-bar {
  padding: 4px 10px !important;
  min-height: 0 !important;
}
.demo-apk-btn {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

@media (max-width: 900px) {
  .topbar-fleet-stats .tbf-age { display: none !important; }
  .topbar-fleet-stats .tbf-total-lbl { display: none !important; }
}
@media (max-width: 720px) {
  .topbar-fleet-stats {
    display: none !important; /* very tight — sidebar badge still shows count */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR LANGUAGE — compact dropdown (not a tall chip stack)
   ═══════════════════════════════════════════════════════════════════════════ */
.app-side-lang { display: none !important; } /* legacy stack removed */

/* ══ Bugs view ══════════════════════════════════════════════════════════════ */
.bugs-root {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  background: var(--bg, #0b0b0f) !important;
}
.bugs-wrap {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 22px 20px 40px !important;
  box-sizing: border-box !important;
}
.bugs-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
.bugs-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(235, 235, 245, 0.4) !important;
}
.bugs-title {
  margin: 4px 0 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f7 !important;
}
.bugs-sub {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(235, 235, 245, 0.5) !important;
  max-width: 520px !important;
}
.bugs-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 380px) 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 860px) {
  .bugs-grid { grid-template-columns: 1fr !important; }
}
.bugs-form-card,
.bugs-list-card {
  background: rgba(28, 28, 32, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 16px 16px 18px !important;
  box-sizing: border-box !important;
}
.bugs-card-title {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  color: #f5f5f7 !important;
}
.bugs-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.bugs-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: rgba(235, 235, 245, 0.55) !important;
}
.bugs-field .ti,
.bugs-field input[type="file"],
.bugs-ta {
  font-weight: 500 !important;
  color: #f5f5f7 !important;
}
.bugs-ta {
  resize: vertical !important;
  min-height: 110px !important;
  line-height: 1.45 !important;
}
.bugs-hint {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(235, 235, 245, 0.38) !important;
}
.bugs-preview {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  font-size: 12px !important;
  color: rgba(235, 235, 245, 0.6) !important;
}
.bugs-preview img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
.bugs-err {
  color: #ff6961 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.bugs-submit {
  appearance: none !important;
  min-height: 40px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #0a84ff !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.bugs-submit:disabled { opacity: 0.55 !important; cursor: wait !important; }
.bugs-list-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.bugs-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.bugs-filter {
  appearance: none !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.65) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}
.bugs-filter.is-on {
  background: rgba(10, 132, 255, 0.18) !important;
  border-color: rgba(10, 132, 255, 0.4) !important;
  color: #64d2ff !important;
}
.bugs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: min(70vh, 720px) !important;
  overflow-y: auto !important;
}
.bugs-empty {
  padding: 28px 12px !important;
  text-align: center !important;
  color: rgba(235, 235, 245, 0.4) !important;
  font-size: 13px !important;
}
.bugs-item {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.bugs-item-top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.bugs-status-pill {
  font-size: 10.5px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  background: rgba(255, 159, 10, 0.15) !important;
  color: #ffc266 !important;
}
.bugs-item.status-in_progress .bugs-status-pill {
  background: rgba(10, 132, 255, 0.15) !important;
  color: #64d2ff !important;
}
.bugs-item.status-fixed .bugs-status-pill,
.bugs-item.status-closed .bugs-status-pill {
  background: rgba(48, 209, 88, 0.14) !important;
  color: #30d158 !important;
}
.bugs-when, .bugs-user {
  font-size: 11.5px !important;
  color: rgba(235, 235, 245, 0.42) !important;
}
.bugs-item-title {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: #f5f5f7 !important;
}
.bugs-item-body {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(235, 235, 245, 0.7) !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.bugs-thumb {
  display: inline-block !important;
  margin-top: 10px !important;
}
.bugs-thumb img {
  max-width: min(100%, 280px) !important;
  max-height: 180px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.bugs-admin-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
  align-items: center !important;
}
.bugs-admin-tools .ti {
  min-height: 32px !important;
  font-size: 12px !important;
}
.bugs-admin-note { flex: 1 1 160px !important; min-width: 120px !important; }
.bugs-reply {
  margin-top: 10px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(10, 132, 255, 0.1) !important;
  font-size: 12.5px !important;
  color: rgba(235, 235, 245, 0.8) !important;
}
html[data-theme="light"] .bugs-root { background: #f2f2f7 !important; }
html[data-theme="light"] .bugs-title,
html[data-theme="light"] .bugs-card-title,
html[data-theme="light"] .bugs-item-title { color: #1c1c1e !important; }
html[data-theme="light"] .bugs-form-card,
html[data-theme="light"] .bugs-list-card,
html[data-theme="light"] .bugs-item {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .bugs-item-body,
html[data-theme="light"] .bugs-sub { color: #6c6c70 !important; }

/* Compact theme switch — matches lang row height, no huge icons */
.side-theme-toggle {
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: calc(100% - 20px) !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 10px 8px !important;
  padding: 0 8px 0 6px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(245, 245, 247, 0.75) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.side-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.side-theme-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 52px !important;
  height: 24px !important;
  padding: 2px !important;
  border-radius: 99px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.side-theme-opt {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0.4 !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.side-theme-toggle.is-light .side-theme-opt-sun,
.side-theme-toggle.is-dark .side-theme-opt-moon {
  opacity: 1 !important;
  color: #1c1c1e !important;
}
.side-theme-knob {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: calc(50% - 2px) !important;
  height: calc(100% - 4px) !important;
  border-radius: 99px !important;
  background: #f5f5f7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  z-index: 0 !important;
}
.side-theme-toggle.is-dark .side-theme-knob {
  transform: translateX(100%) !important;
}
.side-theme-toggle.is-light .side-theme-knob {
  transform: translateX(0) !important;
}
.side-theme-lbl {
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  color: rgba(245, 245, 247, 0.55) !important;
  min-width: 2.4em !important;
  text-align: right !important;
}
#app.sidebar-collapsed .side-theme-toggle {
  width: 40px !important;
  height: 32px !important;
  margin: 4px auto 8px !important;
  padding: 0 !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
}
#app.sidebar-collapsed .side-theme-lbl {
  display: none !important;
}
#app.sidebar-collapsed .side-theme-track {
  width: 40px !important;
  height: 22px !important;
}
html[data-theme="light"] .side-theme-toggle {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #3a3a3c !important;
}
html[data-theme="light"] .side-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .side-theme-track {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .side-theme-knob {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .side-theme-opt {
  color: rgba(60, 60, 67, 0.45) !important;
}
html[data-theme="light"] .side-theme-toggle.is-light .side-theme-opt-sun,
html[data-theme="light"] .side-theme-toggle.is-dark .side-theme-opt-moon {
  color: #1c1c1e !important;
}
html[data-theme="light"] .side-theme-lbl {
  color: rgba(60, 60, 67, 0.55) !important;
}

.lang-dd {
  position: relative !important;
  margin: 6px 10px 4px !important;
  z-index: 20 !important;
}
.lang-dd-trigger {
  appearance: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.12s, border-color 0.12s !important;
}
.lang-dd-trigger:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.lang-dd.is-open .lang-dd-trigger {
  border-color: rgba(0, 113, 227, 0.45) !important;
  background: rgba(0, 113, 227, 0.12) !important;
}
.lang-dd-flag { font-size: 16px !important; line-height: 1 !important; }
.lang-dd-code {
  flex: 1 1 auto !important;
  text-align: left !important;
  letter-spacing: 0.04em !important;
}
.lang-dd-chev {
  font-size: 18px !important;
  opacity: 0.55 !important;
  transition: transform 0.15s ease !important;
}
.lang-dd.is-open .lang-dd-chev { transform: rotate(180deg) !important; }

.lang-dd-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(100% + 6px) !important; /* open upward above Telegram */
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(28, 28, 30, 0.96) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  z-index: 40 !important;
}
.lang-dd-menu[hidden] { display: none !important; }

.lang-dd-item {
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.88) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
}
.lang-dd-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.lang-dd-item.active {
  background: rgba(0, 113, 227, 0.22) !important;
  color: #fff !important;
}
.lang-dd-item .lang-flag { font-size: 16px !important; }
.lang-dd-item .lang-code { letter-spacing: 0 !important; }

/* Collapsed sidebar: icon-only trigger */
#app.sidebar-collapsed .lang-dd {
  margin: 6px 4px 4px !important;
}
#app.sidebar-collapsed .lang-dd-trigger {
  justify-content: center !important;
  padding: 0 !important;
  min-width: 36px !important;
}
#app.sidebar-collapsed .lang-dd-code,
#app.sidebar-collapsed .lang-dd-chev {
  display: none !important;
}
#app.sidebar-collapsed .lang-dd-menu {
  left: calc(100% + 8px) !important;
  right: auto !important;
  bottom: 0 !important;
  min-width: 160px !important;
  width: max-content !important;
}

html[data-theme="light"] .lang-dd-trigger {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .lang-dd-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .lang-dd-item {
  color: #1c1c1e !important;
}
html[data-theme="light"] .lang-dd-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .lang-dd-item.active {
  background: rgba(0, 113, 227, 0.12) !important;
  color: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLEET CARDS — clean layout (no full-width CTA bar / noisy empty shots)
   ═══════════════════════════════════════════════════════════════════════════ */
body:not(.fleet-shots-on) .dc-shot-preview,
body:not(.fleet-shots-on) .fleet-row-shot-wrap,
body:not(.fleet-shots-on) .fleet-row-shot {
  display: none !important;
}
.dev-grid.view-list.no-shots .fleet-row-shot-wrap {
  display: none !important;
}

/* Hide legacy full-width "Go to device" bar on cards */
.dc .dc-actions,
.dc .dc-actions-simple,
.dc .qa-bar.dc-actions-simple {
  display: none !important;
}

.dc {
  cursor: pointer !important;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
}
.dc:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 113, 227, 0.35) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
}
.dc:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.4) !important;
}
.dc-open-chev {
  flex-shrink: 0 !important;
  margin-left: 4px !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: rgba(245, 245, 247, 0.35) !important;
  transition: color 0.12s, transform 0.12s !important;
}
.dc:hover .dc-open-chev {
  color: #64d2ff !important;
  transform: translateX(2px) !important;
}
.dc-head {
  align-items: center !important;
}
.dc-shot-preview.is-empty .fleet-shot-ph-hint,
.fleet-row-shot.is-empty .fleet-shot-ph-hint {
  display: none !important;
}
.dc-shot-preview.is-empty .dc-shot-ph,
.fleet-row-shot.is-empty .fleet-row-shot-ph {
  min-height: 48px !important;
  opacity: 0.55 !important;
}

/* ── View onboarding modal ─────────────────────────────────────────────── */
.view-onboard {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.view-onboard.is-open {
  display: flex !important;
}
.view-onboard-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) !important;
}
.view-onboard-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(520px, 100%) !important;
  padding: 28px 24px 20px !important;
  border-radius: 22px !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5) !important;
  color: #f5f5f7 !important;
}
.view-onboard-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64d2ff !important;
  margin-bottom: 8px !important;
}
.view-onboard-title {
  margin: 0 0 8px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}
.view-onboard-sub {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(245, 245, 247, 0.55) !important;
}
.view-onboard-choices {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.view-onboard-choice {
  appearance: none !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: border-color 0.12s, background 0.12s, transform 0.1s !important;
}
.view-onboard-choice:hover {
  border-color: rgba(0, 113, 227, 0.45) !important;
  background: rgba(0, 113, 227, 0.1) !important;
  transform: translateY(-1px) !important;
}
.view-onboard-choice.is-recommended {
  border-color: rgba(0, 113, 227, 0.4) !important;
  background: rgba(0, 113, 227, 0.08) !important;
}
.view-onboard-badge {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #64d2ff !important;
  background: rgba(0, 113, 227, 0.2) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
}
.view-onboard-ico {
  grid-row: 1 / span 2 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}
.view-onboard-name {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.view-onboard-desc {
  font-size: 12px !important;
  color: rgba(245, 245, 247, 0.5) !important;
  line-height: 1.35 !important;
  padding-right: 72px !important;
}
.view-onboard-skip {
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 12px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(245, 245, 247, 0.45) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.view-onboard-skip:hover { color: #f5f5f7 !important; }

html[data-theme="light"] .view-onboard-card {
  background: #fff !important;
  color: #1c1c1e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .view-onboard-sub,
html[data-theme="light"] .view-onboard-desc {
  color: #6c6c70 !important;
}
html[data-theme="light"] .view-onboard-choice {
  background: #f2f2f7 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .view-onboard-ico {
  background: #fff !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .dc-open-chev {
  color: rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="light"] .dc:hover .dc-open-chev {
  color: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN pane header — Start / No-Dialog / Stop next to "Screen" title
   ═══════════════════════════════════════════════════════════════════════════ */
.screen-pane-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 5px 8px 5px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  z-index: 5 !important;
  min-height: 34px !important;
}
.screen-pane-header-title,
.screen-pane-header .dual-pane-label {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.55) !important;
  flex-shrink: 0 !important;
}
/* Hide legacy lone dual-pane-label if any remains inside tabVideo */
#tabVideo > .dual-pane-label:not(.screen-pane-header-title) {
  display: none !important;
}

.screen-stream-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.screen-stream-ctrl .screen-ctrl-btn,
.screen-stream-ctrl .vhud-btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.screen-stream-ctrl .vhud-btn .mi,
.screen-stream-ctrl .vhud-btn svg.ico,
.screen-stream-ctrl .vhud-btn svg.mi {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
}
.screen-stream-ctrl .vhud-lbl {
  font-size: 10px !important;
  -webkit-text-fill-color: inherit !important;
}
/* Beat the global .vhud-btn.go accent/white fill so Start matches No-dialog */
.screen-stream-ctrl .vhud-btn.go,
.screen-stream-ctrl [data-vaction="start"],
.screen-stream-ctrl [data-vaction="nodialog"] {
  color: #30d158 !important;
  -webkit-text-fill-color: #30d158 !important;
  border-color: rgba(48, 209, 88, 0.45) !important;
  background: rgba(48, 209, 88, 0.14) !important;
}
.screen-stream-ctrl .vhud-btn.stop,
.screen-stream-ctrl [data-vaction="stop"] {
  color: #ff453a !important;
  -webkit-text-fill-color: #ff453a !important;
  border-color: rgba(255, 69, 58, 0.45) !important;
  background: rgba(255, 69, 58, 0.14) !important;
}

/* When HUD is collapsed, no second essential row (controls live in header) */
.video-hud .video-hud-essential,
.video-hud [data-video-hud-essential] {
  display: none !important;
}

/* All-panel video header: controls beside title */
#allPanelVideo .all-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
#allPanelVideo .all-panel-header .screen-stream-ctrl {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
}

html[data-theme="light"] .screen-pane-header {
  background: rgba(0, 0, 0, 0.04) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .screen-pane-header-title,
html[data-theme="light"] .screen-pane-header .dual-pane-label {
  color: rgba(0, 0, 0, 0.45) !important;
}

@media (max-width: 900px) {
  .screen-stream-ctrl .vhud-lbl {
    /* keep short labels; still readable */
  }
}
@media (max-width: 520px) {
  .screen-stream-ctrl .vhud-lbl {
    display: none !important; /* icon-only on very narrow */
  }
  .screen-stream-ctrl .screen-ctrl-btn {
    padding: 0 6px !important;
    min-width: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE POPUP — body-level, animated, above live-chat FAB
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-dd {
  position: relative !important;
  margin: 6px 10px 4px !important;
  z-index: 5 !important; /* only trigger; menu is body popup */
}
.lang-dd-trigger {
  appearance: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, transform 0.12s !important;
}
.lang-dd-trigger:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.lang-dd.is-open .lang-dd-trigger {
  border-color: rgba(0, 113, 227, 0.5) !important;
  background: rgba(0, 113, 227, 0.16) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}
#app.sidebar-collapsed .lang-dd {
  margin: 6px 4px !important;
}
#app.sidebar-collapsed .lang-dd-trigger {
  justify-content: center !important;
  padding: 0 !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
}
#app.sidebar-collapsed .lang-dd-code,
#app.sidebar-collapsed .lang-dd-chev {
  display: none !important;
}
#app.sidebar-collapsed .lang-dd-flag {
  font-size: 20px !important;
}

/* Popup shell — always on top of chat (z-index >> lc-fab) */
.lang-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20050 !important; /* livechat ~9000–10000 */
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.lang-popup.is-open {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.lang-popup[hidden]:not(.is-open) {
  display: none !important;
}
.lang-popup-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}
.lang-popup-panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 18px 16px 14px !important;
  border-radius: 22px !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55) !important;
  color: #f5f5f7 !important;
  transform: translateY(16px) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.2s ease !important;
}
.lang-popup.is-open .lang-popup-panel {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}
.lang-popup-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.lang-popup-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64d2ff !important;
  margin-bottom: 4px !important;
}
.lang-popup-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.lang-popup-x {
  appearance: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.lang-popup-x:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.lang-popup-grid {
  /* 2 columns × 4 rows = all 8 languages visible, no scroll */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  overflow: visible !important;
  max-height: none !important;
}
.lang-popup-item {
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f5f5f7 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.12s, border-color 0.12s, transform 0.1s !important;
  box-sizing: border-box !important;
}
@media (max-width: 380px) {
  .lang-popup-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .lang-popup-item {
    min-height: 44px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }
  .lang-popup-flag { font-size: 22px !important; width: 28px !important; }
  .lang-popup-name { font-size: 13px !important; }
  .lang-popup-native { font-size: 11px !important; }
}
.lang-popup-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px) !important;
}
.lang-popup-item.active {
  background: rgba(0, 113, 227, 0.18) !important;
  border-color: rgba(0, 113, 227, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.2) !important;
}
.lang-popup-flag {
  font-size: 26px !important;
  line-height: 1 !important;
  width: 36px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.lang-popup-meta {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.lang-popup-name {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.lang-popup-native {
  font-size: 12px !important;
  color: rgba(245, 245, 247, 0.45) !important;
  font-weight: 600 !important;
}
.lang-popup-check {
  opacity: 0 !important;
  color: #30d158 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  transition: opacity 0.12s !important;
}
.lang-popup-item.active .lang-popup-check {
  opacity: 1 !important;
}

/* Dim live-chat while language picker is open */
body.lang-popup-open .lc-fab,
body.lang-popup-open .live-chat-widget {
  pointer-events: none !important;
  opacity: 0.25 !important;
  filter: grayscale(0.3) !important;
}

html[data-theme="light"] .lang-popup-panel {
  background: #fff !important;
  color: #1c1c1e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .lang-popup-item {
  background: #f2f2f7 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .lang-popup-item.active {
  background: rgba(0, 113, 227, 0.1) !important;
  border-color: rgba(0, 113, 227, 0.35) !important;
}
html[data-theme="light"] .lang-popup-native {
  color: #8e8e93 !important;
}
html[data-theme="light"] .lang-dd-trigger {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1c1c1e !important;
}

.lang-dd-menu, #langDdMenu { display: none !important; }

/* Tag manage modal */
.tag-manage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20040 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.tag-manage.is-open { display: flex !important; }
.tag-manage-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(8px) !important;
}
.tag-manage-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(440px, 100%) !important;
  max-height: min(80vh, 560px) !important;
  overflow: auto !important;
  padding: 22px 20px 16px !important;
  border-radius: 20px !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5) !important;
  color: #f5f5f7 !important;
}
.tag-manage-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #64d2ff !important;
}
.tag-manage-title {
  margin: 4px 0 6px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.tag-manage-sub {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(245,245,247,.5) !important;
}
.tag-manage-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.tag-manage-x {
  appearance: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.06) !important;
  color: #f5f5f7 !important;
  cursor: pointer !important;
  font-size: 18px !important;
}
.tag-manage-add {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.tag-manage-input {
  flex: 1 !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.35) !important;
  color: #f5f5f7 !important;
  font-size: 14px !important;
}
.tag-manage-add-btn {
  appearance: none !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #0071e3 !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.tag-manage-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 280px !important;
  overflow: auto !important;
}
.tag-manage-empty {
  padding: 16px !important;
  text-align: center !important;
  color: rgba(245,245,247,.4) !important;
  font-size: 13px !important;
}
.tag-manage-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;
  min-width: 0 !important;
}
.tag-manage-row.is-on {
  background: rgba(0,113,227,.14) !important;
}
.tag-manage-check {
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
.tag-manage-cb {
  width: 16px !important;
  height: 16px !important;
  accent-color: #0a84ff !important;
  cursor: pointer !important;
}
.tag-manage-filter {
  appearance: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #f5f5f7 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.tag-manage-n {
  font-size: 11px !important;
  opacity: .55 !important;
  flex-shrink: 0 !important;
  min-width: 1.25em !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
.tag-manage-del {
  appearance: none !important;
  flex-shrink: 0 !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,69,58,.35) !important;
  background: rgba(255,69,58,.12) !important;
  color: #ff453a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.tag-manage-del:hover {
  background: #ff453a !important;
  color: #fff !important;
}
.tag-manage-bulk {
  margin-top: 10px !important;
}
.tag-manage-bulk-del {
  appearance: none !important;
  width: 100% !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,69,58,.4) !important;
  background: rgba(255,69,58,.15) !important;
  color: #ff453a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
.tag-manage-done {
  appearance: none !important;
  width: 100% !important;
  margin-top: 14px !important;
  min-height: 40px !important;
  border: none !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.08) !important;
  color: #f5f5f7 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.tag-filter-empty {
  font-size: 11px !important;
  color: rgba(245,245,247,.4) !important;
  white-space: nowrap !important;
  padding: 0 6px !important;
}

/* Larger hit target for × */
.tag-chip-remove {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  top: -6px !important;
  right: -6px !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}
.tag-chip-wrap {
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW ONBOARD — visual layout previews (cards / list / table)
   ═══════════════════════════════════════════════════════════════════════════ */
.view-onboard-card {
  width: min(640px, 100%) !important;
  max-height: min(90vh, 720px) !important;
  overflow: auto !important;
}
.view-onboard-choices {
  gap: 12px !important;
}
.view-onboard-choice {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 6px !important;
  padding: 14px 14px 12px !important;
  text-align: left !important;
}
.view-onboard-choice .view-onboard-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding-right: 90px !important;
}
.view-onboard-choice .view-onboard-desc {
  font-size: 12px !important;
  color: rgba(245, 245, 247, 0.5) !important;
  padding-right: 8px !important;
  margin-bottom: 4px !important;
}
.view-onboard-ico { display: none !important; } /* previews replace icons */

/* Preview canvas */
.view-preview {
  width: 100% !important;
  min-height: 88px !important;
  border-radius: 12px !important;
  padding: 10px !important;
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}
.view-onboard-choice:hover .view-preview,
.view-onboard-choice.is-recommended .view-preview {
  border-color: rgba(0, 113, 227, 0.35) !important;
}

/* Cards preview — 2×2 tiles */
.view-preview-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.vp-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  min-height: 44px !important;
}
.vp-av {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #0071e3, #64d2ff) !important;
  flex-shrink: 0 !important;
}
.vp-av.sm {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
}
.vp-lines {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.vp-lines i {
  display: block !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(245, 245, 247, 0.22) !important;
}
.vp-lines i:first-child { width: 72% !important; background: rgba(245, 245, 247, 0.4) !important; }
.vp-lines i:last-child { width: 48% !important; }
.vp-lines.flat { gap: 3px !important; }
.vp-lines.flat i { height: 5px !important; }
.vp-pill {
  width: 36px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: rgba(142, 142, 147, 0.35) !important;
  flex-shrink: 0 !important;
}
.vp-pill.on {
  background: rgba(48, 209, 88, 0.55) !important;
  box-shadow: 0 0 8px rgba(48, 209, 88, 0.35) !important;
}
.vp-pill.sm { width: 28px !important; height: 12px !important; }

/* List preview — stacked rows */
.view-preview-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.vp-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Table preview */
.view-preview-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px !important;
}
.vp-thead, .vp-trow {
  display: grid !important;
  grid-template-columns: 1.4fr 1.2fr 0.7fr 0.8fr !important;
  gap: 6px !important;
  align-items: center !important;
}
.vp-thead span {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(100, 210, 255, 0.35) !important;
}
.vp-trow span {
  height: 8px !important;
  border-radius: 3px !important;
  background: rgba(245, 245, 247, 0.14) !important;
}
.vp-trow span:first-child { background: rgba(245, 245, 247, 0.28) !important; width: 90% !important; }
.vp-trow span.on {
  background: rgba(48, 209, 88, 0.5) !important;
  border-radius: 999px !important;
  height: 10px !important;
  width: 70% !important;
  justify-self: start !important;
}

.view-onboard-choice:hover {
  transform: translateY(-2px) !important;
}
.view-onboard-choice:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.45) !important;
}

html[data-theme="light"] .view-preview {
  background: #f2f2f7 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .vp-card,
html[data-theme="light"] .vp-row {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .vp-lines i {
  background: rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .vp-lines i:first-child {
  background: rgba(0, 0, 0, 0.22) !important;
}
html[data-theme="light"] .view-onboard-choice .view-onboard-desc {
  color: #6c6c70 !important;
}

/* Login must receive clicks when visible */
#loginOverlay:not(.hidden):not([hidden]) {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10000 !important;
}
body:not(.app-entered) #loginOverlay {
  display: flex !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN — more compact (trial-already + forms)
   ═══════════════════════════════════════════════════════════════════════════ */
#loginOverlay .login-box,
#loginOverlay .login-box.login-comfortable {
  width: min(100%, 340px) !important;
  max-width: 340px !important;
  padding: 14px 14px 12px !important;
  gap: 8px !important;
  border-radius: 18px !important;
}
#loginOverlay .login-ghost,
#loginOverlay .login-logo {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto !important;
}
#loginOverlay .login-title {
  font-size: 20px !important;
  line-height: 1.15 !important;
}
#loginOverlay .login-tagline,
#loginOverlay .login-sub {
  font-size: 11px !important;
  line-height: 1.3 !important;
  max-width: 34ch !important;
  margin: 2px auto 0 !important;
}
#loginOverlay .login-section-title {
  font-size: 10px !important;
  margin: 0 !important;
  letter-spacing: 0.05em !important;
}
#loginOverlay .login-trial-block,
#loginOverlay .login-section {
  gap: 6px !important;
}
#loginOverlay .login-captcha-input,
#loginOverlay .login-invite-input,
#loginOverlay .login-register-btn,
#loginOverlay .login-trial-cta {
  min-height: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
}
#loginOverlay .login-trial-cta {
  min-height: 38px !important;
  height: 38px !important;
  font-size: 13.5px !important;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.22) !important;
}
#loginOverlay .login-captcha-label {
  font-size: 13px !important;
  min-width: 3.5rem !important;
  padding: 0 6px !important;
}
#loginOverlay .login-trial-hint {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#loginOverlay .login-divider {
  margin: 0 !important;
  font-size: 10px !important;
  opacity: 0.7 !important;
}
#loginOverlay .login-cred-row {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  gap: 6px !important;
}
#loginOverlay .login-cred-row code {
  font-size: 12px !important;
}
#loginOverlay .login-success-panel {
  gap: 6px !important;
  padding: 0 !important;
}
#loginOverlay .login-success-panel .login-register-btn,
#loginOverlay .login-success-panel .login-trial-cta {
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12.5px !important;
}
#loginOverlay .login-contacts {
  gap: 6px !important;
  margin-top: 2px !important;
}
#loginOverlay .login-contact-btn {
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 980px !important;
}

/* Already-tried: even tighter success card */
#loginOverlay .login-box.mode-already .login-success-panel .login-section-title {
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: #ff9f0a !important;
  font-weight: 700 !important;
}
#loginOverlay .login-box.mode-already #trialApkStatus {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin: 0 0 2px !important;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#loginOverlay .login-box.mode-already #trialDownloadApk,
#loginOverlay .login-box.mode-already #trialSaveCredsHint {
  display: none !important;
}
#loginOverlay .login-box.mode-already .login-section {
  gap: 6px !important;
  margin-top: 2px !important;
}

/* Login chrome — keep fixed chip height (do not shrink/expand and break alignment) */
#loginOverlay .login-chrome {
  gap: 6px !important;
  padding: 6px 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  align-items: center !important;
}
#loginOverlay .login-chrome .lang-btn:focus-visible {
  outline: 2px solid rgba(41, 151, 255, 0.95) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28) !important;
}
#loginOverlay .login-chrome .lang-btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  min-width: 52px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}
#loginOverlay .login-chrome .login-theme-toggle {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  align-items: center !important;
}

@media (max-height: 700px) {
  #loginOverlay .login-box,
  #loginOverlay .login-box.login-comfortable {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  #loginOverlay .login-ghost,
  #loginOverlay .login-logo {
    width: 36px !important;
    height: 36px !important;
  }
  #loginOverlay .login-title { font-size: 18px !important; }
  #loginOverlay .login-tagline { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAGS — full-width row under toolbar (left), reliable × delete hit target
   ═══════════════════════════════════════════════════════════════════════════ */
.tag-filter-bar.tag-filter-row,
#tagFilterBar.tag-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 12px 8px !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.2) !important;
  overflow: visible !important;
  flex: none !important;
}
.tag-filter-bar.tag-filter-row.hidden,
#tagFilterBar.tag-filter-row.hidden {
  display: none !important;
}
.tag-filter-row .tag-filter-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.45) !important;
  margin: 0 !important;
}
.tag-filter-row .tag-filter-label-text {
  font-size: 11px !important;
}
.tag-filter-row .tag-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 4px 2px !important;
}
.tag-filter-row .tag-filter-actions {
  display: inline-flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.tag-filter-row .tag-chip-wrap {
  position: relative !important;
  overflow: visible !important;
  margin: 2px 4px 2px 0 !important;
  padding-right: 2px !important;
}
/* Bigger, easier × — sits on the chip, always clickable */
.tag-filter-row .tag-chip-remove,
#tagFilterBar .tag-chip-remove {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  z-index: 20 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  background: #2c2c2e !important;
  border: 1px solid rgba(255, 69, 58, 0.7) !important;
  color: #ff453a !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}
.tag-filter-row .tag-chip-remove:hover,
#tagFilterBar .tag-chip-remove:hover {
  background: #ff453a !important;
  color: #fff !important;
}
.tag-filter-row .tag-chip {
  padding: 5px 16px 5px 10px !important;
  min-height: 28px !important;
}
/* Don't clip × in compact toolbar legacy rules */
.tag-filter-bar.tag-filter-inline {
  overflow: visible !important;
}
.tag-filter-bar.tag-filter-inline .tag-filter-chips {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: none !important;
  padding-top: 6px !important;
}

/* ── Ask-mode compact toolbar: final lock ───────────────────────────────── */
.fleet-header { display: none !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.fleet-toolbar.fleet-toolbar-compact {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  padding: 6px 10px !important;
}
.fleet-toolbar-compact .fleet-filter-btn,
.fleet-toolbar-compact .sm-btn,
.fleet-toolbar-compact .fleet-btn,
.fleet-toolbar-compact .sel,
.fleet-toolbar-compact select,
.fleet-toolbar-compact .view-mode-btn {
  min-height: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}
/* Tags always under toolbar, full width, left — never a right-side orphan */
#tagFilterBar.tag-filter-row {
  display: flex !important;
  width: 100% !important;
  order: 0 !important;
  clear: both !important;
  justify-content: flex-start !important;
}
#viewList .list-toolbar + #tagFilterBar,
#viewList .fleet-toolbar + #tagFilterBar {
  display: flex !important;
}
#tagFilterBar.tag-filter-row.hidden {
  display: none !important;
}
/* Agent reopen always visible when bar hidden */
#demoApkBar.is-hidden,
#demoApkBar[hidden] {
  display: none !important;
}
#demoApkBar.is-hidden ~ #demoApkReopenBtn,
#demoApkBar[hidden] ~ .fleet-toolbar-compact #demoApkReopenBtn,
.fleet-toolbar-compact #demoApkReopenBtn:not(.hidden) {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR — no logo/Telegram overlap on resize
   Single flex row: Brand | Fleet stats (shrink) | … | Right cluster (never crushed)
   ═══════════════════════════════════════════════════════════════════════════ */
header.topbar,
.topbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 10px 0 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

/* Kill absolute / centered brand that slides over right controls */
.topbar-brand,
#topbarBrand {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  inset: auto !important;
  order: 1 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 2 !important;
  grid-column: auto !important;
}
.topbar-title {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.topbar-logo,
.topbar-ghost {
  flex-shrink: 0 !important;
}

/* Fleet pill sits after brand and may shrink/ellipsis — never push into right */
.topbar-fleet-stats,
#topbarFleetStats {
  order: 2 !important;
  flex: 0 1 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 4px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  z-index: 1 !important;
  grid-column: auto !important;
}

/* Middle: device chip / notif / nav — take leftover space, clip */
#topbarDeviceChip.topbar-device-chip {
  order: 3 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: min(280px, 48vw) !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
#notifCenter.notif-center {
  order: 4 !important;
  flex: 0 1 auto !important;
  min-width: min(200px, 40vw) !important;
  max-width: min(560px, 58vw) !important;
  overflow: visible !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 8px 14px 8px 12px !important;
  line-height: 1.35 !important;
  align-items: flex-start !important;
  z-index: 50 !important;
}
#notifCenter .notif-text {
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-overflow: unset !important;
  overflow: visible !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--text, #f5f5f7) !important;
}
html[data-theme="light"] #notifCenter .notif-text,
body.theme-light #notifCenter .notif-text {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
#notifCenter .notif-icon {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
#notifCenter .notif-dismiss {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}
.topbar-nav,
#topbarNav.topbar-nav {
  order: 5 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  height: 40px !important;
  z-index: 1 !important;
  grid-column: auto !important;
}

/* Right cluster — always on top, never shrink under logo */
.topbar-right {
  order: 20 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-left: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  z-index: 5 !important;
  position: relative !important;
  grid-column: auto !important;
  overflow: visible !important;
}
.topbar-tg,
.topbar-purchase-btn,
#topbarPurchaseBtn,
.trial-actions,
#trialActions {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 6 !important;
}
.topbar-right .search,
#searchInput {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: min(160px, 18vw) !important;
}

/* Progressive hide on narrow widths so Telegram + brand never collide */
@media (max-width: 1280px) {
  .topbar-fleet-stats .tbf-age { display: none !important; }
  .topbar-right #deviceCount,
  .topbar-right .dev-count { display: none !important; }
}
@media (max-width: 1100px) {
  .topbar-fleet-stats {
    max-width: none !important;
    min-width: max-content !important;
  }
  /* Drop only the word "devices" — keep Online + Offline counts fully visible */
  .topbar-fleet-stats .tbf-total-lbl { display: none !important; }
  .topbar-tg-label { display: none !important; }
  .topbar-tg {
    min-width: 36px !important;
    padding: 0 10px !important;
    justify-content: center !important;
  }
}
@media (max-width: 960px) {
  .topbar-fleet-stats {
    display: none !important; /* free space — count still in sidebar badge */
  }
  .topbar-title { display: none !important; } /* logo only */
  .topbar-right .search,
  #searchInput {
    max-width: 120px !important;
  }
}
@media (max-width: 720px) {
  .topbar-nav { display: none !important; } /* use sidebar / overflow */
  #trialActions #trialCountdown {
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-right .search,
  #searchInput { display: none !important; }
}
@media (max-width: 560px) {
  .topbar-purchase-btn span,
  #topbarPurchaseBtn span { display: none !important; }
  #topbarPurchaseBtn {
    min-width: 40px !important;
    padding: 0 10px !important;
  }
}

/* Device view: keep right cluster free of brand overlap */
body.device-view-active header.topbar,
body.device-view-active .topbar {
  display: flex !important;
  grid-template-columns: none !important;
}
body.device-view-active .topbar-brand {
  grid-column: auto !important;
  flex: 0 0 auto !important;
}
body.device-view-active .topbar-right {
  grid-column: auto !important;
  margin-left: auto !important;
  z-index: 5 !important;
}
body.device-view-active .topbar-fleet-stats {
  display: none !important;
}

/* ── Login SEO (h1 + crawl footer) ────────────────────────────────────────── */
#loginOverlay h1.login-title,
.login-box h1.login-title {
  margin: 0 !important;
  /* Match prior .login-title pill brand look — do not reset size to tiny browser default */
  display: block !important;
}
.login-seo-sub {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: rgba(245, 245, 247, 0.45) !important;
  text-align: center !important;
  line-height: 1.3 !important;
}
html[data-theme="light"] .login-seo-sub,
body.theme-light .login-seo-sub {
  color: rgba(60, 60, 67, 0.55) !important;
}
.login-seo-footer {
  width: 100% !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
}
.login-seo-footer p {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: rgba(245, 245, 247, 0.48) !important;
  font-weight: 500 !important;
}
.login-seo-footer p:last-child { margin-bottom: 0 !important; }
.login-seo-footer a {
  color: rgba(100, 210, 255, 0.85) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.login-seo-footer a:hover {
  text-decoration: underline !important;
  color: #64d2ff !important;
}
html[data-theme="light"] .login-seo-footer {
  border-top-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .login-seo-footer p {
  color: rgba(60, 60, 67, 0.62) !important;
}
html[data-theme="light"] .login-seo-footer a {
  color: #0071e3 !important;
}
.login-seo-noscript {
  max-width: 420px;
  margin: 24px auto;
  padding: 16px;
  color: #f5f5f7;
  font-family: system-ui, sans-serif;
}
.login-seo-links {
  font-size: 10.5px !important;
  letter-spacing: 0.01em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE WATERMARK — ONE stamp that drifts across the page (not a tile grid)
   Never blocks clicks (pointer-events: none).
   ═══════════════════════════════════════════════════════════════════════════ */
#siteWatermark.site-wm,
.site-wm {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 50 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  opacity: 1 !important;
}
#siteWatermark.site-wm *,
.site-wm * {
  pointer-events: none !important;
}
/* Single moving watermark */
.site-wm-drift {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
  animation: siteWmDrift 48s ease-in-out infinite alternate !important;
}
.site-wm-stamp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.22) !important;
  background: rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18) !important;
  transform: rotate(-18deg) !important;
  pointer-events: none !important;
}
.site-wm-stamp-tg {
  color: rgba(100, 210, 255, 0.38) !important;
  font-weight: 800 !important;
}
.site-wm-stamp-sep {
  color: rgba(255, 255, 255, 0.18) !important;
  font-weight: 500 !important;
}
.site-wm-stamp-web {
  color: rgba(245, 245, 247, 0.28) !important;
  font-weight: 800 !important;
}

/* Slow diagonal drift — one stamp covers the whole viewport over time */
@keyframes siteWmDrift {
  0%   { transform: translate(6vw, 12vh); }
  20%  { transform: translate(62vw, 28vh); }
  40%  { transform: translate(38vw, 68vh); }
  60%  { transform: translate(72vw, 48vh); }
  80%  { transform: translate(18vw, 72vh); }
  100% { transform: translate(48vw, 18vh); }
}

/* Light theme */
html[data-theme="light"] .site-wm-stamp,
body.theme-light .site-wm-stamp {
  color: rgba(28, 28, 30, 0.28) !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .site-wm-stamp-tg,
body.theme-light .site-wm-stamp-tg {
  color: rgba(0, 113, 227, 0.40) !important;
}
html[data-theme="light"] .site-wm-stamp-web,
body.theme-light .site-wm-stamp-web {
  color: rgba(28, 28, 30, 0.32) !important;
}
html[data-theme="light"] .site-wm-stamp-sep,
body.theme-light .site-wm-stamp-sep {
  color: rgba(60, 60, 67, 0.22) !important;
}

@media (max-width: 520px) {
  .site-wm-stamp {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-wm-drift {
    animation: none !important;
    left: 50% !important;
    top: 42% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME FIXES (2026-08-09) — login, fleet tags, live chat, chips
   Loaded last so !important dark rules from ios-panel are overridden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Login chrome separator between langs and theme */
.login-lang-sep,
.login-chrome .login-lang-sep {
  display: inline-block !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 16px !important;
  margin: 0 4px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.18) !important;
  flex: 0 0 1px !important;
  align-self: center !important;
  border: none !important;
  vertical-align: middle !important;
}
html[data-theme="light"] .login-lang-sep,
html[data-theme="light"] .login-chrome .login-lang-sep {
  background: rgba(60, 60, 67, 0.18) !important;
}

/* Login box — full light surfaces (overrides ios-panel dark !important) */
html[data-theme="light"] .login-overlay {
  background: #f2f2f7 !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 113, 227, 0.10), transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 90%, rgba(94, 92, 230, 0.05), transparent 50%) !important;
}
html[data-theme="light"] .login-box,
html[data-theme="light"] #loginBox {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0.5px solid rgba(60, 60, 67, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 50px rgba(0, 0, 0, 0.08) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .login-title,
html[data-theme="light"] .login-brand .login-title {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: none !important;
}
html[data-theme="light"] .login-tagline,
html[data-theme="light"] .login-sub,
html[data-theme="light"] .login-trial-hint,
html[data-theme="light"] .login-section-title {
  color: #636366 !important;
  -webkit-text-fill-color: #636366 !important;
}
html[data-theme="light"] .login-divider {
  color: #8e8e93 !important;
}
html[data-theme="light"] .login-divider::before,
html[data-theme="light"] .login-divider::after {
  background: rgba(60, 60, 67, 0.18) !important;
}
html[data-theme="light"] .login-invite-input,
html[data-theme="light"] .login-captcha-input,
html[data-theme="light"] .login-box input,
html[data-theme="light"] #loginOverlay input {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  border: 1px solid transparent !important;
}
html[data-theme="light"] .login-invite-input::placeholder,
html[data-theme="light"] .login-box input::placeholder {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
}
html[data-theme="light"] .login-invite-input:focus,
html[data-theme="light"] .login-captcha-input:focus,
html[data-theme="light"] .login-box input:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28) !important;
  border-color: rgba(0, 113, 227, 0.35) !important;
}
html[data-theme="light"] .login-captcha-label {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .login-contact-btn {
  background: rgba(120, 120, 128, 0.10) !important;
  color: #1c1c1e !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .login-cred-row {
  background: #f2f2f7 !important;
  border: 1px solid rgba(60, 60, 67, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .login-success-panel .login-cred-row > span {
  color: #636366 !important;
}
html[data-theme="light"] .login-cred-row code {
  color: #0071e3 !important;
}
html[data-theme="light"] #trialPassOut {
  color: #248a3d !important;
}
html[data-theme="light"] .login-success-panel .login-register-btn[style*="rgba(255"] {
  background: rgba(120, 120, 128, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .login-error {
  color: #d70015 !important;
}

/* Fleet tags strip */
html[data-theme="light"] .tag-filter-bar.tag-filter-row,
html[data-theme="light"] #tagFilterBar.tag-filter-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-top-color: rgba(60, 60, 67, 0.10) !important;
}
html[data-theme="light"] .tag-filter-row .tag-filter-label {
  color: rgba(60, 60, 67, 0.45) !important;
}

/* Live chat — light chrome (header stays brand accent) */
html[data-theme="light"] .lc-panel {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .lc-header {
  background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%) !important;
}
html[data-theme="light"] .lc-messages {
  background: #f2f2f7 !important;
}
html[data-theme="light"] .lc-msg-admin {
  background: #e5e5ea !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .lc-msg-admin .lc-msg-meta {
  color: rgba(60, 60, 67, 0.55) !important;
}
html[data-theme="light"] .lc-footer,
html[data-theme="light"] .lc-compose {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .lc-input {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
}
html[data-theme="light"] .lc-attach {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  color: #3a3a3c !important;
}

/* Device list / cards residual dark chips */
html[data-theme="light"] .chip,
html[data-theme="light"] .aged,
html[data-theme="light"] .badge {
  color: #3a3a3c !important;
}
html[data-theme="light"] .dev-card,
html[data-theme="light"] .dev-row {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.10) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .dev-card-name,
html[data-theme="light"] .dev-name {
  color: #1c1c1e !important;
}
html[data-theme="light"] .dev-card-sub,
html[data-theme="light"] .dev-sub {
  color: #636366 !important;
}

/* Screen / skeleton empty panes keep black for video contrast; chrome light */
html[data-theme="light"] .phone-chrome,
html[data-theme="light"] .all-panel,
html[data-theme="light"] .panel-head,
html[data-theme="light"] .vhud-menu,
html[data-theme="light"] .video-hud-menu {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .vhud-qbtn,
html[data-theme="light"] .scr-btn:not(.go):not(.stop):not(.accent) {
  background: rgba(120, 120, 128, 0.12) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .vhud-qsub {
  color: #636366 !important;
}
html[data-theme="light"] .bottom-nav-dock,
html[data-theme="light"] .phone-bottom-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL ROW ALIGNMENT — icons left column, text flex, status right column
   Same padding so nothing sits flush on the frame (perms, settings, creds).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --row-pad-x: 20px;
  --row-pad-y: 14px;
  --row-icon: 40px;
  --row-gap: 14px;
  --row-status-min: 108px;
}

/* Device permissions (beats dashboard.css .perm-row { padding: 8px 0 }) */
#dtab-perms,
#dtab-perms .perm-list,
.dtab#dtab-perms {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#dtab-perms .perm-row,
.dtab#dtab-perms .perm-row,
div.perm-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--row-gap) !important;
  padding: var(--row-pad-y) var(--row-pad-x) !important;
  margin: 0 0 8px 0 !important;
  box-sizing: border-box !important;
  min-height: 68px !important;
  width: 100% !important;
  border-top: none !important; /* override settings-style border-only rows */
}
#dtab-perms .perm-icon,
div.perm-row .perm-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--row-icon) !important;
  width: var(--row-icon) !important;
  height: var(--row-icon) !important;
  min-width: var(--row-icon) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(245, 245, 247, 0.85) !important;
}
#dtab-perms .perm-icon svg,
div.perm-row .perm-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 auto !important;
}
#dtab-perms .perm-info,
div.perm-row .perm-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 12px 0 0 !important;
  margin: 0 !important;
}
#dtab-perms .perm-actions,
div.perm-row .perm-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  margin: 0 0 0 auto !important;
  padding: 0 0 0 8px !important;
  min-width: var(--row-status-min) !important;
}
#dtab-perms .perm-status,
div.perm-row .perm-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: var(--row-status-min) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
#dtab-perms .perm-actions .sm-btn,
div.perm-row .perm-actions .sm-btn,
#dtab-perms .pab-btn,
.perms-a11y-banner .pab-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 4 !important;
}
#dtab-perms .perm-critical-tag,
.perm-critical-tag {
  font-size: 10px !important;
  color: #ff453a !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
}
html[data-theme="light"] #dtab-perms .perm-icon,
html[data-theme="light"] div.perm-row .perm-icon {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #3a3a3c !important;
}

/* Settings rows — same horizontal inset as perms */
.s-row,
.s-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--row-gap) !important;
  padding: 12px var(--row-pad-x) !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}
.s-row-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-right: 12px !important;
}
.s-toggle,
.s-row > .sm-btn,
.s-row .theme-picker,
.s-row .ui-scale-picker,
.s-row .font-size-picker,
.s-row .accent-picker {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Credentials list rows */
.creds-list .cred-row,
.cred-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px var(--row-pad-x) !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
}
.cred-row .cred-type { flex-shrink: 0 !important; }
.cred-row .cred-val { flex: 1 1 auto !important; min-width: 0 !important; }
.cred-row .cred-ts,
.cred-row .cred-use,
.cred-row .cred-copy-raw {
  flex-shrink: 0 !important;
  margin-left: 4px !important;
}

/* Status pills — consistent across stream / perms / fleet */
.stream-badge,
.perm-status,
.dc-chip,
.mic-perm-status {
  box-sizing: border-box !important;
}

/* Login language chips — equal height, centered flag+code */
.login-chrome .lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}
.login-chrome .lang-btn .lang-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 14px !important;
}
.login-chrome .lang-btn .lang-code {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Fleet card head metrics — shared horizontal padding */
.dc-head,
.dc-metrics,
.dc-foot {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
.dc > .dc-actions,
.dc > .qa-bar {
  padding: 10px 14px 14px !important;
}

@media (max-width: 640px) {
  :root {
    --row-pad-x: 14px;
    --row-icon: 36px;
    --row-status-min: 96px;
  }
  #dtab-perms .perm-row,
  div.perm-row {
    min-height: 60px !important;
    flex-wrap: wrap !important;
  }
  #dtab-perms .perm-actions,
  div.perm-row .perm-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    padding-top: 4px !important;
  }
}

/* Permissions rows — light surfaces */
html[data-theme="light"] .perm-row,
html[data-theme="light"] .s-row,
html[data-theme="light"] .settings-view .s-group {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.10) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .s-desc,
html[data-theme="light"] .perm-desc {
  color: #636366 !important;
}

/* App sidebar light */
html[data-theme="light"] .app-sidebar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-right-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] .app-side-btn {
  color: #3a3a3c !important;
}
html[data-theme="light"] .app-side-btn.active {
  background: rgba(0, 113, 227, 0.12) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .app-sidebar-brand,
html[data-theme="light"] .app-side-lbl {
  color: inherit !important;
}

/* Agent shared banner */
html[data-theme="light"] .agent-share-bar,
html[data-theme="light"] .shared-agent-bar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(60, 60, 67, 0.10) !important;
  color: #1c1c1e !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFESSIONAL ICONS — better-ui: currentColor stroke, one kit, no emoji chrome
   ═══════════════════════════════════════════════════════════════════════════ */
.ico {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  color: inherit;
  pointer-events: none;
}
.ico-inline {
  vertical-align: -0.2em;
  margin-right: 0.28em;
}
.ico-empty {
  width: 40px !important;
  height: 40px !important;
  opacity: 0.35;
  color: var(--text2, #8e8e93) !important;
}
.empty-state-ico,
.calls-empty-ico,
.mic-empty-ico,
.loc-empty-ico,
.ss-empty-icon,
.nf-empty-icon,
.apk-paywall-icon,
.trial-promo-icon,
.apz-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 12px !important;
  border-radius: 18px !important;
  background: rgba(120, 120, 128, 0.10) !important;
  color: var(--text2, #8e8e93) !important;
  font-size: 0 !important; /* kill leftover emoji text */
  line-height: 0 !important;
}
.empty-state-ico .ico,
.calls-empty-ico .ico,
.mic-empty-ico .ico,
.ss-empty-icon .ico,
.nf-empty-icon .ico,
.apk-paywall-icon .ico,
.trial-promo-icon .ico,
.apz-logo .ico {
  width: 28px !important;
  height: 28px !important;
  opacity: 0.85 !important;
}
html[data-theme="light"] .empty-state-ico,
html[data-theme="light"] .calls-empty-ico,
html[data-theme="light"] .ss-empty-icon,
html[data-theme="light"] .apk-paywall-icon {
  background: rgba(60, 60, 67, 0.08) !important;
  color: #636366 !important;
}
/* Trial promo icon stays light-on-dark glass (do not use empty-state muted gray) */
html[data-theme="light"] .trial-promo-icon,
html[data-theme="light"] .trial-promo-icon .ico {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(245, 245, 247, 0.85) !important;
  -webkit-text-fill-color: rgba(245, 245, 247, 0.85) !important;
  opacity: 1 !important;
}
/* Buttons that had emoji prefixes — icon + label gap */
.btn-with-ico,
.scr-btn .ico,
.sm-btn .ico,
.ss-btn .ico,
.pur-btn-ghost .ico,
.lc-fab-ico .ico {
  margin-right: 0.35em;
}
.lc-fab-ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
}
.lc-fab-ico .ico {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: #fff !important;
}
.trial-promo-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 12px !important;
}
.apk-paywall-icon {
  width: 56px !important;
  height: 56px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT STEP 2 — clean layout (QR, amount, wallet, change plan)
   ═══════════════════════════════════════════════════════════════════════════ */
#purchaseStep2.pur-step2,
#purchaseStep2 {
  flex-direction: column !important;
  max-height: min(92vh, 820px) !important;
  min-height: 0 !important;
  width: 100% !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}
#purchaseStep2.pur-step-active {
  display: flex !important;
}
#purchaseStep2 .pur-step2-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 36px 14px 0 !important;
  flex-shrink: 0 !important;
}
#purchaseStep2 .pur-step2-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(10, 132, 255, 0.12) !important;
  color: var(--accent, #0a84ff) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
#purchaseStep2 .pur-step2-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text, #f5f5f7) !important;
  line-height: 1.2 !important;
}
#purchaseStep2 .pur-step2-sub {
  font-size: 12.5px !important;
  color: var(--text2, #8e8e93) !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
}
#purchaseStep2 .pur-step2-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 2px 2px 12px !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Cards */
#purchaseStep2 .pur-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;
  background: rgba(120, 120, 128, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#purchaseStep2 .pur-account-box {
  background: rgba(48, 209, 88, 0.08) !important;
  border-color: rgba(48, 209, 88, 0.28) !important;
}
#purchaseStep2 .pur-card-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text2, #8e8e93) !important;
  margin: 0 !important;
}
#purchaseStep2 .pur-account-box .pur-card-label {
  color: rgba(48, 209, 88, 0.95) !important;
}

/* Credential rows — left label, value pill, copy */
#purchaseStep2 .pur-cred-row {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#purchaseStep2 .pur-cred-k {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text2, #8e8e93) !important;
}
#purchaseStep2 .pur-cred-v,
#purchaseStep2 #invAccountUser,
#purchaseStep2 #invAccountPass {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #f5f5f7) !important;
  text-align: left !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
  user-select: all !important;
}
#purchaseStep2 .pur-cred-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Mini buttons */
#purchaseStep2 .pur-mini-btn,
#purchaseStep2 .pur-account-copy,
#purchaseStep2 .pur-copy-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 32px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text, #f5f5f7) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
#purchaseStep2 .pur-mini-btn.ghost {
  background: transparent !important;
}
#purchaseStep2 .pur-mini-btn:hover,
#purchaseStep2 .pur-copy-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
#purchaseStep2 .pur-mini-xs {
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

/* Change plan — full-width, unmistakable */
#purchaseStep2 .pur-change-plan-btn,
#purchaseChangePlanBtn {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 2px !important;
  border-radius: 11px !important;
  border: 1.5px solid var(--accent, #0a84ff) !important;
  background: rgba(10, 132, 255, 0.10) !important;
  color: var(--accent, #0a84ff) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}
#purchaseChangePlanBtn:hover {
  background: rgba(10, 132, 255, 0.18) !important;
}
#purchaseChangePlanBtn:focus-visible {
  outline: 2px solid var(--accent, #0a84ff) !important;
  outline-offset: 2px !important;
}

/* Email field */
#purchaseStep2 .pur-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}
#purchaseStep2 .pur-field-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--text2, #8e8e93) !important;
}
#purchaseStep2 .pur-field-input,
#purchaseStep2 #invEmail.pur-email-input,
#purchaseStep2 #invEmail {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(120, 120, 128, 0.12) !important;
  color: var(--text, #f5f5f7) !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}
#purchaseStep2 .pur-field-input:focus {
  outline: none !important;
  border-color: var(--accent, #0a84ff) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22) !important;
}

/* Amount */
#purchaseStep2 .pur-amount-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
#purchaseStep2 .pur-amount-main {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#purchaseStep2 .pur-amount-val,
#purchaseStep2 #invAmount {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text, #f5f5f7) !important;
  line-height: 1 !important;
}
#purchaseStep2 .pur-amount-unit {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text2, #8e8e93) !important;
}
#purchaseStep2 .pur-amount-plan {
  font-size: 12.5px !important;
  color: var(--text2, #8e8e93) !important;
  line-height: 1.35 !important;
}

/* Wallet + QR — stack on all sizes; side-by-side only when wide enough */
#purchaseStep2 .pur-wallet-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}
@media (min-width: 540px) {
  #purchaseStep2 .pur-wallet-card {
    grid-template-columns: 168px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}
#purchaseStep2 .pur-wallet-qr-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
#purchaseStep2 .pur-wallet-qr-frame {
  width: 160px !important;
  height: 160px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08) !important;
  box-sizing: border-box !important;
}
#purchaseStep2 .pur-wallet-qr,
#purchaseStep2 #invWalletQr {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #fff !important;
}
#purchaseStep2 .pur-qr-hint {
  position: static !important;
  margin: 0 !important;
  font-size: 11px !important;
  color: var(--text3, #8e8e93) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  max-width: 160px !important;
}
#purchaseStep2 .pur-wallet-qr-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
#purchaseStep2 .pur-qr-mode-btn,
#invQrModeToggle {
  appearance: none !important;
  margin: 2px 0 0 !important;
  padding: 6px 10px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, transparent) !important;
  color: var(--accent, #64d2ff) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  max-width: 160px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
#purchaseStep2 .pur-qr-mode-btn:hover,
#invQrModeToggle:hover {
  background: color-mix(in srgb, var(--accent, #0a84ff) 18%, transparent) !important;
}
#purchaseStep2 .pur-qr-mode-btn[data-mode="amount"],
#invQrModeToggle[data-mode="amount"] {
  border-color: color-mix(in srgb, #30d158 45%, transparent) !important;
  background: color-mix(in srgb, #30d158 12%, transparent) !important;
  color: #30d158 !important;
}
#purchaseStep2 .pur-wallet-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#purchaseStep2 .pur-wallet-addr-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#purchaseStep2 .pur-wallet-addr,
#purchaseStep2 #invWallet {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--text, #f5f5f7) !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  user-select: all !important;
  position: static !important;
}
#purchaseStep2 .pur-wallet-net {
  font-size: 11.5px !important;
  color: var(--text3, #8e8e93) !important;
  line-height: 1.35 !important;
}

/* Meta */
#purchaseStep2 .pur-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2px 2px !important;
}
#purchaseStep2 .pur-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--text2, #8e8e93) !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}
#purchaseStep2 .pur-countdown-val {
  color: var(--text, #f5f5f7) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
#purchaseStep2 .pur-inv-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  word-break: break-all !important;
  color: var(--text2, #8e8e93) !important;
}

/* Footer actions */
#purchaseStep2 .pur-step2-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 4px !important;
}
#purchaseStep2 .pur-btn-check,
#purchaseStep2 #purchaseCheckNowBtn.pur-btn-primary {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
#purchaseStep2 .pur-step2-actions-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#purchaseStep2 .pur-step2-actions-row .pur-btn-ghost {
  flex: 1 1 auto !important;
  min-height: 36px !important;
  min-width: 0 !important;
}

/* Kill old absolute/overlap rules inside step2 */
#purchaseStep2 .pur-pay-grid {
  display: contents !important;
}
#purchaseStep2 .pur-wallet-section {
  display: contents !important;
}

/* Light theme */
html[data-theme="light"] #purchaseStep2 .pur-step2-title,
html[data-theme="light"] #purchaseStep2 .pur-amount-val,
html[data-theme="light"] #purchaseStep2 .pur-countdown-val {
  color: #1c1c1e !important;
}
html[data-theme="light"] #purchaseStep2 .pur-step2-sub,
html[data-theme="light"] #purchaseStep2 .pur-card-label,
html[data-theme="light"] #purchaseStep2 .pur-cred-k,
html[data-theme="light"] #purchaseStep2 .pur-amount-unit,
html[data-theme="light"] #purchaseStep2 .pur-amount-plan,
html[data-theme="light"] #purchaseStep2 .pur-wallet-net,
html[data-theme="light"] #purchaseStep2 .pur-meta-item,
html[data-theme="light"] #purchaseStep2 .pur-qr-hint {
  color: #636366 !important;
}
html[data-theme="light"] #purchaseStep2 .pur-card {
  background: #f2f2f7 !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] #purchaseStep2 .pur-account-box {
  background: rgba(48, 209, 88, 0.10) !important;
  border-color: rgba(48, 209, 88, 0.28) !important;
}
html[data-theme="light"] #purchaseStep2 .pur-account-box .pur-card-label {
  color: #248a3d !important;
}
html[data-theme="light"] #purchaseStep2 .pur-cred-v,
html[data-theme="light"] #purchaseStep2 #invAccountUser,
html[data-theme="light"] #purchaseStep2 #invAccountPass {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #purchaseStep2 .pur-wallet-addr,
html[data-theme="light"] #purchaseStep2 #invWallet {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #purchaseStep2 .pur-field-input,
html[data-theme="light"] #purchaseStep2 #invEmail {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #purchaseStep2 .pur-mini-btn,
html[data-theme="light"] #purchaseStep2 .pur-copy-btn {
  background: #ffffff !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #purchaseStep2 .pur-mini-btn.ghost {
  background: transparent !important;
}
html[data-theme="light"] #purchaseStep2 .pur-step2-actions {
  border-top-color: rgba(60, 60, 67, 0.12) !important;
}
html[data-theme="light"] #purchasePanel .pur-close {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(60, 60, 67, 0.14) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] #purchaseStep2 .pur-step2-icon {
  background: rgba(10, 132, 255, 0.12) !important;
  color: #0071e3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLABLE TOP VIEWS — body/#app are overflow:hidden; children must scroll
   ═══════════════════════════════════════════════════════════════════════════ */
#viewTutorial:not(.hidden),
#viewApkBuild:not(.hidden),
#viewMyApps:not(.hidden),
#viewBugs:not(.hidden),
#viewKeylogs:not(.hidden),
#viewScreenshots:not(.hidden),
#viewNotifications:not(.hidden) {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  position: relative !important;
  opacity: 1 !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
/* Stats / settings keep column flex but still need min-height:0 + scroll */
#viewStats:not(.hidden),
#viewSettings:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important; /* inner panes scroll */
  position: relative !important;
  opacity: 1 !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
#viewTutorial .tutorial-wrap {
  padding-bottom: 80px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE — step1 email + compact step2 (less scrolling)
   ═══════════════════════════════════════════════════════════════════════════ */
#purchaseStep1 .pur-contact-block{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  margin:8px 0 4px !important;
}
#purchaseStep1 .pur-contact-block > .pur-email-field-lbl{
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}
#purchaseStep1 .pur-contact-methods{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  justify-content:center !important;
}
#purchaseStep1 .pur-contact-input-row{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:42px !important;
  border:1px solid var(--border, #2a2a38) !important;
  border-radius:11px !important;
  overflow:hidden !important;
  background:var(--bg2, #111118) !important;
}
#purchaseStep1 .pur-contact-affix{
  display:flex !important;
  align-items:center !important;
  padding:0 10px !important;
  color:var(--text2, #8e8e93) !important;
  font-size:13px !important;
  font-weight:650 !important;
  white-space:nowrap !important;
  background:rgba(255,255,255,.04) !important;
}
#purchaseStep1 .pur-contact-affix[hidden]{ display:none !important; }
#purchaseStep1 .pur-contact-input-row #purchaseEmail,
#purchaseStep1 .pur-contact-input-row .pur-email-input{
  border:none !important;
  border-radius:0 !important;
  min-height:42px !important;
  flex:1 1 auto !important;
  width:auto !important;
  background:transparent !important;
}
#purchaseStep1 .pur-contact-opt{
  border:1px solid var(--border, #2a2a38) !important;
  background:rgba(255,255,255,.04) !important;
  color:var(--text1, #f0f0f8) !important;
  border-radius:980px !important;
  padding:7px 12px !important;
  font-size:12px !important;
  font-weight:650 !important;
  cursor:pointer !important;
}
#purchaseStep1 .pur-contact-opt.selected{
  background:#0071e3 !important;
  border-color:#0071e3 !important;
  color:#fff !important;
}
#purchaseStep1 .pur-email-field{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  width:100% !important;
  margin:8px 0 4px !important;
}
#purchaseStep1 .pur-email-field-lbl{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12px !important;
  font-weight:650 !important;
  color:var(--text2, #8e8e93) !important;
}
#purchaseStep1 .pur-req{ color:#ff453a !important; font-weight:800 !important; }
#purchaseStep1 .pur-email-input,
#purchaseStep1 #purchaseEmail{
  width:100% !important;
  min-height:42px !important;
  padding:0 12px !important;
  border-radius:11px !important;
  box-sizing:border-box !important;
  font-size:14px !important;
}
#purchaseStep1 .pur-account-hint[hidden],
#purchaseStep1 .pur-account-hint:empty{
  display:none !important;
  margin:0 !important;
  min-height:0 !important;
}

/* Step 2: denser layout so QR + amount fit without endless scroll */
#purchaseStep2.pur-step2{
  max-height:min(90vh, 780px) !important;
}
#purchaseStep2 .pur-step2-scroll{
  gap:8px !important;
  padding-bottom:8px !important;
}
#purchaseStep2 .pur-card{
  padding:10px 12px !important;
  gap:8px !important;
}
#purchaseStep2 .pur-account-box-step2{
  gap:6px !important;
}
#purchaseStep2 .pur-change-plan-btn,
#purchaseChangePlanBtn{
  min-height:38px !important;
  border:1.5px solid var(--accent, #0a84ff) !important;
  background:rgba(10,132,255,.12) !important;
  color:var(--accent, #0a84ff) !important;
  outline:none !important;
  box-shadow:none !important;
}
#purchaseChangePlanBtn:focus{
  outline:2px solid var(--accent, #0a84ff) !important;
  outline-offset:2px !important;
}

#purchaseStep2 .pur-email-step2-compact{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:36px !important;
  padding:0 2px !important;
}
#purchaseStep2 .pur-email-step2-k{
  font-size:12px !important;
  font-weight:650 !important;
  color:var(--text3) !important;
  flex-shrink:0 !important;
  min-width:48px !important;
}
#purchaseStep2 .pur-email-step2-input,
#purchaseStep2 #invEmail{
  flex:1 !important;
  min-height:34px !important;
  min-width:0 !important;
  opacity:.85 !important;
  cursor:default !important;
}

#purchaseStep2 .pur-pay-compact-top{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
}
#purchaseStep2 .pur-wallet-qr-frame{
  width:112px !important;
  height:112px !important;
  padding:6px !important;
}
#purchaseStep2 .pur-amount-val,
#purchaseStep2 #invAmount{
  font-size:28px !important;
}
#purchaseStep2 .pur-meta-row{
  padding:0 2px !important;
  gap:6px 12px !important;
}
#purchaseStep2 .pur-step2-actions{
  padding-top:8px !important;
  gap:8px !important;
}
#purchaseStep2 .pur-btn-check,
#purchaseStep2 #purchaseCheckNowBtn.pur-btn-primary{
  min-height:44px !important;
}
#purchaseStep2 .pur-step2-actions-row .pur-btn-ghost{
  min-height:34px !important;
  font-size:12px !important;
}
@media (max-width:480px){
  #purchaseStep2 .pur-pay-compact-top{
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }
  #purchaseStep2 .pur-amount-inline{ width:100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-11 — Invoice step2 compact + method icons + no New invoice
   ═══════════════════════════════════════════════════════════════════════════ */
#purchaseNewInvoiceBtn,
.pur-new-invoice-btn,
#purchaseStep2 #purchaseNewInvoiceBtn {
  display: none !important;
}

/* Change plan = compact text link only (override full-width outline styles) */
#purchaseStep2 #purchaseChangePlanBtn,
#purchaseStep2 button#purchaseChangePlanBtn,
.purchase-box #purchaseChangePlanBtn,
#purchaseChangePlanBtn.pur-link-btn,
#purchaseStep2 .pur-change-plan-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #64d2ff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  text-align: start !important;
  justify-content: flex-start !important;
  filter: none !important;
  transform: none !important;
}
#purchaseStep2 #purchaseChangePlanBtn:hover,
.purchase-box #purchaseChangePlanBtn:hover {
  background: transparent !important;
  color: #8fe0ff !important;
  text-decoration: underline !important;
  border: none !important;
  filter: none !important;
}

/* Hide Telegram “after sending” note forever */
#purchaseStep2 #invManualNote,
#purchaseStep2 .pur-wallet-manual {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Method tiles: row with icon + text, centered grid */
#purchasePanel .pur-method-grid,
#purchasePanel #purchaseMethodGrid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}
#purchasePanel button.pur-method-opt,
#purchasePanel .pur-method-opt {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex: 0 1 calc(33.333% - 6px) !important;
  min-width: 118px !important;
  max-width: 140px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  text-align: left !important;
}
#purchasePanel .pur-method-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}
#purchasePanel .pur-ico-usdt,
#purchasePanel .pur-ico-trx,
#purchasePanel .pur-ico-btc,
#purchasePanel .pur-ico-eth {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
}
#purchasePanel .pur-method-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}
#purchasePanel .pur-method-name { font-size: 12px !important; font-weight: 800 !important; line-height: 1.15 !important; }
#purchasePanel .pur-method-net { font-size: 9px !important; opacity: 0.7 !important; line-height: 1.2 !important; }
/* Do NOT hide method icons */
#purchasePanel .pur-method-opt .pur-method-ico { display: inline-flex !important; }
#purchasePanel .pur-method-opt .pur-method-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Step2 ultra-compact — fit without page scroll */
#purchaseStep2.pur-step2,
#purchaseStep2 {
  max-height: min(96dvh, 100%) !important;
  gap: 0 !important;
  overflow: hidden !important;
}
#purchaseStep2 .pur-step2-header-compact {
  padding: 0 28px 4px 0 !important;
}
#purchaseStep2 .pur-step2-title { font-size: 14px !important; }
#purchaseStep2 .pur-step2-sub { font-size: 10.5px !important; margin: 0 !important; }
#purchaseStep2 .pur-step2-scroll-fit {
  gap: 5px !important;
  padding: 0 0 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#purchaseStep2 .pur-account-dense {
  padding: 5px 8px !important;
  gap: 2px !important;
  border-radius: 10px !important;
}
#purchaseStep2 .pur-card-label { font-size: 9px !important; margin: 0 !important; }
#purchaseStep2 .pur-cred-row { gap: 6px !important; font-size: 11px !important; }
#purchaseStep2 .pur-cred-tools-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  margin-top: 1px !important;
}
#purchaseStep2 .pur-email-step2-compact { gap: 6px !important; }
#purchaseStep2 .pur-email-step2-input {
  min-height: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
}
#purchaseStep2 .pur-pay-compact {
  padding: 6px 8px !important;
  gap: 5px !important;
  border-radius: 12px !important;
}
#purchaseStep2 .pur-pay-compact-top {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  align-items: start !important;
}
#purchaseStep2 .pur-amount-val { font-size: 20px !important; line-height: 1.1 !important; }
#purchaseStep2 .pur-amount-unit { font-size: 11px !important; }
#purchaseStep2 .pur-amount-plan { font-size: 9.5px !important; margin-top: 1px !important; }
#purchaseStep2 .pur-wallet-qr,
#purchaseStep2 .pur-wallet-qr-frame img {
  width: 72px !important;
  height: 72px !important;
}
#purchaseStep2 .pur-qr-mode-btn {
  font-size: 9px !important;
  padding: 2px 6px !important;
  min-height: 0 !important;
  margin-top: 2px !important;
}
#purchaseStep2 .pur-wallet-addr {
  font-size: 9.5px !important;
  line-height: 1.25 !important;
  word-break: break-all !important;
}
#purchaseStep2 .pur-wallet-net { font-size: 9.5px !important; margin-top: 1px !important; }
#purchaseStep2 .pur-meta-row {
  gap: 4px 10px !important;
  font-size: 10.5px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#purchaseStep2 .pur-check-status {
  font-size: 10.5px !important;
  padding: 1px 0 !important;
  margin: 0 !important;
  min-height: 18px !important;
}
#purchaseStep2 .pur-step2-actions-compact {
  gap: 4px !important;
  padding-top: 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
#purchaseStep2 .pur-step2-actions-compact .pur-btn-primary {
  min-height: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}
#purchaseStep2 .pur-step2-actions-compact .pur-btn-ghost {
  min-height: 30px !important;
  height: 30px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
}
#purchaseStep2 .pur-mini-btn {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}


/* Collapsible search + fleet online visibility (v190) */
.topbar-right .topbar-search-wrap { flex-shrink: 0 !important; }
.topbar-right .topbar-search-wrap:not(.is-open) #searchInput,
.topbar-right .topbar-search-wrap:not(.is-open) .search {
  width: 0 !important; max-width: 0 !important; min-width: 0 !important;
  opacity: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; pointer-events: none !important;
  background-image: none !important;
}
.topbar-right .topbar-search-wrap.is-open #searchInput,
.topbar-right .topbar-search-wrap.is-open .search {
  width: min(240px, 42vw) !important;
  max-width: min(240px, 42vw) !important;
  min-width: 140px !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 32px 0 12px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-image: none !important;
  text-align: left !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
@media (max-width: 720px) {
  .topbar-right .search,
  #searchInput { display: inline-block !important; }
  .topbar-search-wrap:not(.is-open) #searchInput { display: none !important; }
}
.topbar-fleet-stats .tbf-on span[data-i18n],
.topbar-fleet-stats .tbf-off span[data-i18n] {
  display: inline !important;
  visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLEET GRID HARD FIX — 2 columns, real gutters, no stack/ghost (2026-08-12)
   Uses #devGrid so we beat apple-components #devGrid { gap:16px } and others.
   ═══════════════════════════════════════════════════════════════════════════ */
#devGrid.view-cards,
.fleet-view #devGrid.view-cards,
#viewList #devGrid.view-cards,
.fleet-view .dev-grid.view-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  /* column | row — leave clear air after each pair */
  column-gap: 28px !important;
  row-gap: 36px !important;
  gap: 36px 28px !important;
  padding: 20px 28px 56px !important;
  align-items: start !important;
  align-content: start !important;
  justify-items: stretch !important;
  max-width: 1080px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Each card is a solid, non-overlapping block */
#devGrid.view-cards > .dc,
.fleet-view #devGrid.view-cards > .dc,
.fleet-view .dev-grid.view-cards > .dc {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 84px !important;
  margin: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 0 !important;
  box-sizing: border-box !important;
  background: #1c1c22 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
}

#devGrid.view-cards > .dc:hover,
.fleet-view #devGrid.view-cards > .dc:hover {
  transform: translateY(-2px) !important;
  z-index: 1 !important;
  border-color: rgba(0, 113, 227, 0.4) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36) !important;
}

/* Offline: never transparent (was causing ghost-through stack look) */
#devGrid.view-cards > .dc.offline,
.fleet-view #devGrid.view-cards > .dc.offline {
  opacity: 1 !important;
  filter: grayscale(0.2) brightness(0.9) !important;
  background: #16161c !important;
}
#devGrid.view-cards > .dc.offline:hover {
  filter: grayscale(0.05) brightness(0.95) !important;
}

/* 3-column fleet cards (view-grid3) */
#devGrid.view-cards.view-grid3,
.fleet-view #devGrid.view-cards.view-grid3,
.fleet-view .dev-grid.view-cards.view-grid3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  max-width: 1560px !important;
  column-gap: 18px !important;
  row-gap: 24px !important;
  gap: 24px 18px !important;
  padding: 16px 20px 56px !important;
}
@media (max-width: 1280px) {
  #devGrid.view-cards.view-grid3,
  .fleet-view #devGrid.view-cards.view-grid3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    max-width: 1120px !important;
  }
}
@media (max-width: 900px) {
  #devGrid.view-cards.view-grid3,
  .fleet-view #devGrid.view-cards.view-grid3 {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    padding: 14px 16px 36px !important;
  }
}

/* Keep internal chrome in-flow; no absolute full-bleed that escapes the card */
#devGrid.view-cards .dc-shine,
#devGrid.view-cards .dc-wp {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
#devGrid.view-cards .dc-shot-preview {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  max-height: 100px !important;
  min-height: 72px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#devGrid.view-cards .dc-head {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 14px 16px 10px !important;
  min-height: 56px !important;
  gap: 12px !important;
}
#devGrid.view-cards .dc-metrics {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 0 16px 12px !important;
  min-height: 22px !important;
}
#devGrid.view-cards .dc-foot {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 6px 16px 12px !important;
  min-height: 0 !important;
}

/* Phone: single column, still roomy */
@media (max-width: 640px) {
  #devGrid.view-cards,
  .fleet-view #devGrid.view-cards,
  .fleet-view .dev-grid.view-cards {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 20px !important;
    gap: 20px !important;
    padding: 14px 14px 40px !important;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS VIEW v4 — 2 full devices, screenshot always visible, real gaps
   (List/table must NOT inherit these; only .view-cards)
   ═══════════════════════════════════════════════════════════════════════════ */
#devGrid.view-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  column-gap: 24px !important;
  row-gap: 32px !important;
  gap: 32px 24px !important;
  padding: 20px 24px 48px !important;
  max-width: 1100px !important;
  margin-inline: auto !important;
  align-items: start !important;
  align-content: start !important;
  box-sizing: border-box !important;
}
#devGrid.view-cards > .dc {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  position: relative !important;
  border-radius: 18px !important;
  background: #1c1c22 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.32) !important;
}
/* Screenshot ALWAYS visible on cards — top of card, large strip */
#devGrid.view-cards .dc-shot-preview,
body.fleet-shots-on #devGrid.view-cards .dc-shot-preview,
body:not(.fleet-shots-on) #devGrid.view-cards .dc-shot-preview {
  display: block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  overflow: hidden !important;
  margin: 0 !important;
  order: 0 !important;
  inset: auto !important;
  opacity: 1 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;
  background: #0a0a0e !important;
}
#devGrid.view-cards .dc-shot-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}
#devGrid.view-cards .dc-shot-preview img[hidden] {
  display: none !important;
}
#devGrid.view-cards .dc-shot-refresh {
  opacity: 1 !important; /* always visible, not hover-only */
  pointer-events: auto !important;
}
#devGrid.view-cards .dc-head {
  order: 0 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 12px 14px 8px !important;
  gap: 10px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
}
#devGrid.view-cards .dc-metrics {
  order: 0 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 0 14px 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}
#devGrid.view-cards .dc-foot {
  order: 0 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 4px 14px 12px !important;
  min-height: 0 !important;
}
#devGrid.view-cards .dc.offline {
  opacity: 1 !important;
  filter: saturate(0.7) brightness(0.92) !important;
}

/* LIST view — single column rows, never 2-col grid */
#devGrid.view-list,
#devGrid.view-list.fleet-pill-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  row-gap: 12px !important;
  grid-template-columns: none !important;
  max-width: none !important;
  align-items: stretch !important;
  padding: 14px 16px 28px !important;
}
#devGrid.view-list > .fleet-row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  opacity: 1 !important;
  position: relative !important;
  height: auto !important;
}

/* TABLE view — full width block */
#devGrid.view-table {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  max-width: none !important;
  padding: 12px 16px 28px !important;
  overflow: auto !important;
}
#devGrid.view-table .dev-table-wrap {
  width: 100% !important;
  overflow: auto !important;
}
#devGrid.view-table .dev-table {
  width: 100% !important;
  min-width: 640px !important;
}

@media (max-width: 640px) {
  #devGrid.view-cards {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 20px !important;
    gap: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPEARANCE 2026-08-15 — login breathing room + quieter chrome + fleet cards
   Last file wins over the compact-login crush above.
   ═══════════════════════════════════════════════════════════════════════════ */

#loginOverlay.login-overlay {
  background: #000 !important;
  background-image:
    radial-gradient(ellipse 90% 48% at 50% -8%, rgba(0, 113, 227, 0.28), transparent 58%),
    radial-gradient(ellipse 36% 28% at 88% 92%, rgba(41, 151, 255, 0.07), transparent 52%) !important;
}

#loginOverlay .login-box,
#loginOverlay .login-box.login-comfortable {
  width: min(400px, calc(100vw - 32px)) !important;
  max-width: 400px !important;
  padding: 28px 24px 20px !important;
  gap: 14px !important;
  border-radius: 24px !important;
  background: rgba(22, 22, 24, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.55) !important;
}

#loginOverlay .login-ghost,
#loginOverlay .login-logo {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  margin: 0 auto 2px !important;
  outline: 1px solid oklch(1 0 0 / 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

#loginOverlay .login-brand {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

#loginOverlay .login-title,
#loginOverlay h1.login-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  background: none !important;
}

#loginOverlay .login-tagline,
#loginOverlay .login-sub {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  max-width: 34ch !important;
  margin: 0 auto !important;
  color: rgba(245, 245, 247, 0.58) !important;
  font-weight: 400 !important;
}

/* SEO strings stay in the DOM for crawlers — they crowd the card */
#loginOverlay .login-seo-sub,
#loginOverlay .login-seo-footer {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#loginOverlay .login-section-title {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  margin: 2px 0 0 !important;
  color: rgba(245, 245, 247, 0.38) !important;
}

#loginOverlay .login-trial-block,
#loginOverlay .login-section {
  gap: 10px !important;
}

#loginOverlay .login-captcha-input,
#loginOverlay .login-invite-input,
#loginOverlay .login-register-btn {
  min-height: 44px !important;
  height: 44px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
}

#loginOverlay .login-trial-cta {
  min-height: 48px !important;
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 980px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 10px 24px rgba(0, 113, 227, 0.28) !important;
}

#loginOverlay .login-trial-cta:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

#loginOverlay .login-trial-cta:active:not(:disabled) {
  transform: scale(0.96) !important;
}

#loginOverlay .login-captcha-label {
  font-size: 14px !important;
  min-width: 4.5rem !important;
  padding: 0 10px !important;
}

#loginOverlay .login-trial-hint {
  font-size: 12px !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: 3;
  color: rgba(245, 245, 247, 0.42) !important;
}

#loginOverlay .login-divider {
  margin: 2px 0 !important;
  font-size: 11px !important;
  opacity: 0.65 !important;
}

#loginOverlay .login-contacts {
  gap: 8px !important;
  margin-top: 4px !important;
}

#loginOverlay .login-contact-btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  border-radius: 980px !important;
}

#loginOverlay .login-chrome {
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 8px 10px !important;
  background: rgba(22, 22, 24, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

/* Success / returning-trial: keep the tighter card so creds fit */
#loginOverlay .login-box.mode-success,
#loginOverlay .login-box.mode-already {
  padding: 18px 16px 14px !important;
  gap: 10px !important;
}
#loginOverlay .login-box.mode-success .login-ghost,
#loginOverlay .login-box.mode-already .login-ghost,
#loginOverlay .login-box.mode-success .login-logo,
#loginOverlay .login-box.mode-already .login-logo {
  width: 48px !important;
  height: 48px !important;
}

@media (max-height: 640px) {
  #loginOverlay .login-box,
  #loginOverlay .login-box.login-comfortable {
    padding: 16px 16px 12px !important;
    gap: 10px !important;
  }
  #loginOverlay .login-ghost,
  #loginOverlay .login-logo {
    width: 48px !important;
    height: 48px !important;
  }
  #loginOverlay .login-title { font-size: 22px !important; }
  #loginOverlay .login-tagline { font-size: 12px !important; }
  #loginOverlay .login-trial-cta {
    min-height: 42px !important;
    height: 42px !important;
  }
}

html[data-theme="light"] #loginOverlay.login-overlay {
  background: #f5f5f7 !important;
  background-image:
    radial-gradient(ellipse 90% 48% at 50% -8%, rgba(0, 113, 227, 0.12), transparent 58%) !important;
}
html[data-theme="light"] #loginOverlay .login-box,
html[data-theme="light"] #loginOverlay .login-box.login-comfortable {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 24px 64px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] #loginOverlay .login-title,
html[data-theme="light"] #loginOverlay h1.login-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="light"] #loginOverlay .login-tagline,
html[data-theme="light"] #loginOverlay .login-sub {
  color: rgba(60, 60, 67, 0.62) !important;
}
html[data-theme="light"] #loginOverlay .login-ghost,
html[data-theme="light"] #loginOverlay .login-logo {
  outline-color: oklch(0 0 0 / 0.1) !important;
}
html[data-theme="light"] #loginOverlay .login-chrome {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Topbar wordmark — solid label, not gradient clip */
header.topbar .topbar-title,
.topbar .topbar-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  color: #f5f5f7 !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}
html[data-theme="light"] header.topbar .topbar-title,
html[data-theme="light"] .topbar .topbar-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

/* Fleet cards — quieter surface, concentric radius, image edge */
.fleet-view .dev-grid.view-cards {
  gap: 16px 16px !important;
  padding: 16px 20px 40px !important;
}
.dc {
  border-radius: 18px !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}
.dc:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 113, 227, 0.45) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38) !important;
}
.dc:active {
  transform: scale(0.96) !important;
}
.dc .dc-shot-preview img,
.dc-shot-preview img {
  outline: 1px solid oklch(1 0 0 / 0.10) !important;
  outline-offset: -1px !important;
}
html[data-theme="light"] .dc {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .dc .dc-shot-preview img,
html[data-theme="light"] .dc-shot-preview img {
  outline-color: oklch(0 0 0 / 0.10) !important;
}

/* Sidebar selected row */
.app-side-btn.active {
  background: rgba(0, 113, 227, 0.16) !important;
  color: #f5f5f7 !important;
}
html[data-theme="light"] .app-side-btn.active {
  background: rgba(0, 113, 227, 0.10) !important;
  color: #1d1d1f !important;
}

/* ── Trial promo: compact centered card (text + buttons aligned) ─────────── */
#trialPromoBanner.trial-promo-banner {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: min(80vh, 420px) !important;
  z-index: 9500 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#trialPromoBanner.trial-promo-banner.is-open {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#trialPromoBanner .trial-promo-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 16px 16px 14px !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
#trialPromoBanner .trial-promo-icon {
  display: none !important;
}
#trialPromoBanner .trial-promo-copy {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
#trialPromoBanner .trial-promo-title {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 20px 6px 0 !important;
  white-space: normal !important;
}
#trialPromoBanner .trial-promo-text,
#trialPromoBanner .trial-promo-bug {
  max-width: none !important;
  width: 100% !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
#trialPromoBanner .trial-promo-bug {
  margin-top: 6px !important;
  font-size: 12px !important;
}
#trialPromoBanner .trial-promo-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
}
#trialPromoBanner .trial-promo-buy,
#trialPromoBanner .trial-promo-contact,
#trialPromoBanner .trial-promo-bug-btn {
  text-align: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
#trialPromoBanner .trial-promo-buy {
  flex: 1 1 100% !important;
  width: 100% !important;
}
#trialPromoBanner .trial-promo-contact,
#trialPromoBanner .trial-promo-bug-btn {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 0 !important;
}
#trialPromoBanner .trial-promo-dismiss {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
}

/* Single stream-state icon (replaces Live / Stopped / Offline pills) */
.vhud-state,
.screen-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #ff453a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}
.vhud-state[data-vhud-state="live"],
.screen-live-dot[data-vhud-state="live"] {
  background: #30d158;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 10px rgba(48, 209, 88, 0.7);
}
.vhud-state[data-vhud-state="stopped"],
.screen-live-dot[data-vhud-state="stopped"] {
  background: #8e8e93;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.vhud-state[data-vhud-state="offline"],
.screen-live-dot[data-vhud-state="offline"] {
  background: #ff453a;
}
.video-hud-status .vhud-pill { display: none !important; }
.screen-viewer {
  position: relative !important;
}
.screen-live-dot {
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 5;
  pointer-events: none;
}
.video-hud-status .vhud-state { display: none; } /* overlay on video is enough */

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE OPERATE — iPhone / narrow: stack, don't overlap
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
  }
  body.device-view-active #app,
  body.device-view-active .app-main,
  body.device-view-active #deviceView,
  body.device-view-active #dtab-screen {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Compact single-row toolbar — do not turn every action into a half-width brick */
  #streamActionRow,
  .stream-action-row,
  .operate-primary-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #streamActionRow .stream-btn-group,
  .stream-chrome-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  #streamActionRow .scr-btn,
  .operate-primary-bar .scr-btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  /* Quality only when user opens it */
  #streamPrefsRow:not(.chrome-collapsed) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-height: min(36vh, 280px) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
  #streamPrefsRow:not(.chrome-collapsed) .stream-prefs-scroll,
  #streamPrefsRow:not(.chrome-collapsed) .sprefs-group,
  #streamPrefsRow:not(.chrome-collapsed) .stream-prefs-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Screen + skeleton + keylog stack vertically */
  #dtab-screen {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  #screenSplitWrap,
  .screen-split-wrap,
  .phone-stage,
  #phoneStage,
  .dual-pane,
  #tabSkeleton.dual-pane,
  .all-panels-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #screenSplitWrap,
  .screen-split-wrap,
  .screen-main-pane,
  .phone-stage,
  .phone-column {
    flex: 1 1 auto !important;
    min-height: 46vh !important;
  }
  #screenSplitWrap > .screen-ctrl-sidebar,
  #screenSplitWrap > .screen-keylog-pane,
  #screenSplitWrap > .phone-ctrl-bar {
    flex: 0 0 auto !important;
  }
  .phone-column,
  #tabVideo,
  .video-stack,
  .screen-viewer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 42vh !important;
  }
  .screen-viewer {
    min-height: 46vh !important;
  }
  #screenImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* Skeleton below the fold / hide so Screen can be large */
  #tabSkeleton {
    display: none !important;
  }
  .phone-column,
  #tabVideo .phone-frame,
  .phone-frame {
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .video-hud-body {
    display: none !important;
  }

  /* Live keylog: fixed-height bottom sheet. WebKit ignores max-height on
     flex:0 0 auto items, so use a definite flex-basis + height. */
  #screenKeylogPane,
  .screen-keylog-pane {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 20 !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  #screenKeylogPane:not(.hidden),
  #screenKeylogPane.skl-phone-sheet:not(.hidden),
  body.keylog-split-open #screenKeylogPane:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 min(32vh, 280px) !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: min(32vh, 280px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: min(32vh, 280px) !important;
    max-height: min(32vh, 280px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.keylog-split-open #screenSplitWrap > .screen-main-pane {
    flex: 1 1 auto !important;
    min-height: 36vh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #screenKeylogPane:not(.hidden) .skl-header,
  #screenKeylogPane:not(.hidden) .skl-filter-bar,
  #screenKeylogPane:not(.hidden) .skl-footer {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  #screenKeylogPane:not(.hidden) #splitKeylogList,
  #screenKeylogPane:not(.hidden) .skl-list,
  #screenKeylogPane:not(.hidden) .kl-table-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 6px 8px !important;
  }
  .skl-header,
  .skl-filter-bar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  .skl-filter-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .skl-footer {
    padding: 4px 8px !important;
  }
  /* Dense rows so many entries fit in the sheet, not one giant card */
  #screenKeylogPane .lk-row {
    gap: 3px !important;
    margin: 0 0 4px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }
  #screenKeylogPane .lk-row--compact {
    padding: 4px 8px !important;
    margin: 0 0 2px !important;
  }
  #screenKeylogPane .lk-meta {
    gap: 6px !important;
  }
  #screenKeylogPane .lk-msg,
  #screenKeylogPane .lk-msg--typed {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    min-height: 0 !important;
  }
  #screenKeylogPane .skl-popout-btn {
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  /* Wake / Sleep stay; More tools only when expanded */
  .phone-primary-security,
  .phone-primary-security .phone-ctrl-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }
  #phoneMoreTools:not(.chrome-collapsed),
  #phoneMoreTools:not(.chrome-collapsed) .phone-ctrl-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }
  .phone-primary-security .scr-btn,
  #phoneMoreTools:not(.chrome-collapsed) .scr-btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .phone-ctrl-sep,
  .ctrl-sep {
    display: none !important;
  }
  .phone-dock {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }
  .phone-dock-input-row {
    display: flex !important;
    gap: 8px !important;
  }
  .phone-nav-keys {
    display: flex !important;
    gap: 6px !important;
  }
  .phone-nav-key {
    flex: 1 1 0 !important;
  }

  /* Permissions: column, no overlapping badges */
  #dtab-perms .perm-row,
  div.perm-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    min-height: 0 !important;
    position: relative !important;
  }
  div.perm-row .perm-icon { align-self: flex-start !important; }
  div.perm-row .perm-info {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  div.perm-row .perm-status,
  div.perm-row .perm-actions {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  div.perm-row .perm-actions .sm-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Info / quick actions: one column */
  #dtab-info .info-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #dtab-info .info-left,
  #dtab-info .info-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }
  #dtab-info .row-gap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #dtab-info .row-gap .sm-btn,
  #dtab-info .row-gap input,
  #dtab-info .row-gap select,
  #dtab-info .row-gap .ti,
  #dtab-info .row-gap .sel {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Camera toolbar */
  #dtab-camera .contacts-toolbar,
  #dtab-camera .tab-inner-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Fleet: one card, names don't explode the row */
  .agent-share-bar,
  .shared-agent-bar,
  .fleet-toolbar,
  .fleet-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #devGrid.view-cards .dc-head,
  #devGrid.view-list .fleet-row {
    min-width: 0 !important;
  }
  #devGrid.view-cards .dc-name,
  #devGrid.view-cards .dc-head span,
  .fleet-row .fr-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Watermark: fade so it does not cover buttons */
  .site-wm,
  .site-wm-stamp,
  #siteWm {
    opacity: 0.18 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Chat FAB above home indicator, not on top of Wake */
  .lc-fab,
  #lcFab,
  .live-chat-widget .lc-fab {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    width: 46px !important;
    height: 46px !important;
    z-index: 40 !important;
  }

  /* Device tab strip: swipe, don't wrap into 3 rows */
  .dev-tabs,
  #devTabBar,
  .device-tab-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Collapsed chrome must actually hide — earlier display:flex !important was keeping it open */
  #streamPrefsRow.chrome-collapsed,
  #phoneMoreTools.chrome-collapsed,
  #streamToolsExtra.chrome-collapsed,
  #skelToolbar.chrome-collapsed,
  #screenKeylogPane.hidden,
  #screenKeylogPane[hidden] {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .screen-main-pane {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 52vh !important;
  }
  .phone-stage,
  .phone-column,
  #tabVideo,
  .video-stack,
  .screen-viewer {
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* Screen + Skeleton fill leftover height; headers don't collide */
@media (max-width: 640px) {
  html,
  body.app-entered.device-view-active {
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body.device-view-active #app {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  body.device-view-active #viewDevice:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.device-view-active #dtab-screen.dtab.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #screenSplitWrap,
  .screen-main-pane,
  .phone-stage,
  #phoneColumn.mode-dual,
  .phone-column.mode-dual {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .phone-column.mode-dual .tab-host.dual-screen-skel,
  #phoneColumn.mode-dual .tab-host {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  .phone-column.mode-dual #tabVideo,
  .phone-column.mode-dual #tabSkeleton,
  .phone-column.mode-dual #tabVideo.dual-pane,
  .phone-column.mode-dual #tabSkeleton.dual-pane {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .phone-dock,
  .phone-primary-security {
    flex: 0 0 auto !important;
  }

  /* Screen header: title on its own line, icon buttons in a row */
  .screen-pane-header {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    min-height: 0 !important;
  }
  .screen-pane-header-title,
  .screen-pane-header .dual-pane-label {
    flex: 1 1 100% !important;
    width: 100% !important;
    line-height: 1.2 !important;
  }
  .screen-stream-ctrl {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }
  .screen-stream-ctrl .vhud-lbl {
    display: none !important;
  }
  .screen-stream-ctrl .vhud-btn,
  .screen-stream-ctrl .screen-ctrl-btn {
    flex: 1 1 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .screen-stream-ctrl .vhud-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Skeleton header: title + − / + without overlap */
  .skel-pane-header {
    gap: 6px !important;
    padding: 4px 6px !important;
    min-height: 36px !important;
  }
  .skel-pane-header-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .skel-font-ctrl {
    flex-shrink: 0 !important;
  }
  .skel-font-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
  .skel-pane-footer-title {
    display: none !important;
  }
  .skel-pane-footer {
    justify-content: center !important;
    padding: 4px 6px !important;
  }

  /* HUD Menu/fps sit on the video — keep only tiny fps, hide Menu */
  .video-hud-bar .vhud-collapse-btn {
    display: none !important;
  }
  .video-hud-bar {
    min-height: 0 !important;
    padding: 2px 6px !important;
    background: transparent !important;
    border: none !important;
  }
  .vhud-meta {
    font-size: 10px !important;
    opacity: 0.75 !important;
  }

  /* Last-win: Live Keylog stays a bottom sheet; screen stays visible above */
  body.keylog-split-open #screenSplitWrap {
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.keylog-split-open #screenSplitWrap > .screen-main-pane {
    flex: 1 1 auto !important;
    min-height: 36vh !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.keylog-split-open #screenKeylogPane:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 min(32vh, 280px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: min(32vh, 280px) !important;
    max-height: min(32vh, 280px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    order: 20 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS / phone topbar — search, profile, fleet Online/Offline stay visible.
   Do not show a second "ONLINE" word on the right (connDotLabel).
   iOS Safari ignores width:0 on input[type=search] and shoves siblings off-screen.
   ═══════════════════════════════════════════════════════════════════════════ */
#connDotLabel {
  display: none !important;
}
.conn-dot-wrap {
  gap: 0 !important;
}

.topbar-search-wrap:not(.is-open) #searchInput,
.topbar-search-wrap:not(.is-open) .search,
.topbar-right .topbar-search-wrap:not(.is-open) #searchInput,
.topbar-right .topbar-search-wrap:not(.is-open) .search {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}
#searchInput,
.topbar-search-wrap #searchInput {
  -webkit-appearance: none !important;
  appearance: none !important;
}
.topbar-search-wrap,
.topbar-search-toggle,
.topbar-profile-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 6 !important;
}
.topbar-search-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}
.topbar-profile-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

@media (max-width: 960px) {
  body:not(.device-view-active) .topbar-fleet-stats,
  body:not(.device-view-active) #topbarFleetStats {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .topbar-desktop {
    display: none !important;
  }
}

@media (max-width: 720px) {
  header.topbar,
  .topbar {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 48px !important;
  }
  .topbar-desktop,
  #trialCountdown,
  .topbar-right #deviceCount,
  .topbar-right .dev-count,
  .topbar-right #logoutBtn span,
  #logoutBtn.topnav-exit span {
    display: none !important;
  }
  .topbar-search-wrap,
  .topbar-search-toggle,
  .topbar-profile-btn {
    display: inline-flex !important;
  }
  .topbar-search-wrap:not(.is-open) #searchInput {
    display: none !important;
  }
  .topbar-right .search,
  #searchInput {
    max-width: min(240px, 58vw) !important;
  }
}

@media (max-width: 640px) {
  .topbar-tg,
  .topbar-desktop,
  .conn-dot-wrap {
    display: none !important;
  }
  body:not(.device-view-active) .topbar-fleet-stats,
  body:not(.device-view-active) #topbarFleetStats {
    display: inline-flex !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    gap: 8px !important;
    margin: 0 2px !important;
  }
  .topbar-fleet-stats .tbf-total {
    display: none !important;
  }
}

/* Agent bar + Agent chip — centered (title, buttons, reopen) */
#demoApkBar.demo-apk-bar,
.demo-apk-bar {
  position: relative !important;
}
.demo-apk-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px 8px !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 2px 36px 2px 8px !important;
}
.demo-apk-actions {
  flex: 0 1 auto !important;
  width: 100% !important;
  justify-content: center !important;
  margin: 0 auto !important;
}
.demo-apk-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  margin: 0 !important;
  z-index: 2 !important;
}
.fleet-toolbar-compact .demo-apk-reopen:not(.hidden),
.demo-apk-reopen:not(.hidden) {
  display: flex !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fleet-toolbar.fleet-toolbar-compact {
  justify-content: center !important;
}
.fleet-toolbar-compact .demo-apk-reopen:not(.hidden) {
  flex: 1 1 100% !important;
  max-width: max-content !important;
}


/* Only the active purchase step is in layout (step2 used to force display:flex) */
#purchasePanel #purchaseStep2:not(.pur-step-active) {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE — mobile: every method + CTA reachable; chrome must not cover them
   Screenshot failure: 3-col min-width tiles clipped, overflow:hidden hid BTC/ETH
   + Pay, and fixed Back to login / chat FAB sat on the method row.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px), (max-height: 740px) {
  /* Keep a reserved strip at the bottom for Back to login + chat FAB */
  #purchasePanel.purchase-panel:not(.hidden) {
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-inline: 8px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  #purchasePanel .purchase-box,
  .purchase-box {
    width: min(520px, 100%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    margin-block: auto !important;
    padding: 12px 12px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #purchasePanel #purchaseStep1,
  #purchaseStep1.pur-step-active {
    overflow: visible !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* Plan cards must shrink below their min-content width */
  #purchasePanel #purchasePlansGrid .pur-plan:not([hidden]),
  #purchasePanel .pur-plans .pur-plan:not([hidden]) {
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  /* 2-col method grid: 5 tiles wrap fully; minmax(0,1fr) beats min-content */
  #purchasePanel .pur-method-grid,
  #purchasePanel #purchaseMethodGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #purchasePanel #purchaseMethodGrid > .pur-method-opt,
  #purchasePanel button.pur-method-opt,
  #purchasePanel .pur-method-opt {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
  #purchasePanel .pur-method-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #purchasePanel .pur-method-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  #purchasePanel .pur-method-net {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
  }

  /* CTA stays in document flow so it cannot cover method tiles */
  #purchasePanel #purchaseGetInvoiceBtn {
    position: static !important;
    margin-top: 10px !important;
    min-height: 48px !important;
    height: auto !important;
  }

  #purchasePanel .pur-secure-note {
    margin-bottom: 8px !important;
  }

  #purchaseStep1 .pur-contact-methods {
    max-width: 100% !important;
  }
  #purchaseStep1 .pur-contact-opt {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #purchaseStep1 .pur-contact-opt[data-contact="internal"] {
    flex: 1 1 100% !important;
  }
  #purchasePanel .pur-method-net {
    white-space: normal !important;
  }

  /* Back to login lives in the reserved strip — not on top of methods */
  #paymentOnlyBackLogin,
  button.payment-only-back-login {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: calc(100vw - 84px) !important;
    max-width: calc(100vw - 84px) !important;
    min-height: 44px !important;
    z-index: 10120 !important;
  }

  /* Chat FAB sits in the same strip, clear of method tiles */
  body.payment-only-mode .live-chat-widget,
  body.purchase-open .live-chat-widget,
  body:has(#purchasePanel:not(.hidden)) .live-chat-widget,
  body.lc-over-purchase .live-chat-widget {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    top: auto !important;
  }

  /* Invoice step: one scrollport (the card), not a nested clip */
  #purchasePanel #purchaseStep2,
  #purchaseStep2.pur-step2,
  #purchaseStep2 {
    overflow: visible !important;
    max-height: none !important;
  }
  #purchasePanel #purchaseGetInvoiceBtn {
    min-height: 48px !important;
    height: auto !important;
  }
}

@media (max-width: 380px) {
  #purchasePanel .pur-method-name { font-size: 11px !important; }
  #purchasePanel .pur-method-net { font-size: 8px !important; }
  #purchasePanel #purchaseMethodGrid > .pur-method-opt {
    padding: 8px 8px !important;
    gap: 6px !important;
  }
}