/* ── Catppuccin Mocha ─────────────────────────────────────────────────────── */
:root {
  --base:     #1e1e2e;
  --mantle:   #181825;
  --crust:    #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --overlay2: #9399b2;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text:     #cdd6f4;
  --lavender: #b4befe;
  --blue:     #89b4fa;
  --sapphire: #74c7ec;
  --sky:      #89dceb;
  --teal:     #94e2d5;
  --green:    #a6e3a1;
  --yellow:   #f9e2af;
  --peach:    #fab387;
  --red:      #f38ba8;
  --mauve:    #cba6f7;
  --pink:     #f5c2e7;
}

/* ── Reset / Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--base);
  color: var(--text);
  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace,
               "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
}

button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input  { font: inherit; color: inherit; border: none; outline: none; background: none; }
a      { color: var(--blue); text-decoration: none; }

/* ── Shell layout ─────────────────────────────────────────────────────────── */
.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--base);
  color: var(--text);
}

.shell-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background: var(--crust);
  border-bottom: 1px solid var(--surface0);
  gap: 12px;
  flex-shrink: 0;
  user-select: none;
}

.topbar-left  { display: flex; align-items: center; gap: 8px; }
.topbar-center { flex: 1; display: flex; justify-content: center; }
.topbar-right { display: flex; align-items: center; gap: 4px; }

.topbar-logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--mauve);
  letter-spacing: -0.5px;
}

.topbar-search {
  width: 280px;
  height: 28px;
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 0 10px 0 28px;
  font-size: 12px;
  color: var(--text);
  transition: border-color 0.15s;
}
.topbar-search::placeholder { color: var(--overlay0); }
.topbar-search:focus { border-color: var(--blue); }

.topbar-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.topbar-search-icon {
  position: absolute;
  left: 8px;
  color: var(--overlay0);
  font-size: 12px;
  pointer-events: none;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--overlay1);
  transition: background 0.1s, color 0.1s;
}
.icon-btn:hover { background: var(--surface0); color: var(--text); }
.icon-btn--label { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.icon-btn--warn { color: var(--yellow); }
.icon-btn--warn:hover { color: var(--yellow); }

/* ── SVG icon base ───────────────────────────────────────────────────────── */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.btn-icon { display: inline-flex; align-items: center; margin-right: 4px; }

/* ── Sidebar (left panel) ─────────────────────────────────────────────────── */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--mantle);
  border-right: 1px solid var(--surface0);
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--surface0);
}
.sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--overlay1);
}

/* Sidebar tab bar (Discovered / Manual) */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--surface0);
  flex-shrink: 0;
}
.sidebar-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--overlay1);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-tab:hover { color: var(--text); }
.sidebar-tab--active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}
.sidebar-tab-badge {
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--surface1);
  color: var(--subtext0);
  padding: 0 4px;
}
.sidebar-tab--active .sidebar-tab-badge {
  background: var(--blue);
  color: var(--base);
}

/* Credential indicator in sidebar header */
.cred-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--overlay1);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.1s, color 0.1s;
  cursor: pointer;
}
.cred-indicator:hover { background: var(--surface0); color: var(--text); }
.cred-indicator--empty {
  color: var(--red);
}
.cred-indicator--empty:hover { color: var(--red); }
.cred-indicator-text { white-space: nowrap; }

.sidebar-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface0);
}
.search-input {
  width: 100%;
  height: 26px;
  background: var(--surface0);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  transition: border-color 0.15s;
}
.search-input::placeholder { color: var(--overlay0); }
.search-input:focus { border-color: var(--blue); }

/* Sidebar filter/sort row — two compact selects that fit a narrow
   sidebar. Each takes half the row width; their fonts and padding
   match the search input above. */
.sidebar-filters {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--surface0);
}
.sidebar-filter-select {
  flex: 1;
  min-width: 0;
  height: 24px;
  background: var(--surface0);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  padding: 0 4px;
  font-family: inherit;
}
.sidebar-filter-select:focus { outline: none; border-color: var(--blue); }

.device-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.device-list::-webkit-scrollbar { width: 10px; }
.device-list::-webkit-scrollbar-track { background: transparent; }
.device-list::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.device-list::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }

.device-empty {
  margin: 20px 8px;
  color: var(--overlay0);
  font-size: 12px;
  text-align: center;
  line-height: 1.8;
}

