@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;
}
/* TankShell — Tank Redesign chrome.
   Source: ~/Downloads/tank-redesign/scaffold.jsx § TankShell + LeftRail + TopBar. */

._shell_9ahdp_4 {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  overflow: hidden;
}

/* ─────────── Left rail ─────────── */

._rail_9ahdp_16 {
  width: var(--rd-chrome-rail);
  flex-shrink: 0;
  background: var(--rd-color-bg-raised);
  border-right: 1px solid var(--rd-color-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 4px;
}

._brand_9ahdp_28 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.2px solid var(--rd-color-accent);
  background: transparent;
  color: var(--rd-color-accent);
  font-family: var(--rd-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background-color var(--rd-motion-fast);
}

._brand_9ahdp_28:hover {
  background: var(--rd-color-accent-bg);
}

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

._navItem_9ahdp_58 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--rd-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._navItem_9ahdp_58:hover {
  color: var(--rd-color-text);
  background: var(--rd-color-panel-hi);
}

._navItemActive_9ahdp_81 {
  color: var(--rd-color-accent);
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

._navItemActive_9ahdp_81::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--rd-color-accent);
  border-radius: 2px;
}

._navIcon_9ahdp_98 {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

._railSpacer_9ahdp_104 {
  flex: 1;
}

._logout_9ahdp_108 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--rd-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color var(--rd-motion-fast),
              background-color var(--rd-motion-fast);
}

._logout_9ahdp_108:hover {
  color: var(--rd-color-text);
  background: var(--rd-color-panel-hi);
}

._avatar_9ahdp_129 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rd-color-panel-hi);
  border: 1px solid var(--rd-color-line);
  color: var(--rd-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 4px;
  padding: 0;
  transition: color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

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

._avatarActive_9ahdp_153 {
  color: var(--rd-color-accent);
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

/* FTP / upload status indicator — small dot on rail bottom. */
._ftpDot_9ahdp_160 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 6px 0;
  background: var(--rd-color-text-faint);
  border: 1px solid var(--rd-color-line);
  transition: background-color var(--rd-motion-fast),
              box-shadow var(--rd-motion-fast);
}

._ftpDot-ok_9ahdp_171 {
  background: var(--rd-color-accent);
  box-shadow: 0 0 6px rgba(104, 255, 154, 0.6);
}

._ftpDot-warn_9ahdp_176 {
  background: var(--rd-color-warn);
  box-shadow: 0 0 6px rgba(255, 184, 77, 0.5);
}

._ftpDot-idle_9ahdp_181 {
  background: var(--rd-color-text-faint);
}

/* ─────────── Frame (top-bar + main) ─────────── */

._frame_9ahdp_187 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._topBar_9ahdp_194 {
  height: var(--rd-chrome-topbar);
  flex-shrink: 0;
  background: var(--rd-color-bg-raised);
  border-bottom: 1px solid var(--rd-color-line);
  display: flex;
  align-items: center;
  padding: 0 14px 0 20px;
  gap: 16px;
}

._topBarLeft_9ahdp_205 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  /* Caps the eyebrow + breadcrumb cluster's width so the right group
     stays right-aligned even when the breadcrumb gets long. */
  flex: 0 1 auto;
}

._topBarRight_9ahdp_215 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  /* Push the right cluster (kbd hints · rate · bell · username) to the
     far right edge regardless of how long the left cluster is. */
  margin-left: auto;
}

._topBarRight_9ahdp_215 ._dot_9ahdp_225 {
  margin: 0;
  font-size: 11px;
  line-height: 1;
}

._eyebrow_9ahdp_231 {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._dot_9ahdp_225,
._slash_9ahdp_241 {
  color: var(--rd-color-text-faint);
}

._routeName_9ahdp_245 {
  font-family: var(--rd-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-color-text);
  letter-spacing: -0.1px;
}

._breadcrumb_9ahdp_253 {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._breadcrumbLink_9ahdp_263 {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  transition: color var(--rd-motion-fast);
}

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

._breadcrumbSep_9ahdp_277 {
  color: var(--rd-color-text-faint);
  margin: 0 4px;
}

._badge_9ahdp_282 {
  padding: 4px 9px;
  border-radius: var(--rd-radius-pill);
  border: 1px solid var(--rd-color-line-strong);
  background: var(--rd-color-panel-lo);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._kbHints_9ahdp_294 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

._kbHint_9ahdp_294 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

._kbHintLabel_9ahdp_306 {
  font-family: var(--rd-font-sans);
  font-size: 11px;
  color: var(--rd-color-text-subtle);
}

._rate_9ahdp_312 {
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._username_9ahdp_319 {
  font-family: var(--rd-font-sans);
  font-size: 12px;
  color: var(--rd-color-text-muted);
  padding-left: 4px;
}

/* ─────────── Main content ─────────── */

._main_9ahdp_328 {
  flex: 1;
  overflow: auto;
  min-height: 0;
  background: var(--rd-color-bg);
}
._btn_5tot2_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              opacity var(--rd-motion-fast);
}

._btn_5tot2_1:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

._btn_5tot2_1:focus-visible {
  outline: 2px solid var(--rd-color-line-focus);
  outline-offset: 2px;
}

._icon_5tot2_28,
._iconRight_5tot2_29 {
  display: inline-flex;
  align-items: center;
}

/* Sizes — per design_handoff_tank/README.md (sm 28 / default 36 / lg 40).
   The `xs` size and `quiet` variant from the prototype's TK.Btn factory
   were dropped in this round; existing call sites should migrate to
   `sm` + `ghost` instead. `md` is preserved as a backward-compat alias
   of the default 36-height row so existing call sites keep painting
   correctly until they're touched. */

._sm_5tot2_41 {
  height: 28px;
  padding: 0 12px;
  font-size: var(--rd-type-body-dense);
}

._md_5tot2_34,
._default_5tot2_48 {
  height: 36px;
  padding: 0 14px;
  font-size: var(--rd-type-button);
}

._lg_5tot2_54 {
  height: 40px;
  padding: 0 18px;
  font-size: var(--rd-type-button);
}

/* Capacitor / touch — keep 36 px minimum so the small chip is still a
   real tap target on iPad. */
@media (hover: none) {
  ._sm_5tot2_41 { min-height: 36px; }
}

/* Variants */
._primary_5tot2_67 {
  background: var(--rd-color-accent);
  color: #04140a;
  border: 1px solid var(--rd-color-accent);
}
._primary_5tot2_67:hover:not(:disabled) {
  background: rgba(104, 255, 154, 0.95);
}

._ghost_5tot2_76 {
  background: transparent;
  color: var(--rd-color-text);
  border: 1px solid var(--rd-color-line-strong);
}
._ghost_5tot2_76:hover:not(:disabled) {
  background: var(--rd-color-panel-hi);
}

._soft_5tot2_85 {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border: 1px solid var(--rd-color-accent-line);
}
._soft_5tot2_85:hover:not(:disabled) {
  background: var(--rd-color-accent-bg-hi);
}

._danger_5tot2_94 {
  background: rgba(255, 90, 90, 0.10);
  color: #ff8c8c;
  border: 1px solid rgba(255, 90, 90, 0.34);
}
._danger_5tot2_94:hover:not(:disabled) {
  background: rgba(255, 90, 90, 0.18);
}

/* Quiet — kept as a backward-compat alias of ghost for any existing
   `kind="quiet"` consumers; the new handoff dropped this variant from
   the canonical set, but removing it abruptly would break call sites. */
._quiet_5tot2_106 {
  background: transparent;
  color: var(--rd-color-text-muted);
  border: 1px solid transparent;
}
._quiet_5tot2_106:hover:not(:disabled) {
  background: var(--rd-color-panel-hi);
}
._card_13e0g_1 {
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

._surface-default_13e0g_6 {
  background: var(--rd-color-panel);
}

._surface-hi_13e0g_10 {
  background: var(--rd-color-panel-hi);
}

._surface-lo_13e0g_14 {
  background: var(--rd-color-panel-lo);
}

._padded_13e0g_18 {
  padding: var(--rd-space-4);
}
/* Drawer — shared 560 px right slide-in shell.
   Replaces ad-hoc per-feature drawer wrappers. Slot props let callers
   render any header subtitle / tabs / body / footer they want; this
   component owns backdrop, slide animation, sticky-footer chrome, and
   close-X visibility. */

._backdrop_10pa8_7 {
  position: fixed;
  /* Full-viewport overlay (matches the Match drawer pattern in
     features/matches). Drawer covers the Tank topbar so the user's
     focus is unambiguously on the drawer surface — close X is the
     only way out. Z-index sits above all sticky page chrome (Manage
     TabBar uses 100). */
  inset: 0;
  background: var(--rd-color-scrim);
  z-index: 200;
  animation: _drawerFade_10pa8_1 180ms ease-out;
}

._drawer_10pa8_20 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100vw;
  z-index: 201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rd-color-panel);
  border-left: 2px solid var(--rd-color-accent-line);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  animation: _drawerSlide_10pa8_1 220ms cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

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

@keyframes _drawerSlide_10pa8_1 {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Header ────────────────────────────────────────────────────────── */

._header_10pa8_51 {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--rd-color-line);
  flex-shrink: 0;
}

._headerBar_10pa8_60 {
  width: 3px;
  align-self: stretch;
  background: var(--rd-color-accent);
}

._headerText_10pa8_66 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._eyebrow_10pa8_74 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
  font-family: var(--rd-font-mono);
}

._title_10pa8_82 {
  font-family: var(--rd-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--rd-color-text);
  margin: 0;
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

._subtitle_10pa8_94 {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
  margin-top: 2px;
}

._closeBtn_10pa8_101 {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--rd-radius-md);
  transition:
    background var(--rd-motion-fast),
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
  flex-shrink: 0;
}

._closeBtn_10pa8_101:hover {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border-color: var(--rd-color-accent-line);
}

/* ── Tabs slot (optional, padding-only) ─────────────────────────────── */

._tabsWrapper_10pa8_127 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rd-color-line);
  flex-shrink: 0;
}

/* ── Body ──────────────────────────────────────────────────────────── */

._body_10pa8_135 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ── Footer ────────────────────────────────────────────────────────── */

._footer_10pa8_143 {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--rd-color-line);
  background: var(--rd-color-panel);
  flex-shrink: 0;
}

._footerSpacer_10pa8_153 {
  flex: 1;
}
._eyebrow_k46l5_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

._index_k46l5_13,
._dot_k46l5_14 {
  color: var(--rd-color-text-faint);
}
._pill_1e0cq_1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1px;
}

._compact_1e0cq_14 {
  padding: 2px 7px;
  font-size: var(--rd-type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

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

._compact_1e0cq_14 ._dot_1e0cq_22 {
  width: 5px;
  height: 5px;
}

/* Compact pills overlay photo cards / filmstrip thumbs — push the tinted
   background to the bg-hi ramp so the colour reads at glance. */
._compact_1e0cq_14._pending_1e0cq_35   { background: var(--rd-status-pending-bg-hi); }
._compact_1e0cq_14._attention_1e0cq_36 { background: var(--rd-status-attention-bg-hi); }
._compact_1e0cq_14._done_1e0cq_37      { background: var(--rd-status-done-bg-hi); }
._compact_1e0cq_14._exported_1e0cq_38  { background: var(--rd-status-exported-bg-hi); }
._compact_1e0cq_14._error_1e0cq_39     { background: var(--rd-status-error-bg-hi); }
._compact_1e0cq_14._skipped_1e0cq_40   { background: var(--rd-status-skipped-bg-hi); }
._compact_1e0cq_14._tagging_1e0cq_41   { background: var(--rd-status-tagging-bg-hi); }

/* Six states */

._pending_1e0cq_35 {
  color: var(--rd-status-pending-fg);
  background: var(--rd-status-pending-bg);
  border: 1px solid var(--rd-status-pending-line);
}
._pending_1e0cq_35 ._dot_1e0cq_22 {
  background: var(--rd-status-pending-fg);
  box-shadow: 0 0 6px var(--rd-status-pending-fg);
}

._attention_1e0cq_36 {
  color: var(--rd-status-attention-fg);
  background: var(--rd-status-attention-bg);
  border: 1px solid var(--rd-status-attention-line);
}
._attention_1e0cq_36 ._dot_1e0cq_22 {
  background: var(--rd-status-attention-fg);
  box-shadow: 0 0 6px var(--rd-status-attention-fg);
}

._done_1e0cq_37 {
  color: var(--rd-status-done-fg);
  background: var(--rd-status-done-bg);
  border: 1px solid var(--rd-status-done-line);
}
._done_1e0cq_37 ._dot_1e0cq_22 {
  background: var(--rd-status-done-fg);
  box-shadow: 0 0 6px var(--rd-status-done-fg);
}

._exported_1e0cq_38 {
  color: var(--rd-status-exported-fg);
  background: var(--rd-status-exported-bg);
  border: 1px solid var(--rd-status-exported-line);
}
._exported_1e0cq_38 ._dot_1e0cq_22 {
  background: var(--rd-status-exported-fg);
  box-shadow: 0 0 6px var(--rd-status-exported-fg);
}

._error_1e0cq_39 {
  color: var(--rd-status-error-fg);
  background: var(--rd-status-error-bg);
  border: 1px solid var(--rd-status-error-line);
}
._error_1e0cq_39 ._dot_1e0cq_22 {
  background: var(--rd-status-error-fg);
  box-shadow: 0 0 6px var(--rd-status-error-fg);
}

._skipped_1e0cq_40 {
  color: var(--rd-status-skipped-fg);
  background: var(--rd-status-skipped-bg);
  border: 1px solid var(--rd-status-skipped-line);
}
._skipped_1e0cq_40 ._dot_1e0cq_22 {
  background: var(--rd-status-skipped-fg);
  box-shadow: 0 0 6px var(--rd-status-skipped-fg);
}

._tagging_1e0cq_41 {
  color: var(--rd-status-tagging-fg);
  background: var(--rd-status-tagging-bg);
  border: 1px solid var(--rd-status-tagging-line);
}
._tagging_1e0cq_41 ._dot_1e0cq_22 {
  background: var(--rd-status-tagging-fg);
  box-shadow: 0 0 6px var(--rd-status-tagging-fg);
}
._chain_h5mjx_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

._arrow_h5mjx_14 {
  color: var(--rd-color-text-faint);
  font-family: var(--rd-font-mono);
}
._kbd_1iacc_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--rd-color-line-strong);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  color: var(--rd-color-text-muted);
  line-height: 1;
}
._mono_1ivsk_1 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-muted);
}
._panel_1lwkv_1 {
  position: fixed;
  z-index: 1000;
  min-width: 120px;
  padding: 3px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-md);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--rd-font-sans);
}

._item_1lwkv_18 {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  padding: 5px 9px;
  border-radius: var(--rd-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Stretch every item to fill the panel width so the entire row is
     a click target (not just the text width). */
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

._item_1lwkv_18:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

._itemSelected_1lwkv_49 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

._itemSelected_1lwkv_49:hover {
  background: var(--rd-color-accent-bg-hi);
}
._callout_1akf1_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 179, 90, 0.08);
  border: 1px solid rgba(255, 179, 90, 0.34);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._tag_1akf1_14 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 179, 90, 1);
  flex-shrink: 0;
}

._body_1akf1_23 { flex: 0 1 auto; }

._spacer_1akf1_25 { flex: 1; }

._number_1akf1_27 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-muted);
}

._numberHi_1akf1_32 {
  font-family: var(--rd-font-mono);
  color: rgba(255, 179, 90, 1);
}

._mono_1akf1_37 {
  font-family: var(--rd-font-mono);
}

._openBtn_1akf1_41 {
  height: 26px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--rd-motion-fast), border-color var(--rd-motion-fast);
}

._openBtn_1akf1_41:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}
._row_xnm8g_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  width: 100%;
  height: auto;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  text-align: left;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
  cursor: pointer;
  transition: border-color var(--rd-motion-fast), background var(--rd-motion-fast);
}

._row_xnm8g_1:hover {
  border-color: var(--rd-color-line-strong);
  background: var(--rd-color-panel-hi);
}

._row_xnm8g_1._active_xnm8g_23 {
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

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

._name_xnm8g_34 {
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
}

._row_xnm8g_1._active_xnm8g_23 ._name_xnm8g_34 { color: var(--rd-color-accent); }

._desc_xnm8g_43 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._spacer_xnm8g_51 { flex: 1; }

._value_xnm8g_53 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rd-type-body);
  font-weight: 600;
  color: var(--rd-color-text);
}

._row_xnm8g_1._active_xnm8g_23 ._value_xnm8g_53 { color: var(--rd-color-accent); }

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

._spark_xnm8g_69 {
  display: inline-flex;
  align-items: center;
}

._sparkPlaceholder_xnm8g_74 {
  display: inline-block;
  width: 140px;
  height: 20px;
}

._delta_xnm8g_80 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  color: var(--rd-color-text-muted);
}

._deltaUp_xnm8g_88 { color: rgba(255, 179, 90, 1); }
._stat_1f5eg_1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  min-width: 96px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

._label_1f5eg_12 {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._value_1f5eg_21 {
  font-family: var(--rd-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--rd-color-text);
  line-height: 1;
}

/* Active state — tinted background + colored value */

._active_1f5eg_32._kind-pending_1f5eg_32 {
  background: var(--rd-status-pending-bg);
  border-color: var(--rd-status-pending-line);
}
._active_1f5eg_32._kind-pending_1f5eg_32 ._value_1f5eg_21 { color: var(--rd-status-pending-fg); }

._active_1f5eg_32._kind-attention_1f5eg_38 {
  background: var(--rd-status-attention-bg);
  border-color: var(--rd-status-attention-line);
}
._active_1f5eg_32._kind-attention_1f5eg_38 ._value_1f5eg_21 { color: var(--rd-status-attention-fg); }

._active_1f5eg_32._kind-done_1f5eg_44 {
  background: var(--rd-status-done-bg);
  border-color: var(--rd-status-done-line);
}
._active_1f5eg_32._kind-done_1f5eg_44 ._value_1f5eg_21 { color: var(--rd-status-done-fg); }

._active_1f5eg_32._kind-exported_1f5eg_50 {
  background: var(--rd-status-exported-bg);
  border-color: var(--rd-status-exported-line);
}
._active_1f5eg_32._kind-exported_1f5eg_50 ._value_1f5eg_21 { color: var(--rd-status-exported-fg); }

._active_1f5eg_32._kind-error_1f5eg_56 {
  background: var(--rd-status-error-bg);
  border-color: var(--rd-status-error-line);
}
._active_1f5eg_32._kind-error_1f5eg_56 ._value_1f5eg_21 { color: var(--rd-status-error-fg); }

._active_1f5eg_32._kind-skipped_1f5eg_62 {
  background: var(--rd-status-skipped-bg);
  border-color: var(--rd-status-skipped-line);
}
._active_1f5eg_32._kind-skipped_1f5eg_62 ._value_1f5eg_21 { color: var(--rd-status-skipped-fg); }

._active_1f5eg_32._kind-tagging_1f5eg_68 {
  background: var(--rd-status-tagging-bg);
  border-color: var(--rd-status-tagging-line);
}
._active_1f5eg_32._kind-tagging_1f5eg_68 ._value_1f5eg_21 { color: var(--rd-status-tagging-fg); }
/* TabBar — shared sub-page navigation primitive.
   Pill-button pattern, lifted from Statistics' .stats-tab styles
   (formerly defined inline in styles.css). Sub-page tabs across the
   app should use this so the active language stays consistent.

   States: idle (muted text + line border), hover (panel-hi bg),
   active (accent-bg + accent-line + accent text). */

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

._tab_1h49r_9 {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text-muted);
  padding: 0 14px;
  height: 28px;
  border-radius: var(--rd-radius-md);
  cursor: pointer;
  transition:
    background-color var(--rd-motion-fast),
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

._tab_1h49r_9:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

._tab_1h49r_9._active_1h49r_42 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

._tabIcon_1h49r_48 {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
}

._tabIcon_1h49r_48 svg {
  width: 14px;
  height: 14px;
}

._tabCount_1h49r_60 {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--rd-color-text-faint);
  font-variant-numeric: tabular-nums;
}

._tab_1h49r_9._active_1h49r_42 ._tabCount_1h49r_60 {
  color: var(--rd-color-accent);
}

/* Variant: scoped to a sticky-top page navigation strip with a bottom
   line. Used by Manage's section tabs. */
._tabsBar_1h49r_75 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px var(--rd-space-6);
  background: var(--rd-color-bg-raised);
  border-bottom: 1px solid var(--rd-color-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
._wrap_au5r8_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._mark_au5r8_7 {
  padding: 4px 10px;
  border-radius: var(--rd-radius-pill);
  border: 1.2px solid var(--rd-color-accent);
  color: var(--rd-color-accent);
  font-family: var(--rd-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
}

._sub_au5r8_19 {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  color: var(--rd-color-text-subtle);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}._wrap_90kb8_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

._canvas_90kb8_8 {
  width: 100%;
  /* uPlot manages its own height via setSize */
}

._legend_90kb8_13 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._legendItem_90kb8_24 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  height: auto;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  border-radius: var(--rd-radius-sm);
  transition: color var(--rd-motion-fast), background var(--rd-motion-fast);
}

._legendItem_90kb8_24:hover {
  color: var(--rd-color-text);
  background: var(--rd-color-panel-hi);
}

._legendActive_90kb8_43 {
  color: var(--rd-color-accent);
}

._legendDot_90kb8_47 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
._backdrop_tod7d_1 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

._panel_tod7d_12 {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._header_tod7d_24 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rd-color-line);
}

._eyebrow_tod7d_32 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._close_tod7d_40 {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--rd-color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--rd-radius-sm);
}

._close_tod7d_40:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

._body_tod7d_60 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

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

._groupLabel_tod7d_73 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

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

._row_tod7d_81 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: var(--rd-radius-sm);
}

._row_tod7d_81:hover {
  background: var(--rd-color-panel-lo);
}

._keys_tod7d_99 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 110px;
  flex-shrink: 0;
}

._desc_tod7d_107 {
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}
/* StatsPills — Tank Redesign Overview top stat tiles + ingest counter.
   Source: design_handoff_tank/screens-base.jsx § Screen02Overview Stats. */

._row_i6edt_4 {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--rd-font-sans);
  flex-wrap: wrap;
}

._tileWrap_i6edt_13 {
  position: relative;
  cursor: pointer;
  outline: none;
  transition: transform var(--rd-motion-fast);
}

/* Pulsing dot in the bottom-right corner of the Processing tile when
   at least one photo is mid-pipeline. Communicates "files are coming
   in" without changing the tile's count or layout. */
._tileWrap_i6edt_13._tilePulsing_i6edt_23::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rd-color-accent);
  box-shadow: 0 0 8px var(--rd-color-accent);
  animation: _ingestPulse_i6edt_1 1.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes _ingestPulse_i6edt_1 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

._tileWrap_i6edt_13:focus-visible {
  outline: 2px solid var(--rd-color-line-focus);
  outline-offset: 2px;
}

._tileIdle_i6edt_47:hover {
  background: var(--rd-color-panel-hi);
}

._tileActive_i6edt_51 {
  /* The redesign Stat atom already handles active styling per kind. */
}

