/* Raptool Device Manager - styles. Base copied from the TMS dispatcher look. */
/* Raptool TMS — Dispatcher app styles. Tokens only, no hardcoded hex. */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: var(--t-body-md-size);
  line-height: var(--t-body-md-lh);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}

button { font-family: inherit; }

/* ---------- generic buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  cursor: pointer;
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-shallow);
  padding: 10px 20px;
  font-weight: var(--t-label-lg-wt);
  font-size: var(--t-label-lg-size);
  letter-spacing: var(--t-label-lg-ls);
  transition: box-shadow .12s ease, transform .12s ease, color .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:active { box-shadow: var(--shadow-pressed); transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent-primary); color: #fff; }
.btn-danger { background: var(--error); color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-container-high); }
.btn-sm { padding: 6px 14px; font-size: var(--t-label-md-size); }
.btn-block { width: 100%; }
.btn-icon-round { padding: 8px; border-radius: var(--radius-full); }

/* ---------- inputs ---------- */
.field-label {
  display: block;
  font-size: var(--t-label-md-size);
  font-weight: var(--t-label-md-wt);
  color: var(--text-muted);
  margin: var(--space-sm) 0 6px;
}
.tds-input-well, .field-well {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-container-low);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-inset);
  padding: 0 14px;
}
.field-icon { color: var(--text-muted); flex: none; }
.field-input, .field-textarea, select.field-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--on-surface);
  font-family: inherit;
  font-size: var(--t-body-md-size);
  padding: 11px 0;
  min-width: 0;
}
select.field-input { padding: 11px 0; cursor: pointer; }
.field-textarea { padding: 11px 0; resize: vertical; min-height: 44px; }
.field-error { color: var(--error); font-size: var(--t-label-sm-size); margin-top: 4px; }
.field-row { display: flex; gap: var(--space-sm); }
.field-row > div { flex: 1; min-width: 0; }

/* ---------- login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: var(--space-lg);
}
.login-card { width: 380px; max-width: 100%; padding: var(--space-xl) var(--space-lg); }
.login-logo { display: flex; align-items: center; gap: var(--space-sm); justify-content: center; color: var(--accent-primary); }
.login-logo .material-symbols-outlined { font-size: 32px; }
.login-logo-text { font-size: var(--t-headline-sm-size); font-weight: 700; }
.login-tagline { text-align: center; color: var(--text-muted); font-size: var(--t-label-md-size); margin: 4px 0 var(--space-lg); }
.login-title { font-size: var(--t-headline-md-size); font-weight: var(--t-headline-md-wt); text-align: center; }
.login-subtitle { text-align: center; color: var(--text-muted); font-size: var(--t-body-md-size); margin-bottom: var(--space-lg); }
.login-form { display: flex; flex-direction: column; gap: 2px; }
.login-error { color: var(--error); font-size: var(--t-label-md-size); margin: var(--space-sm) 0; text-align: center; }
.login-form .btn { margin-top: var(--space-lg); }

/* ---------- app shell ---------- */
.app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: 10px var(--space-lg);
  margin: var(--space-sm) var(--space-sm) 0;
  border-radius: var(--radius-card);
  position: relative;
  z-index: 20;
  flex-wrap: wrap;
}
.header-left { display: flex; align-items: center; gap: var(--space-sm); color: var(--accent-primary); }
.header-logo-icon { font-size: 26px; }
.header-logo-text { font-size: var(--t-headline-sm-size); font-weight: 700; color: var(--on-surface); }
.header-center { display: flex; align-items: center; gap: var(--space-sm); }
.date-picker { padding: 0 12px; }
.date-input { padding: 8px 0; width: 150px; }
.header-right { display: flex; align-items: center; gap: var(--space-sm); }

.lang-toggle {
  display: flex; background: var(--surface-container-low); border-radius: var(--radius-control);
  box-shadow: var(--shadow-inset); padding: 3px;
}
.lang-btn {
  border: none; background: transparent; cursor: pointer; padding: 6px 14px;
  border-radius: var(--radius-control); font-size: var(--t-label-md-size); font-weight: 700;
  color: var(--text-muted);
}
.lang-btn.active { background: var(--surface); box-shadow: var(--shadow-shallow); color: var(--accent-primary); }

.user-menu-wrap { position: relative; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 240px;
  padding: var(--space-md); z-index: 50; display: flex; flex-direction: column; gap: var(--space-sm);
}
.user-menu-name { font-weight: 700; font-size: var(--t-body-md-size); margin-bottom: 4px; }
.user-menu-row { display: flex; align-items: center; justify-content: space-between; }
/* Lift the header above the map only while a header popup is open, so it never covers side panels otherwise. */
.app-header:has(.user-menu:not([hidden])),
.app-header:has(.rt-sel-trigger.open) { z-index: 1200; }
.user-menu .btn-block { justify-content: flex-start; gap: 10px; }
.user-menu .btn-block[disabled] { opacity: .6; cursor: wait; }

/* ---------- body layout ---------- */
.app-body { flex: 1; display: flex; gap: var(--space-sm); padding: var(--space-sm); min-height: 0; }

.side-panel {
  width: 420px; flex: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: var(--space-md);
}
.tab-bar { display: flex; gap: 4px; background: var(--surface-container-low); border-radius: var(--radius-control); padding: 4px; margin-bottom: var(--space-md); }
.tab-btn {
  flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  border: none; background: transparent; cursor: pointer; padding: 8px 8px;
  border-radius: var(--radius-control); font-size: var(--t-label-md-size); font-weight: 700; color: var(--text-muted);
}
.tab-btn.active { background: var(--surface); box-shadow: var(--shadow-shallow); color: var(--accent-primary); }
.tab-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* Full-width views (Översikt, Admin, timeline): compact tabs sized to their text, not stretched. */
.app-body.full-width .tab-bar { display: inline-flex; align-self: flex-start; max-width: 100%; }
.app-body.full-width .tab-btn { flex: none; padding: 8px 16px; }

.tab-panels { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.tab-panel { display: none; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; padding-right: 2px; }
.tab-panel.active { display: flex; }

.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
.panel-title { font-size: var(--t-headline-sm-size); font-weight: 700; }
.panel-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.empty-state { text-align: center; color: var(--text-muted); padding: var(--space-xl) var(--space-md); }
.empty-state .material-symbols-outlined { font-size: 40px; opacity: .5; margin-bottom: var(--space-sm); }


.icon-btn {
  border: none; background: transparent; cursor: pointer; color: var(--text-muted); padding: 4px;
  border-radius: var(--radius-full); display: flex;
}
.icon-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-control);
  font-size: var(--t-label-sm-size); font-weight: 700; background: var(--surface-container-high); color: var(--text-muted);
}
.chip-unassigned { background: var(--surface-container-highest); color: var(--text-muted); }
.chip-assigned { background: color-mix(in srgb, var(--accent-primary) 18%, transparent); color: var(--accent-primary); }
.chip-sent { background: color-mix(in srgb, var(--accent-cyan) 20%, transparent); color: var(--accent-cyan); }
.chip-active { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.chip-arrived { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.chip-completed { background: color-mix(in srgb, var(--accent-emerald) 20%, transparent); color: var(--accent-emerald); }
.chip-failed { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(30,41,59,.35); display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: var(--space-md);
}
.modal-box { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 480px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.modal-box.modal-wide { width: 640px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); }
.modal-title { font-size: var(--t-headline-sm-size); font-weight: 700; }
.modal-body { padding: 0 var(--space-lg) var(--space-md); overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }

.driver-name-row { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--outline-variant); flex: none; }
.live-dot.online { background: var(--accent-emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-emerald) 25%, transparent); }
.driver-sub { color: var(--text-muted); font-size: var(--t-label-md-size); }

