/* ============================================================================
   MVP1 — APP STYLES
   ============================================================================
   All colors/fonts use var(--t-*) from the active theme CSS file.
   Zero hardcoded colors in this file.
   ============================================================================ */

html { overflow-y: scroll; }

body {
  background: var(--t-bg-image) center center / cover no-repeat fixed;
  min-height: 100vh;
}

/* -- Navbar --------------------------------------------------------------- */
.app-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--t-navbar-bg);
  border-bottom: 1px solid var(--t-navbar-border);
  padding: 0.5rem 1rem;
}

/* Never let the navbar wrap — single fixed-height row on all screen sizes */
.app-navbar .container-fluid {
  flex-wrap: nowrap;
  min-height: 44px;
}

.app-navbar .navbar-brand {
  color: var(--t-navbar-text);
  font-family: var(--t-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.app-navbar .navbar-brand img {
  height: 32px;
  margin-right: 8px;
}

/* Logo hidden on phone; shown on sm+ */
.navbar-logo { display: none; }
@media (min-width: 576px) {
  .navbar-logo { display: inline-block; }
}

.app-navbar .nav-text {
  color: var(--t-navbar-text);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Logout label hidden on phone; shown on sm+ */
.btn-logout-label { display: none; }
@media (min-width: 576px) {
  .btn-logout-label { display: inline; }
}

.app-navbar .btn-nav {
  color: var(--t-navbar-text);
  border: 1px solid var(--t-navbar-btn-border);
  background: transparent;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.app-navbar .btn-nav:hover {
  background: var(--t-navbar-btn-hover-bg);
  border-color: var(--t-navbar-btn-hover-border);
}

.app-navbar .btn-nav:active {
  background: var(--t-navbar-btn-active-bg);
}

.app-navbar .btn-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-sim.active {
  background: var(--t-sim-active-bg);
  border-color: var(--t-sim-active-border);
  color: var(--t-sim-active-text);
}

/* -- Device section headers ------------------------------------------------ */
.device-section {
  margin-bottom: 1rem;
}
.device-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--t-border-light);
  padding-bottom: 0.35rem;
}
.device-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-text-muted);
}
.device-section-header .btn-explain {
  margin-left: auto;
}

/* -- Device sub-tab bar --------------------------------------------------- */
.device-sub-tab-bar {
  display: flex;
  gap: 5px;
  border-bottom: none;
  margin-bottom: 0;
  margin-top: 0.5rem;
  align-items: flex-end;
}
.device-sub-tab {
  background: var(--t-subtab-inactive-bg);
  border: 2px solid var(--t-tab-border);
  padding: 0.4rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t-tab-inactive-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
}
.device-sub-tab:hover:not(.active) {
  background: var(--t-tab-hover-bg);
  color: var(--t-tab-hover-text);
  border-color: var(--t-accent);
}
.device-sub-tab.active {
  background: var(--t-subtab-active-bg);
  color: var(--t-subtab-active-text);
  font-weight: 800;
  border: 2px solid var(--t-tab-active-border);
  position: relative;
  z-index: 3;
}
.device-sub-tab i {
  font-size: 0.78rem;
  margin-right: 0.25rem;
}

/* -- Device sub-tab panes ------------------------------------------------- */
.device-tab-pane {
  display: none;
}
.device-tab-pane.active {
  display: block;
}

/* Device pane */
#device-pane-eeg {
  background: var(--t-subtab-pane-bg);
  border-radius: var(--t-subtab-pane-radius);
  border: 2px solid var(--t-tab-active-border);
  padding: 0.75rem;
}

/* Audio/Visual pane */
#device-pane-av {
  background: var(--t-subtab-pane-bg);
  border-radius: var(--t-subtab-pane-radius);
  border: 2px solid var(--t-tab-active-border);
  padding: 0.75rem;
}
#device-pane-av .mm-transcript-panel {
  background: var(--t-av-transcript-bg);
  border-color: var(--t-av-transcript-border);
}
#device-pane-av .mm-transcript-empty {
  color: var(--t-av-transcript-empty);
}
#device-pane-av .am-label,
#device-pane-av .am-value,
#device-pane-av .am-pitch-note {
  color: var(--t-av-label-color);
}
#device-pane-av .am-track {
  background: var(--t-av-track-bg);
}

