/* CMS-only layer — on top of shared style.css
   Follows the same atomic design sections as style.css:
   1. Tokens
   2. Reset / Base
   3. Atoms
   4. Molecules
   5. Organisms
   6. Pages
   7. Utilities
   8. Overrides / Responsive
*/

/* ═══════════════════════════════════════════════════
   3. ATOMS
   ═══════════════════════════════════════════════════ */

/* ─── 3.1 TOGGLE BUTTON (neutralise shared button base) ─── */
.toggle-btn {
  --ch: 0;
  position: static;
  padding: 0;
  width: auto;
  clip-path: none;
}

.toggle-btn::before {
  content: none;
}

/* ─── 3.2 TABS ─── */
.nav-tabs {
  border-bottom: var(--border-width-thin) solid var(--accent-secondary-50);
}

.nav-tabs .nav-link {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.nav-tabs .nav-link:hover {
  color: var(--white);
  background: var(--accent-secondary-50);
}

.nav-tabs .nav-link.active {
  color: var(--white);
  background: var(--accent-secondary-50);
  border-bottom: var(--border-width-thick) solid var(--accent);
}

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.show.active { display: block; }

/* ─── 3.2b COLLAPSE (bootstrap-lite) ─── */
.collapse:not(.show) { display: none; }

/* ─── 3.3 COLLAPSIBLE SECTIONS ─── */
.cc-collapsible-toggle {
  font-size: var(--font-size-sm);
}

.cc-collapse-icon {
  transition: transform var(--transition-normal);
  font-size: var(--font-size-xs);
  margin-right: var(--space-1);
}

.cc-collapsible-toggle[aria-expanded='true'] .cc-collapse-icon {
  transform: rotate(90deg);
}

.cc-section,
.cc-section-header,
.cc-sub-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-thin) solid var(--accent-secondary-50);
}

.cc-section:last-child {
  border-bottom: none;
}

.cc-textarea:read-only {
  background: var(--black-10);
  border-color: var(--accent-secondary-50);
}

.form-control:read-only:focus,
.cc-textarea:read-only:focus {
  box-shadow: none;
  border-color: var(--accent-secondary-50);
}

/* ─── 3.4 TOPIC / TRIGGER INPUTS ─── */
.topic-test-input,
.trigger-pattern-input,
.trigger-test-input {
  background: var(--white-10);
  border: var(--border-width-thin) solid var(--white-10);
  color: var(--white);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.trigger-pattern-input { flex: 1; }
.topic-test-input { flex: 1; }

/* ═══════════════════════════════════════════════════
   4. MOLECULES
   ═══════════════════════════════════════════════════ */

/* ─── 4.1 SESSION MODE TOGGLE ─── */
.session-mode-toggle {
  display: flex;
  align-items: center;
  background: var(--accent-secondary-50);
  padding: var(--space-1);
  gap: var(--space-1);
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-dropdown);
}

.session-mode-toggle .toggle-btn {
  color: var(--white-50);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.session-mode-toggle .toggle-btn:hover {
  color: var(--white);
  background: var(--accent-secondary-50);
}

.session-mode-toggle .toggle-btn.play.active {
  background: var(--accent-50);
  color: var(--white);
}

.session-mode-toggle .toggle-btn.draft.active {
  background: var(--accent-secondary-50);
  color: var(--info);
}

/* ─── 4.2 EMPTY STATE ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white-50);
  padding: var(--space-5);
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  grid-column: 1 / -1;
}

.empty-state i {
  font-size: var(--font-size-3xl);
}

/* ─── 4.3 MEDIA GRID ─── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 100px), 1fr));
  gap: var(--space-3);
  min-height: 80px;
}

.cc-library-show-more { grid-column: 1 / -1; }

/* ─── 4.4 LIBRARY ITEMS ─── */
.cc-generated-library {
  gap: var(--space-2);
}

.cc-library-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: var(--border-width-thick) solid transparent;
  transition: all var(--transition-normal);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-sm);
}

.cc-library-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-library-item:hover {
  border-color: var(--accent-50);
}

.cc-library-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.cc-library-item.in-use {
  border-color: var(--info);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--info-50);
}

.cc-library-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.cc-library-item:hover .cc-library-item-actions {
  opacity: 1;
}

.cc-library-item.selected .cc-library-item-actions,
.cc-library-item.in-use .cc-library-item-actions {
  opacity: 1;
}