._tileDelta_i6edt_55 {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  pointer-events: none;
}

._spacer_i6edt_67 {
  flex: 1;
}

._ingest_i6edt_71 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  cursor: pointer;
  font-family: var(--rd-font-sans);
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._ingest_i6edt_71:hover {
  background: var(--rd-color-panel-hi);
}

._ingestLabel_i6edt_90 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._ingestValue_i6edt_98 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  color: var(--rd-color-accent);
}

._ingest-warn_i6edt_105 ._ingestValue_i6edt_98 { color: var(--rd-color-warn); }
._ingest-error_i6edt_106 ._ingestValue_i6edt_98 { color: var(--rd-status-error-fg); }
._ingest-ok_i6edt_107 ._ingestValue_i6edt_98 { color: var(--rd-color-accent); }

/* Expanded ingest detail bar */
._ingestDetail_i6edt_110 {
  display: flex;
  gap: 24px;
  padding: 8px 12px;
  margin-top: -2px;
  margin-bottom: 8px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._ingestDetail_i6edt_110 strong {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text);
  font-weight: 500;
}

._ingestOk_i6edt_130 { color: var(--rd-color-accent); }
._ingestWarn_i6edt_131 { color: var(--rd-color-warn); }
._ingestError_i6edt_132 { color: var(--rd-status-error-fg); }

._ingestFailedClickable_i6edt_134 {
  cursor: pointer;
  text-decoration: underline;
}
._stackCard_1mc80_1 {
  position: relative;
  width: 280px;
  height: 200px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

._stackCard_1mc80_1._unassigned_1mc80_11 ._layer_1mc80_11 {
  border: 2px dashed var(--color-border, #444);
}

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

._layer_1mc80_11 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: var(--rd-color-panel);
  background-size: cover;
  background-position: center;
  border-radius: var(--rd-radius-lg);
  border: 1px solid var(--rd-color-line);
  transform: translate(var(--layer-offset), var(--layer-offset));
  transition: transform 0.2s ease, border-color var(--rd-motion-fast);
}

._stackCard_1mc80_1:hover ._layer_1mc80_11 {
  border-color: var(--rd-color-accent-line);
}

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

._content_1mc80_47 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 8px;
  padding: 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 60%);
  border-radius: 0 0 var(--rd-radius-lg) var(--rd-radius-lg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--rd-font-sans);
}

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

._title_1mc80_68 {
  font-family: var(--rd-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--rd-color-text);
  line-height: 1.2;
}

._liveBadge_1mc80_77 {
  padding: 2px 7px;
  background: var(--rd-status-error-bg-hi);
  border: 1px solid var(--rd-status-error-line);
  color: var(--rd-status-error-fg);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--rd-radius-pill);
  animation: _pulse_1mc80_1 2s infinite;
}

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

._subtitle_1mc80_96 {
  display: block;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._stats_1mc80_103 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

._photoCount_1mc80_110 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._statusBadge_1mc80_118 {
  padding: 2px 7px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-status-pending-bg-hi);
  border: 1px solid var(--rd-status-pending-line);
  color: var(--rd-status-pending-fg);
}

._statusBadge_1mc80_118._done_1mc80_131 {
  background: var(--rd-status-done-bg-hi);
  border-color: var(--rd-status-done-line);
  color: var(--rd-status-done-fg);
}
._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_1x169_5 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

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

._buildBtn_1x169_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_1x169_25:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

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

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

/* Compact inline score editor — same plumbing as ScoreTicker but
   visually tighter so it fits above the chip row in the collapsed
   Caption Builder. */
._miniScore_1x169_55 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-family: var(--rd-font-mono);
}

._miniTeam_1x169_63 {
  font-family: var(--rd-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--rd-color-text-muted);
  padding: 0 4px;
}

._miniBtn_1x169_72 {
  appearance: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

._miniBtn_1x169_72:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-line-strong);
  color: var(--rd-color-text);
}

._miniNum_1x169_99 {
  min-width: 14px;
  text-align: center;
  font-family: var(--rd-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-color-text);
}

._miniSep_1x169_108 {
  color: var(--rd-color-text-faint);
  font-family: var(--rd-font-mono);
  font-size: 12px;
  padding: 0 2px;
}

._triggerPreview_1x169_115 {
  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_1x169_128 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-overlay) - 1);
}

._drawer_1x169_135 {
  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_1x169_151 {
  transform: translateX(100%);
}

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

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

._closeBtn_1x169_170 {
  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_1x169_170:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

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

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

._pinToggle_1x169_207 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  cursor: pointer;
  user-select: none;
}

._pinToggle_1x169_207 input[type="checkbox"] {
  accent-color: var(--rd-color-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ==========================================================================
   Quick actions chip strip
   ========================================================================== */

._quickActions_1x169_230 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  /* Wide labels (long team names) are common in this row; let chips
     shrink past their content width when the line is full so two short
     chips can share a row. */
  min-width: 0;
}

._quickActionChip_1x169_241 {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-pill);
  overflow: hidden;
  max-width: 100%;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._quickActionChip_1x169_241:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-accent-line);
}

._quickActionChipPinned_1x169_258 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

._quickActionChipPinned_1x169_258:hover {
  background: var(--rd-color-accent-bg-hi);
}

._quickActionLabel_1x169_267 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 10px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--rd-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

._quickActionChipPinned_1x169_258 ._quickActionLabel_1x169_267 {
  color: var(--rd-color-accent);
}

._quickActionRemove_1x169_292 {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rd-color-line);
  padding: 0 8px;
  color: var(--rd-color-text-faint);
  font-family: var(--rd-font-mono);
  font-size: 14px;
  cursor: pointer;
}

._quickActionRemove_1x169_292:hover {
  background: var(--rd-status-error-bg-hi);
  color: var(--rd-status-error-fg);
}

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

._scoreTicker_1x169_313 {
  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_1x169_323 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  min-width: 36px;
  text-align: center;
}

._scoreBtn_1x169_331 {
  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_1x169_331:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

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

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

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

/* Mono caps section label per principle #4 (system labels = mono caps).
   Matches the Mono atom treatment used elsewhere in the redesign. */
._sectionTitle_1x169_371 {
  font-family: var(--rd-font-mono);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  letter-spacing: var(--rd-track-eyebrow);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  margin-bottom: 6px;
}

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

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

._playerChip_1x169_391 {
  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_1x169_391:hover {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

._playerChipInChain_1x169_410 {
  opacity: 0.5;
}

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

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

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

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

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

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

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

/* Chain Node (person card) */
._chainNode_1x169_457 {
  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_1x169_468 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

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

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

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

._actionBtn_1x169_494 {
  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_1x169_494:hover {
  background: rgba(var(--color-accent-rgb), 0.18);
}

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

._removeBtn_1x169_516 {
  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_1x169_516:hover {
  color: var(--color-danger);
}

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

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

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

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

._actionTab_1x169_552 {
  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_1x169_552:hover {
  color: var(--color-text);
}

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

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

._actionOption_1x169_587 {
  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_1x169_587:hover {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

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

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

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

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

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

._connectorInput_1x169_631 {
  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_1x169_631:focus {
  outline: none;
  border-color: var(--color-info);
}

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

._connectorRemove_1x169_664 {
  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_1x169_664:hover {
  color: var(--color-danger);
}

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

/* Connector suggestions dropdown */
._suggestions_1x169_688 {
  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_1x169_706 {
  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_1x169_706:hover {
  background: rgba(var(--color-info-rgb), 0.18);
  border-color: var(--color-info);
}

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

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

._grammarWarning_1x169_733 {
  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_1x169_745 {
  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_1x169_757 {
  color: var(--color-text-muted);
  font-style: italic;
}

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

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

._kwPill_1x169_776 {
  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_1x169_788 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._savedChain_1x169_788 {
  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_1x169_804 {
  flex: 1;
  font-size: 11px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._savedRemove_1x169_813 {
  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_1x169_813:hover {
  color: var(--color-danger);
}

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

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

._combinedText_1x169_845 {
  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_1x169_859 {
  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_1x169_859:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

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

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

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

._applyBtn_1x169_884:hover:not(:disabled) {
  background: var(--color-accent-strong);
}
/* IptcPanel — Tank Redesign tokens. */

._panel_10un8_3 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-4);
  padding: var(--rd-space-1) 0;
  font-family: var(--rd-font-sans);
}

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

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

._eyebrow_10un8_23 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
  letter-spacing: var(--rd-track-eyebrow);
}

._badge_10un8_32 {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  color: var(--rd-color-warn);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._textarea_10un8_41 {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--rd-motion-fast);
}

._textarea_10un8_41:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

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

._textareaOverridden_10un8_66 {
  border-left: 2px solid var(--rd-color-warn);
}

._resetBtn_10un8_70 {
  align-self: flex-start;
  padding: 4px 10px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._resetBtn_10un8_70:hover {
  border-color: var(--rd-color-warn-line);
  color: var(--rd-color-warn);
}

._separator_10un8_92 {
  height: 1px;
  background: var(--rd-color-line);
  margin: 4px 0;
}

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

._pill_10un8_98 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--rd-color-accent-bg);
  border: 1px solid var(--rd-color-accent-line);
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  color: var(--rd-color-accent);
}

._pillManual_10un8_117 {
  background: var(--rd-status-exported-bg);
  border: 1px dashed var(--rd-status-exported-line);
  color: var(--rd-status-exported-fg);
}

._pillSoftDeleted_10un8_123 {
  background: var(--rd-status-skipped-bg);
  border: 1px dashed var(--rd-status-skipped-line);
  color: var(--rd-status-skipped-fg);
  opacity: 0.7;
  text-decoration: line-through;
}

._pillDraggable_10un8_131 {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

._pillDraggable_10un8_131:active {
  cursor: grabbing;
}

/* Primary subject — subtle but unambiguous: solid accent border,
   slightly stronger fill, semibold text. No icon (keeps the surface
   tap-fast). */
._pillPrimary_10un8_144 {
  background: rgba(104, 255, 154, 0.18);
  border-color: var(--rd-color-accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--rd-color-accent-line);
}

._pillRemove_10un8_151 {
  background: none;
  border: none;
  color: var(--rd-color-text-muted);
  font-size: var(--rd-type-eyebrow);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color var(--rd-motion-fast);
}

._pillRemove_10un8_151:hover {
  color: var(--rd-status-error-fg);
}

._keywordInput_10un8_166 {
  width: 100%;
  padding: 7px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  transition: border-color var(--rd-motion-fast);
}

._keywordInput_10un8_166:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._keywordInput_10un8_166::placeholder {
  color: var(--rd-color-text-faint);
}

._emptyText_10un8_187 {
  color: var(--rd-color-text-faint);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  font-style: italic;
}

._saveStatus_10un8_194 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  color: var(--rd-color-text-muted);
  margin-left: auto;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}
._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;
}
._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;
}
/* CropControls — vertical panel inside the Crop accordion. */

._panel_1uds7_3 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._panelDisabled_1uds7_11 {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* ------- Aspect chips — flat row per spec (no container outline) ------- */

._chipRow_1uds7_19 {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
}

._chip_1uds7_19 {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

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

._chipActive_1uds7_47 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

._chipActive_1uds7_47:hover {
  background: var(--rd-color-accent-bg-hi);
  color: var(--rd-color-accent);
}

/* ------- Field (panelLo box) ------- */

._field_1uds7_60 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  min-width: 0;
}

._fieldLabel_1uds7_71 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._fieldValue_1uds7_80 {
  font-family: var(--rd-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-text);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

._dot_1uds7_92 {
  color: var(--rd-color-text-faint);
  font-weight: 400;
}

._fieldGrid_1uds7_97 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ------- Slider rows ------- */

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

._sliderHeader_1uds7_111 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

._sliderLabel_1uds7_117 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._sliderValue_1uds7_126 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._sliderHint_1uds7_132 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* SliderRow per spec — screens-editor.jsx lines 318–339:
   2 px line track, 12 px phos knob with a soft 4 px outer halo. */
._sliderInput_1uds7_142 {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--rd-color-line);
  border-radius: 1px;
  cursor: pointer;
  outline: none;
}

._sliderInput_1uds7_142::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rd-color-accent);
  border: 0;
  box-shadow: 0 0 0 4px rgba(104, 255, 154, 0.15);
  cursor: pointer;
}

._sliderInput_1uds7_142::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rd-color-accent);
  border: 0;
  box-shadow: 0 0 0 4px rgba(104, 255, 154, 0.15);
  cursor: pointer;
}

/* ------- Footer + alternatives ------- */

/* Footer actions — plain ghost text per spec, separated by spacing only. */
._footer_1uds7_178 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 6px;
}

._footer_1uds7_178 > * {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  height: auto !important;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  font-weight: 500;
  cursor: pointer;
}

._footer_1uds7_178 > *:hover:not(:disabled) {
  color: var(--rd-color-text);
}

._footer_1uds7_178 > *:disabled {
  opacity: 0.5;
  cursor: default;
}

._alternatives_1uds7_206 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}

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

._altBtn_1uds7_219 {
  height: 26px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-pill);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  cursor: pointer;
  white-space: nowrap;
}

._altBtn_1uds7_219:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}
._cropContainer_14h7v_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_14h7v_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_14h7v_21 {
  position: relative;
  z-index: 1;
  overflow: visible;
}

._frame_14h7v_21 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid #68ff9a;
  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_14h7v_21:active {
  cursor: grabbing;
}

._frameImage_14h7v_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_14h7v_54 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

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

._line_14h7v_61._h_14h7v_66 {
  left: 0;
  right: 0;
  height: 1px;
}

._line_14h7v_61._v_14h7v_72 {
  top: 0;
  bottom: 0;
  width: 1px;
}

._line_14h7v_61._thirds_14h7v_78 {
  background: rgba(255, 255, 255, 0.3);
}

._line_14h7v_61._center_14h7v_82 {
  background: rgba(255, 255, 255, 0.4);
}

/* Live source-space crop dimensions, top-center above the frame.
   Phosphor pill, mono caps. Centered horizontally + sits above the
   frame's top edge so it doesn't crowd the top-left corner handles. */
._dimsBadge_14h7v_89 {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #04140a;
  background: var(--rd-color-accent);
  border-radius: var(--rd-radius-pill);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 0 16px rgba(104, 255, 154, 0.35);
}

._dimsDot_14h7v_112 {
  color: rgba(4, 20, 10, 0.55);
}

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

._zoomBtn_14h7v_126 {
  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_14h7v_126: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_14h7v_149 {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #68ff9a;
  border: 1px solid rgba(0, 0, 0, 0.4);
  z-index: 4;
  cursor: pointer;
}

/* Corner handles */
._handle_nw_14h7v_160 { top: -7px; left: -7px; cursor: nw-resize; }
._handle_ne_14h7v_161 { top: -7px; right: -7px; cursor: ne-resize; }
._handle_se_14h7v_162 { bottom: -7px; right: -7px; cursor: se-resize; }
._handle_sw_14h7v_163 { bottom: -7px; left: -7px; cursor: sw-resize; }

/* Edge midpoint handles */
._handle_n_14h7v_160 { top: -7px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
._handle_s_14h7v_162 { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
._handle_e_14h7v_168 { top: 50%; right: -7px; transform: translateY(-50%); cursor: e-resize; }
._handle_w_14h7v_169 { top: 50%; left: -7px; transform: translateY(-50%); cursor: w-resize; }

/* Inner rotation zones - inside the frame corners for tilt drag */
._innerRotZone_14h7v_172 {
  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_14h7v_180 { top: 8px; left: 8px; }
._innerRot_ne_14h7v_181 { top: 8px; right: 8px; }
._innerRot_se_14h7v_182 { bottom: 8px; right: 8px; }
._innerRot_sw_14h7v_183 { bottom: 8px; left: 8px; }

/* Rotation zones - invisible areas outside handles for rotation drag */
._rotationZone_14h7v_186 {
  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_14h7v_195 { top: -32px; left: -32px; }
._rot_ne_14h7v_196 { top: -32px; right: -32px; }
._rot_se_14h7v_197 { bottom: -32px; right: -32px; }
._rot_sw_14h7v_198 { bottom: -32px; left: -32px; }
._rot_n_14h7v_195 { top: -32px; left: 50%; transform: translateX(-50%); }
._rot_s_14h7v_197 { bottom: -32px; left: 50%; transform: translateX(-50%); }
._rot_e_14h7v_201 { top: 50%; right: -32px; transform: translateY(-50%); }
._rot_w_14h7v_202 { top: 50%; left: -32px; transform: translateY(-50%); }
._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;
}
/* EditTopToolbar — Tank Redesign Editor top toolbar (49px tall).
   Source: design_handoff_tank/tank-redesign/screens-editor.jsx §
   EditorTopToolbar. */

._toolbar_uyg8v_5 {
  /* Spec: screens-editor.jsx EditorTopToolbar lines 120–121 — 40 px,
     not the 49 px shell topbar. */
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--rd-color-bg-raised);
  border-bottom: 1px solid var(--rd-color-line);
  font-family: var(--rd-font-sans);
}

._filename_uyg8v_19 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text);
  font-size: var(--rd-type-body-micro);
  font-weight: 500;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

._position_uyg8v_31 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  color: var(--rd-color-text-faint);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._divider_uyg8v_39 {
  width: 1px;
  height: 18px;
  background: var(--rd-color-line);
  margin: 0 6px;
  flex-shrink: 0;
}

._spacer_uyg8v_47 {
  flex: 1;
}

._kbdHint_uyg8v_51 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}

._kbdLabel_uyg8v_58 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* Inline mono shortcut suffix on the primary Done button. */
._doneShortcut_uyg8v_67 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  margin-left: 4px;
  opacity: 0.85;
}
/* EditFilmstrip — Tank Redesign Editor bottom strip (80 px tall).
   Source: design_handoff_tank/tank-redesign/screens-editor.jsx § FaceBar
   (the photo navigation strip the prototype calls "FaceBar"). */

._strip_rmflv_5 {
  height: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--rd-color-bg-raised);
  border-top: 1px solid var(--rd-color-line);
  font-family: var(--rd-font-sans);
}

._scroll_rmflv_17 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--rd-color-line-strong) transparent;
}

._scroll_rmflv_17::-webkit-scrollbar {
  height: 6px;
}

._scroll_rmflv_17::-webkit-scrollbar-thumb {
  background: var(--rd-color-line-strong);
  border-radius: 3px;
}

._empty_rmflv_38 {
  flex: 1;
  text-align: center;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._scrollBtn_rmflv_48 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  color: var(--rd-color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

._scrollBtn_rmflv_48:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

._tile_rmflv_70 {
  flex-shrink: 0;
  position: relative;
  width: 90px;
  height: 64px;
  border-radius: var(--rd-radius-sm);
  border: 2px solid transparent;
  overflow: hidden;
  background: var(--rd-color-panel-lo);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--rd-motion-fast),
              box-shadow var(--rd-motion-fast);
}

._tile_rmflv_70:hover {
  border-color: var(--rd-color-line-strong);
}

._tileActive_rmflv_89 {
  border-color: var(--rd-color-accent);
  box-shadow: 0 0 0 1px rgba(104, 255, 154, 0.35);
}

._tileImg_rmflv_94 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._tilePlaceholder_rmflv_101 {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      var(--rd-color-panel) 0,
      var(--rd-color-panel) 8px,
      var(--rd-color-panel-lo) 8px,
      var(--rd-color-panel-lo) 16px
    );
}

._tileStatus_rmflv_114 {
  position: absolute;
  top: 4px;
  right: 4px;
  pointer-events: none;
  /* StatusPill atom already has its own visual treatment. */
}

._tileId_rmflv_122 {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-family: var(--rd-font-mono);
  font-size: 8.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.4px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Sentinel for useInfiniteScroll — sits past the last tile and fires
   loadMore when it enters the viewport (with an 800px rootMargin so the
   load kicks off before the user reaches the edge). */
._sentinel_rmflv_142 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 64px;
  padding: 0 12px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}
/* ModeAccordion + ModeAccordionItem — Tank Redesign Editor variant A.
   Source: design_handoff_tank/tank-redesign/screens-editor.jsx
   § Screen04EditorA + Accordion helper. */

._accordion_aegdi_5 {
  display: flex;
  flex-direction: column;
  font-family: var(--rd-font-sans);
}

/* Each section row */

._item_aegdi_13 {
  border-bottom: 1px solid var(--rd-color-line);
  background: transparent;
  transition: background-color var(--rd-motion-fast);
}

._itemOpen_aegdi_19 {
  background: var(--rd-color-panel);
}

._header_aegdi_23 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--rd-color-text);
}

._header_aegdi_23:hover {
  background: var(--rd-color-panel-hi);
}

._itemOpen_aegdi_19 > ._header_aegdi_23 {
  background: transparent;
}

._numChip_aegdi_45 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--rd-color-panel-lo);
  color: var(--rd-color-text-subtle);
  border: 1px solid var(--rd-color-line);
  font-family: var(--rd-font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

._numChipOpen_aegdi_62 {
  background: var(--rd-color-accent);
  color: #04140a;
  border-color: var(--rd-color-accent);
}

._icon_aegdi_68 {
  display: inline-flex;
  align-items: center;
  color: var(--rd-color-text-muted);
  width: 14px;
  height: 14px;
}

._iconOpen_aegdi_76 {
  color: var(--rd-color-accent);
}

._title_aegdi_80 {
  flex: 0 0 auto;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  font-weight: 600;
  color: var(--rd-color-text);
  white-space: nowrap;
}

._summary_aegdi_89 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  margin-right: 6px;
}

._chev_aegdi_106 {
  width: 12px;
  height: 12px;
  color: var(--rd-color-text-muted);
  transition: transform var(--rd-motion-fast);
  flex-shrink: 0;
}

._chevOpen_aegdi_114 {
  transform: rotate(180deg);
  color: var(--rd-color-text);
}

._body_aegdi_119 {
  padding: 4px 14px 14px;
}
/* CaptionOrderStack — vertical, draggable tagged-players list inside
   the Players & faces accordion. Drives caption order. */

._stack_178uk_4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--rd-font-sans);
}

._header_178uk_11 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 4px;
}

._eyebrow_178uk_19 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._resetBtn_178uk_28 {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  transition: color var(--rd-motion-fast);
}

._resetBtn_178uk_28:hover:not(:disabled) {
  color: var(--rd-color-text);
}

._resetBtn_178uk_28:disabled {
  color: var(--rd-color-text-faint);
  cursor: default;
}

._empty_178uk_50 {
  padding: 14px 12px;
  text-align: center;
  color: var(--rd-color-text-muted);
  font-size: var(--rd-type-body-dense);
}

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

._card_178uk_63 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  cursor: grab;
  transition: border-color var(--rd-motion-fast),
              background-color var(--rd-motion-fast),
              box-shadow var(--rd-motion-fast);
  user-select: none;
  touch-action: none;
}

._card_178uk_63:active {
  cursor: grabbing;
}

._card_178uk_63:focus-visible {
  outline: 2px solid var(--rd-color-line-focus);
  outline-offset: 2px;
}

._card_178uk_63:hover,
._cardHovered_178uk_89 {
  border-color: var(--rd-color-line-strong);
}