/* Device card */
.device-card {
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.device-card:hover {
  background: var(--surface0);
}
.device-card--selected {
  background: var(--surface0);
  border-color: var(--blue);
}
.device-card--auth-ok {
  border-left: 3px solid var(--green);
}
.device-card--auth-fail {
  border-left: 3px solid var(--red);
}

.device-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.device-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-addr {
  font-size: 11px;
  color: var(--subtext0);
  font-family: monospace;
}
.device-firmware {
  font-size: 10px;
  color: var(--overlay1);
  margin-top: 1px;
}
.device-location {
  font-size: 10px;
  color: var(--overlay0);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--online  { background: var(--green); box-shadow: 0 0 4px var(--green); }
.status-dot--offline { background: var(--red); }
.status-dot--unknown { background: var(--overlay0); }

.sidebar-footer {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--surface0);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.1s, opacity 0.1s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.btn-md { height: 32px; padding: 0 14px; font-size: 13px; }

.btn-primary {
  background: var(--blue);
  color: var(--base);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--sapphire); }

.btn-ghost {
  background: transparent;
  color: var(--subtext0);
  border: 1px solid var(--surface1);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface0); color: var(--text); }

.btn-scan { flex: 1; }

/* ── Device Panel (middle) ────────────────────────────────────────────────── */
.device-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--base);
  border-right: 1px solid var(--surface0);
  overflow-y: auto;
  overflow-x: hidden;
}
.device-panel::-webkit-scrollbar { width: 10px; }
.device-panel::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.device-panel::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }

.device-panel--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-empty-hint {
  color: var(--overlay0);
  font-size: 12px;
}

.panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--surface0);
}
.panel-device-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--surface0);
  border: 1px solid var(--surface1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.panel-device-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  text-align: center;
  word-break: break-all;
}

.panel-section {
  padding: 10px 8px 4px;
}
.panel-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--subtext0);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--surface1);
  margin-bottom: 4px;
}

/* Stream thumbnails */
.panel-thumbnails {
  margin-top: auto;
  border-top: 1px solid var(--surface0);
}

.thumb-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px 8px;
}

.thumb-card {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--surface1);
  background: var(--surface0);
  cursor: pointer;
  transition: border-color 0.15s;
}
.thumb-card:hover { border-color: var(--overlay0); }
.thumb-card--selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.thumb-img-wrap {
  position: relative;
  display: block;
}
.thumb-img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface0);
}
.thumb-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--overlay0);
}
.thumb-snapshot-save {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.thumb-img-wrap:hover .thumb-snapshot-save { opacity: 1; }
.thumb-snapshot-save:hover { background: rgba(0, 0, 0, 0.8); }

.thumb-profile-delete {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(190, 50, 50, 0.7);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.thumb-img-wrap:hover .thumb-profile-delete { opacity: 1; }
.thumb-profile-delete:hover { background: rgba(220, 50, 50, 0.95); }

.thumb-card--new {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--surface0);
  border: 1px dashed var(--surface2);
}
.new-profile-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--overlay1);
  border: none;
  cursor: pointer;
  padding: 24px;
}
.new-profile-btn:hover { color: var(--text); background: var(--surface1); }
.new-profile-label { font-size: 12px; }
.new-profile-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.new-profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.thumb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
}

.thumb-label {
  font-size: 10px;
  color: var(--subtext0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thumb-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.thumb-action {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--overlay1);
  transition: background 0.1s, color 0.1s;
}
.thumb-action:hover { background: var(--surface1); color: var(--blue); }

.thumb-loading, .thumb-empty {
  padding: 12px 8px;
  font-size: 11px;
  color: var(--overlay0);
  text-align: center;
}

.nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--subtext1);
  text-align: left;
  transition: background 0.1s, color 0.1s;
  gap: 8px;
}
.nav-link:hover { background: var(--surface0); color: var(--text); }
.nav-link--active {
  background: var(--surface0);
  color: var(--blue);
  font-weight: 600;
}

.nav-link-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Main Content (right) ─────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  background: var(--base);
  display: flex;
  flex-direction: column;
}
.main-content::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.main-content::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }

/* Welcome screen */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--overlay0);
  user-select: none;
}
.welcome-icon {
  /* The full LensBrand SVG carries its own gradients — let the artwork speak.
     Keep the wrapper for layout / future spacing rules; no tint, no fade. */
  line-height: 0;
}
.welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--subtext0);
  letter-spacing: -0.5px;
}
.welcome-sub {
  font-size: 13px;
  color: var(--overlay1);
}
.welcome-hint {
  font-size: 12px;
  color: var(--overlay0);
  text-align: center;
  max-width: 340px;
  line-height: 1.8;
}