/* ─── 4.5 OUTPUT / VALIDATE ─── */
.cc-output-area {
  border: var(--border-width-thin) solid var(--accent-secondary-50);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.cc-validate-btn {
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cc-validate-btn:hover:not(.cc-validated) {
  color: var(--success-50);
  border-color: var(--success-50);
}

.cc-validate-btn.cc-validated,
.cc-validate-btn.cc-validated:hover {
  color: var(--success);
  border-color: var(--success);
}

.cc-output-img {
  max-width: 100%;
  max-height: 300px;
  border: var(--border-width-thin) solid var(--accent-secondary-50);
  cursor: pointer;
}

/* ─── 4.6 TOPIC DETAILS ─── */
.topic-details,
.pattern-details {
  display: none;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--white-10);
}

.topic-validation-error {
  display: none;
  color: var(--danger);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.topic-details-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.topic-details-field { margin-bottom: 0; }
.topic-details-field-name { flex: 2; min-width: 140px; }
.topic-details-field-trigger { flex: 1.5; min-width: 120px; }
.topic-details-field-affinity { flex: 1; min-width: 80px; }

/* ─── 4.7 TOPIC TEST PANEL ─── */
.topic-test-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--accent-secondary-50);
  border: var(--border-width-thin) solid var(--accent-secondary-50);
}

.topic-test-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  cursor: pointer;
}

.topic-test-panel-header:hover { color: var(--accent); }

.topic-test-panel-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--accent-light);
}

.topic-test-panel-title i { margin-right: var(--space-1); }

.topic-test-content { display: none; }
.topic-test-content.show { display: block; }

.topic-test-input-wrapper {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.topic-test-btn {
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topic-test-response {
  background: var(--black-10);
  padding: var(--space-3);
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--font-size-sm);
  color: var(--white-50);
  white-space: pre-wrap;
}

.topic-test-response.empty {
  color: var(--white-10);
  font-style: italic;
}

.topic-test-response.error { color: var(--accent); }

.topic-test-info {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-top: var(--space-2);
}

.topic-test-detect-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--black-10);
}

.topic-test-topic-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent-secondary-50);
  color: var(--accent-light);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
}

.topic-test-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent-secondary-50);
  color: var(--accent);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
}

.topic-test-media {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--black-10);
  display: flex;
  justify-content: center;
}

/* ─── 4.8 STEP FLOW ─── */
.cc-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circle);
  background: var(--accent-secondary-50);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-2);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.cc-step-active .cc-step-badge {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-50);
}

.cc-step-active,
.cc-step-done {
  padding-left: var(--space-3);
  transition: border-color var(--transition-normal),
              opacity var(--transition-normal),
              filter var(--transition-normal);
}

.cc-step-active {
  border-left: var(--border-width-xl) solid var(--accent);
}

.cc-step.locked {
  filter: grayscale(30%);
  transition: filter var(--transition-normal);
}

.cc-step.locked .cc-section-header {
  color: var(--white-50);
}

.cc-step-done .cc-step-badge {
  background: var(--success);
}

.cc-step-done {
  border-left: var(--border-width-xl) solid var(--success);
}

/* ─── 4.9 STATUS INDICATORS ─── */
.status-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--success);
}

.status-dot.offline { background: var(--danger); }

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

/* ─── 4.10 INDICATOR DOTS ─── */
.indicator-dot {
  position: absolute;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
}

.config-changed-dot {
  top: -3px;
  right: -3px;
  background: var(--warning);
}

.draft-delta-dot {
  top: -3px;
  left: -3px;
  background: var(--accent);
}

.indicator-dot.inline {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-2);
}

/* ─── 4.11 NOTIFICATIONS ─── */
.toast-container { position: fixed; bottom: 0; right: 0; padding: var(--space-4); z-index: var(--z-toast); }
.toast { display: flex; align-items: center; padding: var(--space-3) var(--space-4); max-width: 350px; }
.toast-body { flex: 1; }

/* ═══════════════════════════════════════════════════
   5. ORGANISMS
   ═══════════════════════════════════════════════════ */