/* ---------- toasts ---------- */
.toast-root { position: fixed; top: var(--space-md); right: var(--space-md); z-index: 2000; display: flex; flex-direction: column; gap: var(--space-sm); }
.toast { background: var(--surface); box-shadow: var(--shadow-card); border-radius: var(--radius-default); padding: 12px 16px; display: flex; align-items: center; gap: var(--space-sm); font-size: var(--t-label-md-size); min-width: 220px; }
.toast .material-symbols-outlined { flex: none; }
.toast-error { color: var(--error); }
.toast-success { color: var(--accent-emerald); }

/* ---------- toggle display fix (bundle.css ships tds-toggle without a display, so it collapses to 0x0 as inline span) ---------- */
.tds-toggle { display: inline-block; flex: none; }

/* ---------- pro mode ---------- */
[data-pro="0"] .pro-only { display: none !important; }

.dash-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-sm); }
.kpi-card { padding: var(--space-md); display: flex; flex-direction: column; gap: 4px; }
.kpi-card-top { display: flex; justify-content: space-between; align-items: center; }
.kpi-icon { font-size: 22px; }
.kpi-value { font-size: var(--t-headline-md-size); font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: var(--t-label-sm-size); color: var(--text-muted); }

.dash-table { width: 100%; border-collapse: collapse; font-size: var(--t-label-md-size); }
.dash-table th { text-align: left; padding: 8px 10px; color: var(--text-muted); font-size: var(--t-label-sm-size); cursor: pointer; white-space: nowrap; user-select: none; }
.dash-table th:hover { color: var(--accent-primary); }
.dash-table td { padding: 8px 10px; border-top: 1px solid var(--outline-variant); }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(30,41,59,.3); z-index: 900; display: flex; justify-content: flex-end; }
.drawer-panel { width: 420px; max-width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }
.drawer-title-wrap { display: flex; flex-direction: column; gap: 6px; }
.drawer-title { font-size: var(--t-headline-sm-size); font-weight: 700; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--space-lg) var(--space-lg); }
.drawer-section { margin-bottom: var(--space-md); }
.drawer-section-title { font-weight: 700; font-size: var(--t-label-md-size); color: var(--text-muted); margin-bottom: 6px; }
.drawer-row { display: flex; align-items: center; gap: 8px; font-size: var(--t-body-md-size); margin-bottom: 4px; }
.drawer-track-row { display: flex; gap: 6px; align-items: center; }
.drawer-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.drawer-timeline li { display: flex; align-items: center; gap: 8px; font-size: var(--t-label-md-size); background: var(--surface-container-low); border-radius: var(--radius-default); padding: 8px 10px; }
.drawer-tl-label { flex: 1; }
.drawer-tl-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.drawer-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.drawer-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-default); cursor: pointer; box-shadow: var(--shadow-shallow); }
.drawer-sig-img { max-width: 200px; max-height: 100px; background: #fff; border-radius: var(--radius-default); padding: 6px; cursor: pointer; box-shadow: var(--shadow-shallow); }
.drawer-stars { font-size: 22px; color: var(--warning); letter-spacing: 2px; }
.drawer-notif-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--surface-container-low); border-radius: var(--radius-default); margin-bottom: 6px; font-size: var(--t-label-md-size); }
.drawer-notif-body { flex: 1; }
.drawer-notif-status { color: var(--text-muted); font-size: var(--t-label-sm-size); }

.lightbox-backdrop { position: fixed; inset: 0; background: rgba(10,10,20,.85); z-index: 3000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: var(--space-lg); }
.lightbox-img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-default); box-shadow: var(--shadow-card); }

/* ======================================================================
   Device Manager specific styles (tokens only)
   ====================================================================== */
a.btn { text-decoration: none; }
code, .mono { font-family: var(--font-mono); font-size: 12px; }

/* header search + pickers */
.search-well { padding: 0 12px; min-width: 260px; }
.search-well .field-input { padding: 8px 0; }
.team-picker { padding: 0 12px; }
.team-picker select { padding: 8px 0; min-width: 150px; }
.user-menu-role { margin-bottom: 2px; }

/* login demo chips */
.demo-chips { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); }
.demo-chip { border: none; cursor: pointer; font-family: inherit; }
.demo-chip:hover { background: var(--surface-container-highest); }

/* panels */
.app-body.full-width .tab-bar { overflow-x: auto; }
.tab-panel { gap: 0; }
.panel-sub { color: var(--text-muted); font-size: var(--t-label-md-size); }
.filter-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); align-items: center; }
.tds-chip { border: none; font-family: inherit; }
.count-pill { background: var(--surface-container-high); color: var(--text-muted); border-radius: var(--radius-full); padding: 0 7px; font-size: 11px; margin-left: 2px; }

/* KPI tiles */
.dash-kpi-row { margin-bottom: var(--space-md); }
.kpi-card.kpi-bad .kpi-value { color: var(--error); }
.kpi-card.kpi-good .kpi-value { color: var(--accent-emerald); }

/* status dot + label */
.sdot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--outline-variant); }
.sdot.online { background: var(--accent-emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-emerald) 25%, transparent); }
.sdot.idle { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 25%, transparent); }
.status-line { display: flex; align-items: center; gap: 6px; font-size: var(--t-label-md-size); font-weight: 700; color: var(--text-muted); }
.status-line.online { color: var(--accent-emerald); }
.status-line.idle { color: var(--warning); }

/* device cards */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); padding-bottom: var(--space-lg); }
.dev-card { position: relative; background: var(--surface); border-radius: var(--radius-default); box-shadow: var(--shadow-shallow); padding: var(--space-sm); cursor: pointer; transition: box-shadow .12s; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dev-card:hover { box-shadow: var(--shadow-card); }
.dev-thumb { aspect-ratio: 16 / 10; background: var(--surface-container-low); box-shadow: var(--shadow-inset); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text-placeholder); }
.dev-thumb { padding: 6px; }
.dev-thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px; box-shadow: var(--shadow-shallow); background: var(--surface); }
.dev-thumb .material-symbols-outlined { font-size: 44px; opacity: .6; }
.dev-info-btn { position: absolute; top: 14px; right: 14px; background: var(--surface); box-shadow: var(--shadow-shallow); color: var(--accent-primary); border-radius: 50%; padding: 5px; }
.dev-info-btn:hover { background: var(--surface-container-high); }
.dev-body { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dev-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dev-name { font-size: var(--t-body-lg-size); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.dev-name-row .icon-btn { padding: 2px; }
.dev-name-row .icon-btn .material-symbols-outlined { font-size: 16px; }
.dev-line { color: var(--text-muted); font-size: var(--t-label-md-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-line b { color: var(--on-surface); font-weight: 600; }
.dev-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0; }
.rename-input { flex: 1; min-width: 0; border: none; outline: none; background: var(--surface-container-low); box-shadow: var(--shadow-inset); border-radius: var(--radius-control); padding: 5px 12px; font: inherit; font-weight: 700; color: var(--on-surface); }

/* tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius-default); }
.dash-table th { cursor: default; }
.dash-table th:hover { color: var(--text-muted); }
.dash-table tbody tr.click-row { cursor: pointer; }
.dash-table tbody tr.click-row:hover td { background: var(--surface-container-high); }
.dash-table td { vertical-align: middle; }
.cell-actions { display: flex; gap: 2px; align-items: center; }

/* activation keys */
.key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-md); padding-bottom: var(--space-lg); }
.key-card { background: var(--surface); border-radius: var(--radius-default); box-shadow: var(--shadow-shallow); padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; }
.key-code { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.key-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.seat-bar { height: 10px; border-radius: var(--radius-full); background: var(--surface-container-low); box-shadow: var(--shadow-inset); overflow: hidden; }
.seat-bar > i { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent-primary), var(--accent-emerald)); }
.seat-bar.full > i { background: var(--warning); }
.seat-bar.over > i { background: var(--error); }
.seat-text { display: flex; justify-content: space-between; font-size: var(--t-label-md-size); color: var(--text-muted); }