/* -- Device controls ------------------------------------------------------ */
.btn-device {
  color: var(--t-text);
  border: 1px solid var(--t-border-light);
  background: var(--t-surface-2);
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-device:hover {
  background: var(--t-surface-3);
  border-color: var(--t-accent);
}

.btn-device:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-filter.active {
  background: rgba(96, 165, 250, 0.18);
  border-color: var(--t-accent);
  color: var(--t-accent);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.filter-label {
  font-size: 0.72rem;
  color: var(--t-text-muted, #8899bb);
  margin-right: 0.2rem;
  white-space: nowrap;
}

/* -- EEG controls row (connect + simulate + filters inline) --------------- */
.eeg-controls-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.eeg-controls-spacer { flex: 1; }

/* Prominent connect button */
.btn-connect-prominent {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  border: 2px solid var(--t-accent, #3b82f6);
  background: var(--t-accent, #3b82f6);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.btn-connect-prominent:hover {
  background: var(--t-accent-hover, #2563eb);
  box-shadow: 0 4px 16px rgba(59,130,246,0.5);
  transform: translateY(-1px);
}
.btn-connect-prominent:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(59,130,246,0.3);
}
.btn-connect-prominent:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-connect-prominent.connected {
  background: var(--t-success, #10b981);
  border-color: var(--t-success, #10b981);
  box-shadow: 0 2px 8px rgba(16,185,129,0.35);
}

/* -- EEG status row (info grid + channel bars side by side) --------------- */
.eeg-status-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.eeg-status-row .device-info-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.5rem;
  flex-shrink: 0;
  margin-bottom: 0;
}
.eeg-status-row .channel-bars-compact {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .eeg-status-row {
    flex-direction: column;
  }
  .eeg-status-row .device-info-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}

/* -- A/V device selector row ----------------------------------------------- */
.av-device-row { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 0.75rem; flex-wrap: wrap; }
.av-device-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 180px; min-width: 140px; }
.av-device-label { font-size: 0.75rem; color: var(--t-text-muted); font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.av-device-select { height: 30px; font-size: 0.8rem; background: var(--t-surface-2); color: var(--t-text); border: 1px solid var(--t-border); border-radius: 4px; padding: 0 0.4rem; cursor: pointer; width: 100%; }
.av-device-select:focus { outline: none; border-color: var(--t-accent); }

/* -- Multimodal section (camera + voice panel) ----------------------------- */
.multimodal-section { margin-bottom: 0.75rem; }
.multimodal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.multimodal-metrics {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  align-items: center;
}
.mm-metric { color: var(--t-text-muted, #8899bb); }
.mm-metric strong { color: var(--t-text, #c8d8f0); margin-left: 0.2rem; }

/* Video left + voice panel right */
/* -- 3-column multimodal row: Video | Transcript | Audio metrics ---------- */
.mm-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  height: 200px;
}

/* Col 1: Video */
.mm-video-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--t-video-overlay-bg);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.mm-video-wrap video,
.mm-video-wrap canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Video overlay — smile at top, eyes at bottom */
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}

/* Smile bar — top strip */
.vo-smile-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--t-smile-bar-bg);
  backdrop-filter: blur(2px);
  transition: background 0.3s ease;
}
.vo-smile-bar.smiling {
  background: var(--t-smile-bar-smiling);
}
.vo-smile-bar i {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}
.vo-smile-state {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vo-smile-val {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* Eye rows — bottom strip (hidden — eye events tracked silently in markers) */
.vo-eyes { display: none; }
.vo-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 13px;
}
.vo-row i {
  font-size: 0.55rem;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.7);
}
.vo-label {
  font-size: 0.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  width: 10px;
  flex-shrink: 0;
}
.eye-state {
  font-size: 0.5rem;
  font-weight: 600;
  width: 38px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.eye-state.open   { color: var(--t-eeg-dot-live); }
.eye-state.closed { color: var(--t-danger); }
.eye-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.eye-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #22d3ee, #4ade80);
  width: 0%;
  transition: width 0.15s ease;
}

/* Col 2: Transcript */
.mm-transcript-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  position: relative;
}
.mm-transcript-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.25);
  font-size: 0.75rem;
  gap: 0.4rem;
  pointer-events: none;
}
.mm-transcript-panel .speech-caption {
  background: transparent;
  padding: 0.4rem 0.6rem;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.mm-transcript-panel .speech-caption::-webkit-scrollbar { width: 4px; }
.mm-transcript-panel .speech-caption::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.speech-caption-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.speech-caption-line {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--t-text);
  white-space: normal;
  word-break: break-word;
}
.speech-caption-line.interim {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}
/* Timestamp prefix */
.sct-ts {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(0,0,0,0.3);
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  margin-right: 3px;
  user-select: none;
}

/* Col 3: Audio metrics — vertical list of bars */
.mm-audio-metrics {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  background: transparent;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}
.am-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.am-label {
  font-size: 0.5rem;
  color: var(--t-text);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
.am-track {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.am-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s ease;
}
.am-value {
  font-size: 0.5rem;
  color: var(--t-text);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* Pitch note in metrics column */
.am-bar-pitch {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 3px;
  margin-bottom: 1px;
}
.am-pitch-note {
  flex: 1;
  text-align: right;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--t-text);
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* Bar colors (shared between am-fill and vm-fill) */
.vm-volume     { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.vm-stress     { background: linear-gradient(90deg, #f97316, #ef4444); }
.vm-calm       { background: linear-gradient(90deg, #34d399, #10b981); }
.vm-excitement { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.vm-sadness    { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.vm-jitter     { background: linear-gradient(90deg, #fb7185, #e11d48); }
.vm-shimmer    { background: linear-gradient(90deg, #c084fc, #a855f7); }

@media (min-width: 768px) {
  .mm-row { height: 220px; }
  .mm-video-wrap { width: 240px; height: 220px; }
}

/* Stack vertically on very small screens */
@media (max-width: 479px) {
  .mm-row { flex-direction: column; height: auto; }
  .mm-video-wrap { width: 100%; height: 180px; }
  .mm-audio-metrics { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* -- Options dropdown ------------------------------------------------------ */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-light);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 1000;
  overflow: hidden;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  color: var(--t-text);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}
.nav-dropdown-item:hover {
  background: var(--t-surface-3);
}

/* -- AI Analysis dialog ---------------------------------------------------- */
.ai-dialog-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.ai-dialog {
  background: var(--t-surface, #1a1f2e);
  border: 1px solid var(--t-modal-header-bg);
  border-radius: 8px;
  width: 90vw; max-width: 700px;
  height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.ai-dialog-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  background: var(--t-modal-header-bg);
  flex-shrink: 0;
  border-radius: 8px 8px 0 0;
}
.ai-dialog-title {
  font-weight: 600; font-size: 0.95rem; color: var(--t-modal-header-text);
  display: flex; align-items: center; gap: 0.5rem;
  letter-spacing: 0.01em;
}
.ai-dialog-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 4px;
  color: var(--t-modal-header-text);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  line-height: 1.4;
  transition: background 0.15s;
}
.ai-dialog-close-btn:hover { background: var(--t-modal-close-hover); }
.ai-dialog-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--t-border, #334);
}
.ai-dialog-tab {
  flex: 1; padding: 0.5rem 0.25rem;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--t-text-muted); font-size: 0.8rem;
  cursor: pointer; text-align: center;
  transition: color 0.15s, border-color 0.15s;
}
.ai-dialog-tab:hover { color: var(--t-text); }
.ai-dialog-tab.active {
  color: var(--t-accent, #60a5fa);
  border-bottom-color: var(--t-accent, #60a5fa);
}
.ai-dialog-body {
  flex: 1; min-height: 0; overflow: hidden; padding: 1rem;
}
.ai-tab-pane { display: none; height: 100%; overflow-y: auto; }
.ai-tab-pane.active { display: flex; flex-direction: column; }
.ai-field-label {
  font-size: 0.75rem; color: var(--t-text-muted);
  margin-bottom: 0.4rem;
}
.ai-dlg-textarea {
  flex: 1; min-height: 200px;
  background: var(--t-surface-2, #111827);
  color: var(--t-text, #c8d8f0);
  border: 1px solid var(--t-border, #334);
  border-radius: 0.4rem;
  padding: 0.6rem; font-size: 0.78rem;
  font-family: Consolas, 'Courier New', monospace;
  resize: vertical; line-height: 1.4;
}
.ai-dlg-textarea:focus { outline: none; border-color: var(--t-accent, #60a5fa); }
.ai-metrics-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem; gap: 0.5rem; flex-wrap: wrap;
}
.ai-metrics-bar span { display: flex; gap: 0.3rem; }
.btn-accent-sm {
  background: var(--t-accent) !important;
  color: #000 !important; font-weight: 600;
}
.btn-accent-sm:hover { opacity: 0.85; }
.ai-dlg-warning {
  margin-top: 0.5rem; padding: 0.5rem;
  background: rgba(245,158,11,0.15);
  border-radius: 0.4rem; font-size: 0.8rem;
  color: var(--t-warning-text);
}
.ai-dialog-footer {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--t-border, #334);
}
.btn-accent {
  background: var(--t-accent, #60a5fa) !important;
  color: #000 !important; font-weight: 600;
}
.btn-accent:hover { opacity: 0.85; }

/* -- Preferences modal ----------------------------------------------------- */
.pref-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pref-modal {
  background: var(--t-surface);
  border: 1px solid var(--t-border-light);
  border-radius: 10px;
  width: min(520px, 95vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pref-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--t-border-light);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--t-text);
}
.pref-modal-close {
  background: none;
  border: none;
  color: var(--t-text);
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
}
.pref-modal-close:hover { opacity: 1; }
.pref-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.pref-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-text-muted, #8899bb);
  margin-bottom: 0.5rem;
}
.pref-voice-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pref-voice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.pref-voice-item:hover {
  background: var(--t-surface-2);
}
.pref-voice-item.selected {
  background: rgba(96, 165, 250, 0.12);
  border-color: var(--t-accent);
}
.pref-voice-name {
  font-size: 0.85rem;
  color: var(--t-text);
}
.pref-loading {
  color: var(--t-text-muted, #8899bb);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}
.pref-modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--t-border-light);
}

/* -- Skin picker ----------------------------------------------------------- */
.skin-modal { max-width: 400px; }
.skin-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.skin-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--t-border-light);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.skin-card:hover { border-color: var(--t-accent); background: var(--t-surface-2); }
.skin-card.selected { border-color: var(--t-accent); background: var(--t-accent-bg); }
.skin-swatches {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.skin-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
}
.skin-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--t-text);
  flex: 1;
}
.skin-active-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--t-accent);
  color: var(--t-text-inverse);
}

.btn-danger {
  color: var(--t-danger);
  border-color: var(--t-danger-border);
}
.btn-danger:hover {
  background: var(--t-danger-bg);
  border-color: var(--t-danger);
  color: var(--t-danger);
}

.device-status-dot.simulating {
  background: var(--t-eeg-dot-sim);
  animation: pulse-dot 1.5s infinite;
}

/* -- Device status pill --------------------------------------------------- */
.device-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--t-navbar-text);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  border: 1px solid var(--t-navbar-btn-border);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.device-status-pill:hover {
  background: var(--t-navbar-btn-hover-bg);
  border-color: var(--t-navbar-btn-hover-border);
}
.device-pill-chevron {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 2px;
}
#device-pill-wrap .nav-dropdown-menu {
  left: 0;
  right: auto;
  min-width: 190px;
}

.device-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-eeg-dot-off);
  transition: background 0.3s;
}

.device-status-dot.connected {
  background: var(--t-eeg-dot-live);
}

.device-status-dot.connecting {
  background: var(--t-eeg-dot-connecting);
  animation: pulse-dot 1s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* -- Role badge ----------------------------------------------------------- */
.role-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: var(--t-navbar-btn-hover-bg);
  color: var(--t-navbar-text);
  margin-left: 6px;
}

/* -- Login page — navbar sign-in + sign-up modal + product splash ---------- */

.login-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  flex-wrap: nowrap;
}

.login-nav-brand { flex-shrink: 0; }
.login-nav-brand img { height: 32px; display: block; }

.login-nav-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
  margin-left: auto;
}

.login-nav-input {
  height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--t-navbar-btn-border);
  background: rgba(255,255,255,0.12);
  color: var(--t-navbar-text);
  border-radius: 5px;
  font-size: 0.82rem;
  flex: 1 1 100px;
  min-width: 80px;
  max-width: 180px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.login-nav-input::placeholder { color: rgba(255,255,255,0.5); }
.login-nav-input:focus {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.2);
}

.btn-login-submit {
  height: 32px;
  padding: 0 0.9rem;
  background: var(--t-accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.btn-login-submit:hover    { background: var(--t-accent-hover); }
.btn-login-submit:disabled { opacity: 0.6; cursor: default; }

.btn-login-toggle {
  height: 32px;
  padding: 0 0.8rem;
  background: transparent;
  color: var(--t-navbar-text);
  border: 1px solid var(--t-navbar-btn-border);
  border-radius: 5px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}
.btn-login-toggle:hover {
  background: var(--t-navbar-btn-hover-bg);
  border-color: var(--t-navbar-btn-hover-border);
}

/* Sign-in error toast */
.login-error-toast {
  position: fixed;
  top: calc(var(--login-nav-h, 56px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--t-error);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  max-width: min(440px, 92vw);
  animation: toast-in 0.18s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.login-error-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  padding: 0 0 0 0.3rem;
  margin-left: auto;
}
.login-error-close:hover { opacity: 1; }

/* Sign Up modal */
.signup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.signup-modal {
  background: var(--t-surface);
  border: 1px solid var(--t-border-light);
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  animation: modal-in 0.18s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* -- Session Review Modal ------------------------------------------------- */
.review-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5vh 1.5vw;
}
.review-modal {
  background: var(--t-surface, #d8d8d8);
  border-radius: 16px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: modal-in 0.18s ease;
}
.review-modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.review-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--t-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  line-height: 1;
}
.review-modal-close:hover { color: var(--t-text); background: var(--t-surface-hover); }

.signup-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--t-border-light);
  font-family: var(--t-font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--t-text);
}

.signup-modal-close {
  background: none;
  border: none;
  color: var(--t-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.signup-modal-close:hover { color: var(--t-text); }

.signup-modal-body {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.signup-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.signup-field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--t-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.signup-field .form-control {
  background: var(--t-surface);
  color: var(--t-text);
  border-color: var(--t-border-light);
  font-size: 0.9rem;
}
.signup-field .form-control:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 0.15rem var(--t-accent-bg);
}

.signup-modal-error {
  background: rgba(204,0,0,0.08);
  border: 1px solid rgba(204,0,0,0.25);
  border-radius: 5px;
  color: var(--t-error);
  font-size: 0.83rem;
  padding: 0.45rem 0.6rem;
}

/* Splash — fills viewport below navbar */
.login-splash {
  position: fixed;
  inset: 0;
  top: var(--login-nav-h, 56px);
  z-index: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--t-bg-image) center center / cover no-repeat fixed;
}

.login-splash-inner {
  display: flex;
  min-height: 100%;
}

.splash-image-panel {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 0.5rem 2rem 2rem;
}
.splash-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  opacity: 0.7;
  filter: grayscale(100%);
}

.splash-text-panel {
  flex: 1 1 55%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.5rem 2.5rem 2.5rem 0;
  background: transparent;
}

.splash-body   { max-width: 460px; width: 100%; }

.splash-title {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-family: var(--t-font-heading);
  font-weight: 700;
  color: var(--t-text);
  line-height: 1.08;
  margin-bottom: 0.7rem;
}

.splash-tagline {
  font-size: 1rem;
  color: var(--t-accent);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.splash-desc {
  color: var(--t-text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.splash-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.splash-features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--t-text);
}
.splash-features li i {
  color: var(--t-accent);
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
}

.btn-splash-signup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: var(--t-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-splash-signup:hover { background: var(--t-accent-hover); }

/* Mobile */
@media (max-width: 599px) {
  .login-nav-brand         { display: none; }
  .login-nav-input         { max-width: 90px; min-width: 0; font-size: 0.75rem; padding: 0 0.4rem; }
  .btn-login-submit        { padding: 0 0.6rem; font-size: 0.75rem; }
  .login-splash-inner      { flex-direction: column; }
  .splash-image-panel      { flex: 0 0 auto; max-width: 100%; width: 100%; padding: 1.5rem; }
  .splash-img              { max-width: 45%; max-height: 30vh; }
  .splash-text-panel       { flex: 1 1 auto; padding: 1.5rem 1rem; align-items: flex-start; }
}

/* -- Main content area ---------------------------------------------------- */
.main-content {
  padding: 0 0.5rem;
  padding-top: calc(0.5rem + 56px); /* offset for fixed navbar */
  max-width: 1200px;
  margin: 0 auto;
}

/* -- Accordion ------------------------------------------------------------ */
.app-accordion .accordion-button {
  background: var(--t-accordion-header-bg);
  color: var(--t-accordion-header-text);
  font-family: var(--t-font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: none;
  box-shadow: none;
}

.app-accordion .accordion-button::after {
  filter: brightness(10);
}

.app-accordion .accordion-button:not(.collapsed) {
  background: var(--t-accordion-header-bg);
  color: var(--t-accordion-header-text);
}

.app-accordion .accordion-body {
  background: var(--t-accordion-body-bg);
  color: var(--t-accordion-body-text);
  padding: 1rem;
}

/* -- Device info panel ---------------------------------------------------- */
.device-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.device-info-item {
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-light);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}

.device-info-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t-text-muted);
  margin-bottom: 0.2rem;
}

.device-info-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--t-text);
  font-family: var(--t-font-mono);
}

/* -- Channel quality bars ------------------------------------------------- */
.channel-quality-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.channel-quality-label {
  width: 65px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--t-text);
  white-space: nowrap;
}

.channel-quality-bar {
  flex: 1;
  height: 6px;
  background: var(--t-surface-3);
  border-radius: 3px;
  overflow: hidden;
}

.channel-quality-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s, background 0.5s;
  background: var(--t-success);
}

.channel-quality-pct {
  width: 36px;
  text-align: right;
  font-size: 0.75rem;
  font-family: var(--t-font-mono);
  color: var(--t-text-muted);
}

/* -- EEG chart container -------------------------------------------------- */
.eeg-chart-container {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-top: 0.75rem;
  border: 1px solid var(--t-eeg-chart-border);
}

.eeg-chart-container canvas {
  display: block;
  width: 100%;
}

/* Labels are rendered inside the canvas — the HTML overlay is hidden */
.eeg-chart-labels {
  display: none;
}

/* -- Spectral Heatmap (sits directly above EEG chart, shared X-axis) ------ */
.spectral-heatmap-container {
  margin-top: 0.75rem;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  border: 1px solid var(--t-eeg-chart-border);
  border-bottom: none;
  background: var(--t-spectral-bg);
}
.spectral-heatmap-container canvas {
  display: block;
  width: 100%;
}
/* Remove top radius/margin from EEG chart when heatmap is above it */
.spectral-heatmap-container + .eeg-chart-container {
  margin-top: 0;
  border-radius: 0 0 6px 6px;
}

/* -- EEG Viz Row: Band bars + Brain gauges -------------------------------- */
.eeg-viz-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: stretch;
}

/* Topo map column */
.brain-gauges-container {
  width: 140px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--t-border-light);
  background: transparent;
}
.brain-gauges-container canvas {
  display: block;
  width: 100%;
}
/* -- Mini explain button — reusable "?" overlay button for any widget ------- */
/* Usage: <button class="mini-explain-btn">?</button> inside position:relative  */
.mini-explain-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--t-border-light);
  background: var(--t-surface-2);
  color: var(--t-text-muted);
  font: bold 10px Consolas, monospace;
  cursor: pointer;
  padding: 0;
  line-height: 16px;
  text-align: center;
}
.mini-explain-btn:hover {
  background: rgba(59,130,246,0.15);
  color: var(--t-accent);
}
/* Topo map reuses the same class */
.topo-explain-btn { position: absolute; top: 3px; right: 3px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--t-border-light); background: var(--t-surface-2); color: var(--t-text-muted); font: bold 10px Consolas, monospace; cursor: pointer; padding: 0; line-height: 16px; text-align: center; }
.topo-explain-btn:hover { background: rgba(59,130,246,0.15); color: var(--t-accent); }