/* ─── 5.1 CARD ITEMS (affinity rules, topics, trigger patterns) ─── */
.affinity-rule-item,
.topic-item,
.trigger-pattern-item {
  background: var(--item-bg, var(--black-10));
  border: var(--border-width-thin) solid var(--item-border, var(--glass-border));
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.affinity-rule-item:hover,
.topic-item:hover,
.trigger-pattern-item:hover {
  border-color: var(--accent-50);
}

.affinity-rule-item.editing,
.topic-item.editing,
.trigger-pattern-item.editing {
  background: var(--accent-secondary-50);
  box-shadow: 0 0 0 1px var(--accent-secondary-50);
}

.affinity-rule-item.editing { border-color: var(--accent); }
.topic-item.editing { border-color: var(--accent); }
.topic-item.off { opacity: var(--disabled-opacity); }

.affinity-rule-header,
.topic-header,
.trigger-pattern-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.affinity-rule-label {
  font-weight: var(--font-weight-bold);
  color: var(--accent);
}

.affinity-rule-range {
  color: var(--white-50);
  font-size: var(--font-size-sm);
}

.topic-id {
  font-weight: var(--font-weight-bold);
  color: var(--accent);
}

.topic-trigger {
  display: inline-block;
  background: var(--accent-secondary-50);
  color: var(--accent);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  margin-left: var(--space-2);
}

.topic-collapsed-body {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-1);
}

.topic-collapsed-info {
  flex: 1;
  min-width: 0;
}

.topic-affinity-range {
  color: var(--white-50);
  font-size: var(--font-size-sm);
}

.topic-summary {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--black-10);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.trigger-pattern-item {
  --item-bg: var(--white-10);
  --item-border: var(--white-10);
}

.trigger-pattern-item.editing { border-color: var(--success); }

.trigger-pattern-name {
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  text-transform: capitalize;
}

.trigger-pattern-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.trigger-pattern-name.has-duplicate-keywords { color: var(--danger); }
.trigger-pattern-item.has-duplicate-keywords { border-color: var(--danger-50); }

/* ─── 5.2 CHARACTER IMAGE EDITOR ─── */
.character-image-uploads {
  display: flex;
  gap: var(--space-3);
}

.character-image-field {
  flex: 1;
}

.character-image-preview {
  width: 100%;
  aspect-ratio: 1;
  border: var(--border-width-thick) dashed var(--white-10);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black-10);
}

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

.character-bg-preview {
  width: 110px;
  height: auto;
  aspect-ratio: 9 / 19.5;
}

.character-image-placeholder {
  font-size: var(--font-size-lg);
  color: var(--white-10);
}

.char-image-slot {
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.char-image-slot-active .character-image-preview {
  border-color: var(--accent);
  border-style: solid;
}

.char-image-gallery-section {
  border-top: var(--border-width-thin) solid var(--glass-border);
  padding-top: var(--space-3);
}

.char-image-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.char-image-gallery-title {
  font-size: var(--font-size-sm);
  color: var(--white-50);
}

.char-image-assigning-label {
  color: var(--accent);
  font-size: var(--font-size-xs);
}

.character-emotion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ─── 5.3 UPLOADED MEDIA ─── */
.uploaded-media-section {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--accent-secondary-50);
  border: var(--border-width-thin) solid var(--accent-secondary-50);
}

.uploaded-media-section-header { cursor: pointer; }
.uploaded-media-section-header:hover { color: var(--accent); }
.uploaded-media-section-title { font-weight: var(--font-weight-bold); }

.uploaded-media-content { display: none; }
.uploaded-media-content.show { display: block; }

.uploaded-media-tabs {
  border-bottom: var(--border-width-thin) solid var(--white-10);
  margin-bottom: 0;
}

.uploaded-media-tabs .nav-link i { margin-right: var(--space-1); }

.uploaded-media-tab-content {
  background: var(--black-10);
  border: var(--border-width-thin) solid var(--white-10);
  border-top: none;
  padding: var(--space-4);
}

.uploaded-media-generate-placeholder { color: var(--white-10); }

.uploaded-media-upload-area {
  border: var(--border-width-thin) dashed var(--white-10);
  padding: var(--space-4);
}

.uploaded-media-preview {
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}

.uploaded-media-empty {
  color: var(--white-10);
  padding: var(--space-4);
}

.uploaded-media-img,
.uploaded-media-video {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.uploaded-media-img.collapsed,
.uploaded-media-video.collapsed {
  max-height: 80px;
  max-width: 120px;
}

.uploaded-media-audio {
  width: 100%;
  max-width: 300px;
}

.uploaded-media-audio.collapsed {
  max-width: 200px;
  height: 32px;
}

.uploaded-media-controls {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-3);
}

.uploaded-media-info { margin-top: var(--space-3); text-align: center; }
.uploaded-media-info small { font-size: var(--font-size-xs); }

.uploaded-media-preview-collapsed {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  padding: var(--space-1);
  background: var(--black-10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.uploaded-media-preview-collapsed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uploaded-media-message { margin-top: var(--space-2); }

.uploaded-media-chat-img,
.uploaded-media-chat-video {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.uploaded-media-chat-audio {
  width: 100%;
  min-width: 250px;
  max-width: 300px;
  height: 40px;
  margin-top: var(--space-2);
}

.uploaded-media-library-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--white-10);
}

.uploaded-media-library-header { margin-bottom: var(--space-3); }

.uploaded-media-library-title {
  font-weight: var(--font-weight-medium);
  color: var(--white-50);
}

.message-uploaded-media { min-width: 250px; }

.message-media-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 250px;
}

