:root {
  --bg: #070b14;
  --panel: #111827;
  --panel2: #17213a;
  --line: #26344f;
  --text: #e8eefc;
  --muted: #94a3b8;
  --brand: #4f8cff;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --shadow: 0 22px 70px rgba(0, 0, 0, .35)
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: radial-gradient(circle at 20% 0, #182447 0, #070b14 36%, #050812 100%);
  color: var(--text);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, Segoe UI, Arial
}

button,
input,
select,
textarea {
  font: inherit
}

button {
  border: 1px solid var(--line);
  background: #17213a;
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.15s ease, background 0.15s ease, filter 0.1s ease;
  -webkit-tap-highlight-color: transparent
}

button:hover:not(:disabled) {
  border-color: #6b8dca
}

button:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .4);
  filter: brightness(0.92)
}

button:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px
}

button:disabled {
  cursor: not-allowed;
  opacity: .55
}

.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.danger {
  background: #40141f;
  border-color: #7f1d1d;
  color: #fecaca
}

.ghost {
  background: transparent
}

.hidden {
  display: none !important
}

.muted {
  color: var(--muted);
  font-size: 12px
}

.appbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, .75);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 12px
}

.brand b {
  font-size: 17px
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.appbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap
}

.credit-wallet-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 12px;
  background: #0d1425;
  border: 1px solid var(--line);
  border-radius: 999px
}

.credit-balance-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--good);
  white-space: nowrap
}

.credit-buy-header-btn {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px
}

#checkoutModal #payAndConnectBtn.btn-insufficient-credits,
#checkoutModal #payAndConnectBtn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none
}

.icon-btn {
  width: 42px;
  height: 42px;
  padding: 0
}

.page {
  display: none;
  padding: 24px
}

.page.active {
  display: block
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px
}

.hero h1 {
  font-size: 38px;
  margin: 0
}

.hero p {
  margin: 6px 0 0;
  color: var(--muted)
}

.hero-stats {
  display: flex;
  gap: 10px
}

.hero-stats div {
  min-width: 104px;
  background: rgba(17, 24, 39, .82);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px
}

.hero-stats b {
  display: block;
  font-size: 28px
}

.hero-stats span {
  color: var(--muted);
  font-size: 12px
}

.filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px 150px 150px auto auto;
  gap: 10px;
  margin-bottom: 18px
}

.filters input,
.filters select,
.modal input,
.modal select,
.keyboard-box textarea,
.ai-box textarea {
  background: #0d1425;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px;
  width: 100%
}

.view-toggle.active {
  background: #2563eb;
  border-color: #60a5fa
}

.preview-grid-wrap {
  background: rgba(17, 24, 39, .72);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow)
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px
}

.section-title h2 {
  margin: 0
}

.section-title span {
  color: var(--muted)
}

.device-grid.card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px
}

.device-grid.list-view {
  display: grid;
  gap: 10px
}

.device-card {
  background: linear-gradient(180deg, #17213a, #101725);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .25)
}

.device-card.list {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center
}

.preview {
  height: 150px;
  background: radial-gradient(circle at 50% 20%, #24345d, #050812);
  position: relative;
  display: grid;
  place-items: center
}

.device-card.list .preview {
  height: 112px
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.preview .placeholder {
  font-size: 54px;
  opacity: .88
}

.live-dot {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(4, 10, 22, .8);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  color: #bfdbfe
}

.live-dot:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 6px
}

.price-pill {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(4, 10, 22, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 700
}

.device-body {
  padding: 14px
}

.device-title {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 800;
  font-size: 16px
}

.device-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #0b1224;
  border: 1px solid var(--line);
  border-radius: 14px
}

.device-meta {
  margin: 7px 0;
  color: var(--muted);
  font-size: 12px
}

.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0
}

.badge {
  font-size: 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 8px
}

.badge.online {
  color: #bbf7d0;
  border-color: #166534
}

.badge.busy {
  color: #fde68a;
  border-color: #854d0e
}

.badge.offline {
  color: #fecaca;
  border-color: #7f1d1d
}

.device-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px
}

.device-actions button {
  flex: 1
}

.connecting-card {
  max-width: 560px;
  margin: 12vh auto;
  background: rgba(17, 24, 39, .82);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow)
}

.loader {
  width: 64px;
  height: 64px;
  border: 4px solid #26344f;
  border-top-color: var(--brand);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 1s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.progress {
  height: 8px;
  background: #0d1425;
  border-radius: 999px;
  overflow: hidden
}

.progress span {
  display: block;
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, #4f8cff, #22c55e);
  animation: pulse 1.3s ease-in-out infinite
}

@keyframes pulse {
  50% {
    transform: translateX(45%)
  }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  height: calc(100vh - 120px)
}

.stream-area,
.tool-panel {
  background: rgba(17, 24, 39, .82);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow)
}

.stream-area {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.session-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line)
}

.session-top h1 {
  margin: 0
}

.session-top p {
  margin: 3px 0 0;
  color: var(--muted)
}

.metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.metrics span {
  background: #0d1425;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  font-size: 12px
}

.viewer {
  flex: 1;
  position: relative;
  overflow: auto;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, #192644, #030712);
  border-radius: 0 0 24px 24px
}

.viewer canvas,
.viewer img,
.viewer video#jmuxerPlayer {
  background: #020617;
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .55);
  cursor: default;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
  display: none
}

.viewer canvas.active,
.viewer img.active,
.viewer video#jmuxerPlayer.active {
  display: block
}

.viewer.fit canvas,
.viewer.fit img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%
}

#emptyState {
  position: absolute;
  z-index: 22;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 18px;
  border-radius: 14px;
  text-align: center;
  line-height: 1.45;
  font-weight: 600;
  color: #f8fafc;
  background: rgba(15, 23, 42, .94);
  border: 1px solid rgba(148, 163, 184, .45);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
  pointer-events: none
}

.stream-interrupt-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 30;
  max-width: min(360px, calc(100% - 32px));
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, .65);
  background: rgba(15, 23, 42, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  pointer-events: none
}

.stream-interrupt-banner.hidden {
  display: none !important
}

.stream-interrupt-title {
  font-size: 15px;
  font-weight: 800;
  color: #fef3c7;
  letter-spacing: .02em
}

.stream-interrupt-sub {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.4
}

/* Full-viewer wait until first frame + highlight Home as the “wake the UI” hint */
.stream-boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(8px);
  border-radius: inherit;
  pointer-events: none
}

.stream-boot-inner {
  max-width: 360px;
  color: #f8fafc
}

.stream-boot-title {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #f8fafc
}

.stream-boot-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #e2e8f0
}

.stream-boot-hint strong {
  color: #fff;
  font-weight: 800
}

.stream-boot-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, .35);
  border-top-color: var(--brand, #2563eb);
  animation: stream-boot-spin .85s linear infinite
}

@keyframes stream-boot-spin {
  to {
    transform: rotate(360deg)
  }
}

body.stream-awaiting-first-frame .control-grid button[data-cmd="WAKE"],
body.stream-awaiting-first-frame .control-grid button[data-cmd="RECENTS"],
body.stream-awaiting-first-frame .control-grid button[data-cmd="VOLUME_DOWN"] {
  position: relative;
  animation: caiot-recents-nudge 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .45), 0 8px 22px rgba(37, 99, 235, .2);
  border-color: rgba(96, 165, 250, .85) !important
}

@keyframes caiot-recents-nudge {

  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1)
  }

  50% {
    transform: translateY(-2px);
    filter: brightness(1.08)
  }
}

.tool-panel {
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px
}

.receipt,
.ownership,
.keyboard-box,
.ai-box,
.file-box,
.range-row {
  border: 1px solid var(--line);
  background: #0d1425;
  border-radius: 18px;
  padding: 12px
}

.range-row span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  margin-bottom: 8px
}

.range-row input {
  width: 100%;
  accent-color: var(--brand)
}

.tool-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.control-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  min-height: 66px
}

.control-grid span {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px
}

.keyboard-box,
.ai-box,
.file-box {
  display: grid;
  gap: 8px
}

.keyboard-box textarea,
.ai-box textarea {
  min-height: 64px;
  resize: vertical
}

.ai-box pre {
  white-space: pre-wrap;
  margin: 0;
  background: #050812;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  color: #cbd5e1;
  max-height: 210px;
  overflow: auto
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 18px
}

.modal-card {
  position: relative;
  width: min(520px, 100%);
  background: #111827;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow)
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0
}

.modal label {
  display: block;
  margin: 12px 0
}

.checkout-device {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #0d1425;
  border: 1px solid var(--line);
  border-radius: 18px
}

.quote-box {
  background: #0b1224;
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0
}

.checkout-credit-banner {
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .35);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.45
}

.checkout-credit-banner.credit-banner-warn {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .4)
}

.credit-pack-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0
}

.credit-pack-choice {
  min-width: 72px;
  border-radius: 12px
}

.credit-pack-choice.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand)
}

.credit-purchase-total {
  margin-bottom: 0
}

.credit-result-body {
  margin: 0 0 8px;
  line-height: 1.55;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto
}

.credit-result-actions {
  justify-content: center
}

.credit-result-actions #creditResultOk {
  min-width: 140px;
  justify-content: center;
  text-align: center
}

.credit-result-icon.warn span {
  color: var(--warn)
}

.signup-celebrate-modal {
  z-index: 55
}

.signup-celebrate-modal .modal-card {
  position: relative;
  z-index: 2;
  overflow: visible;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease
}

.signup-celebrate-modal.is-visible .modal-card {
  transform: scale(1) translateY(0);
  opacity: 1
}

.signup-celebrate-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1
}

.signup-confetti-piece {
  position: absolute;
  top: -8%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: signupConfettiFall 2.4s ease-in forwards
}

@keyframes signupConfettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg)
  }
  100% {
    opacity: 0;
    transform: translateY(110vh) rotate(720deg)
  }
}

.signup-celebrate-card {
  max-width: 440px;
  padding-top: 28px
}

.signup-celebrate-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(14, 165, 233, .2));
  border: 1px solid rgba(34, 197, 94, .45);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .35);
  animation: signupCelebratePop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) 0.15s both,
    signupCelebrateGlow 2s ease-in-out 0.5s infinite
}

.signup-celebrate-icon .material-symbols-rounded {
  font-size: 40px;
  color: #22c55e
}

@keyframes signupCelebratePop {
  0% {
    transform: scale(0.4);
    opacity: 0
  }
  100% {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes signupCelebrateGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .25)
  }
  50% {
    box-shadow: 0 0 28px 6px rgba(34, 197, 94, .2)
  }
}

.signup-celebrate-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22c55e
}

.signup-celebrate-minutes-wrap {
  margin: 8px 0 14px;
  line-height: 1.1
}

.signup-celebrate-minutes {
  display: block;
  font-size: clamp(52px, 12vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 55%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: signupMinutesShine 2.5s ease-in-out 0.4s infinite
}

.signup-celebrate-minutes-label {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted)
}

@keyframes signupMinutesShine {
  0%, 100% {
    filter: brightness(1)
  }
  50% {
    filter: brightness(1.15)
  }
}

.signup-celebrate-body {
  margin: 0 auto 10px;
  max-width: 360px;
  line-height: 1.55;
  font-size: 15px
}

.signup-celebrate-balance {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand)
}

.signup-celebrate-actions {
  justify-content: center;
  margin-top: 8px
}

.signup-celebrate-actions .primary {
  min-width: 180px;
  animation: signupCelebratePop 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s both
}