/* EEG Metrics Gauges canvas container — fills remaining width, skinny */
.eeg-metrics-gauges-container {
  flex: 1;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--t-border-light);
  background: transparent;
}
.eeg-metrics-gauges-container canvas {
  display: block;
  width: 100%;
}

@media (max-width: 600px) {
  .eeg-viz-row { flex-direction: column; }
  .brain-gauges-container { width: 100%; }
  .eeg-metrics-gauges-container { width: 100%; }
}

/* -- PSD chart container -------------------------------------------------- */
.psd-chart-container {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-top: 0.75rem;
  border: 1px solid var(--t-eeg-chart-border);
}

.psd-chart-container canvas {
  display: block;
  width: 100%;
}

/* -- Tab notch host -------------------------------------------------------
   Any element with class tab-notch-host gets the notch cover pseudo-element.
   JS calls _updateTabNotch(barEl, contentEl) which measures the active tab
   and sets --notch-left/width/top/bg on the host. Works for any tab bar /
   content panel pair — no duplicate code needed per tab system. */
.tab-notch-host {
  position: relative;
}
.tab-notch-host::before {
  content: '';
  position: absolute;
  top: var(--notch-top, -9999px);
  left: var(--notch-left, 0);
  width: var(--notch-width, 0);
  height: 4px;
  background: var(--notch-bg, var(--t-tab-content-bg));
  z-index: 10;
  pointer-events: none;
}