/* ─── 5.4 IMAGE & VIDEO GENERATION ─── */
.cc-video-preview video {
  max-width: 200px;
  max-height: 350px;
  display: block;
  margin: 0 auto;
}

.imagegen-section,
.voicegen-section { margin-bottom: var(--space-4); }

.imagegen-section-header,
.voicegen-section-header { margin-bottom: var(--space-3); }

.imagegen-section-actions { display: flex; gap: var(--space-2); }

.imagegen-section-collapsible .imagegen-section-toggle {
  cursor: pointer;
  user-select: none;
  padding: var(--space-2) var(--space-3);
  background: var(--white-10);
  margin-bottom: 0;
  transition: background var(--transition-normal);
}

.imagegen-toggle-icon {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  transition: transform var(--transition-normal);
}

.imagegen-toggle-icon.expanded { transform: rotate(180deg); }

.imagegen-section-content { padding: var(--space-3) 0; }
.imagegen-section-content .imagegen-section-actions { margin-top: var(--space-3); }

.style-selection-info {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--white-50);
}

.style-selection-info .selection-count {
  font-weight: var(--font-weight-bold);
  color: var(--accent-light);
}

.style-prompt-input,
.user-prompt-input {
  font-size: var(--font-size-sm);
  resize: vertical;
}

.imagegen-actions,
.voicegen-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }

.generate-image-btn .spinner,
.generate-voice-btn .spinner { margin-left: var(--space-2); }

.imagegen-result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--black-10);
  text-align: center;
}

.imagegen-result-gallery { --grid-min: 150px; margin-bottom: var(--space-4); }
.generated-images-library { --grid-min: 120px; }

.imagegen-disabled-notice i,
.voicegen-disabled-notice i { color: var(--info); }

.cc-library-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.style-field { margin-bottom: var(--space-2); }
.style-field label { font-size: var(--font-size-xs); margin-bottom: var(--space-1); }

/* ─── 5.5 FULLVIEW MODAL ─── */
.image-fullview-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

.image-fullview-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.image-fullview-backdrop {
  position: absolute;
  inset: 0;
  background: var(--black-50);
  backdrop-filter: var(--blur-light);
}

.image-fullview-content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--accent-secondary);
  padding: var(--space-4);
  box-shadow:
    0 20px 60px var(--black-50),
    0 0 0 1px var(--white-10);
}

.image-fullview-img,
.media-fullview-video {
  display: block;
  max-width: calc(85vw - 80px);
  max-height: calc(85vh - 100px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.media-fullview-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6);
  background: var(--white-10);
  color: var(--white-50);
}

.media-fullview-audio audio { margin-top: var(--space-4); width: 300px; }

.image-fullview-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  background: var(--white-10);
  border: none;
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal);
  z-index: 1;
}

.image-fullview-filename {
  margin-top: var(--space-3);
  color: var(--white-50);
  font-size: var(--font-size-xs);
  text-align: center;
  word-break: break-all;
}

/* ─── 5.6 VOICE GENERATION ─── */
.voicegen-char-count-label {
  font-size: var(--font-size-xs);
  color: var(--white-50);
}

.voicegen-char-count { color: var(--accent-light); }

.voicegen-text-input { resize: vertical; min-height: 80px; }

.voicegen-preview {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--black-10);
}

.voicegen-preview-header {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-bottom: var(--space-3);
}

.voicegen-preview-header i { margin-right: var(--space-2); }
.voicegen-audio-player { width: 100%; height: 40px; }

.generated-voices-library {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 80px;
}

/* Voice library list mode (ElevenLabs, etc.) */
.cc-library-list-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cc-library-list-item {
  aspect-ratio: unset;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.cc-library-list-item .cc-library-item-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  color: var(--neutral);
  font-size: var(--font-size-sm);
}

.cc-library-list-item .cc-library-item-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.cc-library-list-item .cc-library-item-actions {
  position: static;
  opacity: 1;
  flex-direction: row;
  padding: 0;
}

/* Voice button (chat input) */
.btn-voice {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--font-size-lg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-50); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

.btn-voice.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
  animation: pulse-recording 1.5s ease-in-out infinite;
}

.btn-voice.recording:hover {
  background: var(--danger);
}

