@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");/* NotificationBell - Dropdown notification center */

._container_niy4p_3 {
  position: relative;
}

._bellButton_niy4p_7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

._bellButton_niy4p_7:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

._bellIcon_niy4p_26 {
  width: 20px;
  height: 20px;
}

._badge_niy4p_31 {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-accent);
  color: var(--color-text-inverted);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
}

/* Dropdown panel */
._panel_niy4p_48 {
  position: absolute;
  top: calc(100% + var(--spacing-4));
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._panelHeader_niy4p_64 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-6) var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
}

._panelTitle_niy4p_72 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

._markAllButton_niy4p_78 {
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

._markAllButton_niy4p_78:hover {
  background: rgba(255, 255, 255, 0.06);
}

._panelBody_niy4p_93 {
  overflow-y: auto;
  flex: 1;
}

._emptyState_niy4p_98 {
  padding: var(--spacing-16) var(--spacing-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Notification item */
._item_niy4p_106 {
  padding: var(--spacing-6) var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

._item_niy4p_106:last-child {
  border-bottom: none;
}

._item_niy4p_106:hover {
  background: rgba(255, 255, 255, 0.03);
}

._itemUnread_niy4p_121 {
  background: rgba(var(--color-accent-rgb, 0, 255, 65), 0.04);
}

._itemUnread_niy4p_121 ._itemTitle_niy4p_125 {
  font-weight: var(--font-weight-semibold);
}

._itemHeader_niy4p_129 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

._typeBadge_niy4p_136 {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: 1px var(--spacing-3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
}

._type_feature_niy4p_147 {
  background: rgba(78, 205, 196, 0.15);
  color: #4ecdc4;
}

._type_alert_niy4p_152 {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

._type_maintenance_niy4p_157 {
  background: rgba(255, 159, 67, 0.15);
  color: #ff9f43;
}

._type_tip_niy4p_162 {
  background: rgba(69, 170, 242, 0.15);
  color: #45aaf2;
}

._type_news_niy4p_167 {
  background: rgba(var(--color-accent-rgb, 0, 255, 65), 0.15);
  color: var(--color-accent);
}

._timestamp_niy4p_172 {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

._dismissButton_niy4p_178 {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 0 var(--spacing-2);
  line-height: 1;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

._dismissButton_niy4p_178:hover {
  opacity: 1;
  color: var(--color-text);
}

._itemTitle_niy4p_125 {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--spacing-2);
}

._itemBody_niy4p_201 {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
._segmentedControl_u0r7l_1 {
  display: inline-flex;
  background: var(--color-surface-2, #2a2a2a);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

._segment_u0r7l_1 {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #888);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

._segment_u0r7l_1:hover:not(._active_u0r7l_21) {
  color: var(--color-text-primary, #fff);
  background: var(--color-surface-3, #333);
}

._segment_u0r7l_1._active_u0r7l_21 {
  background: var(--color-primary, #3b82f6);
  color: white;
}
._stackCard_he2hj_1 {
  position: relative;
  width: 280px;
  height: 200px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

._stackCard_he2hj_1._unassigned_he2hj_11 ._layer_he2hj_11 {
  border: 2px dashed var(--color-border, #444);
}

._stackLayers_he2hj_15 {
  position: relative;
  width: 100%;
  height: 100%;
}

._layer_he2hj_11 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: var(--color-surface-2, #2a2a2a);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px solid var(--color-border, #333);
  transform: translate(var(--layer-offset), var(--layer-offset));
  transition: transform 0.2s ease;
}

._stackCard_he2hj_1:hover ._layer_he2hj_11 {
  transform: translate(
    calc(var(--layer-offset) + 2px),
    calc(var(--layer-offset) + 2px)
  );
}

._content_he2hj_43 {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  padding: 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  border-radius: 0 0 6px 6px;
  z-index: 10;
}

._header_he2hj_54 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

._title_he2hj_61 {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

._liveBadge_he2hj_67 {
  padding: 2px 6px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  animation: _pulse_he2hj_1 2s infinite;
}

@keyframes _pulse_he2hj_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

._subtitle_he2hj_82 {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary, #888);
  margin-bottom: 8px;
}

._stats_he2hj_89 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._photoCount_he2hj_95 {
  font-size: 12px;
  color: var(--color-text-secondary, #888);
}

._statusBadge_he2hj_100 {
  padding: 2px 6px;
  background: var(--color-warning, #f59e0b);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
}

._statusBadge_he2hj_100._done_he2hj_109 {
  background: var(--color-success, #22c55e);
}
._breadcrumb_12gvm_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

._backButton_12gvm_8 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: var(--color-surface-2, #2a2a2a);
  color: var(--color-text-secondary, #888);
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

._backButton_12gvm_8:hover {
  background: var(--color-surface-3, #333);
  color: var(--color-text-primary, #fff);
}

._separator_12gvm_27 {
  color: var(--color-text-muted, #666);
}

._current_12gvm_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary, #fff);
}

._count_12gvm_40 {
  font-weight: 400;
  color: var(--color-text-secondary, #888);
}

._liveBadge_12gvm_45 {
  padding: 2px 6px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
}
._overlay_139ll_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

._overlay_139ll_1._visible_139ll_15 {
  opacity: 1;
  visibility: visible;
}

._contentWrapper_139ll_20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-24);
  max-width: 400px;
  text-align: center;
  transform: translateY(var(--spacing-lg));
  opacity: 0;
  transition:
    transform var(--transition-slow),
    opacity var(--transition-slow);
}

._visible_139ll_15 ._contentWrapper_139ll_20 {
  transform: translateY(0);
  opacity: 1;
}

._spinner_139ll_40 {
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: _spin_139ll_40 0.8s linear infinite;
}

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

._message_139ll_55 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

._progressWrapper_139ll_62 {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

._progressTrack_139ll_70 {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

._progressFill_139ll_78 {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  transition: width var(--transition-normal);
}

._progressLabel_139ll_85 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

._cancelButton_139ll_91 {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-colors), border-color var(--transition-normal);
}

._cancelButton_139ll_91:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

._cancelButton_139ll_91:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 480px) {
  ._contentWrapper_139ll_20 {
    padding: var(--spacing-16) var(--spacing-xl);
    gap: var(--spacing-lg);
  }

  ._message_139ll_55 {
    font-size: var(--font-size-md);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ._overlay_139ll_1,
  ._contentWrapper_139ll_20 {
    transition: none;
  }

  ._spinner_139ll_40 {
    animation: none;
    border-top-color: var(--color-accent);
  }
}
/* ==========================================================================
   Caption Builder - Trigger (compact, lives in IptcPanel sidebar)
   ========================================================================== */

._triggerSection_17eee_5 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._triggerHeader_17eee_11 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._eyebrow_17eee_17 {
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 500;
}

._buildBtn_17eee_25 {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 150ms ease;
}

._buildBtn_17eee_25:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

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

._triggerInfo_17eee_46 {
  color: var(--color-text-muted);
  font-size: 11px;
  font-style: italic;
}

._triggerPreview_17eee_52 {
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Backdrop + Drawer (portal to body)
   ========================================================================== */

._backdrop_17eee_65 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-overlay) - 1);
}

._drawer_17eee_72 {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 500px;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--transition-slower);
}

._drawerEntering_17eee_88 {
  transform: translateX(100%);
}

._drawerHeader_17eee_92 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

._drawerTitle_17eee_101 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

._closeBtn_17eee_107 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 150ms ease;
}

._closeBtn_17eee_107:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

._drawerBody_17eee_126 {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._drawerFooter_17eee_135 {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ==========================================================================
   Score Ticker
   ========================================================================== */

._scoreTicker_17eee_147 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

._teamAbbr_17eee_157 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  min-width: 36px;
  text-align: center;
}

._scoreBtn_17eee_165 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
  transition: all 150ms ease;
}

._scoreBtn_17eee_165:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

._scoreNum_17eee_186 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  min-width: 20px;
  text-align: center;
}

._scoreSeparator_17eee_194 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Section Headers (inside drawer)
   ========================================================================== */

._sectionTitle_17eee_203 {
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 6px;
}

/* ==========================================================================
   Player Pool
   ========================================================================== */

._playerPool_17eee_216 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._playerChip_17eee_222 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  cursor: pointer;
  transition: all 150ms ease;
}

._playerChip_17eee_222:hover {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

._playerChipInChain_17eee_241 {
  opacity: 0.5;
}

._teamDot_17eee_245 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._chipTeam_17eee_252 {
  color: var(--color-text-muted);
  font-size: 10px;
}

._chipCheck_17eee_257 {
  width: 12px;
  height: 12px;
  color: var(--color-accent);
}

._emptyPool_17eee_263 {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
}

/* ==========================================================================
   Chain Builder
   ========================================================================== */

._chain_17eee_273 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

._emptyChain_17eee_279 {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  text-align: center;
  padding: 12px;
}

/* Chain Node (person card) */
._chainNode_17eee_288 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}

._nodeColorBar_17eee_299 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

._nodeInfo_17eee_308 {
  flex: 1;
  padding-left: 6px;
}

._nodeName_17eee_313 {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

._nodeTeam_17eee_319 {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: 6px;
}

._actionBtn_17eee_325 {
  padding: 3px 8px;
  background: rgba(var(--color-accent-rgb), 0.1);
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 11px;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

._actionBtn_17eee_325:hover {
  background: rgba(var(--color-accent-rgb), 0.18);
}

._actionBtnEmpty_17eee_341 {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border);
}

._removeBtn_17eee_347 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm);
  transition: color 150ms ease;
}

._removeBtn_17eee_347:hover {
  color: var(--color-danger);
}

._removeBtnIcon_17eee_366 {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Action Picker (inline dropdown below chain node)
   ========================================================================== */

._actionPicker_17eee_375 {
  margin: 4px 0 4px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel-strong);
  overflow: hidden;
}

._actionTabs_17eee_383 {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

._actionTab_17eee_383 {
  flex: 1;
  padding: 6px 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 150ms ease;
}

._actionTab_17eee_383:hover {
  color: var(--color-text);
}

._actionTabActive_17eee_406 {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

._actionGrid_17eee_411 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}

._actionOption_17eee_418 {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 11px;
  cursor: pointer;
  transition: all 150ms ease;
}

._actionOption_17eee_418:hover {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

._actionOptionSelected_17eee_434 {
  background: rgba(var(--color-accent-rgb), 0.15);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ==========================================================================
   Connector Editor (between person nodes)
   ========================================================================== */

._connectorRow_17eee_444 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  position: relative;
}

._connectorLine_17eee_452 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-border);
  z-index: 0;
}

._connectorInputWrap_17eee_462 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

._connectorInput_17eee_462 {
  min-width: 80px;
  max-width: 260px;
  padding: 3px 8px;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-info);
  font-size: 11px;
  font-style: italic;
  font-family: inherit;
  text-align: center;
  transition: border-color 150ms ease;
}

._connectorInput_17eee_462:focus {
  outline: none;
  border-color: var(--color-info);
}

._connectorInput_17eee_462::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

._connectorRemove_17eee_495 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 150ms ease;
}

._connectorRemove_17eee_495:hover {
  color: var(--color-danger);
}

._connectorRemoveIcon_17eee_513 {
  width: 12px;
  height: 12px;
}

/* Connector suggestions dropdown */
._suggestions_17eee_519 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  max-width: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
}

._suggestionBtn_17eee_537 {
  padding: 3px 8px;
  background: rgba(var(--color-info-rgb), 0.08);
  border: 1px solid rgba(var(--color-info-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-info);
  font-size: 10px;
  font-style: italic;
  cursor: pointer;
  transition: all 150ms ease;
}

._suggestionBtn_17eee_537:hover {
  background: rgba(var(--color-info-rgb), 0.18);
  border-color: var(--color-info);
}

/* ==========================================================================
   Caption Preview
   ========================================================================== */

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

._grammarWarning_17eee_564 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(var(--color-warning-rgb), 0.08);
  border: 1px solid rgba(var(--color-warning-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: 11px;
}

._previewText_17eee_576 {
  padding: 10px 12px;
  background: rgba(16, 31, 37, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  min-height: 40px;
}

._previewEmpty_17eee_588 {
  color: var(--color-text-muted);
  font-style: italic;
}

._previewKeywords_17eee_593 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

._kwLabel_17eee_600 {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._kwPill_17eee_607 {
  padding: 2px 6px;
  background: rgba(var(--color-accent-rgb), 0.12);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--color-accent);
}

/* ==========================================================================
   Saved Chains
   ========================================================================== */

._savedChains_17eee_619 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._savedChain_17eee_619 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

._savedText_17eee_635 {
  flex: 1;
  font-size: 11px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._savedRemove_17eee_644 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 150ms ease;
}

._savedRemove_17eee_644:hover {
  color: var(--color-danger);
}

._savedRemoveIcon_17eee_663 {
  width: 12px;
  height: 12px;
}

._combinedLabel_17eee_668 {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

._combinedText_17eee_676 {
  font-size: 11px;
  color: var(--color-text);
  line-height: 1.4;
  padding: 6px 10px;
  background: rgba(16, 31, 37, 0.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Footer Buttons
   ========================================================================== */

._footerBtn_17eee_690 {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 150ms ease;
}

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

._saveChainBtn_17eee_705 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

._saveChainBtn_17eee_705:hover:not(:disabled) {
  border-color: var(--color-text-muted);
}

._applyBtn_17eee_715 {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-text-inverted);
}

._applyBtn_17eee_715:hover:not(:disabled) {
  background: var(--color-accent-strong);
}
._panel_1iapm_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

._section_1iapm_8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._sectionHeader_1iapm_14 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._eyebrow_1iapm_20 {
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 500;
}

._badge_1iapm_28 {
  font-size: 10px;
  color: var(--warning);
  font-weight: 500;
}

._textarea_1iapm_34 {
  width: 100%;
  min-height: 120px;
  padding: 8px 10px;
  background: rgba(16, 31, 37, 0.8);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 150ms ease;
}

._textarea_1iapm_34:focus {
  outline: none;
  border-color: var(--color-accent);
}

._textarea_1iapm_34:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._textareaOverridden_1iapm_59 {
  border-left: 2px solid var(--warning);
}

._resetBtn_1iapm_63 {
  align-self: flex-start;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 150ms ease;
}

._resetBtn_1iapm_63:hover {
  border-color: var(--warning);
  color: var(--warning);
}

._separator_1iapm_80 {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

._pills_1iapm_86 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

._pill_1iapm_86 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text);
}

._pillManual_1iapm_103 {
  background: rgba(102, 183, 255, 0.1);
  border: 1px dashed rgba(102, 183, 255, 0.4);
}

._pillRemove_1iapm_108 {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 150ms ease;
}

._pillRemove_1iapm_108:hover {
  color: var(--error, #f87171);
}

._keywordInput_1iapm_123 {
  width: 100%;
  padding: 5px 8px;
  background: rgba(16, 31, 37, 0.8);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  transition: border-color 150ms ease;
}

._keywordInput_1iapm_123:focus {
  outline: none;
  border-color: var(--color-accent);
}

._keywordInput_1iapm_123::placeholder {
  color: var(--muted);
}

._emptyText_1iapm_144 {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

._saveStatus_1iapm_150 {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
}
._panel_lc4l5_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: rgba(10, 19, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

._stickyHeader_lc4l5_13 {
  flex-shrink: 0;
  margin-bottom: var(--spacing-md);
}

._headerRow_lc4l5_18 {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

._sortSelect_lc4l5_24 {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

._refreshButton_lc4l5_36 {
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

._refreshButton_lc4l5_36:hover {
  border-color: var(--color-text-muted);
}

._badge_lc4l5_52 {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-accent);
  color: var(--color-text-inverted);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}

._toolbar_lc4l5_66 {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

._searchInput_lc4l5_72 {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

._searchInput_lc4l5_72::placeholder {
  color: var(--color-text-muted);
}

._clearButton_lc4l5_86 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

._clearButton_lc4l5_86:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

._filterGroup_lc4l5_106 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

._chip_lc4l5_112 {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: var(--transition-colors);
}

._chip_lc4l5_112:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

._chipActive_lc4l5_128 {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

._moreSelect_lc4l5_134 {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

._loadingLine_lc4l5_144 {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

._errorText_lc4l5_151 {
  padding: var(--spacing-md);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

._list_lc4l5_157 {
  flex: 1;
  overflow-y: auto;
  margin: 0 -14px -14px -14px;
  padding: 0 14px 14px 14px;
}

._listCard_lc4l5_164 {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-colors);
  margin-bottom: var(--spacing-xs);
}

._listCard_lc4l5_164:hover {
  background: rgba(255, 255, 255, 0.03);
}

._listCardActive_lc4l5_178 {
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent);
}

._thumb_lc4l5_183 {
  position: relative;
  width: 64px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-panel-strong);
  flex-shrink: 0;
}

._thumb_lc4l5_183 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._thumbFallback_lc4l5_199 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

._statusDot_lc4l5_209 {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

._meta_lc4l5_218 {
  flex: 1;
  min-width: 0;
}

._title_lc4l5_223 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._sub_lc4l5_232 {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

._pill_lc4l5_238 {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 10px;
  text-transform: capitalize;
}

._emptyCard_lc4l5_247 {
  text-align: center;
  padding: var(--spacing-xl);
}

._emptyFallback_lc4l5_252 {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

._emptyMeta_lc4l5_257 {
  color: var(--color-text-muted);
}

._emptyName_lc4l5_261 {
  font-weight: var(--font-weight-medium);
}

._emptySub_lc4l5_265 {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

/* Export in progress indicator */
._exporting_lc4l5_271 ._thumb_lc4l5_183 img {
  opacity: 0.7;
}

._exportingOverlay_lc4l5_275 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

._exportingSpinner_lc4l5_288 {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #d4a5ff;
  border-radius: 50%;
  animation: _spin_lc4l5_1 1s linear infinite;
}

@keyframes _spin_lc4l5_1 {
  to {
    transform: rotate(360deg);
  }
}
._backdrop_2zrcx_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

._card_2zrcx_12 {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  max-width: 400px;
  width: 90%;
}

._title_2zrcx_21 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-md) 0;
}

._message_2zrcx_28 {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-xl) 0;
  line-height: var(--line-height-relaxed);
}

._actions_2zrcx_34 {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

._cancelButton_2zrcx_40 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-colors);
}

._cancelButton_2zrcx_40:hover {
  border-color: var(--color-text-muted);
}

._confirmButton_2zrcx_55 {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  border: 1px solid var(--color-accent);
  color: var(--color-text-inverted);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-transform), var(--transition-shadow);
}

._confirmButton_2zrcx_55:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}
._backdrop_1gy69_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

._card_1gy69_12 {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 90%;
}

._header_1gy69_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

._title_1gy69_28 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

._closeButton_1gy69_35 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

._closeButton_1gy69_35:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

._body_1gy69_54 {
  padding: var(--spacing-lg);
}

._description_1gy69_58 {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-md);
}

._field_1gy69_64 {
  margin-bottom: var(--spacing-md);
}

._field_1gy69_64:last-child {
  margin-bottom: 0;
}

._label_1gy69_72 {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

._select_1gy69_79,
._textarea_1gy69_80 {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-md);
}

._textarea_1gy69_80 {
  resize: vertical;
  min-height: 80px;
}

._select_1gy69_79:focus,
._textarea_1gy69_80:focus {
  outline: none;
  border-color: var(--color-accent);
}

._footer_1gy69_102 {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

._cancelButton_1gy69_110 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-colors);
}

._cancelButton_1gy69_110:hover {
  border-color: var(--color-text-muted);
}

._sendButton_1gy69_125 {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  border: 1px solid var(--color-accent);
  color: var(--color-text-inverted);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-transform), var(--transition-shadow);
}

._sendButton_1gy69_125:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

._sendButton_1gy69_125:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._card_46vsh_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  transition: var(--transition-transform), var(--transition-shadow);
}

._clickable_46vsh_12 {
  cursor: pointer;
}

._clickable_46vsh_12:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

._clickable_46vsh_12:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

._selected_46vsh_26 {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

/* Compact variant (grid view) */
._compact_46vsh_32 {
  width: 48px;
  height: 48px;
}

._compact_46vsh_32 ._imageContainer_46vsh_37 {
  width: 100%;
  height: 100%;
}

._compact_46vsh_32 ._info_46vsh_42 {
  position: absolute;
  bottom: 2px;
  right: 2px;
}

._compact_46vsh_32 ._score_46vsh_48 {
  font-size: 10px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Detailed variant (modal view) */
._detailed_46vsh_58 {
  flex-direction: row;
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
}

._detailed_46vsh_58 ._imageContainer_46vsh_37 {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

._detailed_46vsh_58 ._info_46vsh_42 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

._detailed_46vsh_58 ._score_46vsh_48 {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

._detailed_46vsh_58 ._name_46vsh_84 {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shared styles */
._imageContainer_46vsh_37 {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-panel-strong);
}

._image_46vsh_37 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._fallback_46vsh_106 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-panel-strong);
}
._backdrop_15i36_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

._card_15i36_12 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  min-width: 400px;
  max-width: 500px;
  box-shadow: var(--shadow-xl);
}

._card_15i36_12._matrixTheme_15i36_24 {
  border-color: var(--color-accent);
  box-shadow: 0 0 30px rgba(104, 255, 154, 0.15);
}

._header_15i36_29 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  cursor: move;
}

._header_15i36_29 h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

._icon_15i36_45 {
  width: 20px;
  height: 20px;
}

._closeBtn_15i36_50 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

._closeBtn_15i36_50:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

._body_15i36_69 {
  padding: var(--spacing-lg);
}

._formGrid_15i36_73 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

._formField_15i36_79 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

._formField_15i36_79:first-child {
  grid-column: span 2;
}

._formField_15i36_79:nth-child(2),
._formField_15i36_79:nth-child(3) {
  grid-column: span 1;
}

._formFieldHalf_15i36_94 {
  grid-column: span 1;
}

._formField_15i36_79 label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

._formField_15i36_79 input {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-md);
}

._formField_15i36_79 input:focus {
  outline: none;
  border-color: var(--color-accent);
}

._formField_15i36_79 select {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-md);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

._formField_15i36_79 select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Team search autocomplete */
._teamSearchContainer_15i36_138 {
  position: relative;
}

._teamInputWrapper_15i36_142 {
  position: relative;
  display: flex;
  align-items: center;
}

._teamSearchInput_15i36_148 {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-right: 32px;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-md);
}

._teamSearchInput_15i36_148:focus {
  outline: none;
  border-color: var(--color-accent);
}

._clearTeamBtn_15i36_164 {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-colors);
}

._clearTeamBtn_15i36_164:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

._clearIcon_15i36_186 {
  width: 14px;
  height: 14px;
}

._teamSuggestionsList_15i36_191 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 4px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
}

._teamSuggestionItem_15i36_206 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-colors);
}

._teamSuggestionItem_15i36_206:hover {
  background: rgba(104, 255, 154, 0.1);
}

._teamSuggestionItem_15i36_206:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

._teamName_15i36_229 {
  flex: 1;
}

._teamType_15i36_233 {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

._suggestionsContainer_15i36_239 {
  margin-top: var(--spacing-lg);
}

._suggestionsHeader_15i36_243 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

._suggestionsLabel_15i36_250 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

._suggestionsCount_15i36_255 {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  background: rgba(104, 255, 154, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

._suggestionsList_15i36_263 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}

._suggestionItem_15i36_271 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-colors);
  text-align: left;
}

._suggestionItem_15i36_271:hover {
  background: rgba(104, 255, 154, 0.1);
  border-color: var(--color-accent);
}

._suggestionName_15i36_291 {
  flex: 1;
}

._suggestionJersey_15i36_295 {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

._neighborsGrid_15i36_300 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

._emptyNeighbors_15i36_306 {
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

._footer_15i36_316 {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

._cancelBtn_15i36_324 {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-colors);
}

._cancelBtn_15i36_324:hover {
  border-color: var(--color-text-muted);
}

._saveBtn_15i36_339 {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverted);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-transform), var(--transition-shadow);
}

._saveBtn_15i36_339:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

._saveBtn_15i36_339:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._controls_1er5a_1 {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-sm);
}

._group_1er5a_9 {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

._label_1er5a_15 {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

._value_1er5a_20 {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  min-width: 45px;
  text-align: center;
}

._slider_1er5a_27 {
  width: 240px;
  accent-color: var(--color-accent);
}

._divider_1er5a_32 {
  margin: 0 var(--spacing-md);
  color: var(--color-text-muted);
}

._resetBtn_1er5a_37 {
  padding: 2px var(--spacing-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: var(--transition-colors);
}

._resetBtn_1er5a_37:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

._aspectBtn_1er5a_53 {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  min-width: 36px;
  text-align: center;
  transition: var(--transition-colors);
}

._aspectBtn_1er5a_53:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

._altBtn_1er5a_72 {
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  text-transform: capitalize;
  transition: var(--transition-colors);
}

._altBtn_1er5a_72:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Detected rotation display */
._detectedValue_1er5a_90 {
  font-size: var(--font-size-sm);
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

._detectedValue_1er5a_90._high_1er5a_97 {
  color: var(--color-success, #4ade80);
}

._detectedValue_1er5a_90._medium_1er5a_101 {
  color: var(--color-warning, #fbbf24);
}

._detectedValue_1er5a_90._low_1er5a_105 {
  color: var(--color-error, #f87171);
}

._confidenceBadge_1er5a_109 {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

._confidenceBadge_1er5a_109._high_1er5a_97 {
  background: rgba(74, 222, 128, 0.2);
  color: var(--color-success, #4ade80);
}

._confidenceBadge_1er5a_109._medium_1er5a_101 {
  background: rgba(251, 191, 36, 0.2);
  color: var(--color-warning, #fbbf24);
}

._confidenceBadge_1er5a_109._low_1er5a_105 {
  background: rgba(248, 113, 113, 0.2);
  color: var(--color-error, #f87171);
}

._detectBtn_1er5a_131 {
  padding: 2px 6px;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: var(--transition-colors);
}

._detectBtn_1er5a_131:hover {
  background: var(--color-accent-hover, var(--color-accent));
  filter: brightness(1.1);
}
._cropContainer_ws6hh_1 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* Override inherited pointer-events:none from .overlay ancestor */
  pointer-events: auto;
}

/* Dark surround outside the crop frame */
._darkSurround_ws6hh_13 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Wrapper: positions handles/rotation zones outside the clipped frame */
._frameWrapper_ws6hh_21 {
  position: relative;
  z-index: 1;
  overflow: visible;
}

._frame_ws6hh_21 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid #66ffb7;
  box-shadow: 0 0 0 1px rgba(102, 255, 183, 0.35);
  cursor: grab;
  /* The frame clips the image to only show what's inside */
}

._frame_ws6hh_21:active {
  cursor: grabbing;
}

._frameImage_ws6hh_42 {
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform is set inline: translate + scale + rotate */
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Grid overlay (reused from CropOverlay) */
._grid_ws6hh_54 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

._line_ws6hh_61 {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
}

._line_ws6hh_61._h_ws6hh_66 {
  left: 0;
  right: 0;
  height: 1px;
}

._line_ws6hh_61._v_ws6hh_72 {
  top: 0;
  bottom: 0;
  width: 1px;
}

._line_ws6hh_61._thirds_ws6hh_78 {
  background: rgba(255, 255, 255, 0.3);
}

._line_ws6hh_61._center_ws6hh_82 {
  background: rgba(255, 255, 255, 0.4);
}

/* Floating zoom controls on crop frame */
._zoomControls_ws6hh_87 {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  gap: 4px;
}

._zoomBtn_ws6hh_96 {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}

._zoomBtn_ws6hh_96:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Resize handles - green squares at corners and edge midpoints */
._handle_ws6hh_119 {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #66ffb7;
  border: 1px solid rgba(0, 0, 0, 0.4);
  z-index: 4;
  cursor: pointer;
}

/* Corner handles */
._handle_nw_ws6hh_130 { top: -7px; left: -7px; cursor: nw-resize; }
._handle_ne_ws6hh_131 { top: -7px; right: -7px; cursor: ne-resize; }
._handle_se_ws6hh_132 { bottom: -7px; right: -7px; cursor: se-resize; }
._handle_sw_ws6hh_133 { bottom: -7px; left: -7px; cursor: sw-resize; }

/* Edge midpoint handles */
._handle_n_ws6hh_130 { top: -7px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
._handle_s_ws6hh_132 { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
._handle_e_ws6hh_138 { top: 50%; right: -7px; transform: translateY(-50%); cursor: e-resize; }
._handle_w_ws6hh_139 { top: 50%; left: -7px; transform: translateY(-50%); cursor: w-resize; }

/* Inner rotation zones - inside the frame corners for tilt drag */
._innerRotZone_ws6hh_142 {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 6;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none'%3E%3Cpath d='M11 4A7 7 0 1 1 4 11' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M2 9L4 11L6 9' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 4A7 7 0 1 1 4 11' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 9L4 11L6 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, pointer;
}

._innerRot_nw_ws6hh_150 { top: 8px; left: 8px; }
._innerRot_ne_ws6hh_151 { top: 8px; right: 8px; }
._innerRot_se_ws6hh_152 { bottom: 8px; right: 8px; }
._innerRot_sw_ws6hh_153 { bottom: 8px; left: 8px; }

/* Rotation zones - invisible areas outside handles for rotation drag */
._rotationZone_ws6hh_156 {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 3;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none'%3E%3Cpath d='M11 4A7 7 0 1 1 4 11' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M2 9L4 11L6 9' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 4A7 7 0 1 1 4 11' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 9L4 11L6 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, pointer;
}

/* Rotation zones positioned outside the frame corners/edges */
._rot_nw_ws6hh_165 { top: -32px; left: -32px; }
._rot_ne_ws6hh_166 { top: -32px; right: -32px; }
._rot_se_ws6hh_167 { bottom: -32px; right: -32px; }
._rot_sw_ws6hh_168 { bottom: -32px; left: -32px; }
._rot_n_ws6hh_165 { top: -32px; left: 50%; transform: translateX(-50%); }
._rot_s_ws6hh_167 { bottom: -32px; left: 50%; transform: translateX(-50%); }
._rot_e_ws6hh_171 { top: 50%; right: -32px; transform: translateY(-50%); }
._rot_w_ws6hh_172 { top: 50%; left: -32px; transform: translateY(-50%); }
._bar_ed3kh_1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(19, 30, 35, 0.6);
  justify-content: center;
  margin: 0 auto;
}

._toggleBtn_ed3kh_14 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

._toggleBtn_ed3kh_14:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

._addBtnInline_ed3kh_34 {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  opacity: 0.4;
  transition: var(--transition-colors);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

._addBtnInline_ed3kh_34:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  opacity: 1;
}

._chipGroup_ed3kh_58 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

._divider_ed3kh_64 {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

._names_ed3kh_71 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

._empty_ed3kh_78 {
  color: var(--muted);
  font-size: 11px;
  padding: 0 4px;
}

._chip_ed3kh_58 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

._chip_ed3kh_58:hover,
._chipHovered_ed3kh_95 {
  background: rgba(102, 255, 183, 0.3);
  box-shadow: 0 0 6px rgba(102, 255, 183, 0.4);
}

._chip_ed3kh_58._manual_ed3kh_100 {
  background: rgba(102, 183, 255, 0.1);
  border: 1px dashed rgba(102, 183, 255, 0.4);
}

._chip_ed3kh_58._softDeleted_ed3kh_105 {
  background: rgba(136, 136, 136, 0.1);
  border: 1px dashed rgba(136, 136, 136, 0.3);
  opacity: 0.6;
  cursor: pointer;
}

._chip_ed3kh_58._softDeleted_ed3kh_105:hover {
  opacity: 0.85;
  background: rgba(136, 136, 136, 0.2);
}

._chipName_ed3kh_117 {
  font-size: 11px;
  padding: 0 2px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  min-width: unset;
}

._chipName_ed3kh_117:hover {
  color: var(--accent);
}

._chip_ed3kh_58._manual_ed3kh_100 ._chipName_ed3kh_117 {
  color: #66b7ff;
}

._chipNameDeleted_ed3kh_135 {
  font-size: 11px;
  padding: 0 2px;
  color: var(--muted);
  text-decoration: line-through;
}

._manualIcon_ed3kh_142 {
  margin-right: 4px;
  opacity: 0.6;
}

._chipRemove_ed3kh_147 {
  font-size: 11px;
  padding: 0 2px;
  min-width: unset;
  opacity: 0.6;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

._chipRemove_ed3kh_147:hover {
  opacity: 1;
  color: var(--danger);
}

._chipRestore_ed3kh_163 {
  padding: 4px 6px;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
}
._grid_1wojn_1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

._empty_1wojn_8 {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  width: 100%;
  padding: var(--spacing-md);
}

._face_1wojn_16 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: var(--transition-colors);
}

._face_1wojn_16:hover {
  border-color: rgba(102, 255, 183, 0.5);
  background: rgba(102, 255, 183, 0.05);
}

._face_1wojn_16._selected_1wojn_33 {
  border-color: var(--color-accent);
  background: rgba(102, 255, 183, 0.1);
}

._face_1wojn_16._hovered_1wojn_38 {
  border-color: rgba(102, 255, 183, 0.5);
  background: rgba(102, 255, 183, 0.05);
}

._thumb_1wojn_43 {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}

._thumbImg_1wojn_49 {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

._thumbFallback_1wojn_56 {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-panel-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

._label_1wojn_68 {
  text-align: center;
  margin-top: 2px;
  font-size: 11px;
}

._indexLabeled_1wojn_74 {
  color: var(--color-accent);
}

._indexUnlabeled_1wojn_78 {
  color: var(--color-danger);
}

._name_1wojn_82 {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60px;
}
._spinner_h98hk_1 {
  border-radius: 50%;
  border-style: solid;
  border-color: var(--color-accent);
  border-top-color: transparent;
  animation: _spin_h98hk_1 0.8s linear infinite;
}

._sm_h98hk_9 {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

._md_h98hk_15 {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

._lg_h98hk_21 {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

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

._srOnly_h98hk_33 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Matches Edit page's assign-bar styling */

._container_1avzl_3 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

._chip_1avzl_10 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(102, 255, 183, 0.15);
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

._chip_1avzl_10:hover,
._chipHovered_1avzl_22 {
  background: rgba(102, 255, 183, 0.3);
  box-shadow: 0 0 6px rgba(102, 255, 183, 0.4);
}

._faceThumbWrap_1avzl_27 {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(102, 255, 183, 0.3);
}

._name_1avzl_38 {
  font-size: 11px;
  padding: 0 2px;
  color: var(--text);
}

._nameBtn_1avzl_44 {
  background: transparent;
  border: none;
  font-size: 11px;
  padding: 0 2px;
  color: var(--text);
  cursor: pointer;
  min-width: unset;
}

._nameBtn_1avzl_44:hover {
  color: var(--accent);
}

._removeBtn_1avzl_58 {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  min-width: unset;
  opacity: 0.6;
}

._removeBtn_1avzl_58:hover {
  opacity: 1;
  color: var(--danger, #ff6b6b);
}

._empty_1avzl_74 {
  color: var(--muted);
  font-size: 11px;
  padding: 0 4px;
}
._overlay_44abo_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  animation: _fadeIn_44abo_1 150ms ease-out;
}

@keyframes _fadeIn_44abo_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._modal_44abo_23 {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: _slideUp_44abo_1 200ms ease-out;
}

@keyframes _slideUp_44abo_1 {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sizes */
._sm_44abo_47 {
  width: 100%;
  max-width: 360px;
}

._md_44abo_52 {
  width: 100%;
  max-width: 480px;
}

._lg_44abo_57 {
  width: 100%;
  max-width: 640px;
}

._xl_44abo_62 {
  width: 100%;
  max-width: 800px;
}

._full_44abo_67 {
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  max-width: none;
  max-height: none;
}

/* Header */
._header_44abo_75 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

._title_44abo_85 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

._closeButton_44abo_92 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-colors);
}

._closeButton_44abo_92:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

/* Body */
._body_44abo_112 {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
}

/* Footer */
._footer_44abo_119 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
._button_naz35_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-transform), var(--transition-shadow), var(--transition-opacity);
  white-space: nowrap;
  user-select: none;
}

._button_naz35_1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

._button_naz35_1:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Sizes */
._sm_naz35_26 {
  height: 28px;
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
}

._md_naz35_32 {
  height: 36px;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-md);
}

._lg_naz35_38 {
  height: 44px;
  padding: 0 var(--spacing-lg);
  font-size: var(--font-size-lg);
}

/* Variants */
._primary_naz35_45 {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  border: 1px solid var(--color-accent);
  color: var(--color-text-inverted);
}

._primary_naz35_45:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

._ghost_naz35_56 {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

._ghost_naz35_56:hover:not(:disabled) {
  border-color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

._danger_naz35_67 {
  background: linear-gradient(135deg, var(--color-danger), #e05555);
  border: 1px solid var(--color-danger);
  color: white;
}

._danger_naz35_67:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-danger);
}

._warning_naz35_78 {
  background: linear-gradient(135deg, var(--color-warning), #e08555);
  border: 1px solid var(--color-warning);
  color: var(--color-text-inverted);
}

._warning_naz35_78:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-warning);
}

/* Full width */
._fullWidth_naz35_90 {
  width: 100%;
}

/* Loading state */
._loading_naz35_95 {
  position: relative;
}

._spinner_naz35_99 {
  position: absolute;
}

/* Icon positioning */
._icon_naz35_104,
._iconRight_naz35_105 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._icon_naz35_104 svg,
._iconRight_naz35_105 svg {
  width: 1em;
  height: 1em;
}

._label_naz35_117 {
  display: inline-flex;
  align-items: center;
}
.export-status-panel {
  margin-top: 8px;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  background: var(--card-bg, #1a1a1a);
  font-size: 12px;
}

.export-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}

.export-summary:hover {
  background: var(--hover-bg, #252525);
}

.export-summary-icon {
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

.export-summary-text {
  flex: 1;
}

.expand-icon {
  color: var(--muted-color, #666);
  font-family: monospace;
}

.retry-all-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  background: var(--btn-bg, #333);
  color: var(--text-color, #fff);
  cursor: pointer;
}

.retry-all-btn:hover:not(:disabled) {
  background: var(--btn-hover-bg, #444);
}

.retry-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.export-details {
  border-top: 1px solid var(--border-color, #333);
  padding: 8px 12px;
}

.export-loading,
.export-empty {
  color: var(--muted-color, #666);
  font-style: italic;
}

.export-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.export-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color, #222);
}

.export-item:last-child {
  border-bottom: none;
}

.export-target-name {
  flex: 1;
  font-weight: 500;
}

.export-status-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

.export-error {
  color: var(--error-color, #ff6b6b);
  font-size: 11px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-time {
  color: var(--muted-color, #666);
  font-size: 11px;
}

.retry-btn {
  padding: 2px 6px;
  font-size: 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  background: var(--btn-bg, #333);
  color: var(--text-color, #fff);
  cursor: pointer;
}

.retry-btn:hover:not(:disabled) {
  background: var(--btn-hover-bg, #444);
}

.retry-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status-specific colors */
.status-pending .export-summary-icon,
.status-pending .export-status-badge {
  color: var(--warning-color, #f5a623);
}

.status-progress .export-summary-icon,
.status-progress .export-status-badge {
  color: var(--info-color, #4a9eff);
}

.status-success .export-summary-icon,
.status-success .export-status-badge {
  color: var(--success-color, #4caf50);
}

.status-failed .export-summary-icon,
.status-failed .export-status-badge {
  color: var(--error-color, #ff6b6b);
}

.status-pending .export-status-badge {
  background: rgba(245, 166, 35, 0.2);
}

.status-progress .export-status-badge {
  background: rgba(74, 158, 255, 0.2);
}

.status-success .export-status-badge {
  background: rgba(76, 175, 80, 0.2);
}

.status-failed .export-status-badge {
  background: rgba(255, 107, 107, 0.2);
}

/* Export item layout */
.export-item {
  flex-direction: column;
  align-items: stretch;
}

.export-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* History toggle button */
.history-toggle-btn {
  padding: 2px 6px;
  font-size: 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  background: transparent;
  color: var(--muted-color, #888);
  cursor: pointer;
}

.history-toggle-btn:hover {
  background: var(--hover-bg, #252525);
  color: var(--text-color, #fff);
}

/* History list */
.export-history-list {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--border-color, #333);
}

.export-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  color: var(--muted-color, #888);
}


.history-status {
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 9px;
  text-transform: uppercase;
}

.history-time {
  flex: 1;
}

.history-error {
  color: var(--error-color, #ff6b6b);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* History status colors */
.export-history-item.status-success .history-status {
  color: var(--success-color, #4caf50);
  background: rgba(76, 175, 80, 0.15);
}

.export-history-item.status-failed .history-status {
  color: var(--error-color, #ff6b6b);
  background: rgba(255, 107, 107, 0.15);
}

.export-history-item.status-pending .history-status {
  color: var(--warning-color, #f5a623);
  background: rgba(245, 166, 35, 0.15);
}

/* Crop version badge */
.export-version-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: lowercase;
  font-weight: 500;
  background: rgba(138, 180, 248, 0.2);
  color: var(--info-color, #8ab4f8);
  border: 1px solid rgba(138, 180, 248, 0.3);
}

/* Remote path display */
.export-remote-path {
  font-size: 10px;
  color: var(--muted-color, #888);
  font-family: monospace;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Initiated by text */
.export-initiated-by {
  font-size: 10px;
  color: var(--muted-color, #666);
  font-style: italic;
  padding: 2px 0;
}

/* History item number */
.history-number {
  font-weight: 600;
  min-width: 24px;
  color: var(--muted-color, #888);
}

/* History remote path */
.history-path {
  font-family: monospace;
  font-size: 10px;
  color: var(--muted-color, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
/* Calendar component styles using design tokens */

._calendar_1sblj_3 {
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-width: 240px;
}

._calendar_1sblj_3._expanded_1sblj_11 {
  min-width: 400px;
  padding: 16px;
}

/* Header */
._header_1sblj_17 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

._title_1sblj_24 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._monthYear_1sblj_32 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

._expanded_1sblj_11 ._monthYear_1sblj_32 {
  font-size: 16px;
}

._todayBtn_1sblj_42 {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

._todayBtn_1sblj_42:hover {
  border-color: var(--accent);
  color: var(--accent);
}

._navBtn_1sblj_58,
._expandBtn_1sblj_59 {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

._navBtn_1sblj_58:hover,
._expandBtn_1sblj_59:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(102, 255, 183, 0.05);
}

/* Weekday headers */
._weekdays_1sblj_81 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

._weekday_1sblj_81 {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 0;
}

/* Calendar grid */
._grid_1sblj_97 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Day cells */
._day_1sblj_104 {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 32px;
}

._expanded_1sblj_11 ._day_1sblj_104 {
  min-height: 48px;
  font-size: 14px;
}

._day_1sblj_104:hover {
  background: rgba(102, 255, 183, 0.1);
}

._dayEmpty_1sblj_128 {
  aspect-ratio: 1;
}

._dayOtherMonth_1sblj_132 {
  color: var(--muted);
  opacity: 0.5;
}

._dayToday_1sblj_137 {
  background: rgba(102, 255, 183, 0.15);
  border: 1px solid var(--accent);
}

._dayToday_1sblj_137 ._dayNumber_1sblj_142 {
  font-weight: 600;
  color: var(--accent);
}

._daySelected_1sblj_147 {
  background: var(--accent);
  color: var(--bg);
}

._daySelected_1sblj_147 ._dayNumber_1sblj_142 {
  color: var(--bg);
  font-weight: 600;
}

._daySelected_1sblj_147:hover {
  background: var(--accent);
}

._dayHasMatches_1sblj_161 ._dayNumber_1sblj_142 {
  font-weight: 600;
}

._dayLive_1sblj_165 {
  animation: _pulse_1sblj_1 2s ease-in-out infinite;
}

@keyframes _pulse_1sblj_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

._dayNumber_1sblj_142 {
  z-index: 1;
}

/* Match dots */
._dayDots_1sblj_179 {
  position: absolute;
  bottom: 2px;
  display: flex;
  gap: 2px;
}

._expanded_1sblj_11 ._dayDots_1sblj_179 {
  bottom: 4px;
}

._dayDot_1sblj_179 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

._expanded_1sblj_11 ._dayDot_1sblj_179 {
  width: 5px;
  height: 5px;
}

/* Tooltip */
._tooltip_1sblj_202 {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  min-width: 180px;
  max-width: 260px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  margin-bottom: 4px;
}

._tooltip_1sblj_202::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border);
}

._tooltipHeader_1sblj_228 {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

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

._tooltipMatch_1sblj_237 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 11px;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

._tooltipMatch_1sblj_237:hover {
  background: rgba(102, 255, 183, 0.1);
}

._tooltipDot_1sblj_262 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

._tooltipTime_1sblj_269 {
  color: var(--muted);
  flex-shrink: 0;
  width: 40px;
}

._tooltipName_1sblj_275 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._tooltipMore_1sblj_282 {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding-top: 4px;
}
/* MatchCard styles - similar to PhotoCard from Overview */

._card_1qhcx_3 {
  position: relative;
  display: flex;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
}

._card_1qhcx_3:hover {
  border-color: var(--border-hover, #3a4a4a);
  background: rgba(19, 30, 35, 0.8);
}

._card_1qhcx_3:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

._card_1qhcx_3._selected_1qhcx_24 {
  border-color: var(--accent);
  background: rgba(102, 255, 183, 0.05);
}

._card_1qhcx_3._live_1qhcx_29 {
  border-color: #ff6b6b;
  animation: _livePulse_1qhcx_1 2s ease-in-out infinite;
}

@keyframes _livePulse_1qhcx_1 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.2); }
  50% { box-shadow: 0 0 8px 2px rgba(255, 107, 107, 0.3); }
}

._card_1qhcx_3._compact_1qhcx_39 {
  padding: 8px 12px;
}

/* Color indicator bar */
._colorBar_1qhcx_44 {
  width: 4px;
  flex-shrink: 0;
}

/* Content area */
._content_1qhcx_50 {
  flex: 1;
  padding: 12px;
  min-width: 0;
}

._compact_1qhcx_39 ._content_1qhcx_50 {
  padding: 8px 10px;
}

/* Teams display */
._teams_1qhcx_61 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

._compact_1qhcx_39 ._teams_1qhcx_61 {
  font-size: 13px;
}

._teamHome_1qhcx_74,
._teamAway_1qhcx_75 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._vs_1qhcx_81 {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  flex-shrink: 0;
}

._eventName_1qhcx_88 {
  color: var(--text);
}

/* Match name subtitle */
._matchName_1qhcx_93 {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time row */
._timeRow_1qhcx_103 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

._compact_1qhcx_39 ._timeRow_1qhcx_103 {
  margin-top: 4px;
}

._time_1qhcx_103 {
  font-size: 13px;
  color: var(--accent);
}

._relative_1qhcx_119 {
  font-size: 11px;
  color: var(--muted);
  background: rgba(102, 255, 183, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Venue */
._venue_1qhcx_128 {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Competition badge */
._competition_1qhcx_138 {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
}

/* Footer with status and stats */
._footer_1qhcx_150 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

._compact_1qhcx_39 ._footer_1qhcx_150 {
  margin-top: 6px;
  padding-top: 6px;
}

/* Status pill */
._statusPill_1qhcx_165 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 4px;
}

._statusDot_1qhcx_176 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Stats section */
._stats_1qhcx_183 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Assignment badge */
._assignmentBadge_1qhcx_190 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
}

._assignIcon_1qhcx_197 {
  display: flex;
  align-items: center;
  opacity: 0.7;
}

._assignDivider_1qhcx_203 {
  color: var(--muted);
  margin: 0 2px;
}

/* Photo count */
._photoCount_1qhcx_209 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

._photoCount_1qhcx_209 svg {
  opacity: 0.7;
}
._stepper_7kdj4_1 {
  width: 100%;
  padding: 0 0 1.5rem 0;
}

._stepList_7kdj4_6 {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

._stepItem_7kdj4_15 {
  display: flex;
  align-items: center;
  flex: 1;
}

._stepItem_7kdj4_15:last-child {
  flex: 0;
}

._step_7kdj4_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 80px;
}

._stepIndicator_7kdj4_33 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-tertiary, #333);
  border: 2px solid var(--color-border, #444);
  transition: all 0.2s ease;
}

._stepNumber_7kdj4_45 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary, #888);
}

._checkIcon_7kdj4_51 {
  width: 16px;
  height: 16px;
  color: var(--color-bg-primary, #1a1a1a);
}

._stepLabel_7kdj4_57 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary, #888);
  text-align: center;
  white-space: nowrap;
}

/* Active state */
._step_7kdj4_1._active_7kdj4_66 ._stepIndicator_7kdj4_33 {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
}

._step_7kdj4_1._active_7kdj4_66 ._stepNumber_7kdj4_45 {
  color: white;
}

._step_7kdj4_1._active_7kdj4_66 ._stepLabel_7kdj4_57 {
  color: var(--color-text-primary, #fff);
  font-weight: 600;
}

/* Completed state */
._step_7kdj4_1._completed_7kdj4_81 ._stepIndicator_7kdj4_33 {
  background: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
}

._step_7kdj4_1._completed_7kdj4_81 ._stepLabel_7kdj4_57 {
  color: var(--color-text-primary, #fff);
}

/* Connector line between steps */
._connector_7kdj4_91 {
  flex: 1;
  height: 2px;
  background: var(--color-border, #444);
  margin: 0 0.75rem;
  margin-bottom: 1.5rem;
  transition: background 0.2s ease;
}

._connectorCompleted_7kdj4_100 {
  background: var(--color-success, #22c55e);
}
/* MatchModal styles */

._modalBody_112p5_3 {
  min-height: 300px;
}

/* MatchHub Search */
._matchHubSearch_112p5_8 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._searchHeader_112p5_14 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

._hint_112p5_20 {
  font-size: 12px;
  color: var(--muted);
}

._searchInput_112p5_25 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s;
}

._searchInput_112p5_25:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_112p5_25::placeholder {
  color: var(--muted);
}

._searchLoading_112p5_45 {
  text-align: center;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
}

._searchResults_112p5_52 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

._searchResult_112p5_52 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

._searchResult_112p5_52:hover {
  border-color: var(--accent);
  background: rgba(102, 255, 183, 0.05);
}

._resultTeams_112p5_78 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

._resultMeta_112p5_84 {
  font-size: 12px;
  color: var(--muted);
}

._noResults_112p5_89 {
  text-align: center;
  padding: 20px;
  color: var(--muted);
}

._noResults_112p5_89 p {
  margin: 0 0 12px 0;
  font-size: 13px;
}

._divider_112p5_100 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

._divider_112p5_100::before,
._divider_112p5_100::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Form styles */
._form_112p5_117 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._formRow_112p5_123 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 500px) {
  ._formRow_112p5_123 {
    grid-template-columns: 1fr;
  }
}

._formGroup_112p5_135 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._formSection_112p5_141 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

._sectionTitle_112p5_147 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

._label_112p5_156 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

._input_112p5_162,
._select_112p5_163 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s;
}

._input_112p5_162:focus,
._select_112p5_163:focus {
  outline: none;
  border-color: var(--accent);
}

._input_112p5_162::placeholder {
  color: var(--muted);
}

._select_112p5_163 {
  cursor: pointer;
}

._select_112p5_163 option {
  background: var(--bg);
  color: var(--text);
}

._teamSelectRow_112p5_193 {
  display: flex;
  gap: 8px;
}

._teamSelectRow_112p5_193 ._select_112p5_163 {
  flex: 1;
}

._teamSearchWrapper_112p5_202 {
  position: relative;
  flex: 1;
}

._teamClearButton_112p5_207 {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
}

._teamClearButton_112p5_207:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

._teamDropdown_112p5_226 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

._teamDropdownEmpty_112p5_241 {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

._teamDropdownItem_112p5_248 {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  transition: background 0.1s;
}

._teamDropdownItem_112p5_248:last-child {
  border-bottom: none;
}

._teamDropdownItem_112p5_248:hover {
  background: rgba(102, 255, 183, 0.1);
}

._createTeamRow_112p5_270 {
  display: flex;
  gap: 8px;
}

._createTeamRow_112p5_270 ._input_112p5_162 {
  flex: 1;
}

._error_112p5_279 {
  font-size: 12px;
  color: var(--danger, #ff6b6b);
}

._autoFilled_112p5_284 {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
}

/* Checkbox list for multi-select */
._checkboxList_112p5_291 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  padding: 8px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
}

._checkboxItem_112p5_303 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

._checkboxItem_112p5_303:hover {
  background: rgba(255, 255, 255, 0.05);
}

._checkbox_112p5_291 {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

._checkboxLabel_112p5_324 {
  font-size: 14px;
  color: var(--text);
}

._noUsers_112p5_329 {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 4px;
}

/* Step description */
._stepDescription_112p5_337 {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

._stepHeader_112p5_344 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

._stepHeader_112p5_344 ._stepDescription_112p5_337 {
  margin: 0;
  flex: 1;
}

/* Loading/Error states */
._loadingContainer_112p5_358 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

._errorContainer_112p5_369 {
  padding: 20px;
  text-align: center;
  color: var(--danger, #ff6b6b);
}

/* FTP Selection Step */
._ftpSelectionStep_112p5_376 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

._ftpSectionTitle_112p5_388 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

._ftpSectionHint_112p5_395 {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px 0;
}

._ftpGrid_112p5_401 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

._ftpCard_112p5_407 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

._ftpCard_112p5_407:hover {
  border-color: var(--accent);
}

._ftpCardDefault_112p5_423 {
  cursor: default;
  background: rgba(102, 255, 183, 0.05);
  border-color: rgba(102, 255, 183, 0.3);
}

._ftpCardDefault_112p5_423:hover {
  border-color: rgba(102, 255, 183, 0.3);
}

._ftpCardSelected_112p5_433 {
  border-color: var(--accent);
  background: rgba(102, 255, 183, 0.1);
}

._ftpCardContent_112p5_438 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

._ftpCardHeader_112p5_445 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._ftpCardName_112p5_451 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

._ftpCardHost_112p5_457 {
  font-size: 12px;
  color: var(--muted);
}

._defaultBadge_112p5_462 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(102, 255, 183, 0.2);
  color: var(--accent);
  border-radius: 4px;
}

._noTargets_112p5_472 {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
}

._noTargets_112p5_472 p {
  margin: 0 0 8px 0;
}

._noTargetsHint_112p5_482 {
  font-size: 12px;
}

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

._ftpSummaryCount_112p5_493 {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

/* IPTC Config Step */
._iptcConfigStep_112p5_500 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._iptcColumns_112p5_506 {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}

@media (max-width: 768px) {
  ._iptcColumns_112p5_506 {
    grid-template-columns: 1fr;
  }
}

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

._iptcPreviewColumn_112p5_524 {
  position: sticky;
  top: 0;
  align-self: start;
}

/* Template input header */
._templateHeader_112p5_531 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Variable dropdown */
._variableDropdown_112p5_539 {
  position: relative;
}

._variableButton_112p5_543 {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

._variableButton_112p5_543:hover {
  border-color: var(--accent);
  color: var(--accent);
}

._variableMenu_112p5_559 {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  width: 240px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

._variableItem_112p5_574 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

._variableItem_112p5_574:last-child {
  border-bottom: none;
}

._variableItem_112p5_574:hover {
  background: rgba(102, 255, 183, 0.1);
}

._variableName_112p5_597 {
  font-family: monospace;
  font-size: 12px;
  color: var(--accent);
}

._variableLabel_112p5_603 {
  font-size: 12px;
  color: var(--muted);
}

/* Textarea for multiline templates */
._textarea_112p5_609 {
  width: 100%;
  min-height: 60px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  transition: border-color 0.15s;
}

._textarea_112p5_609:focus {
  outline: none;
  border-color: var(--accent);
}

/* Preview panel */
._previewPanel_112p5_629 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

._previewHeader_112p5_636 {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border);
}

._previewContent_112p5_647 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._previewEmpty_112p5_654 {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

._previewItem_112p5_662 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._previewLabel_112p5_668 {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: capitalize;
}

._previewValue_112p5_675 {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
._tagInput_vs8lj_1 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._label_vs8lj_7 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary, #a0a0a0);
}

._container_vs8lj_13 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem;
  min-height: 42px;
  background: var(--color-bg-secondary, #2a2a2a);
  border: 1px solid var(--color-border, #444);
  border-radius: 6px;
  cursor: text;
  transition: border-color 0.15s ease;
}

._container_vs8lj_13:focus-within {
  border-color: var(--color-primary, #3b82f6);
  outline: none;
}

._container_vs8lj_13._disabled_vs8lj_31 {
  opacity: 0.6;
  cursor: not-allowed;
}

._tags_vs8lj_36 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  flex: 1;
}

._tag_vs8lj_1 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg-tertiary, #333);
  border: 1px solid var(--color-border, #444);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--color-text-primary, #fff);
}

._tagText_vs8lj_56 {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._removeButton_vs8lj_63 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  margin-left: 0.125rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary, #888);
  border-radius: 2px;
  transition: color 0.15s ease, background 0.15s ease;
}

._removeButton_vs8lj_63:hover {
  color: var(--color-danger, #ef4444);
  background: var(--color-bg-secondary, #2a2a2a);
}

._input_vs8lj_83 {
  flex: 1;
  min-width: 100px;
  padding: 0.125rem 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--color-text-primary, #fff);
}

._input_vs8lj_83::placeholder {
  color: var(--color-text-tertiary, #666);
}

._input_vs8lj_83:disabled {
  cursor: not-allowed;
}

._hint_vs8lj_102 {
  font-size: 0.75rem;
  color: var(--color-text-tertiary, #666);
}
/* MatchDetails panel styles */

._container_1mes5_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

._empty_1mes5_13 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 14px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Header */
._header_1mes5_26 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

._headerContent_1mes5_34 {
  display: flex;
  gap: 12px;
  min-width: 0;
}

._colorIndicator_1mes5_40 {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

._headerText_1mes5_46 {
  min-width: 0;
}

._title_1mes5_50 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._subtitle_1mes5_60 {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0 0;
}

._headerActions_1mes5_66 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Status bar */
._statusBar_1mes5_73 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
}

._statusPill_1mes5_82 {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 4px;
}

._relative_1mes5_92 {
  font-size: 11px;
  color: var(--muted);
}

._competition_1mes5_97,
._eventType_1mes5_98 {
  font-size: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Tabs */
._tabs_1mes5_107 {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
}

._tab_1mes5_107 {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}

._tab_1mes5_107:hover {
  color: var(--text);
}

._tabActive_1mes5_129 {
  color: var(--accent);
}

._tabActive_1mes5_129::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* Tab content */
._tabContent_1mes5_144 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Section */
._sectionHeader_1mes5_151 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

._sectionTitle_1mes5_158 {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Info section */
._infoSection_1mes5_168 {
  margin-bottom: 20px;
}

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

._infoRow_1mes5_178 {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

._infoLabel_1mes5_184 {
  color: var(--muted);
  width: 60px;
  flex-shrink: 0;
}

._infoValue_1mes5_190 {
  color: var(--text);
}

/* Stats grid */
._statsGrid_1mes5_195 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

._statCard_1mes5_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

._statValue_1mes5_210 {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
}

._statLabel_1mes5_216 {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* Assignment section */
._assignmentSection_1mes5_223 {
  margin-bottom: 20px;
}

._emptyNote_1mes5_227 {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

._assignmentList_1mes5_234 {
  list-style: none;
  padding: 0;
  margin: 0;
}

._assignmentItem_1mes5_240 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

._assignmentItem_1mes5_240:last-child {
  border-bottom: none;
}

._assignmentName_1mes5_252 {
  font-size: 13px;
  color: var(--text);
}

._assignmentActions_1mes5_257 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._signedOff_1mes5_263 {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

._addAssignment_1mes5_269 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* IPTC Editor */
._xmpDownload_1mes5_277 {
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

._iptcEditor_1mes5_283 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._iptcActions_1mes5_289 {
  display: flex;
  gap: 8px;
}

._iptcFields_1mes5_294 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

._iptcLabel_1mes5_306 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

._iptcHint_1mes5_315 {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

._iptcInput_1mes5_321,
._iptcTextarea_1mes5_322 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s;
}

._iptcInput_1mes5_321:focus,
._iptcTextarea_1mes5_322:focus {
  outline: none;
  border-color: var(--accent);
}

._iptcInput_1mes5_321:disabled,
._iptcTextarea_1mes5_322:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._iptcTextarea_1mes5_322 {
  resize: vertical;
  min-height: 60px;
}

/* FTP Section */
._ftpSection_1mes5_351 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._ftpList_1mes5_357 {
  list-style: none;
  padding: 0;
  margin: 0;
}

._ftpItem_1mes5_363 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

._ftpItem_1mes5_363:last-child {
  border-bottom: none;
}

._ftpName_1mes5_375 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

._ftpHost_1mes5_381 {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}

._addFtp_1mes5_387 {
  margin-top: 8px;
}

._ftpSelect_1mes5_391 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._ftpSelect_1mes5_391 option {
  background: var(--bg);
}
/* FilterBar styles */

._container_j4gq6_3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._row_j4gq6_13 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Search */
._searchWrapper_j4gq6_21 {
  position: relative;
  flex: 0 0 200px;
}

._searchInput_j4gq6_26 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s;
}

._searchInput_j4gq6_26:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_j4gq6_26::placeholder {
  color: var(--muted);
}

._clearSearch_j4gq6_46 {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

._clearSearch_j4gq6_46:hover {
  color: var(--text);
}

/* Filter sections */
._section_j4gq6_65 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._sectionLabel_j4gq6_71 {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._sectionOptions_j4gq6_79 {
  display: flex;
  gap: 4px;
}

/* Filter pills */
._pill_j4gq6_85 {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

._pill_j4gq6_85:hover {
  border-color: var(--text);
  color: var(--text);
}

._pillActive_j4gq6_102 {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(102, 255, 183, 0.1);
}

/* Event types */
._eventTypes_j4gq6_109 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Select dropdown */
._select_j4gq6_116 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  min-width: 120px;
}

._select_j4gq6_116:focus {
  outline: none;
  border-color: var(--accent);
}

._select_j4gq6_116 option {
  background: var(--bg);
  color: var(--text);
}

/* Spacer */
._spacer_j4gq6_138 {
  flex: 1;
}

/* Match count */
._count_j4gq6_143 {
  font-size: 13px;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
  ._row_j4gq6_13 {
    gap: 8px;
  }

  ._searchWrapper_j4gq6_21 {
    flex: 1 1 100%;
    order: -1;
  }

  ._section_j4gq6_65 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  ._select_j4gq6_116 {
    width: 100%;
  }
}
/* Matches page styles */

._page_12d7c_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 20px;
  gap: 16px;
  overflow: hidden;
}

/* Header */
._header_12d7c_13 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

._title_12d7c_20 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Error banner */
._error_12d7c_28 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  flex-shrink: 0;
}

._error_12d7c_28 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

._error_12d7c_28 button:hover {
  background: rgba(255, 107, 107, 0.1);
}

/* Main layout - 3 column */
._layout_12d7c_56 {
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar */
._sidebar_12d7c_66 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

._clearDate_12d7c_73 {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

._clearDate_12d7c_73:hover {
  border-color: var(--text);
  color: var(--text);
}

/* Main content */
._main_12d7c_90 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}

._dateLabel_12d7c_98 {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}

._matchGrid_12d7c_106 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-content: start;
}

._empty_12d7c_113 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Details panel */
._details_12d7c_124 {
  overflow-y: auto;
  min-height: 0;
}

/* Loading state */
._loading_12d7c_130 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  color: var(--muted);
}

._loading_12d7c_130 p {
  margin: 0;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
  ._layout_12d7c_56 {
    grid-template-columns: 250px 1fr;
  }

  ._details_12d7c_124 {
    display: none;
  }
}

@media (max-width: 768px) {
  ._page_12d7c_3 {
    padding: 12px;
  }

  ._layout_12d7c_56 {
    grid-template-columns: 1fr;
  }

  ._sidebar_12d7c_66 {
    display: none;
  }

  ._matchGrid_12d7c_106 {
    grid-template-columns: 1fr;
  }
}
._toast_k539r_1 {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);

  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);

  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);

  animation: _slideIn_k539r_1 0.2s ease-out;
}

@keyframes _slideIn_k539r_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

._exiting_k539r_32 {
  animation: _slideOut_k539r_1 0.2s ease-in forwards;
}

@keyframes _slideOut_k539r_1 {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
}

/* Type variants */
._success_k539r_48 {
  background: #1a472a;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

._error_k539r_54 {
  background: #4a1a1a;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

._warning_k539r_60 {
  background: #4a3a1a;
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
}

._info_k539r_66 {
  background: #1a2a4a;
  border: 1px solid var(--color-info);
  color: var(--color-info);
}

._message_k539r_72 {
  flex: 1;
}

._closeButton_k539r_76 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  color: inherit;
}

._closeButton_k539r_76:hover {
  opacity: 1;
}
/* ManageNav styles - matches Statistics page tabs */

._nav_1gqvk_3 {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  background: rgba(10, 18, 22, 0.95);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

._navItem_1gqvk_14 {
  background: rgba(16, 31, 37, 0.8);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
}

._navItem_1gqvk_14:hover {
  background: rgba(16, 31, 37, 0.95);
  color: var(--text);
}

._active_1gqvk_34 {
  background: linear-gradient(135deg, rgba(104, 255, 154, 0.15), rgba(104, 255, 154, 0.05));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.1);
}

._active_1gqvk_34:hover {
  background: linear-gradient(135deg, rgba(104, 255, 154, 0.2), rgba(104, 255, 154, 0.1));
  color: var(--accent);
}
/* ManageDashboard styles - matches Statistics page */

._container_viccc_3 {
  padding: 0;
}

._header_viccc_7 {
  margin-bottom: 24px;
}

._title_viccc_11 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_viccc_18 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_viccc_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_viccc_24 p {
  margin: 0;
  font-size: 14px;
}

/* Sections */
._statsSection_viccc_40,
._cardsSection_viccc_41 {
  margin-bottom: 32px;
}

._sectionTitle_viccc_45 {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
}

/* Stat Cards Grid - like Statistics summary cards */
._statsGrid_viccc_54 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

._statCard_viccc_60 {
  position: relative;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
}

._statCard_viccc_60::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.02) 100%);
  pointer-events: none;
}

._statValue_viccc_77 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}

._statLabel_viccc_85 {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._statSubtext_viccc_93 {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  margin-top: 4px;
}

/* Stat card variants */
._statCard_viccc_60._total_viccc_101 ._statValue_viccc_77 {
  color: var(--text);
}

._statCard_viccc_60._done_viccc_105 ._statValue_viccc_77 {
  color: var(--accent);
}

._statCard_viccc_60._done_viccc_105::before {
  background: linear-gradient(135deg, rgba(104, 255, 154, 0.1) 0%, transparent 100%);
}

._statCard_viccc_60._pending_viccc_113 ._statValue_viccc_77 {
  color: #ffc107;
}

._statCard_viccc_60._pending_viccc_113::before {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, transparent 100%);
}

._statCard_viccc_60._processing_viccc_121 ._statValue_viccc_77 {
  color: #64b5f6;
}

._statCard_viccc_60._processing_viccc_121::before {
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.1) 0%, transparent 100%);
}

/* Navigation card grid */
._grid_viccc_130 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

._card_viccc_41 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

._card_viccc_41:hover {
  border-color: var(--accent);
  background: rgba(102, 255, 183, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

._card_viccc_41:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._cardTitle_viccc_162 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

._cardStats_viccc_169 {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}

._cardDescription_viccc_176 {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 900px) {
  ._statsGrid_viccc_54 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  ._statsGrid_viccc_54 {
    grid-template-columns: 1fr;
  }

  ._grid_viccc_130 {
    grid-template-columns: 1fr;
  }

  ._statValue_viccc_77 {
    font-size: 28px;
  }
}
/* TeamList styles */

._container_1vxkc_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_1vxkc_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._title_1vxkc_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_1vxkc_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_1vxkc_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_1vxkc_29 p {
  margin: 0;
  font-size: 14px;
}

._error_1vxkc_44 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_1vxkc_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_1vxkc_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_1vxkc_76 {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._searchInput_1vxkc_76:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_1vxkc_76::placeholder {
  color: var(--muted);
}

._filterSelect_1vxkc_97 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._filterSelect_1vxkc_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_1vxkc_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_1vxkc_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_1vxkc_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_1vxkc_133 {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: rgb(14, 23, 28);
  position: sticky;
  top: 0;
  z-index: 10;
}

._sortable_1vxkc_148 {
  cursor: pointer;
  user-select: none;
}

._sortable_1vxkc_148:hover {
  color: var(--text);
}

._sortIndicator_1vxkc_157 {
  opacity: 0.6;
}

._row_1vxkc_161 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_1vxkc_161:hover {
  background: rgba(255, 255, 255, 0.02);
}

._row_1vxkc_161:last-child {
  border-bottom: none;
}

._td_1vxkc_174 {
  padding: 12px 16px;
  color: var(--text);
}

._teamName_1vxkc_179 {
  font-weight: 500;
}

._aliasBadge_1vxkc_183 {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(102, 255, 183, 0.15);
  border-radius: 4px;
}

._globalName_1vxkc_194 {
  color: var(--muted);
}

._typeBadge_1vxkc_198 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: capitalize;
}

._actions_1vxkc_207 {
  display: flex;
  gap: 8px;
}

._memberCount_1vxkc_212 {
  font-weight: 500;
  color: var(--muted);
}

._expandBtn_1vxkc_217 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.15s;
}

._expandBtn_1vxkc_217:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: var(--accent);
}

._expanded_1vxkc_239 {
  background: rgba(102, 255, 183, 0.03);
}

/* Members expandable row */
._membersRow_1vxkc_244 {
  background: rgba(0, 0, 0, 0.2);
}

._membersCell_1vxkc_248 {
  padding: 16px 16px 16px 48px;
  border-bottom: 1px solid var(--border);
}

._membersLoading_1vxkc_253 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

._membersError_1vxkc_261 {
  color: var(--danger, #ff6b6b);
  font-size: 13px;
}

._membersEmpty_1vxkc_266 {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

._membersGrid_1vxkc_272 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._memberCard_1vxkc_278 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

._memberCard_1vxkc_278:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
}

._memberJersey_1vxkc_294 {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
}

._memberName_1vxkc_300 {
  font-weight: 500;
  color: var(--text);
}

._memberFullName_1vxkc_305 {
  color: var(--muted);
  font-size: 12px;
}

._empty_1vxkc_310 {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* Modal form */
._globalInfo_1vxkc_317 {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._globalLabel_1vxkc_326 {
  color: var(--muted);
  font-size: 13px;
}

._globalValue_1vxkc_331 {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

._formGroup_1vxkc_337 {
  margin-bottom: 16px;
}

._formRow_1vxkc_341 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._label_1vxkc_347 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1vxkc_355,
._select_1vxkc_356,
._textarea_1vxkc_357 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_1vxkc_355:focus,
._select_1vxkc_356:focus,
._textarea_1vxkc_357:focus {
  outline: none;
  border-color: var(--accent);
}

._textarea_1vxkc_357 {
  resize: vertical;
  min-height: 60px;
}

._footerSpacer_1vxkc_379 {
  flex: 1;
}

@media (max-width: 768px) {
  ._filters_1vxkc_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_1vxkc_76 {
    max-width: none;
  }

  ._count_1vxkc_112 {
    margin-left: 0;
  }

  ._formRow_1vxkc_341 {
    grid-template-columns: 1fr;
  }

  ._tableWrapper_1vxkc_119 {
    overflow-x: auto;
  }

  ._table_1vxkc_119 {
    min-width: 600px;
  }
}
/* PersonList styles */

._container_1ulp6_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_1ulp6_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._title_1ulp6_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_1ulp6_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._headerActions_1ulp6_29 {
  display: flex;
  gap: 8px;
}

._loading_1ulp6_34 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_1ulp6_34 p {
  margin: 0;
  font-size: 14px;
}

._error_1ulp6_49 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_1ulp6_49 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_1ulp6_73 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_1ulp6_81 {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._searchInput_1ulp6_81:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_1ulp6_81::placeholder {
  color: var(--muted);
}

._filterSelect_1ulp6_102 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._filterSelect_1ulp6_102:focus {
  outline: none;
  border-color: var(--accent);
}

._count_1ulp6_117 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_1ulp6_124 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_1ulp6_124 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_1ulp6_138 {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: rgb(14, 23, 28);
  position: sticky;
  top: 0;
  z-index: 10;
}

._sortable_1ulp6_153 {
  cursor: pointer;
  user-select: none;
}

._sortable_1ulp6_153:hover {
  color: var(--text);
}

._sortIndicator_1ulp6_162 {
  opacity: 0.6;
}

._row_1ulp6_166 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_1ulp6_166:hover {
  background: rgba(255, 255, 255, 0.02);
}

._row_1ulp6_166._selected_1ulp6_175 {
  background: rgba(102, 255, 183, 0.08);
}

._row_1ulp6_166:last-child {
  border-bottom: none;
}

._td_1ulp6_183 {
  padding: 12px 16px;
  color: var(--text);
}

._checkbox_1ulp6_188 {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

._personName_1ulp6_195 {
  font-weight: 500;
}

._aliasBadge_1ulp6_199 {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(102, 255, 183, 0.15);
  border-radius: 4px;
}

._globalName_1ulp6_210 {
  color: var(--muted);
}

._roleBadge_1ulp6_214 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: capitalize;
}

._faceCount_1ulp6_223 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._noFaces_1ulp6_231 {
  color: var(--muted);
  background: rgba(255, 107, 107, 0.15);
}

._manyFaces_1ulp6_236 {
  color: var(--accent);
  background: rgba(102, 255, 183, 0.15);
}

._actions_1ulp6_241 {
  display: flex;
  gap: 8px;
}

._empty_1ulp6_246 {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* Modal form */
._globalInfo_1ulp6_253 {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._globalLabel_1ulp6_262 {
  color: var(--muted);
  font-size: 13px;
}

._globalValue_1ulp6_267 {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

._formGroup_1ulp6_273 {
  margin-bottom: 16px;
}

._formRow_1ulp6_277 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._label_1ulp6_283 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1ulp6_291,
._select_1ulp6_175,
._textarea_1ulp6_293 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_1ulp6_291:focus,
._select_1ulp6_175:focus,
._textarea_1ulp6_293:focus {
  outline: none;
  border-color: var(--accent);
}

._textarea_1ulp6_293 {
  resize: vertical;
  min-height: 60px;
}

._footerSpacer_1ulp6_315 {
  flex: 1;
}

/* Team search autocomplete */
._teamSearchContainer_1ulp6_320 {
  position: relative;
}

._teamInputWrapper_1ulp6_324 {
  position: relative;
  display: flex;
  align-items: center;
}

._teamSearchInput_1ulp6_330 {
  flex: 1;
  padding: 8px 32px 8px 12px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

._teamSearchInput_1ulp6_330:focus {
  outline: none;
  border-color: var(--accent);
}

._clearTeamBtn_1ulp6_345 {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

._clearTeamBtn_1ulp6_345:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

._clearIcon_1ulp6_367 {
  width: 12px;
  height: 12px;
}

._teamSuggestionsList_1ulp6_372 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--card-bg, #1a2a30);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-height: 200px;
  overflow-y: auto;
}

._teamSuggestionItem_1ulp6_387 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

._teamSuggestionItem_1ulp6_387:hover {
  background: rgba(102, 255, 183, 0.1);
}

._teamSuggestionItem_1ulp6_387:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

._teamName_1ulp6_410 {
  flex: 1;
}

._teamType_1ulp6_414 {
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

@media (max-width: 768px) {
  ._filters_1ulp6_73 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_1ulp6_81 {
    max-width: none;
  }

  ._count_1ulp6_117 {
    margin-left: 0;
  }

  ._formRow_1ulp6_277 {
    grid-template-columns: 1fr;
  }

  ._tableWrapper_1ulp6_124 {
    overflow-x: auto;
  }

  ._table_1ulp6_124 {
    min-width: 700px;
  }

  ._headerActions_1ulp6_29 {
    flex-wrap: wrap;
  }
}
/* MergePersonsModal styles */

._description_gj3hk_3 {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

._error_gj3hk_10 {
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._section_gj3hk_20 {
  margin-bottom: 24px;
}

._sectionTitle_gj3hk_24 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

/* Person selection list */
._personList_gj3hk_34 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._personOption_gj3hk_40 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

._personOption_gj3hk_40:hover {
  background: rgba(0, 0, 0, 0.3);
}

._personOption_gj3hk_40._selected_gj3hk_56 {
  background: rgba(102, 255, 183, 0.1);
  border-color: var(--accent);
}

._radio_gj3hk_61 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

._personInfo_gj3hk_68 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

._personName_gj3hk_76 {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._globalName_gj3hk_84 {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

._personMeta_gj3hk_90 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._role_gj3hk_97 {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: capitalize;
}

._faceCount_gj3hk_105 {
  font-size: 12px;
  color: var(--muted);
}

/* Preview section */
._preview_gj3hk_111 {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 16px;
}

._previewRow_gj3hk_117 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

._previewRow_gj3hk_117:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

._previewRow_gj3hk_117:first-child {
  padding-top: 0;
}

._previewLabel_gj3hk_134 {
  font-size: 13px;
  color: var(--muted);
}

._previewValue_gj3hk_139 {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}

/* Warning box */
._warning_gj3hk_148 {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 6px;
}

._warningIcon_gj3hk_157 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

._warningContent_gj3hk_171 {
  flex: 1;
}

._warningContent_gj3hk_171 strong {
  display: block;
  color: #ffc107;
  font-size: 14px;
  margin-bottom: 4px;
}

._warningContent_gj3hk_171 p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 480px) {
  ._personOption_gj3hk_40 {
    flex-wrap: wrap;
  }

  ._personMeta_gj3hk_90 {
    width: 100%;
    margin-left: 28px;
    margin-top: 8px;
  }

  ._previewValue_gj3hk_139 {
    max-width: 50%;
  }
}
/* CompanyDashboard styles */

._container_b2toj_3 {
  padding: 0;
}

._header_b2toj_7 {
  margin-bottom: 24px;
}

._title_b2toj_11 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_b2toj_18 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_b2toj_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_b2toj_24 p {
  margin: 0;
  font-size: 14px;
}

/* Card grid */
._grid_b2toj_40 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

._card_b2toj_47 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

._card_b2toj_47:hover {
  background: rgba(19, 30, 35, 0.8);
  border-color: var(--accent);
  transform: translateY(-2px);
}

._cardIcon_b2toj_65 {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

._cardContent_b2toj_79 {
  flex: 1;
  min-width: 0;
}

._cardTitle_b2toj_84 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._cardDescription_b2toj_91 {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

._cardStat_b2toj_98 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
}

._statValue_b2toj_105 {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}

._statLabel_b2toj_111 {
  font-size: 12px;
  color: var(--muted);
}

._cardArrow_b2toj_116 {
  color: var(--muted);
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

._card_b2toj_47:hover ._cardArrow_b2toj_116 {
  opacity: 1;
  transform: translateX(4px);
}

/* Quick Actions */
._quickActions_b2toj_129 {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

._quickActionsTitle_b2toj_134 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

._quickActionsList_b2toj_143 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._quickAction_b2toj_129 {
  padding: 8px 16px;
  background: rgba(102, 255, 183, 0.1);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

._quickAction_b2toj_129:hover {
  background: rgba(102, 255, 183, 0.2);
}

@media (max-width: 768px) {
  ._grid_b2toj_40 {
    grid-template-columns: 1fr;
  }

  ._quickActionsList_b2toj_143 {
    flex-direction: column;
  }

  ._quickAction_b2toj_129 {
    text-align: center;
  }
}
/* UserList styles */

._container_opxab_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_opxab_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._title_opxab_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_opxab_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_opxab_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_opxab_29 p {
  margin: 0;
  font-size: 14px;
}

._error_opxab_44 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_opxab_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_opxab_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_opxab_76 {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._searchInput_opxab_76:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_opxab_76::placeholder {
  color: var(--muted);
}

._filterSelect_opxab_97 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._filterSelect_opxab_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_opxab_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_opxab_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_opxab_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_opxab_133 {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: rgb(14, 23, 28);
  position: sticky;
  top: 0;
  z-index: 10;
}

._sortable_opxab_148 {
  cursor: pointer;
  user-select: none;
}

._sortable_opxab_148:hover {
  color: var(--text);
}

._sortIndicator_opxab_157 {
  opacity: 0.6;
}

._row_opxab_161 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_opxab_161:hover {
  background: rgba(255, 255, 255, 0.02);
}

._row_opxab_161:last-child {
  border-bottom: none;
}

._td_opxab_174 {
  padding: 12px 16px;
  color: var(--text);
}

._userName_opxab_179 {
  font-weight: 500;
}

._userEmail_opxab_183 {
  color: var(--muted);
}

._roleBadge_opxab_187 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._statusBadge_opxab_195 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
}

._statusBadge_opxab_195._active_opxab_202 {
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
}

._statusBadge_opxab_195._pending_opxab_207 {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

._statusBadge_opxab_195._inactive_opxab_212 {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger, #ff6b6b);
}

._actions_opxab_217 {
  display: flex;
  gap: 8px;
}

._empty_opxab_222 {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* Modal styles */
._inviteDescription_opxab_229 {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

._userInfo_opxab_236 {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._userInfo_opxab_236 ._userEmail_opxab_183 {
  font-size: 14px;
  color: var(--text);
}

._formGroup_opxab_248 {
  margin-bottom: 16px;
}

._formError_opxab_252 {
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._label_opxab_262 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_opxab_270,
._select_opxab_271 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_opxab_270:focus,
._select_opxab_271:focus {
  outline: none;
  border-color: var(--accent);
}

._checkboxLabel_opxab_287 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

._checkbox_opxab_287 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

._hint_opxab_302 {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0 24px;
}

@media (max-width: 768px) {
  ._filters_opxab_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_opxab_76 {
    max-width: none;
  }

  ._count_opxab_112 {
    margin-left: 0;
  }

  ._tableWrapper_opxab_119 {
    overflow-x: auto;
  }

  ._table_opxab_119 {
    min-width: 600px;
  }
}
/* RoleList styles */

._container_1g3jd_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_1g3jd_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

._title_1g3jd_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_1g3jd_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_1g3jd_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_1g3jd_29 p {
  margin: 0;
  font-size: 14px;
}

._error_1g3jd_44 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_1g3jd_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Role grid */
._roleGrid_1g3jd_68 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

._roleCard_1g3jd_74 {
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s;
}

._roleCard_1g3jd_74:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

._roleCard_1g3jd_74._defaultRole_1g3jd_86 {
  border-color: rgba(102, 255, 183, 0.3);
}

._roleHeader_1g3jd_90 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

._roleName_1g3jd_97 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

._defaultBadge_1g3jd_107 {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
  border-radius: 4px;
}

._userCount_1g3jd_116 {
  font-size: 12px;
  color: var(--muted);
}

._roleDescription_1g3jd_121 {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

._permissionSummary_1g3jd_128 {
  margin-bottom: 16px;
}

._permissionCount_1g3jd_132 {
  font-size: 12px;
  color: var(--muted);
}

._roleActions_1g3jd_137 {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

._empty_1g3jd_144 {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Modal form */
._formGroup_1g3jd_155 {
  margin-bottom: 16px;
}

._label_1g3jd_159 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1g3jd_167 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_1g3jd_167:focus {
  outline: none;
  border-color: var(--accent);
}

/* Permissions section */
._permissionsSection_1g3jd_183 {
  margin-top: 24px;
}

._permissionGroups_1g3jd_187 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

._permissionGroup_1g3jd_187 {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}

._groupHeader_1g3jd_201 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

._groupCheckbox_1g3jd_210 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

._groupName_1g3jd_217 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

._groupCount_1g3jd_223 {
  font-size: 11px;
  color: var(--muted);
}

._permissionList_1g3jd_228 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._permissionItem_1g3jd_234 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

._permissionItem_1g3jd_234:hover {
  color: var(--text);
}

._checkbox_1g3jd_247 {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

@media (max-width: 768px) {
  ._roleGrid_1g3jd_68 {
    grid-template-columns: 1fr;
  }

  ._permissionGroups_1g3jd_187 {
    grid-template-columns: 1fr;
  }
}
/* FtpSourceList styles */

._container_18h9q_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_18h9q_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._title_18h9q_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_18h9q_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_18h9q_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_18h9q_29 p {
  margin: 0;
  font-size: 14px;
}

._error_18h9q_44 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_18h9q_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_18h9q_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_18h9q_76 {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._searchInput_18h9q_76:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_18h9q_76::placeholder {
  color: var(--muted);
}

._filterSelect_18h9q_97 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._filterSelect_18h9q_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_18h9q_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_18h9q_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_18h9q_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_18h9q_133 {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: rgb(14, 23, 28);
  position: sticky;
  top: 0;
  z-index: 10;
}

._row_18h9q_148 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_18h9q_148:hover {
  background: rgba(255, 255, 255, 0.02);
}

._row_18h9q_148:last-child {
  border-bottom: none;
}

._td_18h9q_161 {
  padding: 12px 16px;
  color: var(--text);
}

._sourceName_18h9q_166 {
  font-weight: 500;
}

._username_18h9q_170,
._folderPath_18h9q_171 {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  color: var(--muted);
}

._statusBadge_18h9q_180 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
}

._statusBadge_18h9q_180._active_18h9q_187 {
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
}

._statusBadge_18h9q_180._inactive_18h9q_192 {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger, #ff6b6b);
}

._actions_18h9q_197 {
  display: flex;
  gap: 8px;
}

._empty_18h9q_202 {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* Modal styles */
._formGroup_18h9q_209 {
  margin-bottom: 16px;
}

._formRow_18h9q_213 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._label_18h9q_219 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_18h9q_227,
._select_18h9q_228,
._textarea_18h9q_229 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_18h9q_227:focus,
._select_18h9q_228:focus,
._textarea_18h9q_229:focus {
  outline: none;
  border-color: var(--accent);
}

._textarea_18h9q_229 {
  resize: vertical;
  min-height: 60px;
}

._passwordField_18h9q_251 {
  display: flex;
  gap: 8px;
}

._passwordField_18h9q_251 ._input_18h9q_227 {
  flex: 1;
  font-family: 'SF Mono', Consolas, monospace;
}

._togglePassword_18h9q_261 {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

._togglePassword_18h9q_261:hover {
  color: var(--text);
}

._passwordActions_18h9q_276 {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

._checkboxLabel_18h9q_282 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

._checkbox_18h9q_282 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

._hint_18h9q_297 {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0 0;
}

@media (max-width: 768px) {
  ._filters_18h9q_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_18h9q_76 {
    max-width: none;
  }

  ._count_18h9q_112 {
    margin-left: 0;
  }

  ._formRow_18h9q_213 {
    grid-template-columns: 1fr;
  }

  ._tableWrapper_18h9q_119 {
    overflow-x: auto;
  }

  ._table_18h9q_119 {
    min-width: 700px;
  }
}
/* FtpTargetList styles */

._container_1aqhj_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_1aqhj_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._title_1aqhj_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_1aqhj_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_1aqhj_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_1aqhj_29 p {
  margin: 0;
  font-size: 14px;
}

._error_1aqhj_44 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_1aqhj_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_1aqhj_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_1aqhj_76 {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._searchInput_1aqhj_76:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_1aqhj_76::placeholder {
  color: var(--muted);
}

._filterSelect_1aqhj_97 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._filterSelect_1aqhj_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_1aqhj_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_1aqhj_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_1aqhj_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_1aqhj_133 {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: rgb(14, 23, 28);
  position: sticky;
  top: 0;
  z-index: 10;
}

._row_1aqhj_148 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_1aqhj_148:hover {
  background: rgba(255, 255, 255, 0.02);
}

._row_1aqhj_148:last-child {
  border-bottom: none;
}

._td_1aqhj_161 {
  padding: 12px 16px;
  color: var(--text);
}

._targetName_1aqhj_166 {
  font-weight: 500;
}

._sftpBadge_1aqhj_170 {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
  border-radius: 4px;
}

._host_1aqhj_181,
._path_1aqhj_182 {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  color: var(--muted);
}

._typeBadge_1aqhj_191 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._statusBadge_1aqhj_199 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
}

._statusBadge_1aqhj_199._active_1aqhj_206 {
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
}

._statusBadge_1aqhj_199._inactive_1aqhj_211 {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger, #ff6b6b);
}

._actions_1aqhj_216 {
  display: flex;
  gap: 8px;
}

._empty_1aqhj_221 {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* Modal styles */
._formGroup_1aqhj_228 {
  margin-bottom: 16px;
}

._formRow_1aqhj_232 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._label_1aqhj_238 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1aqhj_246,
._select_1aqhj_247,
._textarea_1aqhj_248 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_1aqhj_246:focus,
._select_1aqhj_247:focus,
._textarea_1aqhj_248:focus {
  outline: none;
  border-color: var(--accent);
}

._textarea_1aqhj_248 {
  resize: vertical;
  min-height: 60px;
}

._passwordField_1aqhj_270 {
  display: flex;
  gap: 8px;
}

._passwordField_1aqhj_270 ._input_1aqhj_246 {
  flex: 1;
}

._togglePassword_1aqhj_279 {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

._togglePassword_1aqhj_279:hover {
  color: var(--text);
}

/* Assignment options */
._assignmentOptions_1aqhj_295 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._assignmentOption_1aqhj_295 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

._assignmentOption_1aqhj_295:hover {
  background: rgba(0, 0, 0, 0.3);
}

._assignmentOption_1aqhj_295._selected_1aqhj_317 {
  background: rgba(102, 255, 183, 0.1);
  border-color: var(--accent);
}

._radio_1aqhj_322 {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}

._assignmentLabel_1aqhj_329 {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

._assignmentDesc_1aqhj_336 {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Test section */
._testSection_1aqhj_344 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._testResult_1aqhj_354 {
  font-size: 13px;
}

._testResult_1aqhj_354._success_1aqhj_358 {
  color: var(--accent);
}

._testResult_1aqhj_354._error_1aqhj_44 {
  color: var(--danger, #ff6b6b);
}

._checkboxLabel_1aqhj_366 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

._checkbox_1aqhj_366 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

@media (max-width: 768px) {
  ._filters_1aqhj_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_1aqhj_76 {
    max-width: none;
  }

  ._count_1aqhj_112 {
    margin-left: 0;
  }

  ._formRow_1aqhj_232 {
    grid-template-columns: 1fr;
  }

  ._tableWrapper_1aqhj_119 {
    overflow-x: auto;
  }

  ._table_1aqhj_119 {
    min-width: 700px;
  }
}
/* ProfileList styles */

._container_nszke_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_nszke_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

._title_nszke_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_nszke_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_nszke_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_nszke_29 p {
  margin: 0;
  font-size: 14px;
}

._error_nszke_44 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_nszke_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Profile grid */
._profileGrid_nszke_68 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

._profileCard_nszke_74 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s;
}

._profileCard_nszke_74:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

._profileCard_nszke_74._default_nszke_89 {
  border-color: rgba(102, 255, 183, 0.3);
}

._profileIcon_nszke_93 {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

._profileInfo_nszke_107 {
  flex: 1;
  min-width: 0;
}

._profileName_nszke_112 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

._defaultBadge_nszke_122 {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
  border-radius: 4px;
}

._profileMeta_nszke_131 {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  font-family: 'SF Mono', Consolas, monospace;
}

._profileDate_nszke_138 {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0 0;
}

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

._empty_nszke_150 {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Upload modal */
._uploadDescription_nszke_161 {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

._formGroup_nszke_168 {
  margin-bottom: 16px;
}

._formError_nszke_172 {
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._label_nszke_182 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_nszke_190 {
  width: 100%;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_nszke_190:focus {
  outline: none;
  border-color: var(--accent);
}

._fileInput_nszke_205 {
  position: relative;
}

._hiddenInput_nszke_209 {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

._fileLabel_nszke_216 {
  display: block;
  padding: 12px 16px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

._fileLabel_nszke_216:hover {
  border-color: var(--accent);
  color: var(--text);
}

@media (max-width: 768px) {
  ._profileGrid_nszke_68 {
    grid-template-columns: 1fr;
  }

  ._profileCard_nszke_74 {
    flex-direction: column;
    align-items: stretch;
  }

  ._profileIcon_nszke_93 {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  ._profileActions_nszke_144 {
    flex-direction: row;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
}
/* CompanySettings styles */

._container_1tewc_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_1tewc_9 {
  margin-bottom: 24px;
}

._title_1tewc_13 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_1tewc_20 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._loading_1tewc_26 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_1tewc_26 p {
  margin: 0;
  font-size: 14px;
}

._error_1tewc_41 {
  padding: 40px;
  text-align: center;
  color: var(--danger, #ff6b6b);
}

._errorBanner_1tewc_47 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._errorBanner_1tewc_47 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

._successBanner_1tewc_70 {
  padding: 10px 16px;
  background: rgba(102, 255, 183, 0.15);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Sections */
._sections_1tewc_81 {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._section_1tewc_81 {
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._sectionTitle_1tewc_96 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Form elements */
._formGroup_1tewc_106 {
  margin-bottom: 16px;
}

._formGroup_1tewc_106:last-child {
  margin-bottom: 0;
}

._label_1tewc_114 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1tewc_122,
._select_1tewc_123 {
  width: 100%;
  max-width: 400px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._input_1tewc_122:focus,
._select_1tewc_123:focus {
  outline: none;
  border-color: var(--accent);
}

._hint_1tewc_140 {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0 0;
}

._checkboxLabel_1tewc_146 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._checkbox_1tewc_146 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Ratio chips */
._ratioOptions_1tewc_162 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

._ratioChip_1tewc_169 {
  padding: 6px 14px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

._ratioChip_1tewc_169:hover {
  border-color: var(--accent);
  color: var(--text);
}

._ratioChip_1tewc_169._selected_1tewc_185 {
  background: rgba(102, 255, 183, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Footer */
._footer_1tewc_192 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  ._input_1tewc_122,
  ._select_1tewc_123 {
    max-width: none;
  }
}
/* CaptionBuilderSettings styles - follows CompanySettings pattern */

._container_q8rv7_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_q8rv7_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

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

._title_q8rv7_22 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

._subtitle_q8rv7_29 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._badge_q8rv7_35 {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 6px;
}

._badgeGlobal_q8rv7_46 {
  background: rgba(100, 160, 255, 0.15);
  color: #6aa0ff;
  border: 1px solid rgba(100, 160, 255, 0.3);
}

._badgeCompany_q8rv7_52 {
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
  border: 1px solid rgba(102, 255, 183, 0.3);
}

/* Loading / Error / Success */
._loading_q8rv7_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_q8rv7_59 p {
  margin: 0;
  font-size: 14px;
}

._error_q8rv7_74 {
  padding: 40px;
  text-align: center;
  color: var(--danger, #ff6b6b);
}

._errorBanner_q8rv7_80 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._errorBanner_q8rv7_80 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

._successBanner_q8rv7_103 {
  padding: 10px 16px;
  background: rgba(102, 255, 183, 0.15);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Sections */
._sections_q8rv7_114 {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._section_q8rv7_114 {
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._sectionTitle_q8rv7_129 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

._sectionHint_q8rv7_138 {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 16px 0;
}

/* Category card */
._categoryCard_q8rv7_145 {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

._categoryCard_q8rv7_145:last-child {
  margin-bottom: 0;
}

._categoryHeader_q8rv7_157 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  user-select: none;
}

._categoryDragHandle_q8rv7_167 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
}

._categoryDragHandle_q8rv7_167:active {
  cursor: grabbing;
}

._categoryLabelInput_q8rv7_183 {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

._categoryLabelInput_q8rv7_183:hover {
  border-color: var(--border);
}

._categoryLabelInput_q8rv7_183:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.2);
}

._categoryToggle_q8rv7_204 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

._categoryToggle_q8rv7_204:hover {
  color: var(--text);
}

._categoryDelete_q8rv7_219 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
}

._categoryDelete_q8rv7_219:hover {
  color: var(--danger, #ff6b6b);
}

._categoryBody_q8rv7_232 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Action row */
._actionRow_q8rv7_240 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
}

._actionDragHandle_q8rv7_250 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: grab;
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

._actionDragHandle_q8rv7_250:active {
  cursor: grabbing;
}

._actionInput_q8rv7_266 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
}

._actionInput_q8rv7_266:focus {
  outline: none;
  border-color: var(--accent);
}

._actionLabelInput_q8rv7_280 {
  width: 120px;
  flex-shrink: 0;
}

._actionTemplateInput_q8rv7_286 {
  flex: 1;
  min-width: 140px;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
}

._actionCheckbox_q8rv7_293 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

._actionCheckbox_q8rv7_293 input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

._actionDelete_q8rv7_309 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

._actionDelete_q8rv7_309:hover {
  color: var(--danger, #ff6b6b);
}

._addButton_q8rv7_323 {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

._addButton_q8rv7_323:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Connector overrides */
._connectorRow_q8rv7_341 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

._connectorRow_q8rv7_341:last-of-type {
  border-bottom: none;
}

._connectorLabel_q8rv7_353 {
  font-size: 12px;
  color: var(--text);
  min-width: 120px;
  flex-shrink: 0;
}

._connectorDelete_q8rv7_360 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

._connectorDelete_q8rv7_360:hover {
  color: var(--danger, #ff6b6b);
}

/* Grammar rule row */
._grammarRow_q8rv7_375 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._grammarRow_q8rv7_375:last-of-type {
  margin-bottom: 0;
}

._grammarPatternInput_q8rv7_386 {
  width: 200px;
  flex-shrink: 0;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
  color: var(--text);
}

._grammarPatternInput_q8rv7_386:focus {
  outline: none;
  border-color: var(--accent);
}

._grammarMessageInput_q8rv7_403 {
  flex: 1;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
}

._grammarMessageInput_q8rv7_403:focus {
  outline: none;
  border-color: var(--accent);
}

._grammarDelete_q8rv7_418 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

._grammarDelete_q8rv7_418:hover {
  color: var(--danger, #ff6b6b);
}

/* Hint text */
._hint_q8rv7_433 {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0 0;
}

/* Override select for connector overrides */
._overrideSelect_q8rv7_440 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
  min-width: 160px;
}

._overrideSelect_q8rv7_440:focus {
  outline: none;
  border-color: var(--accent);
}

/* Dragging state */
._dragging_q8rv7_456 {
  opacity: 0.5;
}

._dragOverlay_q8rv7_460 {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Footer */
._footer_q8rv7_465 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

._footerRight_q8rv7_475 {
  display: flex;
  gap: 12px;
}

/* Keywords tag input within action rows */
._actionKeywords_q8rv7_481 {
  flex: 1;
  min-width: 100px;
}

@media (max-width: 768px) {
  ._actionRow_q8rv7_240 {
    flex-wrap: wrap;
  }

  ._actionLabelInput_q8rv7_280,
  ._actionTemplateInput_q8rv7_286 {
    width: 100%;
    flex: none;
  }

  ._grammarRow_q8rv7_375 {
    flex-wrap: wrap;
  }

  ._grammarPatternInput_q8rv7_386 {
    width: 100%;
    flex: none;
  }
}
/* UnlinkedPlayers styles - follows PersonList pattern */

._container_11wm2_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._header_11wm2_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._title_11wm2_16 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

._subtitle_11wm2_23 {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

._headerActions_11wm2_29 {
  display: flex;
  gap: 8px;
  align-items: center;
}

._loading_11wm2_35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

._loading_11wm2_35 p {
  margin: 0;
  font-size: 14px;
}

._error_11wm2_50 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid var(--danger, #ff6b6b);
  border-radius: 6px;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  margin-bottom: 16px;
}

._error_11wm2_50 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_11wm2_74 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_11wm2_82 {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}

._searchInput_11wm2_82:focus {
  outline: none;
  border-color: var(--accent);
}

._searchInput_11wm2_82::placeholder {
  color: var(--muted);
}

._filterSelect_11wm2_103 {
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

._filterSelect_11wm2_103:focus {
  outline: none;
  border-color: var(--accent);
}

._count_11wm2_118 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_11wm2_125 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_11wm2_125 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_11wm2_139 {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: rgb(14, 23, 28);
  position: sticky;
  top: 0;
  z-index: 10;
}

._sortable_11wm2_154 {
  cursor: pointer;
  user-select: none;
}

._sortable_11wm2_154:hover {
  color: var(--text);
}

._sortIndicator_11wm2_163 {
  opacity: 0.6;
}

._row_11wm2_167 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s, opacity 0.3s;
}

._row_11wm2_167:hover {
  background: rgba(255, 255, 255, 0.02);
}

._row_11wm2_167._selected_11wm2_176 {
  background: rgba(102, 255, 183, 0.08);
}

._row_11wm2_167:last-child {
  border-bottom: none;
}

._row_11wm2_167._fading_11wm2_184 {
  opacity: 0;
}

._td_11wm2_188 {
  padding: 12px 16px;
  color: var(--text);
}

._checkbox_11wm2_193 {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

._personName_11wm2_200 {
  font-weight: 500;
}

._dimText_11wm2_204 {
  color: var(--muted);
}

._faceCount_11wm2_208 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._empty_11wm2_216 {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* Inline team search */
._inlineTeamSearch_11wm2_223 {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

._inlineTeamInputWrapper_11wm2_230 {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

._inlineTeamInput_11wm2_230 {
  width: 140px;
  padding: 5px 28px 5px 8px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
}

._inlineTeamInput_11wm2_230:focus {
  outline: none;
  border-color: var(--accent);
}

._inlineTeamInput_11wm2_230::placeholder {
  color: var(--muted);
}

._clearTeamBtn_11wm2_256 {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

._clearTeamBtn_11wm2_256:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

._clearIcon_11wm2_278 {
  width: 12px;
  height: 12px;
}

._teamSuggestionsList_11wm2_283 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  z-index: 100;
  margin-top: 4px;
  background: var(--card-bg, #1a2a30);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-height: 200px;
  overflow-y: auto;
}

._teamSuggestionItem_11wm2_298 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

._teamSuggestionItem_11wm2_298:hover {
  background: rgba(102, 255, 183, 0.1);
}

._teamSuggestionItem_11wm2_298:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

._teamName_11wm2_321 {
  flex: 1;
}

._teamType_11wm2_325 {
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

/* Bulk assign popover */
._bulkAssignWrapper_11wm2_332 {
  position: relative;
}

._bulkPopover_11wm2_336 {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 200;
  margin-top: 4px;
  width: 280px;
  background: var(--card-bg, #1a2a30);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 8px;
}

._bulkPopoverInput_11wm2_350 {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 4px;
}

._bulkPopoverInput_11wm2_350:focus {
  outline: none;
  border-color: var(--accent);
}

._bulkPopoverInput_11wm2_350::placeholder {
  color: var(--muted);
}

._bulkAssigning_11wm2_370 {
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

._bulkSuggestionsList_11wm2_377 {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

@media (max-width: 768px) {
  ._filters_11wm2_74 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_11wm2_82 {
    max-width: none;
  }

  ._count_11wm2_118 {
    margin-left: 0;
  }

  ._tableWrapper_11wm2_125 {
    overflow-x: auto;
  }

  ._table_11wm2_125 {
    min-width: 800px;
  }

  ._headerActions_11wm2_29 {
    flex-wrap: wrap;
  }
}
/* Manage page layout */

._page_nqj92_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

._content_nqj92_11 {
  flex: 1;
  overflow: auto;
  padding: 24px;
}

._accessDenied_nqj92_17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
}

._accessDenied_nqj92_17 h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

._accessDenied_nqj92_17 p {
  font-size: 14px;
  margin: 0;
}

@media (max-width: 768px) {
  ._content_nqj92_11 {
    padding: 16px;
  }
}
/* Me Page - Account Information styles */

._page_1h31w_3 {
  padding: var(--spacing-20);
  max-width: 800px;
  margin: 0 auto;
}

._loading_1h31w_9 {
  color: var(--color-text-muted);
  text-align: center;
  padding: 80px var(--spacing-10);
}

._container_1h31w_15 h1 {
  color: var(--color-accent);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-16);
  font-weight: var(--font-weight-semibold);
}

/* Sections */
._section_1h31w_23 {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

._sectionTitle_1h31w_31 {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-10) 0;
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

/* Profile grid */
._grid_1h31w_41 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-10);
}

._field_1h31w_47 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

._fieldLabel_1h31w_53 {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

._fieldValue_1h31w_60 {
  color: var(--color-text);
  font-size: var(--font-size-md);
}

._fieldCode_1h31w_65 {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-panel-strong);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
  display: inline-block;
  color: var(--color-text);
}

/* Role badges */
._roleBadge_1h31w_76 {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

._roleAdmin_1h31w_84 {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

._roleEditor_1h31w_89 {
  background: rgba(78, 205, 196, 0.15);
  color: #4ecdc4;
}

._roleViewer_1h31w_94 {
  background: rgba(69, 170, 242, 0.15);
  color: #45aaf2;
}

._rolePhotographer_1h31w_99 {
  background: rgba(165, 94, 234, 0.15);
  color: #a55eea;
}

/* Preferences section */
._preferenceItem_1h31w_105 {
  margin-bottom: var(--spacing-8);
}

._preferenceItem_1h31w_105:last-child {
  margin-bottom: 0;
}

._preferenceLabel_1h31w_113 {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--spacing-4);
}

._preferenceHint_1h31w_121 {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-2);
}

/* Segmented control for preferences */
._segmentedControl_1h31w_128 {
  display: inline-flex;
  background: var(--color-panel-strong);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

._segment_1h31w_128 {
  padding: var(--spacing-3) var(--spacing-6);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

._segment_1h31w_128:hover:not(._segmentActive_1h31w_148) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

._segmentActive_1h31w_148 {
  background: var(--color-accent);
  color: var(--color-text-inverted);
}

/* Checkbox toggle */
._checkboxLabel_1h31w_159 {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

._checkbox_1h31w_159 {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

/* Permissions */
._permissions_1h31w_175 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
}

._permissionItem_1h31w_181 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-panel-strong);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

._permissionGranted_1h31w_191 {
  color: var(--color-accent);
}

._permissionDenied_1h31w_195 {
  color: var(--color-text-muted);
  opacity: 0.6;
}

._permissionIcon_1h31w_200 {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

._permissionName_1h31w_205 {
  text-transform: capitalize;
}

/* Cameras */
._cameras_1h31w_210 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
}

._cameraSerial_1h31w_216 {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-panel-strong);
  padding: var(--spacing-4) var(--spacing-6);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}

/* Meta section (User ID, etc) */
._metaSection_1h31w_226 {
  background: transparent;
  border: 1px dashed var(--color-border);
}

._metaSection_1h31w_226 ._sectionTitle_1h31w_31 {
  display: none;
}

._serviceBadge_1h31w_235 {
  background: rgba(255, 159, 67, 0.15);
  color: #ff9f43;
  padding: var(--spacing-2) var(--spacing-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
/**
 * Design Tokens for Matrix Tank UI
 *
 * These CSS custom properties define the visual foundation of the application.
 * Import this file in your components and use variables for consistent styling.
 *
 * Usage: var(--color-accent) or var(--spacing-md)
 */

:root {
  /* ==========================================================================
     Colors - Core Palette
     ========================================================================== */

  /* Background colors */
  --color-bg: #030a0f;
  --color-bg-rgb: 3, 10, 15;
  --color-panel: #0a131a;
  --color-panel-rgb: 10, 19, 26;
  --color-panel-strong: #0f1f29;
  --color-surface: rgba(10, 19, 26, 0.9);

  /* Border colors */
  --color-border: #102420;
  --color-border-light: rgba(16, 36, 32, 0.5);

  /* Accent colors - Matrix green theme */
  --color-accent: #68ff9a;
  --color-accent-rgb: 104, 255, 154;
  --color-accent-strong: #46d981;
  --color-accent-muted: rgba(104, 255, 154, 0.15);
  --color-accent-glow: rgba(104, 255, 154, 0.25);

  /* Text colors */
  --color-text: #dfe8e1;
  --color-text-muted: #8fbba8;
  --color-text-subtle: rgba(143, 187, 168, 0.7);
  --color-text-inverted: #041408;

  /* Semantic colors */
  --color-warning: #ff9b64;
  --color-warning-rgb: 255, 155, 100;
  --color-danger: #ff6b6b;
  --color-danger-rgb: 255, 107, 107;
  --color-info: #4da6ff;
  --color-info-rgb: 77, 166, 255;
  --color-success: var(--color-accent);

  /* ==========================================================================
     Typography
     ========================================================================== */

  --font-sans: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.05em;

  /* ==========================================================================
     Spacing
     ========================================================================== */

  --spacing-0: 0;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 10px;
  --spacing-6: 12px;
  --spacing-8: 16px;
  --spacing-10: 20px;
  --spacing-12: 24px;
  --spacing-16: 32px;
  --spacing-20: 40px;
  --spacing-24: 48px;

  /* Semantic spacing aliases */
  --spacing-xs: var(--spacing-2);
  --spacing-sm: var(--spacing-4);
  --spacing-md: var(--spacing-6);
  --spacing-lg: var(--spacing-8);
  --spacing-xl: var(--spacing-12);
  --spacing-2xl: var(--spacing-16);

  /* ==========================================================================
     Layout
     ========================================================================== */

  --topbar-height: 68px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 60px;

  /* ==========================================================================
     Border Radius
     ========================================================================== */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-full: 999px;

  /* ==========================================================================
     Shadows
     ========================================================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);

  --shadow-accent: 0 10px 30px rgba(var(--color-accent-rgb), 0.15);
  --shadow-accent-lg: 0 16px 40px rgba(var(--color-accent-rgb), 0.2);
  --shadow-danger: 0 10px 30px rgba(var(--color-danger-rgb), 0.2);
  --shadow-warning: 0 10px 30px rgba(var(--color-warning-rgb), 0.2);

  /* Glow effects for Matrix theme */
  --glow-accent: 0 0 6px rgba(var(--color-accent-rgb), 0.25),
                 0 0 12px rgba(var(--color-accent-rgb), 0.18);
  --glow-accent-strong: 0 0 8px rgba(var(--color-accent-rgb), 0.35),
                        0 0 14px rgba(var(--color-accent-rgb), 0.25);

  /* ==========================================================================
     Transitions
     ========================================================================== */

  --transition-fast: 80ms ease;
  --transition-normal: 120ms ease;
  --transition-slow: 200ms ease;
  --transition-slower: 300ms ease;

  /* Specific transitions */
  --transition-transform: transform var(--transition-normal);
  --transition-opacity: opacity var(--transition-normal);
  --transition-colors: color var(--transition-normal),
                       background-color var(--transition-normal),
                       border-color var(--transition-normal);
  --transition-shadow: box-shadow var(--transition-normal);

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */

  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;
  --z-toast: 70;

  /* ==========================================================================
     Icon Sizes
     ========================================================================== */

  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ==========================================================================
     Breakpoints
     Note: CSS custom properties cannot be used directly in media queries.
     These are documented here for reference and consistency across the codebase.
     Use these values directly in media queries: @media (min-width: 768px)
     ========================================================================== */

  --breakpoint-xs: 480px;  /* Mobile small */
  --breakpoint-sm: 600px;  /* Mobile large */
  --breakpoint-md: 768px;  /* Tablet */
  --breakpoint-lg: 900px;  /* Desktop small */
  --breakpoint-xl: 1200px; /* Desktop large */
}

/* ==========================================================================
   Gradients (as classes since CSS vars don't work well for gradients)
   ========================================================================== */

.gradient-accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
}

.gradient-panel {
  background: linear-gradient(90deg, rgba(7, 15, 19, 0.9), rgba(8, 20, 16, 0.8));
}

.gradient-bg {
  background: radial-gradient(circle at 10% 10%, rgba(var(--color-accent-rgb), 0.06), transparent 28%),
              radial-gradient(circle at 90% 30%, rgba(77, 166, 255, 0.08), transparent 24%),
              var(--color-bg);
}


:root {
  --topbar-h: 68px;
  /* Legacy aliases - reference token variables for consistency */
  --bg: var(--color-bg);
  --panel: var(--color-panel);
  --panel-strong: var(--color-panel-strong);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --accent-rgb: var(--color-accent-rgb);
  --accent-strong: var(--color-accent-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 10% 10%, rgba(104, 255, 154, 0.06), transparent 28%),
    radial-gradient(circle at 90% 30%, rgba(72, 167, 255, 0.08), transparent 24%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
}

a {
  color: var(--accent);
}

button {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: 1px solid var(--accent);
  color: #041408;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(104, 255, 154, 0.15);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

/* Segmented control - two-option toggle */

.segmented-control {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(10, 19, 26, 0.5);
}

.segmented-control button {
  padding: 6px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.segmented-control button:hover:not(.active):not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.segmented-control button.active {
  background: var(--accent);
  color: #041408;
}

.segmented-control button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.segmented-control.disabled {
  opacity: 0.5;
}

/* Icon utility classes - Heroicons */

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

.icon-xs {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
}

.icon-sm {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}

.icon-lg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline-block;
}

.icon-xl {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  display: inline-block;
}

button.ghost.ftp-active {
  border-color: #4da6ff;
  color: #4da6ff;
  background: rgba(77, 166, 255, 0.1);
}

input,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 19, 26, 0.9);
  color: var(--text);
  font-family: inherit;
}

.app-shell {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(7, 15, 19, 0.9), rgba(8, 20, 16, 0.8));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
  min-height: var(--topbar-h);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.brand-mark {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.brand-sub {
  color: var(--muted);
  font-size: 14px;
}

.brand-subtle {
  font-size: 12px;
  color: var(--muted);
  margin-left: 10px;
  letter-spacing: 0.04em;
  opacity: 0.8;
  position: relative;
}

.matrix-glow {
  text-shadow: 0 0 6px rgba(104, 255, 154, 0.25), 0 0 12px rgba(104, 255, 154, 0.18);
  animation: subtlePulse 3.5s ease-in-out infinite;
}

@keyframes subtlePulse {
  0%, 100% {
    opacity: 0.8;
    text-shadow: 0 0 6px rgba(104, 255, 154, 0.25), 0 0 12px rgba(104, 255, 154, 0.18);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(104, 255, 154, 0.35), 0 0 14px rgba(104, 255, 154, 0.25);
  }
}

.nav-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-tabs .tab {
  background: rgba(16, 31, 37, 0.7);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
}

.nav-tabs .tab.active {
  border-color: var(--accent);
  color: #041408;
  background: var(--accent);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-main {
  padding: 16px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.overview-header {
  position: sticky;
  top: 8px;
  z-index: 6;
  background: transparent;
  backdrop-filter: none;
  padding: 6px 60px 10px;
}

.filters {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 6px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip {
  background: rgba(16, 31, 37, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chip:hover {
  background: rgba(30, 50, 60, 0.8);
  border-color: var(--text-muted);
}

.chip.active {
  border-color: var(--accent);
  color: #041408;
  background: var(--accent);
}

.chip.active:hover {
  background: var(--accent);
  filter: brightness(1.1);
}

.chip-select {
  background: rgba(16, 31, 37, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  min-width: 70px;
}

.chip-select:hover {
  background: rgba(30, 50, 60, 0.8);
  border-color: var(--text-muted);
}

.chip-select:focus {
  outline: none;
  border-color: var(--accent);
}

.chip-select option {
  background: #0d1a1a;
  color: var(--text);
}

.search {
  min-width: 220px;
}

.push-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.refresh-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(16, 31, 37, 0.8);
  color: var(--text);
}

.rate-pill {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: rgba(16, 28, 34, 0.6);
  font-weight: 600;
}

/* Health Indicator */

.health-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.health-indicator:hover {
  background: rgba(255, 255, 255, 0.1);
}

.health-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  color: var(--bg);
}

.health-icon {
  font-size: 8px;
  line-height: 1;
}

.health-healthy .health-dot {
  background: #66ffb7;
  box-shadow: 0 0 6px #66ffb7aa;
}

.health-degraded .health-dot {
  background: #ffd666;
  box-shadow: 0 0 6px #ffd666aa;
}

.health-critical .health-dot {
  background: #ff6b6b;
  box-shadow: 0 0 6px #ff6b6baa;
  animation: health-pulse 1.5s ease-in-out infinite;
}

.health-unknown .health-dot {
  background: var(--muted);
}

@keyframes health-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  border-radius: 999px;
  margin: 0 6px;
  align-self: center;
  opacity: 0.7;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.stat-card {
  background: linear-gradient(180deg, rgba(10, 19, 26, 0.9), rgba(8, 14, 18, 0.9));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(104, 255, 154, 0.08), transparent 35%);
  pointer-events: none;
}

.stat-card .label {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
}

.stat-card .value.accent {
  color: var(--accent);
}

.stat-grid .stat-card.active {
  border-color: var(--stat-color, var(--accent));
  box-shadow: 0 0 0 1px var(--stat-color, var(--accent));
}

.card-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(102, 255, 183, 0.18), rgba(102, 255, 183, 0.42));
  opacity: 0.85;
  animation: cardFill linear forwards;
  transform-origin: right center;
  pointer-events: none;
}

@keyframes cardFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.card-fill-static {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(102, 255, 183, 0.18), rgba(102, 255, 183, 0.42));
  opacity: 0.85;
  pointer-events: none;
}

.card-fill-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(102, 255, 183, 0.18), rgba(102, 255, 183, 0.42));
  pointer-events: none;
  animation: cardPulse 2s ease-in-out infinite;
}

@keyframes cardPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 380px));
  grid-auto-rows: auto;
  justify-content: center;
  gap: 24px 24px;
  overflow-y: auto;
  padding: 6px 10px 30px 10px;
  flex: 1;
  min-height: 0;
  align-content: start;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--muted);
  text-align: center;
  gap: 8px;
}

.empty-message {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.empty-sub {
  font-size: 14px;
  color: var(--muted);
}

.matrix-flicker {
  position: relative;
  animation: flicker 1.6s infinite;
}

.matrix-flicker::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(104, 255, 154, 0.06), rgba(72, 167, 255, 0.04));
  filter: blur(6px);
  opacity: 0.6;
  pointer-events: none;
}

@keyframes flicker {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 0 0 6px rgba(104, 255, 154, 0.35);
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 12px rgba(104, 255, 154, 0.6);
  }
}

.thumb-card {
  background: rgba(10, 19, 26, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  animation: fadeIn 180ms ease-out;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.thumb-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0a0f13;
  flex: 1;
}

.thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.thumb-card:hover .thumb-actions {
  opacity: 1;
  pointer-events: auto;
}

.icon-btn {
  background: rgba(5, 12, 10, 0.85);
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(104, 255, 154, 0.18);
}

.thumb-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(104, 255, 154, 0.2);
}

.thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 12px;
}

.thumb-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 76px;
}

.thumb-meta .name {
  font-weight: 600;
}

.subline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.status-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

/* Multi-select mode */

.thumb-card.multi-mode {
  cursor: pointer;
}

.thumb-card.multi-mode:hover {
  border-color: var(--accent);
}

.thumb-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(104, 255, 154, 0.3);
}

.thumb-card.selected .thumb-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(104, 255, 154, 0.1);
  pointer-events: none;
}

.multi-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(10, 19, 26, 0.8);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 150ms ease;
}

.multi-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 700;
}

.multi-checkbox .check-mark {
  width: 6px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.multi-count {
  color: var(--text);
  font-weight: 500;
  padding: 0 16px;
  flex: 1;
}

.multi-loaded-hint {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
}

.chip.multi-clear {
  border-color: #666;
}

.chip.multi-cancel {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.chip.multi-cancel:hover {
  background: rgba(255, 107, 107, 0.1);
}

.chip.multi-done {
  transition: all 150ms ease;
}

.chip.multi-active,
.chip.active {
  background: rgba(104, 255, 154, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.persons-line {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.status-pill {
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.panel {
  position: relative;
  background: rgba(10, 19, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.list-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-right: 6px;
  margin-top: 12px;
  flex: 1;
}

.list-sticky {
  position: sticky;
  top: 6px;
  z-index: 3;
  background: rgba(8, 14, 18, 0.95);
  padding: 8px 6px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.list-sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 -10px 0;
  height: 14px;
  background: linear-gradient(180deg, rgba(8, 14, 18, 0.9), rgba(8, 14, 18, 0));
  pointer-events: none;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: rgba(8, 14, 18, 0.95);
  pointer-events: none;
  z-index: 2;
}

.list-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: rgba(8, 14, 18, 0.9);
}

.list-card.active {
  border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(104, 255, 154, 0.18);
}

.thumb {
  position: relative;
  width: 100%;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #0c1318;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb .thumb-fallback {
  font-size: 12px;
}

.meta .title {
  font-weight: 600;
}

.meta .sub {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.pill.warning {
  border-color: var(--warning);
  color: var(--warning);
}

.content {
  background: rgba(10, 19, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 14, 18, 0.9);
  margin-bottom: 12px;
}

.row {
  display: flex;
  align-items: center;
}

.row.gap {
  gap: 8px;
}

.row.gap-xs {
  gap: 4px;
}

.row.space-between {
  justify-content: space-between;
}

.row.end {
  justify-content: flex-end;
}

.viz-block {
  margin: 10px 0 12px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.viz-frame {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #0a0f14;
}

/* Wrapper that sizes to the actual rendered image */

.viz-frame .img-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  line-height: 0; /* Prevent extra space below image */
}

.viz-frame .img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* wasm-vips processing overlay - centered loader */

.vips-processing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 19, 24, 0.6);
  backdrop-filter: blur(2px);
  z-index: 40;
}

.vips-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vips-loader-ring {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(102, 255, 183, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vips-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.vips-loader span {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

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

/* Before/After comparison label */

.comparison-label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 20;
}

/* Overlay now matches the image size, not the container */

.viz-frame .img-wrapper .overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.viz-frame .img-wrapper .overlay .face-box {
  pointer-events: auto;
  z-index: 20; /* Above crop-overlay (z-index: 10) */
}

/* In crop mode, face boxes are visual-only -- don't intercept crop frame events */

.viz-frame .img-wrapper .overlay .crop-mode-faces .face-box {
  pointer-events: none;
}

.viz-frame .img-wrapper .overlay .crop-overlay {
  pointer-events: auto;
}

.viz-frame .img-wrapper .overlay .crop-overlay .handle {
  pointer-events: auto;
}

/* Legacy support for direct img in viz-frame (if wrapper not used) */

.viz-frame > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.viz-frame > .overlay {
  position: absolute;
  inset: 0;
}

.viz-frame .crop-overlay {
  position: absolute;
  border: 2px solid #66ffb7;
  box-shadow: 0 0 0 1px rgba(102, 255, 183, 0.35);
  cursor: move;
  z-index: 10;
}

.viz-frame .crop-overlay.pending-crop {
  border: 2px dashed #ffcc00;
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.35);
  cursor: default;
}

/* Preview-only crop overlay in develop mode - shows crop area without interaction */

.viz-frame .crop-overlay.preview-only {
  border: 2px solid rgba(102, 255, 183, 0.7);
  box-shadow: 0 0 0 1px rgba(102, 255, 183, 0.25);
  cursor: default;
}

.viz-frame .crop-overlay.preview-only .crop-grid {
  opacity: 0.5;
}

.viz-frame .handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #66ffb7;
  border: 2px solid #043;
  border-radius: 3px;
  z-index: 10;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.handle-nw { top: -8px; left: -8px; cursor: nwse-resize; }

.handle-n { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }

.handle-ne { top: -8px; right: -8px; cursor: nesw-resize; }

.handle-e { top: 50%; right: -8px; transform: translateY(-50%); cursor: ew-resize; }

.handle-se { bottom: -8px; right: -8px; cursor: nwse-resize; }

.handle-s { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }

.handle-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }

.handle-w { top: 50%; left: -8px; transform: translateY(-50%); cursor: ew-resize; }

/* Grid overlay for leveling (6x6 with rule of thirds emphasized) */

.crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crop-grid-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
}

/* Horizontal lines */

.crop-grid-h {
  left: 0;
  right: 0;
  height: 1px;
}

/* Vertical lines */

.crop-grid-v {
  top: 0;
  bottom: 0;
  width: 1px;
}

/* Rule of thirds lines - brighter */

.crop-grid-thirds {
  background: rgba(255, 255, 255, 0.35);
}

/* Center lines - medium brightness, dashed */

.crop-grid-center {
  background: rgba(255, 255, 255, 0.25);
}

.crop-mask {
  position: absolute;
  background: rgba(5, 10, 12, 0.78);
}

.face-label {
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.face-unassign {
  background: transparent;
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* Face overlay buttons container */

.face-buttons {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 5;
}

/* Show buttons on face box hover */

.face-box:hover .face-buttons {
  opacity: 1;
}

/* Base face button style */

.face-btn {
  background: rgba(5, 12, 10, 0.85);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  min-width: 16px;
  min-height: 16px;
  max-width: 24px;
  max-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Smaller buttons for small face detections */

.face-box.face-small .face-btn {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Position buttons outside box when face is very small */

.face-box.face-tiny .face-buttons {
  top: -20px;
  right: 0;
}

.face-box.face-tiny .face-btn {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.face-btn:hover {
  background: rgba(8, 18, 14, 0.95);
  transform: none;
  box-shadow: none;
}

/* Ignore button - red/danger style */

.face-btn.face-ignore {
  border-color: rgba(255, 107, 107, 0.6);
  color: #ff6b6b;
}

.face-btn.face-ignore:hover {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.15);
}

/* Unignore/restore button - green/accent style */

.face-btn.face-unignore {
  border-color: rgba(104, 255, 154, 0.6);
  color: var(--accent);
}

.face-btn.face-unignore:hover {
  border-color: var(--accent);
  background: rgba(104, 255, 154, 0.15);
}

/* Player name label below face box */

.face-name-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(5, 12, 10, 0.85);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 4;
}

/* Ignored face label */

.face-ignored-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(5, 12, 10, 0.7);
  border: 1px dashed #888;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ignored-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #66ffb7;
  color: #66ffb7;
  background: rgba(8, 14, 18, 0.8);
  display: grid;
  place-items: center;
  font-size: 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  z-index: 2000;
}

.modal {
  background: #0d171d;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  width: min(360px, 90vw);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.name-bar {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(19, 30, 35, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.label-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 12px;
}

.face-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

.face-row.active {
  border-color: var(--accent);
}

.neighbors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.neighbors-grid.one-row {
  grid-auto-rows: 150px;
  overflow: hidden;
}

.neighbor-thumb {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #0e131c;
  aspect-ratio: 1 / 1;
}

.neighbor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.neighbor-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.neighbor-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 19, 28, 0.85);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

.neighbor-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-shrink: 0;
}

.changelog-block {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.changelog-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.tagging-main {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: 1fr auto;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

/* Collapsed sidebar - photo takes full width */

.tagging-main.sidebar-collapsed {
  grid-template-columns: 1fr;
}

.tagging-main.sidebar-collapsed .tag-neighbors {
  display: none;
}

/* Collapsed faces bar - minimal height */

.tagging-main.faces-collapsed .tag-assign {
  grid-template-rows: auto;
}

.tagging-main.faces-collapsed .assign-stub {
  display: none;
}

.tag-photo {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tag-neighbors {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: opacity 150ms ease;
}

.tag-neighbors.collapsed {
  display: none;
}

/* Sidebar tab bar (Develop | IPTC) */

.sidebar-tabs {
  display: flex;
  gap: 4px;
  background: var(--panel);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.sidebar-tab {
  flex: 1;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 150ms ease;
}

.sidebar-tab:hover {
  color: var(--text);
}

.sidebar-tab.active {
  background: var(--color-accent);
  color: #041408;
}

.sidebar-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.tag-assign {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  text-align: center;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
}

.tag-assign.collapsed {
  grid-template-rows: auto;
}

.tag-assign.collapsed .assign-stub {
  display: none;
}

/* Toggle button styling */

.toggle-btn {
  font-size: 10px !important;
  padding: 2px 6px !important;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.toggle-btn:hover {
  opacity: 1;
}

.assign-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(19, 30, 35, 0.6);
  justify-content: center;
  margin: 0 auto;
}

.assign-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

.assign-names {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.assign-names .muted {
  font-size: 11px;
  padding: 0 4px;
}

.assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  padding: 2px 4px;
}

.assign-chip .chip-name {
  font-size: 11px !important;
  padding: 0 2px !important;
  min-width: unset;
}

.assign-chip .chip-remove {
  font-size: 11px !important;
  padding: 0 2px !important;
  min-width: unset;
  opacity: 0.6;
}

.assign-chip .chip-remove:hover {
  opacity: 1;
}

/* Manual names (not linked to a face) - dashed border, different color */

.assign-chip.manual {
  background: rgba(102, 183, 255, 0.1);
  border: 1px dashed rgba(102, 183, 255, 0.4);
}

.assign-chip.manual .chip-name {
  color: #66b7ff;
}

/* Soft-deleted manual names - grayed out, click to restore */

.assign-chip.soft-deleted {
  background: rgba(136, 136, 136, 0.1);
  border: 1px dashed rgba(136, 136, 136, 0.3);
  opacity: 0.6;
}

.assign-chip.soft-deleted:hover {
  opacity: 0.85;
  background: rgba(136, 136, 136, 0.2);
}

.assign-chip.soft-deleted .chip-name {
  color: #888;
}

.assign-chip.soft-deleted .chip-restore {
  font-size: 10px;
  color: #888;
  padding: 0 2px;
}

.bar-toggle-btn {
  font-size: 10px !important;
  padding: 2px 6px !important;
  min-width: unset;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.bar-toggle-btn:hover {
  opacity: 1;
}

.bar-add-btn {
  font-size: 12px !important;
  padding: 2px 8px !important;
  min-width: unset;
  opacity: 0.7;
  transition: opacity 150ms ease;
}

.bar-add-btn:hover {
  opacity: 1;
}

.assign-stub {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

.stub-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;
}

.stub-face {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px;
  background: rgba(12, 18, 24, 0.7);
  min-width: 90px;
  max-width: 110px;
  min-height: 90px;
  display: grid;
  place-items: center;
}

.stub-face .small {
  font-size: 12px;
}

.seraph-timeline {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.timeline-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-left: 16px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.timeline-item {
  position: relative;
  padding: 8px 10px 8px 14px;
  background: rgba(10, 16, 22, 0.75);
  border: 1px solid rgba(16, 36, 32, 0.6);
  border-radius: 8px;
  transition: border-color 150ms ease, background 150ms ease;
}

.timeline-item:hover {
  border-color: rgba(104, 255, 154, 0.25);
  background: rgba(10, 20, 26, 0.85);
}

.timeline-dot {
  position: absolute;
  left: -12px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(3, 10, 15, 0.9), 0 0 8px currentColor;
}

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timeline-source {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.timeline-status {
  font-size: 12px;
  color: var(--muted);
  text-transform: capitalize;
}

.timeline-ts {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  margin-left: auto;
}

.timeline-message {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.timeline-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(104, 255, 154, 0.3), rgba(104, 255, 154, 0.05));
  border-radius: 1px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-card {
  background: rgba(8, 14, 18, 0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  width: 380px;
  max-width: 90vw;
}

.suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.suggestion {
  background: rgba(16, 31, 37, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.eyebrow {
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 12px;
}

.loading-line {
  padding: 8px 0;
  color: var(--muted);
}

.error-text {
  color: var(--danger);
}

.viz-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.stage-wrap {
  display: flex;
  justify-content: center;
}

.stage-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(104, 255, 154, 0.18), transparent 28%),
    radial-gradient(circle at 70% 40%, rgba(72, 167, 255, 0.18), transparent 28%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

.login-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(104, 255, 154, 0.2), transparent 50%);
  filter: blur(60px);
  z-index: 0;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: 90vw;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 18, 0.92);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.login-terminal {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  color: var(--accent);
  background: rgba(5, 12, 10, 0.6);
  border: 1px solid rgba(104, 255, 154, 0.3);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 18px rgba(104, 255, 154, 0.12);
}

.terminal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.terminal-line + .terminal-line {
  margin-top: 6px;
}

.terminal-line.highlight {
  color: #b5ffd4;
  text-shadow: 0 0 6px rgba(104, 255, 154, 0.45);
}

.terminal-line.ghosted {
  color: rgba(104, 255, 154, 0.7);
}

.prompt-symbol {
  color: rgba(104, 255, 154, 0.9);
}

.terminal-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  color: var(--accent);
  background: rgba(5, 12, 10, 0.6);
  border: 1px solid rgba(104, 255, 154, 0.3);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 4px 0;
}

.terminal-field.flat {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 0;
}

.terminal-field.tight {
  margin-top: 0;
  margin-bottom: 0;
}

.terminal-input {
  background: transparent;
  border: none;
  color: var(--accent);
  flex: 1;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 18px;
  line-height: 1.3;
  outline: none;
  padding: 4px 0;
  caret-color: var(--accent);
}

.terminal-input::placeholder {
  color: rgba(104, 255, 154, 0.7);
}

.terminal-line.loading-line {
  margin-top: 8px;
  color: #b5ffd4;
  text-shadow: 0 0 6px rgba(104, 255, 154, 0.45);
}

.loading-dots {
  display: inline-block;
  width: 32px;
  height: 14px;
  margin-left: 6px;
  position: relative;
}

.loading-dots::after {
  content: "...";
  position: absolute;
  left: 0;
  animation: dots 1.2s steps(3, end) infinite;
}

.field span {
  font-size: 13px;
  color: var(--muted);
}

.cta {
  width: 100%;
  margin-top: 10px;
}

.hint {
  color: var(--muted);
  margin-top: 8px;
  font-size: 13px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dots {
  0% {
    content: "";
  }
  33% {
    content: ".";
  }
  66% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

@media (max-width: 960px) {
  .split {
    grid-template-columns: 1fr;
  }
  .panel {
    max-height: none;
  }
  .viz-grid {
    grid-template-columns: 1fr;
  }
  .thumb-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    overflow: visible;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stats overlay for viz image */

.stats-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(3, 10, 15, 0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--text);
  pointer-events: auto;
  z-index: 10;
  backdrop-filter: blur(4px);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 200ms ease, pointer-events 0s 200ms;
}

/* Click-through when hovering stats overlay (for crop handles underneath) */

.stats-overlay:hover {
  opacity: 0.15;
  pointer-events: none;
}

/* But keep hotkey toggle clickable by having it intercept events */

.stats-overlay .hotkey-toggle {
  pointer-events: auto;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  line-height: 1.4;
}

.stats-label {
  color: var(--muted);
}

.stats-value {
  color: var(--accent);
  font-weight: 500;
}

.stats-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.hotkey-toggle:hover {
  background: rgba(102, 255, 183, 0.1);
  margin: -2px -4px;
  padding: 2px 4px;
  border-radius: 4px;
}

.hotkey-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.hotkey-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.hotkey-row kbd {
  display: inline-block;
  background: rgba(102, 255, 183, 0.15);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 7px;
  font-family: inherit;
  font-size: 10px;
  color: var(--accent);
  min-width: 32px;
  text-align: center;
}

/* ==================== Person Modal ==================== */

.person-modal {
  width: min(420px, 92vw);
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

.person-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 14, 18, 0.95);
}

.person-modal .modal-header.draggable {
  cursor: grab;
  user-select: none;
}

.person-modal .modal-header.draggable:active {
  cursor: grabbing;
}

.person-modal .modal-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.person-modal .modal-icon {
  color: var(--accent);
  font-size: 12px;
}

.person-modal .modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}

.person-modal .modal-close:hover {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  transform: none;
  box-shadow: none;
}

.person-modal .modal-body {
  padding: 16px;
}

.person-modal .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.person-modal .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.person-modal .form-field:first-child {
  grid-column: 1 / -1;
}

.person-modal .form-field:nth-child(2),
.person-modal .form-field:nth-child(3) {
  grid-column: span 1;
}

.person-modal .form-field label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.person-modal .form-field input {
  padding: 8px 10px;
  font-size: 14px;
}

.person-modal .form-field-half {
  grid-column: span 1;
}

/* Suggestions container */

.person-modal .suggestions-container {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(5, 12, 10, 0.6);
}

.person-modal .suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(16, 31, 37, 0.5);
  border-bottom: 1px solid var(--border);
}

.person-modal .suggestions-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.person-modal .suggestions-count {
  font-size: 11px;
  color: var(--accent);
  background: rgba(104, 255, 154, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.person-modal .suggestions-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
}

.person-modal .suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: rgba(16, 31, 37, 0.4);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  text-align: left;
}

.person-modal .suggestion-item:last-child {
  margin-bottom: 0;
}

.person-modal .suggestion-item:hover {
  background: rgba(104, 255, 154, 0.08);
  border-color: var(--accent);
  transform: none;
  box-shadow: none;
}

.person-modal .suggestion-name {
  color: var(--text);
  font-size: 13px;
}

.person-modal .suggestion-jersey {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  background: rgba(104, 255, 154, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.person-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: rgba(8, 14, 18, 0.95);
}

/* Matrix theme enhancements */

.person-modal.matrix-theme {
  border: 1px solid rgba(104, 255, 154, 0.25);
  box-shadow: 0 0 30px rgba(104, 255, 154, 0.08), 0 20px 50px rgba(0, 0, 0, 0.5);
}

.person-modal.matrix-theme .modal-header {
  background: linear-gradient(180deg, rgba(104, 255, 154, 0.05), transparent);
}

.person-modal.matrix-theme .modal-header h4 {
  text-shadow: 0 0 8px rgba(104, 255, 154, 0.3);
}

.person-modal.matrix-theme .form-field input {
  border-color: rgba(104, 255, 154, 0.2);
}

.person-modal.matrix-theme .form-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(104, 255, 154, 0.1);
  outline: none;
}

.person-modal.matrix-theme .suggestions-container {
  border-color: rgba(104, 255, 154, 0.15);
}

.person-modal.matrix-theme .suggestion-item:hover {
  box-shadow: 0 0 12px rgba(104, 255, 154, 0.1);
}

/* Modal neighbors grid for similar faces */

.modal-neighbors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
}

.modal-neighbor-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(16, 31, 37, 0.5);
  border: 1px solid var(--border);
  transition: border-color 150ms ease;
}

.modal-neighbor-item:hover {
  border-color: var(--accent);
}

.modal-neighbor-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-neighbor-item .neighbor-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 18px;
}

.modal-neighbor-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 16px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.modal-neighbor-info .neighbor-score {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
}

.modal-neighbor-info .neighbor-name {
  font-size: 9px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   STATISTICS PAGE - MATRIX EDITION
   ============================================ */

.page-statistics {
  padding: 20px 24px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow-y: auto;
  height: 100%;
}

.page-statistics.matrix-mode {
  background: radial-gradient(ellipse at 50% 0%, rgba(104, 255, 154, 0.03), transparent 50%);
}

/* Matrix grid overlay */

.matrix-grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(104, 255, 154, 0.02) 1px, transparent 1px),
    linear-gradient(rgba(104, 255, 154, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  opacity: 0.5;
}

/* Loading state */

.stats-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}

.loading-matrix {
  display: flex;
  gap: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.loading-matrix span {
  animation: matrixFlicker 1.5s infinite;
  text-shadow: 0 0 10px var(--accent);
}

.loading-matrix span:nth-child(1) { animation-delay: 0s; }

.loading-matrix span:nth-child(2) { animation-delay: 0.1s; }

.loading-matrix span:nth-child(3) { animation-delay: 0.2s; }

.loading-matrix span:nth-child(4) { animation-delay: 0.3s; }

.loading-matrix span:nth-child(5) { animation-delay: 0.4s; }

.loading-matrix span:nth-child(6) { animation-delay: 0.5s; }

.loading-matrix span:nth-child(7) { animation-delay: 0.6s; }

@keyframes matrixFlicker {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(-2px); }
}

/* Header */

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.stats-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-header h1.matrix-title {
  text-shadow: 0 0 20px rgba(104, 255, 154, 0.3);
}

.title-icon {
  color: var(--accent);
  font-size: 24px;
}

/* Tabs */

.stats-tabs {
  display: flex;
  gap: 8px;
}

.stats-tab {
  background: rgba(16, 31, 37, 0.8);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.stats-tab:hover {
  background: rgba(16, 31, 37, 0.95);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.stats-tab.active {
  background: linear-gradient(135deg, rgba(104, 255, 154, 0.15), rgba(104, 255, 154, 0.05));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.1);
}

.tab-icon {
  font-size: 14px;
}

/* Summary Cards */

.stats-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px) {
  .stats-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-summary {
    grid-template-columns: 1fr;
  }
}

.summary-card {
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.9), rgba(10, 19, 26, 0.95));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 200ms ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(104, 255, 154, 0.3);
}

.summary-card .card-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}

.matrix-summary .summary-card .card-bg {
  opacity: 1;
}

.summary-card.total .card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(104, 255, 154, 0.08), transparent 70%); }

.summary-card.done .card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(102, 255, 183, 0.1), transparent 70%); }

.summary-card.processing .card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(140, 229, 255, 0.1), transparent 70%); }

.summary-card.attention .card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(255, 155, 100, 0.1), transparent 70%); }

.summary-card.rate .card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(162, 155, 255, 0.1), transparent 70%); }

.summary-card.pipeline-time .card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(104, 255, 154, 0.1), transparent 70%); }

.summary-icon {
  font-size: 20px;
  margin-bottom: 8px;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

.summary-card.total .summary-icon { color: var(--accent); }

.summary-card.done .summary-icon { color: #66ffb7; }

.summary-card.processing .summary-icon { color: #8ce5ff; }

.summary-card.attention .summary-icon { color: #ff9b64; }

.summary-card.rate .summary-icon { color: #a29bff; }

.summary-card.pipeline-time .summary-icon { color: var(--accent); }

.summary-value {
  font-size: 32px;
  font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

.summary-card.total .summary-value { color: var(--text); }

.summary-card.done .summary-value { color: #66ffb7; }

.summary-card.processing .summary-value { color: #8ce5ff; }

.summary-card.attention .summary-value { color: #ff9b64; }

.summary-card.rate .summary-value { color: #a29bff; }

.summary-card.pipeline-time .summary-value { color: var(--accent); }

.matrix-summary .summary-card .summary-value {
  text-shadow: 0 0 15px currentColor;
}

.summary-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

/* Stats Content */

.stats-content {
  position: relative;
  z-index: 1;
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

/* Stats Section */

.stats-section {
  background: rgba(10, 19, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}

.matrix-content .stats-section {
  box-shadow: 0 0 40px rgba(104, 255, 154, 0.03);
}

.section-header {
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  color: var(--accent);
  font-size: 18px;
}

.stats-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* Unified Stats Loading */

.stats-loading-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px;
  color: var(--muted);
  font-size: 14px;
}

/* Unified Stat Cards - consistent styling across all stats tabs */

.stat-cards-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.stat-cards-grid .stat-card {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.stat-cards-grid .stat-card:hover {
  border-color: var(--stat-color, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.stat-cards-grid .stat-card.clickable {
  cursor: pointer;
}

.stat-cards-grid .stat-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.15);
}

.stat-cards-grid .stat-card.active {
  border-color: var(--stat-color, var(--accent));
  box-shadow: 0 0 0 1px var(--stat-color, var(--accent));
}

.stat-cards-grid .stat-card .stat-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  color: var(--stat-color, var(--accent));
}

.stat-cards-grid .stat-card .stat-icon.pulse {
  animation: statIconPulse 1.5s ease-in-out infinite;
}

@keyframes statIconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.stat-cards-grid .stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--stat-color, var(--accent));
  display: block;
  margin-bottom: 6px;
  font-family: "IBM Plex Mono", monospace;
}

.stat-cards-grid .stat-card .stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stat card color variants */

.stat-cards-grid .stat-card.total { --stat-color: var(--accent); }

.stat-cards-grid .stat-card.done { --stat-color: #66ffb7; }

.stat-cards-grid .stat-card.processing { --stat-color: #8ce5ff; }

.stat-cards-grid .stat-card.pending { --stat-color: #ffd666; }

.stat-cards-grid .stat-card.error { --stat-color: #ff6b6b; }

.stat-cards-grid .stat-card.warning { --stat-color: #ff9b64; }

.stat-cards-grid .stat-card.info { --stat-color: #a29bff; }

/* Stats subsections */

.stats-subsection {
  margin-top: 24px;
}

.stats-subsection h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Stats data lists */

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-list-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(16, 31, 37, 0.5);
  border-radius: 8px;
  font-size: 13px;
}

.stats-list-item:hover {
  background: rgba(16, 31, 37, 0.8);
}

.stats-list-item .item-name {
  color: var(--text);
  font-weight: 500;
}

.stats-list-item .item-meta {
  color: var(--muted);
  font-size: 12px;
}

.stats-list-item .item-value {
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
}

.no-data {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

/* Service Cards */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.service-card {
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  border-color: var(--service-color, var(--accent));
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.service-card.expanded {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .service-card.expanded {
    grid-column: span 1;
  }
}

.service-card.matrix-card {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.service-card .card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.service-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.service-indicator {
  position: relative;
  width: 12px;
  height: 48px;
}

.service-color {
  width: 8px;
  height: 100%;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.service-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.service-pulse.active {
  animation: servicePulse 2s infinite;
}

@keyframes servicePulse {
  0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

.service-info {
  flex: 1;
}

.service-name {
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
}

.service-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.service-stats {
  text-align: right;
}

.service-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 22px;
  font-weight: 700;
}

.service-expand {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}

/* Step Breakdown */

.service-steps {
  margin-top: 18px;
  border-top: 1px solid rgba(104, 255, 154, 0.1);
  padding-top: 14px;
  animation: fadeSlideIn 200ms ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.steps-header {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.step-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(16, 36, 32, 0.4);
  font-size: 13px;
  align-items: center;
}

.step-row:last-of-type {
  border-bottom: none;
}

.step-name {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.step-time {
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  font-size: 12px;
  text-align: right;
}

.step-note {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  margin-top: 12px;
  opacity: 0.7;
}

/* Pipeline Flow */

.pipeline-flow {
  background: rgba(10, 19, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(8px);
}

.pipeline-flow h3 {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-icon {
  color: var(--accent);
  font-size: 18px;
}

.flow-container {
  position: relative;
  padding: 20px 0;
}

.flow-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}

.matrix-flow .flow-track {
  background: linear-gradient(90deg,
    #ff9b6440, #66ffb740, #8ce5ff40, #a29bff40
  );
  box-shadow: 0 0 10px rgba(104, 255, 154, 0.2);
}

.flow-nodes {
  display: flex;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  position: relative;
}

.flow-bar {
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  transition: all 200ms ease;
  min-width: 100px;
}

.flow-bar.animated {
  animation: flowPulse 3s infinite;
}

@keyframes flowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.flow-bar:hover {
  transform: scale(1.05);
}

.flow-service {
  white-space: nowrap;
}

.flow-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.flow-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
}

.flow-pct {
  font-size: 10px;
  color: var(--muted);
}

.flow-connector {
  position: absolute;
  right: -18px;
  top: 18px;
  z-index: 2;
}

.flow-connector.pulse svg path {
  animation: arrowPulse 1.5s infinite;
}

/* Proportional Flow Bar */

.flow-bar-container {
  margin: 16px 0 24px;
}

.flow-bar-track {
  display: flex;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
}

.flow-bar-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.flow-bar-segment:hover {
  filter: brightness(1.15);
  z-index: 1;
}

.flow-bar-segment.small {
  /* Small segments get the same styling as regular segments */
}

.flow-bar-segment.animated {
  animation: segmentGlow 3s infinite;
}

@keyframes segmentGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

.segment-label {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.segment-pct {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-family: "IBM Plex Mono", monospace;
}

/* Tiny segment (< 2%) - thin sliver with popout */

.flow-bar-segment.tiny {
  position: relative;
  min-width: 4px !important;
  max-width: 6px;
  cursor: pointer;
}

.flow-bar-segment.tiny:hover {
  min-width: 6px !important;
  max-width: 8px;
}

.segment-popout {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 31, 41, 0.95);
  border: 1px solid;
  border-radius: 6px;
  padding: 6px 10px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.segment-popout::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: inherit;
}

.flow-bar-segment.tiny:hover .segment-popout {
  opacity: 1;
}

.popout-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.popout-pct {
  font-size: 12px;
  font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
}

/* Flow Legend */

.flow-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

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

.legend-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.legend-desc {
  font-size: 11px;
  color: var(--muted);
}

.legend-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.legend-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
}

.legend-pct {
  font-size: 11px;
  color: var(--muted);
}

/* Flow Total */

.flow-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.total-label {
  font-size: 13px;
  color: var(--muted);
}

.total-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Image Search */

.image-search {
  position: relative;
  margin-bottom: 24px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--muted);
  z-index: 1;
}

.image-search .search-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background: rgba(15, 31, 41, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  transition: all 200ms ease;
}

.image-search .search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(104, 255, 154, 0.1);
}

.matrix-search .search-input:focus {
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.15);
}

.search-loading {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.loading-pulse {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  animation: loadingPulse 1s infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(15, 31, 41, 0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 100ms ease;
  border-bottom: 1px solid rgba(16, 36, 32, 0.5);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background: rgba(104, 255, 154, 0.05);
}

.result-filename {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}

.result-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(104, 255, 154, 0.1);
  color: var(--accent);
}

.result-status.status-done { color: #66ffb7; background: rgba(102, 255, 183, 0.1); }

.result-status.status-error { color: #ff6b6b; background: rgba(255, 107, 107, 0.1); }

.result-status.status-processing { color: #8ce5ff; background: rgba(140, 229, 255, 0.1); }

/* Pipeline Timeline */

.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: rgba(15, 31, 41, 0.5);
  border: 1px dashed var(--border);
  border-radius: 12px;
  min-height: 200px;
}

.timeline-empty.matrix-empty {
  border-color: rgba(104, 255, 154, 0.2);
}

.empty-icon {
  font-size: 48px;
  color: var(--muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.matrix-empty .empty-icon {
  color: var(--accent);
  text-shadow: 0 0 20px rgba(104, 255, 154, 0.3);
  animation: emptyPulse 3s infinite;
}

@keyframes emptyPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.empty-text {
  color: var(--muted);
  font-size: 14px;
  max-width: 300px;
}

.pipeline-timeline {
  background: rgba(15, 31, 41, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 500px;
}

.matrix-timeline {
  border-color: rgba(104, 255, 154, 0.2);
  box-shadow: 0 0 30px rgba(104, 255, 154, 0.05);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(10, 19, 26, 0.9);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.timeline-file-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-filename {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}

.timeline-id {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}

.timeline-event-count {
  font-size: 12px;
  color: var(--accent);
  background: rgba(104, 255, 154, 0.1);
  padding: 4px 10px;
  border-radius: 12px;
}

.timeline-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 16px;
}

.timeline-events {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-event {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 6px 0;
}

.timeline-event.matrix-glow-subtle:hover {
  background: rgba(104, 255, 154, 0.02);
}

.timeline-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
  border: 2px solid rgba(3, 10, 15, 0.8);
}

.timeline-line {
  position: absolute;
  left: 4px;
  top: 18px;
  bottom: -6px;
  width: 2px;
  background: var(--border);
}

.timeline-content {
  flex: 1;
  min-width: 0;
}

.timeline-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.timeline-message {
  color: var(--text);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timeline-text {
  color: var(--text);
}

.timeline-step {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timeline-duration {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  background: rgba(104, 255, 154, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.timeline-extra {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.timeline-tag {
  font-size: 10px;
  color: var(--muted);
  background: rgba(16, 31, 37, 0.8);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
}

/* Responsive */

@media (max-width: 900px) {
  .stats-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-header h1 {
    font-size: 22px;
  }

  .flow-nodes {
    flex-wrap: wrap;
  }

  .flow-connector {
    display: none;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .page-statistics {
    padding: 16px;
  }

  .stats-section {
    padding: 16px;
  }

  .summary-value {
    font-size: 24px;
  }

  .flow-bar {
    min-width: auto;
    padding: 10px 12px;
    font-size: 11px;
  }
}

/* ============================================================================
   Camera Statistics Tab
   ============================================================================ */

.camera-stats-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--muted);
  font-size: 14px;
}

.camera-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.camera-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.camera-summary-card {
  flex: 1;
  min-width: 120px;
  max-width: 180px;
  background: linear-gradient(135deg, rgba(16, 31, 37, 0.9), rgba(10, 19, 26, 0.9));
  border: 1px solid rgba(104, 255, 154, 0.15);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.camera-summary-card .summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}

.camera-summary-card .summary-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* Bar Chart Component */

.bar-chart {
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: all 200ms ease;
}

.bar-chart:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.bar-chart h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.bar-chart.empty {
  opacity: 0.6;
}

.bar-chart .no-data {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

.bar-chart-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-item {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.bar-track {
  height: 18px;
  background: rgba(16, 36, 32, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

.bar-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
}

/* Matrix styling for camera stats */

.camera-stats-grid.matrix-grid .camera-summary-card {
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.1);
}

.bar-chart.matrix-chart {
  box-shadow: 0 0 15px rgba(104, 255, 154, 0.05);
}

.bar-chart.matrix-chart .bar-fill {
  animation: barGlow 2s infinite alternate;
}

@keyframes barGlow {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }

  .camera-summary {
    flex-direction: column;
  }

  .camera-summary-card {
    max-width: none;
  }

  .bar-item {
    grid-template-columns: 80px 1fr 35px;
  }
}

/* ====================================
   Archive Status Styles
   ==================================== */

.archive-stats-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  padding: 40px;
  justify-content: center;
}

.archive-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.archive-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.archive-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  flex: 1;
  max-width: 180px;
  transition: all 0.3s;
}

.archive-summary-card.active {
  border-color: var(--matrix-green);
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.15);
}

.archive-summary-card.current-job {
  border-color: #ff9b64;
  background: rgba(255, 155, 100, 0.05);
}

.archive-summary-card .summary-icon {
  font-size: 24px;
  opacity: 0.7;
}

.archive-summary-card .summary-icon.pulse {
  animation: iconPulse 1s infinite;
}

@keyframes iconPulse {
  0%, 100% { opacity: 0.7; transform: rotate(0deg); }
  50% { opacity: 1; transform: rotate(180deg); }
}

.archive-summary-card .summary-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
}

.archive-summary-card .summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.recent-archives {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.recent-archives h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.archives-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--background);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.archive-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--matrix-green);
  font-weight: 500;
}

.archive-stats {
  display: flex;
  gap: 16px;
}

.archive-stat {
  font-size: 12px;
  color: var(--text-muted);
}

.archive-stat strong {
  color: var(--text);
  font-weight: 600;
}

.archive-stat.error strong {
  color: #ff6b6b;
}

.archive-time {
  font-size: 11px;
  color: var(--text-muted);
  font-family: "IBM Plex Mono", monospace;
}

.no-archives {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

@media (max-width: 768px) {
  .archive-summary {
    flex-direction: column;
  }

  .archive-summary-card {
    max-width: none;
  }

  .archive-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .archive-stats {
    flex-wrap: wrap;
  }
}

/* ====================================
   Date Filter Styles
   ==================================== */

.date-filter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.filter-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-btn {
  padding: 6px 12px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.preset-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.preset-btn.active {
  background: var(--matrix-green);
  border-color: var(--matrix-green);
  color: var(--background);
  font-weight: 500;
}

.filter-custom {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-custom label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.filter-custom input[type="date"] {
  padding: 6px 10px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
}

.filter-custom input[type="date"]:focus {
  outline: none;
  border-color: var(--matrix-green);
}

.clear-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.clear-btn:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.filter-info {
  font-size: 12px;
  color: var(--matrix-green);
}

.filter-info strong {
  font-weight: 600;
}

.date-filter.matrix-filter {
  box-shadow: 0 0 15px rgba(104, 255, 154, 0.05);
}

.date-filter.matrix-filter .preset-btn.active {
  box-shadow: 0 0 10px rgba(104, 255, 154, 0.3);
}

@media (max-width: 768px) {
  .filter-presets {
    flex-wrap: wrap;
  }

  .filter-custom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ====================================
   Detection Stats Styles
   ==================================== */

.detection-stats-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  padding: 40px;
  justify-content: center;
}

.detection-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detection-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.detection-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  flex: 1;
  max-width: 180px;
  transition: all 0.3s;
}

.detection-summary-card.highlight {
  border-color: var(--matrix-green);
  background: rgba(104, 255, 154, 0.05);
}

.detection-summary-card .summary-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
}

.detection-summary-card .summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.detection-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.detection-chart {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.detection-chart h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.chart-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  gap: 12px;
  align-items: center;
}

.roll-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.roll-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  background: var(--background);
  border-radius: 8px;
}

.roll-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--matrix-green);
  font-family: "IBM Plex Mono", monospace;
}

.roll-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .detection-summary {
    flex-direction: column;
  }

  .detection-summary-card {
    max-width: none;
  }

  .detection-charts {
    grid-template-columns: 1fr;
  }

  .chart-bar-row {
    grid-template-columns: 80px 1fr 40px;
  }

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

/* =============================================================================
   Timeline Chart & Trends Section
   ============================================================================= */

.timeline-chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--muted);
  gap: 12px;
}

.timeline-chart {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.timeline-chart .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.timeline-chart .chart-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.timeline-chart .chart-subtitle {
  color: var(--muted);
  font-size: 12px;
}

.line-chart-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.line-chart-svg .data-point {
  cursor: pointer;
  transition: r 150ms ease;
}

.line-chart-svg .data-point:hover {
  r: 5;
}

.timeline-stats {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.timeline-stat {
  flex: 1;
  min-width: 140px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid;
  padding: 10px 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-stat .stat-name {
  font-weight: 600;
  font-size: 13px;
}

.timeline-stat .stat-value {
  color: var(--muted);
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
}

/* Trends Section */

.trends-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trends-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.time-range-selector {
  display: flex;
  gap: 4px;
}

.time-range-selector .time-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease;
}

.time-range-selector .time-btn:hover {
  background: rgba(104, 255, 154, 0.1);
  border-color: var(--accent);
  color: var(--text);
}

.time-range-selector .time-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #041408;
}

.trends-controls .refresh-btn {
  padding: 6px 14px;
  font-size: 13px;
}

/* =============================================================================
   Loading Overlay & Animations
   ============================================================================= */

.metrics-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(3, 10, 15, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 12px;
  gap: 16px;
}

.stats-content {
  position: relative;
}

.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

.spinner-ring:nth-child(1) {
  border-top-color: #ff9b64;
  animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
  border-right-color: #66ffb7;
  animation-delay: 0.15s;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

.spinner-ring:nth-child(3) {
  border-bottom-color: #8ce5ff;
  animation-delay: 0.3s;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--muted);
  font-size: 14px;
  animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Enhanced loading pulse */

.loading-pulse {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Responsive adjustments for timeline */

@media (max-width: 768px) {
  .timeline-stats {
    flex-direction: column;
  }

  .timeline-stat {
    min-width: unset;
  }

  .trends-controls {
    flex-direction: column;
    gap: 12px;
  }

  .time-range-selector {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Toggle Switch Component */

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-left: 1rem;
  user-select: none;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
  background: var(--bg);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(102, 255, 183, 0.3);
}

.toggle-switch:hover .toggle-slider {
  background: var(--border-light);
}

.toggle-switch input:checked:hover + .toggle-slider {
  background: var(--accent-hover);
}

.toggle-label {
  font-size: 0.75rem;
  color: var(--muted);
  transition: color 0.2s ease;
}

.toggle-switch input:checked ~ .toggle-label {
  color: var(--accent);
}

/* ============================== */

/* Editor Sends Tab */

/* ============================== */

.editor-sends-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.editor-sends-summary {
  display: flex;
  gap: 16px;
}

.editor-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  text-align: center;
  min-width: 120px;
}

.editor-card-value {
  font-size: 2rem;
  font-weight: 600;
  color: #ff7eb3;
}

.editor-card-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reason-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reason-row {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  align-items: center;
  gap: 12px;
}

.reason-label {
  font-size: 0.85rem;
  color: var(--text);
}

.reason-bar-container {
  height: 20px;
  background: var(--bg-darker);
  border-radius: 4px;
  overflow: hidden;
}

.reason-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.reason-count {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

.recent-sends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-send-item {
  display: grid;
  grid-template-columns: 100px 1fr 180px;
  gap: 16px;
  padding: 10px 12px;
  background: var(--bg-darker);
  border-radius: 6px;
  font-size: 0.85rem;
}

.send-image {
  font-family: monospace;
  color: var(--accent);
}

.send-reason {
  color: var(--text);
  text-transform: capitalize;
}

.send-time {
  color: var(--muted);
  text-align: right;
}

.no-data {
  color: var(--muted);
  font-style: italic;
  padding: 16px;
  text-align: center;
}

/* Model Quality Tab Styles */

.model-quality-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.model-explainer {
  background: rgba(102, 183, 255, 0.06);
  border: 1px solid rgba(102, 183, 255, 0.2);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.explainer-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.explainer-item strong {
  color: var(--text);
}

.explainer-icon {
  font-size: 0.9rem;
  color: #66b7ff;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}

.model-status-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.model-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  text-align: center;
  min-width: 140px;
  flex: 1;
}

.model-card.enabled {
  border-color: rgba(104, 255, 154, 0.4);
  background: rgba(104, 255, 154, 0.05);
}

.model-card.disabled {
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.05);
}

.model-card.trained {
  border-color: rgba(100, 200, 255, 0.4);
  background: rgba(100, 200, 255, 0.05);
}

.model-card.not-trained {
  border-color: rgba(255, 193, 7, 0.4);
  background: rgba(255, 193, 7, 0.05);
}

.model-card-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--accent);
}

.model-card.enabled .model-card-value {
  color: #68ff9a;
}

.model-card.disabled .model-card-value {
  color: #ff6b6b;
}

.model-card.trained .model-card-value {
  color: #64c8ff;
}

.model-card.not-trained .model-card-value {
  color: #ffc107;
}

.model-card-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.weight-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weight-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px;
  align-items: center;
  gap: 12px;
}

.weight-label {
  font-size: 0.85rem;
  color: var(--text);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weight-bar-container {
  height: 16px;
  background: var(--bg-darker);
  border-radius: 4px;
  overflow: hidden;
}

.weight-bar {
  height: 100%;
  background: linear-gradient(90deg, #64c8ff, #68ff9a);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.weight-value {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
  font-family: monospace;
}

.crop-learning-oracle {
  margin-top: 16px;
}

.crop-learning-oracle h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px 0;
}

.recent-samples-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.recent-sample-item {
  display: grid;
  grid-template-columns: 100px 80px 1fr 120px;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-darker);
  border-radius: 6px;
  font-size: 0.85rem;
  align-items: center;
}

.sample-image {
  font-family: monospace;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sample-action {
  text-transform: capitalize;
}

.sample-action.accepted {
  color: #68ff9a;
}

.sample-action.rejected {
  color: #ff6b6b;
}

.sample-details {
  color: var(--muted);
  font-size: 0.8rem;
}

.sample-time {
  color: var(--muted);
  text-align: right;
  font-size: 0.8rem;
}

/* AI Quality Tab Styles */

.ai-quality-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.chart-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-section h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 8px 0;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  color: var(--text);
}

.advanced-toggle h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.advanced-toggle .toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.advanced-toggle:hover .toggle-icon {
  color: var(--accent);
}

.advanced-breakdown-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 16px;
}

.quality-metrics-section {
  margin-top: 8px;
}

.quality-metrics-section h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px 0;
}

.stat-cards-grid.small {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.stat-cards-grid.small .stat-card {
  padding: 12px 16px;
}

.stat-cards-grid.small .stat-value {
  font-size: 1.2rem;
}

.stat-cards-grid.small .stat-label {
  font-size: 0.75rem;
}

/* Service card uptime */

.service-metrics .metric.uptime .metric-value {
  font-size: 0.75rem;
  color: var(--muted);
}

.service-metrics .metric.uptime .metric-label {
  font-size: 0.65rem;
}

/* Infrastructure uptime */

.infra-uptime {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Training Tab Styles */

.training-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.training-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.training-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  text-align: center;
  min-width: 120px;
  flex: 1;
}

.training-card.total {
  border-color: rgba(100, 200, 255, 0.4);
  background: rgba(100, 200, 255, 0.05);
}

.training-card.pending {
  border-color: rgba(255, 193, 7, 0.4);
  background: rgba(255, 193, 7, 0.05);
}

.training-card.processing {
  border-color: rgba(162, 155, 255, 0.4);
  background: rgba(162, 155, 255, 0.05);
}

.training-card.ready {
  border-color: rgba(140, 229, 255, 0.4);
  background: rgba(140, 229, 255, 0.05);
}

.training-card.done {
  border-color: rgba(104, 255, 154, 0.4);
  background: rgba(104, 255, 154, 0.05);
}

.training-card.error {
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.05);
}

.training-card-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--accent);
}

.training-card.total .training-card-value { color: #64c8ff; }

.training-card.pending .training-card-value { color: #ffc107; }

.training-card.processing .training-card-value { color: #a29bff; }

.training-card.ready .training-card-value { color: #8ce5ff; }

.training-card.done .training-card-value { color: #68ff9a; }

.training-card.error .training-card-value { color: #ff6b6b; }

.training-card-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.training-faces-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.face-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-darker);
  border-radius: 8px;
  border: 1px solid var(--border);
  flex: 1;
  min-width: 100px;
}

.face-stat.labeled {
  border-left: 3px solid #68ff9a;
  border-color: rgba(104, 255, 154, 0.3);
  background: rgba(104, 255, 154, 0.05);
}

.face-stat.unlabeled {
  border-left: 3px solid #ff6b6b;
  border-color: rgba(255, 107, 107, 0.3);
  background: rgba(255, 107, 107, 0.05);
}

.face-stat.progress {
  border-left: 3px solid #64c8ff;
  border-color: rgba(100, 200, 255, 0.3);
  background: rgba(100, 200, 255, 0.05);
}

.face-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}

.face-stat.labeled .face-stat-value { color: #68ff9a; }

.face-stat.unlabeled .face-stat-value { color: #ff6b6b; }

.face-stat.progress .face-stat-value { color: #64c8ff; }

.face-stat-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
}

.training-actions {
  display: flex;
  gap: 12px;
}

.training-action-btn {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.training-action-btn:hover {
  background: #8cffb8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(104, 255, 154, 0.3);
}

/* =============================================================================
   System Status Tab Styles
   ============================================================================= */

.system-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.system-service-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: all 200ms ease;
}

.system-service-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.service-status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-glow 2s ease-in-out infinite;
}

.service-status-indicator.online {
  background: #68ff9a;
  box-shadow: 0 0 8px rgba(104, 255, 154, 0.5);
}

.service-status-indicator.offline {
  background: #ff6b6b;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
  animation: none;
}

.service-status-indicator.unknown {
  background: #ffc107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
  animation: pulse-warn 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes pulse-warn {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

.service-info {
  flex: 1;
}

.service-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

.service-desc {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.service-metrics {
  display: flex;
  gap: 16px;
}

.service-metrics .metric {
  text-align: center;
}

.service-metrics .metric-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  display: block;
}

.service-metrics .metric-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Infrastructure Grid */

.system-infra-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.infra-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 12px;
  min-width: 180px;
  transition: all 200ms ease;
}

.infra-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.infra-icon {
  font-size: 1.2rem;
  color: var(--muted);
}

.infra-name {
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
}

.infra-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
}

.infra-status.online {
  background: rgba(104, 255, 154, 0.15);
  color: #68ff9a;
}

.infra-status.offline {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.infra-status.unknown {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* System Resources */

.system-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.resource-card {
  padding: 16px;
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: all 200ms ease;
}

.resource-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.resource-icon {
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.resource-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.resource-bar {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.resource-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #46d981);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.resource-value {
  font-size: 0.8rem;
  color: var(--muted);
}

/* =============================================================================
   Develop Panel - Lightroom-style adjustments
   ============================================================================= */

.sidebar-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-tab {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.sidebar-tab:hover {
  background: rgba(104, 255, 154, 0.05);
  color: var(--text);
}

.sidebar-tab.active {
  background: rgba(104, 255, 154, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.saving-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--warning);
  border-radius: 50%;
  margin-left: 6px;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Develop Panel */

.develop-panel {
  padding: 12px 0;
}

.develop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.develop-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.develop-actions {
  display: flex;
  gap: 6px;
}

.develop-actions button {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.develop-sliders {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* Adjustment Slider */

.adjustment-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adjustment-slider.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-label {
  font-size: 0.8rem;
  color: var(--text);
}

.slider-value {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  min-width: 40px;
  text-align: right;
}

.slider-track-wrapper {
  position: relative;
  height: 20px;
  cursor: pointer;
}

.slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  transform: translateY(-50%);
}

.slider-center-mark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  background: var(--muted);
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

.slider-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}

.slider-track-wrapper input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.slider-track-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.slider-track-wrapper input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Show thumb on hover/focus */

.slider-track-wrapper:hover input[type="range"],
.slider-track-wrapper input[type="range"]:focus {
  opacity: 1;
}

.slider-track-wrapper:hover input[type="range"]::-webkit-slider-thumb,
.slider-track-wrapper input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(104, 255, 154, 0.2);
}

/* Image loading overlay for smooth transitions */

.image-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 19, 24, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(104, 255, 154, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ============================================
   TIME FILTER V2 - Visual Timeline
   ============================================ */

/* Main container */

.time-filter-v2 {
  background: rgba(10, 19, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  position: relative;
  max-height: 280px;
  overflow-y: auto;
}

.time-filter-v2.matrix-mode {
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.08);
}

/* Timeline visualization bar */

.timeline-bar {
  position: relative;
  height: 44px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: visible;
  padding-top: 18px;
}

.timeline-track {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 24px;
  bottom: 4px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(104, 255, 154, 0.03),
    rgba(72, 167, 255, 0.03)
  );
}

/* Event segment (glowing bar where photos exist) */

.timeline-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease;
  min-width: 4px;
}

.timeline-segment-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg,
    var(--accent),
    rgba(104, 255, 154, 0.7)
  );
  opacity: 0.5;
  transition: all 150ms ease;
}

/* Density-based glow intensity */

.timeline-segment[data-density="low"] .timeline-segment-fill {
  opacity: 0.35;
  box-shadow: 0 0 8px rgba(104, 255, 154, 0.15);
}

.timeline-segment[data-density="medium"] .timeline-segment-fill {
  opacity: 0.55;
  box-shadow: 0 0 12px rgba(104, 255, 154, 0.25);
}

.timeline-segment[data-density="high"] .timeline-segment-fill {
  opacity: 0.75;
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.4);
}

.timeline-segment:hover .timeline-segment-fill {
  opacity: 0.9;
  box-shadow: 0 0 24px rgba(104, 255, 154, 0.5);
  transform: scaleY(1.1);
}

.timeline-segment.selected .timeline-segment-fill {
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 30px rgba(104, 255, 154, 0.6);
}

/* Day markers on timeline */

.timeline-day-marker {
  position: absolute;
  top: -20px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(104, 255, 154, 0.4),
    rgba(104, 255, 154, 0.1)
  );
}

.timeline-day-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Event bucket pills */

.event-buckets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-day-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-day-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 2px;
}

.event-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Individual event pill */

.event-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(16, 31, 37, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
  font-family: inherit;
  color: var(--text);
}

.event-pill:hover {
  background: rgba(30, 50, 60, 0.8);
  border-color: rgba(104, 255, 154, 0.4);
  box-shadow: 0 0 16px rgba(104, 255, 154, 0.12);
}

.event-pill.selected {
  background: rgba(104, 255, 154, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(104, 255, 154, 0.2);
}

.event-pill.selected .event-pill-period,
.event-pill.selected .event-pill-time {
  color: var(--accent);
}

.event-pill-period {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.event-pill-time {
  font-family: "IBM Plex Mono", "SF Mono", monospace;
  font-size: 12px;
  color: var(--text);
  letter-spacing: -0.02em;
}

.event-pill-count {
  font-family: "IBM Plex Mono", "SF Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(104, 255, 154, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 24px;
  text-align: center;
}

/* Matrix glow animation */

.time-filter-v2.matrix-mode .timeline-segment-fill {
  animation: segmentPulse 4s ease-in-out infinite;
}

.time-filter-v2.matrix-mode .event-pill.selected {
  animation: pillGlow 2s ease-in-out infinite;
}

@keyframes segmentPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes pillGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(104, 255, 154, 0.2); }
  50% { box-shadow: 0 0 28px rgba(104, 255, 154, 0.35); }
}

/* No-time indicator */

.no-time-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 10px 14px;
  background: rgba(255, 155, 100, 0.08);
  border: 1px solid rgba(255, 155, 100, 0.2);
  border-radius: 8px;
  margin-top: 12px;
}

.no-time-icon {
  font-size: 14px;
  opacity: 0.8;
}

/* Clickable no-time indicator */

.no-time-indicator.clickable {
  cursor: pointer;
  transition: all 150ms ease;
  font-family: inherit;
}

.no-time-indicator.clickable:hover {
  background: rgba(255, 155, 100, 0.15);
  border-color: rgba(255, 155, 100, 0.4);
}

.no-time-indicator.clickable.selected {
  background: rgba(255, 155, 100, 0.2);
  border-color: rgba(255, 155, 100, 0.6);
  color: #ff9b64;
}

/* Clear/Reset button */

.time-filter-clear {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.time-filter-clear:hover {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.5);
}

/* ============================================
   VIEW PAGE STYLES
   Read-only photo viewer with sidebar layout
   ============================================ */

.page-view {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

/* View Sidebar */

.view-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: rgba(10, 19, 26, 0.85);
  border-right: 1px solid var(--border);
  padding: 14px;
}

.view-sidebar-header {
  flex-shrink: 0;
  margin-bottom: 12px;
}

.view-sidebar-header .header-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.view-sidebar-header .sort-select {
  flex: 1;
  padding: 8px 12px;
  background: rgba(16, 31, 37, 0.8);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}

.view-sidebar-header .search-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(16, 31, 37, 0.8);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
}

.view-sidebar-header .search-input::placeholder {
  color: var(--muted);
}

.view-sidebar-header .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.view-sidebar-header .filter-chip {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 150ms ease;
}

.view-sidebar-header .filter-chip:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.view-sidebar-header .filter-chip.active {
  background: rgba(102, 255, 183, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* View Photo List */

.view-photo-list {
  flex: 1;
  overflow-y: auto;
  margin: 0 -14px -14px -14px;
  padding: 0 14px 14px 14px;
}

.view-photo-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
  margin-bottom: 4px;
}

.view-photo-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.view-photo-item.selected {
  background: rgba(102, 255, 183, 0.1);
  border: 1px solid var(--accent);
}

.view-photo-item .thumb {
  position: relative;
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(16, 31, 37, 0.8);
  flex-shrink: 0;
}

.view-photo-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-photo-item .thumb .status-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.view-photo-item .meta {
  flex: 1;
  min-width: 0;
}

.view-photo-item .title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-photo-item .sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.view-photo-item .pill {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 10px;
  text-transform: capitalize;
}

.view-loading-indicator {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.view-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
}

/* View Main Content */

.view-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  background: rgba(8, 14, 18, 0.5);
}

/* View Toolbar */

.view-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.view-toolbar .toolbar-btn {
  padding: 8px 16px;
  background: linear-gradient(145deg, rgba(15, 31, 41, 0.8), rgba(10, 19, 26, 0.9));
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
}

.view-toolbar .toolbar-btn:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.view-toolbar .toolbar-btn.active {
  background: rgba(102, 255, 183, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.view-toolbar .toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.view-toolbar .spacer {
  flex: 1;
}

/* View page uses .viz-frame for image container (same as Edit page) */

.page-view .view-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  gap: 8px;
}

/* View Player Info Bar - matches Edit page's assign-bar style */

.view-player-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(19, 30, 35, 0.6);
  justify-content: center;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.view-player-bar .label {
  color: var(--muted);
  font-size: 11px;
  padding: 0 4px;
}

.view-player-bar .divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

.view-player-bar .persons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.view-player-bar .face-count {
  padding: 2px 6px;
  background: rgba(77, 166, 255, 0.1);
  border-radius: 4px;
  color: #4da6ff;
  font-size: 10px;
  font-weight: 500;
  margin-left: 4px;
}

/* View Full-res Modal */

.view-fullres-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

.view-fullres-modal img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
}

.view-fullres-modal .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}

.view-fullres-modal .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Responsive View Page */

@media (max-width: 768px) {
  .page-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .view-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 200px;
  }

  .view-photo-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .view-photo-item {
    flex-direction: column;
    min-width: 80px;
  }

  .view-photo-item .thumb {
    width: 80px;
    height: 60px;
  }
}