[data-theme="light"] .signup-celebrate-icon {
  background: linear-gradient(135deg, #dcfce7, #e0f2fe) !important;
  border-color: #86efac !important
}

[data-theme="light"] .signup-celebrate-kicker {
  color: #15803d !important
}

.full {
  width: 100%;
  padding: 13px
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #17213a;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  z-index: 80
}

.tap-pulse {
  position: fixed;
  z-index: 9999;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid #93c5fd;
  border-radius: 999px;
  pointer-events: none;
  animation: tap .52s ease-out forwards;
  box-shadow: 0 0 0 8px rgba(147, 197, 253, .15)
}

@keyframes tap {
  from {
    transform: scale(.45);
    opacity: .95
  }

  to {
    transform: scale(1.35);
    opacity: 0
  }
}

@media(max-width:980px) {

  .filters,
  .workspace {
    grid-template-columns: 1fr
  }

  .workspace {
    height: auto
  }

  .tool-panel {
    max-height: none
  }

  .hero {
    display: block
  }

  .hero-stats {
    margin-top: 14px
  }

  .device-card.list {
    grid-template-columns: 1fr
  }

  .page {
    padding: 14px
  }
}

.device-location,
.device-health-mini {
  color: #cbd5e1;
  font-size: 12px;
  margin: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.device-health-mini {
  color: #93a4bd
}

.session-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px
}

.countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 36px;
  border-radius: 999px;
  background: #0f2a1b;
  color: #bbf7d0;
  border: 1px solid #166534;
  font-weight: 900;
  letter-spacing: .03em
}

.countdown.warn {
  background: #450a0a;
  color: #fecaca;
  border-color: #ef4444;
  animation: countdownFlash .8s ease-in-out infinite
}

.countdown.ended {
  background: #7f1d1d;
  color: #fff;
  border-color: #fecaca
}

@keyframes countdownFlash {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .25)
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, .08)
  }
}

.viewer.zoomed {
  place-items: start center;
  padding: 24px
}

.viewer.zoomed canvas,
.viewer.zoomed img {
  max-width: none !important;
  max-height: none !important
}

.range-row input:disabled {
  opacity: .45
}

/* Final marketplace UX fixes: fixed viewer frame and stable zoom behavior */
.stream-area {
  min-height: 0;
  overflow: hidden
}

.workspace {
  min-height: 0
}

.viewer {
  min-height: 420px;
  height: 100%;
  overflow: auto;
  align-content: center;
  justify-content: center;
  place-items: center;
  padding: 18px
}

.viewer.zoomed {
  place-items: center;
  padding: 18px
}

.viewer canvas,
.viewer img {
  transform-origin: center center;
  flex: 0 0 auto
}

.range-row input {
  opacity: 1 !important;
  cursor: pointer
}

.active-session-card {
  outline: 2px solid rgba(79, 140, 255, .85);
  box-shadow: 0 0 0 6px rgba(79, 140, 255, .12), 0 18px 46px rgba(0, 0, 0, .35)
}

.stripe-sim-card {
  background: #0b1224;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0;
  display: grid;
  gap: 9px
}

.stripe-head,
.stripe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.stripe-row {
  color: var(--muted);
  font-size: 12px
}

.stripe-row b {
  color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace
}

.stripe-progress {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 10px;
  color: #cbd5e1;
  background: #050812
}

.stripe-progress.ok {
  border-color: #166534;
  color: #bbf7d0
}

.stripe-progress.busy {
  border-color: #1d4ed8;
  color: #bfdbfe
}

.stripe-progress.fail {
  border-color: #7f1d1d;
  color: #fecaca
}

/* APK Upload & Launch workflow */
.file-box #uploadLaunchBtn {
  width: 100%;
  margin: 8px 0 10px;
}

.apk-progress-wrap {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 14px;
  background: rgba(15, 23, 42, .55)
}

.apk-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 800
}

.apk-stage b {
  color: #93c5fd;
  font-variant-numeric: tabular-nums
}

.apk-progress-wrap .bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .20);
  overflow: hidden
}

.apk-progress-wrap .bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  border-radius: 999px;
  transition: width .18s ease
}

.apk-progress-wrap.done .bar span {
  background: linear-gradient(90deg, #16a34a, #22c55e)
}

.apk-progress-wrap.error .bar span {
  background: linear-gradient(90deg, #dc2626, #f97316)
}

/* Google Sign-In gate */
.login-page {
  display: none;
  min-height: calc(100vh - 90px);
  place-items: center;
  padding: 24px
}

.login-page.active {
  display: grid
}

.login-card {
  width: min(460px, 92vw);
  background: linear-gradient(180deg, rgba(17, 24, 39, .95), rgba(15, 23, 42, .92));
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow)
}

.login-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block
}

.login-card h1 {
  margin: 4px 0 8px;
  font-size: 28px
}

.signup-credit-offer {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(73, 211, 255, .35);
  background: rgba(73, 211, 255, .1);
  color: #dff7ff;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
}
.signup-credit-offer.hidden {
  display: none !important;
}
[data-theme="light"] .signup-credit-offer {
  color: #5f3700 !important;
  background: #fff7df !important;
  border-color: #d69e2e !important;
}
.login-card p {
  color: var(--muted);
  margin: 0 0 20px
}

.auth-flow-title {
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 6px;
  color: #e5e7eb;
  text-align: center
}

.forgot-lead,
.recovery-lead {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 18px
}

.google-button-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin: 14px 0
}

.login-status {
  color: #cbd5e1;
  font-size: 13px;
  margin-top: 14px;
  min-height: 20px
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1425;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 6px 5px 8px
}

.account-chip img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover
}

.account-chip span {
  font-size: 13px;
  color: #e5e7eb;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.account-chip button {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px
}

.owner-pill {
  position: absolute;
  left: 12px;
  top: 46px;
  max-width: calc(100% - 24px);
  background: rgba(4, 10, 22, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  color: #dbeafe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.device-card.list .owner-pill {
  top: 42px
}

@media(max-width:720px) {
  .account-chip span {
    display: none
  }

  .login-card {
    padding: 26px
  }

  .owner-pill {
    font-size: 10px
  }
}

/* CaIoT global light theme layer */
:root,
[data-theme="light"] {
  --caiot-bg: #f8fafc;
  --caiot-surface: #ffffff;
  --caiot-surface-2: #f1f5f9;
  --caiot-text: #0f172a;
  --caiot-muted: #64748b;
  --caiot-border: #e2e8f0;
  --caiot-primary: #2563eb;
  --caiot-primary-contrast: #ffffff;
  --caiot-danger: #dc2626;
  --caiot-success: #16a34a;
  --caiot-warning: #f59e0b;
  --caiot-shadow: 0 20px 60px rgba(15, 23, 42, .12);
}
html,
body,
.shell {
  background: var(--caiot-bg) !important;
  color: var(--caiot-text) !important;
}

.appbar,
.login-card,
.hero,
.preview-grid-wrap,
.device-card,
.tool-panel,
.stream-area,
.connecting-card,
.modal-card,
.receipt,
.keyboard-box,
.ai-box,
.file-box,
.stripe-sim-card {
  background: var(--caiot-surface) !important;
  color: var(--caiot-text) !important;
  border-color: var(--caiot-border) !important;
  box-shadow: var(--caiot-shadow);
}

input,
select,
textarea {
  background: var(--caiot-surface-2) !important;
  color: var(--caiot-text) !important;
  border-color: var(--caiot-border) !important;
}

.muted,
.device-meta,
.device-location,
.login-card p,
.hero p,
.device-health-mini,
.section-title span {
  color: var(--caiot-muted) !important;
}

.primary,
button.primary {
  background: var(--caiot-primary) !important;
  color: var(--caiot-primary-contrast) !important;
  border-color: var(--caiot-primary) !important;
}

.danger,
button.danger {
  background: var(--caiot-danger) !important;
  color: white !important;
}

.viewer,
.preview {
  background: #020617 !important;
}

.theme-toggle,
.google-btn {
  border: 1px solid var(--caiot-border);
  border-radius: 999px;
  background: var(--caiot-surface-2);
  color: var(--caiot-text);
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 14px;
  width: 100%;
  min-height: 48px;
  background: var(--caiot-surface) !important;
}

.google-g {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-weight: 900;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 0 1px #e5e7eb inset;
}

.badge.online,
.badge.available {
  background: rgba(34, 197, 94, .14) !important;
  color: var(--caiot-success) !important;
}

.badge.busy {
  background: rgba(245, 158, 11, .16) !important;
  color: var(--caiot-warning) !important;
}

.badge.offline {
  background: rgba(239, 68, 68, .14) !important;
  color: var(--caiot-danger) !important;
}

/* Production contrast pass: fix washed-out text in light mode. */
[data-theme="light"] body,
[data-theme="light"] .appbar,
[data-theme="light"] .login-card,
[data-theme="light"] .hero,
[data-theme="light"] .preview-grid-wrap,
[data-theme="light"] .device-card,
[data-theme="light"] .device-body,
[data-theme="light"] .tool-panel,
[data-theme="light"] .stream-area,
[data-theme="light"] .connecting-card,
[data-theme="light"] .modal-card,
[data-theme="light"] .receipt,
[data-theme="light"] .ownership,
[data-theme="light"] .keyboard-box,
[data-theme="light"] .ai-box,
[data-theme="light"] .file-box,
[data-theme="light"] .stripe-sim-card,
[data-theme="light"] .checkout-device,
[data-theme="light"] .quote-box,
[data-theme="light"] .account-chip,
[data-theme="light"] .credit-wallet-bar {
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .credit-balance-label {
  color: #15803d !important;
}

[data-theme="light"] .muted,
[data-theme="light"] .device-meta,
[data-theme="light"] .device-location,
[data-theme="light"] .device-health-mini,
[data-theme="light"] .section-title span,
[data-theme="light"] .hero p,
[data-theme="light"] .login-card p,
[data-theme="light"] .metrics span,
[data-theme="light"] .control-grid span {
  color: #334155 !important;
}

[data-theme="light"] .auth-flow-title {
  color: #0f172a !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .metrics span,
[data-theme="light"] .range-row,
[data-theme="light"] .apk-progress-wrap,
[data-theme="light"] .stripe-progress,
[data-theme="light"] .device-icon {
  background: #f8fafc !important;
  color: #0b1220 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] button:not(.primary):not(.danger),
[data-theme="light"] .theme-toggle,
[data-theme="light"] .google-btn {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
  border-color: #94a3b8 !important;
}

[data-theme="light"] .badge {
  color: #1e293b !important;
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

[data-theme="light"] .live-dot,
[data-theme="light"] .price-pill,
[data-theme="light"] .owner-pill {
  background: rgba(255, 255, 255, .92) !important;
  color: #0b1220 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .ai-box pre {
  background: #f8fafc !important;
  color: #0b1220 !important;
  border-color: #cbd5e1 !important;
}


/* Unified device state + card UX refresh */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: -3px
}

.device-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.device-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--caiot-border);
  opacity: .95
}

.device-card.state-available:before {
  background: #16a34a
}

.device-card.state-live:before {
  background: #2563eb
}

.device-card.state-busy:before,
.device-card.state-mine:before {
  background: #f59e0b
}

.device-card.state-offline:before {
  background: #dc2626
}

.device-card.state-reserved:before {
  background: #a855f7
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(15, 23, 42, .18) !important
}

.state-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .94);
  color: #0f172a;
  border: 1px solid rgba(203, 213, 225, .9);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .20)
}

.state-badge.live {
  color: #1d4ed8
}

.state-badge.available {
  color: #15803d
}

.state-badge.busy,
.state-badge.mine {
  color: #b45309
}

.state-badge.offline {
  color: #b91c1c
}

.state-badge.reserved {
  color: #7e22ce
}

.preview-toolbar {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  gap: 7px;
  opacity: 0;
  transform: translateY(-4px);
  transition: .16s ease
}

.device-card:hover .preview-toolbar {
  opacity: 1;
  transform: translateY(0)
}

.preview-toolbar button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92) !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, .9) !important;
  padding: 0 !important
}

.preview-toolbar button:disabled {
  opacity: .45;
  cursor: not-allowed
}

.device-title {
  gap: 10px
}