/* Mic settings popup */
.mic-settings-wrapper { position: relative; }

.btn-mic-settings {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: var(--font-size-xs);
}

.mic-selector-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--accent-secondary);
  border: var(--border-width-thick) solid var(--accent);
  box-shadow:
    0 10px 40px var(--black-50),
    0 0 15px var(--accent-secondary-50);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-slow);
  z-index: var(--z-dropdown);
}

.mic-selector-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mic-popup-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--white-10);
}

.mic-popup-header h6 {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--white-50);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mic-popup-content { padding: var(--space-4); }

.mic-popup-content label {
  display: block;
  font-size: var(--font-size-xs);
}

.mic-select { margin-bottom: var(--space-4); }

.mic-audio-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--white-10);
}

.mic-setting-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2);
  transition: background var(--transition-normal);
}

.mic-setting-toggle:hover { background: var(--white-10); }

.mic-setting-toggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.mic-setting-toggle span {
  font-size: var(--font-size-sm);
  color: var(--white-50);
}

.voice-indicator {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  color: var(--danger);
}

/* ─── 5.7 CONFIG ITEMS (publish) ─── */
.config-item {
  background: var(--item-bg, var(--black-10));
  border: var(--border-width-thin) solid var(--item-border, var(--glass-border));
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.config-item:hover { border-color: var(--accent-50); }

.config-item.enabled {
  border-color: var(--success-50);
  background: var(--success-50);
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.config-name {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--accent);
  background: var(--accent-secondary-50);
  padding: var(--space-1) var(--space-2);
}

.config-status {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.config-status.enabled {
  background: var(--success-50);
  color: var(--success);
}

.config-status.off {
  background: var(--white-10);
  color: var(--neutral);
}

.config-meta {
  color: var(--white-50);
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
}

.config-meta i { margin-right: var(--space-1); width: 16px; text-align: center; }

.config-notes {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--black-10);
}

.config-notes.empty {
  color: var(--white-10);
  font-style: italic;
}

.config-actions { display: flex; gap: var(--space-2); }

.config-edit-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--white-10);
}

.config-edit-form textarea { resize: vertical; }

.publish-pane strong { color: var(--white-50); }

