/* ===== DESIGN IMPROVEMENTS — BilateralBound EMDR ===== */

/* Style: Accessible & Ethical (WCAG AAA compliant) */
/* Colors: Medical teal (#0891B2) + health green (#22C55E) */
/* Fonts: System fonts (wide, native) */

/* ========================================
   SYSTEM FONTS — wide, native, no Google Fonts
   ======================================== */
html,
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    system-ui,
    sans-serif !important;
}

/* Fix session info empty block — show timestamp */
#sessionInfo {
  min-height: 20px;
  color: #94a3b8;
  font-size: 0.85rem;
}

.light-theme #sessionInfo {
  color: #64748b;
}

/* Ensure session timestamp is visible */
#sessionTimestamp {
  display: inline;
}

.light-theme #sessionTimestamp {
  color: #475569;
}

/* ========================================
   1. ACCESSIBILITY: Reduced Motion Support
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable specific animations */
  .gradientShift,
  .btn.primary::before,
  .btn.primary.playing,
  .fs-status-indicator,
  .volume-icon,
  .card h1 {
    animation: none !important;
  }
}

/* ========================================
   2. ACCESSIBILITY: Enhanced Focus States
   ======================================== */

/* Global focus-visible for all interactive elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0891b2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dark theme focus */
button:focus-visible,
a:focus-visible {
  outline-color: #22d3ee;
  box-shadow: 0 0 0 4px rgb(34 211 238 / 25%);
}

/* Light theme focus */
.light-theme button:focus-visible,
.light-theme a:focus-visible,
.light-theme input:focus-visible,
.light-theme select:focus-visible {
  outline-color: #0891b2;
  box-shadow: 0 0 0 4px rgb(8 145 178 / 25%);
}

/* ========================================
   3. ACCESSIBILITY: Touch Target Size (44x44px minimum)
   ======================================== */

/* Color buttons in fullscreen panel */
.fs-color-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Size buttons in fullscreen */
.fs-size-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
}

/* Autostop inputs */
.autostop-input {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
}

/* ========================================
   4. COLOR IMPROVEMENTS: Better Contrast Ratios
   ======================================== */

/* Dark theme - improved text contrast */
.control-section h3 {
  color: #f1f5f9;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.control-section p {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Session heading session ID - improved readability */
.control-section h3 #curSid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Session info text */
#sessionInfo {
  color: #94a3b8;
  font-size: 0.85rem;
}

/* Label text in settings */
.settings-row__label {
  color: #94a3b8;
  font-size: 0.75rem;
}

.settings-row__desc {
  color: #94a3b8;
  font-size: 0.8rem;
}