/* drawer */
.drawer-panel.dm-drawer { width: 520px; }
.dm-shot { background: var(--surface-container-low); box-shadow: var(--shadow-inset); border-radius: var(--radius-default); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: var(--space-md); color: var(--text-placeholder); }
.dm-shot { padding: 12px; }
.dm-shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: var(--shadow-shallow); background: var(--surface); cursor: zoom-in; }
.dm-shot .material-symbols-outlined { font-size: 56px; opacity: .5; }
.dm-shot-time { color: var(--text-muted); font-size: var(--t-label-sm-size); margin: -8px 0 var(--space-md); text-align: right; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: var(--t-body-md-size); }
.kv dt { color: var(--text-muted); font-size: var(--t-label-md-size); padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.drawer-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-md) 0; }
.badge-soon { background: color-mix(in srgb, var(--accent-cyan) 20%, transparent); color: var(--accent-cyan); border-radius: var(--radius-control); padding: 1px 8px; font-size: 10px; font-weight: 700; margin-left: 4px; }
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.session-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--t-label-md-size); background: var(--surface-container-low); border-radius: var(--radius-default); padding: 8px 10px; }
.session-list li .grow { flex: 1; min-width: 120px; }
.raw-json { font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; word-break: break-all; background: var(--surface-container-low); box-shadow: var(--shadow-inset); border-radius: var(--radius-default); padding: var(--space-sm); max-height: 260px; overflow: auto; margin: 0; }
.report-row { border-radius: var(--radius-default); background: var(--surface-container-low); margin-bottom: 6px; font-size: var(--t-label-md-size); }
.report-row summary { cursor: pointer; padding: 8px 10px; display: flex; gap: 8px; align-items: center; }
.report-row .raw-json { margin: 0 8px 8px; max-height: 180px; }

/* bug reports */
.bug-frame-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bug-frame { flex: 1; width: 100%; min-height: 60vh; border: none; border-radius: var(--radius-default); background: var(--surface-container-low); box-shadow: var(--shadow-inset); }

/* remote view */
.remote-card { padding: var(--space-lg); display: flex; gap: var(--space-lg); align-items: center; margin-bottom: var(--space-md); flex-wrap: wrap; }
.remote-card .big-icon { font-size: 56px; color: var(--accent-primary); }
.remote-card h3 { margin: 0 0 4px; font-size: var(--t-headline-sm-size); }
.remote-card p { margin: 0; color: var(--text-muted); max-width: 640px; }
.remote-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.remote-row { display: flex; align-items: center; gap: var(--space-sm); background: var(--surface); box-shadow: var(--shadow-shallow); border-radius: var(--radius-default); padding: 10px var(--space-md); flex-wrap: wrap; }
.remote-row .grow { flex: 1; min-width: 160px; }

/* remote support: device cards, drawer section */
.dev-actions { margin-top: 6px; display: flex; }
.dev-actions .btn { flex: 1; }
.rm-state { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-muted); }
.rm-state.ready { color: var(--accent-emerald); }
.rm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.rm-src { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: var(--t-label-md-size); color: var(--text-muted); }
.rm-src .tds-input-well { height: 34px; padding: 0 12px; }
.rm-src select { font-size: var(--t-label-md-size); }
#rmCmds .panel-sub { font-weight: 400; }