/* ─── 5.7b PUBLISH PREVIEW & MERGE ─── */
.publish-preview-panel {
  border: var(--border-width-thin) solid var(--accent-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.publish-preview-header {
  background: var(--accent-secondary-50);
  padding: var(--space-3);
  color: var(--white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.publish-preview-header button { margin-left: auto; }

.publish-preview-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 400px;
  overflow-y: auto;
}

.publish-preview-section-title {
  color: var(--info);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.publish-preview-section-title--warning { color: var(--warning); }

.publish-preview-change-item {
  background: var(--accent-secondary-50);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--white);
}

.publish-preview-no-changes {
  text-align: center;
  padding: var(--space-3);
  color: var(--success);
  font-size: var(--font-size-sm);
}

.publish-preview-footer {
  padding: var(--space-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  border-top: var(--border-width-thin) solid var(--white-10);
}

.publish-conflict-item .conflict-choice-group {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.publish-conflict-item .conflict-choice-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.publish-conflict-item .conflict-choice-group input[type="radio"] {
  accent-color: var(--accent);
}

.sync-conflict-banner {
  border: var(--border-width-thin) solid var(--warning-50);
  border-left: var(--border-width-xl) solid var(--warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.sync-conflict-header {
  color: var(--warning);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sync-conflict-item {
  background: var(--accent-secondary-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.sync-conflict-item:last-child { margin-bottom: 0; }

.sync-conflict-field-name {
  color: var(--white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.sync-conflict-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sync-conflict-value-label {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.sync-conflict-value-preview {
  background: var(--black-10);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--white);
  white-space: pre-wrap;
  word-break: break-word;
}

.sync-conflict-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.merge-preview-thumb {
  width: var(--space-6);
  height: var(--space-6);
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: var(--space-1);
}

.merge-preview-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.merge-preview-topic {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.merge-preview-more {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-left: var(--space-2);
}

.sync-conflict-actions .conflict-btn-mine { color: var(--info); }
.sync-conflict-actions .conflict-btn-theirs { color: var(--warning); }

.sync-conflict-actions .conflict-btn-mine:hover,
.sync-conflict-actions .conflict-btn-theirs:hover { color: var(--white); }

/* ─── 5.8 STATUS INDICATOR ─── */
.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--black-50);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  position: fixed;
  bottom: calc(var(--space-3) + 36px);
  right: var(--space-3);
  z-index: var(--z-dropdown);
}

/* ─── 5.9 TRIGGER TEST ─── */
.trigger-keyword {
  background: var(--accent-secondary-50);
  color: var(--accent-light);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.trigger-keyword.duplicate {
  background: var(--danger-50);
  color: var(--danger);
  border: var(--border-width-thin) solid var(--danger-50);
}

.trigger-duplicate-warning {
  color: var(--danger);
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--danger-50);
  border-left: var(--border-width-xl) solid var(--danger);
}

.trigger-duplicate-warning i { margin-right: var(--space-2); color: var(--danger); }

.trigger-test-section {
  background: var(--black-10);
  padding: var(--space-4);
}

.trigger-test-section .trigger-test-muted { color: var(--white-50); }

.trigger-test-result {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
}

.trigger-test-result.success {
  background: var(--success-50);
  border: var(--border-width-thin) solid var(--success-50);
  color: var(--success);
}

.trigger-test-result.no-match {
  background: var(--white-10);
  border: var(--border-width-thin) solid var(--neutral);
  color: var(--neutral);
}

.trigger-test-result .matched-trigger {
  font-weight: var(--font-weight-bold);
  color: var(--success);
}

.trigger-test-result .matched-keyword {
  background: var(--success-50);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family-mono);
}

/* ─── 5.10 AFFINITY SLIDER ─── */
.affinity-slider-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-1) var(--space-2);
}

.affinity-slider-container label {
  color: var(--black);
  white-space: nowrap;
}

.affinity-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: var(--space-2);
  background: linear-gradient(to right, var(--accent), var(--danger));
}

.affinity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--affinity-thumb-color, var(--accent));
  border: var(--border-width-thick) solid var(--affinity-thumb-color, var(--accent));
  cursor: pointer;
}

.affinity-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--affinity-thumb-color, var(--accent));
  border: var(--border-width-thick) solid var(--affinity-thumb-color, var(--accent));
  cursor: pointer;
}

.affinity-value-display {
  min-width: 45px;
  text-align: center;
  color: var(--accent);
  font-weight: var(--font-weight-bold);
}

/* ─── 5.11 USER MANAGER ─── */
.user-manager-table {
  background: var(--white-10);
  overflow-x: auto;
}

.user-manager-table table {
  width: 100%;
  border-collapse: collapse;
  color: var(--white);
}

.user-manager-table th {
  background: var(--white-10);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: var(--border-width-thin) solid var(--white-10);
}

.user-manager-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--white-10);
  vertical-align: middle;
}

.user-manager-table tr:hover { background: var(--white-10); }

.user-manager-table .user-email { font-size: var(--font-size-sm); }

.user-manager-table .form-select {
  min-width: 100px;
  font-size: var(--font-size-sm);
}

.user-manager-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.user-manager-table .status-badge.active {
  background: var(--success-50);
  color: var(--success);
}

.user-manager-table .status-badge.inactive {
  background: var(--white-10);
  color: var(--neutral);
}

.user-manager-table .btn-delete,
.user-manager-table .btn-toggle-status {
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: var(--space-1);
}

.user-manager-table .btn-delete:hover { color: var(--danger); }
.user-manager-table .btn-toggle-status:hover { color: var(--info); }

.btn-add-user { padding: var(--space-3) var(--space-4); }

.user-manager-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.user-manager-table th.sortable i {
  margin-left: var(--space-2);
  opacity: 0.5;
}

.user-manager-table th.sortable:hover i { opacity: 1; }

.user-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.user-row.expanded td { border-bottom-color: transparent; }

.user-permissions-row { background: var(--black-10); }
.user-permissions-row:hover { background: var(--black-10); }

.user-permissions-row td {
  padding: 0;
  border-bottom: var(--border-width-thick) solid var(--accent-secondary-50);
}

.permissions-content {
  padding: var(--space-4);
  animation: fadeIn 0.2s ease-out;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.permission-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.permission-item:hover { background: var(--white-10); }

.permission-item.is-default { color: var(--accent-50); }

.permission-item input[disabled] { opacity: 0.4; }
.permission-item:has(input[disabled]) { cursor: default; opacity: 0.6; }

.perm-default {
  font-size: var(--font-size-xs);
  opacity: 0.5;
}

.permissions-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}

.user-loading,
.no-users-message {
  text-align: center;
  padding: var(--space-6);
  color: var(--white-50);
}

/* ─── 5.12 ANALYTICS ─── */
.analytics-card {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  background: var(--black-10);
  border: var(--border-width-thin) solid var(--glass-border);
  border-left: var(--border-width-xl) solid var(--card-accent, var(--accent));
  transition: all var(--transition-slow);
}

.analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--black-10);
}