.device-title span:last-child {
  font-weight: 900;
  letter-spacing: -.01em
}

.device-location {
  display: flex;
  align-items: center;
  gap: 4px
}

.device-actions {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px
}

.device-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px
}

.device-actions button:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: saturate(.65)
}

.badge.live {
  background: rgba(37, 99, 235, .12) !important;
  color: #2563eb !important
}

.badge.available {
  background: rgba(22, 163, 74, .12) !important;
  color: #15803d !important
}

.badge.busy,
.badge.mine {
  background: rgba(245, 158, 11, .16) !important;
  color: #b45309 !important
}

.badge.reserved {
  background: rgba(168, 85, 247, .15) !important;
  color: #7e22ce !important
}

.badge.offline,
.badge.error {
  background: rgba(220, 38, 38, .13) !important;
  color: #b91c1c !important
}

.hero-stats .stat {
  border-radius: 18px
}

.filters {
  align-items: center
}

.filters input {
  min-height: 48px
}

.filters select,
.filters button {
  min-height: 48px
}

.price-pill {
  font-weight: 900
}

.owner-pill {
  top: auto !important;
  bottom: 12px;
  left: 12px;
  right: 12px;
  max-width: none;
  text-align: center
}

.live-dot {
  display: none !important
}

[data-theme="light"] .device-card:hover {
  box-shadow: 0 22px 70px rgba(15, 23, 42, .16) !important
}

[data-theme="light"] .state-badge,
[data-theme="light"] .preview-toolbar button {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important
}
.device-card.state-offline .preview {
  filter: saturate(.55)
}

.device-card.state-busy:not(.active-session-card) .primary.connect {
  background: #64748b !important;
  border-color: #64748b !important;
  color: #fff !important
}

/* 2026-04 UX pass: restore original device-card visual language while keeping canonical state logic. */
.device-card.classic-card:before {
  display: none !important
}

.device-card.classic-card {
  background: linear-gradient(180deg, #17213a, #101725) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease
}

.device-card.classic-card:hover {
  transform: translateY(-2px)
}

.device-card.classic-card .preview-toolbar,
.device-card.classic-card .state-badge {
  display: none !important
}

.device-card.classic-card .live-dot {
  display: inline-flex !important;
  align-items: center;
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(4, 10, 22, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  color: #bfdbfe
}

.device-card.classic-card .live-dot:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 6px
}

.device-card.classic-card .live-dot.busy:before,
.device-card.classic-card .live-dot.mine:before {
  background: var(--warn)
}

.device-card.classic-card .live-dot.offline:before,
.device-card.classic-card .live-dot.error:before {
  background: var(--bad)
}

.device-card.classic-card .live-dot.reserved:before {
  background: #a855f7
}

.device-card.classic-card .owner-pill {
  position: absolute !important;
  left: 12px !important;
  top: 46px !important;
  right: auto !important;
  bottom: auto !important;
  max-width: calc(100% - 24px) !important;
  background: rgba(4, 10, 22, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  color: #dbeafe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left
}

.device-card.classic-card .price-pill {
  right: 12px;
  bottom: 12px
}

.device-card.classic-card .device-actions {
  display: flex !important
}

.device-card.classic-card .device-actions button {
  flex: 1
}

.device-card.classic-card .badge.live,
.device-card.classic-card .badge.available,
.device-card.classic-card .badge.busy,
.device-card.classic-card .badge.mine,
.device-card.classic-card .badge.offline,
.device-card.classic-card .badge.reserved,
.device-card.classic-card .badge.error {
  background: transparent !important
}

.device-card.classic-card .badge.available {
  color: #bbf7d0 !important;
  border-color: #166534 !important
}

.device-card.classic-card .badge.live {
  color: #bfdbfe !important;
  border-color: #1d4ed8 !important
}

.device-card.classic-card .badge.busy,
.device-card.classic-card .badge.mine,
.device-card.classic-card .badge.reserved {
  color: #fde68a !important;
  border-color: #854d0e !important
}

.device-card.classic-card .badge.offline,
.device-card.classic-card .badge.error {
  color: #fecaca !important;
  border-color: #7f1d1d !important
}

[data-theme="light"] .device-card.classic-card {
  background: #fff !important;
  color: #111827 !important;
  border-color: #d7dee9 !important
}

[data-theme="light"] .device-card.classic-card .preview {
  background: radial-gradient(circle at 50% 20%, #dbeafe, #eef2ff) !important
}

[data-theme="light"] .device-card.classic-card .device-icon {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #d7dee9 !important
}

[data-theme="light"] .device-card.classic-card .device-meta,
[data-theme="light"] .device-card.classic-card .device-health-mini,
[data-theme="light"] .device-card.classic-card .device-location {
  color: #475569 !important
}

[data-theme="light"] .device-card.classic-card .badge {
  color: #475569 !important;
  border-color: #cbd5e1 !important
}

/* 2026-04 Session tools polish. */
.live-controls-panel {
  gap: 14px !important;
  padding: 14px !important
}

.tool-section {
  border: 1px solid var(--caiot-border, var(--line));
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  border-radius: 20px;
  padding: 13px;
  display: grid;
  gap: 10px
}

.tool-section-head {
  display: flex;
  align-items: center;
  gap: 10px
}

.tool-section-head>.material-symbols-rounded {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(79, 140, 255, .14);
  color: #93c5fd;
  font-size: 22px
}

.tool-section-head b {
  display: block;
  font-size: 14px
}

.tool-section-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 1px
}

.icon-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.icon-row.three {
  grid-template-columns: repeat(3, 1fr)
}

.icon-row button,
.tool-section button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px
}

.full-action {
  width: 100%;
  font-weight: 900
}

.control-owner-card {
  background: linear-gradient(135deg, rgba(79, 140, 255, .16), rgba(34, 197, 94, .08))
}

.pro-controls {
  grid-template-columns: repeat(3, 1fr) !important
}

.pro-controls button {
  min-height: 74px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .58)
}

.pro-controls button .material-symbols-rounded {
  font-size: 26px
}

.pro-controls button small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px
}

.session-summary-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, .13), rgba(79, 140, 255, .12)) !important;
  border-radius: 20px !important
}

.live-controls-panel .keyboard-box,
.live-controls-panel .ai-box,
.live-controls-panel .file-box {
  border-radius: 20px !important
}

.live-controls-panel textarea {
  border-radius: 14px
}

.live-controls-panel .bar {
  height: 8px;
  background: #0b1224;
  border-radius: 999px;
  overflow: hidden
}

.live-controls-panel .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4f8cff, #22c55e)
}

.apk-stage {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px
}

.apk-stage b {
  color: var(--text)
}

[data-theme="light"] .tool-section {
  background: #fff !important;
  border-color: #d7dee9 !important;
  color: #111827 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06)
}

[data-theme="light"] .tool-section-head small,
[data-theme="light"] .pro-controls button small {
  color: #64748b !important
}

[data-theme="light"] .tool-section-head>.material-symbols-rounded {
  background: #eff6ff !important;
  color: #2563eb !important
}

[data-theme="light"] .pro-controls button {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #d7dee9 !important
}

[data-theme="light"] .session-summary-card {
  background: linear-gradient(135deg, #ecfdf5, #eff6ff) !important
}

[data-theme="light"] .live-controls-panel .bar {
  background: #e5e7eb !important
}

/* 2026-04-30 cleanup: restore original gallery cards and rebuild session tools without icon-font text overlap. */
.device-card.classic-card .preview-toolbar,
.device-card.classic-card .state-badge {
  display: none !important
}

.device-card.classic-card .device-location .material-symbols-rounded {
  display: none !important
}

.device-card.classic-card .live-dot {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  line-height: 1;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.device-card.classic-card .owner-pill {
  display: block !important;
  line-height: 1.15;
  max-width: calc(100% - 24px)
}

.device-card.classic-card .device-health-mini {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px
}

.device-card.classic-card .device-actions .previewBtn .material-symbols-rounded {
  display: none !important
}

.device-card.classic-card .device-actions button {
  white-space: nowrap
}

.device-card.classic-card.active-session-card {
  border-color: #6ea0ff !important;
  box-shadow: 0 0 0 2px rgba(79, 140, 255, .25), 0 20px 60px rgba(15, 23, 42, .18) !important
}

.workspace {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: stretch;
  height: calc(100vh - 112px);
  overflow: hidden
}

.tool-panel.live-controls-panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, rgba(17, 24, 39, .94), rgba(15, 23, 42, .94)) !important
}

.live-controls-panel * {
  min-width: 0
}

.live-controls-panel .material-symbols-rounded {
  display: none !important
}

.tool-icon {
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif !important;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.tool-section {
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .64)) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  display: grid;
  gap: 12px;
  box-shadow: none !important
}

.tool-section-head {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px !important
}

.tool-section-head>.tool-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(96, 165, 250, .14);
  color: #bfdbfe;
  font-size: 20px
}

.tool-section-head b {
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tool-section-head small {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tool-row.icon-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 9px !important
}

.tool-row.icon-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important
}

.tool-row button,
.tool-section button {
  min-height: 42px;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-weight: 800 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 9px 11px !important
}

.tool-row.three button {
  font-size: 12px;
  padding: 9px 8px !important
}

/* Quality / reconnect / refresh video: compact type, full labels (no ellipsis clip) */
.tool-row.icon-row.three.session-stream-actions button {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 6px 5px !important;
  min-height: 40px !important;
  gap: 4px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
  text-align: center !important;
  hyphens: none;
  word-break: normal
}

.tool-row.icon-row.three.session-stream-actions button .tool-icon {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0
}

.range-row {
  display: grid;
  gap: 8px
}

.range-row span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px
}

.range-row b {
  color: var(--text);
  font-size: 12px
}

.control-owner-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(34, 197, 94, .09)) !important;
  border-color: rgba(96, 165, 250, .32) !important
}

.session-summary-card {
  background: linear-gradient(135deg, rgba(22, 101, 52, .34), rgba(30, 64, 175, .26)) !important;
  border: 1px solid rgba(134, 239, 172, .2) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  line-height: 1.35
}

.session-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.countdown {
  background: rgba(34, 197, 94, .18);
  color: #bbf7d0;
  border: 1px solid rgba(74, 222, 128, .35);
  padding: 7px 11px;
  border-radius: 999px;
  font-weight: 900
}

.full-action {
  width: 100%;
  min-height: 48px !important
}

.pro-controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important
}

.pro-controls button {
  min-height: 70px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, .48) !important
}

.pro-controls button .tool-icon {
  font-size: 22px
}

.pro-controls button small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap
}

.keyboard-box textarea,
.ai-box textarea {
  min-height: 78px;
  resize: vertical
}

.ai-box pre {
  max-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word
}

.file-box input {
  max-width: 100%
}

.apk-progress-wrap {
  display: grid;
  gap: 7px
}

[data-theme="light"] .tool-panel.live-controls-panel {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #d7dee9 !important
}

[data-theme="light"] .tool-section {
  background: #fff !important;
  border-color: #d7dee9 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important
}

[data-theme="light"] .tool-section-head b,
[data-theme="light"] .range-row b {
  color: #111827 !important
}

[data-theme="light"] .tool-section-head small,
[data-theme="light"] .range-row span,
[data-theme="light"] .pro-controls button small {
  color: #475569 !important
}

[data-theme="light"] .tool-section-head>.tool-icon {
  background: #eff6ff !important;
  color: #1d4ed8 !important
}

[data-theme="light"] .pro-controls button {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important
}

[data-theme="light"] .session-summary-card {
  background: linear-gradient(135deg, #ecfdf5, #eff6ff) !important;
  color: #111827 !important;
  border-color: #bfdbfe !important
}

[data-theme="light"] .countdown {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important
}

@media (max-width:1100px) {
  .workspace {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible
  }

  .tool-panel.live-controls-panel {
    height: auto;
    max-height: none
  }

  .tool-row.icon-row.three {
    grid-template-columns: 1fr 1fr !important
  }

  .pro-controls {
    grid-template-columns: 1fr 1fr 1fr !important
  }
}

/* Evidence tools, gallery, preview, and end-session cleanup UX */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga'
}