/* Stats labels - better contrast */
.session-stat-label {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Stats values */
.session-stat-value {
  color: #f1f5f9;
  font-weight: 700;
}

/* Autostop label */
.session-autostop-label {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Hotkey info */
.hotkey-info {
  color: #cbd5e1;
}

.hotkey-info kbd {
  background: #334155;
  border: 1px solid #475569;
  color: #e2e8f0;
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: 4px;
}

/* Presets summary */
.presets-details summary {
  color: #cbd5e1;
  font-size: 0.95rem;
}

.presets-details summary:hover {
  color: #f1f5f9;
}

/* Preset card text */
.preset-card {
  color: #cbd5e1;
}

.preset-card:hover {
  color: #f1f5f9;
}

/* ========================================
   5. LIGHT THEME: Contrast Improvements
   ======================================== */

.light-theme .control-section h3 {
  color: #0f172a;
}

.light-theme .control-section p {
  color: #475569;
}

.light-theme .session-stat-label {
  color: #64748b;
}

.light-theme .session-stat-value {
  color: #0f172a;
}

.light-theme .session-autostop-label {
  color: #475569;
}

.light-theme .hotkey-info {
  color: #334155;
}

.light-theme .hotkey-info kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.light-theme .presets-details summary {
  color: #334155;
}

.light-theme .presets-details summary:hover {
  color: #0f172a;
}

.light-theme .preset-card {
  color: #334155;
}

.light-theme .preset-card:hover {
  color: #0f172a;
}

/* ========================================
   6. SMOOTH TRANSITIONS (150-300ms)
   ======================================== */

/* Card hover */
.controls-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.controls-card:hover {
  transform: translateY(-1px);
}

/* Button hovers */
.btn {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* Direction buttons */
.dir-btn {
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.dir-btn:hover {
  transform: translateY(-1px);
}

.dir-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Preset cards */
.preset-card {
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

/* Color buttons */
.color-btn {
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.color-btn:hover {
  transform: scale(1.1);
}

.color-btn:active {
  transform: scale(1.02);
}

/* Size buttons */
.size-btn {
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.size-btn:hover {
  transform: translateY(-1px);
}

.size-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ========================================
   7. CURSOR POINTER for interactive elements
   ======================================== */

/* Ensure all clickable elements have cursor-pointer */
.dir-btn,
.preset-card,
.color-btn,
.size-btn,
.btn,
.fs-btn,
.fs-seg-btn,
.fs-size-btn,
.fs-color-btn,
.close-btn,
.copy-btn,
.toggle-switch,
.toggle-switch .slider,
.presets-details summary,
.preview-canvas-wrapper canvas,
#playPauseBtn,
#resetSessionBtn {
  cursor: pointer;
}

/* ========================================
   8. IMPROVED START BUTTON DESIGN
   ======================================== */

.session-start-btn {
  font-size: 1rem !important;
  font-weight: 700 !important;
  min-height: 52px !important;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  letter-spacing: 0.02em;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease !important;
  animation: none; /* Removing distracting glow animation */
}

.session-start-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background: linear-gradient(135deg, #0e7490 0%, #155e75 100%) !important;
  box-shadow:
    0 8px 25px rgb(8 145 178 / 35%),
    0 0 40px rgb(8 145 178 / 20%) !important;
}

.session-start-btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 10px rgb(8 145 178 / 25%) !important;
}

/* Playing state - calm pulse instead of aggressive glow */
.session-start-btn.playing {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow:
    0 4px 15px rgb(22 163 74 / 30%),
    0 0 20px rgb(22 163 74 / 15%) !important;
  animation: pulse-calm 3s ease-in-out infinite;
}

@keyframes pulse-calm {
  0%,
  100% {
    box-shadow:
      0 4px 15px rgb(22 163 74 / 30%),
      0 0 20px rgb(22 163 74 / 15%);
  }

  50% {
    box-shadow:
      0 6px 20px rgb(22 163 74 / 40%),
      0 0 30px rgb(22 163 74 / 20%);
  }
}

/* Reset button */
.session-reset-btn {
  min-height: 52px;
  padding: 14px 20px;
  font-size: 1rem;
  border-radius: 12px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.session-reset-btn:hover {
  transform: translateY(-1px);
  background: #334155;
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}

/* ========================================
   9. IMPROVED UNIFIED SESSION BLOCK
   ======================================== */

.session-unified-block {
  background: linear-gradient(
    135deg,
    rgb(15 23 42 / 90%) 0%,
    rgb(30 41 59 / 90%) 100%
  );
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 16px;
  padding: 16px;
  box-shadow:
    0 8px 25px rgb(0 0 0 / 25%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
}

.session-unified-block::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(34 211 238 / 25%),
    transparent
  );
}

/* Stats row improvements */
.session-stats-row {
  background: rgb(15 23 42 / 80%);
  border: 1px solid rgb(51 65 85 / 50%);
  border-radius: 12px;
  overflow: hidden;
}

.light-theme .session-stats-row {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.session-stat + .session-stat {
  border-left: 1px solid rgb(51 65 85 / 50%);
}

.light-theme .session-stat + .session-stat {
  border-left-color: #e2e8f0;
}

/* ========================================
   10. IMPROVED DIRECTION BUTTONS
   ======================================== */

.dir-btn {
  border-radius: 10px;
  min-height: 56px;
  font-weight: 500;
}

.dir-btn.active {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border-color: #22d3ee;
  color: #fff;
  box-shadow:
    0 4px 12px rgb(8 145 178 / 30%),
    0 0 0 2px rgb(34 211 238 / 20%);
}

.dir-btn.active .dir-lbl {
  color: #ecfeff;
}

.light-theme .dir-btn.active {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border-color: #0891b2;
  color: #fff;
}

.light-theme .dir-btn.active .dir-lbl {
  color: #ecfeff;
}

/* ========================================
   11. IMPROVED PREVIEW PANEL
   ======================================== */

.floating-preview {
  background: linear-gradient(
    135deg,
    rgb(15 23 42 / 95%) 0%,
    rgb(30 41 59 / 95%) 100%
  );
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 16px;
  box-shadow:
    0 12px 35px rgb(0 0 0 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
}

.drag-handle {
  padding: 12px 16px;
  border-bottom: 1px solid rgb(51 65 85 / 40%);
  font-weight: 600;
  font-size: 0.9rem;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.light-theme .drag-handle {
  color: #334155;
  border-bottom-color: #e2e8f0;
}

/* Preview canvas */
#preview {
  border: none;
  border-radius: 8px;
  margin: 0;
  display: block;
  width: 100%;
}

.light-theme #preview {
  border: none;
}

/* ========================================
   12. IMPROVED FULLSCREEN PANEL
   ======================================== */

#previewFsPanel {
  background: rgb(15 23 42 / 97%);
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 20px;
  padding: 20px;
  gap: 10px;
  box-shadow:
    0 25px 60px rgb(0 0 0 / 50%),
    0 0 40px rgb(8 145 178 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
  backdrop-filter: blur(16px);
}

#previewFsPanel::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(34 211 238 / 30%),
    transparent
  );
}

.light-theme #previewFsPanel {
  background: rgb(255 255 255 / 98%);
  border-color: #e2e8f0;
  box-shadow:
    0 25px 60px rgb(0 0 0 / 15%),
    inset 0 1px 0 rgb(255 255 255);
}

/* Fullscreen close button */
.fs-close-btn {
  background: rgb(30 41 59 / 95%);
  border: 1px solid #475569;
  border-radius: 12px;
  color: #e2e8f0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.fs-close-btn:hover {
  background: rgb(51 65 85 / 95%);
  border-color: #64748b;
  color: #f1f5f9;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgb(0 0 0 / 30%);
}

.light-theme .fs-close-btn {
  background: rgb(255 255 255 / 98%);
  border: 1px solid #e2e8f0;
  color: #334155;
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

.light-theme .fs-close-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
}

/* Fullscreen viewer status */
.fs-viewer-status {
  background: rgb(239 68 68 / 15%);
  border: 1px solid rgb(239 68 68 / 30%);
  color: #fca5a5;
}

.fs-viewer-status.connected {
  background: rgb(34 197 94 / 15%);
  border: 1px solid rgb(34 197 94 / 30%);
  color: #86efac;
}

.light-theme .fs-viewer-status {
  background: rgb(239 68 68 / 10%);
  border-color: rgb(239 68 68 / 25%);
  color: #dc2626;
}

.light-theme .fs-viewer-status.connected {
  background: rgb(34 197 94 / 10%);
  border-color: rgb(34 197 94 / 25%);
  color: #16a34a;
}

/* Fullscreen session ID */
#fsCurSid {
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.light-theme #fsCurSid {
  color: #334155;
}

/* ========================================
   13. IMPROVED SETTINGS SECTION
   ======================================== */

.controls-card.settings-card {
  background: linear-gradient(
    135deg,
    rgb(15 23 42 / 85%) 0%,
    rgb(30 41 59 / 85%) 100%
  );
  border: 1px solid rgb(51 65 85 / 50%);
  border-radius: 16px;
  box-shadow:
    0 8px 25px rgb(0 0 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
}

.light-theme .controls-card.settings-card {
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 98%) 0%,
    rgb(248 250 252 / 98%) 100%
  );
  border-color: #e2e8f0;
  box-shadow:
    0 8px 25px rgb(0 0 0 / 6%),
    inset 0 1px 0 rgb(255 255 255);
}

/* Settings row hover */
.settings-row:hover {
  background: rgb(255 255 255 / 2%);
}

.light-theme .settings-row:hover {
  background: rgb(0 0 0 / 2%);
}

/* Settings select */
.settings-select {
  background: rgb(15 23 42 / 60%);
  border: 1px solid rgb(51 65 85 / 60%);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  font-size: 0.85rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.settings-select:hover {
  border-color: #475569;
}

.settings-select:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgb(34 211 238 / 20%);
}

.light-theme .settings-select {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

.light-theme .settings-select:hover {
  border-color: #94a3b8;
}

.light-theme .settings-select:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgb(8 145 178 / 15%);
}

/* ========================================
   14. IMPROVED VOLUME SLIDER
   ======================================== */

#controllerVolumeSlider {
  height: 6px;
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  border: 1px solid rgb(51 65 85 / 40%);
  border-radius: 3px;
  transition: border-color 0.2s ease;
}