.analytics-card-tts { --card-accent: var(--info); }

.analytics-card-icon {
  font-size: var(--font-size-3xl);
  margin-right: var(--space-4);
  opacity: 0.8;
  color: var(--card-accent, var(--accent));
}

.analytics-card-content { flex: 1; }

.analytics-card-title {
  font-size: var(--font-size-sm);
  color: var(--white-50);
  margin-bottom: var(--space-1);
}

.analytics-card-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  line-height: var(--line-height-tight);
}

.analytics-card-detail {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-top: var(--space-1);
}

.analytics-chart-container {
  background: var(--black-10);
  padding: var(--space-4);
  height: 250px;
}

.analytics-table-container {
  max-height: 500px;
  overflow-y: auto;
  background: var(--black-10);
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.analytics-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--accent-secondary);
}

.analytics-table th {
  padding: var(--space-3);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--white-50);
  border-bottom: var(--border-width-thick) solid var(--accent-secondary-50);
  white-space: nowrap;
}

.analytics-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-normal);
}

.analytics-table th.sortable:hover {
  background: var(--accent-secondary-50);
  color: var(--accent-light);
}

.analytics-table th.sortable i {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  opacity: 0.6;
  transition: opacity var(--transition-normal);
}

.analytics-table th.sortable:hover i { opacity: 1; }

.analytics-table td {
  padding: var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--white-10);
  color: var(--white-50);
  vertical-align: middle;
}

.analytics-row {
  cursor: pointer;
  transition: all var(--transition-normal);
}

.analytics-row:hover,
.analytics-row.expanded {
  background: var(--accent-secondary-50);
}

.analytics-row.expanded td { border-bottom-color: transparent; }

.analytics-details-row { background: var(--black-10); }

.analytics-details-row td {
  padding: 0;
  border-bottom: var(--border-width-thick) solid var(--accent-secondary-50);
}

.analytics-details-content {
  padding: var(--space-4);
  --fade-from: -10px;
  animation: fadeIn 0.2s ease-out;
}

.analytics-details-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.analytics-detail-section {
  background: var(--white-10);
  padding: var(--space-3);
}

.analytics-detail-label {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.analytics-detail-label i { font-size: var(--font-size-xs); }

.analytics-detail-text {
  font-size: var(--font-size-sm);
  color: var(--white-50);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  background: var(--black-10);
  border-left: var(--border-width-xl) solid var(--accent-50);
}

.analytics-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--white-50);
  padding: var(--space-2) var(--space-3);
}

.analytics-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.analytics-detail-meta i { font-size: var(--font-size-xs); opacity: 0.7; }

.analytics-detail-user {
  background: var(--accent-secondary-50);
  border-left: var(--border-width-xl) solid var(--accent-50);
}

.analytics-detail-user .analytics-detail-label { color: var(--accent-50); }

.analytics-detail-media {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.analytics-media-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: var(--border-width-thick) solid transparent;
}

.analytics-media-thumb:hover {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 2px 10px var(--accent-secondary-50);
}

.analytics-media-generated,
.analytics-media-style-ref {
  border-color: var(--accent-secondary-50);
}

.analytics-media-style-ref { opacity: 0.8; }
.analytics-media-style-ref:hover { opacity: 1; }

.analytics-audio {
  height: 32px;
  max-width: 250px;
}

.analytics-audio::-webkit-media-controls-panel {
  background: var(--accent-secondary-50);
}

.analytics-empty { color: var(--white-50); }
.analytics-empty i { opacity: 0.5; }

.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.analytics-filters .form-select { padding-right: 1.5rem; }
.analytics-filters .analytics-text-filter { min-width: 130px; flex: 1; }

.analytics-filters input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

.analytics-filters .form-control {
  width: auto;
  min-width: 0;
  height: 28px;
}

.analytics-subtabs {
  border-bottom: var(--border-width-thin) solid var(--white-10);
  gap: var(--space-1);
}

.analytics-table .text-truncate { max-width: 140px; }

/* ─── 5.13 COHORT ANALYSIS ─── */
.cohort-controls { padding: var(--space-2) 0; }

.cohort-card-users,
.cohort-card-sessions { --card-accent: var(--info); }
.cohort-card-active   { --card-accent: var(--success); }
.cohort-card-returning { --card-accent: var(--accent); }

.cohort-heatmap-container {
  background: var(--black-10);
  border: var(--border-width-thin) solid var(--white-10);
  overflow: hidden;
}