.evidence-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important
}

.evidence-btn {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  padding: 12px !important;
  border-radius: 16px !important
}

.evidence-btn .tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 23px
}

.record-action .tool-icon {
  background: rgba(239, 68, 68, .16);
  color: #f87171
}

.shot-action .tool-icon {
  background: rgba(59, 130, 246, .16);
  color: #60a5fa
}

.btn-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15
}

.btn-copy b {
  font-weight: 900
}

.btn-copy small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px
}

.gallery-action {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(79, 140, 255, .16), rgba(34, 197, 94, .10)) !important
}

.gallery-action span:nth-child(2) {
  font-weight: 850
}

.gallery-action b {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(79, 140, 255, .24);
  border: 1px solid rgba(125, 169, 255, .35)
}

.media-modal {
  max-width: 780px
}

.gallery-modal {
  max-width: 1040px;
  width: min(1040px, 94vw);
  max-height: 88vh;
  overflow: auto
}

.confirm-modal {
  max-width: 560px;
  text-align: center
}

.media-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px
}

.media-modal-head h2 {
  margin: 0 0 4px
}

.download-pill,
.evidence-card-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900
}

.media-preview-body {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(3, 7, 18, .35);
  display: grid;
  place-items: center;
  overflow: hidden
}

.media-preview-image,
.media-preview-video {
  max-width: 100%;
  max-height: 62vh;
  display: block
}

.media-file-preview {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 42px;
  color: var(--muted)
}

.media-file-preview .material-symbols-rounded {
  font-size: 64px;
  color: var(--brand);
  margin-bottom: 10px
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px
}

.modal-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.modal-actions.split {
  justify-content: space-between
}

.evidence-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px
}

.evidence-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.evidence-card>img,
.evidence-card>video,
.file-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #020617;
  display: grid;
  place-items: center
}

.file-thumb .material-symbols-rounded {
  font-size: 54px;
  color: var(--muted)
}

.evidence-card>div:not(.file-thumb) {
  padding: 12px
}

.evidence-card b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.evidence-card small {
  display: block;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px
}

.evidence-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px 12px !important
}

.evidence-card-actions button,
.evidence-card-actions a {
  justify-content: center;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12px
}

.evidence-card-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.empty-gallery {
  grid-column: 1/-1;
  text-align: center;
  padding: 54px 20px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 20px
}

.empty-gallery .material-symbols-rounded {
  font-size: 60px;
  color: var(--brand)
}

.confirm-icon {
  width: 68px;
  height: 68px;
  border-radius: 24px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: rgba(245, 158, 11, .15);
  color: #f59e0b
}

.confirm-icon .material-symbols-rounded {
  font-size: 38px
}

.confirm-callout {
  text-align: left;
  border: 1px solid rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .10);
  border-radius: 16px;
  padding: 12px 14px;
  margin-top: 14px;
  color: var(--text)
}

[data-theme="light"] .media-preview-body {
  background: #f8fafc
}

[data-theme="light"] .evidence-card {
  background: #fff
}

[data-theme="light"] .file-thumb {
  background: #eef2f7
}

[data-theme="light"] .download-pill,
[data-theme="light"] .evidence-card-actions a {
  color: #fff
}


/* 2026-04-30 evidence gallery UX repair */
.gallery-modal {
  max-width: 1120px !important;
  width: min(1120px, 94vw) !important
}

.media-modal-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px
}

.download-pill {
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22)
}

.media-preview-body {
  background: linear-gradient(180deg, rgba(15, 23, 42, .32), rgba(2, 6, 23, .22)) !important
}

.file-preview-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(79, 140, 255, .14);
  font-size: 38px;
  margin: 0 auto 12px
}

.evidence-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important
}

.evidence-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .18);
  transition: transform .15s ease, border-color .15s ease
}

.evidence-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .45) !important
}

.evidence-card>img,
.evidence-card>video,
.file-thumb {
  height: 172px !important;
  background: linear-gradient(135deg, #020617, #111827) !important
}

.evidence-card-body {
  padding: 13px 14px 8px !important
}

.evidence-card-body b {
  font-size: 14px;
  color: var(--text)
}

.evidence-card-body small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px
}

.evidence-card-body em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
  opacity: .78;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.evidence-card-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 10px 14px 14px !important
}

.evidence-card-actions button,
.evidence-card-actions a {
  min-height: 40px;
  border-radius: 13px !important;
  font-weight: 900 !important
}

.empty-gallery {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  padding: 70px 24px !important
}

.empty-gallery-icon {
  font-size: 56px;
  margin-bottom: 10px
}

.empty-gallery b {
  display: block;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px
}

.empty-gallery p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--muted)
}

[data-theme="light"] .media-preview-body {
  background: #f8fafc !important
}

[data-theme="light"] .evidence-card {
  background: #fff !important;
  border-color: #d7dee9 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08)
}

[data-theme="light"] .evidence-card>img,
[data-theme="light"] .evidence-card>video,
[data-theme="light"] .file-thumb {
  background: linear-gradient(135deg, #e2e8f0, #f8fafc) !important
}

[data-theme="light"] .file-preview-icon {
  background: #eff6ff;
  color: #1d4ed8
}


/* APK workflow and Appium automation polish */
.apk-progress-wrap {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 16px;
  background: rgba(15, 23, 42, .45)
}

.apk-progress-wrap .bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .22);
  overflow: hidden
}

.apk-progress-wrap .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  transition: width .25s ease
}

.apk-progress-wrap.done .bar span {
  background: linear-gradient(90deg, #22c55e, #16a34a)
}

.apk-progress-wrap.error .bar span {
  background: linear-gradient(90deg, #fb7185, #ef4444)
}

.apk-stage {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted, #94a3b8)
}

.apk-stage b {
  color: var(--text, #e5e7eb)
}

.appium-box .appium-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(6, 182, 212, .08));
  border: 1px solid rgba(96, 165, 250, .22)
}

.appium-box code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 10px;
  border-radius: 12px;
  background: rgba(2, 6, 23, .48);
  border: 1px solid rgba(148, 163, 184, .22);
  font-size: 11px;
  color: #bfdbfe
}

.appium-box p {
  margin: 0;
  color: var(--muted, #94a3b8);
  font-size: 12px;
  line-height: 1.45
}

.appium-help {
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto
}

.hidden {
  display: none !important
}

body.light .appium-box code {
  background: #f8fafc;
  color: #1e3a8a;
  border-color: #cbd5e1
}

body.light .apk-progress-wrap {
  background: #fff;
  border-color: #cbd5e1
}

/* Session Sharing UX */
.sharing-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, .16), rgba(168, 85, 247, .08)) !important;
  border-color: rgba(96, 165, 250, .28) !important
}

.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.share-actions select {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .72);
  color: var(--text);
  padding: 0 10px;
  font-weight: 800
}

.share-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center
}

.share-link-box input {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .72);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px
}

.viewer-list {
  display: grid;
  gap: 8px
}

.viewer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .38);
  border-radius: 14px;
  padding: 8px
}

.viewer-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.viewer-row b {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap
}

.viewer-row button {
  min-height: 32px !important;
  font-size: 11px !important;
  padding: 6px 9px !important
}

.view-only-session #sendTextBtn,
.view-only-session .control-grid button,
.view-only-session #recordBtn,
.view-only-session #screenshotBtn {
  opacity: .55
}

.view-only-session #keyboardState::after {
  content: ' View-only session.';
  color: #fbbf24
}

[data-theme="light"] .share-actions select,
[data-theme="light"] .share-link-box input {
  background: #fff;
  color: #111827;
  border-color: #d1d5db
}

[data-theme="light"] .viewer-row {
  background: #f8fafc;
  border-color: #e5e7eb
}

/* Production cleanup: centered End Session and simplified sharing */
.session-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(320px, auto) !important;
  align-items: center !important;
  gap: 18px !important
}

.session-title-block {
  min-width: 0
}

.session-title-block h1,
.session-title-block p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.session-end-center {
  display: flex;
  justify-content: center;
  align-items: center
}

.session-end-btn {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 14px 30px rgba(220, 38, 38, .22) !important
}

.share-actions.single {
  grid-template-columns: 1fr !important
}

.sharing-card .viewer-row {
  grid-template-columns: minmax(0, 1fr) auto !important
}

.view-only-session #sendTextBtn,
.view-only-session .control-grid button,
.view-only-session #recordBtn,
.view-only-session #screenshotBtn {
  opacity: 1 !important
}

.view-only-session #keyboardState::after {
  content: '' !important
}

@media(max-width:1100px) {
  .session-top {
    grid-template-columns: 1fr !important
  }

  .session-end-center {
    justify-content: flex-start
  }

  .metrics {
    justify-content: flex-start !important;
    flex-wrap: wrap
  }
}

/* Nearby / Remote device gallery workflow */
.device-scope-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 12px
}

.scope-tab {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  cursor: pointer
}

.scope-tab b {
  font-size: 15px
}

.scope-tab span {
  font-size: 12px;
  color: var(--muted)
}

.scope-tab.active {
  border-color: rgba(79, 140, 255, .75);
  background: linear-gradient(135deg, rgba(79, 140, 255, .22), rgba(34, 197, 94, .10));
  box-shadow: 0 14px 34px rgba(37, 99, 235, .16)
}

.scope-badge {
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .28) !important
}

.hidden {
  display: none !important
}

.section-title>div h2 {
  margin-bottom: 2px
}

.section-title>div p {
  margin: 0;
  font-size: 13px
}

@media(max-width:720px) {
  .device-scope-bar {
    grid-template-columns: 1fr
  }

  .scope-tab {
    min-height: 64px
  }
}

[data-theme="light"] .scope-tab {
  background: #fff
}

.scope-tab:focus-visible {
  outline: 3px solid rgba(79, 140, 255, .42);
  outline-offset: 2px
}

/* Wi-Fi/remote workflow polish */
body.auth-boot .page {
  display: none !important
}

body.auth-boot .appbar {
  visibility: hidden
}

.connection-steps {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left
}

.connection-steps li {
  border: 1px solid var(--line);
  background: #0d1425;
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--muted)
}

.connection-steps li.active {
  color: #dbeafe;
  border-color: #4f8cff;
  background: rgba(79, 140, 255, .12)
}

.connection-steps li.done {
  color: #bbf7d0;
  border-color: #166534;
  background: rgba(34, 197, 94, .10)
}

.device-card.classic-card .previewBtn {
  display: none !important
}

.device-card.classic-card .device-actions {
  grid-template-columns: 1fr !important
}

.empty-devices {
  border: 1px dashed var(--line);
  background: #0d1425;
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  grid-column: 1/-1
}

.empty-devices b {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 6px
}

/* Production fit: keep phone stream comfortable in the workspace instead of filling the whole monitor. Use the zoom slider for larger views. */
.viewer.fit canvas,
.viewer.fit img,
.viewer.fit video#jmuxerPlayer {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important
}

.viewer {
  padding: 22px !important
}


/* Final UX + browser quality polish */
.workspace {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: 18px;
  height: calc(100vh - 104px) !important;
  padding: 16px 22px 18px !important;
}

.stream-area {
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.viewer {
  position: relative !important;
  min-height: 520px !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #020617 !important;
  display: grid !important;
  place-items: center !important;
}

.viewer.fit canvas,
.viewer.fit img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.viewer canvas,
.viewer img,
#webrtcRemoteVideo {
  image-rendering: auto !important;
}

#webrtcRemoteVideo {
  display: block !important;
  object-fit: fill !important;
  background: #020617 !important;
}

body.browser-remote-portal #webrtcRemoteVideo {
  width: var(--caiot-browser-video-width, auto) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