/* Placeholder view (coming soon) */
.placeholder-view {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.placeholder-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.placeholder-addr {
  font-size: 12px;
  color: var(--sapphire);
  font-family: monospace;
  background: var(--surface0);
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-block;
}
.placeholder-hint {
  margin-top: 16px;
  color: var(--overlay0);
  font-size: 13px;
}

/* Content header bar (used in actual views) */
.content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--surface0);
  flex-shrink: 0;
}
.content-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* ── Tab Bar ─────────────────────────────────────────────────────────────── */
.settings-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-bar {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--surface0);
  flex-shrink: 0;
  background: var(--base);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--overlay1);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab--active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}

.tab-icon {
  font-size: 14px;
  opacity: 0.7;
}
.tab--active .tab-icon { opacity: 1; }

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.tab-content::-webkit-scrollbar { width: 10px; }
.tab-content::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.tab-content::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }

.settings-placeholder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Property Table (key-value) ──────────────────────────────────────────── */
.prop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.prop-table tr:nth-child(even) td {
  background: var(--surface0);
}

.prop-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--surface0);
}

.prop-table .prop-label {
  width: 35%;
  font-weight: 500;
  color: var(--subtext0);
  white-space: nowrap;
}

.prop-table .prop-value {
  color: var(--text);
  user-select: text;
  cursor: text;
  word-break: break-all;
}

.prop-table-header th {
  background: var(--surface0);
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--surface1);
}

.prop-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  padding: 10px 12px 6px;
  margin-top: 8px;
  border-bottom: 2px solid var(--surface1);
}

/* ── Status Bar ──────────────────────────────────────────────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 12px;
  background: var(--crust);
  border-top: 1px solid var(--surface0);
  flex-shrink: 0;
  user-select: none;
}

.status-bar-left,
.status-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-bar-text {
  font-size: 11px;
  color: var(--overlay1);
}

.status-bar-scanning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--blue);
}

.status-bar-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--surface1);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Theme: Light (Catppuccin Latte)                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
.theme-light {
  --base:     #eff1f5;
  --mantle:   #e6e9ef;
  --crust:    #dce0e8;
  --surface0: #ccd0da;
  --surface1: #bcc0cc;
  --surface2: #acb0be;
  --overlay0: #9ca0b0;
  --overlay1: #8c8fa1;
  --overlay2: #7c7f93;
  --subtext0: #6c6f85;
  --subtext1: #5c5f77;
  --text:     #4c4f69;
  --lavender: #7287fd;
  --blue:     #1e66f5;
  --sapphire: #209fb5;
  --sky:      #04a5e5;
  --teal:     #179299;
  --green:    #40a02b;
  --yellow:   #df8e1d;
  --peach:    #fe640b;
  --red:      #d20f39;
  --mauve:    #8839ef;
  --pink:     #ea76cb;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Theme: Classic (ODM — Windows-native look)                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.theme-classic {
  --base:     #ece9d8;
  --mantle:   #ffffff;
  --crust:    #e8e8e8;
  --surface0: #e0e0e0;
  --surface1: #c8c8c8;
  --surface2: #b0b0b0;
  --overlay0: #888888;
  --overlay1: #666666;
  --overlay2: #555555;
  --subtext0: #444444;
  --subtext1: #333333;
  --text:     #1a1a1a;
  --lavender: #4466bb;
  --blue:     #0078d4;
  --sapphire: #0063b1;
  --sky:      #0099cc;
  --teal:     #007070;
  --green:    #107c10;
  --yellow:   #c19c00;
  --peach:    #d83b01;
  --red:      #c42b1c;
  --mauve:    #744da9;
  --pink:     #c239b3;
}

/* Classic: square corners, match ODM's Windows look */
.theme-classic * { border-radius: 0 !important; }
.theme-classic {
  font-family: "Segoe UI", "Arial", system-ui, sans-serif;
}

/* Panels: all same gray background, white only for content area */
.theme-classic .sidebar { background: var(--base); border-right: 1px solid var(--surface1); }
.theme-classic .device-panel { background: var(--base); border-right: 1px solid var(--surface1); }
.theme-classic .topbar { background: var(--base); border-bottom: 1px solid var(--surface1); }
.theme-classic .main-content { background: var(--mantle); }

/* Device card: flat, bordered */
.theme-classic .device-card { border: 1px solid var(--surface1); background: var(--mantle); }
.theme-classic .device-card:hover { background: var(--surface0); }
.theme-classic .device-card--selected { background: var(--surface0); border-color: var(--blue); }

/* Property table: visible grid lines like ODM */
.theme-classic .prop-table td {
  border: 1px solid var(--surface1);
  padding: 4px 8px;
}
.theme-classic .prop-table tr:nth-child(even) td { background: var(--base); }
.theme-classic .prop-table tr:nth-child(odd) td { background: var(--mantle); }