#controllerVolumeSlider:hover {
  border-color: #475569;
}

#controllerVolumeSlider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  border: 2px solid #fff;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#controllerVolumeSlider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow:
    0 3px 10px rgb(0 0 0 / 40%),
    0 0 0 4px rgb(34 211 238 / 30%);
}

.light-theme #controllerVolumeSlider {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: rgb(203 213 225 / 60%);
}

.light-theme #controllerVolumeSlider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border: 2px solid #fff;
}

.settings-volume-value {
  color: #22d3ee;
  font-weight: 600;
  font-size: 0.82rem;
}

.light-theme .settings-volume-value {
  color: #0891b2;
}

/* ========================================
   15. IMPROVED TOGGLE SWITCH
   ======================================== */

.toggle-switch {
  width: 48px;
  height: 26px;
}

.slider {
  background-color: #475569;
  border-radius: 26px;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider::before {
  background-color: #e2e8f0;
  height: 20px;
  width: 20px;
  left: 3px;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

input:checked + .slider {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
}

input:checked + .slider::before {
  transform: translateY(-50%) translateX(22px);
  background-color: #fff;
}

input:focus-visible + .slider {
  outline: 2px solid rgb(34 211 238 / 55%);
  outline-offset: 2px;
}

.light-theme .slider {
  background-color: #cbd5e1;
}

.light-theme input:checked + .slider {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

.light-theme input:focus-visible + .slider {
  outline-color: rgb(8 145 178 / 55%);
}

/* ========================================
   16. IMPROVED PRESET CARDS
   ======================================== */

.preset-card {
  background: rgb(15 23 42 / 50%);
  border: 2px solid rgb(51 65 85 / 50%);
  border-radius: 12px;
  padding: 16px 12px;
  min-height: 80px;
}

.preset-card:hover {
  background: rgb(30 41 59 / 80%);
  border-color: #475569;
  color: #f1f5f9;
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
}

.light-theme .preset-card {
  background: #fff;
  border-color: #e2e8f0;
  color: #334155;
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}

.light-theme .preset-card:hover {
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 8px 20px rgb(0 0 0 / 8%);
}

/* Preset accent colors - updated for medical teal theme */
.preset-card[data-preset-id="relaxation"] {
  border-color: rgb(8 145 178 / 40%);
}

.preset-card[data-preset-id="relaxation"]:hover {
  border-color: #0891b2;
  box-shadow: 0 4px 14px rgb(8 145 178 / 25%);
}

.preset-card[data-preset-id="activation"] {
  border-color: rgb(217 119 6 / 40%);
}

.preset-card[data-preset-id="activation"]:hover {
  border-color: #d97706;
  box-shadow: 0 4px 14px rgb(217 119 6 / 25%);
}

.preset-card[data-preset-id="couplesTherapy"] {
  border-color: rgb(124 58 237 / 40%);
}

.preset-card[data-preset-id="couplesTherapy"]:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 14px rgb(124 58 237 / 25%);
}

.preset-card[data-preset-id="dynamic"] {
  border-color: rgb(37 99 235 / 40%);
}

.preset-card[data-preset-id="dynamic"]:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgb(37 99 235 / 25%);
}

/* ========================================
   17. IMPROVED LINK GROUP
   ======================================== */

.link-group__input-wrapper {
  display: flex;
  gap: 8px;
}

.link-group__input {
  flex: 1;
  padding: 10px 14px;
  background: rgb(15 23 42 / 60%);
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 0.85rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.link-group__input:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgb(34 211 238 / 15%);
  outline: none;
}

.light-theme .link-group__input {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

.light-theme .link-group__input:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgb(8 145 178 / 15%);
}

/* Copy button */
.copy-btn {
  padding: 10px 16px;
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(8 145 178 / 35%);
}

.copy-btn:active {
  transform: translateY(0);
}

/* ========================================
   18. VIEWER STATUS IMPROVEMENTS
   ======================================== */

#viewerStatus {
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

#viewerStatus.connected {
  color: #4ade80;
  background: rgb(34 197 94 / 15%);
}