/* -- Tab bar -------------------------------------------------------------- */
.app-tab-bar {
  display: flex;
  gap: 5px;
  padding: 0.75rem 0 0;   /* flush left/right with card edges */
  margin-bottom: 0;
  border-bottom: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
  align-items: flex-end;  /* all tab bottoms on same line */
}
.app-tab-bar::-webkit-scrollbar { display: none; }
.app-tab-spacer { flex: 1; }

/* Base tab — white inactive */
.app-tab {
  flex-shrink: 0;
  background: var(--t-tab-inactive-bg);
  border: 2px solid var(--t-tab-border);
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t-tab-inactive-text);
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  line-height: 1.3;
}

.app-tab:hover:not(.active) {
  background: var(--t-tab-hover-bg);
  color: var(--t-tab-hover-text);
  border-color: var(--t-accent);
}

/* Active tab */
.app-tab.active {
  background: var(--t-tab-active-bg);
  color: var(--t-tab-active-text);
  font-weight: 800;
  border: 2px solid var(--t-tab-active-border);
  position: relative;
  z-index: 3;
}

.app-tab i {
  font-size: 0.9rem;
  margin-right: 1px;
}

/* Tab content card — flush directly under the tab bar */
.app-tab-content {
  position: relative;
  z-index: 1;
  border-radius: 0 12px 12px 12px;  /* squared top-left aligns with first tab */
  margin: 0 0 1.25rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.38);
  overflow: hidden;
  padding: 1.25rem;
  background: var(--t-tab-content-bg);
  border: 2px solid var(--t-tab-active-border);
}

/* Hide tab text on small phones, keep icons */
.app-tab-label { display: none; }
@media (min-width: 400px) {
  .app-tab-label { display: inline; }
}