/* Tabs: ODM style — gray bar, active tab white with blue top */
.theme-classic .tab-bar { background: var(--base); border-bottom: 1px solid var(--surface1); }
.theme-classic .tab { border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.theme-classic .tab--active {
  background: var(--mantle);
  border-color: var(--surface1);
  border-bottom-color: var(--mantle);
  color: var(--text);
}

/* Buttons */
.theme-classic .btn-primary { background: var(--blue); color: #fff; }
.theme-classic .btn-ghost { border: 1px solid var(--surface1); background: var(--base); }

/* Panel header */
.theme-classic .panel-header { background: var(--base); }
.theme-classic .panel-device-icon { background: var(--mantle); border: 1px solid var(--surface1); }

/* Section headers */
.theme-classic .prop-section-header { background: var(--surface0); padding: 6px 8px; border: 1px solid var(--surface1); border-bottom: 2px solid var(--surface1); }

/* Thumbnails */
.theme-classic .thumb-card { border: 1px solid var(--surface1); }

/* Sidebar tabs */
.theme-classic .sidebar-tabs { background: var(--base); }
.theme-classic .sidebar-tab--active { background: var(--mantle); }

/* ── Toast Notifications ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 32px;
  right: 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 9000;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  min-width: 260px;
  max-width: 400px;
  pointer-events: auto;
  animation: toast-in 0.25s ease-out;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  border: 1px solid var(--surface1);
  background: var(--mantle);
  color: var(--text);
}

.toast--success { border-left: 3px solid var(--green); }
.toast--info    { border-left: 3px solid var(--blue);  }
.toast--warning { border-left: 3px solid var(--yellow); }
.toast--error   { border-left: 3px solid var(--red);   }

.toast--success .toast-icon { color: var(--green); }
.toast--info    .toast-icon { color: var(--blue);  }
.toast--warning .toast-icon { color: var(--yellow); }
.toast--error   .toast-icon { color: var(--red);   }

.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-message { flex: 1; line-height: 1.4; }

.toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--overlay1);
  transition: background 0.1s, color 0.1s;
}
.toast-close:hover { background: var(--surface0); color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dialog / Modal ──────────────────────────────────────────────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fade-in 0.15s ease-out;
}

.dialog {
  background: var(--mantle);
  border: 1px solid var(--surface1);
  border-radius: 12px;
  width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  animation: dialog-in 0.2s ease-out;
}
.dialog--wide { width: 440px; }

.dialog-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--surface0);
}
.dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.dialog-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dialog-message {
  font-size: 13px;
  color: var(--subtext1);
  line-height: 1.6;
}
.dialog-hint {
  font-size: 12px;
  color: var(--overlay1);
  line-height: 1.5;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--surface0);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Danger button ───────────────────────────────────────────────────────── */
.btn-danger {
  background: var(--red);
  color: #fff;
  font-weight: 600;
}
.btn-danger:hover:not(:disabled) { opacity: 0.9; }

/* ── Form elements ───────────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--overlay1);
}
.form-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s;
}
.form-input::placeholder { color: var(--overlay0); }
.form-input:focus { border-color: var(--blue); }
.form-input--flex { flex: 1; }
.form-input--invalid { border-color: var(--red); }
.form-input--invalid:focus { border-color: var(--red); }
.form-error {
  font-size: 11px;
  color: var(--red);
  line-height: 1.4;
  margin-top: 2px;
}

.form-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.form-hint {
  font-size: 11px;
  color: var(--overlay0);
  line-height: 1.4;
  margin-top: 2px;
}

.form-toggle {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 12px;
  color: var(--subtext0);
}

/* Manual device dot */
.status-dot--manual { background: var(--blue); box-shadow: 0 0 4px var(--blue); }

/* ── Tab loading / error / empty states ───────────────────────────────────── */
.tab-loading {
  padding: 24px;
  color: var(--overlay1);
  font-size: 13px;
}
.tab-error {
  padding: 24px;
  color: var(--red);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.tab-error-retry { align-self: flex-start; }
.tab-empty {
  padding: 16px 12px;
  color: var(--overlay0);
  font-size: 13px;
}

/* ── Maintenance cards ───────────────────────────────────────────────────── */
.maintenance-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.maintenance-card {
  border: 1px solid var(--surface1);
  border-radius: 10px;
  padding: 16px 20px;
  background: var(--mantle);
}
.maintenance-card--danger {
  border-color: var(--red);
  border-left: 3px solid var(--red);
}

.maintenance-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.maintenance-icon { font-size: 18px; }
.maintenance-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.maintenance-desc {
  font-size: 12px;
  color: var(--subtext0);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ── Context Menu ─────────────────────────────────────────────────────────── */
.ctx-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
}

.ctx-menu {
  position: fixed;
  min-width: 160px;
  background: var(--mantle);
  border: 1px solid var(--surface1);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  animation: dialog-in 0.12s ease-out;
  z-index: 8001;
}

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  text-align: left;
  transition: background 0.1s;
}
.ctx-menu-item:hover { background: var(--surface0); }
.ctx-menu-item--danger { color: var(--red); }
.ctx-menu-item--danger:hover { background: rgba(243, 139, 168, 0.1); }

.ctx-menu-item-icon { flex-shrink: 0; opacity: 0.7; }

/* ── Imaging Settings ────────────────────────────────────────────────────── */
.imaging-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.imaging-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 24px;
}
.imaging-body::-webkit-scrollbar { width: 10px; }
.imaging-body::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.imaging-body::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }

.imaging-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
}
.imaging-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--subtext0);
}
.imaging-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--blue);
  cursor: pointer;
}
.imaging-value {
  width: 36px;
  text-align: right;
  font-size: 12px;
  color: var(--text);
  font-family: monospace;
}
.imaging-select {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.imaging-select:focus { border-color: var(--blue); }

.imaging-footer {
  padding: 16px 12px;
  border-top: 1px solid var(--surface0);
  display: flex;
  justify-content: flex-end;
}

/* Live preview wrapper inside ImagingView (and PTZ later). Fixed-ish
   height with a small floor so very short windows still leave room for
   the controls below; bordered to delimit the preview from the form. */
.imaging-preview {
  flex: 0 0 320px;
  min-height: 200px;
  display: flex;
  border-bottom: 1px solid var(--surface0);
  background: #000;
}

/* ── Users tab: edit + delete per-row controls ───────────────────────────── */
.user-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 8px;
  white-space: nowrap;
}
.user-row-btn {
  background: transparent;
  border: 0;
  color: var(--overlay1);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-row-btn:hover { background: var(--surface1); color: var(--text); }
.user-row-btn--danger:hover { color: var(--red); }
.user-edit-password {
  background: var(--surface1);
  border: 1px solid var(--surface2);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 4px 6px;
  width: 140px;
  font-family: inherit;
}
.user-edit-password:focus { outline: none; border-color: var(--blue); }

/* ── PTZ ─────────────────────────────────────────────────────────────────── */
.ptz-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.ptz-status-error {
  margin-left: auto;
  font-size: 12px;
  color: var(--red);
  font-weight: 400;
}
.ptz-body {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

/* Joystick + zoom + speed live in the left column. */
.ptz-controls {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  align-items: flex-start;
}
.ptz-pad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
}
.ptz-dir {
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 0.1s, transform 0.05s;
}
.ptz-dir:hover { background: var(--surface1); }
.ptz-dir:active { background: var(--surface2); transform: scale(0.95); }
.ptz-dir--center {
  background: transparent;
  border-style: dashed;
  color: var(--overlay1);
}
.ptz-dir--center:hover { background: var(--surface0); color: var(--red); }

.ptz-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 140px;
}
.ptz-side-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--overlay0);
  font-weight: 600;
}
.ptz-zoom,
.ptz-focus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--surface0);
  border-radius: 8px;
}
.ptz-zoom-btn {
  background: var(--surface1);
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.ptz-zoom-btn:hover { background: var(--surface2); }
.ptz-zoom-btn:active { transform: scale(0.95); }

/* AUTO/MANUAL focus mode segmented control. Renders inside .ptz-focus
   above the Near/Far buttons. The active variant flips the foreground
   colour to make the current mode unmistakable. */
.ptz-focus-mode {
  display: flex;
  gap: 0;
  margin-bottom: 4px;
}
.ptz-focus-mode-btn {
  flex: 1;
  background: var(--surface1);
  border: 1px solid var(--surface2);
  color: var(--overlay1);
  cursor: pointer;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
}
.ptz-focus-mode-btn:first-child { border-radius: 6px 0 0 6px; border-right: 0; }
.ptz-focus-mode-btn:last-child  { border-radius: 0 6px 6px 0; }
.ptz-focus-mode-btn:hover { background: var(--surface2); }
.ptz-focus-mode-btn--active {
  background: var(--blue);
  color: var(--base);
  border-color: var(--blue);
}
.ptz-focus-mode-btn--active:hover { background: var(--blue); }
.ptz-speed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--surface0);
  border-radius: 8px;
}
.ptz-speed input[type="range"] { width: 100%; }
.ptz-speed-value {
  font-size: 12px;
  color: var(--overlay1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ptz-misc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Preset list takes the rest of the row and scrolls when long. */
.ptz-presets {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface0);
  border-radius: 8px;
  overflow: hidden;
  min-width: 200px;
}
.ptz-presets-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface1);
  font-size: 12px;
  font-weight: 600;
  color: var(--overlay1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ptz-presets-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  flex: 1;
}
.ptz-presets-list::-webkit-scrollbar { width: 10px; }
.ptz-presets-list::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.ptz-presets-list::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }
.ptz-preset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.ptz-preset-item:hover { background: var(--surface1); }
.ptz-preset-item:active { background: var(--surface2); }
.ptz-preset-name { flex: 1; }
.ptz-preset-delete {
  background: transparent;
  border: 0;
  color: var(--overlay0);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ptz-preset-delete:hover { background: var(--surface2); color: var(--red); }

/* New-preset input row pinned at the bottom of the preset list. */
.ptz-preset-new {
  display: flex;
  gap: 6px;
  padding: 8px 8px 10px;
  border-top: 1px solid var(--surface1);
}
.ptz-preset-input {
  flex: 1;
  background: var(--surface1);
  border: 1px solid var(--surface2);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
}
.ptz-preset-input:focus {
  outline: none;
  border-color: var(--blue);
}
.ptz-presets-empty {
  padding: 24px;
  text-align: center;
  color: var(--overlay0);
  font-size: 13px;
}

/* ── Identification edit ─────────────────────────────────────────────────── */
.id-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
}
.id-edit-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.id-edit-label {
  width: 110px;
  font-size: 13px;
  color: var(--overlay1);
  flex-shrink: 0;
}
.id-edit-input {
  flex: 1;
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}
.id-edit-input:focus {
  outline: none;
  border-color: var(--blue);
}
.id-edit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Time tab action row: Sync from PC / Use NTP / Apply TZ sit side by side
   under the timezone + DST inputs. */