#viewerStatus.disconnected {
  color: #f87171;
  background: rgb(239 68 68 / 15%);
}

.light-theme #viewerStatus.connected {
  color: #16a34a;
  background: rgb(34 197 94 / 15%);
}

.light-theme #viewerStatus.disconnected {
  color: #dc2626;
  background: rgb(239 68 68 / 15%);
}

/* ========================================
   19. AUTO-STOP CONTROLS
   ======================================== */

.session-bottom-row {
  gap: 6px 8px;
}

.autostop-input {
  background: rgb(15 23 42 / 60%);
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 8px;
  color: #e2e8f0;
  padding: 6px 10px;
  font-size: 0.85rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  min-height: 40px;
}

.autostop-input:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgb(34 211 238 / 15%);
  outline: none;
}

.autostop-input::placeholder {
  color: #64748b;
}

.autostop-unit {
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.light-theme .autostop-input {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

.light-theme .autostop-input:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgb(8 145 178 / 15%);
}

.light-theme .autostop-input::placeholder {
  color: #94a3b8;
}

.light-theme .autostop-unit {
  color: #64748b;
}

/* ========================================
   20. COLOR PALETTE BUTTONS
   ======================================== */

.color-btn {
  border: 2px solid rgb(51 65 85 / 60%);
  border-radius: 10px;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.color-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

.color-btn.active {
  border-color: #22d3ee;
  box-shadow:
    0 0 0 3px rgb(34 211 238 / 25%),
    0 4px 12px rgb(34 211 238 / 30%);
  transform: scale(1.08);
}

.light-theme .color-btn {
  border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
}

.light-theme .color-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgb(0 0 0 / 12%);
}

.light-theme .color-btn.active {
  border-color: #0891b2;
  box-shadow:
    0 0 0 3px rgb(8 145 178 / 20%),
    0 4px 8px rgb(8 145 178 / 15%);
}

/* ========================================
   21. BACK BUTTON IMPROVEMENTS
   ======================================== */

.back-btn {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgb(15 23 42 / 80%);
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 10px;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.back-btn:hover {
  background: rgb(30 41 59 / 90%);
  border-color: #475569;
  color: #f1f5f9;
  transform: translateY(-1px);
}

.light-theme .back-btn {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}

.light-theme .back-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* ========================================
   22. FULLSCREEN BUTTON
   ======================================== */

.fs-fullscreen-btn {
  padding: 8px 14px;
  background: transparent;
  border: 2px solid rgb(51 65 85 / 60%);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fs-fullscreen-btn:hover {
  background: rgb(30 41 59 / 60%);
  border-color: #475569;
  color: #e2e8f0;
}

.light-theme .fs-fullscreen-btn {
  background: transparent;
  border-color: #cbd5e1;
  color: #64748b;
}

.light-theme .fs-fullscreen-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #334155;
}

/* ========================================
   23. IMPROIVED PANEL HEADER
   ======================================== */

.drag-handle .btn {
  font-size: 0.8rem;
  padding: 6px 12px;
  min-height: 36px;
}

/* ========================================
   24. VIEWER INFO POPUP
   ======================================== */

.viewer-info-popup {
  background: rgb(15 23 42 / 90%);
  border: 1px solid rgb(51 65 85 / 60%);
  border-radius: 10px;
  padding: 8px 14px;
  color: #cbd5e1;
  font-size: 0.8rem;
  backdrop-filter: blur(8px);
}

.light-theme .viewer-info-popup {
  background: rgb(255 255 255 / 95%);
  border-color: #e2e8f0;
  color: #475569;
}

/* ========================================
   25. LAYOUT IMPROVEMENTS
   ======================================== */

/* Three column layout tweaks */
.controller-layout {
  gap: 16px;
  align-items: stretch;
}

/* Left column */
.controller-left-col {
  gap: 8px;
}

.controller-left-col .controls-card {
  padding: 10px 12px;
}

/* Center column — normal flow, full width */
.controller-center-col {
  gap: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
}

/* Session block in center: full width */
.controller-center-col .control-section {
  width: 100%;
}

/* Preview: smaller when viewer not connected */
.controller-center-col .floating-preview {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* Center viewer status text */
.link-group__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.link-group__label .viewer-session-id {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #cbd5e1;
  font-size: 0.8rem;
}

/* Center waiting status */
#viewerStatus {
  display: block;
  width: 100%;
  text-align: center;
}

/* Right column */
.controller-right-col {
  gap: 12px;
}

.controller-right-col .controls-card {
  padding: 12px 14px;
}

/* ========================================
   26. LINK GROUP LABEL
   ======================================== */

.link-group__label {
  display: block;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.light-theme .link-group__label {
  color: #64748b;
}

/* ========================================
   27. HEADER IMPROVEMENTS
   ======================================== */

header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ========================================
   28. SOUND HEADER ICON
   ======================================== */

.settings-sound-header__icon {
  background: linear-gradient(
    135deg,
    rgb(8 145 178 / 15%) 0%,
    rgb(14 116 144 / 10%) 100%
  );
  border-radius: 10px;
  transition: background 0.2s ease;
}

.settings-row:hover .settings-sound-header__icon {
  background: linear-gradient(
    135deg,
    rgb(8 145 178 / 20%) 0%,
    rgb(14 116 144 / 15%) 100%
  );
}

.light-theme .settings-sound-header__icon {
  background: linear-gradient(
    135deg,
    rgb(8 145 178 / 8%) 0%,
    rgb(14 116 144 / 5%) 100%
  );
}

/* ========================================
   29. MONITOR ICON
   ======================================== */

.settings-row__icon {
  background: linear-gradient(
    135deg,
    rgb(8 145 178 / 15%) 0%,
    rgb(14 116 144 / 10%) 100%
  );
}

.settings-row:hover .settings-row__icon {
  background: linear-gradient(
    135deg,
    rgb(8 145 178 / 20%) 0%,
    rgb(14 116 144 / 15%) 100%
  );
}

.light-theme .settings-row__icon {
  background: linear-gradient(
    135deg,
    rgb(8 145 178 / 8%) 0%,
    rgb(14 116 144 / 5%) 100%
  );
}

/* ========================================
   30. SETTINGS ICON HOVER
   ======================================== */

.settings-row__icon:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

/* ========================================
   31. VIEWER AUDIO INDICATOR
   ======================================== */

.viewer-audio-indicator {
  background: rgb(234 179 8 / 10%);
  border-top-color: rgb(234 179 8 / 20%);
  color: #fbbf24;
  padding: 10px 14px;
  font-size: 0.8rem;
}

.viewer-audio-indicator.warning {
  background: rgb(239 68 68 / 10%);
  border-top-color: rgb(239 68 68 / 20%);
  color: #f87171;
}

.viewer-audio-indicator.ready {
  background: rgb(34 197 94 / 10%);
  border-top-color: rgb(34 197 94 / 20%);
  color: #4ade80;
}

.light-theme .viewer-audio-indicator {
  background: rgb(234 179 8 / 8%);
  border-top-color: rgb(234 179 8 / 15%);
  color: #ca8a04;
}

/* ========================================
   32. ERROR STATES
   ======================================== */

.error-message {
  background: linear-gradient(
    135deg,
    rgb(239 68 68 / 10%) 0%,
    rgb(180 83 9 / 8%) 100%
  );
  border: 1px solid rgb(239 68 68 / 25%);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fca5a5;
}

.error-message-title {
  color: #f87171;
  margin-bottom: 6px;
}

.error-message-text {
  color: #fdba74;
}

.error-message-btn {
  background: rgb(239 68 68 / 15%);
  border: 1px solid rgb(239 68 68 / 30%);
  color: #fca5a5;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.error-message-btn:hover {
  background: rgb(239 68 68 / 25%);
  border-color: rgb(239 68 68 / 50%);
}

.light-theme .error-message {
  background: linear-gradient(
    135deg,
    rgb(239 68 68 / 8%) 0%,
    rgb(180 83 9 / 5%) 100%
  );
  border-color: rgb(239 68 68 / 20%);
  color: #991b1b;
}

.light-theme .error-message-title {
  color: #dc2626;
}

.light-theme .error-message-text {
  color: #b91c1c;
}

.light-theme .error-message-btn {
  background: rgb(239 68 68 / 10%);
  border-color: rgb(239 68 68 / 25%);
  color: #991b1b;
}

/* ========================================
   33. REDUCED MOTION for specific elements
   ======================================== */

/* Remove gradient shift animation from card h1 */
.card h1 {
  animation: none;
  background: linear-gradient(135deg, #0891b2, #22d3ee, #4ade80);
  background-size: 100% 100%;
}

/* Make pulse-glow animation calmer */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 4px 12px rgb(245 158 11 / 25%);
  }

  100% {
    box-shadow: 0 4px 18px rgb(245 158 11 / 35%);
  }
}

/* Remove dot pulse animation on loading */
@keyframes pulse-dot-waiting {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* Volume pulse - calmer */
@keyframes volume-pulse {
  0%,
  100% {
    opacity: 0.85;
  }

  50% {
    opacity: 1;
  }
}

/* ========================================
   34. RESPONSIVE IMPROVEMENTS
   ======================================== */

@media (width <= 900px) {
  .controller-layout {
    padding: 12px;
    gap: 12px;
  }

  .session-unified-block {
    padding: 12px;
  }

  .session-start-btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
  }

  .session-reset-btn {
    min-height: 48px;
    font-size: 0.95rem;
  }

  .dir-btn {
    min-height: 48px;
  }

  .preset-card {
    min-height: 70px;
    padding: 12px 10px;
  }
}

@media (width <= 480px) {
  header {
    padding: 12px 16px;
  }

  .back-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .session-start-btn {
    min-height: 46px !important;
    font-size: 0.9rem !important;
  }

  .session-stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .session-stat--timer {
    grid-column: 1 / -1;
  }

  .session-stat--timer .session-stat-value {
    font-size: 1.5rem;
  }

  .fullscreen-panel {
    width: calc(100vw - 24px);
    max-width: 340px;
    padding: 16px;
  }
}

/* ========================================
   35. BACKGROUND GRADIENT (calmer, professional)
   ======================================== */

body::before {
  background:
    radial-gradient(circle at 20% 80%, rgb(8 145 178 / 6%) 0%, transparent 45%),
    radial-gradient(
      circle at 80% 20%,
      rgb(14 116 144 / 5%) 0%,
      transparent 45%
    ),
    radial-gradient(circle at 50% 50%, rgb(34 197 94 / 3%) 0%, transparent 50%);
}