/* -- Session library ------------------------------------------------------ */
.session-library {
  background: transparent;
  border-radius: 6px;
  padding: 0.75rem;
}
.session-library .btn-device {
  background: var(--t-lib-btn-bg);
  border-color: var(--t-lib-btn-border);
  color: var(--t-lib-btn-text);
}
.session-library .btn-device:hover {
  background: var(--t-lib-btn-hover-bg);
  border-color: var(--t-lib-btn-hover-border);
}
.session-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.session-library-title {
  font-family: var(--t-font-heading);
  color: var(--t-text);
  margin: 0;
}

.session-filter-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 0.75rem;
}

.session-filter {
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-light);
  color: var(--t-text-muted);
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.session-filter.active {
  background: var(--t-accent-bg);
  color: var(--t-accent);
  border-color: var(--t-accent);
}

.session-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.session-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-light);
  border-radius: 6px;
  padding: 0.75rem;
  transition: border-color 0.2s;
}

.session-card:hover {
  border-color: var(--t-accent);
}

.session-card-icon {
  font-size: 1.5rem;
  color: var(--t-accent);
  flex-shrink: 0;
}

.session-card-body {
  flex: 1;
  min-width: 0;
}

.session-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--t-text);
}

.session-card-meta {
  font-size: 0.7rem;
  color: var(--t-text-muted);
  margin-top: 0.15rem;
}

.session-card-desc {
  font-size: 0.75rem;
  color: var(--t-text-subtle);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.session-empty,
.session-loading {
  text-align: center;
  color: var(--t-text-muted);
  font-size: 0.85rem;
  padding: 2rem;
}

/* -- Session selection action bar ----------------------------------------- */
.sess-action-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; margin-bottom: 0.5rem;
  background: var(--t-accent-bg); border: 1px solid var(--t-accent);
  border-radius: 6px; font-size: 0.82rem; color: var(--t-text);
}
.sess-action-bar span { color: var(--t-accent); font-weight: 600; }

/* -- Session card checkbox ------------------------------------------------- */
.session-card-check-wrap {
  display: flex; align-items: center; flex-shrink: 0; padding-right: 4px;
}
.sess-row-check { width: 16px; height: 16px; cursor: pointer; }

/* -- Shared-by line in card ------------------------------------------------ */
.session-card-sharedby {
  font-size: 0.72rem; color: var(--t-accent); margin-top: 0.2rem;
  display: flex; align-items: center; gap: 4px;
}

/* -- Share sessions modal -------------------------------------------------- */
.share-modal-backdrop {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.share-modal {
  background: var(--t-surface); border: 1px solid var(--t-modal-header-bg);
  border-radius: 8px; width: 90vw; max-width: 420px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.share-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  background: var(--t-modal-header-bg); border-radius: 8px 8px 0 0;
  font-weight: 600; font-size: 0.9rem; color: var(--t-modal-header-text);
}
.share-modal-close {
  background: rgba(255,255,255,0.15); border: none; border-radius: 4px;
  color: var(--t-modal-header-text); font-size: 0.85rem;
  padding: 0.2rem 0.4rem; cursor: pointer;
}
.share-modal-close:hover { background: var(--t-modal-close-hover); color: #fff; }
.share-modal-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.share-modal-footer {
  padding: 0.6rem 1rem; border-top: 1px solid var(--t-border-light);
  display: flex; justify-content: flex-end;
}
.share-session-count {
  font-size: 0.82rem; color: var(--t-text-muted);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--t-border-light);
}
.share-input-row { display: flex; gap: 0.5rem; }
.share-input-row .form-control { flex: 1; }
.share-error {
  font-size: 0.78rem; color: var(--t-error);
  background: var(--t-error-bg); padding: 0.35rem 0.6rem; border-radius: 4px;
}
.share-success {
  font-size: 0.78rem; color: var(--t-success);
  background: var(--t-success-bg); padding: 0.35rem 0.6rem; border-radius: 4px;
}

/* -- Session designer ----------------------------------------------------- */
.session-designer {
  display: flex; flex-direction: column; height: 100%; padding: 0;
}
.session-designer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  background: var(--t-modal-header-bg); border-radius: 16px 16px 0 0;
  flex-shrink: 0; gap: 0.5rem;
}
.session-designer-header-left { display: flex; flex-direction: column; min-width: 0; }
.session-designer-title { font-size: 0.95rem; font-weight: 600; color: var(--t-modal-header-text); }
.session-designer-header-right { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.session-designer-header .btn-device {
  background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: var(--t-modal-header-text);
}
.session-designer-header .btn-device:hover { background: rgba(255,255,255,0.28); }
.session-designer-header .btn-explain {
  background: rgba(255,255,255,0.15); border: none; border-radius: 4px;
  color: var(--t-modal-header-text); font-size: 0.78rem; padding: 0.2rem 0.55rem;
}
.session-designer-header .btn-explain:hover { background: rgba(255,255,255,0.28); }
.designer-tab-bar {
  display: flex;
  gap: 0;
  background: var(--t-surface-2);
  border-bottom: 1px solid var(--t-border);
  flex-shrink: 0;
  overflow-x: auto;
}
.designer-tab {
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--t-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.designer-tab:hover  { color: var(--t-text); }
.designer-tab.active { color: var(--t-accent); border-bottom-color: var(--t-accent); }

.session-designer-scroll-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem;
}

.session-form-row4 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.session-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .session-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575px) {
  .session-form-row4 {
    grid-template-columns: 1fr 1fr;
  }
}

.session-form-group {
  margin-bottom: 0.5rem;
}

.session-form-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.session-form-hint {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--t-text-muted);
  opacity: 0.75;
  flex-basis: 100%;
}
.btn-load-default {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--t-border);
  border-radius: 0.25rem;
  background: var(--t-bg-card);
  color: var(--t-accent);
  cursor: pointer;
  margin-left: auto;
}
.btn-load-default:hover { background: var(--t-accent); color: #fff; }

.session-form .form-control {
  background: var(--t-surface);
  color: var(--t-text);
  border-color: var(--t-border-light);
  font-size: 0.85rem;
}

.session-form .form-control:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 0.15rem var(--t-accent-bg);
}

/* -- Pose list ------------------------------------------------------------ */
.pose-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.pose-list-header h6 {
  margin: 0;
  color: var(--t-text);
  font-family: var(--t-font-heading);
}
.pose-total-dur {
  margin-left: 0.75rem;
  font-size: 0.8rem;
  color: var(--t-accent);
  font-weight: 600;
  flex: 1;
}

.pose-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pose-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--t-surface-2);
  border: 1px solid var(--t-border-light);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}