.time-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Live Video ──────────────────────────────────────────────────────────── */
.live-video-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.live-video-modes {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  background: var(--surface0);
  border-radius: 6px;
  padding: 2px;
}
.live-video-mode-tab {
  border: none;
  background: transparent;
  color: var(--overlay1);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.live-video-mode-tab:hover { color: var(--text); }
.live-video-mode-tab--active {
  background: var(--surface1);
  color: var(--text);
}
.live-video-backend {
  font-size: 11px;
  color: var(--overlay0);
  font-weight: 400;
}
.live-video-save {
  background: none;
  border: none;
  cursor: pointer;
}
.live-video-save:disabled {
  opacity: 0.4;
  cursor: default;
}
.live-video-save:disabled:hover {
  background: none;
  color: var(--overlay1);
}

/* ── Log viewer ──────────────────────────────────────────────────────────── */
.log-viewer {
  width: 760px;
  max-width: 92vw;
  height: 70vh;
  display: flex;
  flex-direction: column;
}
.log-viewer .dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.log-viewer-filter {
  margin-left: auto;
  width: 240px;
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 6px;
  color: var(--text);
  padding: 4px 10px;
  font-size: 12px;
}
.log-viewer-filter:focus {
  outline: none;
  border-color: var(--lavender);
}
.log-viewer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.log-viewer-path {
  font-size: 11px;
  color: var(--overlay0);
  flex-shrink: 0;
}
.log-viewer-pre {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 12px;
  background: var(--crust);
  border: 1px solid var(--surface0);
  border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--subtext1);
  white-space: pre-wrap;
  word-break: break-all;
}
.log-viewer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--overlay0);
  text-align: center;
}