._cardSelected_178uk_93 {
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

._cardDragging_178uk_98 {
  opacity: 0.6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* Cards that aren't the one being dragged but are in an active drag —
   slight dimming to focus attention on the moving card + the live
   reorder feedback the position numbers already provide. */
._cardShifted_178uk_107 {
  opacity: 0.85;
}

._position_178uk_111 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rd-radius-sm);
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  font-family: var(--rd-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-color-text);
}

._cardSelected_178uk_93 ._position_178uk_111 {
  background: var(--rd-color-accent);
  color: #04140a;
  border-color: var(--rd-color-accent);
}

._starBtn_178uk_133 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  color: var(--rd-color-text-faint);
  cursor: pointer;
  padding: 0;
  transition: color var(--rd-motion-fast),
              background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._starBtn_178uk_133:hover {
  color: var(--rd-color-text);
  background: var(--rd-color-panel-hi);
}

._starBtnActive_178uk_156 {
  color: #ffd24a;
  background: rgba(255, 210, 74, 0.10);
  border-color: rgba(255, 210, 74, 0.45);
}

._starBtnActive_178uk_156:hover {
  color: #ffd24a;
  background: rgba(255, 210, 74, 0.18);
}

._thumbBox_178uk_167 {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 52px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

._thumbImg_178uk_181 {
  position: absolute;
  pointer-events: none;
  max-width: none;
}

._thumbFallback_178uk_187 {
  font-family: var(--rd-font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--rd-color-text-faint);
}

._body_178uk_194 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._name_178uk_202 {
  font-family: var(--rd-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._meta_178uk_212 {
  font-family: var(--rd-font-sans);
  font-size: 11px;
  color: var(--rd-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._manualPill_178uk_221 {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--rd-font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rd-color-text-faint);
  text-transform: uppercase;
}

/* Handle is purely decorative now — the entire card grabs. */
._handle_178uk_235 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-color-text-faint);
  pointer-events: none;
}

/* Confidence bar — fixed 60×3 with mono % on the right. */
._confidence_178uk_247 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

._bar_178uk_254 {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--rd-color-panel-lo);
  overflow: hidden;
}

._barFill_178uk_262 {
  height: 100%;
  border-radius: 2px;
}

._barFill-high_178uk_267 { background: var(--rd-color-accent); }
._barFill-mid_178uk_268  { background: var(--rd-status-attention-fg); }
._barFill-low_178uk_269  { background: var(--rd-status-error-fg); }

._pct_178uk_271 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.4px;
  color: var(--rd-color-text-faint);
}

/* Hover-only skip × in the top-right corner. Stops pointer events from
   triggering the parent card's drag listeners. */
._skipBtn_178uk_280 {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-radius: var(--rd-radius-sm);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--rd-motion-fast),
              background-color var(--rd-motion-fast);
}

._card_178uk_63 {
  position: relative;
}

._card_178uk_63:hover ._skipBtn_178uk_280,
._card_178uk_63:focus-within ._skipBtn_178uk_280 {
  opacity: 1;
}

._skipBtn_178uk_280:hover {
  background: var(--rd-status-error-bg);
  color: var(--rd-status-error-fg);
}

/* Footer — ghost text "+ Add face" / "Auto-relink". */
._footer_178uk_316 {
  display: flex;
  gap: 18px;
  padding-top: 6px;
}

._footerBtn_178uk_322 {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  font-weight: 500;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  transition: color var(--rd-motion-fast);
}

._footerBtn_178uk_322:hover:not(:disabled) {
  color: var(--rd-color-text);
}

._footerBtn_178uk_322:disabled {
  opacity: 0.5;
  cursor: default;
}
._overlay_sze92_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_sze92_1 150ms ease-out;
}

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

._modal_sze92_23 {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-xl);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: _slideUp_sze92_1 200ms ease-out;
}

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

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

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

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

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

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

/* Header */
._header_sze92_75 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-4);
  padding: var(--rd-space-5) var(--rd-space-7);
  border-bottom: 1px solid var(--rd-color-line);
  flex-shrink: 0;
  font-family: var(--rd-font-sans);
}

._title_sze92_86 {
  font-size: var(--rd-type-title);
  font-weight: 600;
  color: var(--rd-color-text);
  margin: 0;
  letter-spacing: -0.01em;
}

._closeButton_sze92_94 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text);
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  cursor: pointer;
  transition:
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast),
    background-color var(--rd-motion-fast);
}

._closeButton_sze92_94:hover {
  color: var(--rd-color-accent);
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

/* Body */
._body_sze92_118 {
  flex: 1;
  overflow-y: auto;
  padding: var(--rd-space-5) var(--rd-space-7);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

/* Footer */
._footer_sze92_127 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rd-space-3);
  padding: var(--rd-space-4) var(--rd-space-7);
  border-top: 1px solid var(--rd-color-line);
  flex-shrink: 0;
  font-family: var(--rd-font-sans);
}
._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;
}
/* RemoveSourceModal — redesign-language styling.
   Mirrors EditPersonDrawer's eyebrow + row pattern so the modal reads
   like the rest of the redesigned surfaces. */

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

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

._personName_clpra_17 {
  margin: 0;
  font-family: var(--rd-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-color-text);
}

._row_clpra_25 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--rd-color-bg-elev1);
  border: 1px solid var(--rd-color-border);
  border-radius: 6px;
}

._row_clpra_25 + ._row_clpra_25 {
  margin-top: 8px;
}

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

._rowLabel_clpra_46 {
  color: var(--rd-color-text);
  font-size: 11px;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._rowKind_clpra_53 {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  color: var(--rd-color-text-muted);
  text-transform: lowercase;
}

._rowMeta_clpra_60 {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--rd-color-text-muted);
  align-items: baseline;
}

._metaKey_clpra_69 {
  color: var(--rd-color-text-faint);
  font-size: 10px;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._metaValue_clpra_76 {
  color: var(--rd-color-text);
  font-variant-numeric: tabular-nums;
}

._rowId_clpra_81 {
  font-size: 10px;
  color: var(--rd-color-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

._note_clpra_90 {
  margin: 0;
  font-size: 13px;
  color: var(--rd-color-text-muted);
  line-height: 1.4;
}

._bulletList_clpra_97 {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--rd-color-text-muted);
  line-height: 1.45;
}

._bulletList_clpra_97 strong {
  color: var(--rd-color-text);
  font-weight: 600;
}

._loading_clpra_113 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  color: var(--rd-color-text-muted);
}

._error_clpra_122,
._empty_clpra_123 {
  margin: 0;
  font-size: 13px;
  color: var(--rd-color-text-muted);
}

/* Footer: ghost left, destructive right; wraps on narrow widths so the
   3-button layout doesn't overflow and clip "Cancel". */
._footer_clpra_131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

._footerRight_clpra_140 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.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);
}

.status-cancelled .export-summary-icon,
.status-cancelled .export-status-badge {
  color: var(--muted-color, #999);
}

.status-cancelled .export-status-badge {
  background: rgba(153, 153, 153, 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 — Tank Redesign mini-calendar with match-day dots.
   Source: design_handoff_tank/screens-matches.jsx § Screen03Matches left
   column mini-calendar. */

._calendar_130wt_5 {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: var(--rd-space-4);
  min-width: 240px;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._calendar_130wt_5._expanded_130wt_15 {
  min-width: 400px;
  padding: var(--rd-space-5);
}

/* Header — month name (left) + TODAY phosphor link (right). Source:
   design_handoff_tank/screens-matches.jsx § Screen03Matches mini-calendar. */
._header_130wt_22 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

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

._monthYear_130wt_36 {
  flex: 1;
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h3);
  font-weight: 600;
  color: var(--rd-color-text);
}

._expanded_130wt_15 ._monthYear_130wt_36 {
  font-size: var(--rd-type-title);
}

/* TODAY — plain mono phosphor label, no pill border. Hover lightens. */
._todayBtn_130wt_49 {
  background: transparent;
  border: none;
  color: var(--rd-color-accent);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--rd-motion-fast);
}

._todayBtn_130wt_49:hover {
  opacity: 0.8;
}

/* Prev / Next nav — borderless icon buttons, only visible chrome on hover. */
._navBtn_130wt_68 {
  background: transparent;
  border: none;
  color: var(--rd-color-text-muted);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--rd-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition:
    color var(--rd-motion-fast),
    opacity var(--rd-motion-fast),
    background-color var(--rd-motion-fast);
}

._navBtn_130wt_68:hover {
  color: var(--rd-color-accent);
  opacity: 1;
  background: var(--rd-color-accent-bg);
}

._expandBtn_130wt_93 {
  background: transparent;
  border: none;
  color: var(--rd-color-text-faint);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--rd-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--rd-motion-fast),
    background-color var(--rd-motion-fast);
}

._expandBtn_130wt_93:hover {
  color: var(--rd-color-accent);
  background: var(--rd-color-accent-bg);
}

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

._weekday_130wt_116 {
  text-align: center;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  padding: 4px 0;
}

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

/* Day cells */
._day_130wt_142 {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
  border-radius: var(--rd-radius-sm);
  cursor: pointer;
  transition: background-color var(--rd-motion-fast);
  min-height: 32px;
}

._expanded_130wt_15 ._day_130wt_142 {
  min-height: 48px;
  font-size: 14px;
}

._day_130wt_142:hover {
  background: var(--rd-color-panel-hi);
}

._dayEmpty_130wt_167 {
  aspect-ratio: 1;
}

._dayOtherMonth_130wt_171 {
  color: var(--rd-color-text-faint);
  opacity: 0.6;
}

._dayToday_130wt_176 {
  background: var(--rd-color-accent-bg);
  border: 1px solid var(--rd-color-accent-line);
}

._dayToday_130wt_176 ._dayNumber_130wt_181 {
  font-weight: 600;
  color: var(--rd-color-accent);
}

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

._daySelected_130wt_186 ._dayNumber_130wt_181 {
  color: var(--rd-color-bg);
  font-weight: 600;
}

._daySelected_130wt_186:hover {
  background: var(--rd-color-accent);
}

._dayHasMatches_130wt_200 ._dayNumber_130wt_181 {
  font-weight: 600;
}

._dayLive_130wt_204 {
  animation: _pulse_130wt_1 2s ease-in-out infinite;
}

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

._dayNumber_130wt_181 {
  z-index: 1;
}

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

._expanded_130wt_15 ._dayDots_130wt_218 {
  bottom: 4px;
}

/* "Has match" indicator — phosphor at 60% opacity per design spec.
   Even when the per-event-color is something else (training cyan etc.) we
   render the dot in phos so the calendar reads as a unified product surface,
   not a color-coded chart. */
._dayDot_130wt_218 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(104, 255, 154, 0.6) !important;
  opacity: 1;
}

._expanded_130wt_15 ._dayDot_130wt_218 {
  width: 5px;
  height: 5px;
}

/* Tooltip */
._tooltip_130wt_247 {
  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_130wt_247::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border);
}

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

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

._tooltipMatch_130wt_282 {
  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_130wt_282:hover {
  background: rgba(102, 255, 183, 0.1);
}

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

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

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

._tooltipMore_130wt_327 {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding-top: 4px;
}
/* MatchCard — single-row list item.
   Source: design_handoff_tank/screens-matches.jsx § Screen03Matches.

   Three lines, no color bar / no status-mix bar / no crew avatars.
   Selected state uses the phosphor accent tint per design tokens. */

._card_13b2j_7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  cursor: pointer;
  font-family: var(--rd-font-sans);
  transition:
    background-color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
}

._card_13b2j_7:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-line-strong);
}

._card_13b2j_7:focus-visible {
  outline: 2px solid var(--rd-color-line-focus);
  outline-offset: 2px;
}

._card_13b2j_7._selected_13b2j_32 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

/* Line 1 — teams (or event name) + status pill */
._row1_13b2j_38 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-3);
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h3);
  font-weight: 600;
  color: var(--rd-color-text);
}

._teams_13b2j_49 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

._teamHome_13b2j_56,
._teamAway_13b2j_57,
._eventName_13b2j_58 {
  font-weight: 600;
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._vs_13b2j_66 {
  font-weight: 400;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  text-transform: lowercase;
}

/* Line 2 — time · competition · round · venue */
._row2_13b2j_74 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._time_13b2j_83 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text);
  letter-spacing: 0.2px;
}

._dot_13b2j_89 {
  color: var(--rd-color-text-faint);
}

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

/* Line 3 — photos · crew · destinations */
._row3_13b2j_98 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._photoCount_13b2j_107 {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text);
}

._crew_13b2j_120 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-muted);
}
/* Stepper — Tank Redesign Drawer B step indicator.
   Source: design_handoff_tank/screens-matches.jsx § Screen03MatchesDrawerB.
   Numbered chip + label per step, accent-color connector when complete. */

._stepper_150ay_5 {
  width: 100%;
  padding: 0 0 var(--rd-space-5) 0;
  font-family: var(--rd-font-sans);
}

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

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

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

._step_150ay_5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 96px;
}

._stepIndicator_150ay_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._stepNumber_150ay_51 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 700;
  color: var(--rd-color-text-subtle);
  letter-spacing: 0.4px;
}

._checkIcon_150ay_59 {
  width: 14px;
  height: 14px;
  color: #04140a;
}

._stepLabel_150ay_65 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  text-align: center;
  white-space: nowrap;
}

/* Active step — accent-tinted ring */
._step_150ay_5._active_150ay_77 ._stepIndicator_150ay_38 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent);
}

._step_150ay_5._active_150ay_77 ._stepNumber_150ay_51 {
  color: var(--rd-color-accent);
}

._step_150ay_5._active_150ay_77 ._stepLabel_150ay_65 {
  color: var(--rd-color-accent);
  font-weight: 600;
}

/* Completed step — solid phosphor */
._step_150ay_5._completed_150ay_92 ._stepIndicator_150ay_38 {
  background: var(--rd-color-accent);
  border-color: var(--rd-color-accent);
}

._step_150ay_5._completed_150ay_92 ._stepNumber_150ay_51 {
  color: #04140a;
}

._step_150ay_5._completed_150ay_92 ._stepLabel_150ay_65 {
  color: var(--rd-color-text);
}

/* Connector line between steps — 2px so it reads at the same weight as the
   step circle stroke; phosphor-filled when the step before it is complete.
   margin-bottom offsets the connector from the label baseline so it aligns
   horizontally with the center of the 28px step circle. */
._connector_150ay_109 {
  flex: 1;
  height: 2px;
  background: var(--rd-color-line-strong);
  border-radius: 2px;
  margin: 0 12px;
  margin-bottom: 22px;
  transition: background-color var(--rd-motion-fast);
}

._connectorCompleted_150ay_119 {
  background: var(--rd-color-accent);
}

/* Active step's *incoming* connector should already be filled (the previous
   step is by definition completed when this one is active). Handled via the
   `connectorCompleted` class on the connector following the previous step. */
/* MatchModal — Tank Redesign Drawer B (3-step stepper).
   Source: design_handoff_tank/screens-matches.jsx § Screen03MatchesDrawerB.
   720 px centered modal; step header → step content → footer with
   prev/next navigation. Inner step components keep their existing
   visuals; this pass aligns the modal chrome to redesign tokens. */

/* Drawer B target: 720 px wide centred modal per the handoff spec.
   Overrides Modal's `lg` size (640) without expanding the global scale. */
._drawerB_1tzr6_9 {
  max-width: 720px !important;
  width: 100%;
  max-height: 700px;
}

._modalBody_1tzr6_15 {
  min-height: 300px;
  font-family: var(--rd-font-sans);
}

._matchHubSearch_1tzr6_20 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
}

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

._hint_1tzr6_32 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._searchInput_1tzr6_40 {
  width: 100%;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 10px 12px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
  transition: border-color var(--rd-motion-fast);
}

._searchInput_1tzr6_40:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._searchInput_1tzr6_40::placeholder {
  color: var(--rd-color-text-faint);
}

._searchLoading_1tzr6_61 {
  text-align: center;
  padding: 16px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

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

._searchResult_1tzr6_71 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._searchResult_1tzr6_71:hover {
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

._input_1tzr6_182,
._select_1tzr6_183 {
  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_1tzr6_182:focus,
._select_1tzr6_183:focus {
  outline: none;
  border-color: var(--accent);
}

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

._select_1tzr6_183 {
  cursor: pointer;
}

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

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

._teamSelectRow_1tzr6_213 ._select_1tzr6_183 {
  flex: 1;
}

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

._teamClearButton_1tzr6_227 {
  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_1tzr6_227:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

._teamDropdown_1tzr6_246 {
  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_1tzr6_261 {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

._teamDropdownItem_1tzr6_268 {
  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_1tzr6_268:last-child {
  border-bottom: none;
}

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

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

._createTeamRow_1tzr6_290 ._input_1tzr6_182 {
  flex: 1;
}

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

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

/* Checkbox list for multi-select */
._checkboxList_1tzr6_311 {
  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_1tzr6_323 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

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

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

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

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

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

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

._stepHeader_1tzr6_364 ._stepDescription_1tzr6_357 {
  margin: 0;
  flex: 1;
}

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

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

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

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

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

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

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

._ftpCard_1tzr6_427 {
  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_1tzr6_427:hover {
  border-color: var(--accent);
}

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

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

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

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

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

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

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

._defaultBadge_1tzr6_482 {
  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_1tzr6_492 {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
}

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

._noTargetsHint_1tzr6_502 {
  font-size: 12px;
}

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

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

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

._iptcColumns_1tzr6_526 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

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

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

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

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

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

._variableButton_1tzr6_563 {
  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_1tzr6_563:hover {
  border-color: var(--accent);
  color: var(--accent);
}

._variableMenu_1tzr6_579 {
  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_1tzr6_594 {
  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_1tzr6_594:last-child {
  border-bottom: none;
}

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

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

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

/* Textarea for multiline templates */
._textarea_1tzr6_629 {
  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_1tzr6_629:focus {
  outline: none;
  border-color: var(--accent);
}

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

._previewHeader_1tzr6_656 {
  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_1tzr6_667 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

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

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

._previewValue_1tzr6_695 {
  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);
}
._message_r1d95_1 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
/* MatchDetails panel — Tank Redesign Drawer A.
   Source: design_handoff_tank/screens-matches.jsx § Screen03MatchesDrawerA.
   520 px slide-in side panel; the parent Matches page positions the
   panel; here we only own its internal chrome. */

._container_1n80y_6 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
  font-family: var(--rd-font-sans);
}

._empty_1n80y_17 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

/* Header — no status pill on the match header (per handoff) */
._header_1n80y_33 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--rd-color-line);
}

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

/* Phos left-bar at full header height — design spec, replaces the old
   per-event-type color sliver. Always phosphor regardless of event type so
   the drawer reads as part of the unified design system. */
._colorIndicator_1n80y_50 {
  width: 3px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--rd-color-accent) !important;
  border-radius: 0;
}

._headerText_1n80y_58 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._eyebrow_1n80y_65 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._title_1n80y_74 {
  font-family: var(--rd-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--rd-color-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._subtitle_1n80y_86 {
  font-family: var(--rd-font-mono);
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
  margin: 4px 0 0 0;
}

._headerActions_1n80y_94 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._closeButton_1n80y_101 {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border-radius: var(--rd-radius-md);
  transition:
    background var(--rd-motion-fast),
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
}

._closeButton_1n80y_101:hover {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border-color: var(--rd-color-accent-line);
}

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

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

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

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

/* Tab strip — wraps the shared TabBar primitive in drawer-padding. */
._tabsWrapper_1n80y_162 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rd-color-line);
}

/* Tab content */
._tabContent_1n80y_168 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-family: var(--rd-font-sans);
}

/* Crew tab list */
._crewSection_1n80y_176 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._crewList_1n80y_182 {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._crewRow_1n80y_191 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
}

._crewName_1n80y_202 {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  font-weight: 500;
}

._crewUsername_1n80y_209 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  color: var(--rd-color-text-subtle);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._iptcInput_1n80y_387,
._iptcTextarea_1n80y_388 {
  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_1n80y_387:focus,
._iptcTextarea_1n80y_388:focus {
  outline: none;
  border-color: var(--accent);
}

._iptcInput_1n80y_387:disabled,
._iptcTextarea_1n80y_388:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

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

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

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

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

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

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

._addFtp_1n80y_453 {
  margin-top: 8px;
}

._ftpSelect_1n80y_457 {
  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_1n80y_457 option {
  background: var(--bg);
}

/* ──────────────────────────────────────────────────────────────────────────
   Tank Redesign drawer additions — match the prototype in
   design_handoff_tank/screens-matches.jsx § Screen03MatchesDrawerA.
   ────────────────────────────────────────────────────────────────────────── */

/* Section eyebrow used by Schedule / Crew / FTP / Stats blocks.
   Muted (not phosphor) per design — phosphor is reserved for active state
   indicators (active tab underline, primary CTA, today date). */
._sectionEyebrow_1n80y_480 {
  display: block;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
  margin-bottom: 8px;
}

/* 2×2 schedule grid */
._scheduleGrid_1n80y_492 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

._scheduleField_1n80y_498 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
}

._scheduleLabel_1n80y_508 {
  font-family: var(--rd-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._scheduleValue_1n80y_517 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._scheduleActions_1n80y_523 {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Unified Crew card */
._crewCard_1n80y_530 {
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._crewListNew_1n80y_540 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._crewRowNew_1n80y_548 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

._avatar_1n80y_555 {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-color-panel-hi);
  border: 1px solid var(--rd-color-line);
  border-radius: 50%;
  font-family: var(--rd-font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-color-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._crewName_1n80y_202 {
  flex: 1;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._crewRole_1n80y_582 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._crewSignOff_1n80y_590 {
  background: none;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text-muted);
  padding: 2px 8px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-eyebrow);
  cursor: pointer;
}

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

._crewRemove_1n80y_606 {
  background: none;
  border: none;
  color: var(--rd-color-text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

._crewRemove_1n80y_606:hover {
  color: var(--rd-status-error-fg);
}

._crewAdd_1n80y_620 {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--rd-color-line);
  padding-top: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

._crewAddPicker_1n80y_629 {
  position: relative;
}

._crewAddBtn_1n80y_633 {
  background: transparent;
  border: 1px dashed var(--rd-color-line-strong);
  color: var(--rd-color-text-muted);
  padding: 4px 10px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  cursor: pointer;
}

._crewAddBtn_1n80y_633:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
  border-color: var(--rd-color-text-muted);
}

._crewAddMenu_1n80y_650 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

._crewAddItem_1n80y_667 {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  cursor: pointer;
}

._crewAddItem_1n80y_667:hover {
  background: var(--rd-color-panel-hi);
}

/* 4-up stat tiles */
._statTiles_1n80y_685 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._statTiles_1n80y_685 > * {
  flex: 1 1 auto;
  min-width: 96px;
}

/* FTP destinations list (Info-tab read view).
   Source: design_handoff_tank/screens-matches.jsx § Drawer FTP destinations. */
._ftpDestList_1n80y_698 {
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  overflow: hidden;
}

._ftpDestRow_1n80y_705 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rd-color-line);
}

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

._ftpDestIcon_1n80y_717 {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rd-radius-sm);
  background: var(--rd-color-panel);
  color: var(--rd-color-accent);
  flex-shrink: 0;
}

._ftpDestText_1n80y_729 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._ftpDestName_1n80y_737 {
  font-size: var(--rd-type-body);
  font-weight: 500;
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._ftpDestHost_1n80y_746 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-subtle);
}

/* Persistent drawer footer */
._drawerFooter_1n80y_754 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--rd-color-line);
  background: var(--rd-color-panel);
  flex-shrink: 0;
}

._escHint_1n80y_764 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._footerSpacer_1n80y_775 {
  flex: 1;
}
/* MatchFilters — vertical filter column for the Matches page sidebar.
   Source: design_handoff_tank/screens-matches.jsx § Screen03Matches —
   filter chips stacked under the calendar in the left column.
   Mono uppercase eyebrow per group (TIME / STATUS / TYPE), redesign chips,
   redesign accent for active state. */

._container_8bhx0_7 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  padding: var(--rd-space-3);
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  font-family: var(--rd-font-sans);
}

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

._sectionLabel_8bhx0_24 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

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

/* Search input */
._searchWrapper_8bhx0_40 {
  position: relative;
}

._searchInput_8bhx0_44 {
  width: 100%;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 7px 28px 7px 10px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  transition: border-color var(--rd-motion-fast);
}

._searchInput_8bhx0_44:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._searchInput_8bhx0_44::placeholder {
  color: var(--rd-color-text-faint);
}

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

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

/* Filter chips — pill-shaped, same spec as the legacy FilterBar */
._pill_8bhx0_84 {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--rd-motion-fast),
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
  white-space: nowrap;
}

._pill_8bhx0_84:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

._pillActive_8bhx0_110 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

/* Sport dropdown */
._select_8bhx0_117 {
  width: 100%;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 7px 10px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  cursor: pointer;
}

._select_8bhx0_117:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._select_8bhx0_117 option {
  background: var(--rd-color-panel);
  color: var(--rd-color-text);
}

/* Clear-filters footer link */
._clearAll_8bhx0_140 {
  margin-top: var(--rd-space-2);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}

._clearAll_8bhx0_140:hover {
  color: var(--rd-color-text);
}
/* Matches page — Tank Redesign port (PR 8).
   Pattern: ~/Downloads/tank-redesign/screens-matches.jsx § Screen03Matches.
   Three-column layout (sidebar / main grid / details drawer) preserved. */

._page_164tp_5 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--rd-space-4) var(--rd-space-5);
  gap: var(--rd-space-4);
  overflow: hidden;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
}

._header_164tp_17 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

._title_164tp_24 {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h1);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-text);
  margin: 0;
}

/* Subtitle below the H1: "5 in this week · default sort by kick-off". */
._headerSubtitle_164tp_34 {
  margin: 4px 0 0;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._error_164tp_41 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--rd-status-error-bg);
  border: 1px solid var(--rd-status-error-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-status-error-fg);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  flex-shrink: 0;
}

._error_164tp_41 button {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: var(--rd-radius-sm);
  cursor: pointer;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  transition: background-color var(--rd-motion-fast);
}

._error_164tp_41 button:hover {
  background: rgba(255, 107, 107, 0.10);
}

/* Two-column layout — narrow left column (calendar + vertical filters)
   and single-column match list on the right. Drawer overlays the main
   column from the right when a match is selected.
   Source: design_handoff_tank/screens-matches.jsx § Screen03Matches. */
._layout_164tp_75 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--rd-space-4);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

._sidebar_164tp_84 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  overflow-y: auto;
}