/* remote viewer overlay (above drawers, modals are lifted above it while it is open) */
.rv-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; background: var(--surface); outline: none; }
body.rv-open { overflow: hidden; }
body.rv-open .modal-backdrop { z-index: 5100; }
body.rv-open .toast-root { z-index: 5200; }
body.rv-open .lightbox-backdrop { z-index: 5300; }
.rv-bar { display: flex; align-items: center; gap: var(--space-md); padding: 10px var(--space-md); background: var(--surface); box-shadow: var(--shadow-shallow); position: relative; z-index: 2; flex-wrap: wrap; }
.rv-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 220px; }
.rv-title b { font-size: var(--t-body-lg-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-title .material-symbols-outlined { color: var(--accent-primary); }
.rv-pill { border-radius: var(--radius-full); padding: 3px 12px; font-size: var(--t-label-md-size); font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.rv-pill.ok { background: color-mix(in srgb, var(--accent-emerald) 20%, transparent); color: var(--accent-emerald); }
.rv-pill.bad { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }
.rv-pill.off { background: var(--surface-container-highest); color: var(--text-muted); }
.rv-seg button:disabled { opacity: .5; cursor: not-allowed; }
.rv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-stage { flex: 1; min-height: 0; position: relative; background: #0b0d12; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rv-overlay.rv-actual .rv-stage { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.rv-video { width: 100%; height: 100%; object-fit: contain; background: #0b0d12; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.rv-overlay.rv-actual .rv-video { width: auto; height: auto; object-fit: none; flex: none; }
.rv-video.control { outline: 3px solid var(--warning); outline-offset: -3px; cursor: crosshair; }
.rv-overlay.rv-over .rv-video { opacity: .25; filter: grayscale(1); }
.rv-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #e6e9f0; text-align: center; padding: var(--space-lg); pointer-events: none; }
.rv-msg .btn { pointer-events: auto; }
.rv-msg > div { max-width: 520px; font-size: var(--t-body-lg-size); line-height: 1.5; }
.rv-spin { font-size: 44px; animation: rv-rot 1.1s linear infinite; color: var(--accent-primary); }
@keyframes rv-rot { to { transform: rotate(360deg); } }
.rv-ctl-tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--warning) 88%, #000); color: #1b1d23; font-weight: 700; font-size: var(--t-label-md-size); padding: 4px 14px; border-radius: var(--radius-full); pointer-events: none; opacity: .92; }
.rv-stats { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-family: var(--font-mono); font-size: 11px; color: #cdd3df; background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: var(--radius-full); pointer-events: none; }
@media (max-width: 900px) { .rv-actions .btn span:not(.material-symbols-outlined) { display: none; } .rv-bar { gap: var(--space-sm); } }

/* modal form bits */
.form-hint { color: var(--text-muted); font-size: var(--t-label-sm-size); margin-top: 4px; }
.modal-body .field-label:first-child { margin-top: 0; }
textarea.field-textarea { width: 100%; min-height: 90px; }
.new-key-box { background: var(--surface-container-low); box-shadow: var(--shadow-inset); border-radius: var(--radius-default); padding: var(--space-md); text-align: center; }
.new-key-box .key-code { font-size: 20px; }

/* responsive */
@media (max-width: 900px) {
  .app-header { padding: 10px var(--space-md); }
  .header-center { order: 3; width: 100%; flex-wrap: wrap; }
  .search-well { flex: 1; min-width: 0; }
  .app-body { overflow-y: auto; }
  .app-body.full-width .side-panel { max-height: none; min-height: 0; }
  .drawer-panel, .drawer-panel.dm-drawer { width: 100%; }
  .kv { grid-template-columns: 110px 1fr; }
  .remote-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .app-body { overflow: visible; padding: 4px; }
  .side-panel { padding: var(--space-sm); overflow: visible; }
  .tab-panels { overflow: visible; }
  .tab-panel { overflow: visible; }
  .header-logo-text { font-size: 15px; }
  .dev-grid, .key-grid { grid-template-columns: 1fr; }
  .modal-box { width: 100%; }
  .field-row { flex-direction: column; }
}

/* Pro mode counterpart: shown only while Pro mode is OFF (masked values) */
[data-pro="1"] .nopro-only { display: none !important; }

/* full-width layout (no map) */
.app-body.full-width .side-panel { width: 100%; }
@media (max-width: 900px) { .header-left { flex: 1; min-width: 0; } }

/* ======================================================================
   Polish (v1.1)
   ====================================================================== */
/* Icons keep their box even before the icon font has loaded (offline), so layout never jumps. */
.material-symbols-outlined { width: 1em; height: 1em; overflow: hidden; flex: none; display: inline-block; }
.material-symbols-outlined.big-icon { flex: none; }

/* No horizontal page scroll: every flex/grid ancestor of a table may shrink. */
html, body { overflow-x: hidden; }
.app-shell, .app-body, .side-panel, .tab-panels, .tab-panel { min-width: 0; max-width: 100%; }
.tab-panel > * { max-width: 100%; }

/* header: search grows in the middle, nothing wraps badly */
.app-header { flex-wrap: nowrap; }
.header-left { flex: none; }
.header-center { flex: 1 1 auto; justify-content: center; min-width: 0; }
.search-well { flex: 1 1 260px; max-width: 420px; min-width: 120px; }
.team-picker { flex: 0 1 220px; min-width: 0; }
.team-picker select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.header-right { flex: none; }
.header-logo-text { white-space: nowrap; }

/* tables: keep short values on one line, let the long text columns wrap */
.dash-table td, .dash-table th { white-space: nowrap; }
.dash-table td.wrap { white-space: normal; min-width: 180px; }
.dash-table .tbl-name { white-space: nowrap; }
.chip { white-space: nowrap; }
.dev-chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dev-chips .chip .material-symbols-outlined { font-size: 16px; }
.table-wrap { max-width: 100%; }

/* key cards: three actions on one row */
.key-card .panel-actions { gap: 6px; flex-wrap: wrap; }
.key-card .panel-actions .btn { padding: 6px 12px; }
.key-head .dev-chips { justify-content: flex-end; }

/* drawer */
.drawer-section-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-primary); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--outline-variant); }
.dm-shot { aspect-ratio: auto; height: clamp(220px, 40vh, 380px); }
.drawer-body { overscroll-behavior: contain; }
.drawer-head { border-bottom: 1px solid var(--outline-variant); margin-bottom: var(--space-md); }

@media (max-width: 1180px) { .dash-table td, .dash-table th { padding-left: 6px; padding-right: 6px; } }
@media (max-width: 900px) {
  .header-left { flex: 1 1 0; min-width: 0; }
  .header-logo-text { min-width: 0; }
  .header-logo-text { overflow: hidden; text-overflow: ellipsis; }
  .app-header { flex-wrap: wrap; }
  .header-center { flex-basis: 100%; }
  .search-well { max-width: none; }
  .team-picker { flex: 0 1 200px; }
}
@media (max-width: 520px) {
  .dash-kpi-row .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .team-picker { flex: 1 1 140px; }
  .tab-bar { max-width: 100%; }
  .panel-actions { width: 100%; }
  .dm-shot { height: 240px; }
}
.tds-input-well:has(textarea) { align-items: stretch; height: auto; }
.tds-input-well textarea.field-textarea { min-height: 96px; }
.tds-toggle .tds-thumb { box-shadow: var(--shadow-shallow), 0 0 0 1px var(--outline-variant); }
.tds-input-well:has(textarea) { border-radius: var(--radius-default); padding-top: 2px; }

/* ---------- DataTable (assets/datatable.js) ---------- */
.dt-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; min-height: 34px; flex-wrap: wrap; }
.dt-count { font-size: var(--t-label-sm-size); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.dt-btn { width: 32px; height: 32px; border: none; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-shallow); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-family: inherit; }
.dt-btn:hover { color: var(--accent-primary); }
.dt-btn[data-active='true'] { box-shadow: var(--shadow-pressed); color: var(--accent-primary); }
.dt-btn .material-symbols-outlined { font-size: 18px; }
.dt-scroll { overflow: auto; max-width: 100%; max-height: calc(100vh - 290px); min-height: 120px; border-radius: var(--radius-default); }
.dt-table { border-collapse: separate; border-spacing: 0; }
.dt-table.dt-fixed { table-layout: fixed; max-width: none; }
.dt-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); cursor: default; user-select: none; padding: 8px 10px; box-shadow: 0 1px 0 var(--outline-variant); }
.dt-table thead th.dt-sortable { cursor: pointer; }
.dt-table thead th.dt-sortable:hover, .dt-table thead th.dt-sorted { color: var(--accent-primary); }
.dt-table thead tr.dt-filters th { top: var(--dt-h, 34px); z-index: 2; padding: 4px 8px 8px; }
.dt-th-in { display: inline-block; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dt-arrow { display: inline-block; width: 14px; font-size: 9px; opacity: 0; margin-left: 2px; vertical-align: bottom; line-height: 18px; }
.dt-sortable:hover .dt-arrow { opacity: .35; }
.dt-sorted .dt-arrow { opacity: 1; }
.dt-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 4; touch-action: none; }
.dt-grip::after { content: ''; position: absolute; left: 4px; top: 25%; bottom: 25%; width: 1px; background: var(--outline-variant); }
.dt-grip:hover::after, .dt-grip.dt-active::after { background: var(--accent-primary); width: 2px; left: 3px; }
.dt-fixed td { overflow: hidden; text-overflow: ellipsis; }
.dt-fixed td.wrap { white-space: nowrap; min-width: 0; }
.dt-measure td, .dt-measure th { white-space: nowrap !important; overflow: visible !important; }
.dt-f { width: 100%; min-width: 0; font: inherit; font-size: 12px; font-weight: 500; padding: 4px 8px; border: 1px solid var(--outline-variant); border-radius: 10px;
  background: var(--surface-container-lowest); color: var(--on-surface); outline: none; }