.pose-order {
  font-weight: 700;
  font-family: var(--t-font-mono);
  color: var(--t-accent);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.pose-item-name {
  flex: 1;
  font-weight: 600;
  color: var(--t-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pose-item-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--t-text-muted);
  flex-shrink: 0;
}

.pose-item-dur {
  font-family: var(--t-font-mono);
  font-size: 0.75rem;
  color: var(--t-text-muted);
  flex-shrink: 0;
  width: 40px;
  text-align: right;
}

.pose-item-yt {
  color: var(--t-youtube-icon);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.pose-empty {
  text-align: center;
  color: var(--t-text-muted);
  font-size: 0.8rem;
  padding: 1.5rem;
}

/* -- Metrics picker ------------------------------------------------------- */
.metrics-picker {
  border: 1px solid var(--t-border, #334);
  border-radius: 0.5rem;
  padding: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
  background: var(--t-surface-2, #111827);
}
.metrics-category { margin-bottom: 0.4rem; }
.metrics-category:last-child { margin-bottom: 0; }
.metrics-category-label {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--t-text-muted);
  margin-bottom: 0.25rem; padding-left: 0.1rem;
}
.metrics-category-chips {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.metrics-chip {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  border: 1px solid var(--t-border, #334);
  border-radius: 1rem;
  cursor: pointer;
  color: var(--t-text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}
.metrics-chip:hover { border-color: var(--t-accent); color: var(--t-text); }
.metrics-chip:has(input:checked) {
  border-color: var(--t-accent);
  background: rgba(96, 165, 250, 0.12);
  color: var(--t-text);
}
.metrics-chip input[type="checkbox"] {
  width: 12px; height: 12px; margin: 0; accent-color: var(--t-accent);
}

/* -- Pose editor overlay -------------------------------------------------- */
.pose-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pose-editor {
  background: var(--t-surface);
  border: 1px solid var(--t-border-light);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.25rem;
}

.pose-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.pose-editor-header h6 {
  margin: 0;
  font-family: var(--t-font-heading);
  color: var(--t-text);
}

.btn-close-x {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--t-text-muted);
  cursor: pointer;
  line-height: 1;
}

.pose-editor-footer {
  margin-top: 1rem;
  text-align: right;
}

/* -- Pose picker ---------------------------------------------------------- */
.pose-picker-panel {
  max-width: 500px;
}

.pose-picker-search {
  margin-bottom: 0.75rem;
}

.pose-picker-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pose-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--t-border-light);
  border-radius: 6px;
  background: var(--t-surface);
}

.pose-picker-item.in-session {
  opacity: 0.5;
}

.pose-picker-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pose-picker-name {
  font-weight: 600;
  color: var(--t-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pose-picker-meta {
  font-size: 0.75rem;
  color: var(--t-text-muted);
}

/* -- Small button variant ------------------------------------------------- */
.btn-sm {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}

/* =========================================================================
   SESSION PLAYER (full-screen overlay)
   ========================================================================= */
.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--t-player-bg);
  display: flex;
  flex-direction: column;
  color: var(--t-player-text);
  font-family: var(--t-font-heading), system-ui, sans-serif;
}

/* -- Video layer ---------------------------------------------------------- */
.sp-video {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sp-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* -- Metric pose layout (chart strip + video) ----------------------------- */
.sp-metric-layout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--t-player-bg);
  padding-top: 3rem; /* clear the top bar */
}

/* Compact chart strip — fixed height */
.sp-metric-chart {
  flex-shrink: 0;
  height: 110px;
  width: 100%;
  overflow: hidden;
}

/* Video area — fills remaining space, centers 16:9 iframe */
.sp-metric-video {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0 0.25rem;
}

.sp-metric-video iframe {
  border: none;
  /* JS sets width/height to maintain 16:9 within available space */
  max-width: 100%;
}

/* -- Colorslab layer ------------------------------------------------------ */
.sp-colorslab {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
  padding: 2rem;
}

/* -- Bottom bar ----------------------------------------------------------- */
.sp-bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.sp-bottom-left {
  flex: 1;
  min-width: 0;
}

.sp-session-name {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-pose-name {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 576px) {
  .sp-pose-name { font-size: 1.2rem; }
}

.sp-bottom-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.sp-timer {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--t-font-mono), 'Consolas', monospace;
  letter-spacing: 0.05em;
  text-align: center;
  min-width: 3rem;
}

.sp-bottom-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* -- Progress dots -------------------------------------------------------- */
.sp-progress {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
}

.sp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.3s, transform 0.3s;
}

.sp-dot.active {
  background: var(--t-accent, #60a5fa);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--t-accent, #60a5fa);
}

.sp-dot.done {
  background: rgba(255,255,255,0.5);
}

/* -- Biofeedback glow overlay --------------------------------------------- */
.sp-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 0;
  opacity: 0;
}

@keyframes sp-glow-flash {
  0%   { opacity: 0; box-shadow: inset 0 0 0px 0px rgba(96,165,250,0); }
  20%  { opacity: 1; box-shadow: inset 0 0 80px 40px rgba(96,165,250,0.35); }
  100% { opacity: 0; box-shadow: inset 0 0 0px 0px rgba(96,165,250,0); }
}

.sp-glow.sp-glow-pulse {
  animation: sp-glow-flash 2s ease-out forwards;
}

/* Calibration pose pulsing text */
.sp-calibration-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-align: center;
  animation: sp-cal-pulse 2s ease-in-out infinite;
}
.sp-calibration-text small {
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.6;
}
@keyframes sp-cal-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Save / Discard dialog */
.sp-save-dialog {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.sp-save-card {
  background: var(--t-player-save-bg);
  border: 1px solid var(--t-player-save-border);
  border-radius: 12px;
  padding: 2rem;
  width: min(420px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sp-save-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--t-player-text);
  text-align: center;
}
.sp-save-subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.sp-save-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sp-save-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff;
  padding: 0.55rem 0.75rem;
  font-size: 1rem;
  outline: none;
  width: 100%;
}
.sp-save-input:focus {
  border-color: rgba(99,179,237,0.7);
  background: rgba(255,255,255,0.1);
}
.sp-save-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.sp-save-btn {
  flex: 1;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: opacity 0.15s;
}
.sp-save-btn:hover { opacity: 0.85; }
.sp-save-btn-discard {
  background: var(--t-player-abort-bg);
  color: var(--t-player-abort-text);
  border: 1px solid var(--t-player-abort-border);
}
.sp-save-btn-save {
  background: var(--t-success);
  color: #000;
}

/* Metric config group in designer */
.metric-config-group {
  border: 1px solid var(--t-border-light);
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: rgba(0,0,0,0.03);
}

.sp-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.sp-btn:hover {
  background: rgba(255,255,255,0.2);
}

.sp-btn-abort {
  border-color: var(--t-player-abort-border);
  color: var(--t-player-abort-text);
}

.sp-btn-abort:hover {
  background: var(--t-player-abort-bg);
}

/* ============================================================================
   SESSION REVIEW VIEW
   ============================================================================ */

.review-view {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.review-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Windows-style title bar — sticks to top of scroll container */
.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  background: var(--t-modal-header-bg);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
  gap: 0.5rem;
}