._clearDate_164tp_91 {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text-muted);
  padding: 8px 12px;
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

._clearDate_164tp_91:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

/* Main content column */
._main_164tp_110 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  overflow-y: auto;
  min-height: 0;
}

._dateLabel_164tp_118 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-accent);
  margin: 0;
  flex-shrink: 0;
}

/* Match list — single-column stack, full main-column width.
   Source: screens-matches.jsx § Screen03Matches. */
._matchList_164tp_131 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
}

/* Section header above the list: eyebrow label + thin divider + count.
   Source: screens-matches.jsx § Screen03Matches. */
._sectionHeader_164tp_139 {
  display: flex;
  align-items: center;
  gap: var(--rd-space-3);
  padding-bottom: var(--rd-space-2);
}

._sectionEyebrow_164tp_146 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

._sectionDivider_164tp_153 {
  flex: 1;
  height: 1px;
  background: var(--rd-color-line);
}

._sectionCount_164tp_159 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

._empty_164tp_166 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  text-align: center;
}

/* Legacy `.details` column kept for any non-drawer consumer (none today). */
._details_164tp_177 {
  overflow-y: auto;
  min-height: 0;
}

/* Drawer A — 520 px slide-in panel from the right with backdrop dim.
   Source: design_handoff_tank/screens-matches.jsx § Screen03MatchesDrawerA. */
._drawerBackdrop_164tp_185 {
  position: fixed;
  inset: 0;
  background: var(--rd-color-scrim);
  /* Sit on the established overlay layer so that modals (z-modal = 40)
     spawned from inside the drawer render ABOVE it. Was an ad-hoc 90,
     which put the drawer over every modal-class dialog in the app. */
  z-index: var(--z-overlay);
  animation: _drawerFade_164tp_1 180ms ease-out;
}

._drawerPanel_164tp_196 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 100vw;
  /* One tick above the drawer backdrop, still below --z-modal so any
     Edit / Confirm dialog opened from drawer actions covers it. */
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rd-color-panel);
  border-left: 1px solid var(--rd-color-line);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  animation: _drawerSlide_164tp_1 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes _drawerSlide_164tp_1 {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

._loading_164tp_225 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rd-space-4);
  height: 100%;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
}

._loading_164tp_225 p {
  margin: 0;
  font-size: var(--rd-type-body-dense);
}

@media (max-width: 1200px) {
  ._layout_164tp_75 {
    grid-template-columns: 260px 1fr;
  }
  ._drawerPanel_164tp_196 {
    width: min(520px, 100vw);
  }
}

@media (max-width: 768px) {
  ._page_164tp_5 {
    padding: var(--rd-space-3);
  }
  ._layout_164tp_75 {
    grid-template-columns: 1fr;
  }
  ._sidebar_164tp_84 {
    display: none;
  }
  ._matchList_164tp_131 {
    gap: var(--rd-space-2);
  }
  ._drawerPanel_164tp_196 {
    width: 100vw;
  }
}
/* TrainingReview — Tank Redesign per-face review queue.
   Source: design_handoff_tank/screens-rest.jsx § Screen09Training. */

._screen_1j0bn_4 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  position: relative;
}

/* Top eyebrow row */
._topbar_1j0bn_16 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--rd-space-5);
  border-bottom: 1px solid var(--rd-color-line);
  background: var(--rd-color-bg-raised);
  flex-shrink: 0;
}

._divider_1j0bn_26 {
  color: var(--rd-color-text-faint);
}

._fileId_1j0bn_30 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-micro);
  color: var(--rd-color-text);
}

._spacer_1j0bn_36 {
  flex: 1;
}

._queueCounter_1j0bn_40 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* Main two-pane body */
._body_1j0bn_49 {
  flex: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--rd-space-4);
  padding: var(--rd-space-4);
  min-height: 0;
  overflow: hidden;
}

/* Left pane — source photo + filmstrip */
._leftPane_1j0bn_60 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  min-height: 0;
  /* Grid items default to min-width: auto (= min-content). Without this
     override, the unshrinkable 38-tile filmstrip below pushes the leftPane
     past its 1.6fr track and clips the rightPane via .body's overflow. */
  min-width: 0;
}

._photoFrame_1j0bn_71 {
  flex: 1;
  position: relative;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

._photoImg_1j0bn_83 {
  /* Force the element box to fill the frame so object-fit: contain governs
     the rendered content rect. With max-width/max-height only, a preview
     smaller than the frame renders at its natural size — and the face
     overlay math (which derives from frame dimensions + image aspect)
     drifts off the actual displayed content. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

._photoPlaceholder_1j0bn_95 {
  color: var(--rd-color-text-faint);
}

/* Face overlay boxes */
._faceBox_1j0bn_100 {
  position: absolute;
  border: 1.5px solid var(--rd-color-line-strong);
  cursor: pointer;
}

._faceBox-pending_1j0bn_106 {
  border-style: dashed;
  border-color: var(--rd-color-text-subtle);
  opacity: 0.85;
}

._faceBox-confirmed_1j0bn_112 {
  border-color: var(--rd-color-accent-line);
  opacity: 0.55;
}

._faceBox-active_1j0bn_117 {
  border: 2px solid var(--rd-color-accent);
  box-shadow:
    0 0 0 2px rgba(104, 255, 154, 0.25),
    0 0 30px rgba(104, 255, 154, 0.45);
}

._faceBox-active_1j0bn_117::before,
._faceBox-active_1j0bn_117::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--rd-color-accent);
  border: 1px solid #04140a;
}
._faceBox-active_1j0bn_117::before { left: -5px; top: -5px; }
._faceBox-active_1j0bn_117::after  { right: -5px; bottom: -5px; }

._faceBox-ignored_1j0bn_136 {
  border-style: dotted;
  border-color: var(--rd-color-text-faint);
  opacity: 0.5;
  cursor: default;
}

._faceTag_1j0bn_143 {
  position: absolute;
  left: -1px;
  top: -22px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

._faceBox-pending_1j0bn_106 ._faceTag_1j0bn_143 {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text-muted);
  border: 1px solid var(--rd-color-line);
}

._faceBox-confirmed_1j0bn_112 ._faceTag_1j0bn_143 {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
}

._faceBox-active_1j0bn_117 ._faceTag_1j0bn_143 {
  background: var(--rd-color-accent);
  color: #04140a;
  font-weight: 700;
}

._faceBox-ignored_1j0bn_136 ._faceTag_1j0bn_143 {
  background: var(--rd-color-panel-lo);
  color: var(--rd-color-text-faint);
}

/* Filmstrip */
._filmstrip_1j0bn_179 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  /* Mirror the leftPane override so the inner .filmstripScroll can actually
     shrink instead of forcing min-content propagation up the chain. */
  min-width: 0;
}

._filmstripLabel_1j0bn_193 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  flex-shrink: 0;
}

._filmstripScroll_1j0bn_188 {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  min-width: 0;
}

._filmstripChevron_1j0bn_211 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 40px;
  padding: 0;
  background: var(--rd-color-panel-lo);
  color: var(--rd-color-text-muted);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-sm);
  cursor: pointer;
  transition:
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
}

._filmstripChevron_1j0bn_211:hover {
  color: var(--rd-color-accent);
  border-color: var(--rd-color-accent-line);
}

._filmstripTile_1j0bn_234 {
  flex-shrink: 0;
  width: 56px;
  height: 40px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-color-line);
  background: var(--rd-color-panel-lo);
  cursor: pointer;
  overflow: hidden;
}

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

._filmstripTileActive_1j0bn_251 {
  border-color: var(--rd-color-accent);
  box-shadow: 0 0 0 1px rgba(104, 255, 154, 0.4);
}

._filmstripPlaceholder_1j0bn_256 {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg,
      var(--rd-color-panel) 0,
      var(--rd-color-panel) 6px,
      var(--rd-color-panel-lo) 6px,
      var(--rd-color-panel-lo) 12px);
}

/* Right pane — face card + suggestions + actions */
._rightPane_1j0bn_268 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  min-height: 0;
  min-width: 0;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: var(--rd-space-5);
  overflow: auto;
}

._rightEyebrow_1j0bn_281 {
  margin-top: var(--rd-space-3);
}

._rightEyebrow_1j0bn_281:first-of-type {
  margin-top: 0;
}

._faceCard_1j0bn_289 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-accent-line);
  border-radius: var(--rd-radius-md);
  box-shadow: 0 0 30px rgba(104, 255, 154, 0.15);
}

._faceCardImg_1j0bn_300 {
  width: 96px;
  height: 116px;
  object-fit: cover;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-color-accent-line);
}

._faceCardImgFrame_1j0bn_308 {
  position: relative;
  width: 96px;
  height: 116px;
  overflow: hidden;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-color-accent-line);
  background: var(--rd-color-panel);
  flex-shrink: 0;
}

._faceCardPlaceholder_1j0bn_319 {
  width: 96px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-color-panel);
  border-radius: var(--rd-radius-sm);
  border: 1px dashed var(--rd-color-line);
  color: var(--rd-color-text-faint);
}

._faceCardMeta_1j0bn_331 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

._faceCardId_1j0bn_338 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._confidenceBadge_1j0bn_346 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border: 1px solid var(--rd-color-accent-line);
  align-self: flex-start;
}

/* Suggestions list */
._suggestList_1j0bn_359 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._suggestRow_1j0bn_368,
._suggestRowTop_1j0bn_369 {
  display: grid;
  grid-template-columns: 1fr 80px 40px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
}

._suggestPct_1j0bn_382 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  color: var(--rd-color-text-muted);
  text-align: right;
}

._suggestRowTop_1j0bn_369 ._suggestPct_1j0bn_382 {
  color: var(--rd-color-accent);
  font-weight: 500;
}

._suggestRowTop_1j0bn_369 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

._suggestName_1j0bn_400 {
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._suggestRowTop_1j0bn_369 ._suggestName_1j0bn_400 {
  color: var(--rd-color-accent);
  font-weight: 500;
}

._suggestBar_1j0bn_412 {
  display: block;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: var(--rd-color-panel);
  overflow: hidden;
}

._suggestBarFill_1j0bn_421 {
  display: block;
  height: 100%;
  background: var(--rd-color-accent);
}

._suggestEmpty_1j0bn_427 {
  margin: 0;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-faint);
  font-style: italic;
}

/* Search */
._searchHead_1j0bn_436 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

._newPersonLink_1j0bn_443 {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-accent);
  cursor: pointer;
}

._newPersonLink_1j0bn_443:hover:not(:disabled) {
  text-decoration: underline;
}

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

._searchInput_1j0bn_464 {
  width: 100%;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._searchInput_1j0bn_464:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._searchList_1j0bn_480 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._searchRow_1j0bn_489 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._createPersonBtn_1j0bn_503 {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--rd-color-panel-lo);
  border: 1px dashed var(--rd-color-accent-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-accent);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
}

._createPersonBtn_1j0bn_503:hover:not(:disabled) {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent);
}

._createPersonBtn_1j0bn_503:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* Footer actions */
._footer_1j0bn_531 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--rd-space-3);
  border-top: 1px solid var(--rd-color-line);
}

._footerSpacer_1j0bn_540 {
  flex: 1;
}

/* KPI strip */
._kpiStrip_1j0bn_545 {
  display: flex;
  align-items: center;
  gap: var(--rd-space-5);
  padding: 10px var(--rd-space-5);
  background: var(--rd-color-bg-raised);
  border-top: 1px solid var(--rd-color-line);
  flex-shrink: 0;
}

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

._kpiLabel_1j0bn_561 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._kpiValue_1j0bn_569 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._kpiSpacer_1j0bn_575 {
  flex: 1;
}

/* Overlays */
._loadingOverlay_1j0bn_580,
._emptyOverlay_1j0bn_581 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10, 12, 14, 0.85);
  color: var(--rd-color-text-muted);
}

/* Drag-and-drop upload zone — replaces the bare empty state so users can
   add images to the training queue without leaving the page.
   Source: user request 2026-05-06. */
._uploadZone_1j0bn_596 {
  cursor: default;
  transition: background var(--rd-motion-fast), outline-color var(--rd-motion-fast);
  outline: 2px dashed transparent;
  outline-offset: -16px;
}

._uploadZoneActive_1j0bn_603 {
  background: var(--rd-color-accent-bg);
  outline-color: var(--rd-color-accent-line);
}

._uploadHint_1j0bn_608 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

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

._uploadHintOr_1j0bn_620 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._uploadError_1j0bn_628 {
  margin-top: 8px;
  color: var(--rd-status-error-fg);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
}

/* Persistent FAB — sits in the lower-left over the photo column when the
   queue is non-empty, so users can keep feeding images without waiting for
   the queue to drain. */
._uploadFab_1j0bn_638 {
  position: absolute;
  left: 16px;
  bottom: 60px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-pill);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--rd-motion-fast),
    color var(--rd-motion-fast),
    background var(--rd-motion-fast);
}

._uploadFab_1j0bn_638:hover {
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
  background: var(--rd-color-accent-bg);
}

._uploadFab_1j0bn_638:disabled {
  opacity: 0.6;
  cursor: progress;
}
._body_ibrvl_1 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-4);
}

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

._grid_ibrvl_13 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

._field_ibrvl_19 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._fieldHalf_ibrvl_26 {
  grid-column: span 1;
}

._label_ibrvl_30 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._input_ibrvl_38 {
  width: 100%;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._input_ibrvl_38:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._input_ibrvl_38:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Team picker */
._teamPicker_ibrvl_60 {
  position: relative;
}

._teamSelected_ibrvl_64 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--rd-color-accent-bg);
  border: 1px solid var(--rd-color-accent-line);
  border-radius: var(--rd-radius-pill);
  color: var(--rd-color-accent);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
}

._teamName_ibrvl_77 {
  font-weight: 500;
}

._teamClear_ibrvl_81 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
}

._teamClear_ibrvl_81:hover {
  background: rgba(104, 255, 154, 0.15);
}

._teamList_ibrvl_99 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

._teamRow_ibrvl_116 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  cursor: pointer;
  text-align: left;
}

._teamRow_ibrvl_116:hover {
  background: var(--rd-color-panel-lo);
}

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

._teamRowKind_ibrvl_144 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._preview_ibrvl_151 {
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
}

._error_ibrvl_156 {
  margin: 0;
  padding: 8px 10px;
  background: var(--rd-status-error-bg, rgba(255, 84, 84, 0.1));
  border: 1px solid var(--rd-status-error-line, rgba(255, 84, 84, 0.4));
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-status-error-fg, #ff7a7a);
}

._footer_ibrvl_167 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
/* ManageDashboard — Manage Overview v2.
   Source: design_handoff_tank/tank-redesign/screens-rest.jsx +
   manage-redesign-v2.md brief. */

._container_1i1al_5 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
  /* Manage `<main>` already supplies `--rd-space-6` on all sides; the
     dashboard fills it edge-to-edge so the KPI grid + Model row align
     with the section eyebrow / page title above. */
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._header_1i1al_16 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

._title_1i1al_23 {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h1);
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0;
}

._subtitle_1i1al_31 {
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  margin: 0;
}

._loading_1i1al_37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rd-space-3);
  padding: var(--rd-space-9);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
}

._sectionEyebrow_1i1al_49 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

/* ───── 4-up clickable KPI row ───── */

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

._kpiTile_1i1al_64 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  /* The global `button` rule sets height: 32px on all <button>s; KPI
     tiles need the natural content height. min-height keeps the row
     uniform; height: auto lets eyebrow + value + hint stack. */
  height: auto;
  min-height: 96px;
  align-self: start;
  text-align: left;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  cursor: pointer;
  transition:
    border-color var(--rd-motion-fast),
    background-color var(--rd-motion-fast);
  font-family: var(--rd-font-sans);
}

._kpiTile_1i1al_64:hover {
  border-color: var(--rd-color-line-strong);
  background: var(--rd-color-panel-hi);
}

._kpiTile_1i1al_64._kind-attention_1i1al_91 {
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

._kpiTile_1i1al_64._kind-attention_1i1al_91:hover {
  background: var(--rd-color-accent-bg-hi, var(--rd-color-accent-bg));
}

._kpiLabel_1i1al_100 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._kpiValue_1i1al_107 {
  font-family: var(--rd-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--rd-color-text);
  line-height: 1;
}

._kind-attention_1i1al_91 ._kpiValue_1i1al_107 {
  color: var(--rd-color-accent);
}

._kpiHint_1i1al_120 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* ───── Model + Activity (two-column row) ───── */

._modelActivityRow_1i1al_129 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--rd-space-3);
}

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

._modelCard_1i1al_141,
._activityCard_1i1al_142,
._previewCard_1i1al_143 {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._modelHeader_1i1al_153,
._activityHeader_1i1al_154,
._previewHeader_1i1al_155 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._previewHeader_1i1al_155 {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  /* Override the global `button { height: 32px }` reset so the header
     row matches its content height (avatar + text). */
  height: auto;
  font-family: inherit;
  color: inherit;
}

._previewLink_1i1al_176 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

._previewHeader_1i1al_155:hover ._previewLink_1i1al_176 {
  color: var(--rd-color-accent);
}

._modelStats_1i1al_188 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

/* Stacked progress bar */
._progressTrack_1i1al_195 {
  display: flex;
  height: 8px;
  border-radius: var(--rd-radius-pill);
  overflow: hidden;
  background: var(--rd-color-panel-lo);
}

._progressFill_1i1al_203 {
  height: 100%;
  transition: width var(--rd-motion-normal);
}

._fill-done_1i1al_208 {
  background: var(--rd-color-accent);
}

._fill-attention_1i1al_212 {
  background: rgba(104, 255, 154, 0.4);
}

._progressLegend_1i1al_216 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

._legendItem_1i1al_222 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

._legendDot_1i1al_232 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rd-color-line-strong);
}

._legendItem_1i1al_222 ._legendDot_1i1al_232._fill-done_1i1al_208 {
  background: var(--rd-color-accent);
}

._legendItem_1i1al_222 ._legendDot_1i1al_232._fill-attention_1i1al_212 {
  background: rgba(104, 255, 154, 0.4);
}

._modelActions_1i1al_247 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ───── Activity feed ───── */

._activityList_1i1al_256 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityRow_1i1al_265 {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: var(--rd-type-body-dense);
}

._activityTime_1i1al_272 {
  flex: 0 0 56px;
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-faint);
}

._activityText_1i1al_279 {
  flex: 1;
  color: var(--rd-color-text);
}

._activityEmpty_1i1al_284 {
  margin: 0;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._nextMatchFooter_1i1al_290 {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  text-align: left;
  cursor: pointer;
  font-family: var(--rd-font-sans);
  transition: border-color var(--rd-motion-fast);
}

._nextMatchFooter_1i1al_290:hover {
  border-color: var(--rd-color-accent-line);
}

._nextMatchTitle_1i1al_309 {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-body);
  font-weight: 600;
  color: var(--rd-color-text);
}

._nextMatchTime_1i1al_316 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
}

/* ───── Roster + Company preview tiles ───── */

._previewList_1i1al_324 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._previewRow_1i1al_333 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
}