/* ── Health check tab ────────────────────────────────────────────────────── */
.health-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.health-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.health-summary {
  font-size: 12px;
  color: var(--subtext0);
}
.health-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  color: var(--overlay0);
  text-align: center;
}
.health-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.health-target {
  font-size: 11px;
  color: var(--overlay0);
}
.health-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.health-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--overlay1);
  margin-bottom: 4px;
}
.health-row {
  display: grid;
  grid-template-columns: 22px 180px 64px 1fr;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.health-row:nth-child(even) {
  background: var(--mantle);
}
.health-row-status {
  display: flex;
  align-items: center;
}
.health-row-name {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text);
}
.health-row-time {
  color: var(--overlay0);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.health-row-detail {
  color: var(--subtext0);
  overflow: hidden;
  text-overflow: ellipsis;
}
.health-pass .health-row-status { color: var(--green); }
.health-warn .health-row-status { color: var(--yellow); }
.health-fail .health-row-status { color: var(--red); }
.health-skip .health-row-status { color: var(--overlay0); }
.health-fail .health-row-name { color: var(--red); }

/* Profile assessment rows — two-column flex, not the 4-col check grid */
.health-prow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.health-prow:nth-child(even) {
  background: var(--mantle);
}
.health-prow-name {
  flex-shrink: 0;
  min-width: 90px;
  font-weight: 600;
  color: var(--text);
}
.health-prow-verdict { color: var(--subtext0); }
.health-pass .health-prow-verdict { color: var(--green); }
.health-warn .health-prow-verdict { color: var(--yellow); }
.health-skip .health-prow-verdict { color: var(--overlay0); }

/* Baseline-comparison note under the header, plus the diff section that
   appears below the per-check table. Both reuse the existing
   .health-fail/pass/warn accent colours so they fit visually. */
.health-baseline-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 24px 8px;
  color: var(--subtext0);
  font-size: 11px;
  font-style: italic;
}
.health-diff {
  margin-top: 8px;
  border-left: 3px solid var(--blue);
  padding-left: 8px;
}
.live-video-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 24px;
  padding: 8px 12px;
  background: var(--surface0);
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.live-video-tip-body { flex: 1; }

/* ── OSD view ────────────────────────────────────────────────────────────── */
.osd-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.osd-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.osd-table { width: 100%; }
.osd-content-cell {
  font-family: monospace;
  word-break: break-all;
}
.osd-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}
.osd-editor {
  margin: 16px 24px;
  padding: 16px;
  background: var(--surface0);
  border-radius: 6px;
  border: 1px solid var(--surface1);
}
.osd-editor-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}
.osd-editor-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  align-items: center;
}
.osd-editor-label {
  font-size: 12px;
  color: var(--overlay1);
}
.osd-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.osd-editor-type {
  display: flex;
  align-items: center;
  gap: 8px;
}
.osd-editor-quota {
  font-size: 11px;
  color: var(--overlay1);
  font-variant-numeric: tabular-nums;
}
.osd-editor-quota--full {
  color: var(--red, #f38ba8);
  font-weight: 600;
}
.live-video-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  min-height: 0;
}
.live-video-frame {
  /* Scales any snapshot — small or huge — to fit the available area
     while preserving aspect ratio. <img> and <video> honour object-fit;
     iframe falls through to width/height: 100% only. */
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
iframe.live-video-frame {
  background: #000;
}
.live-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--overlay1);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.live-video-detail {
  font-size: 12px;
  color: var(--overlay0);
  max-width: 480px;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Error Boundary ──────────────────────────────────────────────────────── */
.error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 40px;
  background: var(--base);
  color: var(--text);
  text-align: center;
  gap: 12px;
}
.error-boundary h2 { font-size: 20px; color: var(--red); }
.error-boundary-detail {
  font-size: 12px;
  color: var(--overlay1);
  max-width: 500px;
  word-break: break-all;
}

/* ── IO Control view ─────────────────────────────────────────────────────── */
.io-control-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 0 0 16px 0;
}
.io-section {
  padding: 12px 24px 16px;
  border-bottom: 1px solid var(--surface1);
}
.io-section:last-child {
  border-bottom: none;
}
.io-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.io-section-header h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
.io-section-hint {
  font-size: 12px;
  color: var(--overlay1);
}
.io-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.io-card {
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.io-card-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.io-card-token {
  font-family: monospace;
  font-weight: 600;
  color: var(--text);
  min-width: 140px;
}
.io-card-prop {
  font-size: 12px;
  color: var(--subtext0);
}
.io-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.io-edit-drawer {
  margin-top: 8px;
  padding: 12px;
  background: var(--base);
  border-radius: 6px;
  border: 1px solid var(--surface1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.io-edit-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.io-edit-row label {
  min-width: 100px;
  font-size: 12px;
  color: var(--subtext1);
}
.io-edit-row input,
.io-edit-row select {
  flex: 0 0 auto;
}
.io-edit-hint {
  font-size: 11px;
  color: var(--overlay1);
}
.io-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Events view ─────────────────────────────────────────────────────────── */
.events-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.events-status {
  font-size: 12px;
  color: var(--overlay0);
  margin-left: 8px;
}
.events-count {
  font-size: 11px;
  color: var(--sapphire);
  background: var(--surface0);
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: auto;
  margin-right: 8px;
}
.events-log {
  flex: 1;
  overflow: auto;
  padding: 0 24px 24px;
}
.events-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--overlay0);
  font-size: 13px;
}
.events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.events-table th {
  position: sticky;
  top: 0;
  background: var(--mantle);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface0);
  font-weight: 600;
  color: var(--overlay1);
  z-index: 1;
}
.events-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface0);
  vertical-align: top;
}
.events-time {
  font-family: monospace;
  color: var(--overlay1);
  white-space: nowrap;
}
.events-topic {
  font-family: monospace;
  color: var(--sapphire);
  white-space: nowrap;
}
.events-data {
  font-family: monospace;
  color: var(--text);
  word-break: break-all;
}
.events-log::-webkit-scrollbar { width: 10px; }
.events-log::-webkit-scrollbar-thumb {
  background: var(--surface1);
  border-radius: 5px;
  background-clip: padding-box;
}
.events-log::-webkit-scrollbar-thumb:hover { background: var(--surface2); background-clip: padding-box; }
.events-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--overlay1);
  cursor: pointer;
  user-select: none;
}
.events-details-toggle input { cursor: pointer; }
.events-table--detailed td.events-data div { white-space: nowrap; }
.events-op {
  font-family: monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface0);
  color: var(--overlay1);
  display: inline-block;
}
.events-op--init { background: rgba(116, 199, 236, 0.15); color: var(--sapphire); }
.events-op--changed { background: rgba(166, 227, 161, 0.15); color: var(--green); }
.events-op--deleted { background: rgba(243, 139, 168, 0.15); color: var(--red); }