.cohort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.cohort-table td {
  padding: var(--space-2);
  text-align: center;
  border: var(--border-width-thin) solid var(--white-10);
}

.cohort-table thead { background: var(--white-10); }

.cohort-table th {
  color: var(--white-50);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cohort-heatmap-label {
  text-align: left;
  color: var(--white-50);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  min-width: 80px;
}

.cohort-heatmap-period {
  min-width: 46px;
  font-size: var(--font-size-xs);
}

.cohort-heatmap-cell {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  transition: all var(--transition-fast);
  cursor: default;
  min-width: 46px;
}

.cohort-heatmap-cell:hover {
  outline: 1px solid var(--white-10);
  outline-offset: -1px;
}

.cohort-heatmap-empty { background: var(--white-10); }

.cohort-detail-table { font-size: var(--font-size-xs); }
.cohort-detail-table th { padding: var(--space-2) var(--space-3); }

/* ─── 5.14 PENDING CONFIG NOTIFICATION ─── */
.pending-config-wrapper {
  position: relative;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--white-50);
  transition: color var(--transition-fast);
  display: none;
}

.pending-config-wrapper:hover { color: var(--white); }
.pending-config-wrapper.has-pending { display: inline-flex; color: var(--warning); }

.pending-config-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--danger);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  min-width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  line-height: 1;
}

.pending-config-wrapper.has-pending .pending-config-count { display: flex; }

/* ─── 5.15 DEBUG LOG PANEL ─── */
.log-toggle-btn { cursor: pointer; }
.log-panel { display: none; max-height: 200px; overflow: hidden; flex-direction: column; }
.log-panel.show { display: flex; }
.log-panel-content { flex: 1; overflow-y: auto; }

/* ═══════════════════════════════════════════════════
   6. PAGES
   ═══════════════════════════════════════════════════ */

/* ─── 6.0 PAGE FRAME (CMS override — 60% instead of player's 30%) ─── */
.page-frame {
  width: 60%;
}

.page-frame > * {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.page-body {
  flex: 1;
  overflow-y: auto;
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--space-3);
  gap: var(--space-2);
  border-top: var(--border-width-thin) solid var(--accent-secondary-50);
}

.page-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  margin: 0;
}

.page-title i {
  margin-right: var(--space-2);
}

@media (max-width: 768px) {
  .page-frame {
    width: 100%;
  }
}

/* ─── 6.1 DASHBOARD ─── */
.dashboard-grid {
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, calc(50% - var(--space-4))), 1fr));
  gap: var(--space-4);
  align-content: start;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

.dashboard-grid button {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  white-space: normal;
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   7. UTILITIES
   ═══════════════════════════════════════════════════ */

/* ─── 7.1 DISPLAY ─── */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* ─── 7.2 FLEXBOX ─── */
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }

/* ─── 7.3 GAP ─── */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-4) !important; }

/* ─── 7.4 SPACING ─── */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-4) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.me-1 { margin-inline-end: var(--space-1) !important; }
.me-2 { margin-inline-end: var(--space-2) !important; }
.ms-auto { margin-inline-start: auto !important; }
.m-auto { margin: auto !important; }
.p-3 { padding: var(--space-4) !important; }
.pt-3 { padding-top: var(--space-4) !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-3 { padding-inline-start: var(--space-4) !important; }
.py-2 { padding-block: var(--space-2) !important; }
.py-4 { padding-block: var(--space-5) !important; }

/* ─── 7.5 TEXT ─── */
.text-light { color: var(--white) !important; }
.text-dark { color: var(--black) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-end { text-align: end !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.fst-italic { font-style: italic !important; }
.small { font-size: var(--font-size-sm) !important; }

/* ─── 7.6 BACKGROUND ─── */
.bg-dark { background-color: var(--black) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }

/* ─── 7.7 SIZING ─── */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* ─── 7.8 BORDER ─── */
.border-0 { border: 0 !important; }
.border-secondary { border-color: var(--accent-secondary-50) !important; }

/* ─── 7.9 GRID ─── */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.col-6 { grid-column: span 6; }
.col-md-3 { grid-column: span 6; }
.col-md-4 { grid-column: span 12; }
.col-md-6 { grid-column: span 12; }

@media (min-width: 768px) {
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-6 { grid-column: span 6; }
}

/* ═══════════════════════════════════════════════════
   8. OVERRIDES / RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .analytics-table-container { overflow-x: auto; }
  .analytics-table { min-width: 700px; }
  .analytics-table th,
  .analytics-table td {
    padding: var(--space-2);
    font-size: var(--font-size-xs);
  }

}