._previewAvatar_1i1al_343 {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-color-panel-hi);
  border: 1px solid var(--rd-color-line);
  border-radius: 50%;
  font-family: var(--rd-font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-color-text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

._previewName_1i1al_361 {
  flex: 1;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._previewMeta_1i1al_370 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
}

._previewEmpty_1i1al_376 {
  margin: 0;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._companyGrid_1i1al_382 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

@media (max-width: 1100px) {
  ._companyGrid_1i1al_382 {
    grid-template-columns: repeat(3, 1fr);
  }
}

._companyTile_1i1al_397 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  width: 100%;
  /* Opt out of the global `button { height: 32px }` reset. */
  height: auto;
  color: var(--rd-color-text);
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  text-align: left;
  cursor: pointer;
  font-family: var(--rd-font-sans);
  transition: border-color var(--rd-motion-fast);
}

._companyTile_1i1al_397:hover {
  border-color: var(--rd-color-accent-line);
}

._companyLabel_1i1al_419 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._companyCount_1i1al_426 {
  font-family: var(--rd-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-accent);
}
/* TeamList styles */

._container_1txwd_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

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

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

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

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

._error_1txwd_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_1txwd_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_1txwd_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_1txwd_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_1txwd_76:focus {
  outline: none;
  border-color: var(--accent);
}

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

._filterSelect_1txwd_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_1txwd_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_1txwd_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_1txwd_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_1txwd_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_1txwd_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_1txwd_148 {
  cursor: pointer;
  user-select: none;
}

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

._sortIndicator_1txwd_157 {
  opacity: 0.6;
}

._row_1txwd_161 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_1txwd_161:hover {
  background: rgba(255, 255, 255, 0.02);
}

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

._td_1txwd_174 {
  padding: 12px 16px;
  color: var(--text);
}

._teamName_1txwd_179 {
  font-weight: 500;
}

._aliasBadge_1txwd_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_1txwd_194 {
  color: var(--muted);
}

._typeBadge_1txwd_198 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: capitalize;
}

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

._memberCount_1txwd_212 {
  font-weight: 500;
  color: var(--muted);
}

._expandBtn_1txwd_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_1txwd_217:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: var(--accent);
}

._expanded_1txwd_239 {
  background: rgba(102, 255, 183, 0.03);
}

/* Members expandable row */
._membersRow_1txwd_244 {
  background: rgba(0, 0, 0, 0.2);
}

._membersCell_1txwd_248 {
  padding: 16px 16px 16px 48px;
  border-bottom: 1px solid var(--border);
}

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

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

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

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

._memberCard_1txwd_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_1txwd_278:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
}

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

._memberName_1txwd_300 {
  font-weight: 500;
  color: var(--text);
}

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

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

/* Modal form */
._globalInfo_1txwd_317 {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._globalLabel_1txwd_326 {
  color: var(--muted);
  font-size: 13px;
}

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

._formGroup_1txwd_337 {
  margin-bottom: 16px;
}

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

._label_1txwd_347 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1txwd_355,
._select_1txwd_356,
._textarea_1txwd_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_1txwd_355:focus,
._select_1txwd_356:focus,
._textarea_1txwd_357:focus {
  outline: none;
  border-color: var(--accent);
}

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

._footerSpacer_1txwd_379 {
  flex: 1;
}

@media (max-width: 768px) {
  ._filters_1txwd_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_1txwd_76 {
    max-width: none;
  }

  ._count_1txwd_112 {
    margin-left: 0;
  }

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

  ._tableWrapper_1txwd_119 {
    overflow-x: auto;
  }

  ._table_1txwd_119 {
    min-width: 600px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Tank Redesign Teams polish — logo placeholder + empty-team warning.
   Source: design_handoff_tank manage-redesign-v2 brief.
   ────────────────────────────────────────────────────────────────────────── */

._teamCell_1txwd_415 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

._logoPlaceholder_1txwd_421 {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--rd-color-text);
  flex-shrink: 0;
}

/* Empty-team warning — `--rd-status-warn-fg` count + small "empty" chip. */
._memberCellEmpty_1txwd_439 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._memberCellEmpty_1txwd_439 ._memberCount_1txwd_212 {
  color: var(--rd-status-warn-fg, #ffb366);
}

._emptyTag_1txwd_449 {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: var(--rd-status-warn-bg, rgba(255, 179, 102, 0.1));
  border: 1px solid var(--rd-status-warn-line, rgba(255, 179, 102, 0.4));
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rd-status-warn-fg, #ffb366);
}

/* BT-4 — last-seen column. Mono small caps for the timestamp; faint
   dash when the team has no embeddings yet. */
._lastSeen_1txwd_465 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
}

._lastSeenNever_1txwd_473 {
  color: var(--rd-color-text-faint);
  font-family: var(--rd-font-mono);
  font-size: 12px;
}
/* EditPersonDrawer — 560 px slide-in drawer. Chrome mirrors MatchDetails
   for visual consistency across all editable surfaces. */

._backdrop_jfdxo_4 {
  position: fixed;
  /* Full-viewport overlay — drawer covers the topbar to keep focus on
     the editing surface. Matches the Match drawer pattern. */
  inset: 0;
  background: var(--rd-color-scrim);
  z-index: 200;
  animation: _drawerFade_jfdxo_1 180ms ease-out;
}

._drawer_jfdxo_14 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100vw;
  z-index: 201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rd-color-panel);
  border-left: 2px solid var(--rd-color-accent-line);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  animation: _drawerSlide_jfdxo_1 220ms cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

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

@keyframes _drawerSlide_jfdxo_1 {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

._header_jfdxo_55 {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--rd-color-line);
}

._headerBar_jfdxo_63 {
  width: 3px;
  align-self: stretch;
  background: var(--rd-color-accent);
  border-radius: 0;
}

._headerText_jfdxo_70 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._eyebrow_jfdxo_78 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._title_jfdxo_85 {
  font-family: var(--rd-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--rd-color-text);
  margin: 0;
  /* Allow long display names to wrap rather than disappear under the
     drawer header — matches the design brief which asked for visible
     identity even on long names. */
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

._subtitle_jfdxo_100 {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
  margin-top: 2px;
}

._closeBtn_jfdxo_107 {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--rd-radius-md);
  transition:
    background var(--rd-motion-fast),
    color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
  flex-shrink: 0;
}

._closeBtn_jfdxo_107:hover {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border-color: var(--rd-color-accent-line);
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

/* Wraps the shared TabBar with drawer-padding + bottom hairline. */
._tabsWrapper_jfdxo_134 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rd-color-line);
  flex-shrink: 0;
}

/* ── Body ───────────────────────────────────────────────────────────────── */

._body_jfdxo_142 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

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

._sectionEyebrow_jfdxo_154 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

/* ── Form fields ────────────────────────────────────────────────────────── */

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

._formRow_jfdxo_169 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._label_jfdxo_175 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._input_jfdxo_183,
._textarea_jfdxo_184 {
  width: 100%;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 8px 10px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
  transition: border-color var(--rd-motion-fast);
}

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

._input_jfdxo_183:focus,
._textarea_jfdxo_184:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._teamSearchContainer_jfdxo_207 {
  position: relative;
}

._teamInputWrapper_jfdxo_211 {
  position: relative;
}

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

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

._suggestions_jfdxo_233 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-md);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

._suggestionItem_jfdxo_247 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
}

._suggestionItem_jfdxo_247:hover {
  background: var(--rd-color-panel-hi);
}

._suggestionMeta_jfdxo_266 {
  color: var(--rd-color-text-faint);
}

/* ── Aliases / Merge lists ──────────────────────────────────────────────── */

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

._aliasInputRow_jfdxo_272 ._input_jfdxo_183 {
  flex: 1;
}

._aliasList_jfdxo_281 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._aliasRow_jfdxo_290 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-size: var(--rd-type-body);
}

._aliasRemove_jfdxo_302 {
  background: none;
  border: none;
  color: var(--rd-color-text-faint);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}

._aliasRemove_jfdxo_302:hover {
  color: var(--rd-status-error-fg);
}

._emptyNote_jfdxo_316 {
  margin: 0;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

/* ── Faces tab: blur slider + thumb grid ─────────────────────────────────
   Below-threshold faces stay in the grid (per design) but render dimmed
   + greyscale with a "BLUR" corner badge. Keep the frame visible so the
   user can still scan past them at a glance. */
._facesToolbar_jfdxo_326 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--rd-color-border);
  margin-bottom: 12px;
}

._facesSliderLabel_jfdxo_335 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  white-space: nowrap;
}

._facesThreshold_jfdxo_344 {
  color: var(--rd-color-text);
}

._facesSlider_jfdxo_335 {
  flex: 1;
  accent-color: var(--rd-color-accent);
}

._facesCounts_jfdxo_353 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
  white-space: nowrap;
}

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

._faceCard_jfdxo_367 {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--rd-color-bg-elev1);
  border: 1px solid var(--rd-color-border);
  border-radius: 4px;
  overflow: hidden;
  transition: opacity 120ms ease, filter 120ms ease;
}

._faceCardDim_jfdxo_377 {
  opacity: 0.35;
  filter: grayscale(1) blur(0.5px);
}

._faceThumb_jfdxo_382 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._faceThumbPlaceholder_jfdxo_389 {
  width: 100%;
  height: 100%;
  background: var(--rd-color-bg-elev0);
}

._faceBlurBadge_jfdxo_395 {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 4px;
  font-family: var(--rd-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(255, 107, 107, 0.85); /* status-critical */
  border-radius: 2px;
  pointer-events: none;
}

._faceQuality_jfdxo_409 {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 1px 4px;
  font-size: 9px;
  color: var(--rd-color-text);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  pointer-events: none;
}

._helpText_jfdxo_421 {
  margin: 0;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

._footer_jfdxo_430 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--rd-color-line);
  background: var(--rd-color-panel);
  flex-shrink: 0;
}

._escHint_jfdxo_440 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._spacer_jfdxo_451 {
  flex: 1;
}
/* PersonList styles */

._container_cu8c4_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

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

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

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

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

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

._error_cu8c4_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_cu8c4_49 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_cu8c4_73 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_cu8c4_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_cu8c4_81:focus {
  outline: none;
  border-color: var(--accent);
}

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

._filterSelect_cu8c4_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_cu8c4_102:focus {
  outline: none;
  border-color: var(--accent);
}

._count_cu8c4_117 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_cu8c4_124 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_cu8c4_124 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_cu8c4_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_cu8c4_153 {
  cursor: pointer;
  user-select: none;
}

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

._sortIndicator_cu8c4_162 {
  opacity: 0.6;
}

._row_cu8c4_166 {
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition:
    background 0.1s,
    border-left-color 0.1s;
}

._row_cu8c4_166:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Multi-select state — checkbox-driven. */
._row_cu8c4_166._selected_cu8c4_179 {
  background: rgba(104, 255, 154, 0.04);
}

/* Active state — the row whose detail/drawer is currently open. Phos
   2px left-border + 4% phos bg per design spec. Set via the optional
   `activeId` prop on PersonList — when the Edit Person drawer ships
   it will hand the open person id back so this picks up automatically. */
._row_cu8c4_166._active_cu8c4_187 {
  border-left-color: var(--rd-color-accent);
  background: rgba(104, 255, 154, 0.04);
}

._row_cu8c4_166._active_cu8c4_187._selected_cu8c4_179 {
  background: rgba(104, 255, 154, 0.08);
}

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

._td_cu8c4_200 {
  padding: 12px 16px;
  color: var(--text);
}

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

._personName_cu8c4_212 {
  font-weight: 500;
}

._aliasBadge_cu8c4_216 {
  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_cu8c4_227 {
  color: var(--muted);
}

/* Avatar initials bubble — small phosphor-bordered chip in the
   leftmost data column. Source: design_handoff_tank/screens-rest.jsx
   § Screen07ManagePersons. */
._avatarBubble_cu8c4_234 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  font-family: var(--rd-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--rd-color-text-muted);
}

._facesCount_cu8c4_250 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rd-color-text);
}

/* Faces mini-bar — thin horizontal indicator next to the face count.
   Width is a normalized ratio against the page max so the user gets a
   visual sense of which persons dominate the face library at a glance.
   Source: design_handoff_tank/screens-rest.jsx § Screen07ManagePersons. */
._facesCell_cu8c4_260 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._facesBar_cu8c4_266 {
  width: 60px;
  height: 4px;
  background: var(--rd-color-panel-lo);
  border-radius: var(--rd-radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}

._facesBarFill_cu8c4_275 {
  height: 100%;
  background: var(--rd-color-accent);
  border-radius: inherit;
  transition: width var(--rd-motion-fast);
}

._lastSeen_cu8c4_282 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._roleBadge_cu8c4_290 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: capitalize;
}

._faceCount_cu8c4_299 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._noFaces_cu8c4_307 {
  color: var(--muted);
  background: rgba(255, 107, 107, 0.15);
}

._manyFaces_cu8c4_312 {
  color: var(--accent);
  background: rgba(102, 255, 183, 0.15);
}

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

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

/* Modal form */
._globalInfo_cu8c4_329 {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._globalLabel_cu8c4_338 {
  color: var(--muted);
  font-size: 13px;
}

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

._formGroup_cu8c4_349 {
  margin-bottom: 16px;
}

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

._label_cu8c4_359 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_cu8c4_367,
._select_cu8c4_179,
._textarea_cu8c4_369 {
  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_cu8c4_367:focus,
._select_cu8c4_179:focus,
._textarea_cu8c4_369:focus {
  outline: none;
  border-color: var(--accent);
}

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

._footerSpacer_cu8c4_391 {
  flex: 1;
}

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

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

._teamSearchInput_cu8c4_406 {
  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_cu8c4_406:focus {
  outline: none;
  border-color: var(--accent);
}

._clearTeamBtn_cu8c4_421 {
  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_cu8c4_421:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

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

._teamSuggestionsList_cu8c4_448 {
  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_cu8c4_463 {
  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_cu8c4_463:hover {
  background: rgba(102, 255, 183, 0.1);
}

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

._teamName_cu8c4_486 {
  flex: 1;
}

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

@media (max-width: 768px) {
  ._filters_cu8c4_73 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_cu8c4_81 {
    max-width: none;
  }

  ._count_cu8c4_117 {
    margin-left: 0;
  }

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

  ._tableWrapper_cu8c4_124 {
    overflow-x: auto;
  }

  ._table_cu8c4_124 {
    min-width: 700px;
  }

  ._headerActions_cu8c4_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 — Company hub v2.
   Source: design_handoff_tank manage-redesign-v2 brief. */

._container_8x9g9_4 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
  padding: var(--rd-space-4) var(--rd-space-5);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._loading_8x9g9_13 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rd-space-3);
  padding: var(--rd-space-9);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
}

/* ── Identity card ──────────────────────────────────────────────────────── */

._identityCard_8x9g9_27 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-left: 3px solid var(--rd-color-accent);
  border-radius: var(--rd-radius-lg);
}

._identityAvatar_8x9g9_38 {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-color-panel-hi);
  border: 1px solid var(--rd-color-line);
  border-radius: 50%;
  font-family: var(--rd-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--rd-color-text);
  flex-shrink: 0;
}

._identityText_8x9g9_55 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._identityEyebrow_8x9g9_62 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._identityName_8x9g9_69 {
  font-family: var(--rd-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--rd-color-text);
}

._identityMeta_8x9g9_78 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
}

/* ── Group sections ─────────────────────────────────────────────────────── */

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

._groupHeader_8x9g9_92 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._groupGrid_8x9g9_99 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rd-space-3);
}

/* ── Section card ───────────────────────────────────────────────────────── */

._card_8x9g9_107 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  /* The global `button` rule in styles.css sets `height: 32px` to give
     all unstyled buttons the redesign-pill treatment. SectionCard is a
     `<button>` rendered as a card surface, so it must opt out of that
     fixed height — otherwise head + preview content overflow visually. */
  height: auto;
  width: 100%;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
  transition:
    background-color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
}

._card_8x9g9_107:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-accent-line);
}

._cardHead_8x9g9_135 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._cardAvatar_8x9g9_141 {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-color-text);
  flex-shrink: 0;
}

._cardHeadText_8x9g9_157 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._cardTitle_8x9g9_165 {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h3);
  font-weight: 600;
  color: var(--rd-color-text);
}

._cardDesc_8x9g9_172 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-muted);
}

._cardCount_8x9g9_178 {
  font-family: var(--rd-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-accent);
}

/* ── Preview list ───────────────────────────────────────────────────────── */

._cardPreview_8x9g9_188 {
  border-top: 1px solid var(--rd-color-line);
  padding-top: 10px;
}

._previewList_8x9g9_193 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._previewItem_8x9g9_202 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._previewDot_8x9g9_210 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rd-color-text-faint);
  flex-shrink: 0;
}

._dot-done_8x9g9_218 {
  background: var(--rd-color-accent);
}

._dot-pending_8x9g9_222 {
  background: var(--rd-color-text-faint);
}

._dot-error_8x9g9_226 {
  background: var(--rd-status-error-fg, #ff6b6b);
}

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

._previewMeta_8x9g9_237 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.2px;
  color: var(--rd-color-text-faint);
}

._previewEmpty_8x9g9_243 {
  margin: 0;
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}
/* UserList styles */

._container_udvpk_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

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

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

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

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

._error_udvpk_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_udvpk_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_udvpk_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_udvpk_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_udvpk_76:focus {
  outline: none;
  border-color: var(--accent);
}

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

._filterSelect_udvpk_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_udvpk_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_udvpk_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_udvpk_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_udvpk_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_udvpk_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_udvpk_148 {
  cursor: pointer;
  user-select: none;
}

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

._sortIndicator_udvpk_157 {
  opacity: 0.6;
}

._row_udvpk_161 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_udvpk_161:hover {
  background: rgba(255, 255, 255, 0.02);
}

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

._td_udvpk_174 {
  padding: 12px 16px;
  color: var(--text);
}

._userName_udvpk_179 {
  font-weight: 500;
}

._userEmail_udvpk_183 {
  color: var(--muted);
}

._roleBadge_udvpk_187 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._statusBadge_udvpk_195 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
}

._statusBadge_udvpk_195._active_udvpk_202 {
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
}

._statusBadge_udvpk_195._pending_udvpk_207 {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

._statusBadge_udvpk_195._inactive_udvpk_212 {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger, #ff6b6b);
}

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

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

/* Modal styles */
._inviteDescription_udvpk_229 {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

._userInfo_udvpk_236 {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

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

._formGroup_udvpk_248 {
  margin-bottom: 16px;
}

._formError_udvpk_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_udvpk_262 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_udvpk_270,
._select_udvpk_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_udvpk_270:focus,
._select_udvpk_271:focus {
  outline: none;
  border-color: var(--accent);
}

._checkboxLabel_udvpk_287 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

._checkbox_udvpk_287 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

._hint_udvpk_302 {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0 24px;
}

@media (max-width: 768px) {
  ._filters_udvpk_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_udvpk_76 {
    max-width: none;
  }

  ._count_udvpk_112 {
    margin-left: 0;
  }

  ._tableWrapper_udvpk_119 {
    overflow-x: auto;
  }

  ._table_udvpk_119 {
    min-width: 600px;
  }
}

._footerSpacer_udvpk_331 {
  flex: 1;
}
/* FtpTargetList styles */

._container_1arq1_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

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

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

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

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

._error_1arq1_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_1arq1_44 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* Filters */
._filters_1arq1_68 {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._searchInput_1arq1_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_1arq1_76:focus {
  outline: none;
  border-color: var(--accent);
}

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

._filterSelect_1arq1_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_1arq1_97:focus {
  outline: none;
  border-color: var(--accent);
}

._count_1arq1_112 {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

/* Table */
._tableWrapper_1arq1_119 {
  flex: 1;
  overflow: auto;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._table_1arq1_119 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._th_1arq1_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_1arq1_148 {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

._row_1arq1_148:hover {
  background: rgba(255, 255, 255, 0.02);
}

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

._td_1arq1_161 {
  padding: 12px 16px;
  color: var(--text);
}

._targetName_1arq1_166 {
  font-weight: 500;
}

._sftpBadge_1arq1_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_1arq1_181,
._path_1arq1_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_1arq1_191 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

._statusBadge_1arq1_199 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
}

._statusBadge_1arq1_199._active_1arq1_206 {
  background: rgba(102, 255, 183, 0.15);
  color: var(--accent);
}

._statusBadge_1arq1_199._inactive_1arq1_211 {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger, #ff6b6b);
}

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

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

/* Modal styles */
._formGroup_1arq1_228 {
  margin-bottom: 16px;
}

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

._label_1arq1_238 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

._input_1arq1_246,
._select_1arq1_247,
._textarea_1arq1_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_1arq1_246:focus,
._select_1arq1_247:focus,
._textarea_1arq1_248:focus {
  outline: none;
  border-color: var(--accent);
}

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

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

._passwordField_1arq1_270 ._input_1arq1_246 {
  flex: 1;
}

._togglePassword_1arq1_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_1arq1_279:hover {
  color: var(--text);
}

/* Assignment options */
._assignmentOptions_1arq1_295 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._assignmentOption_1arq1_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_1arq1_295:hover {
  background: rgba(0, 0, 0, 0.3);
}

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

._radio_1arq1_322 {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}

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

._assignmentDesc_1arq1_336 {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Test section */
._testSection_1arq1_344 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 16px;
}

._testResult_1arq1_354 {
  font-size: 13px;
}

._testResult_1arq1_354._success_1arq1_358 {
  color: var(--accent);
}

._testResult_1arq1_354._error_1arq1_44 {
  color: var(--danger, #ff6b6b);
}

._checkboxLabel_1arq1_366 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

._checkbox_1arq1_366 {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

@media (max-width: 768px) {
  ._filters_1arq1_68 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchInput_1arq1_76 {
    max-width: none;
  }

  ._count_1arq1_112 {
    margin-left: 0;
  }

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

  ._tableWrapper_1arq1_119 {
    overflow-x: auto;
  }

  ._table_1arq1_119 {
    min-width: 700px;
  }
}

/* Drawer footer spacer — pushes Save to the right edge. */
._footerSpacer_1arq1_409 {
  flex: 1;
}
/* 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 — Tank Redesign chrome.
   Source: design_handoff_tank/README.md § "08 — Manage / Company /
   Caption builder" (the 3-pane: variable library / template builder /
   live preview). The structural rewrite to the 3-pane grid is a
   deferred follow-up; this pass aligns chrome to redesign tokens. */

._container_oujtn_7 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._header_oujtn_15 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rd-color-line);
}

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

._title_oujtn_30 {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h1);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-text);
  margin: 0;
}

._subtitle_oujtn_39 {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text-muted);
  margin: 0;
}

._badge_oujtn_46 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  margin-top: 6px;
}

._badgeGlobal_oujtn_59 {
  background: var(--rd-status-exported-bg);
  color: var(--rd-status-exported-fg);
  border: 1px solid var(--rd-status-exported-line);
}

._badgeCompany_oujtn_65 {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border: 1px solid var(--rd-color-accent-line);
}

/* Loading / Error / Success */
._loading_oujtn_72 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--muted);
}

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

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