.dt-f:focus { border-color: var(--accent-primary); }
input.dt-f::-webkit-search-cancel-button { cursor: pointer; }
.dt-empty td { text-align: center; color: var(--text-muted); padding: 22px 10px; white-space: normal; }
.dt-link { border: none; background: none; color: var(--accent-primary); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.dt-menu { position: fixed; z-index: 5000; min-width: 190px; padding: 8px; border-radius: var(--radius-default); background: var(--surface); box-shadow: var(--shadow-card);
  font-size: var(--t-label-md-size); color: var(--on-surface); display: flex; flex-direction: column; gap: 2px; }
.dt-menu-title { font-size: var(--t-label-sm-size); font-weight: 700; color: var(--text-muted); padding: 4px 8px; text-transform: uppercase; letter-spacing: .04em; }
.dt-mi { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; border: none; background: none; font: inherit; color: inherit; text-align: left; }
.dt-mi:hover { background: var(--surface-container-high); }
.dt-mi.dt-dis { opacity: .5; cursor: default; }
.dt-mi input { accent-color: var(--accent-primary); margin: 0; }
.dt-reset { margin-top: 4px; border-top: 1px solid var(--outline-variant); border-radius: 0 0 10px 10px; color: var(--accent-primary); font-weight: 600; }

/* clickable KPI tiles + key seat blocks */
.kpi-card[data-kpi], .kpi-link { cursor: pointer; transition: box-shadow .15s; }
.kpi-card[data-kpi]:hover .kpi-label, .kpi-link:hover { color: var(--accent-primary); }
.kpi-card[data-kpi]:focus-visible, .kpi-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.kpi-card.kpi-active { box-shadow: var(--shadow-pressed); }
.kpi-card.kpi-active .kpi-label { color: var(--accent-primary); font-weight: 700; }
.kpi-link { border-radius: var(--radius-sm); }

/* ---------- card settings + card grid ---------- */
.filter-row .cs-gear { margin-left: auto; }
.cs-seg { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.cs-field { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-size: var(--t-body-md-size); }
.cs-field:hover { background: var(--surface-container-high); }
.cs-field input { accent-color: var(--accent-primary); width: 16px; height: 16px; margin: 0; flex: none; }
.cs-field em { color: var(--text-muted); font-style: normal; font-size: var(--t-label-sm-size); }
.cs-dis { opacity: .6; cursor: default; }
.cs-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 12px; margin-top: 4px; }
.modal-wide .cs-fields { max-height: 46vh; overflow-y: auto; }
.bat-val { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.bat-val .material-symbols-outlined { font-size: 18px; transform: rotate(90deg); }
.bat-val.low { color: var(--error); font-weight: 700; }
.dev-grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-grid[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dev-grid[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dev-grid[data-cols='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dev-grid[data-cols='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 800px) { .dev-grid[data-cols='3'], .dev-grid[data-cols='4'], .dev-grid[data-cols='5'], .dev-grid[data-cols='6'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dev-grid[data-cols] { grid-template-columns: 1fr; } }
.dev-grid.compact { gap: var(--space-sm); }
.dev-grid.compact .dev-card { padding: 6px; gap: 3px; }
.dev-grid.compact .dev-thumb { aspect-ratio: 16 / 6; padding: 3px; }
.dev-grid.compact .dev-body { padding: 0 4px 4px; gap: 1px; }
.dev-grid.compact .dev-line, .dev-grid.compact .dev-name { font-size: var(--t-label-sm-size); }
.dev-grid.compact .dev-info-btn { top: 9px; right: 9px; }

/* ---------- device details popup ---------- */
.drawer-backdrop { justify-content: center; align-items: center; padding: 3vh 3vw; }
.drawer-panel.dm-drawer { width: min(1200px, 94vw); height: auto; max-height: 90vh; border-radius: var(--radius-card); }
.dm-pop { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding-bottom: var(--space-sm); }
.dm-left { min-width: 0; }
.dm-left .dm-shot { height: clamp(170px, 30vh, 280px); }
.dm-left .field-row { flex-direction: column; }
.dm-actions { flex-direction: column; margin-top: var(--space-sm); }
.dm-actions .btn { width: 100%; justify-content: center; }
.dm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); align-items: start; min-width: 0; }
.dm-card { background: var(--surface); border-radius: var(--radius-default); box-shadow: var(--shadow-shallow); padding: 14px 16px; margin: 0; min-width: 0; }
.dm-card .kv { grid-template-columns: 96px 1fr; }
.dm-full { grid-column: 1 / -1; }
[data-pro='1'] .dm-full.pro-only { display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 900px) { .dm-span2 { grid-column: span 2; } }
@media (max-width: 900px) {
  .drawer-backdrop { padding: 0; align-items: stretch; }
  .drawer-panel.dm-drawer { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .dm-pop { grid-template-columns: 1fr; }
  .dm-cards { grid-template-columns: 1fr; }
}

/* ======================================================================
   Theme choice: header menu + segmented control in the user menu
   ====================================================================== */
.theme-menu-wrap { position: relative; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 190px; padding: var(--space-sm); z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
}
.app-header:has(.theme-menu:not([hidden])) { z-index: 1200; }
.theme-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--on-surface);
  font: inherit; font-weight: 600; padding: 10px 12px; border-radius: var(--radius-default); cursor: pointer; text-align: left;
}
.theme-menu-item:hover { background: var(--surface-container-low); }
.theme-menu-item .theme-check { margin-left: auto; visibility: hidden; color: var(--accent-primary); }
.theme-menu-item.active { color: var(--accent-primary); }
.theme-menu-item.active .theme-check { visibility: visible; }
.user-menu { width: 288px; }
.user-menu-label { font-size: var(--t-label-sm-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.user-menu .theme-seg { margin-bottom: 4px; }
.user-menu .theme-seg-opt { padding: 8px 4px; gap: 4px; font-size: var(--t-label-sm-size); }
.user-menu .theme-seg-opt .material-symbols-outlined { font-size: 16px; }
.theme-seg-opt:focus-visible, .theme-menu-item:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

/* ======================================================================
   Dark mode polish (v7)
   ====================================================================== */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* filled buttons: bright accent fills in dark mode need dark text to stay readable */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .tds-btn[data-variant='primary'] { color: #0b1426; }
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .tds-btn[data-variant='danger'] { background: color-mix(in srgb, var(--error) 88%, #000); color: #1c0605; }
:root[data-theme="dark"] .btn-primary[disabled],
:root[data-theme="dark"] .btn-danger[disabled] { opacity: .5; }
:root[data-theme="dark"] .tds-badge[data-tone='success'] { color: var(--accent-emerald); }
:root[data-theme="dark"] .tds-badge[data-tone='warning'] { color: var(--warning); }
:root[data-theme="dark"] .tds-alert[data-tone='info'] { color: var(--accent-primary); }
:root[data-theme="dark"] .tds-alert[data-tone='success'] { color: var(--accent-emerald); }
:root[data-theme="dark"] .tds-alert[data-tone='warning'] { color: var(--warning); }
:root[data-theme="dark"] .tds-modal-backdrop,
:root[data-theme="dark"] .modal-backdrop,
:root[data-theme="dark"] .drawer-backdrop { background: rgba(3,7,18,.6); }
:root[data-theme="dark"] .lightbox-backdrop { background: rgba(3,7,18,.9); }
:root[data-theme="dark"] .rv-stage,
:root[data-theme="dark"] .rv-video { background: #05070d; }
:root[data-theme="dark"] .modal-box,
:root[data-theme="dark"] .toast { border: 1px solid var(--outline-variant); }
:root[data-theme="dark"] ::placeholder { color: var(--text-placeholder); opacity: 1; }
:root[data-theme="dark"] .field-input:-webkit-autofill { -webkit-text-fill-color: var(--on-surface); box-shadow: 0 0 0 1000px var(--surface-container-low) inset; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
.user-menu .theme-seg-opt { white-space: nowrap; }

/* Bug Dashboard opened inside the Device Manager: give it the whole window */
body.bug-full .app-header, body.bug-full .tab-bar, body.bug-full #appVersion { display: none !important; }
body.bug-full #tab-bugs { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--bg); overflow: hidden; }
body.bug-full .bug-full-bar { display: flex; align-items: center; min-height: 32px; }
body.bug-full .bug-full-bar .btn { padding: 4px 12px; }
body.bug-full .bug-frame-wrap { flex: 1; min-height: 0; }
body.bug-full .bug-frame { min-height: 0; height: 100%; border-radius: 12px; box-shadow: none; }

/* ======================================================================
   Open bug badge (v1.5.0)
   ====================================================================== */
.dev-bug-badge, .bug-mini {
  display: inline-flex; align-items: center; gap: 3px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--t-label-md-size);
  background: color-mix(in srgb, var(--warning) 26%, var(--surface)); color: var(--warning); border-radius: var(--radius-full); padding: 3px 9px 3px 6px;
  box-shadow: var(--shadow-shallow); line-height: 1;
}
.dev-bug-badge.many, .bug-mini.many { background: color-mix(in srgb, var(--error) 22%, var(--surface)); color: var(--error); }
.dev-bug-badge .material-symbols-outlined, .bug-mini .material-symbols-outlined { font-size: 16px; }
.dev-bug-badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.dev-grid.compact .dev-bug-badge { top: 9px; left: 9px; }
.bug-mini { margin-left: 8px; padding: 2px 8px 2px 5px; vertical-align: middle; box-shadow: none; }
.dev-bug-badge:hover, .bug-mini:hover { filter: brightness(1.12); }
.dev-bug-badge:focus-visible, .bug-mini:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ======================================================================
   Phone layout (v1.6.0): <=600px. Desktop is untouched: these controls stay hidden above 600px.
   ====================================================================== */
.menu-btn, .search-toggle, .search-close, .side-menu, .sm-backdrop, .kpi-gear { display: none; }
.logo-brand { display: inline; }

@media (max-width: 600px) {
  html, body { overflow-x: clip; }
  html.sm-open, html.sm-open body { overflow: hidden; }
  .app-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  /* slim sticky header row: [menu] [icon Device Manager DEMO] ... [search] [avatar] */
  .app-header { position: sticky; top: 0; margin: 0; padding: 4px 6px; gap: 2px; border-radius: 0 0 var(--radius-default) var(--radius-default); flex-wrap: nowrap; min-height: 48px; z-index: 50; }
  .app-header .btn-icon-round { width: 38px; height: 38px; }
  .app-header .btn-icon-round .material-symbols-outlined { font-size: 22px; }
  .menu-btn, .search-toggle { display: inline-flex; }
  .header-left { flex: 1 1 auto; min-width: 0; gap: 4px; }
  .header-logo-icon { font-size: 22px; }
  .header-logo-text { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .logo-brand { display: none; }
  .header-right { gap: 0; }
  .header-right #refreshBtn, .header-right .theme-menu-wrap { display: none; }
  /* search: overlays the row when opened */
  .header-center { display: none; }
  .app-header.searching .header-center { display: flex; position: absolute; top: 0; bottom: 0; right: 0; left: 50px; z-index: 3; padding: 5px 6px 5px 0; background: var(--surface); border-radius: 0 inherit inherit 0; width: auto; order: 0; }
  .app-header.searching .search-well { flex: 1; max-width: none; min-width: 0; padding: 0 4px 0 10px; }
  .app-header.searching #customerPickerWrap { display: none; }
  .search-close { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-muted); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: none; }
  .search-well .field-input { padding: 6px 0; }
  .search-well input[type=search]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
  /* demo pill: tiny badge next to the name */
  .header-left .demo-pill { margin-left: 2px; padding: 1px 6px; font-size: 9px; letter-spacing: .06em; box-shadow: none; }
  .header-left .demo-pill .material-symbols-outlined { display: none; }
  .user-menu { position: fixed; right: 6px; top: 52px; width: min(288px, calc(100vw - 12px)); }

  /* side menu */
  .sm-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,20,30,.45); z-index: 1300; }
  .sm-backdrop[hidden] { display: none; }
  .side-menu { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 80%; max-width: 340px; z-index: 1310; background: var(--surface); box-shadow: var(--shadow-card);
    transform: translateX(-105%); transition: transform .22s ease; visibility: hidden; border-radius: 0 var(--radius-card) var(--radius-card) 0; }
  .side-menu.open { transform: none; visibility: visible; }
  .sm-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--outline-variant); color: var(--accent-primary); }
  .sm-title { flex: 1; font-weight: 700; font-size: 16px; color: var(--on-surface); }
  .sm-scroll { flex: 1; overflow-y: auto; padding: 8px 10px; overscroll-behavior: contain; }
  .sm-tabs { display: flex; flex-direction: column; gap: 0; margin-bottom: 6px; }
  .sm-tab { justify-content: flex-start; gap: 12px; padding: 9px 12px; font-size: 15px; width: 100%; flex: none; }
  .sm-tab[hidden] { display: none; }
  .sm-tab .material-symbols-outlined { font-size: 22px; }
  .sm-tab.active { background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface)); box-shadow: none; }
  .sm-sect { border-top: 1px solid var(--outline-variant); padding: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
  .sm-sect[hidden] { display: none; }
  .sm-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .sm-sect .btn-block { justify-content: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .sm-sect .user-menu-row { padding: 2px 6px; }
  .sm-sect .team-picker { flex: none; }
  .sm-sect .tds-input-well { min-height: 0; height: 40px; padding: 0 10px; }
  .sm-sect .tds-input-well .field-input { padding: 0; height: 100%; }
  .sm-sect .theme-seg-opt { padding: 7px 4px; }
  .sm-foot { padding: 8px 14px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--outline-variant); text-align: right; }
  .app-body.full-width .tab-bar { display: none; }

  /* body: no card chrome, tight padding */
  .app-body { padding: 6px 6px 28px; overflow: visible; gap: 0; }
  .app-body.full-width .side-panel { padding: 0; box-shadow: none; background: transparent; overflow: visible; }
  .tab-panels, .tab-panel { overflow: visible; padding-right: 0; }
  .panel-header { flex-wrap: nowrap; margin-bottom: 8px; gap: 6px; }
  .panel-title { font-size: 17px; flex: 1; min-width: 0; }
  .panel-actions { flex-wrap: nowrap; gap: 4px; }
  .panel-actions .btn > span:not(.material-symbols-outlined) { display: none; }
  .panel-actions .btn { padding-left: 10px; padding-right: 10px; min-width: 38px; }
  .filter-row { margin-bottom: 8px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row .tds-chip { flex: none; }
  #tab-dashboard .filter-row [data-filter] { display: none; }

  /* KPI tiles: one row, ~64px */
  .dash-kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; align-items: stretch; }
  .kpi-card { height: 64px; padding: 4px 2px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 3px; row-gap: 0; justify-content: center; align-content: center; align-items: center; text-align: center; border-radius: var(--radius-default); min-width: 0; }
  .kpi-card-top { display: contents; }
  .kpi-icon { font-size: 18px; }
  .kpi-value { font-size: 20px; line-height: 1.1; }
  .kpi-label { grid-column: 1 / -1; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .kpi-gear { display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 34px; width: 34px; padding: 0; margin: 0; }
  .dash-kpi-row .kpi-gear { margin-left: 0; }
  .dash-kpi-row .kpi-gear .material-symbols-outlined { font-size: 20px; }

  /* cards: 1 per row, thumbnail left, 2 lines on the right */
  .dev-grid, .dev-grid[data-cols], .dev-grid.compact { grid-template-columns: 1fr; gap: 6px; padding-bottom: 12px; }
  .dev-card, .dev-grid.compact .dev-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 6px 30px 6px 6px; gap: 0 8px; }
  .dev-card .dev-thumb, .dev-grid.compact .dev-thumb { aspect-ratio: auto; width: 76px; height: 56px; padding: 2px; }
  .dev-thumb .material-symbols-outlined { font-size: 28px; }
  .dev-card .dev-body, .dev-grid.compact .dev-body { padding: 0; gap: 0; min-width: 0; }
  .dev-card > .dev-info-btn, .dev-grid.compact .dev-info-btn { top: 4px; right: 4px; }
  .dev-card .dev-line, .dev-card .dev-name { font-size: 12px; line-height: 1.35; }
  .dev-card .dev-name { font-size: 14px; }
  .dev-body > .dev-line ~ .dev-line { display: none; }
  .dev-card .dev-chips:not(:has(.chip-failed)) { display: none; }
  .dev-card .dev-chips { margin: 1px 0; }
  .dev-card .dev-chips .chip { font-size: 10px; padding: 1px 6px; }
  .dev-card .status-line { font-size: 11px; line-height: 1.3; }
  .dev-card .dev-name-row { gap: 2px; }
  .dev-card .dev-actions { position: absolute; right: 8px; bottom: 6px; margin: 0; }
  .dev-card .dev-actions .btn { padding: 3px 10px; font-size: 12px; min-height: 0; height: 28px; }
  .dev-card:has(.dev-actions) { min-height: 68px; }
  .dev-card .dev-bug-badge { left: 2px; top: 2px; }
  .dev-card:not(:has(.dev-thumb)) { grid-template-columns: 1fr; }

  /* tables scroll inside */
  .dt-scroll { max-width: 100%; }

  /* device popup: full-screen sheet with a sticky header */
  .drawer-backdrop { padding: 0; }
  .drawer-panel, .drawer-panel.dm-drawer { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .drawer-head { padding: 8px 10px 8px 12px; margin-bottom: 8px; position: sticky; top: 0; z-index: 2; background: var(--surface); }
  .drawer-body { padding: 0 10px 14px; }
  .dm-pop { gap: var(--space-sm); }
  .dm-cards { gap: var(--space-sm); }
  .dm-card { padding: 10px 12px; }
  .dm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dm-actions .btn { padding: 7px 6px; font-size: 12.5px; min-width: 0; white-space: normal; line-height: 1.15; }
  .dm-left .tds-input-well { height: 38px; }
  .dm-left .field-label { margin-top: 6px; }
  .dm-left .dm-shot { height: clamp(120px, 24vh, 190px); }

  /* modals: full-width bottom sheets */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-box, .modal-box.modal-wide { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .modal-head { padding: 10px 12px; }
  .modal-body { padding: 0 12px 8px; }
  .modal-foot { padding: 8px 12px 12px; }
  .toast-root { left: 8px; right: 8px; top: 56px; }
  .toast { min-width: 0; }
}
@media (max-width: 480px) {
  .dash-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-card[data-kpi="sessions"] { display: none; }
}

/* ======================================================================
   v1.6.1 phone fixes
   ====================================================================== */
.bug-dev-row { margin-bottom: 8px; }
.bug-dev-row .tds-chip { max-width: 100%; }
.bug-dev-row .chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  /* the version lives in the side menu on phones (never over content) */
  body:has(#app:not([hidden])) #appVersion { display: none !important; }
  /* icon-only panel buttons (words become tooltip/aria via JS) */
  .panel-actions .btn { font-size: 0; gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .panel-actions .btn .material-symbols-outlined { font-size: 22px; }
  .panel-actions { width: auto; flex: none; }
  .panel-actions .tds-chip { max-width: 46vw; }
  .dt-f::placeholder { color: transparent; }
  .panel-actions .tds-chip .chip-t { overflow: hidden; text-overflow: ellipsis; }
  .panel-title { font-size: 16px; }
  /* login card: compact */
  .login-screen { padding: 12px; align-items: flex-start; padding-top: 6vh; }
  .login-card { padding: 16px; width: 100%; }
  .login-logo { margin-bottom: 4px; }
  .login-title { font-size: 18px; }
  .login-subtitle { margin-bottom: 10px; }
  .login-form .btn { margin-top: 12px; }
  .demo-chips { margin-top: 10px; }
  /* tap targets */
  .icon-btn { min-width: 36px; min-height: 36px; }
  .dt-btn { min-width: 40px; min-height: 40px; }
  .dt-filters .field-input, .dt-filters select, .dt-filters input { min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
  .tab-panel.active { padding-top: 8px; }
  .remote-card { flex-wrap: nowrap; padding: 10px 12px; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
  .remote-card .big-icon { font-size: 30px; }
  .remote-card h3 { font-size: 15px; margin-bottom: 2px; }
  .remote-card p { font-size: 12.5px; line-height: 1.35; }
  .key-card { padding: 10px 12px; gap: 6px; }
  .key-card .panel-actions .btn { width: 40px; height: 40px; padding: 0; }
  .rv-bar { gap: 6px; padding: 6px 8px; }
  .rv-actions { gap: 6px; }
  .rv-bar .btn, .rv-bar button { min-height: 36px; }
}
@media (max-width: 600px) {
  /* simulator / remote-test / installer pages */
  body:not(:has(#app)) { padding: 8px !important; }
  .sim-card, .rt-card { padding: 12px !important; }
  .sim-actions, .rt-actions { flex-wrap: wrap; }
  .sim-actions .btn, .rt-actions .btn { min-height: 40px; }
  .sim-wrap h1, .rt-wrap h1 { font-size: 20px; }
}

/* clean login (v1.6.2): logo, two fields, button, demo chips - nothing else */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.login-card { display: flex; flex-direction: column; gap: 20px; }
.login-logo { margin-bottom: 4px; }
.login-form { gap: 12px; }
.login-form .btn { margin-top: 4px; }
.login-card .demo-chips { margin-top: 0; }

/* ======================================================================
   v1.7.0: global search, view switcher (tiles / table), generic tiles
   ====================================================================== */
.viewbar { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.panel-actions .viewbar { margin-left: 0; }
.viewbar .cs-gear { margin-left: 0; }
.view-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-container-low); box-shadow: var(--shadow-inset); }
.vs-btn { border: 0; background: transparent; color: var(--text-muted); width: 36px; height: 30px; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.vs-btn .material-symbols-outlined { font-size: 20px; }
.vs-btn[data-active="true"] { background: var(--surface); box-shadow: var(--shadow-shallow); color: var(--accent-primary); }
.vs-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.dev-grid[data-cols='1'] { grid-template-columns: minmax(0, 1fr); }
.tl-card { background: var(--surface); border-radius: var(--radius-default); box-shadow: var(--shadow-shallow); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: box-shadow .12s; }
.tl-card.click-row { cursor: pointer; }
.tl-card.click-row:hover { box-shadow: var(--shadow-card); }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tl-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tl-headline { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tl-body { display: flex; flex-direction: column; gap: 1px; }
.tl-card .dev-line { font-size: var(--t-label-md-size); overflow-wrap: anywhere; }
.key-notes { overflow-wrap: anywhere; }
.key-code { overflow-wrap: anywhere; }
.search-close { display: none; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; padding: 0; }
.search-close .material-symbols-outlined { font-size: 20px; }
.search-well.has-q .search-close { display: inline-flex; }
.search-well input[type=search]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.search-toggle { position: relative; }
.search-toggle.has-q::after { content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 600px) {
  .app-header.searching .search-close { display: inline-flex; }
  .dev-grid.tl[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dev-grid.tl[data-cols='1'] { grid-template-columns: minmax(0, 1fr); }
  .tl-card { padding: 9px 10px; }
  .vs-btn { width: 34px; height: 32px; }
  .panel-actions { align-items: center; }
  .bug-dev-row { display: flex; gap: 6px; flex-wrap: wrap; }
}
.empty-state .btn .material-symbols-outlined { font-size: 18px; opacity: 1; margin: 0; }

/* v1.7.1: tiles-per-row quick picker under the Tiles icon */
.viewbar { position: relative; }
.cols-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-card); white-space: nowrap; }
.cols-pop .cols-pop-label { font-size: var(--t-label-sm-size); color: var(--text-muted); padding: 0 6px 0 4px; }
.cols-pop button { border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--t-label-md-size); min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); }
.cols-pop button[data-active='true'] { background: var(--surface-container-low); box-shadow: var(--shadow-inset); color: var(--accent-primary); }
.cols-pop button:hover { color: var(--on-surface); }

/* ---------- styled dropdowns (rt-select.js) ---------- */
select.rt-sel-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.rt-sel-trigger {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; color: var(--on-surface); cursor: pointer;
  font: inherit; font-size: var(--t-body-md-size); font-weight: 600; padding: 11px 0; text-align: start;
}
.rt-sel-trigger:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 8px; }
.rt-sel-trigger[disabled] { opacity: .55; cursor: not-allowed; }
.rt-sel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-sel-chev { font-size: 20px; color: var(--text-muted); transition: transform .15s; flex: none; }
.rt-sel-trigger.open .rt-sel-chev { transform: rotate(180deg); }
.rt-sel-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.rt-sel-dot[hidden] { display: none; }
/* Trigger used without a surrounding input well gets its own raised pill. */
.rt-sel-trigger:not(.tds-input-well .rt-sel-trigger):not(.field-well .rt-sel-trigger) {
  flex: 0 1 auto; background: var(--surface-container-low); box-shadow: var(--shadow-inset);
  border-radius: var(--radius-control); padding: 9px 14px;
}
.rt-sel-pill { font-weight: 700; font-size: var(--t-label-md-size); padding: 8px 12px !important; }

.rt-sel-pop {
  position: fixed; z-index: 5000; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: 18px; padding: 6px;
  box-shadow: var(--shadow-card), 0 18px 40px rgba(15, 23, 42, .18);
  animation: rtSelIn .12s ease-out;
}
.rt-sel-pop.up { animation-name: rtSelInUp; }
@keyframes rtSelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rtSelInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rt-sel-group { padding: 10px 12px 4px; font-size: var(--t-label-sm-size); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.rt-sel-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
  cursor: pointer; font-weight: 600; color: var(--on-surface); font-size: var(--t-body-md-size);
}
.rt-sel-item.active { background: var(--surface-container-low); }
.rt-sel-item.selected { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-primary); font-weight: 700; }
.rt-sel-item.disabled { opacity: .45; cursor: default; }
.rt-sel-lead { width: 20px; flex: none; display: inline-flex; justify-content: center; font-size: 20px; }
.rt-sel-lead.rt-sel-dot { width: 10px; height: 10px; margin: 0 5px; }
.rt-sel-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-sel-meta { flex: none; color: var(--text-muted); font-size: var(--t-label-md-size); font-weight: 600; white-space: nowrap; }
.rt-sel-meta:empty { display: none; }
.rt-sel-check { flex: none; font-size: 18px; visibility: hidden; color: var(--accent-primary); }
.rt-sel-item.selected .rt-sel-check { visibility: visible; }
/* Device Manager adaptations */
.tds-input-well .rt-sel-trigger { padding: 0; height: 100%; }
.team-picker .rt-sel-trigger { min-width: 130px; }
.sm-sect .team-picker .rt-sel-trigger { min-width: 0; }
.search-well, .field-row .tds-input-well { min-width: 0; }
.dt-filters .rt-sel-trigger {
  width: 100%; min-width: 0; flex: 1 1 auto; box-shadow: none; background: transparent; padding: 4px 8px; gap: 4px;
  border: 1px solid var(--outline-variant); border-radius: 10px; font-size: 12px; font-weight: 500; min-height: 28px;
}
.dt-filters .rt-sel-trigger.open, .dt-filters .rt-sel-trigger:focus-visible { border-color: var(--accent-primary); outline: none; }
.dt-filters .rt-sel-chev { font-size: 16px; }
.dt-filters th { overflow: visible; }
.rm-src .tds-input-well .rt-sel-trigger { font-size: 13px; }
.rt-sel-pop { border: 1px solid var(--outline-variant); }
@media (max-width: 600px) {
  .rt-sel-pop { border-radius: 18px; max-height: 60vh; }
  .rt-sel-item { min-height: 44px; }
}

/* ---- System tab: security check + go live (v1.9.0) ---- */
.sys-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); max-width: 980px; }
.sys-card { padding: var(--space-md); }
.sys-card-title { display: flex; align-items: center; gap: 10px; font-size: var(--t-title-md-size, 18px); font-weight: 700; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.sys-card-title .chip { margin-left: auto; }
.sys-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--outline-variant); }
.sys-row:first-of-type { border-top: 0; }
.sys-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--accent-emerald); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-emerald) 22%, transparent); }
.sys-warn .sys-dot { background: var(--warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent); }
.sys-bad .sys-dot { background: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 22%, transparent); }
.sys-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sys-detail { color: var(--text-muted); font-size: var(--t-label-md-size); overflow-wrap: anywhere; }
.sys-fix { font-size: var(--t-label-md-size); font-weight: 600; }
.sys-st { flex: none; font-size: var(--t-label-sm-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-emerald); margin-top: 2px; }
.sys-warn .sys-st { color: var(--warning); }
.sys-bad .sys-st { color: var(--error); }
.sys-h { font-size: var(--t-title-sm-size, 16px); margin: var(--space-md) 0 2px; }
.sys-hint, .sys-intro { color: var(--text-muted); font-size: var(--t-label-md-size); margin: 0 0 var(--space-sm); }
.sys-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--space-sm) 0; }
.sys-switch { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; }
.sys-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sys-track { flex: none; width: 44px; height: 24px; border-radius: 12px; background: var(--surface-container-highest); position: relative; transition: background .15s; margin-top: 2px; box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.sys-track i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.sys-switch input:checked + .sys-track { background: var(--accent-primary); }
.sys-switch input:checked + .sys-track i { transform: translateX(20px); }
.sys-switch input:focus-visible + .sys-track { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.sys-sw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sys-sw-text span { color: var(--text-muted); font-size: var(--t-label-md-size); }
.sys-pw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sys-pw .tds-input-well { flex: 1 1 200px; min-width: 0; }
.sys-show { font-size: var(--t-label-md-size); color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; }
.sys-masked { -webkit-text-security: disc; }
.sys-code { font-family: var(--font-mono); font-size: 14px; user-select: all; }
.sys-scroll { overflow-x: auto; }
.sys-mini { border-collapse: collapse; width: 100%; font-size: var(--t-label-md-size); }
.sys-mini td { padding: 6px 10px 6px 0; border-top: 1px solid var(--outline-variant); }
.sys-list { padding-left: 18px; margin: 0 0 var(--space-sm); }
@media (max-width: 600px) {
  .sys-card { padding: var(--space-sm); }
  .sys-actions .btn { width: 100%; }
}

/* ---- Remote extras (v1.9.0): source chooser, file transfer strip, recording, activity chips ---- */
.src-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.src-choice { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 16px; border-radius: var(--radius-lg, 18px); border: 2px solid transparent; background: var(--surface-container-high, var(--surface)); color: inherit; font: inherit; cursor: pointer; box-shadow: var(--shadow-raised, none); min-height: 96px; }
.src-choice:hover { border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.src-choice:focus-visible, .src-choice.last { border-color: var(--accent-primary); outline: none; }
.src-choice .material-symbols-outlined { font-size: 30px; color: var(--accent-primary); flex: none; }
.src-t { display: flex; flex-direction: column; gap: 4px; }
.src-t b { font-size: 15px; }
.src-t span { color: var(--text-muted); font-size: var(--t-label-md-size); }
@media (max-width: 600px) { .src-choices { grid-template-columns: 1fr; } .src-choice { min-height: 72px; } }
.rv-note { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); max-width: 92%; background: color-mix(in srgb, var(--warning) 90%, #000); color: #1b1d23; font-weight: 600; font-size: var(--t-label-md-size); padding: 6px 16px; border-radius: var(--radius-full); text-align: center; pointer-events: none; z-index: 3; }
.rv-xfer { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(460px, 92%); height: 36px; border-radius: 18px; background: #1b1d23; color: #e8eaf0; border: 1px solid #3a3e4a; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; overflow: hidden; z-index: 3; font-size: var(--t-label-md-size); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.rv-xfer.err { border-color: var(--error); }
.rv-xfer.err .material-symbols-outlined { color: var(--error); }
.rv-xfer-pg { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent-primary) 55%, transparent); transition: width .12s linear; }
.rv-xfer > * { position: relative; }
.rv-xfer > .rv-xfer-pg { position: absolute; }
.rv-xfer-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-xfer-x { border: 0; background: #3a3e4a; color: #e8eaf0; border-radius: 12px; padding: 3px 12px; font: inherit; cursor: pointer; }
.rv-rec-on { background: var(--error) !important; color: #fff !important; }
.rv-rec-on .material-symbols-outlined { animation: rvblink 1.2s infinite; }
@keyframes rvblink { 50% { opacity: .3; } }
#rvRec .material-symbols-outlined { color: var(--error); }
.rv-rec-on .material-symbols-outlined { color: #fff !important; }
.act-chip { border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.act-chip .material-symbols-outlined { font-size: 14px; }

/* platform tag (Android phone / Windows PC) */
.plat-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; vertical-align: middle; }
.plat-tag .material-symbols-outlined { font-size: 16px; }
.plat-tag.plat-android { color: var(--success, #2e9e5b); }
.plat-tag.plat-windows { color: var(--accent-primary); }