.events-topics-wrap {
  position: relative;
  display: inline-block;
}
.btn--active {
  background: var(--surface1);
  color: var(--text);
}
.events-topics-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  background: var(--mantle);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 280px;
  max-width: 420px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.events-topics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface0);
  font-weight: 600;
  font-size: 13px;
}
.events-topics-actions {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface0);
}
.events-topics-list {
  overflow-y: auto;
  padding: 6px 0;
}
.events-topic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-family: monospace;
  color: var(--text);
}
.events-topic-row:hover { background: var(--surface0); }
.events-topic-row input { cursor: pointer; }
.events-topic-row-name { flex: 1; word-break: break-all; }
.events-topics-loading,
.events-topics-error,
.events-topics-empty {
  padding: 20px;
  text-align: center;
  color: var(--overlay0);
  font-size: 12px;
}
.events-topics-error { color: var(--red); }

.events-search {
  flex: 0 1 200px;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--surface1);
  border-radius: 4px;
  background: var(--base);
  color: var(--text);
  font-family: monospace;
}
.events-search:focus { outline: none; border-color: var(--blue); }

.events-th-sortable {
  cursor: pointer;
  user-select: none;
}
.events-th-sortable:hover { color: var(--sapphire); }
.events-th-sortable--active { color: var(--sapphire); }

.ptz-preset-search {
  margin: 8px 12px 0;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--surface1);
  border-radius: 4px;
  background: var(--base);
  color: var(--text);
}
.ptz-preset-search:focus { outline: none; border-color: var(--blue); }

/* ── About dialog ────────────────────────────────────────────────────────── */
.about-dialog { min-width: 380px; max-width: 520px; }
.about-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}
/* about-icon was a tint hook for the monochrome lens; LensBrand has its own
   gradients now, so drop colour styling — keep the line-height kill so the
   SVG doesn't gain a phantom descender row. */
.about-icon { line-height: 0; }
.about-name { font-size: 22px; font-weight: 700; color: var(--text); }
.about-sub { font-size: 12px; color: var(--overlay1); margin-bottom: 4px; }
.about-tagline { font-size: 11px; color: var(--overlay0); margin-bottom: 8px; max-width: 320px; text-align: center; }
.about-versions {
  font-family: monospace;
  font-size: 12px;
  color: var(--overlay1);
  display: flex;
  gap: 16px;
}
.about-logpath {
  margin-top: 8px;
  font-size: 11px;
  color: var(--overlay0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.about-logpath code {
  font-family: monospace;
  background: var(--surface0);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}
.about-footer { gap: 6px; }

.about-log-toggle {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}
.about-log-toggle input { cursor: pointer; }
.about-log-toggle-text { color: var(--text); }
.about-log-toggle-hint {
  color: var(--overlay0);
  font-size: 11px;
  flex-basis: 100%;
  margin-left: 22px;
}

.about-shortcuts {
  margin-top: 16px;
  width: 100%;
  border-top: 1px solid var(--surface0);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-shortcuts-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--overlay1);
  margin-bottom: 4px;
}
.about-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.about-shortcut-keys {
  flex: 0 0 110px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--overlay1);
}
.about-shortcut-desc { color: var(--text); }
.about-shortcut kbd {
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text);
  min-width: 22px;
  text-align: center;
  display: inline-block;
}

/* Classic theme overrides consolidated above in .theme-classic block */