._errorBanner_oujtn_93 {
  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_oujtn_93 button {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

._successBanner_oujtn_116 {
  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_oujtn_127 {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._section_oujtn_127 {
  padding: 20px;
  background: var(--card-bg, rgba(19, 30, 35, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
}

._sectionTitle_oujtn_142 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

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

/* Category card */
._categoryCard_oujtn_158 {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

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

._categoryHeader_oujtn_170 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  user-select: none;
}

._categoryDragHandle_oujtn_180 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
}

._categoryDragHandle_oujtn_180:active {
  cursor: grabbing;
}

._categoryLabelInput_oujtn_196 {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

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

._categoryLabelInput_oujtn_196:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.2);
}

._categoryToggle_oujtn_217 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

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

._categoryDelete_oujtn_232 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
}

._categoryDelete_oujtn_232:hover {
  color: var(--danger, #ff6b6b);
}

._categoryBody_oujtn_245 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Action row */
._actionRow_oujtn_253 {
  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_oujtn_263 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: grab;
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

._actionDragHandle_oujtn_263:active {
  cursor: grabbing;
}

._actionInput_oujtn_279 {
  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_oujtn_279:focus {
  outline: none;
  border-color: var(--accent);
}

._actionLabelInput_oujtn_293 {
  width: 120px;
  flex-shrink: 0;
}

._actionTemplateInput_oujtn_299 {
  flex: 1;
  min-width: 140px;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
}

._actionCheckbox_oujtn_306 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

._actionCheckbox_oujtn_306 input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

._actionDelete_oujtn_322 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

._actionDelete_oujtn_322:hover {
  color: var(--danger, #ff6b6b);
}

._addButton_oujtn_336 {
  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_oujtn_336:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

._connectorRow_oujtn_354:last-of-type {
  border-bottom: none;
}

._connectorLabel_oujtn_366 {
  font-size: 12px;
  color: var(--text);
  min-width: 120px;
  flex-shrink: 0;
}

._connectorDelete_oujtn_373 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

._connectorDelete_oujtn_373:hover {
  color: var(--danger, #ff6b6b);
}

/* Grammar rule row */
._grammarRow_oujtn_388 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._grammarRow_oujtn_388:last-of-type {
  margin-bottom: 0;
}

._grammarPatternInput_oujtn_399 {
  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_oujtn_399:focus {
  outline: none;
  border-color: var(--accent);
}

._grammarMessageInput_oujtn_416 {
  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_oujtn_416:focus {
  outline: none;
  border-color: var(--accent);
}

._grammarDelete_oujtn_431 {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  flex-shrink: 0;
}

._grammarDelete_oujtn_431:hover {
  color: var(--danger, #ff6b6b);
}

/* Hint text */
._hint_oujtn_446 {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0 0;
}

/* Override select for connector overrides */
._overrideSelect_oujtn_453 {
  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_oujtn_453:focus {
  outline: none;
  border-color: var(--accent);
}

/* Dragging state */
._dragging_oujtn_469 {
  opacity: 0.5;
}

._dragOverlay_oujtn_473 {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Footer */
._footer_oujtn_478 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

._footerRight_oujtn_488 {
  display: flex;
  gap: 12px;
}

/* Keywords tag input within action rows */
._actionKeywords_oujtn_494 {
  flex: 1;
  min-width: 100px;
}

@media (max-width: 768px) {
  ._actionRow_oujtn_253 {
    flex-wrap: wrap;
  }

  ._actionLabelInput_oujtn_293,
  ._actionTemplateInput_oujtn_299 {
    width: 100%;
    flex: none;
  }

  ._grammarRow_oujtn_388 {
    flex-wrap: wrap;
  }

  ._grammarPatternInput_oujtn_399 {
    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;
  }
}
/* CaptionProfilesEditor — Tank Redesign Caption Builder.
   Source: design_handoff_tank/screens-rest.jsx § Screen08CaptionBuilder.
   3-pane: Variables (320) · Templates (flex) · Preview (320). */

._editor_16ftd_5 {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: var(--rd-space-5);
  padding: var(--rd-space-5) var(--rd-space-6) var(--rd-space-7);
  height: calc(100vh - var(--rd-chrome-topbar) - 49px - 2 * var(--rd-space-5));
  min-height: 600px;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
  box-sizing: border-box;
}

._loading_16ftd_17 {
  padding: var(--rd-space-7);
  text-align: center;
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-faint);
}

._paneEyebrow_16ftd_24 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._placeholder_16ftd_32 {
  color: var(--rd-color-text-faint);
}

/* ---- Left pane: variables ---- */
._varPane_16ftd_37 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  min-height: 0;
}

._varFilter_16ftd_44 {
  width: 100%;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 8px 10px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  transition: border-color var(--rd-motion-fast);
  box-sizing: border-box;
}

._varFilter_16ftd_44:focus {
  outline: none;
  border-color: var(--rd-color-line-focus);
}

._varList_16ftd_62 {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  padding-right: 4px;
}

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

._varGroupName_16ftd_77 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

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

._varChipBtn_16ftd_91 {
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--rd-font-mono);
  font-size: 10.5px;
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border: 1px solid var(--rd-color-accent-line);
  cursor: pointer;
  transition: filter var(--rd-motion-fast), background-color var(--rd-motion-fast);
}

._varChipBtn_16ftd_91:hover {
  filter: brightness(1.1);
}

._varChipBtn_16ftd_91:active {
  background: var(--rd-color-accent);
  color: #04140a;
}

/* ---- Center pane: template canvas ---- */
._templatePane_16ftd_113 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  min-height: 0;
}

._templateHeader_16ftd_120 {
  display: flex;
  align-items: center;
  gap: var(--rd-space-3);
}

._profileEyebrow_16ftd_126 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text);
}

._headerSep_16ftd_134 {
  color: var(--rd-color-text-faint);
}

._profileMeta_16ftd_138 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._headerSpacer_16ftd_146 {
  flex: 1;
}

._btn_16ftd_150 {
  height: 28px;
  padding: 0 var(--rd-space-4);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  border: 1px solid var(--rd-color-line);
  background: transparent;
  color: var(--rd-color-text);
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

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

._btnPrimary_16ftd_171 {
  background: var(--rd-color-accent);
  color: #04140a;
  border-color: var(--rd-color-accent);
}

._btnPrimary_16ftd_171:hover:not(:disabled) {
  filter: brightness(1.1);
}

._errorBanner_16ftd_181 {
  padding: 8px 12px;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.4);
  border-radius: var(--rd-radius-md);
  color: #ff5a5a;
  font-size: var(--rd-type-body-dense);
}

._templateBody_16ftd_190 {
  flex: 1;
  padding: var(--rd-space-5);
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
  overflow-y: auto;
  min-height: 0;
}

._templateField_16ftd_203 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._fieldLabel_16ftd_209 {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

/* The shell stacks an absolutely-positioned highlight overlay
   underneath a transparent <input>/<textarea> so caret + selection
   still work but variables render with the phosphor chip styling. */
._fieldShell_16ftd_220 {
  position: relative;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--rd-color-text);
  transition: border-color var(--rd-motion-fast);
  overflow: hidden;
}

/* contentEditable field — chips are real inline-block elements with
   contenteditable=false, so the caret can't drift relative to them.
   No transparent overlay layer needed; the editable div renders the
   final styled output directly. */
._fieldInput_16ftd_237 {
  padding: 10px;
  font: inherit;
  line-height: inherit;
  color: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  width: 100%;
  min-height: 36px;
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--rd-color-text);
}

._fieldInput_16ftd_237::selection {
  background: rgba(104, 255, 154, 0.25);
  color: var(--rd-color-text);
}

/* Show the placeholder when the editable div has no content. The
   `:empty` selector covers the just-cleared state; the `[data-empty]`
   variant covers fields that contain only an empty <br>. */
._fieldInput_16ftd_237:empty::before {
  content: attr(data-placeholder);
  color: var(--rd-color-text-faint);
  pointer-events: none;
}

._fieldInputMulti_16ftd_267 {
  min-height: 80px;
}

._fieldFocusRing_16ftd_271 {
  position: absolute;
  inset: -1px;
  border-radius: var(--rd-radius-md);
  border: 1px solid var(--rd-color-accent);
  pointer-events: none;
}

/* Variable chip — real inline-block element inside the contentEditable
   div, with `contenteditable=false` so the caret skips over it
   atomically. No more transparent overlay drift: the chip *is* what's
   rendered, and the caret hops directly between chips and text nodes. */
._varChip_16ftd_85 {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 3px;
  color: var(--rd-color-accent);
  background: var(--rd-color-accent-bg);
  border: 1px solid var(--rd-color-accent-line);
  user-select: none;
  cursor: default;
  vertical-align: baseline;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
}

/* ---- Right pane: live preview ---- */
._previewPane_16ftd_300 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  min-height: 0;
}

._previewBox_16ftd_307 {
  flex: 1;
  padding: 14px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  font-family: var(--rd-font-mono);
  font-size: 11px;
  color: var(--rd-color-text);
  line-height: 1.6;
  overflow-y: auto;
  min-height: 0;
}

._previewLine_16ftd_321 {
  margin-bottom: 8px;
}

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

._previewKey_16ftd_329 {
  color: var(--rd-color-text-subtle);
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

._previewValue_16ftd_337 {
  color: var(--rd-color-text);
  word-break: break-word;
}

/* Responsive — collapse to single column under ~960px. */
@media (max-width: 960px) {
  ._editor_16ftd_5 {
    grid-template-columns: 1fr;
    height: auto;
  }
}
/* Manage page layout — Tank Redesign port (PR 4).
   Source pattern: ~/Downloads/tank-redesign/screens-rest.jsx § ManageShell. */

._page_rx00p_4 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  overflow: hidden;
}

._content_rx00p_14 {
  flex: 1;
  overflow: auto;
  padding: var(--rd-space-6);
}

._accessDenied_rx00p_20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--rd-color-text-muted);
  gap: var(--rd-space-2);
}

._accessDenied_rx00p_20 h2 {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h2);
  font-weight: 600;
  color: var(--rd-color-text);
  margin: 0;
}

._accessDenied_rx00p_20 p {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  ._content_rx00p_14 {
    padding: var(--rd-space-4);
  }
}
/* EditorThroughputTab — Tank Redesign Statistics surface.
   Source: design_handoff_tank/README.md § Statistics. */

._tab_e6713_4 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-7);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
  padding-top: var(--rd-space-3);
}

/* ---- KPI row ---- */
._kpiRow_e6713_14 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--rd-space-4);
}

@media (max-width: 1280px) {
  ._kpiRow_e6713_14 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  ._kpiRow_e6713_14 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

._kpiTile_e6713_32 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-1);
  padding: var(--rd-space-5) var(--rd-space-5) var(--rd-space-4);
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  min-height: 96px;
}

._kpiLabel_e6713_43 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._kpiValue_e6713_51 {
  font-size: var(--rd-type-h1);
  font-weight: 600;
  line-height: 1.05;
  color: var(--rd-color-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

._kpiHint_e6713_60 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._kpiSubline_e6713_68 {
  display: flex;
  align-items: center;
  gap: var(--rd-space-2);
  min-height: 14px;
}

._kpiDelta_e6713_75 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  font-variant-numeric: tabular-nums;
}

._kpiDeltaPositive_e6713_82 { color: var(--rd-color-accent); }
._kpiDeltaNegative_e6713_83 { color: #ff5a5a; }

/* ---- Section chrome ---- */
._section_e6713_86 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-4);
  padding: var(--rd-space-5) var(--rd-space-6);
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

._sectionHeader_e6713_96 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-4);
}

._sectionTitle_e6713_103 {
  margin: 0;
  font-size: var(--rd-type-title);
  font-weight: 600;
  color: var(--rd-color-text);
  letter-spacing: -0.005em;
}

/* ---- Range selector ---- */
._rangeGroup_e6713_112 {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
}

._rangeBtn_e6713_121 {
  padding: 4px var(--rd-space-3);
  background: transparent;
  border: 0;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  cursor: pointer;
  transition: color var(--rd-motion-fast),
              background-color var(--rd-motion-fast);
}

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

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

/* ---- Sparkline ---- */
._sparklineWrap_e6713_142 {
  position: relative;
  width: 100%;
  height: 120px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

._sparklineWrap_e6713_142 svg {
  width: 100%;
  height: 100%;
}

._sparklineEmpty_e6713_160 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-faint);
}

/* ---- Status mix bar ---- */
._statusMixBar_e6713_172 {
  display: flex;
  width: 100%;
  height: 18px;
  border-radius: var(--rd-radius-pill);
  overflow: hidden;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
}

._statusSegment_e6713_182 {
  display: block;
  min-width: 2px;
  transition: filter var(--rd-motion-fast);
}

._statusSegment_e6713_182:hover { filter: brightness(1.15); }

._segment_pending_e6713_190   { background: var(--rd-status-pending-fg, var(--rd-color-text-subtle)); }
._segment_attention_e6713_191 { background: var(--rd-status-attention-fg, #ffb84d); }
._segment_error_e6713_192     { background: var(--rd-status-error-fg, #ff5a5a); }
._segment_done_e6713_193      { background: var(--rd-status-done-fg, var(--rd-color-accent)); }
._segment_exported_e6713_194  { background: var(--rd-status-exported-fg, #5ab9ff); }
._segment_skipped_e6713_195   { background: var(--rd-status-skipped-fg, var(--rd-color-text-faint)); }

._statusMixEmpty_e6713_197 {
  padding: var(--rd-space-4);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-faint);
}

/* ---- Status legend ---- */
._statusLegend_e6713_205 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--rd-space-3) var(--rd-space-5);
}

._legendItem_e6713_211 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rd-type-body-dense);
}

._legendSwatch_e6713_218 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

._legendLabel_e6713_226 { color: var(--rd-color-text-muted); }
._legendValue_e6713_227 {
  margin-left: auto;
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text);
  font-variant-numeric: tabular-nums;
}
._legendPct_e6713_233 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-faint);
  font-variant-numeric: tabular-nums;
  width: 36px;
  text-align: right;
}

/* ---- Leaderboard ---- */
._leaderboard_e6713_242 {
  width: 100%;
  border-collapse: collapse;
}

._leaderboard_e6713_242 th {
  text-align: left;
  padding: var(--rd-space-2) var(--rd-space-3);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  border-bottom: 1px solid var(--rd-color-line);
  font-weight: 500;
}

._leaderboard_e6713_242 td {
  padding: var(--rd-space-3) var(--rd-space-3);
  font-size: var(--rd-type-body);
  border-bottom: 1px solid var(--rd-color-line);
}

._leaderboard_e6713_242 tr:last-child td { border-bottom: 0; }

._leaderName_e6713_267 { color: var(--rd-color-text); }

._leaderNum_e6713_269 {
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-muted);
  font-variant-numeric: tabular-nums;
}

._leaderboardEmpty_e6713_275 {
  padding: var(--rd-space-5);
  text-align: center;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-faint);
}
/* PipelinePerformance — Statistics 10A redesign. */

._container_tsxhj_3 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._loading_tsxhj_11 {
  padding: var(--rd-space-8);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
}

._empty_tsxhj_18 {
  padding: var(--rd-space-8);
  color: var(--rd-color-text-muted);
}

._eyebrow_tsxhj_23,
._stripEyebrow_tsxhj_24 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

/* === Top row: strip + chart side-by-side === */

._topRow_tsxhj_34 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--rd-space-4);
  align-items: stretch;
}

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

._chartCol_tsxhj_47 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

._chartHead_tsxhj_57 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

._chartTotal_tsxhj_64 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text);
  cursor: help;
}

._chartTotalLabel_tsxhj_74 {
  color: var(--rd-color-text-faint);
  margin-right: 2px;
}

._chartTotalSep_tsxhj_79 {
  color: var(--rd-color-text-faint);
  margin: 0 6px;
}

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

/* === Bottom row: slow steps + service share === */

._bottomRow_tsxhj_92 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rd-space-4);
}

._slowStepsCard_tsxhj_98,
._shareCard_tsxhj_99 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

._cardHead_tsxhj_109 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

._cardHeadHint_tsxhj_116 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* === Slow steps table === */

._slowTable_tsxhj_126 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rd-type-body-dense);
}

._slowTable_tsxhj_126 th {
  text-align: left;
  padding: 8px 10px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  border-bottom: 1px solid var(--rd-color-line);
}

._slowTable_tsxhj_126 td {
  padding: 10px;
  border-bottom: 1px solid var(--rd-color-line);
  color: var(--rd-color-text);
}

._slowTable_tsxhj_126 tr:last-child td {
  border-bottom: none;
}

._slowRank_tsxhj_153 {
  width: 36px;
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-faint);
}

._slowName_tsxhj_159 {
  font-family: var(--rd-font-mono);
}

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

._slowAvg_tsxhj_167 {
  width: 80px;
  text-align: right;
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 179, 90, 1);
}

._slowTrend_tsxhj_175 {
  width: 80px;
}

._slowDelta_tsxhj_179 {
  width: 24px;
  text-align: center;
}

._upArrow_tsxhj_184 {
  color: rgba(255, 179, 90, 1); /* amber — step is regressing */
  font-family: var(--rd-font-mono);
}

._downArrow_tsxhj_189 {
  color: rgba(104, 255, 154, 1); /* phos — step is improving */
  font-family: var(--rd-font-mono);
}

._flatArrow_tsxhj_194 {
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
}

._slowEmpty_tsxhj_199 {
  padding: 24px;
  text-align: center;
  color: var(--rd-color-text-muted);
}

/* === Share card === */

._shareList_tsxhj_207 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._shareItem_tsxhj_216 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rd-type-body-dense);
}

._shareDot_tsxhj_223 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--rd-color-text-muted);
}

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

._shareSpacer_tsxhj_234 { flex: 1; }

._shareValue_tsxhj_236 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rd-color-text);
}

._sharePct_tsxhj_242 {
  width: 56px;
  text-align: right;
  font-family: var(--rd-font-mono);
  color: var(--rd-color-text-faint);
}

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

  ._bottomRow_tsxhj_92 {
    grid-template-columns: 1fr;
  }
}
/* PipelineTimelineV2 — Statistics 10B redesign. */

._container_1jibh_3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--rd-font-sans);
  color: var(--rd-color-text);
}

._loading_1jibh_11,
._errorShell_1jibh_12 {
  padding: var(--rd-space-8);
  color: var(--rd-color-text-muted);
}

/* === Photo header === */

._photoHeader_1jibh_19 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-left: 3px solid var(--rd-color-accent);
  border-radius: var(--rd-radius-lg);
}

._photoIdent_1jibh_30 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._photoFile_1jibh_37 {
  font-family: var(--rd-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._photoMeta_1jibh_47 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._photoArchivedBadge_1jibh_54 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  font-weight: 400;
}

._photoSpacer_1jibh_62 { flex: 1; }

._photoTotal_1jibh_64 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

._photoTotalEyebrow_1jibh_71 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._photoTotalValue_1jibh_78 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-color-accent);
}

/* === Two-pane body === */

._body_1jibh_88 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: start;
}

._left_1jibh_95 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
}

._leftEyebrow_1jibh_103,
._svcGroupName_1jibh_104,
._svcGroupDesc_1jibh_105,
._svcGroupTotal_1jibh_106,
._eventTs_1jibh_107,
._eventName_1jibh_108,
._eventDur_1jibh_109,
._svcDesc_1jibh_110,
._svcStat_1jibh_111,
._svcRank_1jibh_112 {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
}

._leftEyebrow_1jibh_103 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._svcRow_1jibh_124 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  width: 100%;
  height: auto;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--rd-motion-fast), border-color var(--rd-motion-fast);
}

._svcRow_1jibh_124:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-line-strong);
}

._svcRow_1jibh_124._svcActive_1jibh_144 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

._svcHead_1jibh_149 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._svcRank_1jibh_112 {
  font-size: var(--rd-type-eyebrow);
  color: var(--rd-color-text-faint);
}

._svcName_1jibh_160 {
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
}

._svcActive_1jibh_144 ._svcName_1jibh_160 { color: var(--rd-color-accent); }

._svcSpacer_1jibh_169 { flex: 1; }

._svcDesc_1jibh_110 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._svcStats_1jibh_178 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

._svcStat_1jibh_111 {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--rd-color-text-muted);
}

._svcStatLabel_1jibh_193 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* === Right pane === */

._right_1jibh_202 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
}

._eventToolbar_1jibh_212 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-color-line);
}

._eventSearch_1jibh_220 {
  flex: 1;
  height: 30px;
  padding: 0 12px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
}

._eventSearch_1jibh_220::placeholder {
  color: var(--rd-color-text-faint);
}

._eventSearch_1jibh_220:focus {
  outline: none;
  border-color: var(--rd-color-accent-line);
}

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

._svcGroupHead_1jibh_247 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--rd-color-line);
  position: sticky;
  top: 0;
  background: var(--rd-color-panel);
  z-index: 1;
}

._svcGroupName_1jibh_104 {
  font-size: var(--rd-type-body-dense);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rd-color-text);
}

._svcGroupDesc_1jibh_105 {
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

._svcGroupTotal_1jibh_106 {
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

._eventList_1jibh_279 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._eventRow_1jibh_288 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
}

._eventTs_1jibh_107 {
  width: 100px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--rd-color-text-faint);
}

._eventName_1jibh_108 {
  width: 200px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--rd-color-text);
}

._eventBar_1jibh_310 {
  flex: 1;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

._eventDur_1jibh_109 {
  width: 70px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  color: var(--rd-color-text-muted);
}

._eventLogDot_1jibh_325 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rd-color-text-faint);
  flex-shrink: 0;
}

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

._eventEmpty_1jibh_339 {
  color: var(--rd-color-text-faint);
  font-size: 12px;
  padding: 6px 0;
}

/* === Empty state === */

._emptyShell_1jibh_347 {
  padding: 16px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._emptyEyebrow_1jibh_357 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._emptyList_1jibh_365 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._emptyRow_1jibh_374 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  width: 100%;
  height: auto;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  cursor: pointer;
  transition: background var(--rd-motion-fast), border-color var(--rd-motion-fast);
  text-align: left;
}

._emptyRow_1jibh_374:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-accent-line);
}

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

._emptySpacer_1jibh_399 { flex: 1; }

._emptyMessage_1jibh_401 {
  color: var(--rd-color-text-faint);
  font-size: 12px;
  padding: 10px 12px;
}

@media (max-width: 1100px) {
  ._body_1jibh_88 {
    grid-template-columns: 1fr;
  }
}
/* Me / Profile screen — Tank Redesign port (PR 3).
   No exact mockup section — uses the redesign's editorial-dark language
   (Eyebrow + Card sections, mono labels, phosphor accent). */

._screen_p0pnu_5 {
  min-height: 100%;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
}

._column_p0pnu_12 {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
}

._pageEyebrow_p0pnu_21 {
  margin-bottom: 4px;
}

._title_p0pnu_25 {
  margin: 0 0 8px 0;
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h1);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-text);
}

._section_p0pnu_34 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
}

._sectionEyebrow_p0pnu_40 {
  margin-bottom: 4px;
}

._fieldGrid_p0pnu_44 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--rd-space-4);
}

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

._fieldLabel_p0pnu_56 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._fieldValue_p0pnu_65 {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
  line-height: 1.45;
}

._fieldValueMono_p0pnu_72 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
  line-height: 1.45;
}

/* Role badge — small status-like pill in role-specific colors. */
._roleBadge_p0pnu_80 {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  font-weight: 500;
  line-height: 1.4;
}

._roleAdmin_p0pnu_91 {
  color: var(--rd-status-error-fg);
  background: var(--rd-status-error-bg);
  border: 1px solid var(--rd-status-error-line);
}

._roleEditor_p0pnu_97 {
  color: var(--rd-status-exported-fg);
  background: var(--rd-status-exported-bg);
  border: 1px solid var(--rd-status-exported-line);
}

._roleViewer_p0pnu_103 {
  color: var(--rd-color-text-muted);
  background: var(--rd-status-pending-bg);
  border: 1px solid var(--rd-status-pending-line);
}