.review-header-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-session-name {
  font-family: var(--t-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--t-modal-header-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-meta {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.05rem;
}

.review-header-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Buttons on the blue titlebar */
.review-header .btn-explain {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 4px;
  color: var(--t-modal-header-text);
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
}
.review-header .btn-explain:hover { background: rgba(255,255,255,0.28); }
.review-modal-close {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 4px;
  color: var(--t-modal-header-text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  line-height: 1.4;
  transition: background 0.15s;
}
.review-modal-close:hover { background: var(--t-modal-close-hover); }

/* Stats row */
.review-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.review-stat {
  background: var(--t-surface-2, var(--t-surface));
  border: 1px solid var(--t-border-light);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  text-align: center;
  min-width: 80px;
}

.review-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--t-text);
}

.review-stat-label {
  font-size: 0.7rem;
  color: var(--t-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chart */
.review-chart-wrap {
  background: var(--t-surface-2, var(--t-surface));
  border: 1px solid var(--t-border-light);
  border-radius: 8px;
  padding: 0.75rem 1rem 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Scrollbar canvas sits above the chart */
#rv-scrollbar {
  width: 100%;
  height: 14px;
  display: block;
  flex-shrink: 0;
  cursor: default;
  border-radius: 4px;
}

/* Chart canvas container */
.review-chart-inner {
  flex: 1;
  min-height: 200px;
  position: relative;
}
.review-chart-inner canvas {
  cursor: crosshair;
}
.review-chart-inner canvas:active {
  cursor: grabbing;
}

@media (min-width: 768px) {
  .review-chart-inner { min-height: 260px; }
}

/* State chart (calmness/stress) — shorter, no top padding for scrollbar */
.review-chart-wrap-state {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
.review-chart-wrap-state .review-chart-inner {
  min-height: 120px;
}
@media (min-width: 768px) {
  .review-chart-wrap-state .review-chart-inner { min-height: 140px; }
}

/* Reset zoom button */
.rv-reset-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 0.72rem;
  background: var(--t-surface-3, var(--t-surface-2));
  border: 1px solid var(--t-border-light);
  border-radius: 4px;
  color: var(--t-text-muted);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.rv-reset-zoom:hover { opacity: 0.8; }

/* Pose chips */
.review-pose-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rv-pose-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--t-surface-2, var(--t-surface));
  border: 1px solid var(--t-border-light);
  border-radius: 20px;
  padding: 0.2rem 0.7rem 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.rv-pose-num {
  background: var(--t-accent, #60a5fa);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.rv-pose-name {
  color: var(--t-text);
  font-weight: 600;
}

.rv-pose-time {
  color: var(--t-text-muted);
}

/* AI analysis panel */
.review-ai-panel {
  background: var(--t-surface-2, var(--t-surface));
  border: 1px solid var(--t-border-light);
  border-radius: 8px;
  overflow: hidden;
}

.review-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-border-light);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--t-text);
}

.review-ai-meta {
  font-size: 0.7rem;
  color: var(--t-text-muted);
  font-weight: 400;
}

.review-ai-content {
  padding: 1rem;
  color: var(--t-text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.review-ai-content h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 0.4rem;
  color: var(--t-text);
}

.review-ai-content p { margin: 0 0 0.6rem; }
.review-ai-content ul { padding-left: 1.2rem; margin: 0 0 0.6rem; }
.review-ai-content li { margin-bottom: 0.3rem; }

.review-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
}
.ai-wait-gif {
  height: 100px;
  width: auto;
  border-radius: 8px;
  flex-shrink: 0;
}
.ai-wait-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--t-text);
  font-style: italic;
  text-align: center;
}