body.webrtc-live #screen,
body.webrtc-live #jpegScreen,
body.webrtc-live #emptyState {
  display: none !important;
}

body.webrtc-live .viewer {
  cursor: crosshair;
}

body.webrtc-live .viewer::after {
  content: 'Tap or drag to control';
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .68);
  border: 1px solid rgba(147, 197, 253, .25);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 800;
  opacity: .0;
  animation: caiotHint 4s ease-out 1;
  pointer-events: none;
  z-index: 7;
}

@keyframes caiotHint {

  0%,
  70% {
    opacity: .9
  }

  100% {
    opacity: 0
  }
}

.metrics span {
  font-weight: 800;
}

@media(max-width:1180px) {
  .workspace {
    grid-template-columns: 1fr !important;
    height: auto !important
  }

  .tool-panel {
    max-height: 680px
  }

  .viewer {
    height: min(72vh, 760px) !important
  }
}


/* Browser public portal mode: browser is Remote Internet only. Electron keeps full USB/Wi-Fi UI. */
body.browser-remote-portal #nearbyDevicesTab,
body.browser-remote-portal .appium-box {
  display: none !important
}

body.browser-remote-portal .device-scope-bar {
  grid-template-columns: 1fr !important
}

body.browser-remote-portal #remoteDevicesTab {
  width: 100%;
  justify-content: flex-start
}

body.browser-remote-portal #deviceScopeTitle::after {
  content: ' · browser';
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  margin-left: 8px
}

body.browser-remote-portal #page-gallery .hero p::after {
  content: ' USB/Wi-Fi local workflows require the Electron desktop app.';
}

body.browser-remote-portal .file-box small::after {
  content: ' · Agent-assisted in browser';
}

/* Final browser remote workspace polish */
body.browser-remote-portal,
body.browser-light-only {
  background: linear-gradient(180deg, #f8fafc 0%, #eef4ff 48%, #f8fafc 100%) !important;
  color: #0f172a !important;
  cursor: default !important;
}

body.browser-remote-portal * {
  cursor: auto !important;
}

body.browser-remote-portal button,
body.browser-remote-portal a,
body.browser-remote-portal input[type="range"] {
  cursor: pointer !important;
}

body.browser-remote-portal .appbar {
  background: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid #dbe5f3 !important;
  box-shadow: 0 10px 35px rgba(15, 23, 42, .06) !important;
}

body.browser-remote-portal .brand b,
body.browser-remote-portal .hero h1,
body.browser-remote-portal .section-title h2,
body.browser-remote-portal .device-title {
  color: #0f172a !important;
}

body.browser-remote-portal .brand span,
body.browser-remote-portal .hero p,
body.browser-remote-portal .section-title span,
body.browser-remote-portal .muted,
body.browser-remote-portal .device-meta {
  color: #64748b !important;
}

/* The web app now requires a real Supabase login, so #signOutBtn must be
   visible (it's the only way for a user to clear their session from the
   appbar). Visibility is driven by the parent #accountChip toggling its
   `.hidden` class via updateAccountUI() in app-production.js. */
body.browser-remote-portal #themeToggleBtn,
body.browser-remote-portal #nearbyDevicesTab,
body.browser-remote-portal .appium-box {
  display: none !important;
}

body.browser-remote-portal .preview-grid-wrap,
body.browser-remote-portal .stream-area,
body.browser-remote-portal .tool-panel,
body.browser-remote-portal .modal-card {
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid #dbe5f3 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10) !important;
  color: #0f172a !important;
}

body.browser-remote-portal .device-card {
  position: relative !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  isolation: isolate !important;
}

/* Overlay ring — stays visible on rounded corners (overflow:hidden clips plain border) */
body.browser-remote-portal .device-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 24px !important;
  border: 1px solid #aec0d8 !important;
  pointer-events: none !important;
  z-index: 4 !important;
  box-sizing: border-box !important;
}

body.browser-remote-portal .device-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 26px 80px rgba(37, 99, 235, .18) !important;
}

body.browser-remote-portal .device-card:hover::after {
  border-color: #93c5fd !important;
}

body.browser-remote-portal .preview {
  background: radial-gradient(circle at 50% 18%, #e0ecff 0%, #f8fbff 60%, #eef4ff 100%) !important;
}

body.browser-remote-portal .device-icon {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

body.browser-remote-portal .badge {
  background: #f8fafc !important;
  border-color: #dbe5f3 !important;
  color: #475569 !important;
}

body.browser-remote-portal .badge.online,
body.browser-remote-portal .badge.available {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #bbf7d0 !important;
}

body.browser-remote-portal .device-actions .primary,
body.browser-remote-portal .primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22) !important;
}

body.browser-remote-portal button {
  background: #ffffff !important;
  border-color: #dbe5f3 !important;
  color: #0f172a !important;
}

body.browser-remote-portal .danger {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}

body.browser-remote-portal input,
body.browser-remote-portal select,
body.browser-remote-portal textarea {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #dbe5f3 !important;
}

body.browser-remote-portal .toast {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18) !important;
  max-width: min(460px, calc(100vw - 32px));
  font-weight: 700;
  line-height: 1.4;
}

body.browser-remote-portal .viewer {
  background: linear-gradient(135deg, #0f172a, #020617) !important;
  border-radius: 0 0 24px 24px !important;
  min-height: 560px !important;
  padding: 24px !important;
  overflow: auto !important;
}

body.browser-remote-portal #webrtcRemoteVideo {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  background: #020617 !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 80px rgba(0, 0, 0, .45) !important;
  object-fit: fill !important;
  touch-action: none !important;
  outline: none !important;
  max-width: 100%;
  max-height: 100%;
}

body.browser-remote-portal .viewer.zoomed #webrtcRemoteVideo {
  max-width: none !important;
  max-height: none !important;
}

body.browser-remote-portal .viewer #emptyState {
  background: rgba(15, 23, 42, .94);
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, .45);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}

body.browser-remote-portal .scope-tab:not(.active),
body.browser-remote-portal #remoteDevicesTab {
  background: linear-gradient(145deg, #fff, #eff6ff) !important;
  border-color: #bfdbfe !important;
  color: #0f172a !important;
}

body.browser-remote-portal #deviceScopeTitle::after {
  content: '' !important;
}

@media(max-width:980px) {
  body.browser-remote-portal .viewer {
    min-height: 480px !important;
    padding: 16px !important;
  }
}

/* Final cursor and zoom overrides for browser video */
body.browser-remote-portal.webrtc-live .viewer {
  cursor: default !important;
}

body.browser-remote-portal #webrtcRemoteVideo {
  cursor: crosshair !important;
  width: var(--caiot-browser-video-width, auto) !important;
  height: auto !important;
}

/* Browser public app final polish: remove internal/test UI and keep light dialogs readable.
   Note: #accountChip used to live in this list back when the website didn't
   require a sign-in. With the unified auth flow it must show the signed-in
   user, so it's been removed here and is now driven by updateAccountUI(). */
body.browser-remote-portal #googleDemoButton,
body.browser-remote-portal .hero-stats,
body.browser-remote-portal .device-scope-bar,
body.browser-remote-portal .preview-grid-wrap .section-title,
body.browser-remote-portal .previewBtn,
body.browser-remote-portal .device-location,
body.browser-remote-portal .scope-badge,
body.browser-remote-portal .owner-pill {
  display: none !important;
}

body.browser-remote-portal .hero {
  display: block !important;
  padding: 28px !important;
  border: 1px solid #dbeafe !important;
  background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
  box-shadow: 0 18px 52px rgba(37, 99, 235, .10) !important;
}

body.browser-remote-portal .hero h1 {
  margin-bottom: 6px !important;
}

body.browser-remote-portal .filters {
  margin-top: 18px !important;
  background: #ffffff !important;
  border: 1px solid #dbe5f3 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 42px rgba(15, 23, 42, .08) !important;
}