._rolePhotographer_p0pnu_109 {
  color: var(--rd-status-done-fg);
  background: var(--rd-status-done-bg);
  border: 1px solid var(--rd-status-done-line);
}

/* Preferences */

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

._preference_p0pnu_117 + ._preference_p0pnu_117 {
  margin-top: var(--rd-space-4);
  padding-top: var(--rd-space-4);
  border-top: 1px solid var(--rd-color-line);
}

._preferenceLabel_p0pnu_129 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

/* Editor preferences + Notifications use a row layout so labels and
   controls align across long lists. Each row sits on a hairline. */
._prefList_p0pnu_140 {
  display: flex;
  flex-direction: column;
}

._prefRow_p0pnu_145 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-4);
  padding: var(--rd-space-3) 0;
  border-top: 1px solid var(--rd-color-line);
}

._prefRow_p0pnu_145:first-child {
  border-top: 0;
}

._prefRowLabel_p0pnu_158 {
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
}

._prefRowControl_p0pnu_163 {
  display: inline-flex;
}

._hint_p0pnu_167 {
  margin: 0;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  line-height: 1.5;
}

._checkboxRow_p0pnu_175 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--rd-type-body);
  color: var(--rd-color-text);
}

._checkbox_p0pnu_175 {
  width: 16px;
  height: 16px;
  accent-color: var(--rd-color-accent);
}

/* Segmented control */

._segmented_p0pnu_193 {
  display: inline-flex;
  gap: 0;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 2px;
}

._segment_p0pnu_193 {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

._segment_p0pnu_193:hover:not(._segmentActive_p0pnu_218) {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

._segmentActive_p0pnu_218 {
  background: var(--rd-color-accent-bg);
  color: var(--rd-color-accent);
  border: 1px solid var(--rd-color-accent-line);
}

/* Permissions */

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

._permission_p0pnu_231 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
}

._permissionGranted_p0pnu_249 {
  color: var(--rd-color-accent);
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

._permissionDenied_p0pnu_255 {
  color: var(--rd-color-text-faint);
  background: var(--rd-color-panel-lo);
  border-color: var(--rd-color-line);
}

._permissionIcon_p0pnu_261 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  font-weight: 700;
  line-height: 1;
}

._permissionName_p0pnu_268 {
  text-transform: capitalize;
  letter-spacing: 0.1px;
}

/* Cameras */

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

._cameraSerial_p0pnu_281 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  padding: 4px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text-muted);
}

/* Meta section — dashed border, no eyebrow */

._metaSection_p0pnu_293 {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
  padding: var(--rd-space-4);
  border: 1px dashed var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  background: transparent;
}

._serviceBadge_p0pnu_303 {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  font-weight: 500;
  color: var(--rd-color-warn);
  background: var(--rd-color-warn-bg);
  border: 1px solid var(--rd-color-warn-line);
}

._loading_p0pnu_315 {
  padding: 80px var(--rd-space-5);
  text-align: center;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
}

/* Sessions list (Tank Redesign) */
._sessionsList_p0pnu_324 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._sessionRow_p0pnu_333 {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
}

._sessionType_p0pnu_347 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-accent);
}

._sessionWhere_p0pnu_355 {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._sessionLast_p0pnu_364 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.1px;
  color: var(--rd-color-text-faint);
  white-space: nowrap;
}
/* Login screen — Tank Redesign port (PR 2).
   Source: ~/Downloads/tank-redesign/screens-base.jsx § Screen01Login. */

._screen_1w67z_4 {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--rd-color-bg);
  color: var(--rd-color-text);
  font-family: var(--rd-font-sans);
  overflow: hidden;
}

/* Soft phosphor vignette behind the centered card. */
._vignette_1w67z_15 {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(104, 255, 154, 0.10), transparent 55%);
  pointer-events: none;
}

/* Faint 64px grid overlay. */
._grid_1w67z_23 {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(var(--rd-color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rd-color-line) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Top header — wordmark left, version right. */
._header_1w67z_35 {
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  z-index: 1;
}

._headerLeft_1w67z_47,
._headerRight_1w67z_48 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._dot_1w67z_54 {
  color: var(--rd-color-text-faint);
}

._poweredBy_1w67z_58 {
  font-family: var(--rd-font-mono);
  font-size: 10px;
  color: var(--rd-color-text-subtle);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

._version_1w67z_66 {
  font-family: var(--rd-font-mono);
  font-size: 10px;
  color: var(--rd-color-text-faint);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

/* Centered card column. */
._column_1w67z_75 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 48px));
  animation: _fadeInUp_1w67z_1 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes _fadeInUp_1w67z_1 {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

._eyebrow_1w67z_89 {
  margin-bottom: 14px;
}

/* Terminal-style card body. */
._card_1w67z_94 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body);
}

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

._terminalLine_1w67z_99 + ._terminalLine_1w67z_99 {
  margin-top: 6px;
}

._terminalLineFirst_1w67z_107 {
  color: var(--rd-color-text-subtle);
}

._fields_1w67z_111 {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._label_1w67z_118 {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

._input_1w67z_127 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-color-text);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body);
  font-weight: 400;
  outline: none;
  transition: border-color var(--rd-motion-fast);
}

._input_1w67z_127::placeholder {
  color: var(--rd-color-text-faint);
}

._input_1w67z_127:focus {
  border-color: var(--rd-color-line-focus);
}

._spacer_1w67z_152 {
  height: 6px;
}

._submit_1w67z_156 {
  width: 100%;
  margin-top: 18px;
}

._hintRow_1w67z_161 {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  color: var(--rd-color-text-subtle);
}

._errorText_1w67z_172 {
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: var(--rd-radius-sm);
  background: var(--rd-color-warn-bg);
  border: 1px solid var(--rd-color-warn-line);
  color: var(--rd-color-warn);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body-dense);
  line-height: 1.45;
}

._tenantNote_1w67z_184 {
  margin-top: 14px;
  font-size: var(--rd-type-label);
  color: var(--rd-color-text-faint);
  text-align: center;
}

._tenantValue_1w67z_191 {
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
}

/* Loading dots after the "Connecting…" line. */
._loadingDots_1w67z_197 {
  display: inline-block;
  width: 16px;
}

._loadingDots_1w67z_197::after {
  content: "";
  animation: _dots_1w67z_1 1.4s steps(4, end) infinite;
}

@keyframes _dots_1w67z_1 {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

._terminalLineLoading_1w67z_215 {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-color-accent);
}
/* Tank Redesign typefaces — self-hosted from /fonts/.
   Source files: Google Fonts (Inter Tight v9, JetBrains Mono v24).
   Self-hosted to support offline / Capacitor / airgapped deployments. */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-tight-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-tight-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-tight-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-tight-700.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.ttf') format('truetype');
}
/**
 * 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);
}

/* ==========================================================================
   Tank Redesign tokens (2026-04-28 onwards)

   Mirrors `~/Downloads/tank-redesign/tokens.jsx`. Lives alongside the
   pre-redesign tokens above so screens can migrate one PR at a time.
   At M6 (final migration PR) the `--rd-` prefix is dropped and the
   pre-redesign tokens are deleted.

   Source of truth: `01_Projects/Tank Redesign/UX_UI_GUIDE.md` cross-walk.
   ========================================================================== */

:root {
  /* ---- Surfaces (per design_handoff_tank/README.md color table) ---- */
  --rd-color-bg:           #05080b;          /* TK.ink — page bg (per design tokens.jsx) */
  --rd-color-bg-raised:    #070b0e;          /* TK.inkRaised — top bar / left rail */
  --rd-color-panel:        #0a0f14;          /* TK.panel — card / sheet / drawer */
  --rd-color-panel-hi:     #111820;          /* TK.panelHi — hover / raised */
  --rd-color-panel-lo:     #080c10;          /* TK.panelLo — input field / sunk */
  --rd-color-line:         #1f242c;          /* TK.line — concrete hex (was rgba) */
  --rd-color-line-strong:  #2a3038;          /* slightly raised — borders that need to read */
  --rd-color-line-focus:   #2a4d36;          /* phosphor border / focus ring */
  --rd-color-scrim:        rgba(0, 0, 0, 0.55);

  /* ---- Text (cooler greys per new handoff) ---- */
  --rd-color-text:         #e6e8ea;          /* TK.text — primary */
  --rd-color-text-muted:   #a0a8b0;          /* TK.textMuted — secondary */
  --rd-color-text-subtle:  #646c75;          /* TK.textSubtle — labels / meta */
  --rd-color-text-faint:   #3a4049;          /* TK.textFaint — chrome */

  /* ---- Accents — phosphor (unchanged) ---- */
  --rd-color-accent:       #68ff9a;          /* TK.phos */
  --rd-color-accent-dim:   #3fb574;          /* TK.phosDim */
  --rd-color-accent-bg:    #0c1610;          /* concrete hex (was rgba) */
  --rd-color-accent-bg-hi: #16241c;          /* hover for soft buttons */
  --rd-color-accent-line:  #2a4d36;          /* concrete hex (was rgba) */

  /* ---- Accents — amber (warn / attention) ---- */
  --rd-color-warn:         #ffb84d;          /* status.attention base */
  --rd-color-warn-bg:      rgba(255, 184, 77, 0.10);
  --rd-color-warn-line:    rgba(255, 184, 77, 0.40);

  /* ---- Status palette — six states (NEW SEMANTICS per handoff) ---- */
  /* Each kind has fg / bg (soft, ~10% on dark surfaces) / line / bg-hi.
     bg-hi is used by compact StatusPill (overlay on photo cards) so the
     pill stays readable at small sizes; standard pills keep the softer bg. */

  /* pending = imported, not opened (slate) */
  --rd-status-pending-fg:    #646c75;
  --rd-status-pending-bg:    rgba(100, 108, 117, 0.10);
  --rd-status-pending-bg-hi: rgba(100, 108, 117, 0.22);
  --rd-status-pending-line:  rgba(100, 108, 117, 0.28);

  /* attention = needs editor (amber) — was phosphor */
  --rd-status-attention-fg:    #ffb84d;
  --rd-status-attention-bg:    rgba(255, 184, 77, 0.10);
  --rd-status-attention-bg-hi: rgba(255, 184, 77, 0.22);
  --rd-status-attention-line:  rgba(255, 184, 77, 0.34);

  /* error = upload/IPTC/FTP failed (red) */
  --rd-status-error-fg:    #ff5a5a;
  --rd-status-error-bg:    rgba(255, 90, 90, 0.10);
  --rd-status-error-bg-hi: rgba(255, 90, 90, 0.22);
  --rd-status-error-line:  rgba(255, 90, 90, 0.36);

  /* done = edited but not exported (phosphor) — was lavender. The goal state. */
  --rd-status-done-fg:    #68ff9a;
  --rd-status-done-bg:    rgba(104, 255, 154, 0.10);
  --rd-status-done-bg-hi: rgba(104, 255, 154, 0.22);
  --rd-status-done-line:  rgba(104, 255, 154, 0.34);

  /* exported = sent to FTP/wire (blue) — was teal */
  --rd-status-exported-fg:    #5ab9ff;
  --rd-status-exported-bg:    rgba(90, 185, 255, 0.10);
  --rd-status-exported-bg-hi: rgba(90, 185, 255, 0.22);
  --rd-status-exported-line:  rgba(90, 185, 255, 0.34);

  /* skipped = manually rejected (faint, same as text-faint) */
  --rd-status-skipped-fg:    #8a9298;
  --rd-status-skipped-bg:    rgba(58, 64, 73, 0.20);
  --rd-status-skipped-bg-hi: rgba(58, 64, 73, 0.40);
  --rd-status-skipped-line:  rgba(58, 64, 73, 0.50);

  /* tagging = pending photo with unlabeled faces (positive teal) — distinct
     from amber Attention so editors don't confuse "task to do" with "stuck". */
  --rd-status-tagging-fg:    #66d9e8;
  --rd-status-tagging-bg:    rgba(102, 217, 232, 0.10);
  --rd-status-tagging-bg-hi: rgba(102, 217, 232, 0.22);
  --rd-status-tagging-line:  rgba(102, 217, 232, 0.34);

  /* ---- Type system — Inter Tight + JetBrains Mono ---- */
  --rd-font-sans:    "Inter Tight", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --rd-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --rd-font-display: "Inter Tight", "SF Pro Display", system-ui, sans-serif;

  /* ---- Type scale (per new handoff README) ---- */
  --rd-type-eyebrow:    10px;   /* mono uppercase, ls 1.4 */
  --rd-type-label:      11px;   /* small label (legacy alias of body-micro) */
  --rd-type-body-micro: 11px;   /* meta */
  --rd-type-body-dense: 12px;   /* tables, side panels */
  --rd-type-body:       13px;   /* default */
  --rd-type-button:     13px;
  --rd-type-h3:         14px;   /* subsection */
  --rd-type-title:      18px;   /* section titles (Inter Tight 600 / 1.15) */
  --rd-type-h2:         18px;   /* legacy alias of title */
  --rd-type-num:        24px;   /* big stat number (was 28; Stat atom keeps 28 inline) */
  --rd-type-h1:         24px;   /* page titles (600 / 1.05) */
  --rd-type-h0:         32px;   /* landing only — Login (600 / 1) */

  /* Type tracking */
  --rd-track-tight:    0.04em;
  --rd-track-eyebrow:  1.4px;            /* TK.type.eyebrow.ls (raw px) */

  /* ---- Spacing scale — TK.space[0..9] (per user-locked decision) ---- */
  /* Same px values as the prototype's TK.space; previous --rd-space-N
     scale (0=0 / 1=4 / 2=8 / 3=12 / 4=16 / 5=20 / 6=24 / 7=32 / 8=40 / 9=48 / 10=64)
     is replaced. Existing consumers that referenced --rd-space-1 (was 4)
     still get 4 via the new --rd-space-0 alias below. Indices that
     shifted (3, 4, 5, 6, 7) keep equivalent px via the alias section. */
  --rd-space-0:  4px;
  --rd-space-1:  6px;
  --rd-space-2:  8px;
  --rd-space-3:  10px;
  --rd-space-4:  12px;
  --rd-space-5:  16px;
  --rd-space-6:  20px;
  --rd-space-7:  24px;
  --rd-space-8:  32px;
  --rd-space-9:  48px;

  /* ---- Spacing legacy aliases ---- */
  /* Existing consumers reference indices 1..7 with the old px values.
     The simplest non-breaking migration is to point the legacy names at
     the same px they used to mean, then incrementally rewrite consumers
     to the new TK indices. The legacy aliases below preserve the
     previous behavior so that styles that say `var(--rd-space-3)` keep
     painting at 12 px until they're touched. New code should use the
     plain --rd-space-N names which now match TK.space[0..9]. */
  --rd-legacy-space-0:  0;
  --rd-legacy-space-1:  4px;
  --rd-legacy-space-2:  8px;
  --rd-legacy-space-3:  12px;
  --rd-legacy-space-4:  16px;
  --rd-legacy-space-5:  20px;
  --rd-legacy-space-6:  24px;
  --rd-legacy-space-7:  32px;
  --rd-legacy-space-8:  40px;
  --rd-legacy-space-9:  48px;
  --rd-legacy-space-10: 64px;

  /* ---- Radius (per new handoff) ---- */
  --rd-radius-sm:   4px;
  --rd-radius-md:   6px;
  --rd-radius-lg:   10px;        /* was 8 */
  --rd-radius-xl:   14px;        /* was 12 */
  --rd-radius-pill: 999px;

  /* ---- Chrome metrics (per new handoff) ---- */
  --rd-chrome-rail:    56px;
  --rd-chrome-topbar:  49px;     /* was 48 */
  --rd-chrome-row:     28px;

  /* ---- Motion ---- */
  --rd-motion-fast:   80ms cubic-bezier(0.16, 1, 0.3, 1);
  --rd-motion-normal: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --rd-motion-slow:   200ms cubic-bezier(0.16, 1, 0.3, 1);
}


: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);
}

/* Default button + ghost button — Tank Redesign tokens.
   Visual matches the Btn atom in shared/components/redesign/Btn so legacy
   global `<button>` and `<button className="ghost">` callsites pick up
   the redesign treatment without per-callsite refactors. */

/* `:where()` keeps the selector at zero specificity so any class on
   the button — `.card`, `.kpiTile`, `.companyTile` etc. — wins the
   sizing battle without needing per-callsite `height: auto` overrides.
   The default 32px pill height still applies to plain `<button>` with
   no class. */

:where(button) {
  background: var(--rd-color-accent);
  border: 1px solid var(--rd-color-accent);
  color: #04140a;
  padding: 0 14px;
  height: 32px;
  border-radius: var(--rd-radius-md);
  cursor: pointer;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-button);
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              opacity var(--rd-motion-fast);
}

/* Companion zero-specificity rules so card-style buttons aren't tinted
   phos on hover. Plain `<button>` keeps the original behaviour. */

:where(button:hover:not(:disabled)) {
  background: rgba(104, 255, 154, 0.95);
}

:where(button:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

button.ghost {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text);
  box-shadow: none;
}

button.ghost:hover:not(:disabled) {
  background: var(--rd-color-panel-hi);
}

button.ghost.active {
  color: var(--rd-color-accent);
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

/* 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: 8px;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.filters-row {
  padding-top: 10px;
}

.filters-actions {
  padding-bottom: 10px;
}

.filter-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--rd-color-line, var(--border));
}

.filter-label {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint, var(--muted));
  margin-right: 2px;
}

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text-muted);
  border-radius: var(--rd-radius-pill);
  cursor: pointer;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

.chip:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

.chip.active {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

.chip.active:hover {
  background: var(--rd-color-accent-bg-hi);
  color: var(--rd-color-accent);
}

.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 {
  flex: 0 0 260px;
  width: 260px;
  min-width: 0;
  height: 30px;
  background: var(--rd-color-panel-lo, rgba(16, 31, 37, 0.6));
  border: 1px solid var(--rd-color-line, var(--border));
  border-radius: var(--rd-radius-md, 6px);
  color: var(--rd-color-text, var(--text));
  padding: 0 12px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
}

.search::placeholder {
  color: var(--rd-color-text-faint, var(--muted));
}

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

.filters-row .chip,
.filters-row .filter-label,
.filters-actions .push-right .chip {
  flex-shrink: 0;
}

.overview-banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  /* Align horizontal edges with the stat tile row above and the photo
     grid below — both use 60px padding inside `.overview-header` and
     the grid wrapper. */
  margin: 4px 60px 12px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
}

.overview-banner-eyebrow {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
}

.overview-banner-body {
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
}

.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: #68ff9a;
  box-shadow: 0 0 6px #68ff9aaa;
}

.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 cards — Tank Redesign port (PR 5).
   Mirrors `~/Downloads/tank-redesign/screens-base.jsx § Screen02Overview` Stat row.
   Flat panel surface, mono uppercase label (10px), 28px display value. */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--rd-space-2);
  margin-bottom: var(--rd-space-3);
}

.stat-card {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 10px 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 96px;
  font-family: var(--rd-font-sans);
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

.stat-card .label {
  color: var(--rd-color-text-subtle);
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}

.stat-card .value {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-num);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--rd-color-text);
  line-height: 1;
}

.stat-card .value.accent {
  color: var(--rd-color-accent);
}

/* Active filter — tinted panel + accent value. */

.stat-grid .stat-card.active {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

.stat-grid .stat-card.active .value {
  color: var(--rd-color-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(280px, 1fr));
  /* `max-content` so the row track respects each card's preferred
     (aspect-ratio'd) height. With `auto` the track collapses to the
     items' min-content, and aspect-ratio'd boxes have min-content
     height 0 per spec — leaving cards 40 px tall and clipping the
     190 px image inside via `overflow: hidden`. */
  grid-auto-rows: max-content;
  /* Horizontal padding matches `.overview-header` (60px) so the card
     edges align with the search bar + filter chips above. Tight gap
     keeps the tiles reading as a unified surface. */
  gap: 12px;
  overflow-y: auto;
  padding: 6px 60px 30px;
  flex: 1;
  min-height: 0;
  align-content: start;
}

/* Masonry — Pinterest-style flowing column layout. Photos keep
   natural aspect; cards stack tightly without the 3:2 fit-grid's
   wasted whitespace. Implemented as N flex columns so the container's
   `overflow-y: auto` (inherited from .thumb-grid) scrolls vertically
   instead of flowing into off-screen columns to the right. The cards
   are distributed shortest-column-first in JS — see Overview.jsx —
   which produces row-major flow (newest top-of-col-1, next top-of-
   col-2, …) matching the editor's L→R review pattern. Column count
   is derived from `window.innerWidth − rail − padding` so first paint
   sees the right value (no `clientWidth` race on cold mount). */

.thumb-grid--masonry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* Match fit grid: same gap, same padding so card edges align with
     the search bar and filter chips above. */
  gap: 12px;
  padding: 6px 60px 30px;
}

.thumb-grid--masonry .masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.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);
  }
}

/* PhotoCard — Tank Redesign port.
   Source: ~/Downloads/tank-redesign/screens-base.jsx § Screen02Overview grid.
   Flat panel + 3:2 thumbnail + StatusPill top-right + mono filename + meta. */

.thumb-card {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  font-family: var(--rd-font-sans);
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
  animation: fadeIn 180ms ease-out;
}

.thumb-card:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-line-strong);
}

.thumb-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--rd-color-bg);
  flex-shrink: 0;
}

.thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Masonry: parent reserves an aspect-ratio slot from photo.crop_info
   (or 3/2 fallback) via inline style on .thumb-media — see PhotoCard's
   `naturalAspectStyle`. Image fills the reserved slot so the rendered
   card height MATCHES what the masonry algorithm planned, regardless
   of when the image actually loads. Without this, the image's
   intrinsic height would override the parent and shift columns out of
   balance after each lazy load. */

.thumb-media--natural img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  opacity: 0;
  transition: opacity var(--rd-motion-fast);
  pointer-events: none;
}

.thumb-card:hover .thumb-actions {
  opacity: 1;
  pointer-events: auto;
}

.icon-btn {
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-accent-line);
  color: var(--rd-color-accent);
  width: 36px;
  height: 36px;
  border-radius: var(--rd-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--rd-motion-fast);
}

.icon-btn:hover {
  background: var(--rd-color-accent-bg);
}

.thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
}

.thumb-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.thumb-meta .name {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-label);
  font-weight: 500;
  color: var(--rd-color-text);
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subline {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-color-text-subtle);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-label);
  line-height: 1.3;
}

/* Status pill anchors top-right of the thumbnail. The status-pill atom
   (rendered by PhotoCard JSX) provides its own dot + label. */

.status-pill-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

/* Multi-select mode */

.thumb-card.multi-mode {
  cursor: pointer;
}

.thumb-card.multi-mode:hover {
  border-color: var(--rd-color-accent-line);
}

.thumb-card.selected {
  border-color: var(--rd-color-accent);
  box-shadow: 0 0 0 1px var(--rd-color-accent) inset;
}