.review-ai-error {
  color: var(--t-error, #f87171);
}

/* -- Model selector + analyze bar ----------------------------------------- */
.review-analyze-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* -- Model selector card grid ------------------------------------------------ */
.ms-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.ms-card {
  border: 2px solid var(--t-border, #334);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  background: var(--t-surface-2, #222);
}
.ms-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.25);
}
.ms-card.ms-card-selected {
  border-color: var(--t-accent, #60a5fa);
  box-shadow: 0 0 0 2px var(--t-accent, #60a5fa), 0 8px 24px rgba(0,0,0,0.4);
}
.ms-card-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--t-accent, #60a5fa);
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 2;
}
.ms-card.ms-card-selected .ms-card-check { display: flex; }
.ms-card { position: relative; }
.ms-card-header {
  padding: 14px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ms-card-header.ms-deepseek  { background: linear-gradient(145deg, #0277bd, #29b6f6); }
.ms-card-header.ms-anthropic { background: linear-gradient(145deg, #bf360c, #ff7043); }
.ms-card-header.ms-openai    { background: linear-gradient(145deg, #1b5e20, #43a047); }
.ms-card-logo-img {
  width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.ms-card-company-name {
  font-size: 0.65rem; font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 4px;
}
.ms-flag-row { display: inline-flex; align-items: center; gap: 3px; margin-left: 3px; }
.ms-flag-img { width: 16px; height: 11px; border-radius: 2px; object-fit: cover; }
.ms-flag-label { font-size: 0.58rem; color: rgba(255,255,255,0.7); }
.ms-card-body {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.ms-card-model-name {
  font-size: 0.78rem; font-weight: 700;
  color: var(--t-text); line-height: 1.2;
}
.ms-badge {
  display: inline-block; font-size: 0.58rem; font-weight: 700;
  padding: 2px 6px; border-radius: 20px; white-space: nowrap;
  align-self: flex-start;
}
.ms-badge-best    { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.ms-badge-fast    { background: linear-gradient(135deg, #06b6d4, #6366f1); color: #fff; }
.ms-badge-cheap   { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; }
.ms-badge-good    { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.ms-badge-fastest { background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: #fff; }
.ms-card-cost-row {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.ms-card-cost-label {
  font-size: 0.6rem; color: var(--t-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ms-cost-dots { display: flex; gap: 3px; }
.ms-cost-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-border, #444);
}
.ms-cost-dot-on { background: var(--t-accent, #60a5fa); }
.ms-selection-bar {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--t-accent-bg, rgba(13,118,128,0.08));
  border: 1px solid var(--t-accent, #0D7680);
  font-size: 0.82rem;
  color: var(--t-text);
}
.ms-selection-bar i { color: var(--t-accent); font-size: 1rem; flex-shrink: 0; }
.ms-selection-label { color: var(--t-text-muted); font-weight: 500; white-space: nowrap; }
.ms-selection-value { color: var(--t-accent); font-weight: 700; }

/* -- Recordings library ---------------------------------------------------- */
.recordings-library {
  padding: 1rem;
}

.recordings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.recording-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--t-surface);
  border: 1px solid var(--t-border-light);
  border-radius: 8px;
  flex-wrap: wrap;
}

.recording-card-main {
  flex: 1;
  min-width: 0;
}

.recording-card-name {
  font-weight: 600;
  color: var(--t-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recording-card-meta {
  font-size: 0.75rem;
  color: var(--t-text-muted);
  margin-top: 0.1rem;
}

.recording-card-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.recording-status {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
}

.status-analyzed  { background: var(--t-status-analyzed-bg);  color: var(--t-status-analyzed-text); }
.status-completed { background: var(--t-status-completed-bg); color: var(--t-status-completed-text); }
.status-other     { background: var(--t-status-other-bg);     color: var(--t-status-other-text); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Explain button                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */
.btn-explain {
  background: transparent;
  border: 1px solid var(--t-border);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: var(--t-text-muted);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.btn-explain:hover {
  color: var(--t-accent);
  border-color: var(--t-accent);
}
.btn-explain i { margin-right: 0.2rem; }

.device-controls-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Speech closed-caption text styles                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* (caption line styles are in .speech-caption-line above) */
.speech-pitch-badge {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: var(--t-pitch-badge-text);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.3rem;
  vertical-align: middle;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.session-library-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Help dialog (floating iframe)                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */
.help-dialog {
  position: fixed;
  top: 80px;
  left: calc(50vw - 320px);
  width: 640px;
  height: 520px;
  display: flex;
  flex-direction: column;
  background: var(--t-surface, #fff);
  border: 2px solid var(--t-border, #ccc);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 99000;
  overflow: hidden;
  resize: both;
  min-width: 300px;
  min-height: 200px;
}
@media (max-width: 700px) {
  .help-dialog {
    left: 4px;
    width: calc(100vw - 8px);
    height: 60vh;
  }
}
.help-dlg-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  flex-shrink: 0;
  cursor: move;
  background: linear-gradient(135deg, var(--t-navbar-bg-from, #1a1a2e), var(--t-navbar-bg-to, #16213e));
  color: var(--t-navbar-text);
  user-select: none;
  font-size: 0.9rem;
}
.help-dlg-bar i { font-size: 1rem; }
.help-dlg-title { flex: 1; font-weight: 600; }
.help-dlg-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--t-navbar-text);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.help-dlg-btn:hover { background: rgba(255,255,255,0.25); }
.help-dlg-frame {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
}

/* ============================================================================
   Recordings Library — filter bar, action bar, sortable table
   ============================================================================ */

.recordings-library { padding: 0.5rem 0; }
.session-library-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.session-library-title { margin: 0; font-size: 1rem; font-weight: 600; }

.rec-filter-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.rec-filter-select, .rec-filter-input { height: 32px; font-size: 0.85rem; }
.rec-filter-input { flex: 1 1 140px; }
.rec-filter-count { font-size: 0.8rem; color: var(--t-text-muted); white-space: nowrap; }

.rec-action-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.75rem;
  background: var(--t-accent-bg); border: 1px solid var(--t-accent); border-radius: 6px; margin-bottom: 0.5rem; }
.btn-link-sm { background: none; border: none; color: var(--t-accent); font-size: 0.82rem; cursor: pointer; padding: 0; }
.btn-link-sm:hover { text-decoration: underline; }

.rec-table-wrap { overflow-x: auto; }
.rec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rec-table th, .rec-table td { padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--t-border-light); text-align: left; }
.rec-table th { color: var(--t-text-muted); font-weight: 600; white-space: nowrap; cursor: default; }
.rec-table th[data-sort] { cursor: pointer; user-select: none; }
.rec-table th[data-sort]:hover { color: var(--t-text); }
.rec-table th.sort-active { color: var(--t-text); }
.rec-table th.sort-asc::after  { content: ' ↑'; }
.rec-table th.sort-desc::after { content: ' ↓'; }
.rec-table tr:hover td { background: var(--t-surface-hover); }
.rec-col-check { width: 28px; }
.rec-col-num { text-align: right; }
.rec-col-actions { text-align: right; white-space: nowrap; }
.rec-empty { padding: 2rem; text-align: center; color: var(--t-text-muted); font-style: italic; }

.recording-status { font-size: 0.75rem; padding: 0.15rem 0.45rem; border-radius: 10px; white-space: nowrap; }

/* ============================================================================
   Longitudinal Report
   ============================================================================ */

.longi-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.longi-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  background: var(--t-modal-header-bg);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
  gap: 0.5rem;
}
.longi-header-left { display: flex; flex-direction: column; min-width: 0; }
.longi-title  { font-size: 0.95rem; font-weight: 600; color: var(--t-modal-header-text); }
.longi-subtitle { font-size: 0.72rem; color: rgba(255,255,255,0.7); }

.longi-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.longi-source-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.longi-source-label { font-size: 0.82rem; color: var(--t-text-muted); font-weight: 600; }
.longi-radio-label { font-size: 0.82rem; color: var(--t-text); cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }

.longi-excluded-notice { padding: 0.5rem 0.75rem; background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.35); border-radius: 6px; font-size: 0.82rem;
  color: var(--t-text-muted); margin-bottom: 0.75rem; }

.longi-loading { padding: 2rem; text-align: center; color: var(--t-text-muted); }

.longi-picker-label { font-size: 0.78rem; font-weight: 600; color: var(--t-text-muted);
  margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: .04em; }
.longi-metric-picker { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.longi-chip { padding: 0.2rem 0.6rem; border-radius: 20px; border: 1px solid var(--t-border-light);
  font-size: 0.78rem; cursor: pointer; background: var(--t-surface); color: var(--t-text-muted); transition: all .15s; }
.longi-chip.active { background: var(--t-accent); color: #fff; border-color: var(--t-accent); }
.longi-chip:hover { border-color: var(--t-accent); }

.longi-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem; margin-bottom: 1.25rem; }
.longi-chart-card { background: var(--t-surface); border: 1px solid var(--t-border-light);
  border-radius: 8px; padding: 0.65rem; }
.longi-chart-label { font-size: 0.75rem; font-weight: 600; color: var(--t-text-muted);
  margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: .04em; }
.longi-chart-canvas { width: 100% !important; height: 120px !important; }

.longi-summary-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.longi-summary-chip { padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.82rem;
  background: var(--t-surface); border: 1px solid var(--t-border-light);
  display: flex; align-items: center; gap: 0.3rem; }
.longi-summary-chip .metric-name { color: var(--t-text-muted); font-size: 0.75rem; }
.longi-summary-chip.good { border-color: var(--t-success); }
.longi-summary-chip.bad  { border-color: var(--t-error); }
.longi-arrow-up   { color: var(--t-success); font-weight: 700; }
.longi-arrow-down { color: var(--t-error);   font-weight: 700; }
.longi-arrow-flat { color: var(--t-text-muted); }

.longi-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.longi-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.longi-table th, .longi-table td { padding: 0.38rem 0.6rem; border-bottom: 1px solid var(--t-border-light); text-align: right; }
.longi-table td:first-child, .longi-table th:first-child,
.longi-table td:nth-child(2), .longi-table th:nth-child(2),
.longi-table td:nth-child(3), .longi-table th:nth-child(3) { text-align: left; }
.longi-table th { color: var(--t-text-muted); font-weight: 600; }
.longi-delta-row td { font-weight: 600; border-top: 2px solid var(--t-border-light); }
.longi-val-good { color: var(--t-success); }
.longi-val-bad  { color: var(--t-error); }
.longi-val-na   { color: var(--t-text-muted); opacity: .5; }