body.browser-remote-portal .preview-grid-wrap {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.browser-remote-portal .device-grid {
  margin-top: 18px !important;
}

body.browser-remote-portal .device-card .device-meta {
  min-height: 36px !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

body.browser-remote-portal .device-card .device-meta.device-meta-split {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

body.browser-remote-portal .device-card .device-meta-location {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

body.browser-remote-portal .device-card .device-meta-rate {
  display: block;
  font-weight: 600;
}

body.browser-remote-portal .device-card .badges {
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  gap: 8px !important;
}

body.browser-remote-portal .device-actions {
  grid-template-columns: 1fr !important;
}

body.browser-remote-portal .modal-card.confirm-modal {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #dbe5f3 !important;
  box-shadow: 0 24px 90px rgba(15, 23, 42, .22) !important;
}

body.browser-remote-portal .confirm-modal h2,
body.browser-remote-portal .confirm-modal p,
body.browser-remote-portal .confirm-modal b {
  color: #0f172a !important;
}

body.browser-remote-portal .confirm-icon {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
}

body.browser-remote-portal .confirm-callout {
  background: #fffbeb !important;
  color: #713f12 !important;
  border: 1px solid #fde68a !important;
}

body.browser-remote-portal .confirm-callout b {
  color: #713f12 !important;
}

body.browser-remote-portal .modal-actions #cancelEndSessionBtn {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

body.browser-remote-portal .modal-actions #confirmEndSessionBtn.danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

body.browser-remote-portal .modal-close {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #dbe5f3 !important;
}

body.browser-remote-portal #toastRoot .toast,
body.browser-remote-portal .toast {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #bfdbfe !important;
}

/* Browser-only final polish++ */
body.browser-remote-portal #page-gallery .hero {
  display: none !important;
}

body.browser-remote-portal #cardViewBtn,
body.browser-remote-portal #listViewBtn {
  display: none !important;
}

body.browser-remote-portal .filters {
  grid-template-columns: minmax(260px, 1fr) 180px 180px !important;
  margin-top: 0 !important;
  padding: 14px !important;
}

body.browser-remote-portal .preview-grid-wrap {
  margin-top: 14px !important;
}

body.browser-remote-portal .device-grid.card-view {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body.browser-remote-portal .device-card {
  border-radius: 24px !important;
  overflow: hidden !important;
}

body.browser-remote-portal .device-card .preview {
  height: 178px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top-left-radius: 23px !important;
  border-top-right-radius: 23px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

body.browser-remote-portal .device-card .device-body {
  padding: 18px 18px 20px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
}

body.browser-remote-portal .device-card .device-actions {
  margin-top: auto !important;
}

body.browser-remote-portal .device-card .device-title {
  font-size: 18px !important;
  letter-spacing: -.01em !important;
}

body.browser-remote-portal .device-card .device-meta {
  font-weight: 600 !important;
  font-size: 13px !important;
}

body.browser-remote-portal .device-card .device-meta.device-meta-split .device-meta-rate {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

body.browser-remote-portal .device-health-mini {
  color: #64748b !important;
  font-size: 12px !important;
  min-height: 16px !important;
}

body.browser-remote-portal .live-dot {
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
  padding: 6px 11px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important;
}

body.browser-remote-portal .price-pill {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: none !important;
}

/* Prepaid credits live in device-meta; pill only for active sessions */
body.browser-remote-portal .device-card:not(.active-session-card) .price-pill {
  display: none !important;
}

body.browser-remote-portal .device-card.active-session-card .price-pill {
  bottom: 10px !important;
  z-index: 2 !important;
}

body.browser-remote-portal .stream-area {
  background: #ffffff !important;
  border-radius: 26px !important;
}

body.browser-remote-portal .workspace {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
  height: calc(100vh - 96px) !important;
  padding: 16px 22px 18px !important;
}

body.browser-remote-portal .viewer {
  min-height: 0 !important;
  height: 100% !important;
  padding: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #020617 !important;
}

body.browser-remote-portal #webrtcRemoteVideo {
  object-fit: fill !important;
  transform-origin: center center !important;
  border-radius: 18px !important;
}

body.browser-remote-portal .viewer.fit #webrtcRemoteVideo,
body.browser-remote-portal .viewer.zoomed #webrtcRemoteVideo {
  width: var(--caiot-browser-video-width, auto) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: none !important;
}

.security-policy-warning {
  margin: 0;
  padding: 12px 18px;
  background: #fee2e2;
  color: #991b1b;
  border-bottom: 1px solid #fecaca;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 12px 28px rgba(153, 27, 27, .16);
  z-index: 8;
}

body.browser-remote-portal .security-policy-warning {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

body.browser-remote-portal .toast {
  border-left: 5px solid #2563eb !important;
}

body.browser-remote-portal .toast:has(+ .toast) {
  bottom: auto !important;
}

@media(max-width:980px) {
  body.browser-remote-portal .filters {
    grid-template-columns: 1fr !important
  }

  body.browser-remote-portal .workspace {
    height: auto !important;
    padding: 12px !important
  }

  body.browser-remote-portal .viewer {
    height: 64vh !important;
    min-height: 420px !important
  }

  .security-policy-warning {
    text-align: left
  }
}


/* Browser-only public workspace cleanup - safe merge guard */
body.browser-remote-portal .hero,
body.browser-remote-portal .hero-stats,
body.browser-remote-portal #cardViewBtn,
body.browser-remote-portal #listViewBtn,
body.browser-remote-portal .view-toggle,
body.browser-remote-portal .page-header {
  display: none !important;
}

body.browser-remote-portal .device-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 18px !important;
}

body.browser-remote-portal .device-card.classic-card {
  background: #fff !important;
  color: #0f172a !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
}

body.browser-remote-portal .modal-card,
body.browser-light-only .modal-card {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #d7e3f5 !important;
}

body.browser-remote-portal .modal-card .muted,
body.browser-light-only .modal-card .muted {
  color: #475569 !important;
}

/* Screenshot / recording / gallery: dark glass over live stream — web portal, light theme, and Electron */
.modal.modal-evidence-overlay {
  z-index: 10050;
  background: rgba(2, 6, 23, 0.78) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.browser-remote-portal .modal.modal-evidence-overlay .modal-card.media-modal,
body.browser-remote-portal .modal.modal-evidence-overlay .modal-card.gallery-modal,
body.browser-light-only .modal.modal-evidence-overlay .modal-card.media-modal,
body.browser-light-only .modal.modal-evidence-overlay .modal-card.gallery-modal,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-card.media-modal,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-card.gallery-modal {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 1px solid rgba(100, 116, 139, 0.45) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .modal-card.media-modal h2,
body.browser-remote-portal .modal.modal-evidence-overlay .modal-card.gallery-modal h2,
body.browser-light-only .modal.modal-evidence-overlay .modal-card.media-modal h2,
body.browser-light-only .modal.modal-evidence-overlay .modal-card.gallery-modal h2,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-card.media-modal h2,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-card.gallery-modal h2 {
  color: #f8fafc !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .modal-card.media-modal .muted,
body.browser-remote-portal .modal.modal-evidence-overlay .modal-card.gallery-modal .muted,
body.browser-light-only .modal.modal-evidence-overlay .modal-card.media-modal .muted,
body.browser-light-only .modal.modal-evidence-overlay .modal-card.gallery-modal .muted,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-card.media-modal .muted,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-card.gallery-modal .muted {
  color: #94a3b8 !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .gallery-modal .media-modal-head button,
body.browser-light-only .modal.modal-evidence-overlay .gallery-modal .media-modal-head button,
body.electron-desktop-shell .modal.modal-evidence-overlay .gallery-modal .media-modal-head button {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .evidence-gallery-grid .evidence-card,
body.browser-light-only .modal.modal-evidence-overlay .evidence-gallery-grid .evidence-card,
body.electron-desktop-shell .modal.modal-evidence-overlay .evidence-gallery-grid .evidence-card {
  background: rgba(2, 6, 23, 0.65) !important;
  border-color: rgba(71, 85, 105, 0.55) !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .evidence-card-body b,
body.browser-light-only .modal.modal-evidence-overlay .evidence-card-body b,
body.electron-desktop-shell .modal.modal-evidence-overlay .evidence-card-body b {
  color: #f8fafc !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .evidence-card-body small,
body.browser-remote-portal .modal.modal-evidence-overlay .evidence-card-body em,
body.browser-light-only .modal.modal-evidence-overlay .evidence-card-body small,
body.browser-light-only .modal.modal-evidence-overlay .evidence-card-body em,
body.electron-desktop-shell .modal.modal-evidence-overlay .evidence-card-body small,
body.electron-desktop-shell .modal.modal-evidence-overlay .evidence-card-body em {
  color: #94a3b8 !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .evidence-card-actions button,
body.browser-light-only .modal.modal-evidence-overlay .evidence-card-actions button,
body.electron-desktop-shell .modal.modal-evidence-overlay .evidence-card-actions button {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .evidence-card-actions a,
body.browser-light-only .modal.modal-evidence-overlay .evidence-card-actions a,
body.electron-desktop-shell .modal.modal-evidence-overlay .evidence-card-actions a {
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .empty-gallery,
body.browser-light-only .modal.modal-evidence-overlay .empty-gallery,
body.electron-desktop-shell .modal.modal-evidence-overlay .empty-gallery {
  color: #cbd5e1 !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .empty-gallery b,
body.browser-light-only .modal.modal-evidence-overlay .empty-gallery b,
body.electron-desktop-shell .modal.modal-evidence-overlay .empty-gallery b {
  color: #f1f5f9 !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .media-preview-body,
body.browser-light-only .modal.modal-evidence-overlay .media-preview-body,
body.electron-desktop-shell .modal.modal-evidence-overlay .media-preview-body {
  background: rgba(2, 6, 23, 0.75) !important;
  border-color: rgba(71, 85, 105, 0.55) !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .modal-close,
body.browser-light-only .modal.modal-evidence-overlay .modal-close,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-close {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .modal-actions button.primary,
body.browser-light-only .modal.modal-evidence-overlay .modal-actions button.primary,
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-actions button.primary {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .modal-actions button:not(.primary),
body.browser-light-only .modal.modal-evidence-overlay .modal-actions button:not(.primary),
body.electron-desktop-shell .modal.modal-evidence-overlay .modal-actions button:not(.primary) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

body.browser-remote-portal .modal.modal-evidence-overlay .download-pill,
body.browser-light-only .modal.modal-evidence-overlay .download-pill,
body.electron-desktop-shell .modal.modal-evidence-overlay .download-pill {
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}

body.browser-remote-portal .stripe-progress,
body.browser-light-only .stripe-progress {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

body.browser-remote-portal .stripe-progress.fail {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

body.browser-remote-portal .stripe-progress.ok {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: #bbf7d0 !important;
}


/* Final backend cleanup: universal stream fit guard for Electron USB/Wi-Fi and browser. */
.stream-area,
.viewer {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.viewer.fit canvas,
.viewer.fit img,
.viewer.fit video {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.viewer canvas,
.viewer img,
.viewer video {
  object-fit: contain !important;
}

body:not(.browser-remote-portal) .viewer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.browser-remote-portal) .viewer.fit canvas,
body:not(.browser-remote-portal) .viewer.fit img,
body:not(.browser-remote-portal) .viewer.fit video {
  max-width: 100% !important;
  max-height: 100% !important;
}

.app-alpha-banner {
  margin: 16px 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, .35);
  background: linear-gradient(135deg, rgba(254, 243, 199, .92), rgba(255, 255, 255, .94));
  color: #7c2d12;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
  font-size: 14px;
  line-height: 1.45
}

.app-alpha-banner b {
  color: #92400e
}

.browser-remote-portal .app-alpha-banner {
  margin-top: 0
}

.view-toggle {
  display: none !important
}

/* Browser Internet workspace: the website now shows the same login gate
   that Electron uses (Google + email/password + forgot-password) before the
   gallery, so the historical force-hide of #page-login is gone. The
   #page-gallery.active rule below is kept because the gallery layout in the
   browser uses block flow rather than the grid Electron prefers. */
.browser-remote-portal #page-gallery.active {
  display: block !important;
}

.powered-by-aumber {
  margin: .25rem 0 1rem;
  color: #64748b;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .78rem
}


/* ========== AUMBER EMAIL AUTH STYLES ========== */
/* Add these to your existing CSS or link as separate file */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
  color: var(--gray-600, #4b5563);
  font-size: 0.75rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200, #e5e7eb);
}

.legal-accept-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gray-700, #374151);
  text-align: left;
  cursor: pointer;
}
.legal-accept-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--amber-500, #ff9f1c);
  cursor: pointer;
}
.legal-accept-row a {
  color: var(--amber-600, #e68500);
  font-weight: 600;
  text-decoration: underline;
}
.legal-accept-row a:hover {
  color: var(--amber-700, #c46f00);
}
.google-btn:disabled,
.primary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-form {
  text-align: left;
  margin-top: 8px;
}

.input-group {
  margin-bottom: 1rem;
}

.input-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--amber-600, #e68500);
  display: block;
  margin-bottom: 6px;
}

.input-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 32px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: white;
  font-family: 'Inter', monospace;
  transition: 0.2s;
  font-size: 0.9rem;
}
.input-group input:focus {
  outline: none;
  border-color: var(--amber-500, #ff9f1c);
  box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.2);
}

.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  background: linear-gradient(95deg, var(--amber-500, #ff9f1c) 0%, var(--amber-600, #e68500) 100%);
  color: white;
  margin: 0.5rem 0 1rem;
  box-shadow: 0 6px 14px rgba(230, 133, 0, 0.25);
}

.primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 10px 20px -5px rgba(230, 133, 0, 0.4);
}

.flow-link {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 12px;
}

.flow-link a {
  color: var(--amber-600, #e68500);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.flow-link a:hover {
  text-decoration: underline;
}

.error-message {
  color: #e03a3a;
  font-size: 0.7rem;
  margin-top: 6px;
  display: block;
}

.hidden {
  display: none !important;
}

/* Ensure Google button styles match */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  color: #1f2937;
  margin-bottom: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}
.google-btn:hover {
  background: #fef9e6;
  border-color: var(--amber-400, #ffb347);
  transform: translateY(-2px);
}

.google-g {
  font-size: 1.4rem;
  font-weight: 700;
  background: conic-gradient(from -45deg, #ea4335, #fbbc04, #34a853, #4285f4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  width: 26px;
}

.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  background: rgba(255, 159, 28, 0.12);
  border: 1px solid var(--amber-400, #ffb347);
  color: var(--amber-700, #b86200);
}
body,body.devicehub-marketplace{background:radial-gradient(circle at 18% -12%,rgba(37,99,235,.18),transparent 32%),linear-gradient(180deg,#f8fbff 0%,#edf4fb 100%)!important;color:var(--text)!important;}
.theme-toggle{display:none!important;}
.appbar{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)!important;box-shadow:0 10px 30px rgba(20,40,80,.08);}
.appbar .brand b{color:#102033}.appbar .brand span{color:var(--muted)}
.appbar button,.ghost,.icon-btn{background:#fff!important;color:#18304f!important;border-color:#d6e2f1!important;box-shadow:0 8px 20px rgba(32,64,120,.08);}
.page#page-gallery{padding:24px;gap:18px;animation:galleryFadeIn .42s ease both;}
.hero{position:relative;overflow:hidden;border:1px solid var(--line)!important;background:linear-gradient(135deg,#ffffff 0%,#eef6ff 56%,#eafdfb 100%)!important;border-radius:28px!important;box-shadow:var(--shadow)!important;padding:26px!important;}
.hero::before{content:'📱';position:absolute;right:28px;top:12px;font-size:92px;opacity:.08;transform:rotate(-10deg);}
.hero h1{font-size:clamp(32px,4vw,52px)!important;letter-spacing:-.05em;margin:0 0 8px!important;color:#102033!important;}
.hero p{color:#5b6f89!important;max-width:620px!important;font-size:16px!important;}
.hero-stats div{background:rgba(255,255,255,.86)!important;border:1px solid #dbe7f5!important;border-radius:20px!important;box-shadow:0 16px 40px rgba(37,99,235,.10);transition:transform .2s ease,box-shadow .2s ease;}
.hero-stats div:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(37,99,235,.16);}
.gallery-controls{display:grid;gap:16px;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:0 18px 48px rgba(20,40,80,.10);backdrop-filter:blur(16px);}
.gallery-controls-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.gallery-controls h2{font-size:22px;margin:2px 0 0;color:#102033}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:#2563eb}.gallery-chip{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px;}
.device-scope-bar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0!important;}
.scope-tab{position:relative;display:grid!important;grid-template-columns:auto 1fr;align-items:center;text-align:left;gap:4px 12px;background:#f8fbff!important;color:#22314a!important;border:1px solid #dbe7f5!important;border-radius:20px!important;padding:16px!important;box-shadow:none!important;overflow:hidden;}
.scope-tab .scope-icon{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border-radius:16px;background:#eaf3ff;font-size:22px;transition:transform .22s ease;}
.scope-tab:hover .scope-icon{transform:scale(1.08) rotate(-4deg)}.scope-tab b{font-size:15px}.scope-tab span:not(.scope-icon){color:#65748a;font-size:12px}.scope-tab.active{background:linear-gradient(135deg,#2563eb,#06b6d4)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 18px 42px rgba(37,99,235,.25)!important;}.scope-tab.active span:not(.scope-icon){color:#eaf6ff!important}.scope-tab.active .scope-icon{background:rgba(255,255,255,.22);}
.filters{display:grid!important;grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(160px,.7fr));gap:12px;margin:0!important;}
.search-field-wrap{position:relative;display:flex;align-items:center;min-width:0;width:100%;}
.search-field-wrap input{width:100%;padding-right:40px!important;}
.device-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;margin:0;border:0;border-radius:10px;background:rgba(15,34,51,.08);color:#475569;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease;font-family:system-ui,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.device-search-clear:hover{background:rgba(37,99,235,.14);color:#1d4ed8;}
.device-search-clear:focus-visible{outline:2px solid #2563eb;outline-offset:2px;}
.device-search-clear.hidden{display:none!important;}
.filters input,.filters select,input,select,textarea{background:#fff!important;color:#152238!important;border:1px solid #d7e3f1!important;box-shadow:0 8px 22px rgba(20,40,80,.05);}
.preview-grid-wrap{background:rgba(255,255,255,.88)!important;border:1px solid var(--line)!important;border-radius:26px!important;padding:18px!important;box-shadow:var(--shadow)!important;}
.section-title{border-bottom:1px solid #e3ecf7;padding-bottom:14px;margin-bottom:16px}.section-title h2{font-size:24px!important;color:#102033}.muted,#deviceScopeHelp{color:#66758d!important}.section-title #resultCount{background:#f0f7ff;border:1px solid #d7eaff;color:#1d4ed8;border-radius:999px;padding:8px 12px;font-weight:900;}
.device-grid.card-view{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:18px!important;max-height:none!important;overflow:visible!important;}
.device-card.classic-card{background:#fff!important;border:1px solid #dae6f4!important;border-radius:26px!important;box-shadow:0 18px 45px rgba(20,40,80,.11)!important;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:cardRise .36s ease both;}
.device-card.classic-card:hover{transform:translateY(-5px);box-shadow:0 24px 64px rgba(37,99,235,.18)!important;border-color:#aacdfb!important;}
.device-card .preview{background:linear-gradient(135deg,#eff6ff,#eefdf8)!important;min-height:180px;border-bottom:1px solid #e2ecf7;}.device-card.classic-card .preview{border-bottom:1px solid #e2e8f0!important;}body.browser-remote-portal .device-card.classic-card .preview{border-bottom:1px solid #e2e8f0!important;}.device-card .placeholder{font-size:54px;filter:drop-shadow(0 12px 18px rgba(37,99,235,.15));}
.live-dot,.price-pill,.owner-pill,.badge{box-shadow:0 8px 20px rgba(20,40,80,.08);}.device-card .device-body{background:#fff!important;color:#172033!important;}.device-title{color:#102033!important}.device-meta,.device-location,.device-health-mini{color:#65748a!important}.device-actions button{border-radius:14px!important}.device-actions .primary{background:linear-gradient(135deg,#2563eb,#06b6d4)!important;color:#fff!important;border:0!important;box-shadow:0 14px 30px rgba(37,99,235,.24)!important;}
.empty-devices{background:#fff!important;border:1px dashed #bfd0e4!important;color:#65748a!important;border-radius:22px!important;padding:32px!important;text-align:center;}
.empty-devices::before{content:'🔎';display:block;font-size:36px;margin-bottom:8px;}
@keyframes galleryFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes cardRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:760px){.page#page-gallery{padding:14px}.gallery-controls-head,.hero{align-items:flex-start}.device-scope-bar,.filters{grid-template-columns:1fr!important}.hero-stats{grid-template-columns:repeat(3,1fr)!important}.gallery-chip{display:none}}

/* v4 readability audit: enforce accessible light-theme text contrast across the app. */
:root{
  color-scheme:light;
  --bg:#f6f9fe;
  --panel:#ffffff;
  --panel2:#f8fbff;
  --panel3:#edf4fb;
  --line:#d7e3f1;
  --text:#102033;
  --muted:#55677f;
  --brand:#2563eb;
  --good:#15803d;
  --warn:#b45309;
  --bad:#dc2626;
  --shadow:0 22px 60px rgba(20,40,80,.12);
}
body, body.devicehub-marketplace{
  background:radial-gradient(circle at 18% -12%,rgba(37,99,235,.18),transparent 32%),linear-gradient(180deg,#f8fbff 0%,#edf4fb 100%)!important;
  color:var(--text)!important;
}
.appbar,.hero,.gallery-controls,.preview-grid-wrap,.tool-panel,.modal,.card,.device-card.classic-card,.device-card .device-body,.auth-card,.settings-card,.billing-card,.install-card,.profile-card,.panel,.tab-panel{
  color:#102033!important;
}
.hero p,.muted,.helper,.hint,.subtitle,.description,.device-meta,.device-location,.device-health-mini,.section-title small,.empty-devices,.field-help,.small,.caption,label small{
  color:#55677f!important;
}
input,select,textarea{
  background:#ffffff!important;
  color:#102033!important;
  border-color:#cbd8ea!important;
}
input::placeholder,textarea::placeholder{color:#71839b!important;opacity:1!important;}
button,.ghost,.icon-btn,.secondary,.tab,.filter-chip{
  color:#18304f!important;
}
.primary,.device-actions .primary,.scope-tab.active,.tab.active,.btn-primary,.cta-primary{
  color:#ffffff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
}
.badge,.pill,.chip,.status-pill,.price-pill,.owner-pill,.gallery-chip,.section-title #resultCount{
  color:#17345d!important;
  background:#eff6ff!important;
  border-color:#bfdbfe!important;
}
.badge.ok,.pill.ok,.chip.ok,.status-pill.ok{color:#14532d!important;background:#dcfce7!important;border-color:#86efac!important;}
.badge.warn,.pill.warn,.chip.warn,.status-pill.warn{color:#7c2d12!important;background:#ffedd5!important;border-color:#fdba74!important;}
.badge.bad,.pill.bad,.chip.bad,.status-pill.bad{color:#7f1d1d!important;background:#fee2e2!important;border-color:#fca5a5!important;}
.notice,.alpha-banner,.cta-copy{
  color:#6b3d00!important;
  background:#fff7df!important;
  border-color:#f6d27a!important;
}
.notice b,.alpha-banner b,.cta-copy b{color:#3d2600!important;}
a{color:#1d4ed8;}
/* Dark stream/video surfaces are intentionally kept dark; make their text explicitly light. */
.stream-area,.viewer,.render-card,.v28-stream-hud,.v29-status,.v29-chip,.v29-zoom,.v29-toolbar,.v29-titlebar,.caiot-v29.market-stream .context-panel,.caiot-v29.market-stream .context-panel .page,.caiot-v29.market-stream .context-panel .pro-panel-head,.caiot-v29.market-stream .context-panel .panel-head-pro,.v29-panel-head{
  color:#eaf2ff!important;
}
.stream-area .muted,.stream-area small,.render-card small,.v29-chip span,.v29-zoom small,.caiot-v29.market-stream .context-panel small{
  color:#b9c8dc!important;
}
.stream-area button,.v29-btn,.v29-pillbtn,.v29-quality,.v28-quality-box button,.v28-quality-box select,.caiot-v29.market-stream .context-panel button{
  color:#eaf2ff!important;
}
.stream-area input,.stream-area select,.stream-area textarea,.caiot-v29.market-stream .context-panel input,.caiot-v29.market-stream .context-panel select,.caiot-v29.market-stream .context-panel textarea{
  background:#08111f!important;
  color:#eaf2ff!important;
  border-color:rgba(148,163,184,.28)!important;
}

/* v7 full light-theme contrast and notification readability audit.
   Keep all ordinary web/Electron surfaces light with dark readable text, and keep
   streaming/video/tool chrome dark with explicit light text. */
:root{
  color-scheme:light;
  --bg:#f6f9fe;
  --panel:#ffffff;
  --panel2:#f8fbff;
  --panel3:#edf4fb;
  --line:#cbd8ea;
  --text:#0f172a;
  --muted:#475569;
  --brand:#1d4ed8;
  --good:#166534;
  --warn:#92400e;
  --bad:#991b1b;
}
body:not(.market-stream),
body.devicehub-marketplace:not(.market-stream),
body.browser-remote-portal,
body.browser-light-only{
  background:radial-gradient(circle at 18% -12%,rgba(37,99,235,.16),transparent 32%),linear-gradient(180deg,#f8fbff 0%,#edf4fb 100%)!important;
  color:#0f172a!important;
}
body:not(.market-stream) .page,
body:not(.market-stream) .card,
body:not(.market-stream) .panel,
body:not(.market-stream) .modal-card,
body:not(.market-stream) .auth-card,
body:not(.market-stream) .hero,
body:not(.market-stream) .gallery-controls,
body:not(.market-stream) .preview-grid-wrap,
body:not(.market-stream) .device-card,
body:not(.market-stream) .device-body,
body:not(.market-stream) .market-card,
body:not(.market-stream) .market-modal,
body:not(.market-stream) .price-box,
body:not(.market-stream) .quote-box,
body:not(.market-stream) .file-box,
body:not(.market-stream) .install-card,
body:not(.market-stream) .settings-card,
body:not(.market-stream) .billing-card,
body:not(.market-stream) .profile-card,
body.browser-remote-portal .page,
body.browser-remote-portal .card,
body.browser-remote-portal .modal-card,
body.browser-remote-portal .device-card.classic-card{
  background-color:#ffffff!important;
  color:#0f172a!important;
  border:none!important;
}
body.browser-remote-portal .device-card .device-body{
  background-color:#ffffff!important;
  color:#0f172a!important;
  border:0!important;
}
h1,h2,h3,h4,h5,h6,
.brand b,.appbar .brand b,
.device-title,.device-card h3,.market-card-title,
.section-title h2,.gallery-controls h2,
.card b,.panel b,.modal b,.modal-card b,
.stripe-row b,.quote-box b,.price-box b,
label,.field-label,.field-label span,
.login-status,.device-health-mini b{
  color:#0f172a!important;
}
p,li,td,th,dd,dt,span,small,code,pre,
.device-meta,.device-location,.market-specs,.status p,
.helper,.hint,.subtitle,.description,.caption,.small,.muted,
#deviceScopeHelp,.section-title small,.field-help,
.modal-card p,.market-modal p,.brand span,.appbar .brand span{
  color:#334155!important;
}
.muted,small,.helper,.hint,.subtitle,.description,.caption,.field-help,.device-meta,.device-location,#deviceScopeHelp{color:#475569!important;}
input,select,textarea,
body.browser-remote-portal input,body.browser-remote-portal select,body.browser-remote-portal textarea{
  background:#ffffff!important;
  color:#0f172a!important;
  border:1px solid #b8c7dc!important;
  caret-color:#0f172a!important;
}
input::placeholder,textarea::placeholder{color:#64748b!important;opacity:1!important;}
button,.button,.btn,.ghost,.icon-btn,.secondary,.tab,.filter-chip,.round-btn,.market-refresh,.duration-grid button{
  color:#0f172a!important;
  background:#ffffff!important;
  border-color:#b8c7dc!important;
  transition:transform 0.08s ease,box-shadow 0.12s ease,border-color 0.15s ease,background 0.15s ease,filter 0.1s ease!important;
  -webkit-tap-highlight-color:transparent!important;
}
button:hover,.button:hover,.btn:hover,.ghost:hover,.icon-btn:hover,.secondary:hover,.tab:hover,.round-btn:hover{background:#f1f5f9!important;color:#0f172a!important;}
button:active:not(:disabled),.button:active:not(:disabled),.btn:active:not(:disabled),.ghost:active:not(:disabled),.icon-btn:active:not(:disabled),.secondary:active:not(:disabled),.tab:active:not(:disabled),.filter-chip:active:not(:disabled),.round-btn:active:not(:disabled),.market-refresh:active:not(:disabled),.duration-grid button:active:not(:disabled){
  transform:scale(0.98)!important;
  box-shadow:inset 0 2px 10px rgba(15,23,42,.12)!important;
  filter:brightness(0.96)!important;
}
button:focus-visible,.button:focus-visible,.btn:focus-visible,.ghost:focus-visible,.icon-btn:focus-visible,.secondary:focus-visible,.tab:focus-visible,.filter-chip:focus-visible,.round-btn:focus-visible,.market-refresh:focus-visible,.duration-grid button:focus-visible{
  outline:2px solid #2563eb!important;
  outline-offset:2px!important;
}
.primary:active:not(:disabled),.btn-primary:active:not(:disabled),.cta-primary:active:not(:disabled),.modal-primary:active:not(:disabled),.connect-card-btn:active:not(:disabled),.device-actions .primary:active:not(:disabled),.scope-tab.active:active:not(:disabled),.tab.active:active:not(:disabled),.market-tabs button.active:active:not(:disabled),.duration-grid button.active:active:not(:disabled),.apk-primary:active:not(:disabled),button.primary:active:not(:disabled),button[data-primary="true"]:active:not(:disabled){
  transform:scale(0.98)!important;
  box-shadow:inset 0 3px 14px rgba(0,0,0,.38)!important;
  filter:brightness(0.9)!important;
}
.primary,.btn-primary,.cta-primary,.modal-primary,.connect-card-btn,
.device-actions .primary,.scope-tab.active,.tab.active,.market-tabs button.active,
.duration-grid button.active,.apk-primary,
button.primary,button[data-primary="true"]{
  background:linear-gradient(135deg,#1d4ed8,#0891b2)!important;
  color:#ffffff!important;
  border-color:#1d4ed8!important;
  text-shadow:0 1px 1px rgba(0,0,0,.35)!important;
}
.primary *,.btn-primary *,.cta-primary *,.modal-primary *,.connect-card-btn *,
.device-actions .primary *,.scope-tab.active *,.tab.active *,.market-tabs button.active *,
.duration-grid button.active *,button.primary *{color:#ffffff!important;}
/* Notification / bluebar fix: never allow dark text on blue or dark toast bars. */
#toastRoot .toast,.toast,.market-toast,.snackbar,.notification,.notice-bar,.top-notice,.status-banner,.consent-banner{
  background:linear-gradient(135deg,#1d4ed8,#0891b2)!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:0 18px 48px rgba(15,23,42,.24)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.35)!important;
  font-weight:800!important;
}
#toastRoot .toast *, .toast *, .market-toast *, .snackbar *, .notification *, .notice-bar *, .top-notice *, .status-banner *, .consent-banner *{color:#ffffff!important;}
/* Informational banners on light pages use high-contrast ink instead of pale text. */
.app-alpha-banner,.alpha-banner,.notice,.cta-copy,.stripe-progress,.apk-progress-wrap{
  background:#fff7df!important;
  color:#5f3700!important;
  border-color:#d69e2e!important;
  text-shadow:none!important;
}
.app-alpha-banner *,.alpha-banner *,.notice *,.cta-copy *,.stripe-progress *,.apk-progress-wrap *{color:#5f3700!important;}
.stripe-progress.ok{background:#ecfdf5!important;color:#065f46!important;border-color:#86efac!important;}
.stripe-progress.ok *{color:#065f46!important;}
.stripe-progress.fail,.apk-progress-wrap.error{background:#fef2f2!important;color:#991b1b!important;border-color:#fca5a5!important;}
.stripe-progress.fail *,.apk-progress-wrap.error *{color:#991b1b!important;}
.badge,.pill,.chip,.status-pill,.price-pill,.owner-pill,.gallery-chip,.market-pill,.owner-badge,.section-title #resultCount{
  color:#17345d!important;
  background:#eff6ff!important;
  border-color:#93c5fd!important;
  text-shadow:none!important;
}
.badge.ok,.pill.ok,.chip.ok,.status-pill.ok,.owner-badge.local,.market-status.online{color:#064e3b!important;background:#d1fae5!important;border-color:#6ee7b7!important;}
.badge.warn,.pill.warn,.chip.warn,.status-pill.warn,.owner-badge.remote,.market-status.busy{color:#7c2d12!important;background:#ffedd5!important;border-color:#fdba74!important;}
.badge.bad,.pill.bad,.chip.bad,.status-pill.bad,.market-status.offline{color:#7f1d1d!important;background:#fee2e2!important;border-color:#fca5a5!important;}
.market-status,.live-dot{color:#ffffff!important;text-shadow:0 1px 1px rgba(0,0,0,.35)!important;}
a{color:#1d4ed8!important;} a:hover{color:#1e40af!important;}
/* Explicit dark streaming workspace contrast. */
body.market-stream,
body.market-stream .app-shell,
body.market-stream .viewer-panel,
body.market-stream .viewer-topbar,
body.market-stream .tool-dock,
body.market-stream .context-panel,
body.market-stream .session-panel,
body.market-stream .stage,
body.market-stream .phone,
body.market-stream .stream-area,
body.market-stream .viewer,
body.market-stream .render-card,
body.market-stream .empty,
body.market-stream .v29-titlebar,
body.market-stream .v29-toolbar,
body.market-stream .v29-status,
body.market-stream .v29-chip,
body.market-stream .v29-zoom,
body.market-stream .v29-panel-head,
body.market-stream .pro-panel-head,
body.market-stream .panel-head-pro,
body.market-stream .tabs,
body.market-stream .tab-panel{
  background-color:#07111f!important;
  color:#eaf2ff!important;
  border-color:rgba(148,163,184,.28)!important;
}
body.market-stream h1,body.market-stream h2,body.market-stream h3,body.market-stream h4,
body.market-stream b,body.market-stream label,body.market-stream .brand h1,
body.market-stream .viewer-topbar b,body.market-stream .v29-titlebar *,body.market-stream .v29-toolbar *,body.market-stream .context-panel b{
  color:#ffffff!important;
}
body.market-stream p,body.market-stream span,body.market-stream small,body.market-stream .muted,
body.market-stream .viewer-topbar small,body.market-stream .context-panel small,
body.market-stream .dock-btn small,body.market-stream .line,body.market-stream .status p{
  color:#cbd5e1!important;
}
body.market-stream button,body.market-stream .dock-btn,body.market-stream .v29-btn,body.market-stream .v29-pillbtn,body.market-stream .tab,
body.market-stream input,body.market-stream select,body.market-stream textarea,body.market-stream pre,body.market-stream .log,body.market-stream .drop{
  background:#0b1628!important;
  color:#eaf2ff!important;
  border-color:rgba(148,163,184,.32)!important;
}
body.market-stream input::placeholder,body.market-stream textarea::placeholder{color:#94a3b8!important;}
body.market-stream .primary,body.market-stream button.primary,body.market-stream .tab.active,body.market-stream .dock-btn.active,body.market-stream .as-btn.active,body.market-stream .v29-btn.active{
  background:linear-gradient(135deg,#2563eb,#0891b2)!important;
  color:#ffffff!important;
  border-color:#60a5fa!important;
}

/* Platform branding: Web uses CaIoT while Electron keeps AuMBER Desktop branding. */
body.brand-web-caiot .login-logo,
html[data-runtime-brand="web-caiot"] .login-logo{
  max-width: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
}
body.brand-web-caiot .appbar .brand img,
html[data-runtime-brand="web-caiot"] .appbar .brand img{
  object-fit: contain;
  background: #ffffff;
}
.powered-by-aumber{
  margin: -4px 0 12px;
  color: #64748b;
  font-weight: 800;
  letter-spacing: .02em;
}
body.brand-web-caiot .appbar .brand b,
html[data-runtime-brand="web-caiot"] .appbar .brand b{
  color: #0f172a;
}
body.brand-web-caiot .appbar .brand span,
html[data-runtime-brand="web-caiot"] .appbar .brand span{
  color: #475569;
}

/* Remote sessions: Quick Settings toolbar control is hidden; server/agent still enforce policy. */
body.hide-remote-quick-settings [data-as-cmd="QUICK_SETTINGS"],
body.hide-remote-quick-settings [data-as-cmd="NOTIFICATIONS"],
body.hide-remote-quick-settings [data-as-cmd="POWER"],
body.hide-remote-quick-settings [data-cmd="QUICK_SETTINGS"],
body.hide-remote-quick-settings [data-cmd="NOTIFICATIONS"],
body.hide-remote-quick-settings [data-cmd="POWER"],
body.hide-remote-quick-settings [data-v29-cmd="POWER"] {
  display: none !important;
}

/* Browser WebRTC: JS sets exact px width/height on #webrtcRemoteVideo via --caiot-browser-video-width. */
body.browser-remote-portal .viewer.fit #webrtcRemoteVideo,
body.browser-remote-portal .viewer.zoomed #webrtcRemoteVideo {
  width: var(--caiot-browser-video-width, auto) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  pointer-events: auto !important;
  touch-action: none !important;
  z-index: 26 !important;
}

body.webrtc-live #viewer {
  cursor: default;
  touch-action: none;
}

body.webrtc-live.browser-remote-portal #viewer {
  pointer-events: none !important;
}

body.webrtc-live.browser-remote-portal #webrtcRemoteVideo {
  pointer-events: auto !important;
  cursor: crosshair !important;
}

/* Dark video canvas: global light-theme p/span rules must not darken viewer status text. */
.viewer #emptyState,
.viewer .stream-boot-inner,
.viewer .stream-boot-title,
.viewer .stream-boot-hint,
.viewer .stream-interrupt-banner,
.viewer .stream-interrupt-title,
.viewer .stream-interrupt-sub {
  color: #f8fafc !important;
}

.viewer .stream-boot-hint,
.viewer .stream-interrupt-sub {
  color: #e2e8f0 !important;
}

.viewer .stream-boot-title,
.viewer .stream-interrupt-title {
  color: #fef9c3 !important;
}

.viewer .stream-boot-hint strong {
  color: #fff !important;
}

#page-connecting .connecting-card,
#page-connecting .connecting-card h1,
#page-connecting .connecting-card p,
#page-connecting .connection-steps li {
  color: #f1f5f9 !important;
}

#page-connecting .connection-steps li.active {
  color: #dbeafe !important;
}

#page-connecting .connection-steps li.done {
  color: #bbf7d0 !important;
}