.thumb-card.selected .thumb-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(104, 255, 154, 0.12);
  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 {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

.persons-line {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Legacy .status-pill removed — PhotoCard renders RedesignStatusPill via
   CSS modules (shared/components/redesign/StatusPill). */

/* Edit page frame — Tank Redesign Editor variant A.
   Single column (image canvas + accordion right pane in `.tagging-main`)
   stacked above EditFilmstrip at the bottom. Source:
   design_handoff_tank/tank-redesign/screens-editor.jsx § Screen04EditorA. */

.edit-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--rd-color-bg);
}

/* Legacy `.content` rule (line ~1172) applies a rounded panel chrome
   (border, radius, padding, translucent bg) globally. Override on the
   editor's `.content` so the canvas + right pane sit flush against the
   shell. Spec: screens-editor.jsx Screen04EditorA — full-bleed split. */

.edit-frame > .content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Legacy `.split` 2-col grid kept in case any non-Edit consumer
   still uses this class. The Edit page now uses `.edit-frame`. */

.split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--rd-space-3);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--rd-color-bg);
  padding: var(--rd-space-3);
}

.panel {
  position: relative;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: var(--rd-space-3);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--rd-font-sans);
}

.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;
}

/* Generic card surface — Tank Redesign tokens. Used widely across Edit
   page (.card.tag-photo, .card.tag-neighbors, .card.tag-assign). */

.card {
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: var(--rd-space-3);
  background: var(--rd-color-panel);
  margin-bottom: var(--rd-space-3);
  font-family: var(--rd-font-sans);
}

/* PhotoToolbar — Tank Redesign treatment.
   Source: ~/Downloads/tank-redesign/scaffold.jsx PageTitle pattern. */

.photo-toolbar {
  padding: 0;
  border-bottom: 1px solid var(--rd-color-line);
  margin-bottom: 0;
}

.photo-toolbar-eyebrow {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

.photo-toolbar-filename {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-body);
  font-weight: 500;
  color: var(--rd-color-text);
  letter-spacing: 0.4px;
}

.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;
}

/* Edit page image canvas — Tank Redesign port.
   Source: ~/Downloads/tank-redesign/screens-editor.jsx — dark inset stage
   with subtle 60px grid lines (mirrors the field-shoot Login pattern). */

.viz-block {
  margin: 0;
  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: 0;
  /* Hard 1px region dividers per the design mock — top under the
     toolbar, bottom above the filmstrip. The right pane provides the
     vertical edge, so we don't need a right border here. */
  border-top: 1px solid var(--rd-color-line);
  border-bottom: 1px solid var(--rd-color-line);
  border-left: 0;
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The photo wrapper carries a 12 px white border hugging the bitmap.
     We extend that white matte to the full canvas so any extra space
     around the photo (when canvas aspect ≠ photo aspect) reads as one
     continuous frame instead of [bg | matte | photo | matte | bg]. */
  background-color: #fff;
}

/* Wrapper sized to the photo's contain-fit dimensions plus the white
   frame ring, by JS in EditImageStage. Carries the 12 px border;
   absolute-positioned overlays (face boxes, viz, crop frame) anchor to
   the inner box thanks to box-sizing: border-box. */

.viz-frame .img-wrapper {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border: 12px solid #fff;
  border-radius: 0;
  min-height: 0;
  line-height: 0;
}

/* Hard-reset any rounded corner / outline / shadow that legacy global
   img rules or earlier round attempts might apply to the photo bitmap.
   The white frame must meet the photo at a 90° angle. */

.viz-frame .img-wrapper img,
.viz-frame .img-wrapper > div,
.viz-frame .img-wrapper > div > img {
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Fallback while imgBounds.nW/nH aren't known yet — wrapper fills the
   canvas so the photo loads cleanly without a leading white frame
   covering an empty area. */

.viz-frame .img-wrapper:not([style*="width"]) {
  width: 100%;
  height: 100%;
  border-color: transparent;
}

.viz-frame .img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No border on the <img> — face / crop overlays anchor to the
     wrapper and break when the img is sized to its natural aspect.
     The design's region dividers live on `.viz-frame` and surrounding
     chrome instead. */
}

/* 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 #68ff9a;
  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: #68ff9a;
  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);
}

/* Remove bad match source button - orange style */

.face-btn.face-remove-source {
  border-color: rgba(255, 165, 0, 0.6);
  color: #ffa500;
  font-size: 9px;
  font-weight: bold;
}

.face-btn.face-remove-source:hover {
  border-color: #ffa500;
  background: rgba(255, 165, 0, 0.15);
}

/* Player name label — phosphor pill anchored above the face box. */

.face-name-label {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rd-color-accent);
  color: #04140a;
  border-radius: var(--rd-radius-pill);
  padding: 3px 10px;
  font-family: var(--rd-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 12px rgba(104, 255, 154, 0.35);
  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 #68ff9a;
  color: #68ff9a;
  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 — Edit page main editing area.
   Tank Redesign: image canvas (left) + mode panels (right ~30%) + facebar
   (bottom, full width). Source: screens-editor.jsx 2-pane layout. */

.tagging-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 1fr auto;
  gap: 0;
  height: 100%;
  min-height: 0;
  font-family: var(--rd-font-sans);
}

/* 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,
.card.tag-photo,
.tag-neighbors,
.card.tag-neighbors,
.tag-assign,
.card.tag-assign {
  /* The legacy `.card` rule (border + radius + padding + bg + margin-bottom)
     fights the redesign editor surfaces. Strip it on every region so the
     toolbar / viz-frame / right pane / facebar sit flush. !important to
     outrank the ancestor `.card` rule's specificity-tied cascade. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Right pane chrome — flat inkRaised column with a 1 px left line.
   Spec: screens-editor.jsx Screen04EditorA right pane (lines 220–224). */

.tag-neighbors {
  background: var(--rd-color-bg-raised) !important;
  border-left: 1px solid var(--rd-color-line) !important;
}

.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%;
  /* min-height:0 lets the flex column shrink below content size so
     overflow-y kicks in instead of the children pushing the panel
     past the grid cell. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Right pane scrolls when the active accordion section is taller
     than the viewport (e.g. Develop with Light + Presence + Color +
     COLOR · Temp / Tint visible at once). Was overflow:hidden which
     clipped without a scrollbar. */
  overflow-y: auto;
  transition: opacity 150ms ease;
}

.tag-neighbors.collapsed {
  display: none;
}

/* Sidebar tab bar (Develop | IPTC) */

/* Edit page sidebar tabs — Tank Redesign chrome (PR 9.0).
   Mode picker visual: ghost tabs with bottom border on the active tab,
   mirroring ManageNav and the redesign's editor mode selector. */

.sidebar-tabs {
  display: flex;
  gap: 0;
  background: transparent;
  padding: 0;
  border-bottom: 1px solid var(--rd-color-line);
  margin-bottom: var(--rd-space-3);
  flex-shrink: 0;
}

.sidebar-tab {
  flex: 1;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--rd-color-text-muted);
  cursor: pointer;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  transition: color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

.sidebar-tab:hover {
  color: var(--rd-color-text);
}

.sidebar-tab.active {
  background: transparent;
  color: var(--rd-color-accent);
  border-bottom-color: var(--rd-color-accent);
}

.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;
}

/* Face stub grid — Tank Redesign tokens.
   Pattern: filmstrip cards under the face assignment bar. */

.assign-stub {
  padding: var(--rd-space-2) var(--rd-space-3);
  border-top: 1px solid var(--rd-color-line);
}

.stub-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;
}

.stub-face {
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  padding: 10px 8px;
  background: var(--rd-color-panel-lo);
  min-width: 90px;
  max-width: 110px;
  min-height: 90px;
  display: grid;
  place-items: center;
  font-family: var(--rd-font-sans);
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
}

.stub-face:hover {
  background: var(--rd-color-panel-hi);
  border-color: var(--rd-color-line-strong);
}

.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;
}

/* Edit page layout — Tank Redesign chrome (PR 9.0).
   ~70% image canvas left, ~30% mode panels right per redesign mockup. */

.viz-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: var(--rd-space-3);
  height: 100%;
  min-height: 0;
}

.stage-wrap {
  display: flex;
  justify-content: center;
}

.stage-frame {
  position: relative;
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-3);
}

@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 */

/* Statistics page chrome — Tank Redesign tokens.
   Source: design_handoff_tank/README.md § Statistics. The deeper KPI row
   + sparkline + status mix bar + leaderboard restructure is a deferred
   follow-up; this pass just aligns the page header. */

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--rd-space-7);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rd-color-line);
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
  font-family: var(--rd-font-sans);
}

.stats-header h1 {
  margin: 0;
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-h1);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-color-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-header h1.matrix-title {
  /* phosphor glow disabled in the redesign; the title is just text now */
  text-shadow: none;
}

.title-icon {
  color: var(--rd-color-accent);
  font-size: 18px;
}

/* Tabs */

.stats-tabs {
  display: flex;
  gap: 8px;
}

.stats-tab {
  background: transparent;
  border: 1px solid var(--rd-color-line-strong);
  color: var(--rd-color-text-muted);
  padding: 0 14px;
  height: 28px;
  border-radius: var(--rd-radius-md);
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  font-weight: 500;
  letter-spacing: 0.1px;
}

.stats-tab:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

.stats-tab.active {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
  color: var(--rd-color-accent);
}

.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;
  }
}

/* Statistics summary cards — Tank Redesign KPI tiles.
   Source: design_handoff_tank/README.md § Statistics. Flat panel surface,
   mono uppercase label, big display number, optional delta line. */

.summary-card {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 16px 18px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
  font-family: var(--rd-font-sans);
}

.summary-card:hover {
  background: var(--rd-color-panel-hi);
}

.summary-card .card-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}

.matrix-summary .summary-card .card-bg {
  opacity: 1;
}

/* Per-variant background gradients removed in the redesign — all KPI
   tiles now share the flat `var(--rd-color-panel)` surface to keep a
   uniform look across Manage and Statistics. The `.card-bg` element
   stays in the markup for animation hooks but no-ops visually. */

.summary-icon {
  font-size: 20px;
  margin-bottom: 8px;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

/* All summary-card icons use the muted text color so the cards read as
   a uniform KPI strip — phos accent reserved for the value. Removes
   the rainbow per-variant colouring that didn't match the rest of the
   redesign. */

.summary-card .summary-icon {
  color: var(--rd-color-text-muted);
}

.summary-value {
  font-size: var(--rd-type-h1);
  font-weight: 600;
  font-family: var(--rd-font-display);
  letter-spacing: -0.3px;
  position: relative;
  z-index: 1;
  line-height: 1;
  color: var(--rd-color-text);
}

/* Value color: text for neutral counts, accent for performance/rate
   metrics, status colors only when the count carries operational
   meaning (attention = warn, done = done-fg). */

.summary-card.total .summary-value,
.summary-card.processing .summary-value {
  color: var(--rd-color-text);
}

.summary-card.done .summary-value { color: var(--rd-status-done-fg); }

.summary-card.attention .summary-value { color: var(--rd-color-warn); }

.summary-card.rate .summary-value,
.summary-card.pipeline-time .summary-value {
  color: var(--rd-color-accent);
}

.matrix-summary .summary-card .summary-value {
  /* glow effect disabled in the redesign */
  text-shadow: none;
}

.summary-label {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  color: var(--rd-color-text-faint);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: var(--rd-track-eyebrow);
  position: relative;
  z-index: 1;
}

/* Stats Content */

.stats-content {
  position: relative;
  z-index: 1;
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

/* Stats section — flat redesign panel. The previous rgba bg + blur +
   phos glow read as "dashboardy" against the rest of the redesign. */

.stats-section {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.matrix-content .stats-section { box-shadow: none; }

.section-header {
  margin-bottom: 16px;
}

.section-header h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-family: var(--rd-font-display);
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--rd-color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-icon {
  color: var(--rd-color-accent);
  font-family: var(--rd-font-mono);
  font-size: 14px;
}

.stats-hint {
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-sans);
  font-size: 12px;
  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;
}

/* Statistics — Unified Stat Cards. Tank Redesign port (PR 6).
   Pattern: ~/Downloads/tank-redesign/screens-rest.jsx § Screen10Stats Kpi row.
   Flat panel + mono uppercase label + display number. No hover lift. */

.stat-cards-grid {
  display: flex;
  gap: var(--rd-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--rd-space-6);
}

.stat-cards-grid .stat-card {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 14px 16px;
  text-align: left;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--rd-font-sans);
}

.stat-cards-grid .stat-card:hover {
  background: var(--rd-color-panel-hi);
}

.stat-cards-grid .stat-card.clickable {
  cursor: pointer;
}

.stat-cards-grid .stat-card.highlight,
.stat-cards-grid .stat-card.active {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

.stat-cards-grid .stat-card .stat-icon {
  width: 22px;
  height: 22px;
  color: var(--stat-color, var(--rd-color-accent));
}

.stat-cards-grid .stat-card .stat-icon.pulse {
  animation: statIconPulse 1.5s ease-in-out infinite;
}

@keyframes statIconPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.stat-cards-grid .stat-card .stat-value {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-num);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--stat-color, var(--rd-color-text));
  display: block;
  line-height: 1;
}

.stat-cards-grid .stat-card .stat-label {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-subtle);
  line-height: 1;
}

/* Stat card color variants */

.stat-cards-grid .stat-card.total { --stat-color: var(--accent); }

.stat-cards-grid .stat-card.done { --stat-color: #68ff9a; }

.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 — flat redesign panel. Phos accent only when expanded
   so the user can see which card is selected without the previous
   per-service rainbow border. */

.service-card {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition:
    background-color var(--rd-motion-fast),
    border-color var(--rd-motion-fast);
  position: relative;
  overflow: hidden;
  font-family: var(--rd-font-sans);
}

.service-card:hover {
  border-color: var(--rd-color-line-strong);
  background: var(--rd-color-panel-hi);
}

.service-card.expanded {
  grid-column: span 2;
  border-color: var(--rd-color-accent-line);
  background: var(--rd-color-accent-bg);
}

@media (max-width: 768px) {
  .service-card.expanded {
    grid-column: span 1;
  }
}

/* Legacy class hooks kept as no-ops — old code paths set them on a
   subset of cards. Redesign: no glow, no per-card shadow. */

.service-card.matrix-card { box-shadow: none; }

.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-family: var(--rd-font-sans);
  font-weight: 600;
  color: var(--rd-color-text);
  font-size: 14px;
  letter-spacing: -0.1px;
}

.service-desc {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  margin-top: 2px;
}

.service-stats {
  text-align: right;
}

/* Time display — uniform phos accent across all services. The
   per-service color is now used only for the slim left indicator
   bar so the row still scans by service at a glance. */

.service-time {
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  color: var(--rd-color-accent) !important;
}

.service-expand {
  color: var(--rd-color-text-faint);
  font-family: var(--rd-font-mono);
  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 — flat redesign panel, no glow / gradient / blur. */

.pipeline-flow {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 20px;
}

.pipeline-flow h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--rd-color-text);
  font-family: var(--rd-font-display);
  font-weight: 600;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-icon {
  color: var(--rd-color-accent);
  font-size: 16px;
  font-family: var(--rd-font-mono);
}

.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: var(--rd-color-line);
  box-shadow: none;
}

.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: 36px;
  border-radius: var(--rd-radius-md);
  overflow: hidden;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
}

.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 text reads against the desaturated service tints — no
   shadow needed in the redesign. */

.segment-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 22, 28, 0.85);
  font-family: var(--rd-font-sans);
  letter-spacing: 0.1px;
  white-space: nowrap;
  text-transform: uppercase;
}

.segment-pct {
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 22, 28, 0.9);
  font-family: var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
}

/* 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: #68ff9a; 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: #68ff9a;
  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 tab cards. Tank Redesign port (PR 7).
   Pattern: `screens-rest.jsx § Screen09Training` queue/stat tiles. Flat panel,
   per-state border + tinted bg from existing semantics, mono uppercase label. */

.training-card {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 14px 16px;
  text-align: left;
  min-width: 120px;
  flex: 1;
  font-family: var(--rd-font-sans);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.training-card.total {
  background: var(--rd-status-exported-bg);
  border-color: var(--rd-status-exported-line);
}

.training-card.pending {
  background: var(--rd-color-warn-bg);
  border-color: var(--rd-color-warn-line);
}

.training-card.processing {
  background: var(--rd-status-done-bg);
  border-color: var(--rd-status-done-line);
}

.training-card.ready {
  background: var(--rd-status-exported-bg);
  border-color: var(--rd-status-exported-line);
}

.training-card.done {
  background: var(--rd-color-accent-bg);
  border-color: var(--rd-color-accent-line);
}

.training-card.error {
  background: var(--rd-status-error-bg);
  border-color: var(--rd-status-error-line);
}

.training-card-value {
  font-family: var(--rd-font-display);
  font-size: var(--rd-type-num);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--rd-color-text);
  line-height: 1;
}

.training-card.total .training-card-value     { color: var(--rd-status-exported-fg); }

.training-card.pending .training-card-value   { color: var(--rd-color-warn); }

.training-card.processing .training-card-value{ color: var(--rd-status-done-fg); }

.training-card.ready .training-card-value     { color: var(--rd-status-exported-fg); }

.training-card.done .training-card-value      { color: var(--rd-color-accent); }

.training-card.error .training-card-value     { color: var(--rd-status-error-fg); }

.training-card-label {
  font-family: var(--rd-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--rd-color-text-subtle);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}

.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. Tank Redesign port (PR 9.0).
   ============================================================================= */

.sidebar-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--rd-color-line);
  margin-bottom: var(--rd-space-2);
}

.sidebar-tab {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--rd-color-text-muted);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--rd-motion-fast),
              border-color var(--rd-motion-fast);
  position: relative;
}

.sidebar-tab:hover {
  background: transparent;
  color: var(--rd-color-text);
}

.sidebar-tab.active {
  background: transparent;
  border-bottom-color: var(--rd-color-accent);
  color: var(--rd-color-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 — Tank Redesign tokens. */

.develop-panel {
  padding: var(--rd-space-3) 0;
  font-family: var(--rd-font-sans);
}

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

.develop-title {
  font-family: var(--rd-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-color-text);
  letter-spacing: -0.1px;
}

.develop-actions {
  display: flex;
  gap: 6px;
}

.develop-actions button {
  padding: 0 8px;
  height: 26px;
  font-size: var(--rd-type-body-dense);
}

.develop-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-4);
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-2);
}

.slider-group-title {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  color: var(--rd-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--rd-track-eyebrow);
  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-value-clickable {
  cursor: text;
  border-radius: 3px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background-color 0.15s;
}

.slider-value-clickable:hover {
  background-color: var(--surface-2, rgba(255, 255, 255, 0.08));
  color: var(--text, #e0e0e0);
}

.slider-value-input {
  font-size: 0.75rem;
  font-family: "IBM Plex Mono", monospace;
  width: 52px;
  text-align: right;
  background: var(--surface-2, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--accent, #4a9eff);
  border-radius: 3px;
  color: var(--text, #e0e0e0);
  padding: 1px 4px;
  outline: none;
}

.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 — redesign panel surface. Sits inside `.overview-header`
   which already provides the 60px horizontal gutter. */

.time-filter-v2 {
  background: var(--rd-color-panel);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-lg);
  padding: 12px 14px 10px;
  margin: 4px 0 12px;
  position: relative;
  font-family: var(--rd-font-sans);
}

/* Header row above the sparkline — eyebrow + clear button */

.tf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tf-header-eyebrow {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

.tf-clear {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--rd-color-text-subtle);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
}

.tf-clear:hover {
  color: var(--rd-color-text);
}

/* Sparkline container */

.tf-spark {
  position: relative;
  width: 100%;
  user-select: none;
}

/* Canvas wrapper holds the SVG + the HTML dots overlay so absolute
   positioning is anchored to the chart, not the whole TimeFilter panel
   (axis + hint live below the canvas). */

.tf-spark-canvas {
  position: relative;
  width: 100%;
  height: 80px;
}

.tf-spark-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  overflow: visible;
}

.tf-spark-baseline {
  stroke: var(--rd-color-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tf-spark-area {
  pointer-events: none;
}

.tf-spark-line {
  stroke: var(--rd-color-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* When a brush range is active, dim the line outside the region. */

.tf-spark-line--dim {
  stroke: rgba(104, 255, 154, 0.35);
}

/* HTML-overlay dots so they stay perfect circles regardless of the
   sparkline SVG's preserveAspectRatio="none" stretch. */

.tf-spark-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tf-spark-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--rd-color-accent);
  border: 0;
  padding: 0;
  cursor: ew-resize;
  pointer-events: auto;
  transition: width var(--rd-motion-fast),
              height var(--rd-motion-fast),
              margin var(--rd-motion-fast),
              box-shadow var(--rd-motion-fast),
              background var(--rd-motion-fast);
}

.tf-spark-dot:focus-visible {
  outline: 1px solid var(--rd-color-accent);
  outline-offset: 2px;
}

.tf-spark-dot--dim {
  background: rgba(104, 255, 154, 0.4);
}

.tf-spark-dot--active {
  background: var(--rd-color-accent);
}

.tf-spark-dot--hover {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: var(--rd-color-accent);
  box-shadow: 0 0 8px rgba(104, 255, 154, 0.8);
}

/* Active brush region */

.tf-spark-region {
  fill: rgba(104, 255, 154, 0.10);
  cursor: grab;
}

.tf-spark-region:active {
  cursor: grabbing;
}

.tf-spark-region-edge {
  stroke: var(--rd-color-accent-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.tf-spark-handle {
  stroke: var(--rd-color-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.tf-spark-handle-hit {
  fill: transparent;
  cursor: ew-resize;
}

/* Hover marker line */

.tf-spark-hover {
  stroke: var(--rd-color-text-faint);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Tooltip — sits above the line at the hovered x */

.tf-spark-tooltip {
  position: absolute;
  bottom: calc(100% + 22px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line-strong);
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rd-color-text-muted);
  white-space: nowrap;
  pointer-events: none;
}

.tf-spark-tooltip-count {
  color: var(--rd-color-accent);
}

/* Axis labels under the sparkline */

.tf-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
}

/* Hint text shown when no range is active */

.tf-spark-hint {
  margin-top: 6px;
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-color-text-faint);
  text-align: center;
}

/* No-timestamp indicator (rendered below the sparkline) */

.no-time-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-font-sans);
  font-size: var(--rd-type-body-dense);
  color: var(--rd-color-text-muted);
  padding: 8px 12px;
  background: var(--rd-color-panel-lo);
  border: 1px solid var(--rd-color-line);
  border-radius: var(--rd-radius-md);
  margin-top: 10px;
  width: 100%;
  text-align: left;
}

.no-time-icon {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-type-eyebrow);
  letter-spacing: 0.4px;
  color: var(--rd-color-text-subtle);
}

.no-time-indicator.clickable {
  cursor: pointer;
  transition: background-color var(--rd-motion-fast),
              border-color var(--rd-motion-fast),
              color var(--rd-motion-fast);
}

.no-time-indicator.clickable:hover {
  background: var(--rd-color-panel-hi);
  color: var(--rd-color-text);
}

.no-time-indicator.clickable.selected {
  background: var(--rd-status-attention-bg-hi);
  border-color: var(--rd-status-attention-line);
  color: var(--rd-status-attention-fg);
}

/* ============================================
   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;
  }
}