/*
 * ConnectedCargo — main stylesheet.
 * All rules scoped under #cc-app so the plugin can coexist with Divi / theme
 * styles without bleed. Mirrors ConnectedFleet's #cf-app convention.
 *
 * Sprint 1 / Card 1 — foundation (box-sizing + font reset)
 * Sprint 1 / Card 3 — Control Tower layout (header, KPIs, grid, map, ticker,
 *                     exception panel, footer note)
 */

/* ─── 1. Foundation ─────────────────────────────────────────────────────── */

#cc-app,
#cc-app * {
  box-sizing: border-box;
}

#cc-app {
  --cc-bg:        #f6f8fc;
  --cc-surface:   #ffffff;
  --cc-surface-2: #fbfcff;
  --cc-surface-3: #f1f5f9;
  --cc-text:      #0b1220;
  --cc-text-2:    #475569;
  --cc-muted:     #4b5563;
  --cc-line:      rgba(2, 6, 23, 0.10);
  --cc-line-2:    rgba(2, 6, 23, 0.06);
  --cc-accent:    #2563eb;
  --cc-brand:     #0ea5e9;     /* cargo / air = lighter blue than fleet's indigo */
  --cc-good:      #16a34a;
  --cc-warn:      #d97706;
  --cc-bad:       #dc2626;
  --cc-header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --cc-shadow-1:  0 1px 3px rgba(15,23,42,0.05);
  --cc-shadow-2:  0 4px 12px rgba(15,23,42,0.08);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-text);
  background: var(--cc-bg);
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 240ms ease, color 240ms ease;
}

/* ─── v0.9.48 — Dark theme overrides ──────────────────────────────────
   Applied when #cc-app has data-cc-theme="dark". Only surface tokens
   are overridden — content colors (good/warn/bad/accent) keep their
   semantics across themes. */
/* BASEMAP CSS theming without a credentialed tile source: when /map/tiles/status shows the keyless-OSM
   fallback (one raster for both themes), JS stamps cc-tiles-css-theme (window.__ccSyncTileTheme) and the
   BASEMAP PANE ONLY is treated — markers, overlays and popups live in other Leaflet panes and keep their
   true colors. Light = muted grey (the CARTO-positron look the map always had); dark = inverted. A real
   light/dark upstream pair (CC_TILE_UPSTREAM_LIGHT/_DARK) reports distinct and both rules step aside. */
#cc-app.cc-tiles-css-theme:not([data-cc-theme="dark"]) .leaflet-tile-pane {
  filter: grayscale(0.85) saturate(0.55) brightness(1.03) contrast(0.97);
}
#cc-app.cc-tiles-css-theme[data-cc-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.91) contrast(0.88) saturate(0.7);
}
#cc-app[data-cc-theme="dark"] {
  --cc-bg:        #0b1220;
  --cc-surface:   #131c2e;
  --cc-surface-2: #1a2336;
  --cc-surface-3: #243049;
  --cc-text:      #f1f5f9;
  --cc-text-2:    #cbd5e1;
  --cc-muted:     #94a3b8;
  --cc-line:      rgba(255,255,255,0.10);
  --cc-line-2:    rgba(255,255,255,0.06);
  --cc-header-bg: linear-gradient(135deg, #060b18 0%, #0b1220 100%);
  --cc-shadow-1:  0 1px 3px rgba(0,0,0,0.40);
  --cc-shadow-2:  0 4px 12px rgba(0,0,0,0.55);
}
#cc-app[data-cc-theme="dark"] .cc-shell-topbar {
  background: #0b1220;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#cc-app[data-cc-theme="dark"] .cc-shell-pane-host {
  background: var(--cc-bg);
  color: var(--cc-text);
}
#cc-app[data-cc-theme="dark"] .cc-shell-stub {
  background: var(--cc-surface);
  color: var(--cc-text);
  border-color: var(--cc-line);
}
#cc-app[data-cc-theme="dark"] .cc-shell-stub-title { color: var(--cc-text); }
#cc-app[data-cc-theme="dark"] .cc-shell-stub-msg   { color: var(--cc-muted); }

/* v0.9.48.1 — Global Sim Config button in topbar */
#cc-app .cc-shell-cfg-btn {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.40);
  color: #38bdf8;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 160ms ease;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
#cc-app .cc-shell-cfg-btn:hover {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

/* v0.9.48.2 — Cockpit-header "Configure pool" button (so users on the
   cockpit don't have to look up to the topbar) */
#cc-app[data-view="uld-ops"] .cc-uld-header-cfg {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #f1f5f9;
  font-size: 11.5px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 160ms ease;
  font-family: inherit;
  white-space: nowrap;
}
#cc-app[data-view="uld-ops"] .cc-uld-header-cfg:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}

/* Theme toggle button in topbar */
#cc-app .cc-shell-theme-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #cbd5e1;
  font-size: 14px;
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 160ms ease;
  font-family: inherit;
}
#cc-app .cc-shell-theme-toggle:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ─── 2. Header strip ──────────────────────────────────────────────────── */

#cc-app .cc-header {
  background: var(--cc-header-bg);
  color: #f1f5f9;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

#cc-app .cc-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#cc-app .cc-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cc-brand), #06b6d4);
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

#cc-app .cc-header-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

#cc-app .cc-header-tagline {
  font-size: 11.5px;
  color: rgba(241, 245, 249, 0.7);
  margin-top: 2px;
  line-height: 1.3;
}

#cc-app .cc-header-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#cc-app .cc-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.10);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#cc-app .cc-pill-live {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.5);
  color: #bbf7d0;
}
#cc-app .cc-pill-live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 6px;
  vertical-align: middle;
  animation: cc-pulse 1.4s ease-in-out infinite;
}

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

/* ─── 3. KPI strip ─────────────────────────────────────────────────────── */

#cc-app .cc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px 18px;
  background: var(--cc-bg);
  border-bottom: 1px solid var(--cc-line-2);
}

#cc-app .cc-kpi {
  background: var(--cc-surface);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--cc-line-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#cc-app .cc-kpi-label {
  font-size: 10.5px;
  color: var(--cc-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
}

#cc-app .cc-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--cc-text);
  line-height: 1.2;
}

#cc-app .cc-kpi-value.cc-kpi-good { color: var(--cc-good); }
#cc-app .cc-kpi-value.cc-kpi-warn { color: var(--cc-warn); }
#cc-app .cc-kpi-value.cc-kpi-bad  { color: var(--cc-bad); }

#cc-app .cc-kpi-sub {
  font-size: 11px;
  color: var(--cc-muted);
  line-height: 1.3;
}

/* ─── 4. Main grid (map + side panels) ─────────────────────────────────── */

/* v0.9.32 — TIPPR-style widget dashboard
   12-column grid, 90px row units, gap 12px. Widgets are positioned via
   inline grid-column / grid-row styles (read from default DOM attrs or
   from saved layout in localStorage). */
#cc-app .cc-dash-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px;
  background: linear-gradient(180deg, #f8fafc, #fff);
  border-bottom: 1px solid #e2e8f0;
}
/* v0.9.56 — Preset bundle picker + applied-preset pill */
#cc-app .cc-dash-preset-pill {
  margin-left: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 3px 10px;
  background: #e0f2fe; color: #0c4a6e;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
#cc-app[data-cc-theme="dark"] .cc-dash-preset-pill {
  background: rgba(14,165,233,0.15); color: #7dd3fc;
}
/* v1.0.f.2 — transient dashboard action toast (save / restore layout) */
.cc-dash-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  z-index: 100000; max-width: 90vw;
  background: #0f172a; color: #f1f5f9;
  font-size: 12.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.35);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.cc-dash-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
#cc-app .cc-dash-preset-picker {
  position: relative;
  display: inline-block;
}
#cc-app .cc-dash-preset-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15,23,42,0.20);
  z-index: 9700;
  padding: 6px;
}
#cc-app[data-cc-theme="dark"] .cc-dash-preset-menu {
  background: #131c2e; border-color: rgba(255,255,255,0.10);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
#cc-app .cc-dash-preset-menu-section {
  margin-bottom: 4px;
}
#cc-app .cc-dash-preset-menu-section-label {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: #94a3b8;
  padding: 6px 10px 4px;
}
#cc-app .cc-dash-preset-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  color: var(--cc-text);
  font-family: inherit;
}
#cc-app .cc-dash-preset-item:hover {
  background: var(--cc-surface-3);
}
#cc-app .cc-dash-preset-item-icon { font-size: 18px; flex-shrink: 0; }
#cc-app .cc-dash-preset-item-body { flex: 1; min-width: 0; }
#cc-app .cc-dash-preset-item-label {
  font-size: 12.5px; font-weight: 700;
  color: var(--cc-text);
}
#cc-app .cc-dash-preset-item-desc {
  font-size: 11px;
  color: var(--cc-muted);
  margin-top: 2px; line-height: 1.4;
}
#cc-app .cc-dash-preset-item-count {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  background: var(--cc-surface-3);
  color: var(--cc-muted);
  padding: 2px 6px; border-radius: 3px;
  align-self: center;
  white-space: nowrap;
}

/* v0.9.56 — Role + level badges on widget catalog tiles */
#cc-app .cc-dash-catalog-tile-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
#cc-app .cc-dash-catalog-tile-role,
#cc-app .cc-dash-catalog-tile-level {
  font-size: 9px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app .cc-dash-catalog-tile-role-gha       { background: #dcfce7; color: #166534; }
#cc-app .cc-dash-catalog-tile-role-airline   { background: #e0f2fe; color: #0c4a6e; }
#cc-app .cc-dash-catalog-tile-role-transport { background: #fef3c7; color: #92400e; }
#cc-app .cc-dash-catalog-tile-level {
  background: #f1f5f9; color: #475569;
}

#cc-app .cc-dash-mode-pill {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(15,23,42,0.06); color: #475569;
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-dash-mode-pill {
  background: rgba(14,165,233,0.15); color: #0369a1;
}
#cc-app .cc-dash-toolbar-actions { display: flex; gap: 8px; }
#cc-app .cc-dash-btn {
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 700;
  border-radius: 6px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#cc-app .cc-dash-btn-secondary {
  background: transparent; color: #64748b; border: 1px solid #cbd5e1;
}
#cc-app .cc-dash-btn-secondary:hover { background: #f1f5f9; color: #0f172a; }
#cc-app .cc-dash-btn-primary {
  background: #0f172a; color: #fff; border: 1px solid #0f172a;
}
#cc-app .cc-dash-btn-primary:hover { background: #1e293b; }
#cc-app[data-cc-dashboard-mode="edit"] .cc-dash-btn-primary {
  background: #0ea5e9; border-color: #0ea5e9;
}

/* The grid — 12 cols × 90px rows */
#cc-app .cc-dash {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 90px;
  gap: 12px;
  padding: 14px 18px 18px;
  align-items: stretch;
}

/* Each widget is positioned via inline style (set by JS).
   Default placement comes from data-cc-widget-default-* attrs on init. */
#cc-app .cc-widget {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  min-height: 0;
  overflow: hidden;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
#cc-app .cc-widget:hover {
  box-shadow: 0 4px 12px rgba(15,23,42,0.07);
}

/* Widget header: drag handle in edit mode */
#cc-app .cc-widget-header {
  flex: 0 0 auto;
  user-select: none;
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget-header {
  cursor: move;
  background: linear-gradient(180deg, rgba(14,165,233,0.08), transparent);
}

/* Widget body: flex-grow + scrollable */
#cc-app .cc-widget > .cc-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
#cc-app .cc-widget > .cc-card-body-flush {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;        /* map needs no scroll */
  padding: 0;
}
#cc-app .cc-card-map .cc-card-body-flush {
  height: auto;
  min-height: 0;
}
#cc-app .cc-card-map #cc-map {
  width: 100%; height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
/* v1.0.h.7 — Contain every widget map in its own stacking context (z-index:0)
   so Leaflet's internal panes (z-index 200–700) can NEVER paint over the
   widget's header / border / delete-resize chrome. Keep the header + chrome
   explicitly above the map. This is what made the "frame disappear" after
   panning/exiting edit mode. */
#cc-app .cc-widget .leaflet-container { z-index: 0; }
#cc-app .cc-widget > .cc-widget-header,
#cc-app .cc-widget > .cc-card-header { position: relative; z-index: 3; background: #fff; }
#cc-app[data-cc-theme="dark"] .cc-widget > .cc-widget-header,
#cc-app[data-cc-theme="dark"] .cc-widget > .cc-card-header { background: #0f172a; }

/* Resize handle (bottom-right corner) */
#cc-app .cc-widget-resize {
  position: absolute;
  bottom: 0; right: 0;
  width: 22px; height: 22px;
  display: none;
  align-items: flex-end; justify-content: flex-end;
  padding: 2px 4px;
  color: #94a3b8;
  font-size: 12px; line-height: 1;
  cursor: nwse-resize;
  user-select: none;
  z-index: 5;
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget-resize { display: flex; }
#cc-app .cc-widget-resize:hover { color: #0ea5e9; }

/* Delete (×) button — top-right corner, visible only in edit mode */
#cc-app .cc-widget-delete {
  position: absolute;
  top: 6px; right: 8px;
  width: 22px; height: 22px;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(220,38,38,0.10); color: #b91c1c;
  border: 1px solid rgba(220,38,38,0.30); border-radius: 4px;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  z-index: 6;
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget-delete { display: flex; }
#cc-app .cc-widget-delete:hover { background: rgba(220,38,38,0.18); }

/* Visual feedback in edit mode */
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget {
  border-color: rgba(14,165,233,0.30);
  box-shadow: 0 0 0 1px rgba(14,165,233,0.10), 0 1px 2px rgba(15,23,42,0.04);
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget.is-dragging {
  z-index: 100;
  cursor: grabbing !important;
  opacity: 0.95;
  box-shadow: 0 10px 30px rgba(14,165,233,0.35);
  border-color: #0ea5e9;
  transition: none !important;     /* widget follows cursor instantly */
}
/* v0.9.35 — "+ Add widget" button only shows in edit mode */
#cc-app .cc-dash-btn-edit-only { display: none; }
#cc-app[data-cc-dashboard-mode="edit"] .cc-dash-btn-edit-only { display: inline-block; }

/* v1.0.h.6 — Map widgets:
   · EDIT mode → the Leaflet map is inert so the corner resize works and the
     map never steals the pointer; drag the card by its HEADER bar (cursor:move
     on the header, set above), resize from the corner, delete with ×.
   · VIEW mode → the map is fully interactive (pan + the on-map +/- zoom).
   Resize/delete chrome always sits above the map. */
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget .leaflet-container { pointer-events: none !important; }
#cc-app .cc-widget-resize,
#cc-app .cc-widget-delete { z-index: 1200; }

/* v0.9.35 — Widget catalog modal */
#cc-app .cc-dash-catalog-scrim {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.40);
  /* v1.0.h.2 — above the map's layer-toggle dropdown (.cc-trigger-menu, 9800) */
  z-index: 9990;
  animation: cc-dash-catalog-scrim-in 180ms ease-out;
}
#cc-app .cc-dash-catalog-scrim[hidden] { display: none; }
@keyframes cc-dash-catalog-scrim-in { 0% { opacity: 0 } 100% { opacity: 1 } }
#cc-app .cc-dash-catalog {
  position: fixed;
  top: 50%; left: 50%;
  width: min(680px, 92vw);
  max-height: 80vh;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.30);
  z-index: 9991;
  display: flex; flex-direction: column;
  animation: cc-dash-catalog-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
#cc-app .cc-dash-catalog[hidden] { display: none; }
@keyframes cc-dash-catalog-in {
  0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}
#cc-app .cc-dash-catalog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 14px 14px 0 0;
}
#cc-app .cc-dash-catalog-title {
  margin: 0;
  font-size: 15px; font-weight: 800; color: #0f172a;
}
#cc-app .cc-dash-catalog-close {
  background: transparent; border: none;
  font-size: 20px; color: #64748b; cursor: pointer;
  padding: 2px 8px;
}
#cc-app .cc-dash-catalog-close:hover { color: #0f172a; }
/* v2.36.0 — catalog widget filter (text + domain chips) */
#cc-app .cc-dash-catalog-filter { padding: 10px 18px; border-bottom: 1px solid var(--cc-line); background: var(--cc-surface); display: flex; flex-direction: column; gap: 8px; }
#cc-app .cc-dash-catalog-search { width: 100%; box-sizing: border-box; padding: 7px 11px; border: 1px solid var(--cc-line); border-radius: 10px; font-size: 13px; background: var(--cc-surface-2); color: var(--cc-text); }
#cc-app .cc-dash-catalog-search:focus { outline: none; border-color: var(--cc-accent); }
#cc-app .cc-dash-catalog-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#cc-app .cc-cat-chip { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 14px; padding: 3px 11px; font-size: 11.5px; font-weight: 600; color: var(--cc-muted); cursor: pointer; text-transform: uppercase; letter-spacing: .02em; }
#cc-app .cc-cat-chip.is-active { background: rgba(37,99,235,0.12); color: #1d4ed8; border-color: rgba(37,99,235,0.4); }
#cc-app .cc-dash-catalog-grid {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
#cc-app .cc-dash-catalog-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
#cc-app .cc-dash-catalog-tile:hover {
  border-color: #0ea5e9;
  box-shadow: 0 4px 14px rgba(14,165,233,0.18);
  transform: translateY(-1px);
}
#cc-app .cc-dash-catalog-tile-icon { font-size: 22px; line-height: 1; }
#cc-app .cc-dash-catalog-tile-name {
  font-size: 13px; font-weight: 800; color: #0f172a;
}
#cc-app .cc-dash-catalog-tile-desc {
  font-size: 11.5px; color: #64748b; line-height: 1.4;
  flex: 1 1 auto;
}
#cc-app .cc-dash-catalog-tile-size {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; color: #0369a1;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(14,165,233,0.10);
  align-self: flex-start;
}

/* v0.9.35 — Dynamic widget bodies */
#cc-app .cc-w-decisions { padding: 4px 0; }
#cc-app .cc-w-decision-row {
  display: grid; grid-template-columns: 56px 22px 1fr;
  gap: 8px; align-items: center;
  padding: 5px 12px;
  font-size: 11.5px; color: #334155;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid transparent;
}
#cc-app .cc-w-decision-row:last-child { border-bottom: none; }
#cc-app .cc-w-decision-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #94a3b8;
}
#cc-app .cc-w-decision-icon { text-align: center; font-size: 12px; }
#cc-app .cc-w-decision-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cc-app .cc-w-decision-text strong { color: #0f172a; font-weight: 700; }
#cc-app .cc-w-decision-blue   { border-left-color: #0ea5e9; }
#cc-app .cc-w-decision-red    { border-left-color: #dc2626; }
#cc-app .cc-w-decision-green  { border-left-color: #22c55e; }
#cc-app .cc-w-decision-violet { border-left-color: #7c3aed; }
#cc-app .cc-w-decision-indigo { border-left-color: #6366f1; }
#cc-app .cc-w-decision-sky    { border-left-color: #38bdf8; }
#cc-app .cc-w-decision-amber  { border-left-color: #f59e0b; }
#cc-app .cc-w-decision-teal   { border-left-color: #14b8a6; }

/* Region trucks widget (v0.9.36 — status-aware) */
#cc-app .cc-w-region-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px;
}
#cc-app .cc-w-region-row {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px;
}
#cc-app .cc-w-region-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
#cc-app .cc-w-region-name { font-weight: 700; color: #0f172a; }
#cc-app .cc-w-region-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 800; color: #0369a1;
  padding: 1px 7px; border-radius: 3px;
  background: rgba(14,165,233,0.10);
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-region-bar {
  height: 6px;
  background: rgba(15,23,42,0.06);
  border-radius: 99px; overflow: hidden;
}
#cc-app .cc-w-region-stack {
  display: flex;
  height: 100%;
  transition: width 360ms ease;
}
#cc-app .cc-w-region-seg {
  display: block; height: 100%;
  transition: width 300ms ease;
}
#cc-app .cc-w-region-seg:first-child { border-top-left-radius: 99px; border-bottom-left-radius: 99px; }
#cc-app .cc-w-region-seg:last-child  { border-top-right-radius: 99px; border-bottom-right-radius: 99px; }
#cc-app .cc-w-region-subs {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 10.5px;
}
#cc-app .cc-w-region-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  padding: 1px 6px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-region-sub-ontime  { background: rgba(22,163,74,0.10);  color: #15803d; }
#cc-app .cc-w-region-sub-loading { background: rgba(14,165,233,0.12); color: #0369a1; }
#cc-app .cc-w-region-sub-atrisk  { background: rgba(217,119,6,0.12);  color: #b45309; }
#cc-app .cc-w-region-sub-late    { background: rgba(220,38,38,0.12);  color: #b91c1c; }

/* Actor instances widget */
#cc-app .cc-w-actor-group {
  padding: 8px 12px 4px;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app .cc-w-actor-group:last-of-type { border-bottom: none; }
#cc-app .cc-w-actor-group-head {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #475569;
  margin-bottom: 4px;
}
#cc-app .cc-w-actor-list {
  display: flex; flex-direction: column; gap: 3px;
}
#cc-app .cc-w-actor-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 12px;
}
#cc-app .cc-w-actor-name { font-weight: 700; color: #0f172a; }
#cc-app .cc-w-actor-sys {
  font-size: 11px; color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app .cc-w-actor-footer {
  padding: 8px 12px;
  font-size: 10.5px; color: #94a3b8; font-style: italic;
  background: #f8fafc;
}

/* v0.9.37 — Kafka Topic Stream widget */
#cc-app .cc-w-kafka-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 10.5px;
}
#cc-app .cc-w-kafka-rate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; color: #0369a1;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(14,165,233,0.10);
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-kafka-total {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; color: #64748b;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-kafka-feed {
  display: flex; flex-direction: column;
}
#cc-app .cc-w-kafka-row {
  display: grid;
  grid-template-columns: 50px 16px auto 1fr;
  gap: 6px; align-items: center;
  padding: 4px 12px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid transparent;
  font-size: 11px;
  animation: cc-w-kafka-in 200ms ease-out;
}
@keyframes cc-w-kafka-in {
  0%   { background: rgba(14,165,233,0.10); }
  100% { background: transparent; }
}
#cc-app .cc-w-kafka-row-blue   { border-left-color: #0ea5e9; }
#cc-app .cc-w-kafka-row-red    { border-left-color: #dc2626; }
#cc-app .cc-w-kafka-row-green  { border-left-color: #22c55e; }
#cc-app .cc-w-kafka-row-violet { border-left-color: #7c3aed; }
#cc-app .cc-w-kafka-row-indigo { border-left-color: #6366f1; }
#cc-app .cc-w-kafka-row-sky    { border-left-color: #38bdf8; }
#cc-app .cc-w-kafka-row-amber  { border-left-color: #f59e0b; }
#cc-app .cc-w-kafka-row-teal   { border-left-color: #14b8a6; }
#cc-app .cc-w-kafka-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-kafka-icon { font-size: 12px; text-align: center; }
#cc-app .cc-w-kafka-topic {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(15,23,42,0.06); color: #334155;
}
#cc-app .cc-w-kafka-summary {
  font-size: 11px; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cc-app .cc-w-kafka-summary strong { color: #0f172a; }
#cc-app .cc-w-kafka-summary em { color: #15803d; font-style: normal; }

/* v0.9.37 — Savings Trend widget */
#cc-app .cc-w-trend-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 12px 6px;
}
#cc-app .cc-w-trend-total {
  font-size: 22px; font-weight: 800; color: #15803d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-trend-total span {
  font-size: 11px; font-weight: 600; color: #94a3b8;
  font-family: inherit;
  margin-left: 4px;
}
#cc-app .cc-w-trend-delta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800; color: #0369a1;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(14,165,233,0.10);
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-trend-spark {
  padding: 0 12px 10px;
}
#cc-app .cc-w-trend-empty {
  font-size: 11px; color: #94a3b8;
  text-align: center; padding: 14px 0;
  font-style: italic;
}

/* v0.9.37 — Value Composition widget */
#cc-app .cc-w-comp-total {
  padding: 10px 12px;
  font-size: 17px; font-weight: 800; color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-comp-total span {
  font-size: 11px; font-weight: 600; color: #94a3b8;
  margin-left: 4px;
}
#cc-app .cc-w-comp-list {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px 12px;
}
#cc-app .cc-w-comp-row {
  padding: 6px 9px;
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
  border-radius: 5px;
}
#cc-app .cc-w-comp-row-direct   { border-left-color: #0f172a; }
#cc-app .cc-w-comp-row-kfkflink { border-left-color: #0ea5e9; }
#cc-app .cc-w-comp-row-xorch    { border-left-color: #7c3aed; }
#cc-app .cc-w-comp-row-mcp      { border-left-color: #22c55e; }
#cc-app .cc-w-comp-row-audit    { border-left-color: #d97706; }
#cc-app .cc-w-comp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
#cc-app .cc-w-comp-label { font-size: 11.5px; font-weight: 700; color: #0f172a; }
#cc-app .cc-w-comp-eur {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 800; color: #15803d;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-comp-pct { font-weight: 600; color: #94a3b8; font-size: 10.5px; }
#cc-app .cc-w-comp-bar {
  height: 4px;
  background: rgba(15,23,42,0.05);
  border-radius: 99px; overflow: hidden;
}
#cc-app .cc-w-comp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #15803d);
  transition: width 360ms ease;
}

/* v0.9.37 — AWB Lifecycle Mix widget */
#cc-app .cc-w-awb-total {
  padding: 10px 12px 4px;
  font-size: 12px; font-weight: 700; color: #0f172a;
}
/* The distribution used to under-fill in silence when a status was missing from the count.
   This is the stated shortfall — it must read as a caveat, not as decoration. */
#cc-app .cc-w-awb-gap {
  margin: 0 12px 8px;
  padding: 6px 8px;
  font-size: 10.5px; line-height: 1.45; color: #92400e;
  background: rgba(217,119,6,.10);
  border-left: 3px solid #d97706;
  border-radius: 4px;
}
#cc-app .cc-w-awb-cite {
  padding: 0 12px 10px;
  font-size: 10px; color: #94a3b8; line-height: 1.4;
}
#cc-app .cc-w-awb-stack {
  display: flex; height: 8px;
  margin: 0 12px 8px;
  border-radius: 99px; overflow: hidden;
  background: rgba(15,23,42,0.06);
}
#cc-app .cc-w-awb-seg {
  display: block; height: 100%;
}
#cc-app .cc-w-awb-list {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 12px 10px;
}
#cc-app .cc-w-awb-row {
  display: grid; grid-template-columns: 40px 1fr auto auto;
  gap: 8px; align-items: center;
  font-size: 11.5px;
  padding: 2px 0;
}
#cc-app .cc-w-awb-status { padding: 1px 6px; }
#cc-app .cc-w-awb-label { color: #475569; }
#cc-app .cc-w-awb-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; color: #0f172a;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-awb-pct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* v0.9.38 — ETA Improvement widget */
#cc-app .cc-w-eta-head {
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app .cc-w-eta-head-title {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #334155;
}
#cc-app .cc-w-eta-head-sub {
  display: block; margin-top: 2px;
  font-size: 11px; color: #64748b;
}
#cc-app .cc-w-eta-list {
  display: flex; flex-direction: column;
}
#cc-app .cc-w-eta-row {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  animation: cc-w-eta-row-in 250ms ease-out;
}
@keyframes cc-w-eta-row-in {
  0%   { background: rgba(34,197,94,0.10); }
  100% { background: transparent; }
}
#cc-app .cc-w-eta-row-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}
#cc-app .cc-w-eta-row-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-eta-row-entity {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}
#cc-app .cc-w-eta-row-entity-truck { background: rgba(217,119,6,0.12);  color: #b45309; }
#cc-app .cc-w-eta-row-entity-awb   { background: rgba(14,165,233,0.10); color: #0369a1; }
#cc-app .cc-w-eta-row-scenario {
  flex: 1 1 auto;
  font-size: 11.5px; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cc-app .cc-w-eta-row-grid {
  display: grid;
  grid-template-columns: 1fr 18px 1fr auto;
  gap: 8px; align-items: stretch;
}
#cc-app .cc-w-eta-box {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px;
  border-radius: 6px;
  text-align: center;
}
#cc-app .cc-w-eta-box-without {
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.20);
}
#cc-app .cc-w-eta-box-with {
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.30);
}
#cc-app .cc-w-eta-box-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #64748b;
}
#cc-app .cc-w-eta-box-without .cc-w-eta-box-label { color: #b91c1c; }
#cc-app .cc-w-eta-box-with    .cc-w-eta-box-label { color: #15803d; }
#cc-app .cc-w-eta-box-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 800; color: #0f172a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-eta-box-without .cc-w-eta-box-time { color: #b91c1c; }
#cc-app .cc-w-eta-box-with    .cc-w-eta-box-time { color: #15803d; }
#cc-app .cc-w-eta-box-sub {
  font-size: 9.5px; color: #94a3b8;
}
#cc-app .cc-w-eta-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #94a3b8; font-weight: 700;
}
#cc-app .cc-w-eta-delta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 10px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 6px;
  min-width: 80px;
}
#cc-app .cc-w-eta-saving {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 800; color: #15803d;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#cc-app .cc-w-eta-eur {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800; color: #0f172a;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
#cc-app .cc-w-eta-saved-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #15803d;
  margin-top: 1px;
}
#cc-app .cc-w-eta-breakdown {
  margin-top: 6px;
  display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: #64748b;
  padding: 5px 9px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-eta-bd-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #94a3b8;
}
#cc-app .cc-w-eta-bd-text { flex: 1; color: #475569; }
#cc-app .cc-w-eta-bd-help {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #e2e8f0; color: #475569;
  font-size: 11px; line-height: 1; font-family: system-ui, sans-serif;
  cursor: help; outline: none;
  transition: background 120ms ease;
}
#cc-app .cc-w-eta-bd-help:hover,
#cc-app .cc-w-eta-bd-help:focus { background: #0ea5e9; color: #fff; }
#cc-app .cc-w-eta-bd-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  width: 280px;
  background: #0f172a; color: #f1f5f9;
  font-family: system-ui, sans-serif;
  font-size: 11px; line-height: 1.45; font-weight: 400;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.30);
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 50;
}
#cc-app .cc-w-eta-bd-pop b { color: #fff; }
#cc-app .cc-w-eta-bd-pop::after {
  content: ''; position: absolute;
  top: 100%; right: 12px;
  border: 5px solid transparent;
  border-top-color: #0f172a;
}
#cc-app .cc-w-eta-bd-help:hover .cc-w-eta-bd-pop,
#cc-app .cc-w-eta-bd-help:focus .cc-w-eta-bd-pop {
  opacity: 1; transform: translateY(0);
}

/* v0.9.40 — Empty state + header counter */
#cc-app .cc-w-eta-empty {
  padding: 18px 16px;
  text-align: left;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  margin: 8px 0;
}
#cc-app .cc-w-eta-empty-title {
  font-size: 12px; font-weight: 700; color: #334155;
  margin-bottom: 6px;
}
#cc-app .cc-w-eta-empty-body {
  font-size: 11px; line-height: 1.55; color: #64748b;
}
#cc-app .cc-w-eta-empty-body b { color: #0f172a; font-weight: 600; }
#cc-app .cc-w-eta-head-count {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #15803d;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 10px;
}
#cc-app .cc-w-eta-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* v0.9.34 — Ghost outline at the drag-snap target */
#cc-app .cc-widget-ghost {
  background: rgba(14,165,233,0.10);
  border: 2px dashed rgba(14,165,233,0.55);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
  animation: cc-ghost-pulse 1.2s ease-in-out infinite;
}
@keyframes cc-ghost-pulse {
  0%, 100% { background: rgba(14,165,233,0.08);  border-color: rgba(14,165,233,0.45); }
  50%      { background: rgba(14,165,233,0.16);  border-color: rgba(14,165,233,0.85); }
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget.is-resizing {
  z-index: 100;
  box-shadow: 0 4px 16px rgba(14,165,233,0.25);
  border-color: #0ea5e9;
}
#cc-app[data-cc-dashboard-mode="edit"] .cc-widget[data-cc-widget-hidden="1"] {
  display: none;
}

@media (max-width: 980px) {
  #cc-app .cc-dash {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(180px, auto);
  }
  /* Widgets stack at full-width on mobile regardless of saved layout */
  #cc-app .cc-widget {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* Each side card: header fixed, body scrolls internally */
#cc-app .cc-card-ticker,
#cc-app .cc-card-exceptions,
#cc-app .cc-card-bgopti {
  display: flex; flex-direction: column;
  min-height: 0;          /* allow flex children to shrink */
  overflow: hidden;       /* keep rounded corners around the scroll */
}
#cc-app .cc-card-ticker   > .cc-card-header,
#cc-app .cc-card-exceptions > .cc-card-header,
#cc-app .cc-card-bgopti   > .cc-card-header { flex: 0 0 auto; }
#cc-app .cc-card-ticker   > .cc-card-body,
#cc-app .cc-card-exceptions > .cc-card-body,
#cc-app .cc-card-bgopti   > .cc-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;       /* the scroll the user asked for */
  max-height: none;       /* override any inherited cap */
  padding: 0;
}

/* Body inner padding lives on the content containers so the scroll bar
   hugs the card edge */
#cc-app .cc-card-ticker .cc-ticker,
#cc-app .cc-card-bgopti .cc-bgopti-panel,
#cc-app .cc-card-exceptions .cc-exception-panel {
  padding: 6px 0;
}

@media (max-width: 980px) {
  #cc-app .cc-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  #cc-app .cc-card-map        { grid-column: 1; grid-row: 1; min-height: 420px; }
  #cc-app .cc-card-ticker     { grid-column: 1; grid-row: 2; max-height: 220px; }
  #cc-app .cc-card-exceptions { grid-column: 1; grid-row: 3; max-height: 360px; }
  #cc-app .cc-card-bgopti     { grid-column: 1; grid-row: 4; max-height: 240px; }
}

#cc-app .cc-card {
  background: var(--cc-surface);
  border-radius: 10px;
  border: 1px solid var(--cc-line-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#cc-app .cc-card-header {
  padding: 10px 14px;
  background: var(--cc-surface-2);
  border-bottom: 1px solid var(--cc-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#cc-app .cc-card-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--cc-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

#cc-app .cc-card-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--cc-brand);
  background: rgba(14, 165, 233, 0.08);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

#cc-app .cc-card-body {
  padding: 12px 14px;
  flex: 1;
  overflow: hidden;
}

#cc-app .cc-card-body-flush {
  padding: 0;
}

/* ─── 5. Leaflet map host ──────────────────────────────────────────────── */

/* v0.5.3 — robust map sizing.
   The previous "height: 100%" relied on a percentage-height resolving through
   a flex parent, which is flaky. New approach: make the flush body a flex
   COLUMN container so the map can use `flex: 1` to fill the available
   vertical space deterministically. min-height stays as a floor in case the
   parent has no defined height (e.g. single-column mobile layout). */
#cc-app .cc-card-body-flush {
  padding: 0;
  display: flex;
  flex-direction: column;
}
#cc-app #cc-map {
  width: 100%;
  flex: 1 1 auto;          /* v0.9.14 — restored; child of flex-column body */
  min-height: 480px;       /* floor */
  background: #e2e8f0; /* visible during tile load */
}
/* v0.9.13/14 — Map body height is LOCKED so the right column (ticker +
   exceptions + bgopti) can grow without dragging the map taller. The
   `flex: 1` on the map child fills this explicit height deterministically. */
#cc-app .cc-card-map .cc-card-body-flush {
  height: 580px;
  min-height: 580px;
}

#cc-app .leaflet-container {
  font-family: inherit !important;
  background: #e2e8f0;
}

/* Custom airport / GHA markers built via L.divIcon */
#cc-app .cc-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#cc-app .cc-marker-airport {
  background: var(--cc-brand);
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
}

#cc-app .cc-marker-gha {
  background: var(--cc-warn);
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  font-size: 0;       /* no label inside, just the dot */
}

/* ─── 6. AWB ticker ────────────────────────────────────────────────────── */

#cc-app .cc-ticker {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#cc-app .cc-ticker-empty {
  font-size: 12px;
  color: var(--cc-muted);
  font-style: italic;
  padding: 8px;
}

#cc-app .cc-ticker-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-line-2);
  font-size: 11.5px;
  animation: cc-ticker-flash 600ms ease-out;
}

@keyframes cc-ticker-flash {
  0%   { background: rgba(14, 165, 233, 0.15); }
  100% { background: var(--cc-surface-2); }
}

#cc-app .cc-ticker-awb {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-text);
}

#cc-app .cc-ticker-route {
  color: var(--cc-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cc-app .cc-ticker-status {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  /* Default chip paint. Without it, any status code with no rule of its own rendered as bare text —
     which is exactly what an unrecognised Cargo-IMP code coming off a live feed would do. */
  background: rgba(100,116,139,.12);
  color: #475569;
}

/* Status colour coding — neutral up to DEP, green at NFD/DLV, amber at MAN/RCF transitions */
#cc-app .cc-ticker-status-BKD { background: rgba(100,116,139,.12); color: #475569; }
#cc-app .cc-ticker-status-FOH { background: rgba(100,116,139,.16); color: #334155; }
#cc-app .cc-ticker-status-RCS { background: rgba(14,165,233,.12);  color: #0369a1; }
#cc-app .cc-ticker-status-MAN { background: rgba(217,119,6,.12);   color: #b45309; }
#cc-app .cc-ticker-status-DEP { background: rgba(124,58,237,.12);  color: #6d28d9; }
#cc-app .cc-ticker-status-ARR { background: rgba(124,58,237,.18);  color: #5b21b6; }
#cc-app .cc-ticker-status-RCF { background: rgba(14,165,233,.18);  color: #075985; }
#cc-app .cc-ticker-status-NFD { background: rgba(22,163,74,.12);   color: #15803d; }
#cc-app .cc-ticker-status-AWD { background: rgba(13,148,136,.12);  color: #0f766e; }
#cc-app .cc-ticker-status-CCD { background: rgba(13,148,136,.18);  color: #115e59; }
#cc-app .cc-ticker-status-DLV { background: rgba(22,163,74,.20);   color: #166534; }
/* Conditional codes — off the sequenced chain, so deliberately not green or purple */
#cc-app .cc-ticker-status-TRM { background: rgba(217,119,6,.18);   color: #92400e; }
#cc-app .cc-ticker-status-RCT { background: rgba(217,119,6,.10);   color: #a16207; }
#cc-app .cc-ticker-status-DIS { background: rgba(220,38,38,.12);   color: #b91c1c; }
#cc-app .cc-ticker-status-DDL { background: rgba(220,38,38,.18);   color: #991b1b; }

/* v0.9.9 — AWB lifecycle: live transition rows */
#cc-app .cc-ticker-row-transition {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px; align-items: center;
  animation: cc-ticker-row-flash 1.2s ease-out;
}
#cc-app .cc-ticker-row-transition.is-recycled {
  background: rgba(22,163,74,0.04);
}
#cc-app .cc-ticker-transition {
  display: inline-flex; align-items: center; gap: 4px;
}
#cc-app .cc-ticker-arrow {
  color: #94a3b8; font-weight: 700; padding: 0 2px;
}
#cc-app .cc-ticker-ago {
  font-size: 10.5px; color: #94a3b8; font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@keyframes cc-ticker-row-flash {
  0%   { background: rgba(14,165,233,0.12); }
  100% { background: transparent; }
}

/* ─── 7. Exception panel ───────────────────────────────────────────────── */

#cc-app .cc-exception-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* v0.9.52 — fill the parent body so the list grows with widget resize */
  min-height: 100%;
  box-sizing: border-box;
}

#cc-app .cc-exception-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--cc-surface-2);
  border-left: 3px solid var(--cc-line);
  font-size: 11.5px;
}

#cc-app .cc-exception-row.cc-sev-low    { border-left-color: #f59e0b; }
#cc-app .cc-exception-row.cc-sev-medium { border-left-color: var(--cc-warn); }
#cc-app .cc-exception-row.cc-sev-high   { border-left-color: var(--cc-bad); }

#cc-app .cc-exception-label {
  font-weight: 600;
  color: var(--cc-text);
}

#cc-app .cc-exception-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--cc-bg);
  color: var(--cc-muted);
}

#cc-app .cc-exception-row.cc-sev-high   .cc-exception-count { background: rgba(220,38,38,.10);  color: var(--cc-bad); }
#cc-app .cc-exception-row.cc-sev-medium .cc-exception-count { background: rgba(217,119,6,.10);  color: var(--cc-warn); }

/* ─── 8. Footer note ───────────────────────────────────────────────────── */

#cc-app .cc-footer-note {
  padding: 10px 18px 14px;
  font-size: 10.5px;
  color: var(--cc-muted);
  font-style: italic;
  text-align: center;
  border-top: 1px solid var(--cc-line-2);
  background: var(--cc-bg);
}

/* ─── 9. Architecture view (Sprint 1 / Card 4) ─────────────────────────── */

#cc-app[data-view="architecture"] .cc-arch-toolbar {
  background: var(--cc-surface);
  padding: 12px 18px;
  border-bottom: 1px solid var(--cc-line-2);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
/* v0.7.0 — wrap each toggle (MCP, OptiFlow) in its own labelled section */
#cc-app[data-view="architecture"] .cc-arch-toolbar-section {
  display: inline-flex; align-items: center; gap: 8px;
}
#cc-app[data-view="architecture"] .cc-arch-toolbar-label {
  font-size: 11.5px; font-weight: 700; color: var(--cc-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-view="architecture"] .cc-arch-toolbar-spacer { flex: 1; }

#cc-app[data-view="architecture"] .cc-arch-toggle {
  display: inline-flex; border: 1px solid var(--cc-line); border-radius: 8px; overflow: hidden;
}
#cc-app[data-view="architecture"] .cc-arch-toggle-btn {
  background: var(--cc-surface); border: 0; padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--cc-muted);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  border-right: 1px solid var(--cc-line-2);
}
#cc-app[data-view="architecture"] .cc-arch-toggle-btn:last-child { border-right: 0; }
#cc-app[data-view="architecture"] .cc-arch-toggle-btn:hover { background: var(--cc-bg); color: var(--cc-text); }
#cc-app[data-view="architecture"] .cc-arch-toggle-btn.active {
  background: linear-gradient(135deg, var(--cc-brand), #06b6d4);
  color: #fff;
}
#cc-app[data-view="architecture"] .cc-arch-toggle-btn.active .cc-arch-toggle-sub { color: rgba(255,255,255,0.85); }
#cc-app[data-view="architecture"] .cc-arch-toggle-sub {
  font-size: 10.5px; font-weight: 400; color: var(--cc-muted); margin-left: 4px;
}

#cc-app[data-view="architecture"] .cc-arch-latency {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--cc-surface-2); border: 1px solid var(--cc-line-2);
  font-size: 12px;
}
#cc-app[data-view="architecture"] .cc-arch-latency-label {
  color: var(--cc-muted); font-weight: 600;
}
#cc-app[data-view="architecture"] .cc-arch-latency-value {
  font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 2px 8px; border-radius: 5px;
}
#cc-app[data-view="architecture"] .cc-arch-latency-with-cmp    { background: rgba(22,163,74,0.12); color: #15803d; }
#cc-app[data-view="architecture"] .cc-arch-latency-without-cmp { background: rgba(220,38,38,0.12); color: #b91c1c; }

/* Mode-conditional visibility — driven by the data-cc-arch-mode attribute.
   v0.5.2 BUG FIX — SVG groups use OPACITY-ONLY transitions. The earlier
   v0.5.1 attempt applied `transform: translateY(0)` to .cc-arch-mode which
   is the class on <g> elements with their own `transform="translate(300,145)"`
   SVG attribute. CSS transform overrides the SVG transform attribute,
   sending the MCP group to (0,0) — top-left of the SVG, overlapping the
   "Connected Assets" header. Lesson: never apply CSS transform to an SVG
   element that already has a transform="" attribute. Sibling DOM elements
   (legend cards, latency pills) are fine to slide because they have no
   SVG transform conflict.

   The stage attribute drives SVG groups (inside SVG). The root attribute
   drives sibling elements (legend cards, latency pills outside SVG). */

/* SVG groups — opacity only, no transform (see v0.5.2 bug fix comment above) */
#cc-app[data-view="architecture"] .cc-arch-mode,
#cc-app[data-view="architecture"] .cc-arch-of-mode {
  opacity: 1;
  transition: opacity 280ms ease;
}

#cc-app[data-view="architecture"] .cc-arch-stage[data-cc-arch-mode="with-cmp"]    .cc-arch-mode-without-cmp,
#cc-app[data-view="architecture"] .cc-arch-stage[data-cc-arch-mode="with-mcp"]    .cc-arch-mode-without-cmp,
#cc-app[data-view="architecture"] .cc-arch-stage[data-cc-arch-mode="without-cmp"] .cc-arch-mode-with-cmp,
#cc-app[data-view="architecture"] .cc-arch-stage[data-cc-arch-mode="without-mcp"] .cc-arch-mode-with-cmp {
  opacity: 0;
  pointer-events: none;
}
/* v0.7.0 — OptiFlow placement visibility */
#cc-app[data-view="architecture"] .cc-arch-stage[data-cc-arch-of-mode="of-cmp"]   .cc-arch-of-mode-actor,
#cc-app[data-view="architecture"] .cc-arch-stage[data-cc-arch-of-mode="of-actor"] .cc-arch-of-mode-cmp {
  opacity: 0;
  pointer-events: none;
}

/* Sibling DOM elements (legend cards, latency value pills) — these can slide
   safely because they're plain HTML, no SVG transform conflict. */
#cc-app[data-view="architecture"] [data-cc-arch-when] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

#cc-app[data-view="architecture"][data-cc-arch-mode="with-cmp"]    [data-cc-arch-when="without-cmp"],
#cc-app[data-view="architecture"][data-cc-arch-mode="with-mcp"]    [data-cc-arch-when="without-mcp"],
#cc-app[data-view="architecture"][data-cc-arch-mode="without-cmp"] [data-cc-arch-when="with-cmp"],
#cc-app[data-view="architecture"][data-cc-arch-mode="without-mcp"] [data-cc-arch-when="with-mcp"] {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  transition: opacity 220ms ease, transform 220ms ease,
              max-height 320ms ease 100ms,
              margin 320ms ease 100ms,
              padding 320ms ease 100ms;
}

#cc-app[data-view="architecture"][data-cc-arch-mode="with-cmp"]    [data-cc-arch-when="with-cmp"],
#cc-app[data-view="architecture"][data-cc-arch-mode="with-mcp"]    [data-cc-arch-when="with-mcp"],
#cc-app[data-view="architecture"][data-cc-arch-mode="without-cmp"] [data-cc-arch-when="without-cmp"],
#cc-app[data-view="architecture"][data-cc-arch-mode="without-mcp"] [data-cc-arch-when="without-mcp"] {
  max-height: 1200px;
  transition: opacity 240ms ease 80ms, transform 240ms ease 80ms;
}

#cc-app[data-view="architecture"] .cc-arch-stage {
  background: var(--cc-surface);
  padding: 12px 18px 4px;
}
#cc-app[data-view="architecture"] .cc-arch-svg {
  width: 100%; height: auto; max-height: 720px;
  display: block;
}

/* Legend cards below the SVG */
#cc-app[data-view="architecture"] .cc-arch-legend {
  padding: 14px 18px 18px;
  background: var(--cc-bg);
}
#cc-app[data-view="architecture"] .cc-arch-legend-card {
  background: var(--cc-surface);
  border-radius: 10px;
  padding: 16px 20px;
  border: 1px solid var(--cc-line-2);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
#cc-app[data-view="architecture"] .cc-arch-legend-card.cc-arch-legend-with-cmp    { border-left: 4px solid var(--cc-good); }
#cc-app[data-view="architecture"] .cc-arch-legend-card.cc-arch-legend-without-cmp { border-left: 4px solid var(--cc-bad); }
#cc-app[data-view="architecture"] .cc-arch-legend-card h3 {
  margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="architecture"] .cc-arch-legend-card ul {
  margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.6; color: var(--cc-text);
}
#cc-app[data-view="architecture"] .cc-arch-legend-card li { margin-bottom: 6px; }
#cc-app[data-view="architecture"] .cc-arch-legend-card strong { color: var(--cc-text); }

/* ─── 9c. v0.7.0 — Architecture value-leakage panel + hover breakdown ─── */

#cc-app[data-view="architecture"] .cc-arch-leakage {
  position: relative;
  background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(14,165,233,0.04));
  border-bottom: 1px solid var(--cc-line-2);
  padding: 14px 18px;
  cursor: help;
  transition: background 200ms ease;
}
#cc-app[data-view="architecture"] .cc-arch-leakage:hover,
#cc-app[data-view="architecture"] .cc-arch-leakage:focus {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(14,165,233,0.08));
}
#cc-app[data-view="architecture"] .cc-arch-leakage-row {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-combo {
  font-size: 13px; font-weight: 800; color: var(--cc-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-hint {
  font-size: 10.5px; color: var(--cc-muted); font-style: italic;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-numbers {
  display: flex; gap: 18px; flex-wrap: wrap;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 0;
  min-width: 130px;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-stat-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  color: var(--cc-muted); letter-spacing: 0.3px;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-stat-value {
  font-size: 18px; font-weight: 800; color: var(--cc-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-stat-good .cc-arch-leakage-stat-value { color: #15803d; }
#cc-app[data-view="architecture"] .cc-arch-leakage-stat-bad  .cc-arch-leakage-stat-value { color: #b91c1c; }
#cc-app[data-view="architecture"] .cc-arch-leakage-stat-warn .cc-arch-leakage-stat-value { color: #b45309; font-size: 15px; }

#cc-app[data-view="architecture"] .cc-arch-leakage-bar {
  height: 6px; border-radius: 3px; background: rgba(220,38,38,0.15);
  margin-top: 10px; overflow: hidden; position: relative;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-bar-fill {
  height: 100%; background: linear-gradient(90deg, #16a34a, #22c55e);
  transition: width 300ms ease;
}

/* Hover popover — per-use-case breakdown */
#cc-app[data-view="architecture"] .cc-arch-leakage-popover {
  position: absolute;
  left: 18px; right: 18px; top: calc(100% - 2px);
  z-index: 50;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.18);
  padding: 14px 18px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
#cc-app[data-view="architecture"] .cc-arch-leakage:hover .cc-arch-leakage-popover,
#cc-app[data-view="architecture"] .cc-arch-leakage:focus-within .cc-arch-leakage-popover {
  opacity: 1; transform: translateY(0);
}
#cc-app[data-view="architecture"] .cc-arch-leakage-popover-title {
  font-size: 12px; font-weight: 800; color: var(--cc-text);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-table {
  width: 100%; border-collapse: collapse; font-size: 11.5px;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-table th,
#cc-app[data-view="architecture"] .cc-arch-leakage-table td {
  padding: 5px 8px; text-align: right;
  border-bottom: 1px solid var(--cc-line-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-table th {
  font-weight: 700; color: var(--cc-muted); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.3px;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-table th:first-child,
#cc-app[data-view="architecture"] .cc-arch-leakage-table td:first-child {
  text-align: left; font-family: inherit; font-weight: 600;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-table tfoot td {
  font-weight: 800; border-top: 2px solid var(--cc-line);
  border-bottom: 0; padding-top: 8px;
}
#cc-app[data-view="architecture"] .cc-arch-leakage-table .cc-leak-recov { color: #15803d; }
#cc-app[data-view="architecture"] .cc-arch-leakage-table .cc-leak-leak  { color: #b91c1c; }
#cc-app[data-view="architecture"] .cc-arch-leakage-popover-footer {
  margin-top: 8px; padding-top: 8px;
  font-size: 10.5px; color: var(--cc-muted); font-style: italic;
  border-top: 1px dashed var(--cc-line-2);
}

/* ─── 9b. Architecture v0.5.0 redesign — SVG nodes, badges, legend chips ─── */

/* Column / section headers inside the SVG */
#cc-app[data-view="architecture"] .cc-arch-col-header {
  font-size: 12px; font-weight: 800; fill: #475569;
  letter-spacing: 0.5px; text-transform: uppercase;
}
#cc-app[data-view="architecture"] .cc-arch-section-label {
  font-size: 10px; font-weight: 700; fill: #7f1d1d;
  letter-spacing: 0.4px; text-transform: uppercase;
}

/* SVG node rect base + variants */
#cc-app[data-view="architecture"] .cc-arch-node {
  fill: #ffffff; stroke: #94a3b8; stroke-width: 1.5;
}
#cc-app[data-view="architecture"] .cc-arch-node-asset    { fill: rgba(37,99,235,0.06); stroke: #2563eb; }
#cc-app[data-view="architecture"] .cc-arch-node-human    { fill: rgba(220,38,38,0.06); stroke: #dc2626; stroke-dasharray: 4,3; }
#cc-app[data-view="architecture"] .cc-arch-node-kafka    { fill: #1a2033; stroke: #0f1626; }
#cc-app[data-view="architecture"] .cc-arch-node-mcp      { fill: rgba(220,38,38,0.10); stroke: #dc2626; stroke-width: 2; }
#cc-app[data-view="architecture"] .cc-arch-node-platform { fill: rgba(14,165,233,0.08); stroke: #0ea5e9; }
#cc-app[data-view="architecture"] .cc-arch-node-driver   { fill: rgba(22,163,74,0.08); stroke: #16a34a; }
#cc-app[data-view="architecture"] .cc-arch-node-optiflow { fill: rgba(22,163,74,0.12); stroke: #16a34a; stroke-width: 2; }
#cc-app[data-view="architecture"] .cc-arch-node-tms      { fill: rgba(124,58,237,0.06); stroke: #7c3aed; }

/* Status outline overrides */
#cc-app[data-view="architecture"] .cc-arch-status-existing  { stroke-width: 2; }
#cc-app[data-view="architecture"] .cc-arch-status-configure { stroke-width: 2; stroke-dasharray: 5,3; }
#cc-app[data-view="architecture"] .cc-arch-status-build     { stroke-width: 2; stroke-dasharray: 2,2; }

/* Node text styling */
#cc-app[data-view="architecture"] .cc-arch-node-label    { font-size: 12px; font-weight: 700; fill: #1e293b; }
#cc-app[data-view="architecture"] .cc-arch-node-sub      { font-size: 10px; fill: #64748b; }
#cc-app[data-view="architecture"] .cc-arch-node-label-sm { font-size: 11px; font-weight: 700; fill: #1e293b; }
#cc-app[data-view="architecture"] .cc-arch-node-sub-sm   { font-size: 9px;  fill: #64748b; }
/* Inside dark Kafka/Flink boxes, flip text colour */
#cc-app[data-view="architecture"] .cc-arch-node-label-dark { font-size: 12px; font-weight: 700; fill: #f1f5f9; }
#cc-app[data-view="architecture"] .cc-arch-node-sub-dark   { font-size: 10px; fill: #cbd5e1; }

/* SVG badges */
#cc-app[data-view="architecture"] .cc-arch-badge rect { fill: #ffffff; stroke-width: 1; }
#cc-app[data-view="architecture"] .cc-arch-badge text { font-size: 8.5px; font-weight: 800; }
#cc-app[data-view="architecture"] .cc-arch-badge-existing  rect { stroke: #16a34a; }
#cc-app[data-view="architecture"] .cc-arch-badge-existing  text { fill: #16a34a; }
#cc-app[data-view="architecture"] .cc-arch-badge-configure rect { stroke: #d97706; }
#cc-app[data-view="architecture"] .cc-arch-badge-configure text { fill: #d97706; }
#cc-app[data-view="architecture"] .cc-arch-badge-build     rect { stroke: #dc2626; }
#cc-app[data-view="architecture"] .cc-arch-badge-build     text { fill: #dc2626; }

/* Flow arrows */
#cc-app[data-view="architecture"] .cc-arch-flow {
  stroke: #64748b; stroke-width: 1.2; fill: none; opacity: 0.55;
}
#cc-app[data-view="architecture"] .cc-arch-flow-mcp   { stroke: #dc2626; opacity: 0.7; }
#cc-app[data-view="architecture"] .cc-arch-flow-green { stroke: #16a34a; }
#cc-app[data-view="architecture"] .cc-arch-flow-label { font-size: 10px; fill: #64748b; }

/* Legend chip row above the narrative legend */
#cc-app[data-view="architecture"] .cc-arch-legend-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--cc-bg);
  border-bottom: 1px solid var(--cc-line-2);
}
#cc-app[data-view="architecture"] .cc-arch-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cc-surface); border: 1px solid var(--cc-line-2);
  padding: 6px 12px; border-radius: 14px; font-size: 11.5px;
}
#cc-app[data-view="architecture"] .cc-arch-legend-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid;
}
#cc-app[data-view="architecture"] .cc-arch-legend-existing  .cc-arch-legend-swatch { border-color: #16a34a; background: rgba(22,163,74,0.15); }
#cc-app[data-view="architecture"] .cc-arch-legend-configure .cc-arch-legend-swatch { border-color: #d97706; background: rgba(217,119,6,0.15); border-style: dashed; }
#cc-app[data-view="architecture"] .cc-arch-legend-build     .cc-arch-legend-swatch { border-color: #dc2626; background: rgba(220,38,38,0.15); border-style: dotted; }
#cc-app[data-view="architecture"] .cc-arch-legend-desc { color: var(--cc-muted); font-size: 11px; }
#cc-app[data-view="architecture"] .cc-arch-legend-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; font-size: 11px; padding: 2px 8px;
  background: var(--cc-bg); border-radius: 5px; margin-left: 4px;
}

/* MCP-mode-conditional KPI pills in the header — both rendered, JS swaps text */

/* ─── 9d. Land Transport view — Sprint 2 / Card ac_s2_a (pre-pickup) ──── */

#cc-app[data-view="land"] .cc-land-section {
  background: var(--cc-surface);
  margin: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--cc-line-2);
  overflow: hidden;
}
#cc-app[data-view="land"] .cc-land-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px; gap: 18px; flex-wrap: wrap;
  background: var(--cc-surface-2);
  border-bottom: 1px solid var(--cc-line-2);
}
#cc-app[data-view="land"] .cc-land-section-title {
  font-size: 15px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="land"] .cc-land-section-sub {
  font-size: 12px; color: var(--cc-muted); margin-top: 3px;
}
#cc-app[data-view="land"] .cc-land-section-stats {
  display: flex; gap: 22px; flex-wrap: wrap;
}
#cc-app[data-view="land"] .cc-land-stat { display: flex; flex-direction: column; gap: 2px; }
#cc-app[data-view="land"] .cc-land-stat-label {
  font-size: 10.5px; color: var(--cc-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-view="land"] .cc-land-stat-value {
  font-size: 18px; font-weight: 800; color: var(--cc-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="land"] .cc-land-stat-good .cc-land-stat-value,
#cc-app[data-view="land"] .cc-land-stat-good                  { color: #15803d; }
#cc-app[data-view="land"] .cc-land-stat-warn .cc-land-stat-value,
#cc-app[data-view="land"] .cc-land-stat-warn                  { color: #b45309; }
#cc-app[data-view="land"] .cc-land-stat-bad  .cc-land-stat-value,
#cc-app[data-view="land"] .cc-land-stat-bad                   { color: #b91c1c; }

/* Callout block — the blind-spot story */
#cc-app[data-view="land"] .cc-land-callout {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cc-line-2);
}
#cc-app[data-view="land"] .cc-land-callout-warn {
  background: rgba(245,158,11,0.06);
  border-bottom-color: rgba(245,158,11,0.25);
}
#cc-app[data-view="land"] .cc-land-callout-info {
  background: rgba(14,165,233,0.06);
  border-bottom-color: rgba(14,165,233,0.25);
}
#cc-app[data-view="land"] .cc-land-callout-info .cc-land-callout-icon  { color: #0369a1; }
#cc-app[data-view="land"] .cc-land-callout-info .cc-land-callout-title { color: #0c4a6e; }
#cc-app[data-view="land"] .cc-land-callout-info .cc-land-callout-text  { color: #0c4a6e; }
#cc-app[data-view="land"] .cc-land-callout-icon {
  font-size: 22px; line-height: 1; color: #b45309; padding-top: 2px;
}
#cc-app[data-view="land"] .cc-land-callout-body { flex: 1; }
#cc-app[data-view="land"] .cc-land-callout-title {
  font-size: 13px; font-weight: 800; color: #7c2d12; margin-bottom: 4px;
}
#cc-app[data-view="land"] .cc-land-callout-text {
  font-size: 12.5px; color: #7c2d12; line-height: 1.5;
}

/* Bookings table */
#cc-app[data-view="land"] .cc-land-table-wrap {
  padding: 12px 20px 16px;
  overflow-x: auto;
}
#cc-app[data-view="land"] .cc-land-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
#cc-app[data-view="land"] .cc-land-table th {
  font-size: 10.5px; font-weight: 700; color: var(--cc-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 8px 10px; text-align: left;
  border-bottom: 2px solid var(--cc-line);
  background: var(--cc-surface-2);
  white-space: nowrap;
}
#cc-app[data-view="land"] .cc-land-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--cc-line-2);
  vertical-align: top;
}
#cc-app[data-view="land"] .cc-land-table tbody tr:hover { background: var(--cc-surface-2); }
#cc-app[data-view="land"] .cc-land-table-empty {
  text-align: center; padding: 28px; color: var(--cc-muted); font-style: italic;
}
#cc-app[data-view="land"] .cc-land-bk-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: var(--cc-text);
}
#cc-app[data-view="land"] .cc-land-bk-sub {
  font-size: 10.5px; color: var(--cc-muted); margin-top: 2px;
}
#cc-app[data-view="land"] .cc-land-awbs {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--cc-text);
}
#cc-app[data-view="land"] .cc-land-awbs-count {
  font-size: 10.5px; color: var(--cc-muted); margin-top: 2px;
}
#cc-app[data-view="land"] .cc-land-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600;
}
#cc-app[data-view="land"] .cc-land-unknown {
  display: inline-block;
  background: rgba(220,38,38,0.08);
  border: 1px dashed rgba(220,38,38,0.5);
  color: #b91c1c;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 5px;
  font-style: italic;
}

/* Status pills inside the table */
#cc-app[data-view="land"] .cc-land-status {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 5px;
  white-space: nowrap;
}
#cc-app[data-view="land"] .cc-land-status-confirmed { background: rgba(22,163,74,0.12);  color: #15803d; }
#cc-app[data-view="land"] .cc-land-status-pending   { background: rgba(217,119,6,0.12);  color: #b45309; }
#cc-app[data-view="land"] .cc-land-status-booked    { background: rgba(14,165,233,0.12); color: #0369a1; }
#cc-app[data-view="land"] .cc-land-status-rolling   { background: rgba(124,58,237,0.12); color: #6d28d9; }
/* v0.8.1 — Card ac_s2_b — at-GHA status pills */
#cc-app[data-view="land"] .cc-land-status-on-slot   { background: rgba(22,163,74,0.12);  color: #15803d; }
#cc-app[data-view="land"] .cc-land-status-pressure  { background: rgba(217,119,6,0.18);  color: #b45309; }
#cc-app[data-view="land"] .cc-land-status-exception { background: rgba(220,38,38,0.18);  color: #b91c1c; }
#cc-app[data-view="land"] .cc-land-status-exception::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #dc2626; margin-right: 6px; vertical-align: middle;
  animation: cc-land-pulse 1.2s ease-in-out infinite;
}
@keyframes cc-land-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

/* v0.8.1 — Live time cells (dwell, cut-off countdown) with severity tinting */
#cc-app[data-view="land"] .cc-land-livetime {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 5px;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease;
}
#cc-app[data-view="land"] .cc-land-livetime-good { color: #15803d; background: rgba(22,163,74,0.08); }
#cc-app[data-view="land"] .cc-land-livetime-warn { color: #b45309; background: rgba(217,119,6,0.12); }
#cc-app[data-view="land"] .cc-land-livetime-bad  { color: #b91c1c; background: rgba(220,38,38,0.14); font-weight: 800; }

/* Row-level exception highlight — subtle left border accent */
#cc-app[data-view="land"] .cc-land-row-exception td:first-child {
  box-shadow: inset 3px 0 0 #dc2626;
}
#cc-app[data-view="land"] .cc-land-row-pressure td:first-child {
  box-shadow: inset 3px 0 0 #d97706;
}

#cc-app[data-view="land"] .cc-land-section-footer {
  padding: 10px 20px;
  background: var(--cc-bg);
  border-top: 1px solid var(--cc-line-2);
  font-size: 10.5px; color: var(--cc-muted); font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   v0.8.2 — Card ac_s2_c — Exception Escalation Flow (the headline)
   ───────────────────────────────────────────────────────────────── */
#cc-app[data-view="land"] .cc-excflow-controls {
  display: flex; gap: 8px; align-items: center;
}
#cc-app[data-view="land"] .cc-excflow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: #0f172a; color: #fff;
  border: 1px solid #0f172a; border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, transform 100ms ease, opacity 150ms ease;
}
#cc-app[data-view="land"] .cc-excflow-btn:hover:not(:disabled) { background: #1e293b; }
#cc-app[data-view="land"] .cc-excflow-btn:active:not(:disabled) { transform: translateY(1px); }
#cc-app[data-view="land"] .cc-excflow-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#cc-app[data-view="land"] .cc-excflow-btn-secondary {
  background: #fff; color: #0f172a; border-color: #cbd5e1;
}
#cc-app[data-view="land"] .cc-excflow-btn-secondary:hover:not(:disabled) { background: #f1f5f9; }

#cc-app[data-view="land"] .cc-excflow-summary {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  padding: 16px 20px 4px;
}
#cc-app[data-view="land"] .cc-excflow-summary-card {
  padding: 14px 16px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #f8fafc;
}
#cc-app[data-view="land"] .cc-excflow-summary-bad  { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.25); }
#cc-app[data-view="land"] .cc-excflow-summary-good { background: rgba(22,163,74,0.05); border-color: rgba(22,163,74,0.25); }
#cc-app[data-view="land"] .cc-excflow-summary-delta {
  background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(124,58,237,0.06));
  border-color: rgba(14,165,233,0.30);
}
#cc-app[data-view="land"] .cc-excflow-summary-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #64748b; margin-bottom: 6px;
}
#cc-app[data-view="land"] .cc-excflow-summary-value {
  font-size: 26px; font-weight: 800; line-height: 1.1;
  color: #0f172a; font-variant-numeric: tabular-nums;
}
#cc-app[data-view="land"] .cc-excflow-summary-bad   .cc-excflow-summary-value { color: #b91c1c; }
#cc-app[data-view="land"] .cc-excflow-summary-good  .cc-excflow-summary-value { color: #15803d; }
#cc-app[data-view="land"] .cc-excflow-summary-delta .cc-excflow-summary-value { color: #0369a1; }
#cc-app[data-view="land"] .cc-excflow-summary-sub { margin-top: 6px; font-size: 12px; color: #475569; }

#cc-app[data-view="land"] .cc-excflow-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px 20px;
}
@media (max-width: 900px) {
  #cc-app[data-view="land"] .cc-excflow-summary,
  #cc-app[data-view="land"] .cc-excflow-grid { grid-template-columns: 1fr; }
}
#cc-app[data-view="land"] .cc-excflow-col {
  border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; overflow: hidden;
}
#cc-app[data-view="land"] .cc-excflow-col-without { border-color: rgba(220,38,38,0.25); }
#cc-app[data-view="land"] .cc-excflow-col-with    { border-color: rgba(22,163,74,0.30); }
#cc-app[data-view="land"] .cc-excflow-col-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-size: 14px; font-weight: 700;
  border-bottom: 1px solid #e2e8f0; background: #f8fafc;
}
#cc-app[data-view="land"] .cc-excflow-col-without .cc-excflow-col-header {
  background: rgba(220,38,38,0.06); border-bottom-color: rgba(220,38,38,0.25); color: #b91c1c;
}
#cc-app[data-view="land"] .cc-excflow-col-with .cc-excflow-col-header {
  background: rgba(22,163,74,0.06); border-bottom-color: rgba(22,163,74,0.30); color: #15803d;
}
#cc-app[data-view="land"] .cc-excflow-col-icon { font-size: 16px; }

#cc-app[data-view="land"] .cc-excflow-steps {
  list-style: none; margin: 0; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
  counter-reset: cc-excflow-step;
}
#cc-app[data-view="land"] .cc-excflow-step {
  position: relative;
  display: grid; grid-template-columns: 80px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 10px 12px 10px 36px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; color: #64748b;
  counter-increment: cc-excflow-step;
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease, transform 200ms ease;
}
#cc-app[data-view="land"] .cc-excflow-step::before {
  content: counter(cc-excflow-step);
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #475569; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  transition: background 250ms ease, color 250ms ease;
}
#cc-app[data-view="land"] .cc-excflow-step-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #94a3b8;
}
#cc-app[data-view="land"] .cc-excflow-step-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 1px 5px; border-radius: 3px;
  background: rgba(15,23,42,0.06); color: #0f172a;
}
#cc-app[data-view="land"] .cc-excflow-step.is-active {
  background: #fff; border-color: #0ea5e9; color: #0f172a;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
  transform: translateX(2px);
}
#cc-app[data-view="land"] .cc-excflow-step.is-active::before {
  background: #0ea5e9; color: #fff;
  animation: cc-excflow-pulse 1.2s ease-in-out infinite;
}
#cc-app[data-view="land"] .cc-excflow-step.is-active .cc-excflow-step-time { color: #0369a1; }
@keyframes cc-excflow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.5); }
  50%     { box-shadow: 0 0 0 6px rgba(14,165,233,0); }
}
#cc-app[data-view="land"] .cc-excflow-col-without .cc-excflow-step.is-done {
  background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,0.20); color: #475569;
}
#cc-app[data-view="land"] .cc-excflow-col-without .cc-excflow-step.is-done::before {
  content: '✓'; background: #b91c1c; color: #fff;
}
#cc-app[data-view="land"] .cc-excflow-col-with .cc-excflow-step.is-done {
  background: rgba(22,163,74,0.04); border-color: rgba(22,163,74,0.20); color: #475569;
}
#cc-app[data-view="land"] .cc-excflow-col-with .cc-excflow-step.is-done::before {
  content: '✓'; background: #15803d; color: #fff;
}
#cc-app[data-view="land"] .cc-excflow-step.is-done .cc-excflow-step-time { color: #94a3b8; }

/* ─────────────────────────────────────────────────────────────────
   v0.9.0 — Master shell (nav · version chip · dual clocks)
   ───────────────────────────────────────────────────────────────── */
#cc-app.cc-shell { display: flex; flex-direction: column; gap: 0; }

#cc-app .cc-shell-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#cc-app .cc-shell-brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 12px;
  border-right: 1px solid #e2e8f0;
}
#cc-app .cc-shell-brand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
}
#cc-app .cc-shell-brand-icon svg { width: 36px; height: 36px; display: block; }
#cc-app .cc-shell-brand-name { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.1; }
#cc-app .cc-shell-brand-tag  { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
                               color: #94a3b8; margin-top: 2px; }

#cc-app .cc-shell-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  flex: 1 1 auto;
}
#cc-app .cc-shell-nav-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: transparent;
  color: #475569;
  border: none; border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
#cc-app .cc-shell-nav-btn:hover { background: #f1f5f9; color: #0f172a; }
#cc-app .cc-shell-nav-btn.is-active {
  background: #f1f5f9; color: #0f172a;
  box-shadow: inset 0 -2px 0 #0ea5e9;
}
#cc-app .cc-shell-nav-btn.is-pending { color: #94a3b8; }
#cc-app .cc-shell-nav-soon {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 5px; border-radius: 4px;
  background: #fef3c7; color: #92400e;
}

#cc-app .cc-shell-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#cc-app .cc-shell-sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: #6d28d9;
}
#cc-app .cc-shell-sync-icon { font-size: 12px; }
#cc-app .cc-shell-sync-status { color: #94a3b8; font-weight: 500; }
#cc-app .cc-shell-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  padding: 4px 8px;
  background: #0f172a; color: #fff;
  border-radius: 5px;
  letter-spacing: 0.04em;
}
#cc-app .cc-shell-clock-group { display: flex; gap: 8px; }
#cc-app .cc-shell-clock {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f8fafc;
  font-size: 11.5px;
}
#cc-app .cc-shell-clock-sim  { border-color: rgba(14,165,233,0.30); background: rgba(14,165,233,0.05); }
#cc-app .cc-shell-clock-real { border-color: rgba(22,163,74,0.30);  background: rgba(22,163,74,0.05);  }
#cc-app .cc-shell-clock-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  color: #64748b;
}
#cc-app .cc-shell-clock-sim  .cc-shell-clock-label { color: #0369a1; }
#cc-app .cc-shell-clock-real .cc-shell-clock-label { color: #15803d; }
#cc-app .cc-shell-clock-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-shell-clock-controls { display: inline-flex; gap: 3px; margin-left: 4px; }
#cc-app .cc-shell-clock-controls button {
  border: 1px solid #cbd5e1; background: #fff; color: #475569;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  cursor: pointer; line-height: 1;
  transition: background 100ms ease, color 100ms ease;
}
#cc-app .cc-shell-clock-controls button:hover { background: #f1f5f9; color: #0f172a; }
#cc-app .cc-shell-clock-controls button.is-paused { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* ── Pane visibility ───────────────────────────────────────────── */
#cc-app .cc-shell-panes { position: relative; }
#cc-app .cc-shell-pane-host { display: none; }
#cc-app .cc-shell-pane-host.is-active { display: block; }

/* Stub renderer for pending views */
#cc-app .cc-shell-stub {
  text-align: center;
  padding: 80px 24px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
}
#cc-app .cc-shell-stub-icon { font-size: 48px; margin-bottom: 12px; }
#cc-app .cc-shell-stub-title { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
#cc-app .cc-shell-stub-msg   { font-size: 14px; font-weight: 600; color: #64748b; margin-bottom: 12px; }
#cc-app .cc-shell-stub-hint  { font-size: 12px; color: #94a3b8; max-width: 480px; margin: 0 auto; font-style: italic; }

@media (max-width: 1100px) {
  #cc-app .cc-shell-meta { width: 100%; justify-content: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────
   v0.9.2 — Card ac_vl_a — Value Leakage view
   ───────────────────────────────────────────────────────────────── */
#cc-app[data-view="vl"] .cc-vl-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  #cc-app[data-view="vl"] .cc-vl-controls { grid-template-columns: 1fr; }
}
#cc-app[data-view="vl"] .cc-vl-control-group { display: flex; flex-direction: column; gap: 6px; }
#cc-app[data-view="vl"] .cc-vl-control-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #64748b;
}
#cc-app[data-view="vl"] .cc-vl-control-hint {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: #94a3b8; font-size: 10.5px; margin-left: 4px;
}
#cc-app[data-view="vl"] .cc-vl-toggle-grp {
  display: inline-flex; gap: 0;
  border: 1px solid #cbd5e1; border-radius: 7px;
  overflow: hidden; background: #f8fafc;
  width: max-content;
}
#cc-app[data-view="vl"] .cc-vl-toggle {
  padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  background: transparent; color: #64748b;
  border: none; cursor: pointer;
  border-right: 1px solid #cbd5e1;
  transition: background 120ms ease, color 120ms ease;
}
#cc-app[data-view="vl"] .cc-vl-toggle:last-child { border-right: none; }
#cc-app[data-view="vl"] .cc-vl-toggle:hover { background: rgba(14,165,233,0.08); color: #0f172a; }
#cc-app[data-view="vl"] .cc-vl-toggle.is-active {
  background: #0ea5e9; color: #fff;
}

/* Summary KPI tiles */
#cc-app[data-view="vl"] .cc-vl-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  #cc-app[data-view="vl"] .cc-vl-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #cc-app[data-view="vl"] .cc-vl-summary { grid-template-columns: 1fr; }
}
#cc-app[data-view="vl"] .cc-vl-kpi {
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
#cc-app[data-view="vl"] .cc-vl-kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
}
#cc-app[data-view="vl"] .cc-vl-kpi-leakage::before   { background: #dc2626; }
#cc-app[data-view="vl"] .cc-vl-kpi-recovered::before { background: #15803d; }
#cc-app[data-view="vl"] .cc-vl-kpi-residual::before  { background: #d97706; }
#cc-app[data-view="vl"] .cc-vl-kpi-delta::before     { background: linear-gradient(180deg,#0ea5e9,#7c3aed); }
#cc-app[data-view="vl"] .cc-vl-kpi-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #64748b; margin-bottom: 6px;
}
#cc-app[data-view="vl"] .cc-vl-kpi-value {
  font-size: 28px; font-weight: 800; line-height: 1.1;
  color: #0f172a; font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}
#cc-app[data-view="vl"] .cc-vl-kpi-leakage   .cc-vl-kpi-value { color: #b91c1c; }
#cc-app[data-view="vl"] .cc-vl-kpi-recovered .cc-vl-kpi-value { color: #15803d; }
#cc-app[data-view="vl"] .cc-vl-kpi-residual  .cc-vl-kpi-value { color: #b45309; }
#cc-app[data-view="vl"] .cc-vl-kpi-delta     .cc-vl-kpi-value { color: #0369a1; }
#cc-app[data-view="vl"] .cc-vl-kpi-sub {
  margin-top: 6px; font-size: 11.5px; color: #64748b; line-height: 1.35;
}

/* Section + table */
#cc-app[data-view="vl"] .cc-vl-section {
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  overflow: hidden;
}
#cc-app[data-view="vl"] .cc-vl-section-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
#cc-app[data-view="vl"] .cc-vl-section-title {
  font-size: 15px; font-weight: 700; color: #0f172a;
}
#cc-app[data-view="vl"] .cc-vl-section-sub {
  margin-top: 4px; font-size: 12px; color: #64748b;
}
#cc-app[data-view="vl"] .cc-vl-table-wrap { padding: 6px 8px; }
#cc-app[data-view="vl"] .cc-vl-table {
  width: 100%; border-collapse: collapse;
}
#cc-app[data-view="vl"] .cc-vl-table th,
#cc-app[data-view="vl"] .cc-vl-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 12.5px;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app[data-view="vl"] .cc-vl-table th {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #64748b;
  background: #f8fafc;
}
#cc-app[data-view="vl"] .cc-vl-table .cc-vl-num { text-align: right; font-variant-numeric: tabular-nums; }
#cc-app[data-view="vl"] .cc-vl-table tr:hover td { background: #f8fafc; }

#cc-app[data-view="vl"] .cc-vl-uc-name { font-weight: 700; color: #0f172a; }
#cc-app[data-view="vl"] .cc-vl-uc-desc { font-size: 11px; color: #64748b; margin-top: 2px; }

#cc-app[data-view="vl"] .cc-vl-bar {
  position: relative; width: 100%; max-width: 240px;
  height: 18px; border-radius: 4px;
  background: #f1f5f9; overflow: hidden;
}
#cc-app[data-view="vl"] .cc-vl-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, #0ea5e9, #15803d);
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
#cc-app[data-view="vl"] .cc-vl-bar-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #0f172a; text-shadow: 0 0 2px rgba(255,255,255,0.8);
  font-variant-numeric: tabular-nums;
}

#cc-app[data-view="vl"] .cc-vl-recovered { color: #15803d; font-weight: 700; }
#cc-app[data-view="vl"] .cc-vl-residual   { color: #b45309; font-weight: 600; }

/* ─── v0.9.3 — Viewpoint selector (FF · Land  /  Airline Cargo Division) ── */
#cc-app[data-view="vl"] .cc-vl-viewpoint {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  margin-bottom: 14px;
}
#cc-app[data-view="vl"] .cc-vl-viewpoint-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b;
}
#cc-app[data-view="vl"] .cc-vl-vp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
#cc-app[data-view="vl"] .cc-vl-vp-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  background: #f8fafc; cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}
#cc-app[data-view="vl"] .cc-vl-vp-tab:hover { background: #f1f5f9; }
#cc-app[data-view="vl"] .cc-vl-vp-tab.is-active {
  background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(124,58,237,0.08));
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
}
#cc-app[data-view="vl"] .cc-vl-vp-icon { font-size: 22px; line-height: 1; }
#cc-app[data-view="vl"] .cc-vl-vp-name {
  font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.1;
}
#cc-app[data-view="vl"] .cc-vl-vp-sub {
  font-size: 11px; color: #64748b; margin-top: 2px;
}
#cc-app[data-view="vl"] .cc-vl-vp-tab > div,
#cc-app[data-view="vl"] .cc-vl-vp-tab > span:nth-child(n+2) { display: block; }

/* ─── Use case card grid (mirrors ConnectedFleet v1.5.4 aesthetic) ─── */
#cc-app[data-view="vl"] .cc-vl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}
#cc-app[data-view="vl"] .cc-vl-card {
  position: relative;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
#cc-app[data-view="vl"] .cc-vl-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
  border-color: #cbd5e1;
}
#cc-app[data-view="vl"] .cc-vl-card-head {
  display: flex; align-items: flex-start; gap: 10px;
}
#cc-app[data-view="vl"] .cc-vl-card-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  background: rgba(14,165,233,0.10);
  color: #0369a1;
}
#cc-app[data-view="vl"] .cc-vl-card-title {
  flex: 1 1 auto;
  font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.25;
}
#cc-app[data-view="vl"] .cc-vl-card-info {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #e2e8f0; color: #64748b;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
}
#cc-app[data-view="vl"] .cc-vl-card-info[title]:hover { background: #0ea5e9; color: #fff; }
#cc-app[data-view="vl"] .cc-vl-card-value {
  font-size: 26px; font-weight: 800; color: #0f172a;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
#cc-app[data-view="vl"] .cc-vl-card-value .cc-vl-card-value-suffix {
  font-size: 13px; font-weight: 700; color: #94a3b8; margin-left: 2px;
}
#cc-app[data-view="vl"] .cc-vl-card-sub {
  font-size: 11.5px; color: #64748b; line-height: 1.35;
  min-height: 2.7em;
}
#cc-app[data-view="vl"] .cc-vl-card-barwrap {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
}
#cc-app[data-view="vl"] .cc-vl-card-bar {
  flex: 1 1 auto;
  height: 5px;
  background: #f1f5f9; border-radius: 99px; overflow: hidden;
  position: relative;
}
#cc-app[data-view="vl"] .cc-vl-card-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 99px;
  transition: width 500ms cubic-bezier(0.4,0,0.2,1);
}
#cc-app[data-view="vl"] .cc-vl-card-vslargest {
  font-size: 10.5px; font-weight: 700; color: #64748b;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="vl"] .cc-vl-card-vslargest-label {
  font-weight: 500; color: #94a3b8;
}

/* Use-case colour assignments — one per key, used by the icon chip + bar */
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="blue"]   .cc-vl-card-icon { background: rgba(14,165,233,0.10);   color: #0369a1; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="blue"]   .cc-vl-card-bar-fill { background: #0ea5e9; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="violet"] .cc-vl-card-icon { background: rgba(124,58,237,0.10);   color: #6d28d9; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="violet"] .cc-vl-card-bar-fill { background: #7c3aed; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="amber"]  .cc-vl-card-icon { background: rgba(217,119,6,0.12);    color: #b45309; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="amber"]  .cc-vl-card-bar-fill { background: #f59e0b; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="sky"]    .cc-vl-card-icon { background: rgba(2,132,199,0.10);    color: #0369a1; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="sky"]    .cc-vl-card-bar-fill { background: #0284c7; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="emerald"].cc-vl-card-icon { background: rgba(16,185,129,0.10);   color: #047857; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="emerald"].cc-vl-card-bar-fill { background: #10b981; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="pink"]   .cc-vl-card-icon { background: rgba(236,72,153,0.10);   color: #be185d; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="pink"]   .cc-vl-card-bar-fill { background: #ec4899; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="green"]  .cc-vl-card-icon { background: rgba(34,197,94,0.10);    color: #15803d; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="green"]  .cc-vl-card-bar-fill { background: #22c55e; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="indigo"] .cc-vl-card-icon { background: rgba(99,102,241,0.10);   color: #4338ca; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="indigo"] .cc-vl-card-bar-fill { background: #6366f1; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="red"]    .cc-vl-card-icon { background: rgba(220,38,38,0.10);    color: #b91c1c; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="red"]    .cc-vl-card-bar-fill { background: #ef4444; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="teal"]   .cc-vl-card-icon { background: rgba(20,184,166,0.10);   color: #0f766e; }
#cc-app[data-view="vl"] .cc-vl-card[data-cc-color="teal"]   .cc-vl-card-bar-fill { background: #14b8a6; }

/* ─── v0.9.5 / v0.9.6 — Sprint Sim: moving trucks on the Control Tower map ─── */
#cc-app .cc-standin-truck-icon {
  background: transparent !important;
  border: none !important;
  display: flex; align-items: center; justify-content: center;
}
#cc-app .cc-standin-truck {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  filter: drop-shadow(0 1px 2px rgba(15,23,42,0.35));
  transition: color 200ms ease;
}
/* v0.9.6 — Four status colors matching the Live Fleet legend */
#cc-app .cc-standin-truck-ontime  { color: #15803d; }
#cc-app .cc-standin-truck-atrisk  { color: #d97706; }
#cc-app .cc-standin-truck-late    { color: #dc2626; }
#cc-app .cc-standin-truck-loading { color: #0ea5e9; }
#cc-app .cc-standin-truck-loading,
#cc-app .cc-standin-truck-late {
  animation: cc-standin-truck-pulse 1.6s ease-in-out infinite;
}
@keyframes cc-standin-truck-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.85; }
}
/* v1.0.c.14.1 / .14.2 — Dark trucks: LSP has no IoT telematics, so no live
   feed. Rendered as a prominent blind-spot ALERT (pulsing amber dashed ring
   + warning badge) rather than a faded marker — a control tower wants its
   blind spots to stand out, not recede. */
#cc-app .cc-standin-truck-darkwrap {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
#cc-app .cc-standin-truck-darkring {
  position: absolute; inset: 0;
  border: 2px dashed #f59e0b;
  border-radius: 50%;
  animation: cc-standin-truck-darkpulse 1.8s ease-in-out infinite;
}
@keyframes cc-standin-truck-darkpulse {
  0%, 100% { opacity: 0.85; transform: scale(1);    }
  50%      { opacity: 0.30; transform: scale(1.18); }
}
#cc-app .cc-standin-truck-dark {
  color: #475569;
  opacity: 0.9;
  filter: grayscale(1) drop-shadow(0 1px 2px rgba(15,23,42,0.35));
  animation: none;
}
#cc-app .cc-standin-truck-darkbadge {
  position: absolute; top: -7px; right: -7px;
  font-size: 11px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(15,23,42,0.4));
}
#cc-app .leaflet-popup-content .cc-mappop-dark {
  color: #b45309;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ─── v0.9.6 — Live Fleet overlay + legend on top of the map ─── */
#cc-app[data-view="control-tower"] .cc-card-map .cc-card-body {
  position: relative; /* needed so absolute overlays anchor to map card body */
}
#cc-app .cc-map-overlay {
  position: absolute;
  z-index: 600; /* above Leaflet panes (default 400) */
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.10);
  padding: 8px 12px;
  font-size: 12px; color: #0f172a;
  pointer-events: auto;
}
#cc-app .cc-map-overlay-fleet {
  top: 12px; left: 60px;
  min-width: 320px;
}
#cc-app .cc-map-overlay-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #475569;
  margin-bottom: 4px;
}
#cc-app .cc-map-overlay-counts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: #0f172a;
}
#cc-app .cc-fleet-count { font-variant-numeric: tabular-nums; }
#cc-app .cc-fleet-sep   { color: #cbd5e1; font-weight: 400; }
#cc-app .cc-fleet-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 2px; vertical-align: middle;
}
#cc-app .cc-fleet-dot-hub     { background: #0f172a; }
#cc-app .cc-fleet-dot-ontime  { background: #15803d; }
#cc-app .cc-fleet-dot-atrisk  { background: #d97706; }
#cc-app .cc-fleet-dot-late    { background: #dc2626; }
#cc-app .cc-fleet-dot-loading { background: #0ea5e9; }
#cc-app .cc-fleet-dot-dark    { background: #94a3b8; outline: 1px dashed rgba(100,116,139,0.8); outline-offset: 1px; } /* v1.0.c.14.1 */

/* v0.9.7 — Land hub legend markers (square, to mirror the map icon) */
#cc-app .cc-fleet-mark {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 2px; vertical-align: middle;
  border: 1.5px solid #fff;
}
#cc-app .cc-fleet-mark-hub-ff { background: #475569; box-shadow: 0 0 0 1px rgba(15,23,42,0.4); }
#cc-app .cc-fleet-mark-hub-3p { background: #94a3b8; box-shadow: 0 0 0 1px rgba(15,23,42,0.4); }

/* v0.9.8 — Land hub markers: bigger, labeled, far more visible */
#cc-app .cc-sim-hub-icon {
  background: transparent !important;
  border: none !important;
}
#cc-app .cc-sim-hub {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.65), 0 2px 4px rgba(15,23,42,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0; line-height: 1;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
#cc-app .cc-sim-hub:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.5), 0 3px 6px rgba(15,23,42,0.45);
}
#cc-app .cc-sim-hub-ff_hub { background: #1e293b; }
#cc-app .cc-sim-hub-3p_hub { background: #64748b; }

/* Sim Config panel — sections + region chips + switch */
#cc-app .cc-sim-cfg-sect {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #94a3b8;
  margin: 10px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app .cc-sim-cfg-sect:first-child { margin-top: 0; }

#cc-app .cc-sim-cfg-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
#cc-app .cc-sim-cfg-chip {
  padding: 5px 10px;
  font-size: 11.5px; font-weight: 600;
  color: #475569; background: #f8fafc;
  border: 1px solid #cbd5e1; border-radius: 5px;
  cursor: pointer; line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#cc-app .cc-sim-cfg-chip:hover { background: #f1f5f9; color: #0f172a; }
#cc-app .cc-sim-cfg-chip.is-active {
  background: #0ea5e9; color: #fff; border-color: #0ea5e9;
}

#cc-app .cc-sim-cfg-switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
#cc-app .cc-sim-cfg-switch input { display: none; }
#cc-app .cc-sim-cfg-switch-slider {
  position: relative;
  width: 32px; height: 18px;
  background: #cbd5e1; border-radius: 99px;
  transition: background 150ms ease;
}
#cc-app .cc-sim-cfg-switch-slider::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15,23,42,0.25);
  transition: transform 150ms ease;
}
#cc-app .cc-sim-cfg-switch input:checked + .cc-sim-cfg-switch-slider {
  background: #0ea5e9;
}
#cc-app .cc-sim-cfg-switch input:checked + .cc-sim-cfg-switch-slider::after {
  transform: translateX(14px);
}
#cc-app .cc-sim-cfg-switch-label {
  font-size: 12px; font-weight: 600; color: #0f172a;
}

/* v0.9.14 — Actor profile rows */
#cc-app .cc-sim-cfg-actor {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app .cc-sim-cfg-actor:last-of-type { border-bottom: none; }
#cc-app .cc-sim-cfg-actor-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
}
#cc-app .cc-sim-cfg-actor-icon { font-size: 14px; }
#cc-app .cc-sim-cfg-actor-name {
  flex: 1 1 auto;
  font-size: 12.5px; font-weight: 700; color: #0f172a;
}
#cc-app .cc-sim-cfg-actor-avail {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #475569;
  cursor: pointer; user-select: none;
}
#cc-app .cc-sim-cfg-actor-avail input { margin: 0; accent-color: #0ea5e9; }
#cc-app .cc-sim-cfg-actor-row2 {
  display: flex; align-items: center; gap: 8px;
}
#cc-app .cc-sim-cfg-actor-speed { flex: 1 1 auto; }
#cc-app .cc-sim-cfg-actor-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #0369a1;
  font-variant-numeric: tabular-nums;
  min-width: 56px; text-align: right;
}

/* When the available checkbox is off, dim the speed control */
#cc-app .cc-sim-cfg-actor input[type="checkbox"]:not(:checked) ~ .cc-sim-cfg-actor-row2,
#cc-app .cc-sim-cfg-actor:has(input[type="checkbox"]:not(:checked)) .cc-sim-cfg-actor-row2 {
  opacity: 0.4;
  pointer-events: none;
}

/* Empty state when all manual resolvers disabled */
/* Exception Catalog — origin/standard pills (Phase 0: server-authoritative, system-seeded vs custom) */
#cc-app .cc-exc-lock-pill, #cc-app .cc-exc-custom-pill, #cc-app .cc-exc-std-pill {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; white-space: nowrap; letter-spacing: .02em;
}
#cc-app .cc-exc-lock-pill { background: #64748b1a; color: #475569; border: 1px solid #64748b40; }
#cc-app .cc-exc-custom-pill { background: #2563eb1a; color: #2563eb; border: 1px solid #2563eb40; }
#cc-app .cc-exc-std-pill { background: #0e74901a; color: #0e7490; border: 1px solid #0e749040; font-weight: 600; }
/* Detection status pills (Phase 6.1 clarity) */
#cc-app .cc-exc-live-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; white-space: nowrap; background: #16a34a1a; color: #15803d; border: 1px solid #16a34a40; }
#cc-app .cc-exc-idle-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; white-space: nowrap; background: #f59e0b1a; color: #b45309; border: 1px solid #f59e0b40; }
/* Locked-baseline banner + de-emphasised synthetic-injector disclosure */
#cc-app .cc-exc-locked-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 9px 12px; font-size: 12.5px; color: var(--cc-text); background: #64748b12; border: 1px solid var(--cc-line); border-radius: 10px; }
#cc-app .cc-exc-inline-clone { margin-left: auto; }
#cc-app .cc-exc-injector { opacity: .82; }
#cc-app .cc-exc-injector > summary { color: var(--cc-muted); }
#cc-app .cc-exc-injector[open] { opacity: 1; }
/* Detection-rule editor + dry-run (Phase 6) */
#cc-app .cc-exc-rule { border: 1px solid color-mix(in srgb, #2563eb 25%, transparent); border-radius: 10px; background: #2563eb08; }
/* Signal-kind chip multi-select (replaces the broken comma+datalist input) */
#cc-app .cc-exc-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--cc-border, #e2e8f0); border-radius: 8px; background: var(--cc-surface, #fff); min-height: 40px; }
#cc-app .cc-exc-kind-chip { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; padding: 3px 6px 3px 9px; border-radius: 14px; background: #2563eb14; color: #1d4ed8; border: 1px solid #2563eb33; white-space: nowrap; }
#cc-app .cc-exc-kind-x { border: none; background: transparent; color: #1d4ed8; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 50%; }
#cc-app .cc-exc-kind-x:hover { background: #2563eb26; color: #b91c1c; }
#cc-app .cc-exc-kind-add { width: auto; min-width: 200px; flex: 0 0 auto; }
#cc-app .cc-exc-locked-ro { padding: 8px 10px; border: 1px dashed var(--cc-border, #e2e8f0); border-radius: 8px; background: var(--cc-surface-2, #f8fafc); font-size: 13px; }
#cc-app .cc-exc-locked-ro .cc-exc-kind-chip { padding: 2px 8px; }
#cc-app .cc-exc-locked-ro code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #2563eb14; padding: 1px 5px; border-radius: 4px; }
#cc-app .cc-exc-dryrun { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cc-app .cc-exc-dryrun-result { font-size: 12px; color: var(--cc-text); }
#cc-app .cc-exc-dryrun-result .sub { color: var(--cc-muted); }
#cc-app .cc-exc-no-resolvers {
  font-size: 11px; font-style: italic;
  color: #94a3b8;
  padding: 6px 8px;
  background: #f8fafc;
  border-radius: 4px;
}
/* Server-backed resolution chooser (the "solutions the user chooses" menu) */
#cc-app .cc-exc-pb { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
#cc-app .cc-exc-resolve-menu { margin-top: 8px; padding: 8px; border: 1px solid #e0e7ff; border-radius: 8px; background: #f8faff; }
#cc-app .cc-exc-resolve-head { font-size: 11px; font-weight: 700; color: #3730a3; margin-bottom: 6px; }
#cc-app .cc-exc-resolve-opts { display: flex; flex-wrap: wrap; gap: 6px; }
#cc-app .cc-exc-resolve-opt { font-size: 11px; font-weight: 600; padding: 4px 10px; border: 1px solid #a5b4fc; border-radius: 14px; background: #fff; color: #4338ca; cursor: pointer; }
#cc-app .cc-exc-resolve-opt:hover { background: #4338ca; color: #fff; }
#cc-app .cc-exc-resolve-opt:disabled { opacity: .5; cursor: default; }
#cc-app .cc-exc-resolve-preview { margin-top: 6px; font-size: 11px; color: #475569; }
#cc-app .cc-exc-resolve-preview ul { margin: 3px 0 0; padding-left: 16px; }
#cc-app .cc-exc-resolve-preview .cc-exc-cmd { color: #0e7490; font-family: ui-monospace, Menlo, monospace; }
#cc-app .cc-exc-resolve-preview .cc-exc-manual { color: #94a3b8; font-style: italic; }
#cc-app .cc-exc-resolve-status { font-size: 11px; margin-top: 6px; min-height: 14px; }
#cc-app .cc-exc-resolve-status .cc-ok { color: #15803d; font-weight: 700; }
#cc-app .cc-exc-resolve-status .cc-warn, #cc-app .cc-exc-resolve-status.cc-warn { color: #b45309; }
/* Generic Exception-Coordination board */
#cc-app .cc-coord-case { border: 1px solid var(--cc-border, #e2e8f0); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--cc-surface, #fff); }
#cc-app .cc-coord-head { font-size: 13px; margin-bottom: 6px; }
#cc-app .cc-coord-head .sub { color: var(--cc-muted, #64748b); font-weight: 400; font-size: 11px; }
#cc-app .cc-coord-tasks { list-style: none; margin: 0; padding: 0; }
#cc-app .cc-coord-task { font-size: 12px; padding: 3px 0; border-top: 1px dashed #eef2f7; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#cc-app .cc-coord-task .cc-exc-cmd { color: #0e7490; font-family: ui-monospace, Menlo, monospace; }
#cc-app .cc-coord-st { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: #f1f5f9; color: #475569; }
#cc-app .cc-coord-ok .cc-coord-st { background: #dcfce7; color: #15803d; }
#cc-app .cc-coord-warn .cc-coord-st { background: #fef3c7; color: #b45309; }
/* PRIME™ · Fleet Health & RUL */
#cc-app .cc-prime-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
#cc-app .cc-prime-model { margin-bottom: 8px; }
#cc-app .cc-prime-scan { white-space: nowrap; }
#cc-app .cc-prime-list { display: flex; flex-direction: column; gap: 6px; }
#cc-app .cc-prime-row { border: 1px solid var(--cc-border, #e2e8f0); border-left-width: 4px; border-radius: 8px; padding: 6px 10px; background: var(--cc-surface, #fff); }
#cc-app .cc-prime-crit { border-left-color: #dc2626; }
#cc-app .cc-prime-warn { border-left-color: #f59e0b; }
#cc-app .cc-prime-watch { border-left-color: #eab308; }
#cc-app .cc-prime-ok  { border-left-color: #16a34a; }
#cc-app .cc-prime-uld { display: flex; align-items: baseline; gap: 6px; }
#cc-app .cc-prime-score { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font-weight: 800; font-size: 12px; background: #7c3aed14; color: #6d28d9; }
#cc-app .cc-prime-crit .cc-prime-score { background: #dc262618; color: #b91c1c; }
#cc-app .cc-prime-warn .cc-prime-score { background: #f59e0b1a; color: #b45309; }
#cc-app .cc-prime-metrics { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; margin-top: 3px; }
#cc-app .cc-prime-metrics .cc-prime-risk { color: #b45309; font-weight: 700; }
#cc-app .cc-prime-band { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 10px; }
#cc-app .cc-prime-band-crit { background: #fee2e2; color: #b91c1c; }
#cc-app .cc-prime-band-warn { background: #fef3c7; color: #b45309; }
#cc-app .cc-prime-band-watch { background: #fef9c3; color: #a16207; }
#cc-app .cc-prime-band-ok { background: #dcfce7; color: #15803d; }
#cc-app .cc-prime-reason { margin-top: 2px; }
#cc-app .cc-prime-promoted { color: #6d28d9; font-weight: 700; }
/* Airline-authored resolution-playbook editor */
#cc-app .cc-exc-pb { border: 1px solid color-mix(in srgb, #16a34a 22%, transparent); border-radius: 10px; background: #16a34a08; }
#cc-app .cc-pb-tier { border: 1px solid var(--cc-border, #e2e8f0); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: var(--cc-surface, #fff); }
#cc-app .cc-pb-tier-head { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 6px; }
#cc-app .cc-pb-tier-head label { display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-pb-tier-rm { flex: 0 0 auto; }
#cc-app .cc-pb-tier-ro { padding: 4px 0; }
#cc-app .cc-pb-tier-ro ul, #cc-app .cc-pb-ro ul { margin: 2px 0 8px; padding-left: 16px; font-size: 12px; }
#cc-app .cc-exc-pb .cc-exc-cmd { color: #0e7490; font-family: ui-monospace, Menlo, monospace; }
#cc-app .cc-exc-pb .cc-exc-manual { color: #94a3b8; font-style: italic; }

#cc-app .cc-map-overlay-legend {
  bottom: 12px; left: 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; color: #475569;
}
#cc-app .cc-map-overlay-legend .cc-fleet-dot { margin-right: 4px; }

/* ─── v0.9.6 — Sim Config button + panel ─── */
#cc-app .cc-sim-cfg-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: #0f172a; color: #fff;
  border: none; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease;
}
#cc-app .cc-sim-cfg-btn:hover { background: #1e293b; }
#cc-app .cc-sim-cfg-btn[aria-pressed="true"] { background: #0ea5e9; }

/* v0.9.49 — Sim Config panel now lives at shell root + uses position:fixed
   so it overlays whatever view is active. Right-aligned drawer feel. */
#cc-app .cc-sim-cfg-panel {
  position: fixed;
  top: 70px; right: 18px; bottom: 18px;
  width: 380px; max-width: calc(100vw - 36px);
  z-index: 9500;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15,23,42,0.25);
  display: flex; flex-direction: column;
  animation: cc-sim-cfg-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes cc-sim-cfg-in {
  0%   { transform: translateY(-8px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
#cc-app .cc-sim-cfg-panel[hidden] { display: none; }
#cc-app .cc-sim-cfg-body {
  flex: 1;
  overflow-y: auto;
}
#cc-app .cc-sim-cfg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#cc-app .cc-sim-cfg-title { font-size: 13px; font-weight: 700; color: #0f172a; }
#cc-app .cc-sim-cfg-close {
  background: transparent; border: none;
  color: #64748b; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
#cc-app .cc-sim-cfg-close:hover { color: #0f172a; }
#cc-app .cc-sim-cfg-body { padding: 14px; }
#cc-app .cc-sim-cfg-row { margin-bottom: 14px; }
#cc-app .cc-sim-cfg-row:last-child { margin-bottom: 0; }
#cc-app .cc-sim-cfg-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 700; color: #0f172a;
  margin-bottom: 6px;
}
#cc-app .cc-sim-cfg-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; color: #0369a1;
}
#cc-app .cc-sim-cfg-hint {
  font-size: 11px; font-weight: 500; color: #94a3b8; font-style: italic;
}
#cc-app .cc-sim-cfg-hint-block {
  margin-top: 10px; padding: 8px; background: #f8fafc; border-radius: 6px;
  font-style: normal; color: #64748b;
}
#cc-app .cc-sim-cfg-hint-block code {
  background: rgba(15,23,42,0.06); padding: 1px 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app .cc-sim-cfg-slider { width: 100%; accent-color: #0ea5e9; }
#cc-app .cc-sim-cfg-tickrow {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #94a3b8; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-sim-cfg-segmented {
  display: inline-flex; width: 100%;
  border: 1px solid #cbd5e1; border-radius: 7px;
  overflow: hidden; background: #f8fafc;
}
#cc-app .cc-sim-cfg-seg {
  flex: 1 1 0;
  padding: 7px 0;
  font-size: 12px; font-weight: 600; color: #64748b;
  background: transparent; border: none;
  border-right: 1px solid #cbd5e1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#cc-app .cc-sim-cfg-seg:last-child { border-right: none; }
#cc-app .cc-sim-cfg-seg:hover { background: rgba(14,165,233,0.08); color: #0f172a; }
#cc-app .cc-sim-cfg-seg.is-active { background: #0ea5e9; color: #fff; }
#cc-app .cc-sim-cfg-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px;
  background: #f8fafc; border-top: 1px solid #e2e8f0;
}
#cc-app .cc-sim-cfg-action {
  padding: 7px 14px;
  font-size: 12px; font-weight: 600;
  border-radius: 6px; cursor: pointer;
  transition: background 120ms ease;
}
#cc-app .cc-sim-cfg-action-reset {
  background: transparent; color: #64748b; border: 1px solid #cbd5e1;
}
#cc-app .cc-sim-cfg-action-reset:hover { background: #f1f5f9; color: #0f172a; }
#cc-app .cc-sim-cfg-action-apply {
  background: #0ea5e9; color: #fff; border: 1px solid #0ea5e9;
}
#cc-app .cc-sim-cfg-action-apply:hover { background: #0284c7; }

/* ═══════════════════════════════════════════════════════════════════
   v0.9.11 — Trigger Scenario dropdown + live exception cards
   ═══════════════════════════════════════════════════════════════════ */

/* Trigger Scenario button in exception card header */
#cc-app .cc-trigger-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: #0f172a; color: #fff;
  border: none; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background 120ms ease;
}
#cc-app .cc-trigger-btn:hover { background: #1e293b; }
#cc-app .cc-trigger-btn[aria-expanded="true"] { background: #0ea5e9; }

/* Dropdown menu */
#cc-app .cc-trigger-menu {
  position: absolute; z-index: 9800;
  width: 380px; max-height: 70vh; overflow: auto;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.22);
}
#cc-app .cc-trigger-menu[hidden] { display: none; }
#cc-app .cc-trigger-section { border-bottom: 1px solid #f1f5f9; }
#cc-app .cc-trigger-section:last-child { border-bottom: none; }
#cc-app .cc-trigger-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app .cc-trigger-section-name {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #334155;
}
#cc-app .cc-trigger-section-hint {
  font-size: 10.5px; font-weight: 500; color: #94a3b8; font-style: italic;
}
#cc-app .cc-trigger-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #fff; border: none; border-left: 3px solid transparent;
  text-align: left; cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
#cc-app .cc-trigger-item:hover { background: #f8fafc; }
#cc-app .cc-trigger-item-amber:hover  { border-left-color: #d97706; }
#cc-app .cc-trigger-item-red:hover    { border-left-color: #dc2626; }
#cc-app .cc-trigger-item-sky:hover    { border-left-color: #0ea5e9; }
#cc-app .cc-trigger-item-violet:hover { border-left-color: #7c3aed; }
#cc-app .cc-trigger-item-icon {
  flex: 0 0 auto; width: 22px; font-size: 16px; line-height: 1.2;
}
#cc-app .cc-trigger-item-body { display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-trigger-item-title {
  font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.25;
}
#cc-app .cc-trigger-item-desc {
  font-size: 11.5px; color: #64748b; line-height: 1.3;
}

/* v0.9.15 — Exception panel scrollable cap so it never grows unbounded */
#cc-app .cc-card-exceptions .cc-card-body {
  max-height: 540px;
  overflow-y: auto;
}

/* v0.9.15 — Resolution toasts (above the cards, stay 5s) */
/* ⛔ The floating toast stack is NOT the exceptions widget's column (2026-09-25). It states its own width so no
   rule for that panel can squeeze it into a one-word-per-line ribbon, which is how it first appeared. */
#cc-app .cc-toast-float { display: flex; flex-direction: column; gap: 8px; }
/* The plain message toast. Deliberately NOT `.cc-exc-toast`: that class is the exceptions widget's 4-column
   grid (bar / check / body / close) and a single text node lands in its 4px first column — the one-word-
   per-line box the operator reported three times. Own shape, own class. */
#cc-app .cc-toast-float .cc-toast-msg { display: block; width: 100%; box-sizing: border-box;
  white-space: normal; word-break: normal; overflow-wrap: anywhere; }

#cc-app .cc-exc-toasts {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px 0;
}
#cc-app .cc-exc-toasts:empty { padding: 0; }
#cc-app .cc-exc-toast {
  position: relative;
  display: grid;
  grid-template-columns: 4px 26px 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 10px 8px 0;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  overflow: hidden;
  animation: cc-exc-toast-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cc-app .cc-exc-toast.is-leaving {
  animation: cc-exc-toast-out 220ms ease-in forwards;
}
#cc-app .cc-exc-toast-bar {
  background: #15803d;
  height: 100%;
}
#cc-app .cc-exc-toast-manual .cc-exc-toast-bar { background: #d97706; }
#cc-app .cc-exc-toast-check {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 800; font-size: 11px;
  background: #15803d;
}
#cc-app .cc-exc-toast-manual .cc-exc-toast-check { background: #d97706; }
#cc-app .cc-exc-toast-body { min-width: 0; }
#cc-app .cc-exc-toast-line {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; color: #0f172a;
}
#cc-app .cc-exc-toast-title {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cc-app .cc-exc-toast-eur {
  flex: 0 0 auto;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(34,197,94,0.15); color: #15803d;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-exc-toast-manual .cc-exc-toast-eur {
  background: rgba(217,119,6,0.15); color: #b45309;
}
#cc-app .cc-exc-toast-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  font-size: 11px; color: #475569;
}
#cc-app .cc-exc-toast-meta strong { color: #0f172a; font-weight: 700; }
#cc-app .cc-exc-toast-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(15,23,42,0.06);
}
#cc-app .cc-exc-toast-flow {
  margin-top: 4px;
  font-size: 11px; color: #64748b; line-height: 1.4;
  background: #f8fafc; padding: 5px 7px; border-radius: 4px;
}
#cc-app .cc-exc-toast-close {
  background: transparent; border: none;
  color: #94a3b8; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 6px;
  align-self: start;
  margin-top: 2px;
}
#cc-app .cc-exc-toast-close:hover { color: #0f172a; }
@keyframes cc-exc-toast-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes cc-exc-toast-out {
  0%   { opacity: 1; transform: translateY(0); max-height: 200px; }
  100% { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top:0; padding-bottom:0; margin-top:-1px; border-width:0; }
}

/* Card fades out when resolving (immediate) */
#cc-app .cc-exc-card.is-removing {
  animation: cc-exc-card-out 220ms ease-in forwards;
  pointer-events: none;
}
@keyframes cc-exc-card-out {
  0%   { opacity: 1; transform: translateX(0); max-height: 300px; }
  100% { opacity: 0; transform: translateX(8px); max-height: 0; padding-top:0; padding-bottom:0; margin:0; border-width:0; }
}

/* Help band above exception list */
#cc-app .cc-exc-meta {
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px; color: #64748b;
}
#cc-app .cc-exc-meta strong { color: #0f172a; }

/* Live exception cards (replaces the static row aggregates) */
#cc-app .cc-exception-panel { padding: 0; }
#cc-app .cc-exc-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid transparent;
}
#cc-app .cc-exc-card.cc-sev-high   { border-left-color: #dc2626; }
#cc-app .cc-exc-card.cc-sev-medium { border-left-color: #d97706; }
#cc-app .cc-exc-card.cc-sev-low    { border-left-color: #94a3b8; }
#cc-app .cc-exc-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 16px;
  background: rgba(14,165,233,0.10);
}
#cc-app .cc-exc-color-amber  .cc-exc-icon { background: rgba(217,119,6,0.12);  color: #b45309; }
#cc-app .cc-exc-color-red    .cc-exc-icon { background: rgba(220,38,38,0.12);  color: #b91c1c; }
#cc-app .cc-exc-color-sky    .cc-exc-icon { background: rgba(14,165,233,0.12); color: #0369a1; }
#cc-app .cc-exc-color-violet .cc-exc-icon { background: rgba(124,58,237,0.12); color: #6d28d9; }
/* Dark theme — the icon chips above hardcode LIGHT-theme tints + deep text colors, which is exactly the
   "colors defined only for one theme" bug: on dark surfaces the chips kept their light pastel look and the
   deep reds/ambers lost contrast. Brighten text to the 300/400-range hues on stronger tints. */
#cc-app[data-cc-theme="dark"] .cc-exc-icon { background: rgba(56,189,248,0.14); }
#cc-app[data-cc-theme="dark"] .cc-exc-color-amber  .cc-exc-icon { background: rgba(245,158,11,0.18); color: #fbbf24; }
#cc-app[data-cc-theme="dark"] .cc-exc-color-red    .cc-exc-icon { background: rgba(248,113,113,0.18); color: #f87171; }
#cc-app[data-cc-theme="dark"] .cc-exc-color-sky    .cc-exc-icon { background: rgba(56,189,248,0.18);  color: #7dd3fc; }
#cc-app[data-cc-theme="dark"] .cc-exc-color-violet .cc-exc-icon { background: rgba(167,139,250,0.18); color: #c4b5fd; }
/* ...and the rest of the exceptions widget, which hardcoded the light palette throughout (meta band, card
   borders, title/desc text, FROM line). Route everything through the theme tokens so BOTH themes hold. */
#cc-app[data-cc-theme="dark"] .cc-exc-meta { background: var(--cc-surface-2); border-bottom-color: var(--cc-line-2); color: var(--cc-muted); }
#cc-app[data-cc-theme="dark"] .cc-exc-meta strong { color: var(--cc-text); }
#cc-app[data-cc-theme="dark"] .cc-exc-card { border-bottom-color: var(--cc-line-2); }
#cc-app[data-cc-theme="dark"] .cc-exc-title { color: var(--cc-text); }
#cc-app[data-cc-theme="dark"] .cc-exc-desc { color: var(--cc-muted); }
#cc-app[data-cc-theme="dark"] .cc-exc-entity { color: #7dd3fc; background: rgba(56,189,248,0.14); }
#cc-app[data-cc-theme="dark"] .cc-exc-from { background: var(--cc-surface-2); border-left-color: var(--cc-line); color: var(--cc-text-2); }
#cc-app[data-cc-theme="dark"] .cc-exc-from strong { color: var(--cc-text); }
#cc-app .cc-exc-title {
  font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.3;
}
#cc-app .cc-exc-entity {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #0369a1;
  background: rgba(14,165,233,0.10);
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
}
#cc-app .cc-exc-desc {
  font-size: 11px; color: #64748b; line-height: 1.35; margin: 2px 0 6px;
}
/* v0.9.13 — FROM line (source actor + channel) */
#cc-app .cc-exc-from {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 6px;
  padding: 4px 8px;
  background: #f8fafc;
  border-left: 2px solid #cbd5e1;
  border-radius: 3px;
  font-size: 11px; color: #475569;
}
#cc-app .cc-exc-from strong { color: #0f172a; font-weight: 700; }
#cc-app .cc-exc-from-arrow { font-size: 12px; }

#cc-app .cc-exc-actions {
  display: flex; flex-direction: column; gap: 5px;
}
#cc-app .cc-exc-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11.5px; font-weight: 700; line-height: 1.2;
  border-radius: 6px; cursor: pointer;
  text-align: left;
  transition: background 100ms ease, transform 80ms ease, border-color 100ms ease;
}
#cc-app .cc-exc-btn:active { transform: translateY(1px); }
#cc-app .cc-exc-btn-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  background: rgba(15,23,42,0.06);
  color: #475569;
  white-space: nowrap;
}
#cc-app .cc-exc-btn-auto {
  background: rgba(14,165,233,0.10); color: #0369a1;
  border: 1px solid rgba(14,165,233,0.35);
}
#cc-app .cc-exc-btn-auto:hover { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
#cc-app .cc-exc-btn-auto:hover .cc-exc-btn-time { background: rgba(255,255,255,0.25); color: #fff; }
#cc-app .cc-exc-btn-auto .cc-exc-btn-time {
  background: rgba(14,165,233,0.18); color: #0369a1;
}
#cc-app .cc-exc-btn-manual {
  background: #f8fafc; color: #475569;
  border: 1px solid #cbd5e1;
}
#cc-app .cc-exc-btn-manual:hover { background: #f1f5f9; color: #0f172a; }

/* v0.9.13 — Inline "resolved" confirmation (1.6s display before card removes) */
#cc-app .cc-exc-card.is-resolving {
  padding: 12px 14px;
  background: rgba(34,197,94,0.04);
  border-left-color: #22c55e !important;
}
#cc-app .cc-exc-resolved {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 10px; align-items: start;
  animation: cc-exc-resolved-in 250ms ease-out;
}
#cc-app .cc-exc-resolved-check {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #15803d; color: #fff;
  font-weight: 800; font-size: 14px;
  animation: cc-exc-check-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cc-app .cc-exc-resolved-manual .cc-exc-resolved-check {
  background: #d97706;
}
#cc-app .cc-exc-resolved-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; color: #0f172a;
}
#cc-app .cc-exc-resolved-line strong { color: #0f172a; font-weight: 700; }
#cc-app .cc-exc-resolved-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(15,23,42,0.06); color: #475569;
}
#cc-app .cc-exc-resolved-eur {
  margin-left: auto;
  font-size: 12.5px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(34,197,94,0.15); color: #15803d;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-exc-resolved-manual .cc-exc-resolved-eur {
  background: rgba(217,119,6,0.15); color: #b45309;
}
#cc-app .cc-exc-resolved-flow {
  margin-top: 4px;
  font-size: 11px; color: #475569; line-height: 1.4;
  background: #f8fafc; padding: 6px 8px; border-radius: 4px;
}
@keyframes cc-exc-resolved-in {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cc-exc-check-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.9.12 — Background Optimisations panel
   ═══════════════════════════════════════════════════════════════════ */
#cc-app .cc-card-bgopti { margin-top: 0; }
#cc-app .cc-bgopti-help {
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px; color: #64748b;
}
#cc-app .cc-bgopti-panel { padding: 0; }
#cc-app .cc-bgopti-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid #22c55e;     /* green accent — these are positive wins */
}
#cc-app .cc-bgopti-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(34,197,94,0.12);
  color: #15803d;
  font-size: 14px;
}
#cc-app .cc-bgopti-headline {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
#cc-app .cc-bgopti-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #b45309;
}
#cc-app .cc-bgopti-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(217,119,6,0.10); color: #b45309;
}
#cc-app .cc-bgopti-eur {
  margin-left: auto;
  font-size: 12px; font-weight: 800;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(34,197,94,0.12); color: #15803d;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-bgopti-title {
  font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.25;
}
#cc-app .cc-bgopti-desc {
  font-size: 11px; color: #64748b; line-height: 1.3; margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.9.15 — Configuration page (TIPPR-style full settings editor)
   ═══════════════════════════════════════════════════════════════════ */
#cc-app[data-view="rates"] .cc-cfg-page {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 18px 24px;
}
#cc-app[data-view="rates"] .cc-cfg-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
#cc-app[data-view="rates"] .cc-cfg-section-head {
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#cc-app[data-view="rates"] .cc-cfg-section-title {
  margin: 0; padding: 0;
  font-size: 15px; font-weight: 800; color: #0f172a;
  letter-spacing: 0.01em;
}
#cc-app[data-view="rates"] .cc-cfg-section-sub {
  margin: 4px 0 0;
  font-size: 12px; color: #64748b; line-height: 1.4;
}
#cc-app[data-view="rates"] .cc-cfg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  padding: 16px 18px;
}
@media (max-width: 760px) {
  #cc-app[data-view="rates"] .cc-cfg-grid { grid-template-columns: 1fr; }
}
#cc-app[data-view="rates"] .cc-cfg-field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 800; color: #0369a1;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px; background: rgba(14,165,233,0.10); border-radius: 4px;
}
#cc-app[data-view="rates"] .cc-cfg-hint {
  font-size: 11px; color: #94a3b8; line-height: 1.4;
}
#cc-app[data-view="rates"] .cc-cfg-field input[type="range"] {
  width: 100%; accent-color: #0ea5e9;
}
#cc-app[data-view="rates"] .cc-cfg-field-switch {
  flex-direction: row; align-items: center; gap: 8px;
}
#cc-app[data-view="rates"] .cc-cfg-field-switch input { accent-color: #0ea5e9; }

#cc-app[data-view="rates"] .cc-cfg-segmented {
  display: inline-flex; width: 100%;
  border: 1px solid #cbd5e1; border-radius: 7px;
  overflow: hidden; background: #f8fafc;
}
#cc-app[data-view="rates"] .cc-cfg-segmented button {
  flex: 1 1 0;
  padding: 7px 10px;
  font-size: 12px; font-weight: 600; color: #64748b;
  background: transparent; border: none;
  border-right: 1px solid #cbd5e1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#cc-app[data-view="rates"] .cc-cfg-segmented button:last-child { border-right: none; }
#cc-app[data-view="rates"] .cc-cfg-segmented button:hover { background: rgba(14,165,233,0.08); color: #0f172a; }
#cc-app[data-view="rates"] .cc-cfg-segmented button.is-active { background: #0ea5e9; color: #fff; }

#cc-app[data-view="rates"] .cc-cfg-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
}
#cc-app[data-view="rates"] .cc-cfg-chips button {
  padding: 6px 11px;
  font-size: 12px; font-weight: 600; color: #475569;
  background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 5px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#cc-app[data-view="rates"] .cc-cfg-chips button:hover { background: #f1f5f9; color: #0f172a; }
#cc-app[data-view="rates"] .cc-cfg-chips button.is-active {
  background: #0ea5e9; color: #fff; border-color: #0ea5e9;
}

#cc-app[data-view="rates"] .cc-cfg-callout {
  margin: 0 18px 16px;
  padding: 10px 14px;
  background: rgba(14,165,233,0.06);
  border-left: 3px solid #0ea5e9;
  border-radius: 4px;
  font-size: 12px; color: #0f172a; line-height: 1.45;
}
#cc-app[data-view="rates"] .cc-cfg-callout code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 1px 5px; border-radius: 3px;
  background: rgba(15,23,42,0.06);
}

/* Actor profile rows on the Configuration page */
#cc-app[data-view="rates"] .cc-cfg-actor-row {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app[data-view="rates"] .cc-cfg-actor-row:last-of-type { border-bottom: none; }
#cc-app[data-view="rates"] .cc-cfg-actor-head {
  display: flex; align-items: center; gap: 8px;
}
#cc-app[data-view="rates"] .cc-cfg-actor-icon { font-size: 18px; }
#cc-app[data-view="rates"] .cc-cfg-actor-name {
  flex: 1 1 auto;
  font-size: 13.5px; font-weight: 700; color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-actor-avail {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; user-select: none;
}
#cc-app[data-view="rates"] .cc-cfg-actor-avail input { margin: 0; accent-color: #0ea5e9; }
#cc-app[data-view="rates"] .cc-cfg-actor-desc {
  margin-top: 4px;
  font-size: 11.5px; color: #64748b; line-height: 1.4;
  padding-left: 26px;
}
#cc-app[data-view="rates"] .cc-cfg-actor-row2 {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding-left: 26px;
}
#cc-app[data-view="rates"] .cc-cfg-actor-speed-label {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.04em;
}
#cc-app[data-view="rates"] .cc-cfg-actor-row2 .cc-cfg-segmented {
  flex: 0 0 auto; min-width: 260px; width: auto;
}
#cc-app[data-view="rates"] .cc-cfg-actor-time {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; color: #0369a1;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(14,165,233,0.10);
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="rates"] .cc-cfg-actor-row:has(input[type="checkbox"][data-cc-cfg-actor-field="available"]:not(:checked)) .cc-cfg-actor-row2,
#cc-app[data-view="rates"] .cc-cfg-actor-row:has(input[type="checkbox"][data-cc-cfg-actor-field="available"]:not(:checked)) .cc-cfg-actor-desc,
#cc-app[data-view="rates"] .cc-cfg-actor-row:has(input[type="checkbox"][data-cc-cfg-actor-field="available"]:not(:checked)) .cc-cfg-actor-controls {
  opacity: 0.4;
  pointer-events: none;
}

/* v0.9.16 — Detailed actor profile cards (TIPPR-style) */
#cc-app[data-view="rates"] .cc-cfg-actor-row-detailed {
  background: #f8fafc;
  margin: 12px 18px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
#cc-app[data-view="rates"] .cc-cfg-actor-row-detailed:first-of-type { margin-top: 8px; }
#cc-app[data-view="rates"] .cc-cfg-actor-row-detailed .cc-cfg-actor-desc {
  padding-left: 0;
  margin-top: 4px;
}
#cc-app[data-view="rates"] .cc-cfg-actor-row-detailed .cc-cfg-actor-row2 {
  padding-left: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

/* Grid of detailed controls (2 cols) */
#cc-app[data-view="rates"] .cc-cfg-actor-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 880px) {
  #cc-app[data-view="rates"] .cc-cfg-actor-controls {
    grid-template-columns: 1fr;
  }
}
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl-label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; color: #334155;
}
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 800; color: #0369a1;
  padding: 1px 6px; background: rgba(14,165,233,0.10);
  border-radius: 3px; font-variant-numeric: tabular-nums;
}
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl-hint {
  font-size: 10.5px; color: #94a3b8; line-height: 1.4;
}

/* Select control inside actor card */
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #cbd5e1; border-radius: 5px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  cursor: pointer;
}
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl select:focus {
  outline: none; border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
}

/* Range slider inside actor card */
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl input[type="range"] {
  width: 100%; accent-color: #0ea5e9;
}

/* Segmented inside actor card (hours / capacityMode / speed / tier) */
#cc-app[data-view="rates"] .cc-cfg-actor-ctrl .cc-cfg-segmented {
  width: 100%;
}

/* Feature toggle (switch) inside actor card */
#cc-app[data-view="rates"] .cc-cfg-actor-switch {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
#cc-app[data-view="rates"] .cc-cfg-actor-switch input {
  margin: 0; accent-color: #0ea5e9;
}
#cc-app[data-view="rates"] .cc-cfg-actor-switch-label {
  font-size: 12px; font-weight: 600; color: #0f172a;
}

/* Footer */
#cc-app[data-view="rates"] .cc-cfg-footer {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
}
#cc-app[data-view="rates"] .cc-cfg-footer-info {
  font-size: 12px; color: #64748b; line-height: 1.5;
}
#cc-app[data-view="rates"] .cc-cfg-footer-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
#cc-app[data-view="rates"] .cc-cfg-btn {
  padding: 9px 18px;
  font-size: 12.5px; font-weight: 700;
  border-radius: 6px; cursor: pointer;
  transition: background 120ms ease;
}
#cc-app[data-view="rates"] .cc-cfg-btn-reset {
  background: transparent; color: #64748b; border: 1px solid #cbd5e1;
}
#cc-app[data-view="rates"] .cc-cfg-btn-reset:hover { background: #f1f5f9; color: #0f172a; }
#cc-app[data-view="rates"] .cc-cfg-btn-apply {
  background: #0ea5e9; color: #fff; border: 1px solid #0ea5e9;
}
#cc-app[data-view="rates"] .cc-cfg-btn-apply:hover { background: #0284c7; }
#cc-app[data-view="rates"] .cc-cfg-footer-status {
  font-size: 12px;
  padding: 8px 12px; border-radius: 5px;
  display: none;
}
#cc-app[data-view="rates"] .cc-cfg-footer-status.is-ok {
  display: block;
  background: rgba(34,197,94,0.10); color: #15803d;
}
#cc-app[data-view="rates"] .cc-cfg-footer-status.is-info {
  display: block;
  background: rgba(14,165,233,0.08); color: #0369a1;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.9.18 — Scenario Studio (Phase 3) UI on the Configuration page
   ═══════════════════════════════════════════════════════════════════ */

#cc-app[data-view="rates"] .cc-cfg-scn-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
#cc-app[data-view="rates"] .cc-cfg-scn-search-wrap { flex: 1 1 auto; }
#cc-app[data-view="rates"] .cc-cfg-scn-toolbar input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; font-size: 12.5px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-toolbar input[type="text"]:focus {
  outline: none; border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
}
#cc-app[data-view="rates"] .cc-cfg-scn-count {
  font-size: 11.5px; color: #64748b; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#cc-app[data-view="rates"] .cc-cfg-scenarios {
  padding: 8px 18px 18px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-cat-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #475569;
  padding: 14px 6px 6px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-cat-head span {
  color: #94a3b8; font-weight: 500;
}
#cc-app[data-view="rates"] .cc-cfg-scn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
#cc-app[data-view="rates"] .cc-cfg-scn-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: #fff; border: none;
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease;
}
#cc-app[data-view="rates"] .cc-cfg-scn-head:hover { background: #f8fafc; }
#cc-app[data-view="rates"] .cc-cfg-scn-icon { font-size: 15px; }
#cc-app[data-view="rates"] .cc-cfg-scn-title {
  flex: 1 1 auto;
  font-size: 13px; font-weight: 700; color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-scn-cat,
#cc-app[data-view="rates"] .cc-cfg-scn-sev {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-cat-land  { background: rgba(217,119,6,0.12);  color: #b45309; }
#cc-app[data-view="rates"] .cc-cfg-scn-cat-air,
#cc-app[data-view="rates"] .cc-cfg-scn-color-sky    { background: rgba(14,165,233,0.12); color: #0369a1; }
#cc-app[data-view="rates"] .cc-cfg-scn-color-amber  { background: rgba(217,119,6,0.12);  color: #b45309; }
#cc-app[data-view="rates"] .cc-cfg-scn-color-red    { background: rgba(220,38,38,0.12);  color: #b91c1c; }
#cc-app[data-view="rates"] .cc-cfg-scn-color-violet { background: rgba(124,58,237,0.12); color: #6d28d9; }
#cc-app[data-view="rates"] .cc-cfg-scn-sev-low    { background: rgba(148,163,184,0.18); color: #475569; }
#cc-app[data-view="rates"] .cc-cfg-scn-sev-medium { background: rgba(217,119,6,0.16);   color: #b45309; }
#cc-app[data-view="rates"] .cc-cfg-scn-sev-high   { background: rgba(220,38,38,0.16);   color: #b91c1c; }
#cc-app[data-view="rates"] .cc-cfg-scn-edited {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  background: #0f172a; color: #fff;
}
#cc-app[data-view="rates"] .cc-cfg-scn-edited[hidden] { display: none; }
#cc-app[data-view="rates"] .cc-cfg-scn-chev {
  color: #94a3b8; font-size: 12px; margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="rates"] .cc-cfg-scn-body {
  padding: 12px 14px 14px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}
#cc-app[data-view="rates"] .cc-cfg-scn-body[hidden] { display: none; }
#cc-app[data-view="rates"] .cc-cfg-scn-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 760px) {
  #cc-app[data-view="rates"] .cc-cfg-scn-field-row { grid-template-columns: 1fr; }
}
#cc-app[data-view="rates"] .cc-cfg-scn-field {
  display: flex; flex-direction: column; gap: 4px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-field-label,
#cc-app[data-view="rates"] .cc-cfg-scn-flow-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #64748b;
}
#cc-app[data-view="rates"] .cc-cfg-scn-field input[type="text"],
#cc-app[data-view="rates"] .cc-cfg-scn-savings-row input[type="number"],
#cc-app[data-view="rates"] .cc-cfg-scn-flow-field textarea {
  padding: 6px 10px;
  border: 1px solid #cbd5e1; border-radius: 5px;
  background: #fff; font-size: 12.5px; color: #0f172a;
  font-family: inherit; width: 100%;
}
#cc-app[data-view="rates"] .cc-cfg-scn-field input:focus,
#cc-app[data-view="rates"] .cc-cfg-scn-savings-row input:focus,
#cc-app[data-view="rates"] .cc-cfg-scn-flow-field textarea:focus {
  outline: none; border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
}
#cc-app[data-view="rates"] .cc-cfg-scn-savings-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-savings-row input[type="number"] {
  width: 110px;
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="rates"] .cc-cfg-scn-savings-default {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 500; color: #94a3b8;
}
#cc-app[data-view="rates"] .cc-cfg-scn-dash { color: #94a3b8; font-weight: 600; }
#cc-app[data-view="rates"] .cc-cfg-scn-flow-field {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px;
}
#cc-app[data-view="rates"] .cc-cfg-scn-flow-field textarea {
  resize: vertical; min-height: 50px;
  font-size: 12px; line-height: 1.4;
}
#cc-app[data-view="rates"] .cc-cfg-scn-flow-hint {
  font-size: 10.5px; color: #94a3b8;
}
#cc-app[data-view="rates"] .cc-cfg-scn-flow-hint code {
  font-size: 10.5px; padding: 1px 4px; border-radius: 3px;
  background: rgba(15,23,42,0.06); color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-scn-actions {
  margin-top: 12px;
  display: flex; justify-content: flex-end;
}
#cc-app[data-view="rates"] .cc-cfg-scn-reset-btn {
  padding: 5px 10px;
  font-size: 11px; font-weight: 700; color: #b91c1c;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.30); border-radius: 5px;
  cursor: pointer;
}
#cc-app[data-view="rates"] .cc-cfg-scn-reset-btn:hover {
  background: rgba(220,38,38,0.12);
}

/* v0.9.20 — Card ac_opt_a — OptiFlow priority weights UI */
#cc-app[data-view="rates"] .cc-cfg-weights {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 14px 18px;
}
@media (max-width: 760px) {
  #cc-app[data-view="rates"] .cc-cfg-weights { grid-template-columns: 1fr; }
}
#cc-app[data-view="rates"] .cc-cfg-weight-row {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
#cc-app[data-view="rates"] .cc-cfg-weight-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
}
#cc-app[data-view="rates"] .cc-cfg-weight-icon { font-size: 14px; }
#cc-app[data-view="rates"] .cc-cfg-weight-name {
  flex: 1 1 auto;
  font-size: 13px; font-weight: 700; color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-weight-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 800; color: #0369a1;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; background: rgba(14,165,233,0.10);
  border-radius: 4px;
}
#cc-app[data-view="rates"] .cc-cfg-weight-slider {
  width: 100%; accent-color: #0ea5e9;
}
#cc-app[data-view="rates"] .cc-cfg-weight-desc {
  margin-top: 5px;
  font-size: 11px; color: #64748b; line-height: 1.4;
}
#cc-app[data-view="rates"] .cc-cfg-weight-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
#cc-app[data-view="rates"] .cc-cfg-weight-total {
  font-size: 13px; color: #0f172a;
}
#cc-app[data-view="rates"] .cc-cfg-weight-total strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; color: #15803d;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
#cc-app[data-view="rates"] .cc-cfg-weight-total.is-off strong { color: #b91c1c; }
#cc-app[data-view="rates"] .cc-cfg-weight-target {
  margin-left: 8px;
  font-size: 11px; color: #94a3b8;
}

/* v0.9.25 — Multiple FF / GHA actor-instance profile cards */
#cc-app[data-view="rates"] .cc-cfg-instances-group {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
}
#cc-app[data-view="rates"] .cc-cfg-instances-group:last-of-type { border-bottom: none; }
#cc-app[data-view="rates"] .cc-cfg-instances-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; color: #0f172a;
  margin-bottom: 10px;
}
#cc-app[data-view="rates"] .cc-cfg-instance-add {
  padding: 6px 12px;
  background: #0ea5e9; color: #fff;
  border: 1px solid #0ea5e9; border-radius: 5px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
#cc-app[data-view="rates"] .cc-cfg-instance-add:hover { background: #0284c7; }
#cc-app[data-view="rates"] .cc-cfg-instances-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 880px) {
  #cc-app[data-view="rates"] .cc-cfg-instances-list { grid-template-columns: 1fr; }
}
#cc-app[data-view="rates"] .cc-cfg-instance-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 12px 14px;
}
#cc-app[data-view="rates"] .cc-cfg-instance-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
#cc-app[data-view="rates"] .cc-cfg-instance-name {
  flex: 1 1 auto;
  padding: 5px 9px;
  border: 1px solid #cbd5e1; border-radius: 5px;
  font-size: 13px; font-weight: 700; color: #0f172a;
  background: #fff;
}
#cc-app[data-view="rates"] .cc-cfg-instance-name:focus {
  outline: none; border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
}
#cc-app[data-view="rates"] .cc-cfg-instance-remove {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(220,38,38,0.10); color: #b91c1c;
  border: 1px solid rgba(220,38,38,0.30); border-radius: 4px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
#cc-app[data-view="rates"] .cc-cfg-instance-remove:hover { background: rgba(220,38,38,0.18); }
#cc-app[data-view="rates"] .cc-cfg-instance-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (max-width: 600px) {
  #cc-app[data-view="rates"] .cc-cfg-instance-grid { grid-template-columns: 1fr; }
}
#cc-app[data-view="rates"] .cc-cfg-instance-card .cc-cfg-actor-ctrl {
  padding: 7px 9px;
}
#cc-app[data-view="rates"] .cc-cfg-instance-card .cc-cfg-segmented {
  width: 100%;
}
#cc-app[data-view="rates"] .cc-cfg-instance-speed-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
#cc-app[data-view="rates"] .cc-cfg-instance-speed-row .cc-cfg-segmented { flex: 1 1 auto; }
#cc-app[data-view="rates"] .cc-cfg-instance-card:has(input[type="checkbox"][data-cc-cfg-inst-field="available"]:not(:checked)) {
  opacity: 0.55;
}

/* v0.9.21 — Architecture state banner in Trigger Scenario menu */
#cc-app .cc-trigger-arch-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(217,119,6,0.08);
  border-bottom: 1px solid rgba(217,119,6,0.25);
  font-size: 11.5px; color: #92400e; line-height: 1.4;
}
#cc-app .cc-trigger-arch-icon { font-size: 14px; }
#cc-app .cc-trigger-arch-banner strong { color: #7c2d12; font-weight: 800; }

/* v0.9.21 — Configuration page architecture summary */
#cc-app[data-view="rates"] .cc-cfg-arch-section .cc-cfg-arch-state {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 14px 18px;
}
@media (max-width: 760px) {
  #cc-app[data-view="rates"] .cc-cfg-arch-state { grid-template-columns: 1fr; }
}
#cc-app[data-view="rates"] .cc-cfg-arch-pill {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(124,58,237,0.06));
  border: 1px solid #e2e8f0; border-radius: 8px;
}
#cc-app[data-view="rates"] .cc-cfg-arch-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b;
}
#cc-app[data-view="rates"] .cc-cfg-arch-val {
  font-size: 18px; font-weight: 800; color: #0369a1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="rates"] .cc-cfg-arch-hint {
  font-size: 11px; color: #64748b; line-height: 1.4; margin-top: 4px;
}

/* v0.9.22 — Decisions Feed view (Cards ac_kfk_a/b/c) */
#cc-app[data-view="kafka"] .cc-kfk-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 14px;
  padding: 14px 18px;
}
@media (max-width: 980px) {
  #cc-app[data-view="kafka"] .cc-kfk-layout { grid-template-columns: 1fr; }
}
#cc-app[data-view="kafka"] .cc-kfk-rail {
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#cc-app[data-view="kafka"] .cc-kfk-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12.5px; font-weight: 800; color: #0f172a;
}
#cc-app[data-view="kafka"] .cc-kfk-rate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #0369a1;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(14,165,233,0.10);
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="kafka"] .cc-kfk-topics {
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
#cc-app[data-view="kafka"] .cc-kfk-topic {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: 8px; align-items: center;
  padding: 7px 9px;
  background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
#cc-app[data-view="kafka"] .cc-kfk-topic:hover { background: #f8fafc; }
#cc-app[data-view="kafka"] .cc-kfk-topic.is-active {
  background: rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.40);
}
#cc-app[data-view="kafka"] .cc-kfk-topic-icon { font-size: 14px; }
#cc-app[data-view="kafka"] .cc-kfk-topic-name {
  font-size: 12px; font-weight: 700; color: #0f172a;
  display: block;
}
#cc-app[data-view="kafka"] .cc-kfk-topic-id {
  font-size: 10px; color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="kafka"] .cc-kfk-topic-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(15,23,42,0.06); color: #334155;
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="kafka"] .cc-kfk-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
#cc-app[data-view="kafka"] .cc-kfk-pause {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer;
}
#cc-app[data-view="kafka"] .cc-kfk-pause input { accent-color: #0ea5e9; }
#cc-app[data-view="kafka"] .cc-kfk-clear {
  padding: 5px 10px;
  font-size: 11px; font-weight: 700; color: #b91c1c;
  background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.30);
  border-radius: 4px; cursor: pointer;
}
#cc-app[data-view="kafka"] .cc-kfk-clear:hover { background: rgba(220,38,38,0.12); }
#cc-app[data-view="kafka"] .cc-kfk-hint {
  padding: 12px 14px;
  font-size: 11px; color: #64748b; line-height: 1.45;
}

#cc-app[data-view="kafka"] .cc-kfk-feed-card {
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
  display: flex; flex-direction: column; min-height: 560px;
}
#cc-app[data-view="kafka"] .cc-kfk-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#cc-app[data-view="kafka"] .cc-kfk-feed-title {
  font-size: 13px; font-weight: 800; color: #0f172a;
}
#cc-app[data-view="kafka"] .cc-kfk-feed-count {
  font-size: 11px; color: #64748b; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="kafka"] .cc-kfk-feed {
  max-height: 640px; overflow-y: auto;
  padding: 4px 0;
}
#cc-app[data-view="kafka"] .cc-kfk-row {
  padding: 7px 16px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid transparent;
  animation: cc-kfk-row-in 200ms ease-out;
}
#cc-app[data-view="kafka"] .cc-kfk-row-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #0f172a;
}
#cc-app[data-view="kafka"] .cc-kfk-row-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
#cc-app[data-view="kafka"] .cc-kfk-row-icon { font-size: 13px; }
#cc-app[data-view="kafka"] .cc-kfk-row-topic {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(15,23,42,0.06); color: #334155;
}
#cc-app[data-view="kafka"] .cc-kfk-row-summary {
  flex: 1 1 auto;
  font-size: 12px; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cc-app[data-view="kafka"] .cc-kfk-row-summary strong { color: #0f172a; }
#cc-app[data-view="kafka"] .cc-kfk-row-summary em { color: #15803d; font-style: normal; }
#cc-app[data-view="kafka"] .cc-kfk-row-seq {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: #cbd5e1;
}
#cc-app[data-view="kafka"] .cc-kfk-row-payload {
  margin-top: 4px;
}
#cc-app[data-view="kafka"] .cc-kfk-row-payload summary {
  font-size: 10.5px; color: #64748b; cursor: pointer; padding: 2px 0;
}
#cc-app[data-view="kafka"] .cc-kfk-row-payload pre {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #0f172a;
  overflow-x: auto;
}
@keyframes cc-kfk-row-in {
  0%   { background: rgba(14,165,233,0.12); }
  100% { background: transparent; }
}

/* Row left-border by topic color */
#cc-app[data-view="kafka"] .cc-kfk-row-blue   { border-left-color: #0ea5e9; }
#cc-app[data-view="kafka"] .cc-kfk-row-red    { border-left-color: #dc2626; }
#cc-app[data-view="kafka"] .cc-kfk-row-green  { border-left-color: #22c55e; }
#cc-app[data-view="kafka"] .cc-kfk-row-violet { border-left-color: #7c3aed; }
#cc-app[data-view="kafka"] .cc-kfk-row-indigo { border-left-color: #6366f1; }
#cc-app[data-view="kafka"] .cc-kfk-row-sky    { border-left-color: #38bdf8; }
#cc-app[data-view="kafka"] .cc-kfk-row-amber  { border-left-color: #f59e0b; }
#cc-app[data-view="kafka"] .cc-kfk-row-teal   { border-left-color: #14b8a6; }

/* v0.9.26 — Decision Detail drawer on Decisions Feed view */
#cc-app[data-view="kafka"] .cc-kfk-feed [data-cc-kfk-seq] { cursor: pointer; }
#cc-app[data-view="kafka"] .cc-kfk-feed [data-cc-kfk-seq]:hover {
  background: rgba(14,165,233,0.04);
}
#cc-app .cc-kfk-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.30);
  z-index: 900;
  animation: cc-kfk-scrim-in 200ms ease-out;
}
#cc-app .cc-kfk-drawer-scrim[hidden] { display: none; }
@keyframes cc-kfk-scrim-in { 0% { opacity: 0 } 100% { opacity: 1 } }
#cc-app .cc-kfk-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(620px, 95vw);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -8px 0 24px rgba(15,23,42,0.10);
  z-index: 950;
  display: flex; flex-direction: column;
  animation: cc-kfk-drawer-in 240ms cubic-bezier(0.32, 0.72, 0.0, 1.0);
}
@keyframes cc-kfk-drawer-in {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0);    }
}
#cc-app .cc-kfk-drawer[hidden] { display: none; }
#cc-app .cc-kfk-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#cc-app .cc-kfk-drawer-title { font-size: 13px; font-weight: 800; color: #0f172a; }
#cc-app .cc-kfk-drawer-close {
  background: transparent; border: none;
  color: #64748b; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 2px 8px;
}
#cc-app .cc-kfk-drawer-close:hover { color: #0f172a; }
#cc-app .cc-kfk-drawer-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 18px 22px 24px;
}

/* Decision Detail content blocks */
#cc-app .cc-dd-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}
#cc-app .cc-dd-id {
  grid-column: 1; grid-row: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 800; color: #b45309;
  letter-spacing: 0.02em;
}
#cc-app .cc-dd-cat {
  grid-column: 2; grid-row: 1;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: rgba(14,165,233,0.10); color: #0369a1;
}
#cc-app .cc-dd-cat-red    { background: rgba(220,38,38,0.10);  color: #b91c1c; }
#cc-app .cc-dd-cat-green  { background: rgba(34,197,94,0.10);  color: #15803d; }
#cc-app .cc-dd-cat-amber  { background: rgba(217,119,6,0.10);  color: #b45309; }
#cc-app .cc-dd-cat-violet { background: rgba(124,58,237,0.10); color: #6d28d9; }
#cc-app .cc-dd-cat-blue   { background: rgba(14,165,233,0.10); color: #0369a1; }
#cc-app .cc-dd-cat-indigo { background: rgba(99,102,241,0.10); color: #4338ca; }
#cc-app .cc-dd-cat-sky    { background: rgba(2,132,199,0.10);  color: #0369a1; }
#cc-app .cc-dd-cat-teal   { background: rgba(20,184,166,0.10); color: #0f766e; }
#cc-app .cc-dd-title {
  grid-column: 1 / span 2; grid-row: 2;
  font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.2;
  margin-top: 6px;
}
#cc-app .cc-dd-meta {
  grid-column: 1 / span 2; grid-row: 3;
  font-size: 11px; color: #64748b; margin-top: 6px;
}
#cc-app .cc-dd-meta code {
  font-size: 10.5px; padding: 1px 5px; border-radius: 3px;
  background: rgba(15,23,42,0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#cc-app .cc-dd-section { margin: 18px 0; }
#cc-app .cc-dd-section-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #64748b;
  margin-bottom: 8px;
}
#cc-app .cc-dd-section-body {
  font-size: 13px; color: #0f172a; line-height: 1.5;
}
#cc-app .cc-dd-section-body strong { font-weight: 700; color: #0f172a; }

#cc-app .cc-dd-reason-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
#cc-app .cc-dd-reason-list li {
  display: grid; grid-template-columns: 26px 1fr;
  gap: 10px; align-items: start;
  font-size: 13px; color: #0f172a; line-height: 1.45;
}
#cc-app .cc-dd-step-num {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(217,119,6,0.18); color: #b45309;
  font-weight: 800; font-size: 12px;
}

#cc-app .cc-dd-alt {
  padding: 9px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 13px; color: #475569; line-height: 1.4;
  margin-bottom: 6px;
}
#cc-app .cc-dd-alt:last-child { margin-bottom: 0; }
#cc-app .cc-dd-alt strong { color: #0f172a; }
#cc-app .cc-dd-alt-cost { color: #b91c1c; font-weight: 700; }

#cc-app .cc-dd-action {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(124,58,237,0.08);
  border-left: 3px solid #7c3aed;
  border-radius: 4px;
  font-size: 13px; color: #0f172a;
}
#cc-app .cc-dd-action-glyph { color: #7c3aed; font-weight: 800; font-size: 14px; }

#cc-app .cc-dd-outcome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(34,197,94,0.08);
  border-left: 3px solid #22c55e;
  border-radius: 4px;
  font-size: 13px; color: #0f172a;
  margin-bottom: 10px;
}
#cc-app .cc-dd-eur {
  font-size: 22px; font-weight: 800; color: #15803d;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-dd-calc {
  font-size: 12px; color: #475569; line-height: 1.45;
  padding: 8px 12px;
  background: #f8fafc; border-radius: 4px;
}
/* v0.9.27 — Value breakdown grids (functional + dimensional) */
#cc-app .cc-dd-val-grid {
  display: flex; flex-direction: column; gap: 10px;
}
#cc-app .cc-dd-val-row {
  padding: 9px 11px;
  background: #f8fafc; border-radius: 6px;
  border-left: 3px solid #94a3b8;
}
#cc-app .cc-dd-val-row-direct   { border-left-color: #0f172a; }
#cc-app .cc-dd-val-row-kfkflink { border-left-color: #0ea5e9; }
#cc-app .cc-dd-val-row-xorch    { border-left-color: #7c3aed; }
#cc-app .cc-dd-val-row-mcp      { border-left-color: #22c55e; }
#cc-app .cc-dd-val-row-audit    { border-left-color: #d97706; }

#cc-app .cc-dd-val-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
#cc-app .cc-dd-val-label { font-size: 12.5px; font-weight: 700; color: #0f172a; }
#cc-app .cc-dd-val-eur {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 800; color: #15803d;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-dd-val-pct { font-weight: 600; color: #64748b; font-size: 11px; }
#cc-app .cc-dd-val-bar {
  margin-top: 5px;
  height: 5px;
  background: rgba(15,23,42,0.06);
  border-radius: 99px; overflow: hidden;
}
#cc-app .cc-dd-val-bar-fill {
  height: 100%; background: linear-gradient(90deg, #0ea5e9, #15803d);
  transition: width 360ms ease;
}
#cc-app .cc-dd-val-desc {
  margin-top: 4px;
  font-size: 11px; color: #64748b; line-height: 1.4;
}

/* Dimensional breakdown */
#cc-app .cc-dd-dim-grid {
  display: flex; flex-direction: column; gap: 6px;
}
#cc-app .cc-dd-dim-row {
  display: grid;
  grid-template-columns: 22px 1.6fr 1.2fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 7px 11px;
  background: #f8fafc; border-radius: 5px;
}
#cc-app .cc-dd-dim-icon { font-size: 14px; }
#cc-app .cc-dd-dim-label { font-size: 12.5px; font-weight: 700; color: #0f172a; }
#cc-app .cc-dd-dim-meta  { font-size: 10.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }
#cc-app .cc-dd-dim-eur {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 800; color: #15803d;
  text-align: right; font-variant-numeric: tabular-nums;
}
#cc-app .cc-dd-dim-bar {
  grid-column: 1 / span 4;
  height: 4px;
  background: rgba(15,23,42,0.06);
  border-radius: 99px; overflow: hidden;
  margin-top: 3px;
}
#cc-app .cc-dd-dim-bar-fill {
  height: 100%; transition: width 360ms ease;
}
#cc-app .cc-dd-dim-amber  .cc-dd-dim-bar-fill { background: #f59e0b; }
#cc-app .cc-dd-dim-sky    .cc-dd-dim-bar-fill { background: #0284c7; }
#cc-app .cc-dd-dim-green  .cc-dd-dim-bar-fill { background: #22c55e; }
#cc-app .cc-dd-dim-red    .cc-dd-dim-bar-fill { background: #ef4444; }
#cc-app .cc-dd-dim-violet .cc-dd-dim-bar-fill { background: #7c3aed; }
#cc-app .cc-dd-dim-indigo .cc-dd-dim-bar-fill { background: #6366f1; }

#cc-app .cc-dd-pre {
  margin: 0; padding: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #0f172a;
  overflow-x: auto;
}

/* v0.9.24 — AWB detail drawer + scrim */
#cc-app .cc-awb-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.30);
  /* v2.40.1 — above dashboard edit-mode widget controls (resize/delete @1200)
     so the slide-in (AWB + ULD peek) isn't overlaid by widget cross-hairs */
  z-index: 1250;
  animation: cc-awb-scrim-in 200ms ease-out;
}
#cc-app .cc-awb-drawer-scrim[hidden] { display: none; }
@keyframes cc-awb-scrim-in { 0% { opacity: 0 } 100% { opacity: 1 } }
#cc-app .cc-awb-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 90vw);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -8px 0 24px rgba(15,23,42,0.10);
  z-index: 1260;   /* v2.40.1 — above edit-mode widget controls (@1200) */
  display: flex; flex-direction: column;
  animation: cc-awb-drawer-in 240ms cubic-bezier(0.32, 0.72, 0.0, 1.0);
}
@keyframes cc-awb-drawer-in {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0);     }
}
#cc-app .cc-awb-drawer[hidden] { display: none; }
#cc-app .cc-awb-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#cc-app .cc-awb-drawer-title {
  display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 800; color: #0f172a;
}
#cc-app .cc-awb-drawer-icon { font-size: 18px; }
#cc-app .cc-awb-drawer-close {
  background: transparent; border: none;
  color: #64748b; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 2px 8px;
}
#cc-app .cc-awb-drawer-close:hover { color: #0f172a; }
#cc-app .cc-awb-drawer-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 18px;
}
#cc-app .cc-awb-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-bottom: 12px;
}
#cc-app .cc-awb-route { font-size: 15px; color: #0f172a; }
#cc-app .cc-awb-weight { font-size: 12px; color: #64748b; }
#cc-app .cc-awb-status-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 8px;
  margin-bottom: 14px;
}
#cc-app .cc-awb-status-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
#cc-app .cc-awb-status-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #64748b;
  flex: 0 0 110px;
}
#cc-app .cc-awb-status-val { color: #0f172a; font-weight: 700; }
#cc-app .cc-awb-status-sub { color: #475569; }
#cc-app .cc-awb-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b;
  margin: 12px 0 6px;
}
/* Standards citation inside the drawer section heading — quieter than the heading itself. */
#cc-app .cc-awb-section-cite {
  font-weight: 600; letter-spacing: 0.02em;
  text-transform: none;
  color: #94a3b8;
  margin-left: 6px;
}
#cc-app .cc-awb-stages {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
@media (max-width: 520px) {
  #cc-app .cc-awb-stages { grid-template-columns: repeat(2, 1fr); }
}
#cc-app .cc-awb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 6px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 11px;
  text-align: center;
}
#cc-app .cc-awb-stage.is-done {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.30);
}
#cc-app .cc-awb-stage.is-current {
  background: rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.40);
  box-shadow: 0 0 0 1px rgba(14,165,233,0.20);
}
#cc-app .cc-awb-stage-marker {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #e2e8f0; color: #475569;
  font-weight: 700; font-size: 11px;
}
#cc-app .cc-awb-stage.is-done .cc-awb-stage-marker { background: #15803d; color: #fff; }
#cc-app .cc-awb-stage.is-current .cc-awb-stage-marker { background: #0ea5e9; color: #fff; animation: cc-awb-stage-pulse 1.2s ease-in-out infinite; }
#cc-app .cc-awb-stage-code { font-weight: 800; color: #0f172a; }
#cc-app .cc-awb-stage-label { font-size: 10px; color: #64748b; }
@keyframes cc-awb-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(14,165,233,0); }
}
#cc-app .cc-awb-legs {
  display: flex; flex-direction: column; gap: 4px;
}
#cc-app .cc-awb-leg {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 8px; align-items: center;
  padding: 7px 9px;
  background: #fff; border: 1px solid #f1f5f9; border-radius: 6px;
  border-left: 3px solid #e2e8f0;
}
#cc-app .cc-awb-leg.is-done {
  border-left-color: #22c55e;
  background: rgba(34,197,94,0.03);
}
#cc-app .cc-awb-leg.is-current {
  border-left-color: #0ea5e9;
  background: rgba(14,165,233,0.05);
}
#cc-app .cc-awb-leg-icon { font-size: 16px; text-align: center; }
#cc-app .cc-awb-leg-label { font-size: 12px; font-weight: 700; color: #0f172a; }
#cc-app .cc-awb-leg-loc   { font-size: 11px; color: #64748b; }
#cc-app .cc-awb-footer-hint {
  margin-top: 14px;
  padding: 8px 10px;
  background: #f8fafc; border-radius: 5px;
  font-size: 11px; color: #94a3b8; font-style: italic;
}

/* AWB chip clickable hint */
#cc-app .cc-ticker-awb,
#cc-app .cc-exc-entity {
  cursor: pointer;
  text-decoration: none;
}
#cc-app .cc-ticker-awb:hover,
#cc-app .cc-exc-entity:hover {
  background: rgba(14,165,233,0.18) !important;
}

/* v0.9.23/26 — Exception card click-to-locate + much more visible map highlight */
#cc-app .cc-exc-card[data-cc-exc-id] { cursor: pointer; }
#cc-app .cc-exc-card[data-cc-exc-id]:hover {
  background: rgba(14,165,233,0.04);
}
#cc-app .cc-exc-highlight-ring {
  animation: cc-exc-highlight-pulse 1.0s ease-in-out infinite;
}
@keyframes cc-exc-highlight-pulse {
  0%   { stroke-width: 3; opacity: 0.6; }
  50%  { stroke-width: 8; opacity: 1; }
  100% { stroke-width: 3; opacity: 0.6; }
}
#cc-app .cc-exc-halo-ring {
  animation: cc-exc-halo-pulse 2.0s ease-in-out infinite;
}
@keyframes cc-exc-halo-pulse {
  0%, 100% { stroke-opacity: 0.30; fill-opacity: 0.04; }
  50%      { stroke-opacity: 0.65; fill-opacity: 0.10; }
}
/* Floating exception badge above the truck */
#cc-app .cc-exc-pin-icon-wrap {
  background: transparent !important;
  border: none !important;
  pointer-events: none;
}
#cc-app .cc-exc-pin-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #dc2626; color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(15,23,42,0.30);
  font-size: 11.5px; font-weight: 800;
  white-space: nowrap;
  max-width: 220px;
  animation: cc-exc-pin-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cc-app .cc-exc-pin-icon { font-size: 14px; }
#cc-app .cc-exc-pin-label {
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0,0,0,0.20);
}
@keyframes cc-exc-pin-bounce {
  0%   { opacity: 0; transform: translateY(8px) scale(0.7); }
  60%  { transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Exception card override badge */
#cc-app .cc-exc-override-badge {
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px;
  background: #0f172a; color: #fff;
  margin-left: 4px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════
   v0.9.30 — Control Tower UX overhaul
   ══════════════════════════════════════════════════════════════════ */

/* Compact KPI strip — single row, denser tiles */
#cc-app[data-view="control-tower"] .cc-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 18px 4px;
}
@media (max-width: 1280px) {
  #cc-app[data-view="control-tower"] .cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #cc-app[data-view="control-tower"] .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#cc-app[data-view="control-tower"] .cc-kpi {
  padding: 10px 12px;
  border-radius: 9px;
}
#cc-app[data-view="control-tower"] .cc-kpi-label {
  font-size: 9.5px; letter-spacing: 0.05em;
  margin-bottom: 3px;
}
#cc-app[data-view="control-tower"] .cc-kpi-value {
  font-size: 19px; font-weight: 800; line-height: 1.1;
}
#cc-app[data-view="control-tower"] .cc-kpi-sub {
  font-size: 10px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* v1.0.h.7 — Map body fills the widget's grid height (was a hard 640px min,
   which overflowed the card when the widget was resized smaller and made the
   frame/header look broken). */
#cc-app[data-view="control-tower"] .cc-card-map .cc-card-body-flush {
  height: 100%;
  min-height: 0;
}

/* ─── Tabbed side panel ─────────────────────────────────────────── */
#cc-app .cc-card-side {
  overflow: hidden;
}
#cc-app .cc-side-head {
  padding: 10px 14px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
#cc-app .cc-side-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
#cc-app .cc-side-head-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #64748b;
}
#cc-app .cc-side-head .cc-trigger-btn {
  margin-left: 0;
  padding: 6px 12px;
  font-size: 12px;
}
#cc-app .cc-side-tabs {
  display: flex;
  gap: 2px;
  margin: 0 -14px;     /* extend to card edges */
}
#cc-app .cc-side-tab {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: #64748b;
  font-size: 12px; font-weight: 700;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
#cc-app .cc-side-tab:hover { background: rgba(14,165,233,0.05); color: #0f172a; }
#cc-app .cc-side-tab.is-active {
  background: #fff;
  border-bottom-color: #0ea5e9;
  color: #0f172a;
}
#cc-app .cc-side-tab-icon { font-size: 14px; }
#cc-app .cc-side-tab-label { white-space: nowrap; }
#cc-app .cc-side-tab-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 800;
  padding: 1px 6px; border-radius: 99px;
  background: rgba(15,23,42,0.08); color: #334155;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-side-tab.is-active .cc-side-tab-badge {
  background: rgba(14,165,233,0.15); color: #0369a1;
}
#cc-app .cc-side-tab-badge-live {
  font-family: inherit; font-size: 9.5px;
  background: rgba(22,163,74,0.15); color: #15803d;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px;
}
#cc-app .cc-side-tab-badge-eur {
  background: rgba(34,197,94,0.15); color: #15803d;
}

/* Body holds all 3 panels; only active is rendered */
#cc-app .cc-side-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
#cc-app .cc-side-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
#cc-app .cc-side-panel.is-active { display: flex; }
#cc-app .cc-side-panel[hidden] { display: none !important; }

#cc-app .cc-side-panel-subhead {
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11.5px; color: #475569;
  font-weight: 600;
}

/* Override panel-level max-heights since the side card now scrolls */
#cc-app .cc-card-side .cc-card-exceptions .cc-card-body { max-height: none; overflow: visible; }
#cc-app .cc-side-panel #cc-exception-panel { max-height: none; padding: 0; }
#cc-app .cc-side-panel .cc-bgopti-panel { padding: 0; }
#cc-app .cc-side-panel .cc-ticker { padding: 0; }

/* Toast wrapper inside the side panel */
#cc-app .cc-side-panel .cc-exc-toasts { padding: 8px 12px 0; }

/* v0.9.47 — Deep-dive CTA on Value Leakage cards (CFO drill-down) */
#cc-app[data-view="vl"] .cc-vl-card-deepdive {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  background: #0c4a6e;
  color: #fff;
  font-size: 11px; font-weight: 700;
  text-decoration: none;
  border-radius: 5px;
  transition: background 120ms ease, transform 120ms ease;
  letter-spacing: 0.3px;
}
#cc-app[data-view="vl"] .cc-vl-card-deepdive:hover {
  background: #075985;
  transform: translateY(-1px);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * v0.9.47 — ULD Recovery Cockpit
 * Distinct visual identity (darker, command-center feel).
 * ═══════════════════════════════════════════════════════════════════════ */

#cc-app[data-view="uld-ops"] {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 100%;
  padding-bottom: 40px;
}

/* Header — darker than other views */
#cc-app[data-view="uld-ops"] .cc-uld-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  color: #f1f5f9;
}
#cc-app[data-view="uld-ops"] .cc-uld-header-brand {
  display: flex; align-items: center; gap: 14px;
}
#cc-app[data-view="uld-ops"] .cc-uld-header-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45));
}
#cc-app[data-view="uld-ops"] .cc-uld-header-title {
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: 0.2px;
}
#cc-app[data-view="uld-ops"] .cc-uld-header-tagline {
  font-size: 12px; color: #94a3b8; margin-top: 2px;
}
#cc-app[data-view="uld-ops"] .cc-uld-header-meta {
  display: flex; align-items: center; gap: 8px;
}
#cc-app[data-view="uld-ops"] .cc-uld-header-pill {
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}
#cc-app[data-view="uld-ops"] .cc-uld-header-pill-live {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.30);
  background: rgba(52, 211, 153, 0.10);
}

/* Hero KPI strip */
#cc-app[data-view="uld-ops"] .cc-uld-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 18px 22px;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-placeholder {
  grid-column: 1 / -1;
  text-align: center; color: #94a3b8;
  padding: 28px;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card {
  display: block;
  text-decoration: none; color: inherit;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  padding: 14px 14px 12px;
  transition: all 160ms ease;
  cursor: pointer;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card:hover {
  border-color: #0ea5e9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.10);
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-icon { font-size: 16px; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-name {
  font-size: 11px; font-weight: 800; color: var(--cc-text);
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-current {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 800; color: var(--cc-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-sub {
  font-size: 10.5px; color: #64748b;
  margin-top: 2px;
  margin-bottom: 10px;
  min-height: 14px;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-foot {
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 3px;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-row {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-row-lbl { color: #94a3b8; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-row-val { font-weight: 700; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-row-bad  { color: #b91c1c; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-card-row-good { color: #15803d; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-tone-bad  .cc-uld-kpi-card-current { color: #b91c1c; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-tone-warn .cc-uld-kpi-card-current { color: #b45309; }
#cc-app[data-view="uld-ops"] .cc-uld-kpi-tone-good .cc-uld-kpi-card-current { color: #15803d; }

@media (max-width: 1100px) {
  #cc-app[data-view="uld-ops"] .cc-uld-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  #cc-app[data-view="uld-ops"] .cc-uld-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Deep-dive sections */
#cc-app[data-view="uld-ops"] .cc-uld-section {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  margin: 18px 22px;
  overflow: hidden;
  scroll-margin-top: 12px;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cc-line);
  background: var(--cc-surface-2);
}
#cc-app[data-view="uld-ops"] .cc-uld-section-icon {
  font-size: 22px;
  width: 38px; height: 38px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-title {
  flex: 1;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-name {
  font-size: 16px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="uld-ops"] .cc-uld-section-uc {
  font-size: 12px; color: var(--cc-muted); margin-top: 3px;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-uc b { color: var(--cc-brand); font-weight: 700; }
#cc-app[data-view="uld-ops"] .cc-uld-section-method {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: help;
  white-space: nowrap;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-body {
  padding: 16px 20px 20px;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-explainer {
  font-size: 12.5px; line-height: 1.55; color: #475569;
  margin-bottom: 14px;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-explainer b { color: #0f172a; font-weight: 700; }
#cc-app[data-view="uld-ops"] .cc-uld-section-placeholder {
  text-align: center;
  padding: 24px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fafbfc;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-placeholder-icon { font-size: 26px; opacity: 0.6; }
#cc-app[data-view="uld-ops"] .cc-uld-section-placeholder-title {
  font-size: 12px; font-weight: 700; color: #475569;
  margin-top: 6px;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-placeholder-body {
  font-size: 11.5px; color: #94a3b8;
  margin-top: 8px; max-width: 480px;
  margin-left: auto; margin-right: auto;
  line-height: 1.5;
}
#cc-app[data-view="uld-ops"] .cc-uld-section-placeholder-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11.5px; font-weight: 700;
  color: #0c4a6e; text-decoration: none;
}

/* Embedded widgets */
#cc-app[data-view="uld-ops"] .cc-uld-embed {
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-name {
  font-size: 12px; font-weight: 800; color: #0f172a;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-link {
  font-size: 11px; font-weight: 700;
  color: #0c4a6e; text-decoration: none;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-summary {
  font-size: 11.5px; color: #475569;
  margin-bottom: 8px;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-summary b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #b91c1c; font-weight: 800;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-row {
  display: grid;
  grid-template-columns: 130px 60px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-id {
  background: #fef2f2; color: #991b1b;
  padding: 2px 8px; border-radius: 3px;
  font-weight: 700;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-station { color: #64748b; }
#cc-app[data-view="uld-ops"] .cc-uld-embed-when { color: #475569; }
#cc-app[data-view="uld-ops"] .cc-uld-embed-eur {
  font-weight: 800; color: #b91c1c;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-empty {
  text-align: center;
  color: #15803d;
  font-size: 11.5px;
  padding: 16px;
  background: #f0fdf4;
  border: 1px dashed #bbf7d0;
  border-radius: 6px;
}

/* Utilisation embed meter */
#cc-app[data-view="uld-ops"] .cc-uld-embed-meter-track {
  position: relative;
  height: 26px;
  background: linear-gradient(90deg, #fee2e2 0%, #fef3c7 50%, #dcfce7 100%);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 18px 0 22px;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-meter-tick {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: rgba(15,23,42,0.45);
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-meter-tick span {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 700;
  color: #475569;
  white-space: nowrap;
}
#cc-app[data-view="uld-ops"] .cc-uld-embed-meter-current {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  background: #0f172a; color: #fff;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800;
  transition: left 360ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 2px 8px rgba(15,23,42,0.25);
}

/* v0.9.48 — Sim Config drawer: number input + toggle */
#cc-app .cc-sim-cfg-num {
  width: 100%;
  padding: 7px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--cc-line);
  border-radius: 5px;
  background: var(--cc-surface);
  color: var(--cc-text);
  outline: none;
}
#cc-app .cc-sim-cfg-num:focus {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
#cc-app .cc-sim-cfg-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--cc-text);
}
#cc-app .cc-sim-cfg-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  cursor: pointer;
}

/* v0.9.48 — Geo map section in cockpit */
#cc-app[data-view="uld-ops"] .cc-uld-geo {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  margin: 0 22px 18px;
  overflow: hidden;
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 8px;
  gap: 12px;
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-title {
  font-size: 14px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-sub {
  font-size: 11.5px; color: var(--cc-muted);
  margin-top: 3px;
}
#cc-app[data-view="uld-ops"] .cc-uld-sensor-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid;
}
#cc-app[data-view="uld-ops"] .cc-uld-sensor-pill.is-on {
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.30);
  color: #15803d;
}
#cc-app[data-view="uld-ops"] .cc-uld-sensor-pill.is-off {
  background: rgba(217, 119, 6, 0.10);
  border-color: rgba(217, 119, 6, 0.30);
  color: #b45309;
}
#cc-app[data-cc-theme="dark"][data-view="uld-ops"] .cc-uld-sensor-pill.is-on  { color: #34d399; }
#cc-app[data-cc-theme="dark"][data-view="uld-ops"] .cc-uld-sensor-pill.is-off { color: #fbbf24; }
#cc-app[data-view="uld-ops"] .cc-uld-sensor-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}
#cc-app[data-view="uld-ops"] .cc-uld-sensor-pill.is-on .cc-uld-sensor-pill-dot {
  animation: cc-uld-pulse 1.6s ease-in-out infinite;
}
@keyframes cc-uld-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,0.10); }
  50%      { box-shadow: 0 0 0 6px rgba(52,211,153,0.05); }
}

#cc-app[data-view="uld-ops"] .cc-uld-geo-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 18px 12px;
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-filter {
  background: transparent;
  border: 1px solid var(--cc-line);
  color: var(--cc-text-2);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-filter:hover {
  background: var(--cc-surface-3);
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-filter.is-active {
  background: var(--cc-text);
  color: var(--cc-surface);
  border-color: var(--cc-text);
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-map {
  width: 100%; height: 380px;
  background: var(--cc-surface-3);
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid var(--cc-line);
  background: var(--cc-surface-2);
  font-size: 11px; color: var(--cc-muted);
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-leg {
  display: inline-flex; align-items: center; gap: 6px;
}
#cc-app[data-view="uld-ops"] .cc-uld-geo-leg-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
#cc-app .cc-uld-leg-dot-earning  { background: #16a34a; }
#cc-app .cc-uld-leg-dot-idle     { background: #94a3b8; }
#cc-app .cc-uld-leg-dot-customer { background: #d97706; }
#cc-app .cc-uld-leg-dot-leaking  { background: #dc2626; }

/* Geo marker (Leaflet divIcon) — v0.9.48.1 compacter horizontal layout */
#cc-app .cc-uld-geo-marker-wrap { background: transparent; border: 0; }
#cc-app .cc-uld-geo-marker {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff;
  border: 2px solid;
  border-radius: 6px;
  padding: 2px 6px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.20);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
#cc-app .cc-uld-geo-marker.cc-uld-leg-dot-earning  { border-color: #16a34a; }
#cc-app .cc-uld-geo-marker.cc-uld-leg-dot-idle     { border-color: #94a3b8; }
#cc-app .cc-uld-geo-marker.cc-uld-leg-dot-customer { border-color: #d97706; }
#cc-app .cc-uld-geo-marker.cc-uld-leg-dot-leaking  { border-color: #dc2626; }
#cc-app .cc-uld-geo-marker-code {
  font-size: 10px; font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.2px;
}
#cc-app .cc-uld-geo-marker-sep {
  width: 1px; height: 10px;
  background: rgba(15,23,42,0.20);
}
#cc-app .cc-uld-geo-marker-count {
  font-size: 11px; font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-uld-geo-marker-dirs {
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid rgba(15,23,42,0.20);
  font-size: 10px; font-weight: 700;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
#cc-app[data-cc-theme="dark"] .cc-uld-geo-marker-dirs {
  color: #94a3b8;
}
#cc-app[data-cc-theme="dark"] .cc-uld-geo-marker {
  background: #1a2336;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
#cc-app[data-cc-theme="dark"] .cc-uld-geo-marker-code { color: #f1f5f9; }
#cc-app[data-cc-theme="dark"] .cc-uld-geo-marker-count { color: #f1f5f9; }

/* Geo popup */
#cc-app .cc-uld-geo-popup-title {
  font-size: 13px; font-weight: 800;
  margin-bottom: 6px;
  color: #0f172a;
}
#cc-app .cc-uld-geo-popup-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 11.5px;
  color: #475569;
  margin-bottom: 6px;
}
#cc-app .cc-uld-geo-popup-stats b {
  color: #0f172a; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app .cc-uld-geo-popup-leaking {
  background: #fee2e2; color: #991b1b;
  padding: 4px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  margin-bottom: 6px;
}
#cc-app .cc-uld-geo-popup-sensor {
  font-size: 10.5px;
  padding: 3px 7px; border-radius: 3px;
  display: inline-block;
}
#cc-app .cc-uld-geo-popup-sensor-on  { background: #dcfce7; color: #166534; }
#cc-app .cc-uld-geo-popup-sensor-off { background: #fef3c7; color: #92400e; }

/* v0.9.48 — Optimisation model picker pill (in cockpit header) */
#cc-app[data-view="uld-ops"] .cc-uld-model-picker {
  position: relative;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-pill:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-pill-label {
  font-size: 9.5px; opacity: 0.6;
  text-transform: uppercase; letter-spacing: 0.4px;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-pill-name {
  font-weight: 700;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-pill-chev {
  font-size: 9px; opacity: 0.6;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(15,23,42,0.20);
  padding: 6px;
  /* v0.9.52 — was z:100 → covered by Leaflet map (z:400). Lift well above. */
  z-index: 9800;
}
#cc-app[data-cc-theme="dark"][data-view="uld-ops"] .cc-uld-model-menu {
  background: #131c2e;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
#cc-app[data-view="uld-ops"] .cc-uld-model-menu-head {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: #94a3b8;
  padding: 8px 10px 6px;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item {
  width: 100%;
  background: transparent;
  border: 0;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  color: var(--cc-text);
  font-family: inherit;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item:hover {
  background: var(--cc-surface-3);
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item.is-active {
  background: rgba(14, 165, 233, 0.12);
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item-icon {
  font-size: 16px;
  flex-shrink: 0;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item-body {
  flex: 1; min-width: 0;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--cc-text);
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item-desc {
  font-size: 11px;
  color: var(--cc-muted);
  margin-top: 2px;
  line-height: 1.4;
}
#cc-app[data-view="uld-ops"] .cc-uld-model-item-check {
  color: #0ea5e9; font-weight: 700;
  align-self: center;
}

/* v0.9.51 — In-cockpit ULD recovery priorities (4 levers) */
#cc-app[data-view="uld-ops"] .cc-uld-priorities {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  margin: 0 22px 18px;
  padding: 16px 18px;
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-title {
  font-size: 14px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-sub {
  font-size: 12px; color: var(--cc-muted);
  margin-top: 3px;
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-actions {
  display: flex; align-items: center; gap: 8px;
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-link {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.35);
  color: #0ea5e9;
  font-size: 11.5px; font-weight: 700;
  border-radius: 5px;
  text-decoration: none;
  transition: all 140ms ease;
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-link:hover {
  background: #0ea5e9;
  color: #fff;
}

/* 2x2 grid on wide screens, 1-col stack on narrow */
#cc-app[data-view="uld-ops"] .cc-uld-priorities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
@media (max-width: 900px) {
  #cc-app[data-view="uld-ops"] .cc-uld-priorities-grid {
    grid-template-columns: 1fr;
  }
}
#cc-app[data-view="uld-ops"] .cc-uld-prio-row {
  padding: 6px 0;
}
#cc-app[data-view="uld-ops"] .cc-uld-prio-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
#cc-app[data-view="uld-ops"] .cc-uld-prio-icon { font-size: 14px; }
#cc-app[data-view="uld-ops"] .cc-uld-prio-name {
  flex: 1;
  font-size: 12.5px; font-weight: 700; color: var(--cc-text);
}
#cc-app[data-view="uld-ops"] .cc-uld-prio-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 800;
  color: var(--cc-text);
  font-variant-numeric: tabular-nums;
  background: var(--cc-surface-3);
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 36px; text-align: center;
}
#cc-app[data-view="uld-ops"] .cc-uld-prio-slider {
  width: 100%;
  margin: 4px 0;
  accent-color: #0ea5e9;
}
#cc-app[data-view="uld-ops"] .cc-uld-prio-desc {
  font-size: 11px; color: var(--cc-muted);
  line-height: 1.45;
}
#cc-app[data-view="uld-ops"] .cc-uld-priorities-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--cc-surface-3);
  border-left: 3px solid #0ea5e9;
  border-radius: 4px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--cc-text-2);
}

#cc-app[data-view="uld-ops"] .cc-uld-footer-note {
  margin: 22px;
  padding: 12px 18px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  font-size: 12px; color: #64748b;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
 * v0.9.50 — CMP Optimization Flow · Priorities page
 * ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="optimisation"] {
  background: var(--cc-bg);
  padding-bottom: 30px;
}
#cc-app[data-view="optimisation"] .cc-opti-header {
  background: var(--cc-header-bg);
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  color: #f1f5f9;
}
#cc-app[data-view="optimisation"] .cc-opti-header-brand {
  display: flex; align-items: center; gap: 14px;
}
#cc-app[data-view="optimisation"] .cc-opti-header-icon {
  font-size: 26px;
}
#cc-app[data-view="optimisation"] .cc-opti-header-title {
  font-size: 17px; font-weight: 800; color: #fff;
  letter-spacing: 0.2px;
}
#cc-app[data-view="optimisation"] .cc-opti-header-tagline {
  font-size: 12px; color: #94a3b8; margin-top: 2px;
}
#cc-app[data-view="optimisation"] .cc-opti-header-meta {
  display: flex; gap: 8px; align-items: center;
}

/* Preset row */
#cc-app[data-view="optimisation"] .cc-opti-presets {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--cc-surface);
  border-bottom: 1px solid var(--cc-line);
  align-items: center;
}
#cc-app[data-view="optimisation"] .cc-opti-presets-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--cc-muted);
  margin-right: 4px;
}
#cc-app[data-view="optimisation"] .cc-opti-preset {
  background: transparent;
  border: 1px solid var(--cc-line);
  color: var(--cc-text-2);
  font-size: 12px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 140ms ease;
}
#cc-app[data-view="optimisation"] .cc-opti-preset:hover {
  background: var(--cc-surface-3);
  color: var(--cc-text);
}
#cc-app[data-view="optimisation"] .cc-opti-preset.is-active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}
#cc-app[data-view="optimisation"] .cc-opti-preset-reset {
  margin-left: auto;
  color: var(--cc-muted);
}

/* Grid layout */
#cc-app[data-view="optimisation"] .cc-opti-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  padding: 18px 22px;
}
@media (max-width: 1100px) {
  #cc-app[data-view="optimisation"] .cc-opti-grid {
    grid-template-columns: 1fr;
  }
}
#cc-app[data-view="optimisation"] .cc-opti-controls {
  display: flex; flex-direction: column; gap: 16px;
}

/* Section card */
#cc-app[data-view="optimisation"] .cc-opti-section {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  padding: 16px 18px;
}
#cc-app[data-view="optimisation"] .cc-opti-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
#cc-app[data-view="optimisation"] .cc-opti-section-title {
  font-size: 14px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="optimisation"] .cc-opti-section-sub {
  font-size: 11.5px; color: var(--cc-muted);
  margin-top: 3px;
}
#cc-app[data-view="optimisation"] .cc-opti-sum {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  white-space: nowrap;
}
#cc-app[data-view="optimisation"] .cc-opti-sum.is-off {
  background: #fee2e2;
  color: #b91c1c;
}

/* Sliders */
#cc-app[data-view="optimisation"] .cc-opti-sliders {
  display: flex; flex-direction: column; gap: 14px;
}
#cc-app[data-view="optimisation"] .cc-opti-slider-row {
  padding: 8px 0;
  border-top: 1px solid var(--cc-line-2);
}
#cc-app[data-view="optimisation"] .cc-opti-slider-row:first-child { border-top: 0; padding-top: 0; }
#cc-app[data-view="optimisation"] .cc-opti-slider-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
#cc-app[data-view="optimisation"] .cc-opti-slider-icon { font-size: 14px; }
#cc-app[data-view="optimisation"] .cc-opti-slider-name {
  flex: 1;
  font-size: 12.5px; font-weight: 700; color: var(--cc-text);
}
#cc-app[data-view="optimisation"] .cc-opti-slider-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 800;
  color: var(--cc-text);
  font-variant-numeric: tabular-nums;
  background: var(--cc-surface-3);
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 36px; text-align: center;
}
#cc-app[data-view="optimisation"] .cc-opti-slider {
  width: 100%;
  margin: 4px 0;
  accent-color: #0ea5e9;
}
#cc-app[data-view="optimisation"] .cc-opti-slider-desc {
  font-size: 11px; color: var(--cc-muted);
  line-height: 1.45;
}

/* Engine picker cards */
#cc-app[data-view="optimisation"] .cc-opti-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 700px) {
  #cc-app[data-view="optimisation"] .cc-opti-models { grid-template-columns: 1fr; }
}
#cc-app[data-view="optimisation"] .cc-opti-model-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: transparent;
  border: 1px solid var(--cc-line);
  border-radius: 7px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--cc-text);
  position: relative;
  transition: all 140ms ease;
}
#cc-app[data-view="optimisation"] .cc-opti-model-card:hover {
  background: var(--cc-surface-3);
}
#cc-app[data-view="optimisation"] .cc-opti-model-card.is-active {
  border-color: #0ea5e9;
  background: rgba(14,165,233,0.08);
}
#cc-app[data-view="optimisation"] .cc-opti-model-card.is-resolved {
  border-style: dashed;
}
#cc-app[data-view="optimisation"] .cc-opti-model-icon {
  font-size: 18px;
  flex-shrink: 0;
}
#cc-app[data-view="optimisation"] .cc-opti-model-body { flex: 1; min-width: 0; }
#cc-app[data-view="optimisation"] .cc-opti-model-name {
  font-size: 12.5px; font-weight: 700; color: var(--cc-text);
  display: flex; align-items: center; gap: 6px;
}
#cc-app[data-view="optimisation"] .cc-opti-model-tag {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  background: #ede9fe; color: #6d28d9;
  padding: 1px 6px; border-radius: 3px;
}
#cc-app[data-view="optimisation"] .cc-opti-model-desc {
  font-size: 11px; color: var(--cc-muted);
  margin-top: 3px;
  line-height: 1.45;
}
#cc-app[data-view="optimisation"] .cc-opti-model-check {
  color: #0ea5e9;
  font-size: 16px;
}
#cc-app[data-view="optimisation"] .cc-opti-model-resolved {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  background: rgba(14,165,233,0.15);
  color: #0ea5e9;
  padding: 2px 6px; border-radius: 3px;
  align-self: flex-start;
}

/* Live preview */
#cc-app[data-view="optimisation"] .cc-opti-preview {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  padding: 16px 18px;
  align-self: flex-start;
  position: sticky;
  top: 18px;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-head { margin-bottom: 12px; }
#cc-app[data-view="optimisation"] .cc-opti-preview-title {
  font-size: 13px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="optimisation"] .cc-opti-preview-sub {
  font-size: 11.5px; color: var(--cc-muted);
  margin-top: 3px;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-empty {
  text-align: center;
  font-size: 11.5px;
  color: var(--cc-muted);
  padding: 30px 12px;
  background: var(--cc-surface-3);
  border-radius: 6px;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-list {
  display: flex; flex-direction: column; gap: 8px;
}
/* v0.9.53 — engine signature badge above preview rows */
#cc-app[data-view="optimisation"] .cc-opti-preview-engine {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: rgba(14,165,233,0.10);
  border: 1px solid rgba(14,165,233,0.30);
  border-radius: 5px;
  margin-bottom: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-engine-row {
  display: flex; align-items: center; justify-content: space-between;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-engine-behaviour {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px; font-style: italic;
  color: var(--cc-muted);
  line-height: 1.4;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-engine-name {
  font-weight: 800;
  color: #0c4a6e;
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-cc-theme="dark"][data-view="optimisation"] .cc-opti-preview-engine-name {
  color: #38bdf8;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-engine-stats {
  color: var(--cc-muted);
}
#cc-app[data-view="optimisation"] .cc-opti-preview-engine-pending {
  background: rgba(217,119,6,0.08);
  border-color: rgba(217,119,6,0.30);
}
#cc-app[data-view="optimisation"] .cc-opti-preview-engine-pending .cc-opti-preview-engine-name {
  color: #b45309;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-row {
  display: flex; gap: 10px;
  padding: 8px 10px;
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-line-2);
  border-radius: 6px;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-rank {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 50%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800;
  color: var(--cc-text);
  flex-shrink: 0;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-body { flex: 1; min-width: 0; }
#cc-app[data-view="optimisation"] .cc-opti-preview-head-row {
  display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-id {
  background: #fef2f2; color: #991b1b;
  padding: 2px 7px; border-radius: 3px;
  font-weight: 700;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-station { color: var(--cc-muted); }
#cc-app[data-view="optimisation"] .cc-opti-preview-eur {
  margin-left: auto;
  font-weight: 800; color: #b91c1c;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-bar {
  height: 6px;
  background: var(--cc-surface-3);
  border-radius: 3px;
  margin: 6px 0 4px;
  overflow: hidden;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #0284c7);
  transition: width 320ms ease;
}
#cc-app[data-view="optimisation"] .cc-opti-preview-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--cc-muted);
}

/* v0.9.51 — "When do these apply?" callout on Priorities page */
#cc-app[data-view="optimisation"] .cc-opti-applies {
  margin: 14px 22px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55;
  color: #075985;
}
#cc-app[data-cc-theme="dark"][data-view="optimisation"] .cc-opti-applies {
  background: rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.30);
  color: #7dd3fc;
}
#cc-app[data-view="optimisation"] .cc-opti-applies-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: #0ea5e9;
}
#cc-app[data-view="optimisation"] .cc-opti-applies-body b {
  color: #0c4a6e; font-weight: 700;
}
#cc-app[data-cc-theme="dark"][data-view="optimisation"] .cc-opti-applies-body b {
  color: #e0f2fe;
}
#cc-app[data-view="optimisation"] .cc-opti-applies-roadmap {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
  font-style: italic;
}

#cc-app[data-view="optimisation"] .cc-opti-footer-note {
  margin: 18px 22px;
  padding: 10px 14px;
  background: var(--cc-surface-3);
  border: 1px dashed var(--cc-line);
  border-radius: 6px;
  font-size: 11.5px; color: var(--cc-muted);
  text-align: center;
}

/* ─── 10. Stub renderer (kept for the views that haven't shipped yet) ──── */

#cc-app .cc-stub {
  /* Inline styles in PHP cover the look — nothing to add here. */
}

/* ─── 11. Airline / CMS view — Sprint 3 scaffold (v0.9.42) ─────────────── */
/* Mirrors the visual language of view-land.php but airline-flavoured.    */

#cc-app[data-view="cms"] .cc-cms-statstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 14px 18px;
}
#cc-app[data-view="cms"] .cc-cms-stat {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line-2);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
#cc-app[data-view="cms"] .cc-cms-stat-label {
  font-size: 10.5px; color: var(--cc-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-view="cms"] .cc-cms-stat-value {
  font-size: 28px; font-weight: 800; color: var(--cc-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#cc-app[data-view="cms"] .cc-cms-stat-sub {
  font-size: 11px; color: var(--cc-muted);
}
#cc-app[data-view="cms"] .cc-cms-stat-good .cc-cms-stat-value { color: #15803d; }
#cc-app[data-view="cms"] .cc-cms-stat-warn .cc-cms-stat-value { color: #b45309; }
#cc-app[data-view="cms"] .cc-cms-stat-bad  .cc-cms-stat-value { color: #b91c1c; }

/* Sections */
#cc-app[data-view="cms"] .cc-cms-section {
  background: var(--cc-surface);
  margin: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--cc-line-2);
  /* v0.9.44.1 — was "overflow: hidden" but that clipped ULD-chip hover
     popovers when chips were near the section edge. Visible is safe
     because the inner list has its own overflow: auto. */
  overflow: visible;
}
#cc-app[data-view="cms"] .cc-cms-section-placeholder {
  border-style: dashed;
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #fdfdfe 0%, #f8fafc 100%);
}
#cc-app[data-view="cms"] .cc-cms-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px; gap: 18px; flex-wrap: wrap;
  background: var(--cc-surface-2);
  border-bottom: 1px solid var(--cc-line-2);
}
#cc-app[data-view="cms"] .cc-cms-section-title {
  font-size: 15px; font-weight: 800; color: var(--cc-text);
}
#cc-app[data-view="cms"] .cc-cms-section-sub {
  font-size: 12px; color: var(--cc-muted); margin-top: 3px;
}
#cc-app[data-view="cms"] .cc-cms-section-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  background: #dbeafe; color: #1e40af;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
#cc-app[data-view="cms"] .cc-cms-section-body {
  padding: 18px 20px;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-note {
  font-size: 12.5px; color: var(--cc-muted); line-height: 1.55;
  margin-top: 14px;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-note code {
  background: #e2e8f0; color: #0f172a;
  padding: 1px 6px; border-radius: 3px;
  font-size: 11.5px;
}

/* Lifecycle strip (placeholder) */
#cc-app[data-view="cms"] .cc-cms-placeholder-grid {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-step {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800;
  padding: 8px 12px; border-radius: 6px;
  background: #f1f5f9; color: #94a3b8;
  border: 1px solid #e2e8f0;
  min-width: 50px; text-align: center;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-step.is-done {
  background: #dcfce7; color: #166534; border-color: #bbf7d0;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-step.is-active {
  background: #dbeafe; color: #1e40af; border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
#cc-app[data-view="cms"] .cc-cms-placeholder-arrow {
  color: #cbd5e1; font-weight: 600;
}

/* Slot grid (placeholder) */
#cc-app[data-view="cms"] .cc-cms-placeholder-slots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-slot {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 6px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 700; color: #475569;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-slot small {
  font-size: 10px; color: #94a3b8; font-weight: 600;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-slot.is-empty { background: #f1f5f9; color: #cbd5e1; }
#cc-app[data-view="cms"] .cc-cms-placeholder-slot.is-busy {
  background: #fef3c7; border-color: #fde68a; color: #92400e;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-slot.is-busy small { color: #b45309; }
#cc-app[data-view="cms"] .cc-cms-placeholder-slot.is-full {
  background: #fee2e2; border-color: #fecaca; color: #991b1b;
}
#cc-app[data-view="cms"] .cc-cms-placeholder-slot.is-full small { color: #b91c1c; }

/* Responsive — collapse strip on narrow screens */
@media (max-width: 900px) {
  #cc-app[data-view="cms"] .cc-cms-statstrip {
    grid-template-columns: repeat(2, 1fr);
  }
  #cc-app[data-view="cms"] .cc-cms-placeholder-slots {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── v0.9.43 — AWB lifecycle screen (ac_s3_a) ─────────────────────── */

#cc-app[data-view="cms"] .cc-cms-lifecycle-controls {
  display: flex; align-items: center; gap: 6px;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-count {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: #15803d;
  background: #dcfce7;
  padding: 4px 10px; border-radius: 999px;
  margin-right: 8px;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-filter {
  background: transparent; border: 1px solid #e2e8f0;
  color: #64748b; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 5px; cursor: pointer;
  transition: all 120ms ease;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-filter:hover {
  background: #f1f5f9; color: #334155;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-filter.is-active {
  background: #0f172a; color: #fff; border-color: #0f172a;
}
/* "?" help toggle — re-show / re-hide the dismissible help panel */
#cc-app[data-view="cms"] .cc-cms-help-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 13px; font-weight: 700; font-family: -apple-system, sans-serif;
  border-radius: 50%;
  cursor: pointer;
  transition: all 120ms ease;
}
#cc-app[data-view="cms"] .cc-cms-help-toggle:hover {
  background: #0ea5e9; color: #fff; border-color: #0ea5e9;
}

/* Demurrage filter — visually distinct since it's a high-value workflow */
#cc-app[data-view="cms"] .cc-cms-lifecycle-filter-demur {
  color: #b91c1c; border-color: #fecaca;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-filter-demur:hover {
  background: #fee2e2; color: #991b1b;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-filter-demur.is-active {
  background: #b91c1c; color: #fff; border-color: #b91c1c;
}
/* v0.9.44.1 — Bound + scrollable + user-resizable (drag bottom-right
   corner). Default height tuned to ~5 rows visible; user can shrink to 3
   rows or grow to 12 rows. The actual rendered list is capped at 20 rows
   in JS to keep memory bounded. */
#cc-app[data-view="cms"] .cc-cms-lifecycle-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 560px;
  min-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  resize: vertical;
  padding-right: 4px;   /* breathing room for the scrollbar */
  scroll-behavior: smooth;
}
/* Tidy scrollbar */
#cc-app[data-view="cms"] .cc-cms-lifecycle-list::-webkit-scrollbar { width: 8px; }
#cc-app[data-view="cms"] .cc-cms-lifecycle-list::-webkit-scrollbar-track {
  background: #f1f5f9; border-radius: 4px;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-list::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 4px;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* Visible "scroll hint" gradient at top + bottom edges */
#cc-app[data-view="cms"] .cc-cms-section-body {
  position: relative;
}
#cc-app[data-view="cms"] .cc-cms-section-body::before,
#cc-app[data-view="cms"] .cc-cms-section-body::after {
  content: '';
  position: absolute; left: 20px; right: 28px;
  height: 14px;
  pointer-events: none;
  z-index: 2;
}
#cc-app[data-view="cms"] .cc-cms-section-body::before {
  top: 18px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0));
}
#cc-app[data-view="cms"] .cc-cms-section-body::after {
  bottom: 18px;
  background: linear-gradient(0deg, #fff, rgba(255,255,255,0));
}
/* Resize hint */
#cc-app[data-view="cms"] .cc-cms-lifecycle-resize-hint {
  display: flex; justify-content: flex-end;
  margin-top: 4px;
  font-size: 10.5px; color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: none;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-empty {
  text-align: center; color: #94a3b8; font-size: 13px;
  padding: 30px 16px;
}

/* Single AWB row */
#cc-app[data-view="cms"] .cc-cms-life-row {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#cc-app[data-view="cms"] .cc-cms-life-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
#cc-app[data-view="cms"] .cc-cms-life-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
#cc-app[data-view="cms"] .cc-cms-life-awb {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 700; color: #0f172a;
  background: #e0f2fe; padding: 3px 8px; border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}
#cc-app[data-view="cms"] .cc-cms-life-awb:hover {
  background: #0ea5e9; color: #fff;
}
#cc-app[data-view="cms"] .cc-cms-life-route {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; color: #334155;
}
#cc-app[data-view="cms"] .cc-cms-life-meta {
  font-size: 11.5px; color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="cms"] .cc-cms-cutoff-pill {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#cc-app[data-view="cms"] .cc-cms-cutoff-pill.is-safe { background: #dcfce7; color: #15803d; }
#cc-app[data-view="cms"] .cc-cms-cutoff-pill.is-warn { background: #fef3c7; color: #b45309; }
#cc-app[data-view="cms"] .cc-cms-cutoff-pill.is-bad  { background: #fee2e2; color: #b91c1c; }

/* Lifecycle strip */
#cc-app[data-view="cms"] .cc-cms-life-strip {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
#cc-app[data-view="cms"] .cc-cms-life-mile {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 9px; border-radius: 4px;
  background: #f1f5f9; color: #94a3b8;
  border: 1px solid #e2e8f0;
  min-width: 42px; text-align: center;
}
#cc-app[data-view="cms"] .cc-cms-life-mile.is-done {
  background: #dcfce7; color: #166534; border-color: #bbf7d0;
}
#cc-app[data-view="cms"] .cc-cms-life-mile.is-active {
  background: #0ea5e9; color: #fff; border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.20);
}
#cc-app[data-view="cms"] .cc-cms-life-arrow {
  color: #cbd5e1; font-size: 14px;
}

/* Foot row: ULD chips + dwell */
#cc-app[data-view="cms"] .cc-cms-life-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed #e2e8f0;
}
#cc-app[data-view="cms"] .cc-cms-life-ulds {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1;
}
#cc-app[data-view="cms"] .cc-cms-life-dwell {
  font-size: 11px; color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

/* ULD chip — the most-scanned element */
#cc-app[data-view="cms"] .cc-cms-uld-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  cursor: help;
}
#cc-app[data-view="cms"] .cc-cms-uld-chip.is-high {
  background: #fef3c7; border-color: #fde68a; color: #92400e;
}
#cc-app[data-view="cms"] .cc-cms-uld-chip.is-full {
  background: #fee2e2; border-color: #fecaca; color: #991b1b;
}
#cc-app[data-view="cms"] .cc-cms-uld-id {
  letter-spacing: 0.3px;
}
#cc-app[data-view="cms"] .cc-cms-uld-pct {
  font-size: 10px; opacity: 0.85;
  padding: 1px 6px;
  background: rgba(255,255,255,0.55);
  border-radius: 3px;
}
#cc-app[data-view="cms"] .cc-cms-uld-cold {
  color: #0ea5e9; font-size: 12px;
}
#cc-app[data-view="cms"] .cc-cms-uld-demur {
  background: #fee2e2; color: #991b1b;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700;
  margin-left: 2px;
}
#cc-app[data-view="cms"] .cc-cms-uld-none {
  font-size: 11px; color: #cbd5e1; font-style: italic;
}

/* ─── v0.9.44 — UX pass: explanations everywhere ─────────────────────── */

/* Stat help icons (ⓘ in each stat label) */
#cc-app[data-view="cms"] .cc-cms-stat-label {
  display: flex; align-items: center; gap: 6px;
}
#cc-app[data-view="cms"] .cc-cms-stat-help {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #e2e8f0; color: #64748b;
  font-size: 10px; font-weight: 700;
  cursor: help; outline: none;
  transition: background 120ms ease;
}
#cc-app[data-view="cms"] .cc-cms-stat-help:hover,
#cc-app[data-view="cms"] .cc-cms-stat-help:focus {
  background: #0ea5e9; color: #fff;
}
#cc-app[data-view="cms"] .cc-cms-stat-pop {
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: #0f172a; color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px; line-height: 1.5; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  padding: 9px 11px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.30);
  opacity: 0; pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 50;
}
#cc-app[data-view="cms"] .cc-cms-stat-pop::before {
  content: ''; position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #0f172a;
}
#cc-app[data-view="cms"] .cc-cms-stat-help:hover .cc-cms-stat-pop,
#cc-app[data-view="cms"] .cc-cms-stat-help:focus .cc-cms-stat-pop {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* How-to panel */
#cc-app[data-view="cms"] .cc-cms-howto {
  position: relative;
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  margin: 0 20px 14px;
  padding: 14px 18px 16px;
}
#cc-app[data-view="cms"] .cc-cms-howto-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0;
  color: #64748b; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
  border-radius: 4px;
}
#cc-app[data-view="cms"] .cc-cms-howto-close:hover {
  background: rgba(15,23,42,0.06); color: #0f172a;
}
#cc-app[data-view="cms"] .cc-cms-howto-title {
  font-size: 13px; font-weight: 800; color: #0c4a6e;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
#cc-app[data-view="cms"] .cc-cms-howto-title::before {
  content: 'ℹ'; font-size: 14px;
}
#cc-app[data-view="cms"] .cc-cms-howto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
#cc-app[data-view="cms"] .cc-cms-howto-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.5; color: #334155;
}
#cc-app[data-view="cms"] .cc-cms-howto-icon {
  font-size: 16px; line-height: 1.3;
  flex-shrink: 0;
}
#cc-app[data-view="cms"] .cc-cms-howto-item code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(15,23,42,0.07); color: #0f172a;
  padding: 1px 5px; border-radius: 3px;
  font-size: 10.5px;
}
#cc-app[data-view="cms"] .cc-cms-howto-item b { color: #0f172a; font-weight: 700; }

@media (max-width: 900px) {
  #cc-app[data-view="cms"] .cc-cms-howto-grid {
    grid-template-columns: 1fr;
  }
}

/* Standards citation above the lifecycle list — the tiles are Cargo-IMP FSU codes, say so once. */
#cc-app[data-view="cms"] .cc-cms-life-cite {
  font-size: 10.5px; line-height: 1.45; color: #64748b;
  padding: 0 0 8px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 8px;
}

/* Stage caption — plain-language under the lifecycle strip */
#cc-app[data-view="cms"] .cc-cms-life-stage-caption {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #475569;
  padding: 2px 0 8px;
  line-height: 1.4;
}
/* Off-chain (TRM/RCT/DIS/DDL): amber, because no tile on the strip is lit and the reader must not
   read the unlit strip as "nothing has happened yet". The pulse is dropped with it — the keyframes
   animate box-shadow, so an animated dot would keep the blue ring of the live-stage state. */
#cc-app[data-view="cms"] .cc-cms-life-stage-caption.is-offchain {
  color: #92400e;
}
#cc-app[data-view="cms"] .cc-cms-life-stage-caption.is-offchain .cc-cms-life-stage-dot {
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.20);
  animation: none;
}
#cc-app[data-view="cms"] .cc-cms-life-stage-caption b {
  color: #0c4a6e; font-weight: 700;
}
#cc-app[data-view="cms"] .cc-cms-life-stage-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.20);
  animation: cc-cms-stage-pulse 1.6s ease-in-out infinite;
}
@keyframes cc-cms-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(14,165,233,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(14,165,233,0.08); }
}

/* Cut-off pill — added a small "cut-off" label */
#cc-app[data-view="cms"] .cc-cms-cutoff-label {
  font-size: 9px; font-weight: 700; opacity: 0.7;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-right: 2px;
}

/* ULD chip popover — v0.9.44.2 switched to position:fixed so it never
   gets clipped by the scrollable list or section bounds. JS sets top/left
   on hover (see _positionUldPopover) and flips above ↔ below the chip
   depending on available viewport space. */
#cc-app[data-view="cms"] .cc-cms-uld-chip {
  position: relative;
  cursor: help;
}
#cc-app[data-view="cms"] .cc-cms-uld-pop {
  position: fixed;
  top: -9999px; left: -9999px;   /* off-screen until JS sets coords */
  width: 280px;
  background: #0f172a; color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px; line-height: 1.5; font-weight: 400;
  text-transform: none;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.35);
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9999;
  letter-spacing: normal;
}
#cc-app[data-view="cms"] .cc-cms-uld-pop b {
  color: #fff;
  font-weight: 700;
}
/* Arrow at bottom — for popover positioned ABOVE the chip (default) */
#cc-app[data-view="cms"] .cc-cms-uld-pop::after {
  content: ''; position: absolute;
  top: 100%; left: 16px;
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
/* Arrow at top — when JS flips popover BELOW the chip */
#cc-app[data-view="cms"] .cc-cms-uld-pop.is-below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}
#cc-app[data-view="cms"] .cc-cms-uld-chip:hover .cc-cms-uld-pop,
#cc-app[data-view="cms"] .cc-cms-uld-row-chip:hover .cc-cms-uld-pop {
  opacity: 1; transform: translateY(0);
}
/* v0.9.45.1 — Container fleet rows need cursor:help for the same affordance
   as ULD chips in the lifecycle view */
#cc-app[data-view="cms"] .cc-cms-uld-row-chip {
  cursor: help;
}

/* AWB search input */
#cc-app[data-view="cms"] .cc-cms-lifecycle-search-wrap {
  position: relative;
  display: inline-flex; align-items: center;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-search-icon {
  position: absolute;
  left: 9px;
  font-size: 12px; opacity: 0.55;
  pointer-events: none;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-search {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500;
  padding: 5px 11px 5px 28px;
  border: 1px solid #cbd5e1; border-radius: 5px;
  background: #fff; color: #0f172a;
  width: 170px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  outline: none;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-search::placeholder {
  color: #94a3b8; font-weight: 500;
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-search:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
#cc-app[data-view="cms"] .cc-cms-lifecycle-empty b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #0f172a; font-weight: 700;
}

/* ─── v0.9.45 — ac_uld_c · Container fleet (ULD pool) ────────────────── */

/* Inline ULD stat strip (sub-section, sits between header and how-to) */
#cc-app[data-view="cms"] .cc-cms-uld-statstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 14px 20px 4px;
}
#cc-app[data-view="cms"] .cc-cms-uld-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fafbfc;
}
#cc-app[data-view="cms"] .cc-cms-uld-stat-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: #64748b; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
#cc-app[data-view="cms"] .cc-cms-uld-stat-value {
  font-size: 22px; font-weight: 800; color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#cc-app[data-view="cms"] .cc-cms-uld-stat-sub {
  font-size: 10.5px; color: #94a3b8;
}

/* Station filter dropdown */
#cc-app[data-view="cms"] .cc-cms-uld-station-filter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 8px;
  border: 1px solid #cbd5e1; border-radius: 5px;
  background: #fff; color: #334155;
  cursor: pointer;
}
#cc-app[data-view="cms"] .cc-cms-uld-station-filter:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}

/* Bounded + scrollable list */
#cc-app[data-view="cms"] .cc-cms-uld-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 540px;
  min-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  resize: vertical;
  padding-right: 4px;
  scroll-behavior: smooth;
}
#cc-app[data-view="cms"] .cc-cms-uld-list::-webkit-scrollbar { width: 8px; }
#cc-app[data-view="cms"] .cc-cms-uld-list::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
#cc-app[data-view="cms"] .cc-cms-uld-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#cc-app[data-view="cms"] .cc-cms-uld-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Single ULD row */
#cc-app[data-view="cms"] .cc-cms-uld-row {
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 10px 14px;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#cc-app[data-view="cms"] .cc-cms-uld-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
#cc-app[data-view="cms"] .cc-cms-uld-row-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 700; color: #0f172a;
  background: #e0f2fe; padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.3px;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  background: #f1f5f9; color: #475569;
  padding: 3px 7px; border-radius: 4px;
  letter-spacing: 0.3px;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-station {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #64748b;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  margin-left: auto;
}
#cc-app[data-view="cms"] .cc-cms-uld-status-earning { background: #dcfce7; color: #166534; }
#cc-app[data-view="cms"] .cc-cms-uld-status-idle    { background: #f1f5f9; color: #64748b; }
#cc-app[data-view="cms"] .cc-cms-uld-status-at_customer { background: #fef3c7; color: #92400e; }
#cc-app[data-view="cms"] .cc-cms-uld-status-damaged { background: #fee2e2; color: #b91c1c; }

#cc-app[data-view="cms"] .cc-cms-uld-row-load {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-loadbar {
  flex: 0 0 120px;
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-loadbar-fill {
  height: 100%;
  transition: width 240ms ease;
  background: #16a34a;
  border-radius: 4px;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-loadbar-fill.is-high  { background: #d97706; }
#cc-app[data-view="cms"] .cc-cms-uld-row-loadbar-fill.is-full  { background: #dc2626; }
#cc-app[data-view="cms"] .cc-cms-uld-row-loadbar-fill.is-empty { background: #cbd5e1; }
/* A fill the platform CANNOT compute must not paint as an empty bar — an empty ULD reads as capacity to sell.
   Hatched and zero-width, so the row shows a bar with no claim in it rather than a claim of emptiness. */
#cc-app[data-view="cms"] .cc-cms-uld-row-loadbar-fill.is-unknown {
  width: 0 !important;
  background: repeating-linear-gradient(45deg, #cbd5e1 0 4px, transparent 4px 8px);
}
#cc-app[data-view="cms"] .cc-cms-uld-row-loadpct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #475569;
  font-variant-numeric: tabular-nums;
  min-width: 140px;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-awbs {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #94a3b8;
  margin-left: auto;
}
#cc-app[data-view="cms"] .cc-cms-uld-row-awbs i {
  font-style: italic;
}

/* Free-time chip (similar to demur chip but green) */
#cc-app[data-view="cms"] .cc-cms-uld-freetime {
  background: #dcfce7; color: #166534;
  padding: 2px 7px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700;
}

/* ─── v0.9.45 — ac_uld_d · ULD Utilisation widget ─────────────────── */

#cc-app .cc-w-uld-head { margin-bottom: 12px; }
#cc-app .cc-w-uld-head-title {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: #0f172a;
}
#cc-app .cc-w-uld-head-sub {
  display: block;
  font-size: 11px; color: #64748b;
  margin-top: 2px;
}

/* Meter — horizontal track with baseline + target + current marker */
#cc-app .cc-w-uld-meter { margin-bottom: 14px; }
#cc-app .cc-w-uld-meter-track {
  position: relative;
  height: 28px;
  background: linear-gradient(90deg, #fee2e2 0%, #fef3c7 50%, #dcfce7 100%);
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  margin-bottom: 6px;
}
#cc-app .cc-w-uld-meter-baseline,
#cc-app .cc-w-uld-meter-target {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: rgba(15,23,42,0.50);
}
#cc-app .cc-w-uld-meter-baseline { left: 72%; }
#cc-app .cc-w-uld-meter-target   { left: 87%; }
#cc-app .cc-w-uld-meter-baseline span,
#cc-app .cc-w-uld-meter-target span {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 700;
  color: #475569;
  white-space: nowrap;
}
#cc-app .cc-w-uld-meter-current {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  background: #0f172a; color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.25);
  transition: left 360ms cubic-bezier(0.32, 0.72, 0.0, 1.0);
  white-space: nowrap;
}
#cc-app .cc-w-uld-meter-current::after {
  content: ''; position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f172a;
}
#cc-app .cc-w-uld-meter-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: 10.5px; color: #64748b;
  align-items: center;
}
#cc-app .cc-w-uld-leg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
#cc-app .cc-w-uld-leg-baseline,
#cc-app .cc-w-uld-leg-target { background: #475569; }
#cc-app .cc-w-uld-leg-current { background: #0f172a; }
#cc-app .cc-w-uld-leg-projected { background: #0ea5e9; }

/* v0.9.57.2 — Projected (engine-uplift) marker on meter track */
#cc-app .cc-w-uld-meter-projected {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  background: #0ea5e9; color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 800;
  padding: 3px 7px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(14,165,233,0.30);
  transition: left 360ms cubic-bezier(0.32, 0.72, 0.0, 1.0);
  white-space: nowrap;
  border: 1px dashed rgba(255,255,255,0.30);
}
#cc-app .cc-w-uld-meter-projected[hidden] { display: none; }
#cc-app .cc-w-uld-meter-projected::after {
  content: ''; position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #0ea5e9;
}

/* Stats grid */
#cc-app .cc-w-uld-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
#cc-app .cc-w-uld-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
#cc-app .cc-w-uld-stat-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#cc-app .cc-w-uld-stat-val.cc-w-uld-stat-good { color: #15803d; }
#cc-app .cc-w-uld-stat-lbl {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2px;
  color: #94a3b8;
  margin-top: 3px;
}

@media (max-width: 700px) {
  #cc-app .cc-w-uld-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── v0.9.46 — ac_uld_e · ULD Demurrage Heat widget ──────────────── */

#cc-app .cc-w-demur-head { margin-bottom: 10px; }
#cc-app .cc-w-demur-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
#cc-app .cc-w-demur-head-title {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: #0f172a;
}
#cc-app .cc-w-demur-head-sub {
  font-size: 11px; color: #64748b; line-height: 1.45;
}
/* v0.9.57 — ULD Live Network widget */
#cc-app .cc-w-livenet {
  display: flex; flex-direction: column;
  height: 100%;
  min-height: 0;
}
#cc-app .cc-w-livenet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--cc-surface-2);
  border-bottom: 1px solid var(--cc-line-2);
  flex-shrink: 0;
}
#cc-app .cc-w-livenet-title {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--cc-text);
}
/* v1.0.i.5 — Inside a dashboard widget frame the title lives in the frame's
   header, so the inner head carries only the stats strip. Align it left. */
#cc-app .cc-w-livenet-head--embed { justify-content: flex-start; }
#cc-app .cc-w-livenet-stats {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--cc-muted);
  font-weight: 600;
}
#cc-app .cc-w-livenet-map {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
#cc-app .cc-w-livenet-empty {
  padding: 30px 16px; text-align: center;
  color: var(--cc-muted); font-size: 12px;
}
#cc-app .cc-w-livenet-legend {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 6px 10px;
  background: var(--cc-surface-2);
  border-top: 1px solid var(--cc-line-2);
  font-size: 10.5px;
  color: var(--cc-muted);
  flex-shrink: 0;
}
#cc-app .cc-w-livenet-leg { display: inline-flex; align-items: center; gap: 4px; }
#cc-app .cc-w-livenet-leg code {
  background: var(--cc-surface-3); color: var(--cc-text);
  padding: 1px 5px; border-radius: 3px;
  font-size: 9.5px;
}
#cc-app .cc-w-livenet-leg-spacer { color: var(--cc-line); }
#cc-app .cc-w-livenet-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
#cc-app .cc-w-livenet-dot.is-flying  { background: #16a34a; }
#cc-app .cc-w-livenet-dot.is-landed  { background: #0ea5e9; }
#cc-app .cc-w-livenet-dot.is-leaking { background: #dc2626; }

#cc-app .cc-w-livenet-airport-wrap { background: transparent; border: 0; }
#cc-app .cc-w-livenet-airport {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 800;
  background: rgba(15,23,42,0.85);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  text-align: center;
}
#cc-app[data-cc-theme="dark"] .cc-w-livenet-airport {
  background: rgba(255,255,255,0.92);
  color: #0f172a;
}

/* v1.0.f.3 — ULD Pool Map: station bubble labels + rich popups */
#cc-app .cc-w-uldmap-lbl-wrap { background: transparent; border: 0; }
#cc-app .cc-w-uldmap-lbl {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700;
  color: #0f172a; text-shadow: 0 1px 2px rgba(255,255,255,0.9);
  white-space: nowrap;
}
#cc-app .cc-w-uldmap-lbl b { font-weight: 800; }
#cc-app[data-cc-theme="dark"] .cc-w-uldmap-lbl { color: #f1f5f9; text-shadow: 0 1px 2px rgba(0,0,0,0.85); }
.cc-uldpop .cc-uldpop-h { font-size: 12.5px; font-weight: 800; color: #0f172a; margin-bottom: 5px; }
.cc-uldpop-kpis { display: flex; gap: 10px; margin-bottom: 6px; font-size: 11px; color: #475569; flex-wrap: wrap; }
.cc-uldpop-kpis b { color: #0f172a; font-size: 12.5px; }
.cc-uldpop-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; color: #475569; padding: 1px 0; }
.cc-uldpop-row b { color: #0f172a; }
/* v1.0.f.6 — Optimisation Opportunity Radar: per-row decision-kind chip */
#cc-app .cc-radar-chip {
  display: inline-block; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 10px; margin-right: 4px; vertical-align: middle;
}
#cc-app .cc-radar-off { font-size: 10px; font-weight: 700; color: #d97706; }

/* v1.0.h — Branded login screen (shown on the app page when logged out).
   Unscoped (no #cc-app wrapper exists in the logged-out state). */
.cc-login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; padding: 40px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cc-login-card {
  width: 100%; max-width: 380px; text-align: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15,23,42,0.12);
  padding: 30px 28px 24px;
}
.cc-login-logo {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px;
  background: linear-gradient(135deg, #0ea5e9, #4338ca); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.cc-login-brand { font-size: 20px; font-weight: 800; color: #0f172a; }
.cc-login-tag { font-size: 12.5px; color: #64748b; margin: 2px 0 18px; }
.cc-login-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; margin-bottom: 14px; }
.cc-login-form label { display: block; text-align: left; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 10px; }
.cc-login-form input[type="text"], .cc-login-form input[type="password"] {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px;
}
.cc-login-form .login-remember { font-weight: 500; color: #64748b; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.cc-login-form .login-remember input { margin-top: 0; }
.cc-login-form .button, .cc-login-form input[type="submit"] {
  width: 100%; box-sizing: border-box; cursor: pointer;
  background: #4338ca; color: #fff; border: 0; border-radius: 9px;
  padding: 10px 14px; font-size: 14px; font-weight: 700;
}
.cc-login-form .button:hover, .cc-login-form input[type="submit"]:hover { background: #3730a3; }
.cc-login-lost { display: inline-block; margin-top: 14px; font-size: 12px; color: #64748b; text-decoration: none; }
.cc-login-lost:hover { color: #4338ca; text-decoration: underline; }

/* v1.0.g.2 — "View as user" banner */
.cc-viewas-banner {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #4338ca, #6366f1); color: #fff;
  font-size: 12.5px; padding: 7px 14px;
}
.cc-viewas-banner b { font-weight: 800; }
.cc-viewas-eye { font-size: 14px; }
.cc-viewas-exit { margin-left: auto; background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 7px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.cc-viewas-exit:hover { background: rgba(255,255,255,0.30); color: #fff; }
.cc-actingas-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #fff; }
.cc-actingas { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.45); border-radius: 7px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; max-width: 240px; }
.cc-actingas option { color: #0f172a; }
.cc-viewas-banner .cc-viewas-exit { margin-left: 8px; }
.cc-viewas-session { background: linear-gradient(90deg, #0f766e, #0ea5e9); }
.cc-viewas-admin { background: linear-gradient(90deg, #92400e, #b45309); }

/* v1.0.i — Value Leakage: live "this simulation run" panel + model header */
#cc-app .cc-vl-live {
  margin: 14px 18px 6px; padding: 14px 16px;
  background: linear-gradient(135deg, #0f172a, #1e293b); color: #e2e8f0;
  border-radius: 14px; box-shadow: 0 6px 20px rgba(15,23,42,0.18);
}
#cc-app .cc-vllive-hdr { font-size: 14px; font-weight: 800; color: #fff; display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
#cc-app .cc-vllive-hdr-sub { font-size: 11px; font-weight: 500; color: #94a3b8; }
#cc-app .cc-vllive-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
#cc-app .cc-vllive-kpi { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-vllive-kpi-v { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.05; }
#cc-app .cc-vllive-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; }
#cc-app .cc-vllive-kpi-rec .cc-vllive-kpi-v { color: #4ade80; }
#cc-app .cc-vllive-kpi-leak .cc-vllive-kpi-v { color: #fb923c; }
/* (2026-09-24) · the excluded unstated-provenance note under the "recovered (captured)" KPI. Its own rule because
   .cc-vllive-kpi-l is 10px UPPERCASE with letter-spacing — a wrapping sentence in that treatment is unreadable, and
   an unstyled block is how two panels rendered invisibly earlier. #fb923c, not var(--cc-warn): .cc-vl-live is a DARK
   panel (#0f172a→#1e293b) and this is the warn tone the panel's own leak KPI already uses on it (7.8:1 vs 5.5:1). */
#cc-app .cc-vllive-kpi-note { display: block; margin-top: 3px; font-size: 9px; text-transform: none; letter-spacing: 0; font-weight: 600; line-height: 1.25; color: #fb923c; }
#cc-app .cc-vllive-col-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #cbd5e1; font-weight: 800; margin-bottom: 8px; }
#cc-app .cc-vllive-col-h span { text-transform: none; letter-spacing: 0; font-weight: 500; color: #94a3b8; }
#cc-app .cc-vllive-row { display: grid; grid-template-columns: 200px 1fr 78px; align-items: center; gap: 10px; margin-bottom: 5px; }
#cc-app .cc-vllive-row-lbl { font-size: 11.5px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cc-app .cc-vllive-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.08); overflow: hidden; }
#cc-app .cc-vllive-bar > span { display: block; height: 100%; border-radius: 5px; }
#cc-app .cc-vllive-row-eur { font-size: 12px; font-weight: 800; color: #fff; text-align: right; }
#cc-app .cc-vl-modelhdr { margin: 16px 18px 2px; font-size: 13px; font-weight: 800; color: #0f172a; }
#cc-app .cc-vl-modelhdr span { font-weight: 500; color: #94a3b8; font-size: 12px; }

/* v1.0.i.2 — Airline/CMS live operation strip */
#cc-app .cc-cms-live {
  margin: 12px 0 14px; padding: 14px 16px;
  background: linear-gradient(135deg, #0c4a6e, #0e7490); color: #e0f2fe;
  border-radius: 14px; box-shadow: 0 6px 20px rgba(8,47,73,0.20);
}
/* v1.0.i.3 — Land Transport live operation strip (earth/green lens) */
#cc-app .cc-cms-live.cc-land-live {
  background: linear-gradient(135deg, #14532d, #166534); color: #dcfce7;
  box-shadow: 0 6px 20px rgba(20,83,45,0.22);
}
#cc-app .cc-land-live .cc-cmslive-hdr-sub,
#cc-app .cc-land-live .cc-cmslive-kpi-l,
#cc-app .cc-land-live .cc-cmslive-deps-h,
#cc-app .cc-land-live .cc-cmslive-dep-rt { color: #bbf7d0; }
#cc-app .cc-land-live .cc-cmslive-dep-in { color: #86efac; }

/* ─── v1.0.i.4 — ULD Recovery Cockpit: pool map host · embedded widgets ─── */
#cc-app .cc-uld-poolmap-host {
  height: 520px; min-height: 520px;
  border: 1px solid var(--cc-line); border-radius: 12px; overflow: hidden;
  background: var(--cc-surface-2);
}
#cc-app .cc-uld-poolmap-host .cc-w-livenet { height: 100%; }

/* Embedded dynamic widget — strip the dashboard drag/resize/delete chrome */
#cc-app .cc-widget-embed {
  position: relative; height: auto; min-height: 0;
  box-shadow: none; margin: 0;
}
#cc-app .cc-widget-embed .cc-widget-resize,
#cc-app .cc-widget-embed .cc-widget-delete { display: none !important; }
#cc-app .cc-widget-embed [data-cc-widget-handle] { cursor: default; }

#cc-app .cc-uld-decisions { margin: 14px 0; }
#cc-app .cc-uld-decisions-widget { margin-top: 10px; }

/* Engine-authority readout on the priorities head */
#cc-app .cc-uld-priorities-engine {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--cc-muted);
  margin-right: 12px;
}
#cc-app .cc-uld-priorities-engine b { color: var(--cc-text); font-weight: 800; }
#cc-app .cc-uld-prio-engine-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}

/* ─── v1.0.i.4 — ULD value-captured panel (decision-ledger sync) ─── */
#cc-app .cc-uld-value {
  margin: 12px 0 14px; padding: 14px 16px;
  background: linear-gradient(135deg, #4c1d95, #6d28d9); color: #ede9fe;
  border-radius: 14px; box-shadow: 0 6px 20px rgba(76,29,149,0.22);
}
#cc-app .cc-uldval-hdr { font-size: 14px; font-weight: 800; color: #fff; display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
#cc-app .cc-uldval-hdr-sub { font-size: 11px; font-weight: 500; color: #ddd6fe; }
#cc-app .cc-uldval-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
#cc-app .cc-uldval-kpi { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-uldval-kpi-v { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.05; }
#cc-app .cc-uldval-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #ddd6fe; font-weight: 700; }
#cc-app .cc-uldval-kpi-rec .cc-uldval-kpi-v { color: #86efac; }
#cc-app .cc-uldval-kpi-open .cc-uldval-kpi-v { color: #fca5a5; }
#cc-app .cc-uldval-bars-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #ddd6fe; font-weight: 800; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
#cc-app .cc-uldval-legend { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#cc-app .cc-uldval-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
#cc-app .cc-uldval-row { display: grid; grid-template-columns: 150px 1fr 130px; align-items: center; gap: 10px; padding: 3px 0; font-size: 12px; }
#cc-app .cc-uldval-row-lbl { color: #f5f3ff; font-weight: 600; }
#cc-app .cc-uldval-bars { position: relative; height: 14px; display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-uldval-bar { height: 6px; border-radius: 3px; min-width: 2px; }
#cc-app .cc-uldval-bar-rec { background: #34d399; }
#cc-app .cc-uldval-bar-open { background: #f87171; }
#cc-app .cc-uldval-row-eur { text-align: right; font-weight: 800; color: #86efac; }
#cc-app .cc-uldval-row-open { color: #fca5a5; font-weight: 700; }
@media (max-width: 760px) {
  #cc-app .cc-uldval-kpis { grid-template-columns: repeat(2, 1fr); }
  #cc-app .cc-uldval-row { grid-template-columns: 110px 1fr 96px; }
}

/* ─── v1.0.i.5 — cockpit two-up (cost recovery + slot board) ─── */
#cc-app .cc-uld-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
#cc-app .cc-uld-twoup-col { min-width: 0; }
#cc-app .cc-uld-twoup-widget { margin-top: 8px; }
#cc-app .cc-uld-section-head-sm { margin-bottom: 4px; }
@media (max-width: 980px) { #cc-app .cc-uld-twoup { grid-template-columns: 1fr; } }

/* ─── v1.0.i.5 — GHA Slot Allocation Board widget ─── */
#cc-app .cc-slotbd { display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
#cc-app .cc-slotbd-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
#cc-app .cc-slotbd-gha { font-size: 12px; color: var(--cc-text); }
#cc-app .cc-slotbd-airport { font-size: 10px; color: var(--cc-muted); font-weight: 700; padding: 1px 5px; border: 1px solid var(--cc-line); border-radius: 6px; }
#cc-app .cc-slotbd-stats { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#cc-app .cc-slotbd-stat { font-size: 10px; font-weight: 700; color: var(--cc-muted); padding: 1px 6px; border: 1px solid var(--cc-line); border-radius: 6px; }
#cc-app .cc-slotbd-stat-conf { color: #dc2626; border-color: rgba(220,38,38,0.4); }
#cc-app .cc-slotbd-stat-wrong { color: #d97706; border-color: rgba(217,119,6,0.4); }
#cc-app .cc-slotbd-grid-wrap { overflow-x: auto; }
#cc-app .cc-slotbd-grid { display: flex; flex-direction: column; gap: 3px; min-width: 560px; }
#cc-app .cc-slotbd-row { display: grid; grid-template-columns: 40px repeat(8, 1fr); gap: 3px; }
#cc-app .cc-slotbd-door { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: var(--cc-text); background: var(--cc-surface-2); border-radius: 6px; }
#cc-app .cc-slotbd-door-head, #cc-app .cc-slotbd-time { background: transparent; color: var(--cc-muted); font-weight: 700; font-size: 10px; text-align: center; display: flex; align-items: center; justify-content: center; padding: 2px 0; }
#cc-app .cc-slotbd-cell { border-radius: 6px; min-height: 34px; }
#cc-app .cc-slotbd-cell.is-now { box-shadow: inset 0 0 0 2px rgba(37,99,235,0.55); }
#cc-app .cc-slotbd-time.is-now { color: #2563eb; font-weight: 800; }
#cc-app .cc-slotbd-empty { background: var(--cc-surface-2); opacity: 0.45; }
#cc-app .cc-slotbd-bk { padding: 3px 5px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; cursor: default; }
#cc-app .cc-slotbd-bk-trk { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
#cc-app .cc-slotbd-bk-awb { font-size: 9px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cc-app .cc-slotbd-bk-booked  { background: rgba(37,99,235,0.12);  color: #1d4ed8; }
#cc-app .cc-slotbd-bk-arrived { background: rgba(22,163,74,0.14);  color: #15803d; }
#cc-app .cc-slotbd-bk-conflict{ background: rgba(220,38,38,0.16);  color: #b91c1c; box-shadow: inset 0 0 0 1px rgba(220,38,38,0.5); }
#cc-app .cc-slotbd-bk-wrong   { background: rgba(217,119,6,0.16);  color: #b45309; box-shadow: inset 0 0 0 1px rgba(217,119,6,0.5); }
#cc-app .cc-slotbd-confl { display: flex; flex-direction: column; gap: 3px; }
#cc-app .cc-slotbd-confl-h { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; color: #b91c1c; }
#cc-app .cc-slotbd-confl-row { font-size: 11px; color: var(--cc-text); padding: 3px 6px; background: var(--cc-surface-2); border-radius: 6px; }
#cc-app .cc-slotbd-confl-ok { font-size: 11px; color: #15803d; font-weight: 600; }
[data-cc-theme="dark"] #cc-app .cc-slotbd-bk-booked,
#cc-app[data-cc-theme="dark"] .cc-slotbd-bk-booked { color: #93c5fd; }
/* interactive dock-slot board (server-authoritative) */
#cc-app .cc-slotbd-sel { font-size: 10px; font-weight: 700; padding: 1px 4px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: var(--cc-text); }
#cc-app .cc-slotbd-off { color: #d97706; border-color: rgba(217,119,6,0.4); }
#cc-app .cc-slotbd-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
#cc-app .cc-slotbd-viewas { font-size: 10px; color: var(--cc-muted); display: inline-flex; align-items: center; gap: 4px; }
#cc-app .cc-slotbd-vbtn, #cc-app .cc-slotbd-tbtn { font-size: 10px; font-weight: 700; padding: 3px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: var(--cc-text); cursor: pointer; }
#cc-app .cc-slotbd-vbtn.is-active { background: #2563eb; color: #fff; border-color: #2563eb; }
#cc-app .cc-slotbd-tools { display: inline-flex; gap: 6px; }
#cc-app .cc-slotbd-tbtn.cc-slotbd-opt { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.4); color: #1d4ed8; }
#cc-app .cc-slotbd-tbtn:hover, #cc-app .cc-slotbd-vbtn:hover { border-color: #2563eb; }
#cc-app .cc-slotbd-cell-free { cursor: pointer; }
#cc-app .cc-slotbd-cell-free:hover { outline: 1px dashed rgba(37,99,235,0.6); opacity: 0.8; }
#cc-app .cc-slotbd-bk { cursor: pointer; }
#cc-app .cc-slotbd-bk:hover { outline: 2px solid rgba(37,99,235,0.5); }
#cc-app .cc-slotbd-confl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#cc-app .cc-slotbd-confl-txt { flex: 1; }
#cc-app .cc-slotbd-confl-acts { display: inline-flex; gap: 5px; flex-shrink: 0; }
#cc-app .cc-slotbd-cbtn { font-size: 10px; font-weight: 700; padding: 3px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: var(--cc-text); cursor: pointer; }
#cc-app .cc-slotbd-cbtn-ok { background: #16a34a; color: #fff; border-color: #16a34a; }
#cc-app .cc-slotbd-cbtn:hover { border-color: #2563eb; }
#cc-app .cc-slotbd-plan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.35); border-radius: 8px; font-size: 11px; color: var(--cc-text); }
#cc-app .cc-slotbd-plan-acts { display: inline-flex; gap: 5px; flex-shrink: 0; }
#cc-app .cc-slotbd-menu { padding: 8px 10px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
#cc-app .cc-slotbd-menu-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--cc-text); }
#cc-app .cc-slotbd-menu-x { border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--cc-muted); }
#cc-app .cc-slotbd-menu-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
#cc-app .cc-slotbd-menu-lbl { font-size: 10px; color: var(--cc-muted); font-weight: 700; }
#cc-app .cc-slotbd-chip { font-size: 10px; font-weight: 700; padding: 3px 7px; border: 1px solid rgba(37,99,235,0.4); border-radius: 6px; background: rgba(37,99,235,0.08); color: #1d4ed8; cursor: pointer; }
#cc-app .cc-slotbd-chip:hover { background: #2563eb; color: #fff; }
#cc-app .cc-slotbd-input { font-size: 10px; padding: 2px 6px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: var(--cc-text); width: 130px; }
/* view-as perspective */
#cc-app .cc-slotbd-note { font-size: 10px; color: var(--cc-muted); font-style: italic; align-self: center; }
#cc-app .cc-slotbd-stat-mine { color: #1d4ed8; border-color: rgba(37,99,235,0.4); background: rgba(37,99,235,0.08); }
#cc-app .cc-slotbd-stat-ok { color: #15803d; border-color: rgba(22,163,74,0.4); }
#cc-app .cc-slotbd-notmine { opacity: 0.38; }
#cc-app .cc-slotbd-mine { box-shadow: inset 0 0 0 2px rgba(37,99,235,0.45); }
/* slot detail drawer */
#cc-app .cc-slotdrw { display: flex; flex-direction: column; gap: 12px; }
#cc-app .cc-slotdrw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#cc-app .cc-slotdrw-status { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
#cc-app .cc-slotdrw-warn { font-size: 12px; color: #b45309; background: rgba(217,119,6,0.1); border: 1px solid rgba(217,119,6,0.35); border-radius: 8px; padding: 8px 10px; }
#cc-app .cc-slotdrw-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
#cc-app .cc-slotdrw-k { font-size: 11px; color: var(--cc-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
#cc-app .cc-slotdrw-v { font-size: 13px; color: var(--cc-text); font-weight: 600; }
#cc-app .cc-slotdrw-sec { font-size: 11px; font-weight: 800; color: var(--cc-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
#cc-app .cc-slotdrw-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--cc-line); }
/* MRO Exceptions cockpit */
#cc-app .cc-mroexc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#cc-app .cc-mroexc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; flex-wrap: wrap; }
#cc-app .cc-mroexc-main { flex: 1 1 55%; min-width: 200px; }
#cc-app .cc-mroexc-top { font-size: 12px; color: var(--cc-text); }
#cc-app .cc-mroexc-sub { font-size: 10px; color: var(--cc-muted); font-weight: 600; }
#cc-app .cc-mroexc-meta { font-size: 11px; color: var(--cc-muted); margin-top: 2px; }
#cc-app .cc-mroexc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
#cc-app .cc-mroexc-btn { font-size: 10px; font-weight: 700; padding: 4px 9px; border: 1px solid var(--cc-line); border-radius: 7px; background: var(--cc-surface); color: var(--cc-text); cursor: pointer; white-space: nowrap; }
#cc-app .cc-mroexc-btn:hover { border-color: #2563eb; }
#cc-app .cc-mroexc-btn.is-rec { background: #16a34a; color: #fff; border-color: #16a34a; }
/* ODLN inspections history */
#cc-app .cc-odln-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
#cc-app .cc-odln-row { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-odln-line { display: flex; align-items: center; gap: 8px; font-size: 11px; }
#cc-app .cc-odln-badge { white-space: nowrap; }
#cc-app .cc-odln-ok { color: #15803d; font-weight: 700; font-size: 10px; }
#cc-app .cc-odln-uns { color: #b91c1c; font-weight: 800; font-size: 10px; }
#cc-app .cc-odln-uld { color: var(--cc-text); }
#cc-app .cc-odln-sub { font-size: 9px; color: var(--cc-muted); font-weight: 700; }
#cc-app .cc-odln-code { font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-odln-when { font-size: 10px; color: var(--cc-muted); white-space: nowrap; margin-left: auto; }
#cc-app .cc-odln-cam { font-size: 11px; opacity: .8; }
#cc-app .cc-odln-note, #cc-app .cc-mroexc-note { font-size: 10px; color: var(--cc-muted); font-style: italic; line-height: 1.35; }
#cc-app .cc-mroexc-note { margin-top: 3px; }
/* auto-generated issue description — not italic, slightly stronger than the free-text note it precedes */
#cc-app .cc-odln-desc, #cc-app .cc-mroexc-desc { font-style: normal; color: var(--cc-text); font-weight: 600; }
/* ODLN damage-photo thumbnail + lightbox */
#cc-app .cc-odln-photo { flex: 0 0 auto; padding: 0; border: 1px solid var(--cc-line); border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--cc-surface-2); line-height: 0; }
#cc-app .cc-odln-photo img { width: 40px; height: 40px; object-fit: cover; display: block; }
#cc-app .cc-odln-photo:hover { border-color: #2563eb; }
#cc-app .cc-mroexc-row .cc-odln-photo { align-self: flex-start; }
.cc-photo-ov { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4,12,20,.78); }
.cc-photo-ov-box { max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 8px; background: #0e1a24; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.cc-photo-ov-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #e8eef3; font-size: 13px; }
.cc-photo-ov-x { cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.cc-photo-ov-x:hover { background: rgba(255,255,255,.12); }
.cc-photo-ov-box img { max-width: 88vw; max-height: 78vh; object-fit: contain; border-radius: 6px; background: #000; }
.cc-photo-ov-open { color: #7db8ff; font-size: 11px; text-decoration: none; text-align: right; }
.cc-photo-ov-open:hover { text-decoration: underline; }
/* ── ULD Repair History / Logbook widget (Phase 2) ── */
#cc-app .cc-lb-kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#cc-app .cc-lb-kpi { flex: 1 1 auto; min-width: 92px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 6px 9px; font-size: 10px; color: var(--cc-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; display: flex; flex-direction: column; gap: 1px; }
#cc-app .cc-lb-kpi span { font-size: 16px; font-weight: 800; color: var(--cc-text); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
#cc-app .cc-lb-tables { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#cc-app .cc-lb-tbl { flex: 1 1 30%; min-width: 168px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 7px 9px; overflow-x: auto; }
#cc-app .cc-lb-tbl-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); margin-bottom: 4px; }
#cc-app .cc-lb-tbl table { width: 100%; border-collapse: collapse; font-size: 11px; }
#cc-app .cc-lb-tbl th { text-align: left; font-size: 9px; font-weight: 700; color: var(--cc-muted); text-transform: uppercase; padding: 2px 4px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-lb-tbl td { padding: 3px 4px; color: var(--cc-text); border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-lb-tbl tr:last-child td { border-bottom: 0; }
#cc-app .cc-lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#cc-app .cc-lb-two { display: grid; grid-template-columns: minmax(190px, 34%) 1fr; gap: 10px; align-items: start; }
#cc-app .cc-lb-master { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#cc-app .cc-lb-search { width: 100%; box-sizing: border-box; font-size: 11px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 7px; background: var(--cc-surface); color: var(--cc-text); }
#cc-app .cc-lb-units { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
#cc-app .cc-lb-unit { display: flex; align-items: center; gap: 7px; text-align: left; width: 100%; padding: 6px 8px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; cursor: pointer; color: var(--cc-text); }
#cc-app .cc-lb-unit:hover { border-color: #2563eb; }
#cc-app .cc-lb-unit.is-sel { border-color: #2563eb; box-shadow: inset 3px 0 0 #2563eb; background: var(--cc-surface); }
#cc-app .cc-lb-unit-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
#cc-app .cc-lb-unit-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#cc-app .cc-lb-unit-main b { font-size: 12px; }
#cc-app .cc-lb-unit-sub { font-size: 9px; color: var(--cc-muted); font-weight: 700; text-transform: capitalize; }
#cc-app .cc-lb-unit-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
#cc-app .cc-lb-mini { font-size: 9px; font-weight: 700; color: var(--cc-muted); }
#cc-app .cc-lb-unit-time { font-size: 9px; color: var(--cc-muted); white-space: nowrap; }
#cc-app .cc-lb-detail { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 10px; padding: 12px 14px; min-width: 0; max-height: 56vh; overflow-y: auto; }
#cc-app .cc-lb-detail-empty { color: var(--cc-muted); font-size: 12px; padding: 26px 14px; text-align: center; }
#cc-app .cc-lb-detail-head { margin-bottom: 10px; }
#cc-app .cc-lb-detail-title { font-size: 15px; font-weight: 800; color: var(--cc-text); }
#cc-app .cc-lb-detail-sub { font-size: 10px; color: var(--cc-muted); font-weight: 700; text-transform: capitalize; margin-top: 2px; }
#cc-app .cc-lb-timeline { display: flex; flex-direction: column; }
#cc-app .cc-lb-ev { display: flex; gap: 9px; padding-bottom: 12px; position: relative; }
#cc-app .cc-lb-ev:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 0; width: 1px; background: var(--cc-line); }
#cc-app .cc-lb-ev-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 3px; z-index: 1; }
#cc-app .cc-lb-ev-body { flex: 1 1 auto; min-width: 0; }
#cc-app .cc-lb-ev-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--cc-text); }
#cc-app .cc-lb-ev-time { margin-left: auto; font-size: 9.5px; color: var(--cc-muted); font-weight: 600; white-space: nowrap; }
#cc-app .cc-lb-ev-meta { font-size: 11px; color: var(--cc-muted); margin-top: 3px; line-height: 1.5; }
#cc-app .cc-lb-ev-meta b { color: var(--cc-text); }
#cc-app .cc-lb-ev-foot { font-size: 9.5px; color: var(--cc-muted); margin-top: 2px; text-transform: capitalize; }
#cc-app .cc-lb-liab { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
#cc-app .cc-lb-liab.is-charge { background: #dc26261a; color: #dc2626; }
#cc-app .cc-lb-liab.is-wear { background: #0284c71a; color: #0284c7; }
#cc-app .cc-lb-ucr { font-size: 9.5px; color: var(--cc-muted); font-weight: 700; }
/* NORM-1 provenance badge — synthetic (simulator/seed) vs real (live feed/connector/user). Reusable across widgets. */
#cc-app .cc-prov { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 10px; white-space: nowrap; letter-spacing: .02em; text-transform: none; vertical-align: middle; }
#cc-app .cc-prov.is-sim { background: #7c3aed1a; color: #7c3aed; }
#cc-app .cc-prov.is-live { background: #16a34a1a; color: #16a34a; }
@media (max-width: 640px) { #cc-app .cc-lb-two { grid-template-columns: 1fr; } #cc-app .cc-lb-units { max-height: 30vh; } }
/* reusable list filter bar */
#cc-app .cc-listfilter { display: flex; align-items: center; gap: 6px; margin: 6px 0; padding: 3px 8px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; }
#cc-app .cc-listfilter-ico { font-size: 11px; opacity: 0.6; }
#cc-app .cc-listfilter-in { flex: 1; font-size: 11px; padding: 3px 4px; border: none; background: transparent; color: var(--cc-text); outline: none; }
#cc-app .cc-listfilter-count { font-size: 10px; font-weight: 700; color: var(--cc-muted); white-space: nowrap; }
/* App Access & Roles */
#cc-app table.cc-aa { width: 100%; }
#cc-app table.cc-aa td { vertical-align: middle; }
#cc-app .cc-aa-app { white-space: nowrap; }
#cc-app .cc-aa-yes { font-size: 11px; font-weight: 800; color: #15803d; background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.35); border-radius: 6px; padding: 2px 8px; }
#cc-app .cc-aa-no { font-size: 11px; font-weight: 700; color: var(--cc-muted); }
#cc-app .cc-rm-appaccess { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--cc-line); }
#cc-app .cc-rm-aa-head { font-size: 13px; font-weight: 800; color: var(--cc-text); margin-bottom: 8px; }

/* ─── v1.0.i.5 — ULD Cost Recovery widget ─── */
#cc-app .cc-costrec { display: flex; flex-direction: column; gap: 12px; }
#cc-app .cc-costrec-hero { text-align: center; padding: 10px; background: linear-gradient(135deg, #065f46, #047857); border-radius: 12px; color: #d1fae5; }
#cc-app .cc-costrec-hero-v { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
#cc-app .cc-costrec-hero-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #a7f3d0; margin-top: 3px; }
#cc-app .cc-costrec-hero-tot { font-size: 11px; color: #6ee7b7; margin-top: 4px; font-weight: 600; }
#cc-app .cc-costrec-cats { display: flex; flex-direction: column; gap: 9px; }
#cc-app .cc-costrec-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#cc-app .cc-costrec-cat-name { font-size: 12px; font-weight: 700; color: var(--cc-text); }
#cc-app .cc-costrec-cat-eur { font-size: 13px; font-weight: 800; color: var(--cc-text); }
#cc-app .cc-costrec-cat-bar { height: 7px; background: var(--cc-surface-2); border-radius: 4px; overflow: hidden; margin: 3px 0; }
#cc-app .cc-costrec-cat-bar > span { display: block; height: 100%; border-radius: 4px; min-width: 2px; transition: width .4s ease; }
#cc-app .cc-costrec-cat-sub { font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-costrec-hr { color: #16a34a; }
#cc-app .cc-cmslive-hdr { font-size: 14px; font-weight: 800; color: #fff; display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
#cc-app .cc-cmslive-hdr-sub { font-size: 11px; font-weight: 500; color: #bae6fd; }
#cc-app .cc-cmslive-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
#cc-app .cc-cmslive-kpi { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-cmslive-kpi-v { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.05; }
#cc-app .cc-cmslive-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #bae6fd; font-weight: 700; }
#cc-app .cc-cmslive-kpi-good .cc-cmslive-kpi-v { color: #4ade80; }
#cc-app .cc-cmslive-kpi-warn .cc-cmslive-kpi-v { color: #fde047; }
#cc-app .cc-cmslive-kpi-bad .cc-cmslive-kpi-v  { color: #fca5a5; }
/* An AWAITING-FEED tile must READ as one. `_absent` renders its dash through .cc-compliance-sub, which is
   sized and muted for light panels — at 12px in slate grey on this dark tile it disappeared entirely, and an
   invisible marker is the silent gap the helper exists to avoid, not an honest absence. Tile scale, and a
   colour that holds against the tile's own ground. */
#cc-app .cc-cmslive-kpi-v .cc-compliance-sub { font-size: 19px; font-weight: 800; color: rgba(255,255,255,0.55); cursor: help; }
#cc-app .cc-cmslive-deps-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #bae6fd; font-weight: 800; margin-bottom: 6px; }
#cc-app .cc-cmslive-dep { display: grid; grid-template-columns: 90px 1fr 90px 48px; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; }
#cc-app .cc-cmslive-dep-fn { font-weight: 800; color: #fff; }
#cc-app .cc-cmslive-dep-rt { color: #e0f2fe; }
#cc-app .cc-cmslive-dep-in { color: #bae6fd; text-align: right; }
#cc-app .cc-cmslive-dep-lf { font-weight: 800; text-align: right; }
@media (max-width: 760px) {
  #cc-app .cc-cmslive-kpis { grid-template-columns: repeat(2, 1fr); }
  #cc-app .cc-cmslive-dep { grid-template-columns: 70px 1fr 70px 40px; }
}

/* v1.0.i.2 — clickable ULD chips + live next-stage countdown + ULD drawer body */
#cc-app .cc-cms-uld-chip { cursor: pointer; }
#cc-app .cc-cms-life-next { font-size: 10.5px; color: #4338ca; font-weight: 700; margin-left: 8px; }
#cc-app .cc-uldd-titlerow { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
#cc-app .cc-uldd-type { font-size: 11px; font-weight: 600; color: #64748b; }
#cc-app .cc-uldd-row { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: #475569; padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
#cc-app .cc-uldd-row b { color: #0f172a; font-weight: 700; }
#cc-app .cc-uldd-sect { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 800; margin: 12px 0 4px; }
#cc-app .cc-uldd-bar { height: 7px; border-radius: 4px; background: #eef2f7; overflow: hidden; margin: 2px 0 6px; }
#cc-app .cc-uldd-bar > span { display: block; height: 100%; }
#cc-app .cc-uldd-alert { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 11.5px; font-weight: 700; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px; }
#cc-app .cc-uldd-tag { font-size: 11.5px; font-weight: 700; color: #0369a1; margin: 6px 0; }
#cc-app .cc-uldd-awb { display: inline-block; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; border-radius: 6px; padding: 2px 7px; margin: 2px 4px 2px 0; cursor: pointer; }
#cc-app .cc-uldd-awb:hover { background: #e0e7ff; }
/* v2.40.0 — ULD peek drawer: mini-map (location) + embedded lifecycle */
/* Stand-in badge (retires with the stand-in ULD fallback) */
#cc-app .cc-uldd-standin { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; background: rgba(245,158,11,0.16); color: #b45309; vertical-align: middle; }
#cc-app .cc-uldd-map { height: 172px; border-radius: 8px; overflow: hidden; border: 1px solid var(--cc-line); background: var(--cc-surface-2); position: relative; }
#cc-app .cc-uldmini-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--cc-muted); }
#cc-app .cc-uldmini-plane { font-size: 16px; line-height: 22px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
#cc-app .cc-uldd-showmap { margin: 6px 0 2px; width: 100%; }
#cc-app .cc-uldd-lc { margin-top: 2px; }
#cc-app .cc-uldd-lc .cc-uldlc.is-compact { padding: 0; }
#cc-app .cc-uldd-lc .cc-uldlc-track { margin: 10px 4px 14px; }
#cc-app .cc-uldd-lc .cc-uldlc-detail { padding: 10px; }
/* pool-map station popup — clickable ULD chips (→ peek drawer) */
#cc-app .cc-uldpop-ulds, .cc-uldpop-ulds { margin-top: 5px; border-top: 1px solid #e2e8f0; padding-top: 4px; }
#cc-app .cc-uldpop-uldsh, .cc-uldpop-uldsh { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; margin-bottom: 3px; }
#cc-app .cc-uldpop-uld, .cc-uldpop-uld { display: inline-block; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; border-radius: 5px; padding: 1px 5px; margin: 2px 3px 0 0; cursor: pointer; }
#cc-app .cc-uldpop-uld:hover, .cc-uldpop-uld:hover { background: #e0e7ff; }
#cc-app .cc-uldpop-more, .cc-uldpop-more { font-size: 10px; color: #64748b; font-weight: 600; }
#cc-app[data-cc-theme="dark"] .cc-uldd-titlerow, #cc-app[data-cc-theme="dark"] .cc-uldd-row b { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-uldd-row { border-color: #1e293b; }
@media (max-width: 760px) { #cc-app .cc-vllive-kpis { grid-template-columns: repeat(2, 1fr); } #cc-app .cc-vllive-row { grid-template-columns: 130px 1fr 64px; } }

/* v1.0.g.2 — User Manager */
.cc-usermgr { padding: 14px 18px 24px; }
.cc-um-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cc-um-note { font-size: 11px; color: #94a3b8; }
.cc-um-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cc-um-new input, .cc-um-new select { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12.5px; }
.cc-um-new input[data-cc-su-new="displayName"] { flex: 1 1 150px; }
.cc-um-new input[data-cc-su-new="email"] { flex: 1 1 180px; }
.cc-um-sub { font-size: 10.5px; color: #94a3b8; }
.cc-um-exit { padding: 7px 12px; border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700; cursor: pointer; }
.cc-um-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cc-um-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 800; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; }
.cc-um-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cc-um-row.is-current { background: #eef2ff; }
.cc-um-name, .cc-um-email, .cc-um-role { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; }
.cc-um-admin { font-size: 11px; font-weight: 700; color: #4338ca; }
/* ── P2P-48 items 3 & 4 · organisation, last sign-in, expiry, suspension, delegation ───────────────
   Every "absent" state below is DIM AND NAMED rather than blank, because a blank cell in an access
   table reads as "no restriction" — the opposite of the truth for an account the platform does not
   hold. The expired state is the one loud colour: it is the only one that means access has lapsed. */
.cc-um-unplaced { color: #94a3b8; font-size: 11px; font-style: italic; }
.cc-um-orgnow { font-weight: 600; font-size: 11.5px; margin-right: 6px; }
.cc-um-orgsel { max-width: 190px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 11px; background: #fff; }
.cc-um-never { color: #94a3b8; font-size: 11px; }
.cc-um-noexp { color: #94a3b8; font-size: 10.5px; margin-left: 5px; }
.cc-um-expin { padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 11px; background: #fff; }
.cc-um-expin.is-expired { border-color: #fca5a5; background: #fef2f2; }
.cc-um-expired { color: #b91c1c; font-size: 10.5px; font-weight: 700; margin-left: 5px; text-transform: uppercase; letter-spacing: .04em; }
.cc-um-susp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #b45309; margin-left: 10px; cursor: pointer; }
.cc-um-deleg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #334155; cursor: pointer; }
.cc-um-noauthor, .cc-um-noplace { font-size: 10px; color: #94a3b8; background: #f1f5f9; border-radius: 99px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.cc-um-noplace { color: #b45309; background: #fef3c7; }
.cc-um-orgs { margin-top: 22px; }
.cc-rm-wbulk { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.cc-rm-wbulk .cc-rm-hint { margin-left: 2px; }
.cc-um-orgs-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #334155; font-weight: 800; margin-bottom: 7px; }
.cc-um-pages { font-size: 11.5px; color: #475569; white-space: nowrap; }
/* ADR-021 · the tenant cell. Chips are the user's CURRENT scope; the select adds one; ✕ removes one.
   A user with no tenant is shown in the warning tone, not as an empty cell — an empty cell on an access
   screen reads as "no restriction", and this user is refused by every tenant-scoped view. */
.cc-um-tenant { white-space: nowrap; }
.cc-um-tchip { display: inline-flex; align-items: center; gap: 3px; margin: 1px 4px 1px 0; padding: 2px 4px 2px 7px;
               border: 1px solid #c7d2fe; border-radius: 999px; background: #eef2ff; color: #4338ca;
               font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.cc-um-tx { border: 0; background: none; padding: 0 2px; color: #818cf8; font-size: 10px; cursor: pointer; line-height: 1; }
.cc-um-tx:hover { color: #b91c1c; }
.cc-um-tx[disabled] { opacity: .5; cursor: default; }
.cc-um-tadd { margin-left: 2px; padding: 2px 4px; border: 1px solid #cbd5e1; border-radius: 6px;
              background: #fff; color: #475569; font-size: 11px; }
.cc-um-tadd[disabled] { opacity: .6; }
.cc-um-tnone { font-size: 11px; font-weight: 700; color: #b45309; }
.cc-um-tnote, .cc-um-tenant-absent { font-size: 11px; color: #94a3b8; }
.cc-um-gap { margin: 6px 0 2px; padding: 7px 10px; border: 1px solid #fde68a; border-radius: 8px;
             background: #fffbeb; color: #92400e; font-size: 11.5px; }
#cc-app[data-cc-theme="dark"] .cc-um-tchip { border-color: #3730a3; background: #1e1b4b; color: #c7d2fe; }
#cc-app[data-cc-theme="dark"] .cc-um-tadd { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }
#cc-app[data-cc-theme="dark"] .cc-um-gap { border-color: #78350f; background: #1c1917; color: #fcd34d; }
.cc-um-active { font-size: 11px; color: #475569; display: inline-flex; align-items: center; gap: 5px; }
.cc-um-acts { white-space: nowrap; text-align: right; }
.cc-um-viewas, .cc-um-viewing { padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; }
.cc-um-viewas[disabled], .cc-um-viewing { opacity: 0.65; cursor: default; }
.cc-um-viewing { border-color: #6366f1; background: #6366f1; color: #fff; }
.cc-um-del { margin-left: 6px; padding: 4px 9px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #94a3b8; font-size: 11px; cursor: pointer; }
.cc-um-del:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
#cc-app[data-cc-theme="dark"] .cc-um-table th { border-color: #1e293b; }
#cc-app[data-cc-theme="dark"] .cc-um-table td { border-color: #111827; }
#cc-app[data-cc-theme="dark"] .cc-um-row.is-current { background: #1e1b4b; }
#cc-app[data-cc-theme="dark"] .cc-um-name, #cc-app[data-cc-theme="dark"] .cc-um-email, #cc-app[data-cc-theme="dark"] .cc-um-role { background: #111827; border-color: #334155; color: #e5e7eb; }

/* v1.0.g — Role Manager (persona / RBAC editor) */
.cc-rolemgr { padding: 14px 18px 24px; }
.cc-rm-grid { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 16px; align-items: start; }
.cc-rm-rail { display: flex; flex-direction: column; gap: 4px; }
.cc-rm-add { padding: 8px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; color: #4338ca; font-weight: 700; font-size: 12px; cursor: pointer; margin-bottom: 6px; }
.cc-rm-add:hover { background: #eef2ff; border-color: #6366f1; }
.cc-rm-rail-sec { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; font-weight: 800; margin: 8px 0 2px; }
.cc-rm-rail-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; }
.cc-rm-rail-item:hover { border-color: #cbd5e1; background: #f8fafc; }
.cc-rm-rail-item.is-active { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 1px #6366f1 inset; }
.cc-rm-rail-icon { font-size: 17px; flex: 0 0 auto; }
.cc-rm-rail-body { display: flex; flex-direction: column; min-width: 0; }
.cc-rm-rail-name { font-size: 12.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-rm-rail-sub { font-size: 10px; color: #94a3b8; }
.cc-rm-edit { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.cc-rm-help { background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.22); border-radius: 8px; padding: 9px 12px; font-size: 11.5px; line-height: 1.5; color: #334155; margin-bottom: 12px; }
.cc-rm-edit-head { display: flex; gap: 8px; margin-bottom: 8px; }
.cc-rm-icon { width: 44px; text-align: center; font-size: 18px; padding: 6px; border: 1px solid #cbd5e1; border-radius: 8px; }
.cc-rm-name { flex: 1; font-size: 15px; font-weight: 800; color: #0f172a; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
.cc-rm-desc { width: 100%; box-sizing: border-box; font-size: 12px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 9px; }
.cc-rm-row2 { display: flex; gap: 12px; margin-bottom: 6px; }
.cc-rm-mini { font-size: 11px; color: #475569; display: flex; align-items: center; gap: 6px; }
.cc-rm-mini select { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 11px; background: #fff; }
.cc-rm-sect { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #334155; font-weight: 800; margin: 14px 0 6px; }
.cc-rm-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: #94a3b8; font-size: 10.5px; margin-left: 6px; }
.cc-rm-vsec { grid-column: 1 / -1; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 800; margin-top: 6px; }
.cc-rm-chkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.cc-rm-wscope { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
.cc-rm-wscope .cc-rm-chk { font-weight: 600; }
/* the grid stays READABLE while no set is authored — it shows the catalogue the role is not restricted
   to, so it is dimmed rather than hidden. A hidden control cannot say why it does nothing. */
.cc-rm-chkgrid.is-unscoped { opacity: .45; }
.cc-rm-chkgrid.is-unscoped .cc-rm-chk { cursor: not-allowed; }
.cc-rm-chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #334155; cursor: pointer; }
.cc-rm-capture { margin-top: 8px; padding: 6px 11px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #475569; font-size: 11.5px; cursor: pointer; }
.cc-rm-capture:hover { background: #eef2ff; border-color: #6366f1; color: #4338ca; }
.cc-rm-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.cc-rm-del { margin-left: auto; padding: 6px 11px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #64748b; font-size: 11.5px; cursor: pointer; }
.cc-rm-del:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
@media (max-width: 820px) { .cc-rm-grid { grid-template-columns: 1fr; } }
#cc-app[data-cc-theme="dark"] .cc-rm-rail-item, #cc-app[data-cc-theme="dark"] .cc-rm-edit { background: #0f172a; border-color: #1e293b; }
#cc-app[data-cc-theme="dark"] .cc-rm-rail-name, #cc-app[data-cc-theme="dark"] .cc-rm-name { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-rm-rail-item.is-active { background: #1e1b4b; }
#cc-app[data-cc-theme="dark"] .cc-rm-icon, #cc-app[data-cc-theme="dark"] .cc-rm-name, #cc-app[data-cc-theme="dark"] .cc-rm-desc, #cc-app[data-cc-theme="dark"] .cc-rm-mini select { background: #111827; border-color: #334155; color: #e5e7eb; }

/* v1.0.f.7 — What-if Scenario Sandbox */
#cc-app .cc-whatif { padding: 4px 2px; }
#cc-app .cc-whatif-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
#cc-app .cc-whatif-row label { flex: 0 0 84px; font-size: 11px; color: #475569; font-weight: 600; }
#cc-app .cc-whatif-row input[type="range"] { flex: 1; }
#cc-app .cc-whatif-sel { flex: 1; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 11px; background: #fff; color: #0f172a; }
#cc-app .cc-whatif-val { flex: 0 0 28px; text-align: right; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; color: #0f172a; }
#cc-app .cc-whatif-prev-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; margin: 8px 0 5px; }
#cc-app .cc-whatif-bar-row { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 7px; margin-bottom: 4px; }
#cc-app .cc-whatif-bar-lbl { font-size: 10.5px; color: #475569; }
#cc-app .cc-whatif-bar { height: 7px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
#cc-app .cc-whatif-bar > span { display: block; height: 100%; background: #6366f1; }
#cc-app .cc-whatif-bar-pct { font-size: 10.5px; font-weight: 700; color: #0f172a; text-align: right; }
#cc-app .cc-whatif-actions { display: flex; gap: 8px; margin-top: 10px; }
#cc-app .cc-whatif-reset { padding: 5px 10px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #64748b; font-size: 11px; cursor: pointer; }
#cc-app[data-cc-theme="dark"] .cc-whatif-sel { background: #111827; border-color: #334155; color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-whatif-val,
#cc-app[data-cc-theme="dark"] .cc-whatif-bar-pct { color: #e5e7eb; }

/* v1.0.f.7 — KPI Goal Board */
#cc-app .cc-goals { display: flex; flex-direction: column; gap: 9px; padding: 2px; }
#cc-app .cc-goal-row { border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 9px; }
#cc-app .cc-goal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#cc-app .cc-goal-lbl { font-size: 12px; font-weight: 700; color: #0f172a; }
#cc-app .cc-goal-chip { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 10px; }
#cc-app .cc-goal-meta { font-size: 11px; color: #64748b; margin-bottom: 5px; }
#cc-app .cc-goal-meta b { color: #0f172a; }
#cc-app .cc-goal-target { width: 64px; padding: 2px 5px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 11px; font-family: ui-monospace, monospace; }
#cc-app .cc-goal-bar { height: 7px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
#cc-app .cc-goal-bar > span { display: block; height: 100%; }
#cc-app .cc-goal-fix { font-size: 10px; color: #b45309; margin-top: 5px; }
#cc-app[data-cc-theme="dark"] .cc-goal-row { border-color: #1e293b; }
#cc-app[data-cc-theme="dark"] .cc-goal-lbl,
#cc-app[data-cc-theme="dark"] .cc-goal-meta b { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-goal-target { background: #111827; border-color: #334155; color: #e5e7eb; }
.cc-uldpop-leak { margin-top: 5px; font-size: 11px; font-weight: 700; color: #b91c1c; }
.cc-uldpop-dmg  { margin-top: 3px; font-size: 11px; font-weight: 700; color: #b45309; }

/* v1.0.f.5 — ULD Pool Map live-flight markers: white SVG plane on a load-
   coloured circular badge (clearer than the bare glyph) + flight-number pill. */
#cc-app .cc-w-uldfl { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
#cc-app .cc-w-uldfl-badge {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,0.45);
}
#cc-app .cc-w-uldfl-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; color: #fff;
}
#cc-app .cc-w-uldfl-glyph svg { display: block; }
#cc-app .cc-w-uldfl-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 800;
  background: rgba(255,255,255,0.94);
  border: 1px solid #94a3b8; border-radius: 4px;
  padding: 0 4px; line-height: 14px;
}
#cc-app .cc-w-uldfl-est { margin-left: 3px; font-size: 8px; opacity: 0.85; vertical-align: 1px; }
#cc-app .cc-w-uldfl.is-est .cc-w-uldfl-num { border-style: dashed; }
#cc-app[data-cc-theme="dark"] .cc-w-uldfl-badge { border-color: #0f172a; }
#cc-app[data-cc-theme="dark"] .cc-w-uldfl-num { background: rgba(15,23,42,0.9); }

/* v0.9.55 — per-card engine badge on each Demurrage Heat row */
#cc-app .cc-w-demur-row-engine {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; font-weight: 700;
  padding: 1px 6px;
  background: rgba(14,165,233,0.10);
  color: #0c4a6e;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
#cc-app[data-cc-theme="dark"] .cc-w-demur-row-engine {
  background: rgba(14,165,233,0.15);
  color: #7dd3fc;
}

/* v0.9.54 / v0.9.55.1 — engine signature badge in Demurrage Heat header */
#cc-app .cc-w-demur-engine {
  margin-top: 6px;
  padding: 6px 9px;
  background: rgba(14,165,233,0.10);
  border: 1px solid rgba(14,165,233,0.30);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #0c4a6e;
  font-weight: 700;
}
#cc-app .cc-w-demur-engine-stats {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #0c4a6e;
  font-weight: 700;
}
#cc-app .cc-w-demur-engine-behaviour {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px; font-style: italic;
  color: #475569;
  line-height: 1.4;
  margin-top: 2px;
}
#cc-app[data-cc-theme="dark"] .cc-w-demur-engine-stats { color: #7dd3fc; }
#cc-app[data-cc-theme="dark"] .cc-w-demur-engine-behaviour { color: #94a3b8; }
#cc-app .cc-w-demur-engine.is-fallback {
  background: rgba(217,119,6,0.10);
  border-color: rgba(217,119,6,0.30);
}
#cc-app .cc-w-demur-engine.is-fallback .cc-w-demur-engine-stats {
  color: #b45309;
}

/* Tabs */
#cc-app .cc-w-demur-tabs {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
#cc-app .cc-w-demur-tab {
  background: transparent;
  border: 0;
  color: #64748b;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
  font-family: inherit;
}
#cc-app .cc-w-demur-tab:hover {
  color: #0f172a;
}
#cc-app .cc-w-demur-tab.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}

/* Summary strip */
#cc-app .cc-w-demur-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
#cc-app .cc-w-demur-sum {
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}
#cc-app .cc-w-demur-sum-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#cc-app .cc-w-demur-sum-val.cc-w-demur-sum-eur     { color: #b91c1c; }
#cc-app .cc-w-demur-sum-val.cc-w-demur-sum-savings { color: #15803d; }
#cc-app .cc-w-demur-sum-lbl {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2px;
  color: #94a3b8;
  margin-top: 2px;
}

/* List */
#cc-app .cc-w-demur-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}
#cc-app .cc-w-demur-list::-webkit-scrollbar { width: 6px; }
#cc-app .cc-w-demur-list::-webkit-scrollbar-track { background: #f1f5f9; }
#cc-app .cc-w-demur-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
#cc-app .cc-w-demur-empty {
  text-align: center;
  font-size: 11.5px; line-height: 1.5;
  color: #15803d;
  padding: 22px 12px;
  background: #f0fdf4;
  border: 1px dashed #bbf7d0;
  border-radius: 6px;
}

/* Row */
#cc-app .cc-w-demur-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: border-color 120ms ease, background 120ms ease;
}
#cc-app .cc-w-demur-row:hover {
  border-color: #fecaca;
  background: #fffafa;
}
#cc-app .cc-w-demur-row-lhs {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
#cc-app .cc-w-demur-row-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  background: #fef2f2; color: #991b1b;
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: 0.3px;
}
#cc-app .cc-w-demur-row-station {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #64748b;
}
#cc-app .cc-w-demur-row-consignee {
  font-size: 10.5px; color: #94a3b8;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#cc-app .cc-w-demur-row-mid {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
}
#cc-app .cc-w-demur-row-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: #475569; font-weight: 600;
}
#cc-app .cc-w-demur-row-eur {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 800;
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
}
#cc-app .cc-w-demur-row-eur.is-pending {
  color: #94a3b8; font-weight: 600;
}
#cc-app .cc-w-demur-row-rhs {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  min-width: 150px;
}
#cc-app .cc-w-demur-rec {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: help;
}
#cc-app .cc-w-demur-rec.is-green  { background: #dcfce7; color: #166534; }
#cc-app .cc-w-demur-rec.is-amber  { background: #fef3c7; color: #92400e; }
#cc-app .cc-w-demur-rec.is-blue   { background: #dbeafe; color: #1e40af; }
#cc-app .cc-w-demur-rec.is-purple { background: #ede9fe; color: #6d28d9; }
#cc-app .cc-w-demur-rec.is-grey   { background: #f1f5f9; color: #64748b; }
#cc-app .cc-w-demur-rec-save {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; color: #15803d;
  letter-spacing: 0.2px;
}

/* v0.9.46.1 — Rich recommendation popover (replaces broken native title)
   Position: fixed so the widget bounds never clip it. JS sets top/left
   on hover via _positionUldPopover. */
#cc-app .cc-w-demur-row-rec-wrap {
  position: relative;
  cursor: help;
}
#cc-app .cc-w-demur-pop {
  position: fixed;
  top: -9999px; left: -9999px;
  width: 320px;
  background: #0f172a; color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px; line-height: 1.5; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  padding: 12px 14px;
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.40);
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9999;
}
#cc-app .cc-w-demur-row-rec-wrap:hover .cc-w-demur-pop {
  opacity: 1; transform: translateY(0);
}
#cc-app .cc-w-demur-pop::after {
  content: ''; position: absolute;
  top: 100%; right: 20px;
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
#cc-app .cc-w-demur-pop.is-below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}

#cc-app .cc-w-demur-pop-title {
  font-size: 13px; font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
#cc-app .cc-w-demur-pop-summary {
  font-size: 11.5px; color: #cbd5e1;
  margin-bottom: 8px;
}
#cc-app .cc-w-demur-pop-meta {
  display: flex; gap: 16px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
#cc-app .cc-w-demur-pop-meta b {
  color: #34d399; font-weight: 700;
}
#cc-app .cc-w-demur-pop-section {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 8px; margin-bottom: 6px;
}
#cc-app .cc-w-demur-pop-orch {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: orchstep;
}
#cc-app .cc-w-demur-pop-orch li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 11px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  align-items: start;
  counter-increment: orchstep;
}
#cc-app .cc-w-demur-pop-orch li::before {
  content: counter(orchstep);
  position: absolute; left: 0; top: 6px;
  width: 17px; height: 17px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
#cc-app .cc-w-demur-pop-actor {
  color: #fbbf24;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
#cc-app .cc-w-demur-pop-step {
  color: #e2e8f0;
  font-size: 11px; line-height: 1.45;
}
#cc-app .cc-w-demur-pop-without {
  font-size: 11px; color: #fca5a5;
  background: rgba(248, 113, 113, 0.10);
  padding: 6px 9px;
  border-radius: 4px;
  border-left: 2px solid #ef4444;
}

@media (max-width: 900px) {
  #cc-app[data-view="cms"] .cc-cms-uld-statstrip {
    grid-template-columns: repeat(2, 1fr);
  }
}
#cc-app[data-view="cms"] .cc-cms-uld-pop-demur {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.15);
  color: #fecaca;
}
#cc-app[data-view="cms"] .cc-cms-uld-pop-demur b {
  color: #fca5a5;
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.9.59 — Airline Profiles view
   ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="airline-profiles"],
#cc-app .cc-view-pane[data-cc-pane="airline-profiles"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #2563eb;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="airline-profiles"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="airline-profiles"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #60a5fa;
}

.cc-airline-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; background: var(--cc-air-card);
  border-bottom: 1px solid var(--cc-air-border);
}
.cc-airline-header-brand { display: flex; align-items: center; gap: 12px; }
.cc-airline-header-icon { font-size: 28px; }
.cc-airline-header-title { font-size: 18px; font-weight: 700; color: var(--cc-air-text); }
.cc-airline-header-sub { font-size: 12px; color: var(--cc-air-muted); margin-top: 2px; }
.cc-airline-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cc-airline-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3);
  font-size: 12px; color: var(--cc-air-active); font-weight: 600;
}
.cc-airline-active-chip-label { opacity: 0.7; }
.cc-airline-active-chip-name { color: var(--cc-air-text); font-weight: 700; }

#cc-app[data-view="airline-profiles"] .cc-btn,
#cc-app .cc-view-pane[data-cc-pane="airline-profiles"] .cc-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text);
  transition: all 0.15s;
}
#cc-app[data-view="airline-profiles"] .cc-btn:hover,
#cc-app .cc-view-pane[data-cc-pane="airline-profiles"] .cc-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
#cc-app[data-view="airline-profiles"] .cc-btn-primary,
#cc-app .cc-view-pane[data-cc-pane="airline-profiles"] .cc-btn-primary {
  background: var(--cc-air-accent); border-color: var(--cc-air-accent); color: #fff;
}
#cc-app[data-view="airline-profiles"] .cc-btn-danger,
#cc-app .cc-view-pane[data-cc-pane="airline-profiles"] .cc-btn-danger {
  background: var(--cc-air-danger); border-color: var(--cc-air-danger); color: #fff;
}
#cc-app[data-view="airline-profiles"] .cc-btn-disabled,
#cc-app .cc-view-pane[data-cc-pane="airline-profiles"] .cc-btn-disabled {
  opacity: 0.55; cursor: not-allowed;
}

.cc-airline-body {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px;
  padding: 16px; background: var(--cc-air-bg); min-height: calc(100vh - 220px);
  transition: grid-template-columns 0.2s ease;
  position: relative;
}
/* minmax(0,1fr) lets the detail column shrink below its content's min-content, so wide inner
   content (header pills/buttons, editor tables) stays contained — tables scroll inside their own
   overflow-x wrappers instead of pushing the whole pane past the viewport. */
/* v1.0.a.2 — Collapsed left rail mode: detail pane gets ~94% of width.
   The list collapses into a thin vertical strip showing only logos.
   Toggle via cc-airline-rail-collapsed class on the body element. */
.cc-airline-body.cc-airline-rail-collapsed { grid-template-columns: 56px 1fr; }
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-card-name,
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-card-stats,
.cc-airline-body.cc-airline-rail-collapsed .cc-exc-sev-badge,
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-card-active-pill { display: none; }
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-card { padding: 8px 4px; }
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-card-head { justify-content: center; gap: 0; }
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-card-logo { font-size: 24px; }
/* Rail collapse / expand toggle button — sits at the top-right edge of the rail */
.cc-airline-rail-toggle {
  position: absolute; top: 16px; left: 304px; z-index: 5;
  width: 22px; height: 38px; padding: 0; cursor: pointer;
  background: var(--cc-air-card); border: 1px solid var(--cc-air-border);
  border-radius: 0 6px 6px 0; color: var(--cc-air-muted);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  transition: left 0.2s ease, background 0.15s;
}
.cc-airline-rail-toggle:hover { background: var(--cc-air-accent); color: #fff; }
.cc-airline-body.cc-airline-rail-collapsed + .cc-airline-rail-toggle,
.cc-airline-body.cc-airline-rail-collapsed .cc-airline-rail-toggle { left: 60px; }
.cc-airline-list {
  display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 240px); overflow-y: auto;
}
.cc-airline-list-empty {
  padding: 24px; text-align: center; color: var(--cc-air-muted); font-size: 13px;
  background: var(--cc-air-card); border: 1px dashed var(--cc-air-border); border-radius: 8px;
}

.cc-airline-card {
  background: var(--cc-air-card); border: 1px solid var(--cc-air-border); border-radius: 8px;
  padding: 12px; cursor: pointer; transition: all 0.15s; position: relative;
}
.cc-airline-card:hover { border-color: var(--cc-air-accent); transform: translateY(-1px); }
.cc-airline-card.is-selected { border-color: var(--cc-air-accent); box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.cc-airline-card.is-active { border-left: 4px solid var(--cc-air-active); }
.cc-airline-card-head { display: flex; align-items: center; gap: 10px; }
.cc-airline-card-logo { font-size: 24px; }
.cc-airline-card-name { flex: 1; min-width: 0; }
.cc-airline-card-title { font-weight: 700; font-size: 14px; color: var(--cc-air-text); }
.cc-airline-card-meta { font-size: 11px; color: var(--cc-air-muted); margin-top: 2px; }
.cc-airline-card-active-pill {
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  background: var(--cc-air-active); color: #fff; letter-spacing: 0.5px;
}
.cc-airline-card-stats {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
  font-size: 11px; color: var(--cc-air-muted);
}
.cc-airline-card-stats span {
  padding: 3px 6px; background: rgba(0,0,0,0.04); border-radius: 4px;
}
#cc-app[data-cc-theme="dark"] .cc-airline-card-stats span { background: rgba(255,255,255,0.05); }

.cc-airline-detail {
  background: var(--cc-air-card); border: 1px solid var(--cc-air-border); border-radius: 8px;
  padding: 20px; max-height: calc(100vh - 150px); overflow-y: auto;
}
.cc-airline-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center; color: var(--cc-air-muted);
}
.cc-airline-detail-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.cc-airline-detail-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--cc-air-text); }
.cc-airline-detail-empty-sub { font-size: 13px; }

.cc-airline-form-head {
  display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--cc-air-border); margin-bottom: 16px;
  flex-wrap: wrap;   /* let the actions wrap below the title on a narrow detail pane instead of clipping */
}
.cc-airline-form-titleblock { min-width: 0; }   /* allow the title/codes to shrink so the row can wrap */
.cc-airline-form-logo {
  font-size: 32px; width: 56px; height: 56px; text-align: center;
  border: 1px solid var(--cc-air-border); border-radius: 8px;
  background: var(--cc-air-bg); color: var(--cc-air-text);
}
.cc-airline-form-titleblock { flex: 1; }
.cc-airline-form-name {
  width: 100%; font-size: 20px; font-weight: 700;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--cc-air-text);
}
.cc-airline-form-name:focus { border-color: var(--cc-air-accent); background: var(--cc-air-bg); outline: none; }
.cc-airline-form-codes { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
.cc-airline-form-code {
  width: 70px; padding: 4px 8px; font-family: monospace; font-size: 12px; font-weight: 600;
  border: 1px solid var(--cc-air-border); border-radius: 4px;
  background: var(--cc-air-bg); color: var(--cc-air-text); text-transform: uppercase;
}
.cc-airline-form-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.cc-airline-form-section { margin-bottom: 18px; }
.cc-airline-form-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--cc-air-muted); margin-bottom: 8px;
}
.cc-airline-form-section-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.cc-airline-form-subtitle { font-size: 12px; color: var(--cc-air-muted); margin: 10px 0 6px; }
.cc-airline-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.cc-airline-form-grid-wide { grid-template-columns: 1fr; }
.cc-airline-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cc-air-muted); }
.cc-airline-form-grid label > span:first-child { font-weight: 600; }
.cc-airline-form-grid input[type="text"],
.cc-airline-form-grid input[type="number"],
.cc-airline-form-grid select,
.cc-airline-form-notes {
  width: 100%; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--cc-air-border); border-radius: 6px;
  background: var(--cc-air-bg); color: var(--cc-air-text);
}
.cc-airline-form-grid input[type="range"] { width: 100%; }
.cc-airline-form-rangeval {
  font-size: 12px; color: var(--cc-air-text); font-weight: 600; margin-top: -2px;
}
.cc-airline-form-notes { resize: vertical; min-height: 50px; }
.cc-airline-form-foot { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--cc-air-border); margin-top: 16px; }
.cc-airline-form-foot-meta { font-size: 11px; color: var(--cc-air-muted); }
.cc-airline-form-foot-note { font-size: 11px; color: var(--cc-air-muted); margin-top: 6px; font-style: italic; }

.cc-airline-comp-list { display: flex; flex-direction: column; gap: 4px; }
.cc-airline-comp-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--cc-air-bg); border: 1px solid var(--cc-air-border); border-radius: 6px;
}
.cc-airline-comp-info { flex: 1; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.cc-airline-comp-code { font-family: monospace; font-weight: 700; color: var(--cc-air-accent); }
.cc-airline-comp-name { color: var(--cc-air-muted); font-size: 12px; }
.cc-airline-comp-count {
  width: 70px; padding: 3px 6px; font-size: 13px; text-align: right;
  border: 1px solid var(--cc-air-border); border-radius: 4px;
  background: var(--cc-air-card); color: var(--cc-air-text);
}
.cc-airline-comp-rm {
  width: 24px; height: 24px; padding: 0; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--cc-air-border); background: transparent; color: var(--cc-air-muted);
  font-weight: 700;
}
.cc-airline-comp-rm:hover { background: var(--cc-air-danger); color: #fff; border-color: var(--cc-air-danger); }
.cc-airline-comp-empty { padding: 10px; text-align: center; font-size: 12px; color: var(--cc-air-muted); }
.cc-airline-comp-add-row {
  margin-top: 6px; padding: 8px; font-size: 11px; color: var(--cc-air-muted);
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.cc-airline-comp-add {
  padding: 3px 8px; font-size: 11px; font-family: monospace; font-weight: 600; cursor: pointer;
  border: 1px dashed var(--cc-air-border); border-radius: 4px;
  background: transparent; color: var(--cc-air-accent);
}
.cc-airline-comp-add:hover { background: var(--cc-air-accent); color: #fff; border-style: solid; }

.cc-airline-footer-note {
  padding: 10px 20px; text-align: center; font-size: 11px; color: var(--cc-air-muted);
  background: var(--cc-air-card); border-top: 1px solid var(--cc-air-border);
}

@media (max-width: 900px) {
  .cc-airline-body { grid-template-columns: 1fr; }
  .cc-airline-list { max-height: 300px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.9.59b — Flight Schedule editor (table + timeline)
   ═══════════════════════════════════════════════════════════════════════ */
.cc-sched-section { background: var(--cc-air-bg); border: 1px solid var(--cc-air-border); border-radius: 8px; padding: 12px; }
.cc-sched-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cc-sched-title-block { flex: 1; min-width: 220px; }
.cc-sched-pill { display: inline-block; padding: 2px 8px; margin-left: 6px; font-size: 11px; font-weight: 600; background: rgba(37,99,235,0.10); color: var(--cc-air-accent); border-radius: 10px; }
.cc-sched-warn { margin-top: 4px; font-size: 11px; color: #b45309; }
/* v1.0.c.8.9 — Tiered severity chips for the schedule summary */
.cc-sched-warn-err   { color: #b91c1c; font-weight: 600; }
.cc-sched-warn-mixed { color: #b91c1c; font-weight: 600; }

/* v1.0.c.8.9.2 — "Send to scheduling" auto-fix button + report modal */
.cc-sched-autofix-btn { background: #ede9fe; color: #4338ca; border-color: #c4b5fd; }
.cc-sched-autofix-btn:hover { background: #ddd6fe; }
.cc-sched-autofix-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cc-sched-autofix-card {
  width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.35);
  display: flex; flex-direction: column;
}
.cc-sched-autofix-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #e2e8f0;
}
.cc-sched-autofix-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.cc-sched-autofix-sub   { font-size: 12px; color: #64748b; margin-top: 2px; }
.cc-sched-autofix-close {
  background: none; border: none; font-size: 18px; color: #64748b;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.cc-sched-autofix-close:hover { background: #f1f5f9; color: #0f172a; }
.cc-sched-autofix-section { padding: 16px 22px; border-bottom: 1px solid #f1f5f9; }
.cc-sched-autofix-section:last-of-type { border-bottom: none; }
.cc-sched-autofix-section-hdr {
  font-size: 13px; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.cc-sched-autofix-back { color: #b45309; }
.cc-sched-autofix-back-note { font-size: 12px; color: #92400e; margin-bottom: 10px; }
.cc-sched-autofix-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 8px;
  background: #4338ca; color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.cc-sched-autofix-back .cc-sched-autofix-count { background: #b45309; }
.cc-sched-autofix-fixed { margin: 0; padding-left: 18px; font-size: 13px; color: #334155; line-height: 1.55; }
.cc-sched-autofix-fixed li { margin-bottom: 4px; }
.cc-sched-autofix-empty { font-size: 13px; color: #94a3b8; font-style: italic; }
.cc-sched-unfix-group { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.cc-sched-unfix-hdr { font-size: 12px; font-weight: 700; color: #78350f; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cc-sched-unfix-list { margin: 0; padding-left: 18px; font-size: 12px; color: #5b3a0f; line-height: 1.45; }
.cc-sched-unfix-list li { margin-bottom: 2px; }
.cc-sched-unfix-list li.cc-sched-unfix-more { color: #94613a; font-style: italic; list-style: none; }
.cc-sched-unfix-count { background: #fde68a; color: #78350f; padding: 1px 7px; border-radius: 999px; font-size: 10px; }
.cc-sched-autofix-foot { padding: 14px 22px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e2e8f0; }
#cc-app[data-cc-theme="dark"] .cc-sched-autofix-card { background: #1e293b; color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-sched-autofix-title { color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-sched-autofix-head,
#cc-app[data-cc-theme="dark"] .cc-sched-autofix-foot { border-color: #334155; }
#cc-app[data-cc-theme="dark"] .cc-sched-autofix-section { border-color: #334155; }
#cc-app[data-cc-theme="dark"] .cc-sched-autofix-fixed { color: #cbd5e1; }
#cc-app[data-cc-theme="dark"] .cc-sched-unfix-group { background: #422006; border-color: #78350f; }
#cc-app[data-cc-theme="dark"] .cc-sched-unfix-hdr,
#cc-app[data-cc-theme="dark"] .cc-sched-unfix-list { color: #fcd34d; }
.cc-sched-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cc-sched-viewtoggle { display: inline-flex; border: 1px solid var(--cc-air-border); border-radius: 6px; overflow: hidden; }
.cc-sched-tab { padding: 6px 12px; font-size: 12px; font-weight: 600; background: transparent; color: var(--cc-air-muted); border: none; cursor: pointer; }
.cc-sched-tab.is-active { background: var(--cc-air-accent); color: #fff; }
.cc-sched-filterbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.cc-sched-filter { flex: 1; min-width: 200px; padding: 6px 8px; font-size: 12px; border: 1px solid var(--cc-air-border); border-radius: 6px; background: var(--cc-air-card); color: var(--cc-air-text); }
.cc-sched-pagecount { font-size: 11px; color: var(--cc-air-muted); }
.cc-sched-pgbtn { width: 26px; height: 26px; border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text); border-radius: 4px; cursor: pointer; }
.cc-sched-pgbtn:disabled { opacity: 0.3; cursor: not-allowed; }

.cc-sched-tablewrap { overflow-x: auto; max-height: max(540px, min(74vh, 920px)); overflow-y: auto; border: 1px solid var(--cc-air-border); border-radius: 6px; background: var(--cc-air-card); }
.cc-sched-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cc-sched-table th, .cc-sched-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--cc-air-border); white-space: nowrap; }
.cc-sched-table th { position: sticky; top: 0; background: var(--cc-air-card); color: var(--cc-air-muted); font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; user-select: none; }
.cc-sched-table th:hover { color: var(--cc-air-text); }
.cc-sched-table tr.cc-sched-row-warn td  { background: rgba(245,158,11,0.10); }
/* v1.0.c.8.9 — Hard-error rows are red, distinct from amber warnings */
.cc-sched-table tr.cc-sched-row-error td { background: rgba(220,38,38,0.12); border-bottom: 1px solid rgba(220,38,38,0.25); }
.cc-sched-table tr:hover td { background: rgba(0,0,0,0.02); }
#cc-app[data-cc-theme="dark"] .cc-sched-table tr:hover td { background: rgba(255,255,255,0.04); }
.cc-sched-i { padding: 3px 6px; font-size: 12px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--cc-air-text); }
.cc-sched-i:focus { border-color: var(--cc-air-accent); background: var(--cc-air-bg); outline: none; }
.cc-sched-i.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.cc-sched-i.apt { width: 50px; text-transform: uppercase; }
.cc-sched-i.tm { width: 88px; }
.cc-sched-i.w50 { width: 60px; }
.cc-sched-cap { font-family: ui-monospace, monospace; color: var(--cc-air-muted); font-size: 11px; }
.cc-sched-dow-edit { display: inline-flex; gap: 2px; }
.cc-sched-dow { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: var(--cc-air-border); color: var(--cc-air-muted); font-size: 10px; font-weight: 700; cursor: pointer; user-select: none; }
.cc-sched-dow.on { background: var(--cc-air-accent); color: #fff; }
.cc-sched-rm { width: 24px; height: 24px; padding: 0; border: 1px solid var(--cc-air-border); border-radius: 4px; background: transparent; color: var(--cc-air-muted); cursor: pointer; font-weight: 700; }
.cc-sched-rm:hover { background: var(--cc-air-danger); color: #fff; border-color: var(--cc-air-danger); }
.cc-sched-empty { padding: 16px; text-align: center; color: var(--cc-air-muted); font-style: italic; }

/* Timeline view */
.cc-sched-timeline { display: flex; flex-direction: column; gap: 16px; padding: 12px 4px; max-height: 600px; overflow-y: auto; }
.cc-sched-tl-empty, .cc-sched-timeline-empty { padding: 32px; text-align: center; color: var(--cc-air-muted); }
.cc-sched-tl-legend { display: flex; gap: 14px; padding: 6px 8px; font-size: 11px; color: var(--cc-air-muted); flex-wrap: wrap; }
.cc-sched-tl-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cc-sched-tl-swatch { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.cc-sched-tl-swatch.frt { background: #6366f1; }
.cc-sched-tl-swatch.pax { background: #0ea5e9; }
.cc-sched-tl-swatch.oth { background: #94a3b8; }
.cc-sched-tl-swatch.cutoff { background: repeating-linear-gradient(45deg, #fca5a5 0 4px, transparent 4px 8px); }
.cc-sched-tl-hub { background: var(--cc-air-card); border: 1px solid var(--cc-air-border); border-radius: 8px; padding: 10px; }
.cc-sched-tl-hubname { font-size: 14px; font-weight: 700; color: var(--cc-air-text); margin-bottom: 8px; }
.cc-sched-tl-count { font-size: 11px; font-weight: 500; color: var(--cc-air-muted); margin-left: 6px; }
.cc-sched-tl-grid { display: flex; flex-direction: column; gap: 6px; }
.cc-sched-tl-hourstrip { position: relative; height: 16px; font-family: ui-monospace, monospace; font-size: 10px; color: var(--cc-air-muted); border-bottom: 1px dashed var(--cc-air-border); margin-left: 80px; }
.cc-sched-tl-hourstrip span { position: absolute; transform: translateX(-50%); }
.cc-sched-tl-day { display: flex; align-items: center; height: 22px; }
.cc-sched-tl-daylbl { width: 80px; font-size: 11px; color: var(--cc-air-muted); font-family: ui-monospace, monospace; }
.cc-sched-tl-bar { position: relative; flex: 1; height: 18px; background: var(--cc-air-bg); border-radius: 3px; border-left: 1px solid var(--cc-air-border); border-right: 1px solid var(--cc-air-border); }
.cc-sched-tl-cutoff { position: absolute; top: 1px; height: 16px; background: repeating-linear-gradient(45deg, rgba(252,165,165,0.4) 0 3px, transparent 3px 6px); border-radius: 2px; pointer-events: none; }
.cc-sched-tl-flight { position: absolute; top: 1px; height: 16px; min-width: 22px; padding: 0 3px; font-size: 9px; font-family: ui-monospace, monospace; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 2px; color: #fff; cursor: pointer; transform: translateX(-50%); }
.cc-sched-tl-flight.frt { background: #6366f1; }
.cc-sched-tl-flight.pax { background: #0ea5e9; }
.cc-sched-tl-flight.oth { background: #94a3b8; }
.cc-sched-tl-flight:hover { z-index: 10; transform: translateX(-50%) scale(1.4); }

/* v0.9.59b.3 — New flight row highlight (fades over 2.4s) */
@keyframes cc-sched-row-flash {
  0%   { background: rgba(16,185,129,0.35); }
  40%  { background: rgba(16,185,129,0.20); }
  100% { background: transparent; }
}
.cc-sched-table tr.cc-sched-row-new td { animation: cc-sched-row-flash 2.4s ease-out; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.9.60a — GHA Profiles view
   Inherits the airline view's variable theme (--cc-air-*) and shares
   the .cc-airline-* card / form / button classes — only GHA-specific
   bits below.
   ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="gha-profiles"],
#cc-app .cc-view-pane[data-cc-pane="gha-profiles"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #6366f1;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="gha-profiles"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="gha-profiles"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #818cf8;
}

#cc-app[data-view="gha-profiles"] .cc-btn,
#cc-app .cc-view-pane[data-cc-pane="gha-profiles"] .cc-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text);
  transition: all 0.15s;
}
#cc-app[data-view="gha-profiles"] .cc-btn:hover,
#cc-app .cc-view-pane[data-cc-pane="gha-profiles"] .cc-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
#cc-app[data-view="gha-profiles"] .cc-btn-primary,
#cc-app .cc-view-pane[data-cc-pane="gha-profiles"] .cc-btn-primary { background: var(--cc-air-accent); border-color: var(--cc-air-accent); color: #fff; }
#cc-app[data-view="gha-profiles"] .cc-btn-danger,
#cc-app .cc-view-pane[data-cc-pane="gha-profiles"] .cc-btn-danger { background: var(--cc-air-danger); border-color: var(--cc-air-danger); color: #fff; }

.cc-gha-count-pill {
  display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600;
  background: rgba(99,102,241,0.12); color: var(--cc-air-accent);
  border: 1px solid rgba(99,102,241,0.3); border-radius: 12px;
}
.cc-gha-parent-input { width: 140px !important; text-transform: none !important; font-family: inherit !important; font-weight: 500 !important; }

.cc-gha-net-pill {
  display: inline-block; padding: 2px 8px; margin-left: 6px; font-size: 11px; font-weight: 600;
  background: rgba(99,102,241,0.10); color: var(--cc-air-accent); border-radius: 10px;
}

.cc-gha-svc-chips { display: flex; gap: 3px; flex-wrap: wrap; }
.cc-gha-svc-chip {
  display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 600;
  background: rgba(99,102,241,0.10); color: var(--cc-air-accent);
  border-radius: 8px; text-transform: lowercase;
}

.cc-gha-svc-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-gha-svc-toggle {
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  background: var(--cc-air-bg); color: var(--cc-air-muted);
  border: 1px solid var(--cc-air-border); border-radius: 4px; cursor: pointer;
  text-transform: lowercase;
}
.cc-gha-svc-toggle:hover { color: var(--cc-air-text); }
.cc-gha-svc-toggle.is-on { background: var(--cc-air-accent); color: #fff; border-color: var(--cc-air-accent); }

.cc-gha-addstation-row {
  margin-top: 10px; padding: 10px; background: var(--cc-air-bg); border: 1px dashed var(--cc-air-border);
  border-radius: 6px; font-size: 12px; color: var(--cc-air-muted);
  display: flex; gap: 8px; align-items: center;
}
.cc-gha-addstation-input {
  padding: 5px 8px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px;
  width: 90px; border: 1px solid var(--cc-air-border); border-radius: 4px;
  background: var(--cc-air-card); color: var(--cc-air-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.9.60b — GHA Contracts section + Contract Matrix view
   ═══════════════════════════════════════════════════════════════════════ */

/* Embedded section under Airline detail */
.cc-ctr-section { background: var(--cc-air-bg); border: 1px solid var(--cc-air-border); border-radius: 8px; padding: 12px; }
.cc-ctr-tier-badge {
  display: inline-block; padding: 2px 8px; margin-left: 6px; font-size: 10px; font-weight: 700;
  border: 1px solid transparent; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cc-ctr-gha-sub { font-size: 10px; color: var(--cc-air-muted); margin-top: 2px; }
.cc-ctr-cover-pill { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 10px; }
.cc-ctr-cover-ok  { background: rgba(16,185,129,0.12);  color: #10b981; }
.cc-ctr-cover-gap { background: rgba(234,179,8,0.12);   color: #b45309; }

/* Standalone Contract Matrix view */
#cc-app[data-view="contract-matrix"],
#cc-app .cc-view-pane[data-cc-pane="contract-matrix"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #d946ef;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="contract-matrix"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="contract-matrix"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #e879f9;
}

.cc-ctr-stats-pill {
  display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: rgba(217,70,239,0.10); color: var(--cc-air-accent);
  border: 1px solid rgba(217,70,239,0.3); border-radius: 12px;
  font-family: ui-monospace, monospace;
}
.cc-ctr-tier-legend { display: inline-flex; gap: 4px; margin-left: 8px; }

.cc-ctr-filterbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; background: var(--cc-air-card); border-bottom: 1px solid var(--cc-air-border);
  font-size: 12px; color: var(--cc-air-muted);
}
.cc-ctr-filterbar label { display: inline-flex; gap: 6px; align-items: center; }
.cc-ctr-filterbar select {
  padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--cc-air-border); border-radius: 4px;
  background: var(--cc-air-bg); color: var(--cc-air-text);
}

.cc-ctr-matrix-host {
  padding: 16px; max-height: calc(100vh - 280px); overflow: auto;
  background: var(--cc-air-bg);
}
.cc-ctr-matrix-wrap { background: var(--cc-air-card); border: 1px solid var(--cc-air-border); border-radius: 8px; overflow: hidden; }
.cc-ctr-matrix {
  border-collapse: separate; border-spacing: 0; font-size: 11px; min-width: 100%;
}
.cc-ctr-matrix th, .cc-ctr-matrix td { padding: 4px 6px; text-align: center; white-space: nowrap; }
.cc-ctr-matrix thead th {
  position: sticky; top: 0; z-index: 5; background: var(--cc-air-card);
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  color: var(--cc-air-muted); border-bottom: 1px solid var(--cc-air-border);
}
.cc-ctr-corner { background: var(--cc-air-card); position: sticky; left: 0; z-index: 10; }
.cc-ctr-rowhdr {
  position: sticky; left: 0; background: var(--cc-air-card); z-index: 4;
  text-align: left; min-width: 140px; padding: 6px 10px;
  border-right: 1px solid var(--cc-air-border); border-bottom: 1px solid var(--cc-air-border);
}
.cc-ctr-rowhdr-logo { font-size: 18px; }
.cc-ctr-rowhdr-name { font-family: ui-monospace, monospace; font-weight: 700; color: var(--cc-air-text); font-size: 13px; }
.cc-ctr-rowhdr-sub { font-size: 10px; color: var(--cc-air-muted); }

.cc-ctr-colhdr { color: var(--cc-air-text); font-weight: 700; }

.cc-ctr-cell {
  min-width: 64px; height: 44px; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; transition: transform 0.08s;
}
.cc-ctr-cell:hover { transform: scale(1.08); position: relative; z-index: 6; box-shadow: 0 4px 8px rgba(0,0,0,0.12); }
.cc-ctr-cell-gha { font-family: ui-monospace, monospace; font-weight: 700; color: var(--cc-air-text); font-size: 12px; }
.cc-ctr-cell-tier { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
.cc-ctr-cell-gap {
  background: repeating-linear-gradient(45deg, rgba(234,179,8,0.15) 0 4px, transparent 4px 8px);
  color: #b45309; font-size: 14px; font-weight: 700;
}
.cc-ctr-cell-out { background: var(--cc-air-bg); cursor: default; }
.cc-ctr-cell-out:hover { transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.a — LSP Profiles view + Connectivity Mix component
   Inherits the airline view's variable theme.
   ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="lsp-profiles"],
#cc-app .cc-view-pane[data-cc-pane="lsp-profiles"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #f97316;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="lsp-profiles"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="lsp-profiles"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #fb923c;
}

#cc-app[data-view="lsp-profiles"] .cc-btn,
#cc-app .cc-view-pane[data-cc-pane="lsp-profiles"] .cc-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text);
  transition: all 0.15s;
}
#cc-app[data-view="lsp-profiles"] .cc-btn:hover,
#cc-app .cc-view-pane[data-cc-pane="lsp-profiles"] .cc-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
#cc-app[data-view="lsp-profiles"] .cc-btn-primary,
#cc-app .cc-view-pane[data-cc-pane="lsp-profiles"] .cc-btn-primary { background: var(--cc-air-accent); border-color: var(--cc-air-accent); color: #fff; }
#cc-app[data-view="lsp-profiles"] .cc-btn-danger,
#cc-app .cc-view-pane[data-cc-pane="lsp-profiles"] .cc-btn-danger { background: var(--cc-air-danger); border-color: var(--cc-air-danger); color: #fff; }

.cc-lsp-count-pill {
  display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600;
  background: rgba(249,115,22,0.12); color: var(--cc-air-accent);
  border: 1px solid rgba(249,115,22,0.3); border-radius: 12px;
}

/* Connectivity Mix component (shared across all 3 actor types) */
.cc-conn-mix { display: flex; flex-direction: column; gap: 6px; }
.cc-conn-row {
  display: grid; grid-template-columns: 100px 1fr 60px; align-items: center; gap: 12px;
  font-size: 12px;
}
.cc-conn-label { font-weight: 600; }
.cc-conn-pct { font-family: ui-monospace, monospace; font-weight: 700; color: var(--cc-air-muted); text-align: right; }
.cc-conn-summary {
  margin-top: 10px; padding: 8px 12px; background: var(--cc-air-card); border-radius: 6px;
  border: 1px dashed var(--cc-air-border); font-size: 12px; color: var(--cc-air-muted);
}
.cc-conn-summary strong { color: var(--cc-air-text); }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.b — Systems Registry view
   ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="systems-registry"],
#cc-app .cc-view-pane[data-cc-pane="systems-registry"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #06b6d4;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="systems-registry"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="systems-registry"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #22d3ee;
}

#cc-app[data-view="systems-registry"] .cc-btn,
#cc-app .cc-view-pane[data-cc-pane="systems-registry"] .cc-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text);
  transition: all 0.15s;
}
#cc-app[data-view="systems-registry"] .cc-btn-primary,
#cc-app .cc-view-pane[data-cc-pane="systems-registry"] .cc-btn-primary { background: var(--cc-air-accent); border-color: var(--cc-air-accent); color: #fff; }
#cc-app[data-view="systems-registry"] .cc-btn-danger,
#cc-app .cc-view-pane[data-cc-pane="systems-registry"] .cc-btn-danger { background: var(--cc-air-danger); border-color: var(--cc-air-danger); color: #fff; }

.cc-sys-stats-pill {
  display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: rgba(6,182,212,0.10); color: var(--cc-air-accent);
  border: 1px solid rgba(6,182,212,0.3); border-radius: 12px;
  font-family: ui-monospace, monospace;
}
.cc-sys-cat-badge {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cc-sys-compat-chip {
  display: inline-block; padding: 1px 6px; margin: 0 2px; font-size: 10px;
  background: var(--cc-air-border); color: var(--cc-air-muted); border-radius: 4px;
  text-transform: uppercase; font-weight: 600;
}
.cc-sys-compat-row { display: inline-flex; gap: 2px; }

.cc-sys-filterbar {
  display: flex; gap: 16px; align-items: center; padding: 10px 20px;
  background: var(--cc-air-card); border-bottom: 1px solid var(--cc-air-border);
  font-size: 12px; color: var(--cc-air-muted);
}
.cc-sys-filterbar label { display: inline-flex; gap: 6px; align-items: center; }
.cc-sys-filterbar select, .cc-sys-filterbar input {
  padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--cc-air-border); border-radius: 4px;
  background: var(--cc-air-bg); color: var(--cc-air-text);
}

/* Payload viewer */
.cc-sys-payload-row td { background: var(--cc-air-bg); padding: 8px 12px !important; }
.cc-sys-payload-row details { font-size: 12px; }
.cc-sys-payload-row details summary { cursor: pointer; color: var(--cc-air-accent); font-weight: 600; }
.cc-sys-payload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.cc-sys-payload-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--cc-air-muted); margin-bottom: 4px; }
.cc-sys-payload {
  background: var(--cc-air-card); border: 1px solid var(--cc-air-border); border-radius: 4px;
  padding: 8px 12px; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: var(--cc-air-text); white-space: pre-wrap; max-height: 240px; overflow: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c — Exception Catalog view
   ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="exception-catalog"],
#cc-app .cc-view-pane[data-cc-pane="exception-catalog"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #dc2626;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="exception-catalog"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="exception-catalog"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #f87171;
}

#cc-app[data-view="exception-catalog"] .cc-btn,
#cc-app .cc-view-pane[data-cc-pane="exception-catalog"] .cc-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text);
  transition: all 0.15s;
}
#cc-app[data-view="exception-catalog"] .cc-btn-primary,
#cc-app .cc-view-pane[data-cc-pane="exception-catalog"] .cc-btn-primary { background: var(--cc-air-accent); border-color: var(--cc-air-accent); color: #fff; }
#cc-app[data-view="exception-catalog"] .cc-btn-danger,
#cc-app .cc-view-pane[data-cc-pane="exception-catalog"] .cc-btn-danger { background: var(--cc-air-danger); border-color: var(--cc-air-danger); color: #fff; }

.cc-exc-stats-pill {
  display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: rgba(220,38,38,0.10); color: var(--cc-air-accent);
  border: 1px solid rgba(220,38,38,0.3); border-radius: 12px;
  font-family: ui-monospace, monospace;
}
.cc-exc-sev-badge {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cc-exc-inactive-pill {
  display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 700;
  background: rgba(148,163,184,0.20); color: var(--cc-air-muted);
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cc-exc-card-inactive { opacity: 0.55; }
.cc-exc-card-inactive:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.0 — Grouped collapsible sidebar
   ═══════════════════════════════════════════════════════════════════════ */

/* Layout: topbar on top, body splits sidebar + panes */
#cc-app .cc-shell-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items: stretch;
  transition: grid-template-columns 0.2s ease;
}
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed { grid-template-columns: 64px 1fr; }

/* Sidebar shell */
#cc-app .cc-shell-sidebar {
  position: sticky; top: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  padding: 8px 6px 14px;
  max-height: calc(100vh - 130px);
  overflow-y: auto; overflow-x: hidden;
}
#cc-app[data-cc-theme="dark"] .cc-shell-sidebar {
  background: #111827; border-color: #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Collapse / expand toggle */
#cc-app .cc-shell-sidebar-toggle {
  display: block; width: 100%;
  padding: 4px; margin-bottom: 8px;
  background: transparent; border: none; cursor: pointer;
  color: #64748b; font-size: 11px; font-weight: 700;
  text-align: right; padding-right: 14px;
  border-bottom: 1px dashed #e2e8f0;
}
#cc-app[data-cc-theme="dark"] .cc-shell-sidebar-toggle { color: #94a3b8; border-bottom-color: #1f2937; }
#cc-app .cc-shell-sidebar-toggle:hover { color: #0ea5e9; }

/* Group block */
#cc-app .cc-shell-group { margin-bottom: 4px; }
#cc-app .cc-shell-group-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px 4px;
  background: transparent; border: none; cursor: pointer;
  color: #64748b; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  text-align: left;
}
#cc-app[data-cc-theme="dark"] .cc-shell-group-head { color: #94a3b8; }
#cc-app .cc-shell-group-head:hover { color: #0f172a; }
#cc-app[data-cc-theme="dark"] .cc-shell-group-head:hover { color: #e5e7eb; }
#cc-app .cc-shell-group-icon { font-size: 14px; }
#cc-app .cc-shell-group-label { flex: 1 1 auto; white-space: nowrap; }
#cc-app .cc-shell-group-chev { font-size: 10px; transition: transform 0.2s; }
#cc-app .cc-shell-group.is-collapsed .cc-shell-group-chev { transform: rotate(-90deg); }
#cc-app .cc-shell-group.is-collapsed .cc-shell-group-items { display: none; }

#cc-app .cc-shell-group-items {
  display: flex; flex-direction: column; gap: 1px;
}

/* Sidebar nav items (override flat top-bar style with sidebar-specific) */
#cc-app .cc-shell-sidebar-nav .cc-shell-nav-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px;
  color: #334155;
  font-size: 13px; font-weight: 500;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  cursor: pointer; position: relative;
}
#cc-app[data-cc-theme="dark"] .cc-shell-sidebar-nav .cc-shell-nav-btn { color: #cbd5e1; }
#cc-app .cc-shell-sidebar-nav .cc-shell-nav-btn:hover {
  background: rgba(14,165,233,0.08); color: #0369a1;
}
#cc-app[data-cc-theme="dark"] .cc-shell-sidebar-nav .cc-shell-nav-btn:hover {
  background: rgba(125,211,252,0.10); color: #7dd3fc;
}
#cc-app .cc-shell-sidebar-nav .cc-shell-nav-btn.is-active {
  background: linear-gradient(135deg, rgba(14,165,233,0.14), rgba(3,105,161,0.12));
  color: #0369a1;
  font-weight: 700;
  border-color: rgba(14,165,233,0.30);
}
#cc-app[data-cc-theme="dark"] .cc-shell-sidebar-nav .cc-shell-nav-btn.is-active {
  background: linear-gradient(135deg, rgba(125,211,252,0.18), rgba(56,189,248,0.15));
  color: #7dd3fc;
  border-color: rgba(125,211,252,0.30);
}
#cc-app .cc-shell-sidebar-nav .cc-shell-nav-btn.is-pending { opacity: 0.55; }
#cc-app .cc-shell-sidebar-nav .cc-shell-nav-btn.is-pending:hover { opacity: 0.85; }

#cc-app .cc-shell-nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
#cc-app .cc-shell-nav-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cc-app .cc-shell-sidebar-nav .cc-shell-nav-soon {
  display: inline-block;
  padding: 1px 5px; font-size: 9px; font-weight: 700;
  background: #fde68a; color: #92400e; border-radius: 3px;
}

/* Collapsed mode — show icons only */
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-group-label,
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-group-chev,
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-nav-label,
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-nav-soon { display: none; }
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-group-head {
  padding: 8px 0 4px; justify-content: center;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 4px;
}
#cc-app[data-cc-theme="dark"] .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-group-head { border-bottom-color: #1f2937; }
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-sidebar-nav .cc-shell-nav-btn {
  justify-content: center; padding: 8px 4px; gap: 0;
}
#cc-app .cc-shell-body.cc-shell-sidebar-collapsed .cc-shell-sidebar-toggle { text-align: center; padding-right: 0; }

/* Mobile hamburger (≤900px) */
#cc-app .cc-shell-mobile-toggle {
  display: none;
  padding: 6px 10px;
  background: transparent; border: 1px solid #e2e8f0;
  border-radius: 6px; cursor: pointer;
  font-size: 18px; color: #334155;
}
#cc-app[data-cc-theme="dark"] .cc-shell-mobile-toggle { border-color: #1f2937; color: #cbd5e1; }
@media (max-width: 900px) {
  #cc-app .cc-shell-mobile-toggle { display: inline-flex; }
  #cc-app .cc-shell-body { grid-template-columns: 1fr; }
  #cc-app .cc-shell-sidebar {
    position: fixed; top: 14px; left: 14px;
    width: 280px; max-height: calc(100vh - 28px);
    transform: translateX(-110%); opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 60;
  }
  #cc-app[data-cc-mobile-sidebar="open"] .cc-shell-sidebar {
    transform: translateX(0); opacity: 1;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  }
}

/* Slim down topbar — no nav inside it anymore */
#cc-app .cc-shell-meta { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.1 — Contract Matrix tab strip (Airline×GHA / FF×Airline / FF×LSP)
   ═══════════════════════════════════════════════════════════════════════ */
.cc-ctr-tabstrip {
  display: flex; gap: 4px;
  padding: 8px 20px 0; margin-top: -4px;
  border-bottom: 1px solid var(--cc-air-border);
}
.cc-ctr-tabstrip button {
  padding: 8px 14px;
  background: transparent; border: none;
  border-bottom: 3px solid transparent;
  color: var(--cc-air-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.cc-ctr-tabstrip button:hover { color: var(--cc-air-text); }
.cc-ctr-tabstrip button.is-active {
  color: var(--cc-air-accent);
  border-bottom-color: var(--cc-air-accent);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.1 — FF Profiles view (was missing theme block)
   Indigo accent to distinguish from Airline (blue) and LSP (orange).
   ═══════════════════════════════════════════════════════════════════════ */
#cc-app[data-view="ff-profiles"],
#cc-app .cc-view-pane[data-cc-pane="ff-profiles"] {
  --cc-air-bg: #f8fafc;
  --cc-air-card: #fff;
  --cc-air-border: #e2e8f0;
  --cc-air-text: #0f172a;
  --cc-air-muted: #64748b;
  --cc-air-accent: #6366f1;
  --cc-air-active: #10b981;
  --cc-air-danger: #ef4444;
}
#cc-app[data-cc-theme="dark"][data-view="ff-profiles"],
#cc-app[data-cc-theme="dark"] .cc-view-pane[data-cc-pane="ff-profiles"] {
  --cc-air-bg: #0b1220;
  --cc-air-card: #111827;
  --cc-air-border: #1f2937;
  --cc-air-text: #e5e7eb;
  --cc-air-muted: #94a3b8;
  --cc-air-accent: #818cf8;
}

#cc-app[data-view="ff-profiles"] .cc-btn,
#cc-app .cc-view-pane[data-cc-pane="ff-profiles"] .cc-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--cc-air-border); background: var(--cc-air-card); color: var(--cc-air-text);
  transition: all 0.15s;
}
#cc-app[data-view="ff-profiles"] .cc-btn:hover,
#cc-app .cc-view-pane[data-cc-pane="ff-profiles"] .cc-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
#cc-app[data-view="ff-profiles"] .cc-btn-primary,
#cc-app .cc-view-pane[data-cc-pane="ff-profiles"] .cc-btn-primary { background: var(--cc-air-accent); border-color: var(--cc-air-accent); color: #fff; }
#cc-app[data-view="ff-profiles"] .cc-btn-danger,
#cc-app .cc-view-pane[data-cc-pane="ff-profiles"] .cc-btn-danger { background: var(--cc-air-danger); border-color: var(--cc-air-danger); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.2 — ULD Fleet table (in Airline editor)
   ═══════════════════════════════════════════════════════════════════════ */
.cc-uld-table { font-size: 12px; }
.cc-uld-table th { text-align: center; font-size: 11px; }
.cc-uld-table td { vertical-align: middle; padding: 8px 6px; }
.cc-uld-table .cc-uld-subtotal,
.cc-uld-table .cc-uld-sensored { text-align: center; font-family: ui-monospace, monospace; font-weight: 600; color: var(--cc-air-text); }
.cc-uld-typelbl {
  display: inline-block; margin-left: 6px; font-size: 11px;
  color: var(--cc-air-muted); font-weight: 500;
}
.cc-uld-capspec {
  font-size: 10px; color: var(--cc-air-muted);
  font-family: ui-monospace, monospace; margin-top: 2px;
}
.cc-uld-totals td {
  background: rgba(14,165,233,0.08);
  border-top: 2px solid var(--cc-air-border);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.3.5 — Predicted Arrivals widget
   ═══════════════════════════════════════════════════════════════════════ */
.cc-predarr-list { display: flex; flex-direction: column; gap: 4px; max-height: 100%; overflow-y: auto; padding: 4px 0; }
.cc-predarr-row {
  display: grid; grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--cc-air-border, #e2e8f0);
  background: rgba(0,0,0,0.02);
  font-size: 12px;
}
.cc-predarr-row.cc-predarr-ok { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); }
.cc-predarr-row.cc-predarr-warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); }
.cc-predarr-row.cc-predarr-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); }
.cc-predarr-icon { font-size: 16px; text-align: center; }
.cc-predarr-awb { font-family: ui-monospace, monospace; font-weight: 700; font-size: 12px; color: #0f172a; }
.cc-predarr-meta { font-size: 10px; color: #64748b; margin-top: 1px; }
.cc-predarr-prob { font-family: ui-monospace, monospace; font-weight: 700; font-size: 16px; }
.cc-predarr-ok .cc-predarr-prob { color: #10b981; }
.cc-predarr-warn .cc-predarr-prob { color: #b45309; }
.cc-predarr-danger .cc-predarr-prob { color: #dc2626; }
#cc-app[data-cc-theme="dark"] .cc-predarr-awb { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-predarr-meta { color: #94a3b8; }

/* ── v1.0.e.1 — Cut-off Decisions widget ── */
.cc-cutoffdec-head { font-size: 12px; color: #334155; padding: 4px 2px 8px; }
.cc-cutoffdec-head .cc-cutoffdec-ok { color: #15803d; font-weight: 700; }
.cc-cutoffdec-list { display: flex; flex-direction: column; gap: 6px; max-height: 100%; overflow-y: auto; padding: 2px 0; }
.cc-cutoffdec-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--cc-air-border, #e2e8f0);
  border-left-width: 3px;
}
/* let the 1fr content column SHRINK (grid items default to min-width:auto) so a long line/badge can never
   overflow and clip the Resolve button in the `auto` column */
.cc-cutoffdec-row > :first-child { min-width: 0; overflow: hidden; }
.cc-cutoffdec-row.cc-cutoffdec-warn   { background: rgba(245,158,11,0.08); border-left-color: #d97706; }
.cc-cutoffdec-row.cc-cutoffdec-danger { background: rgba(239,68,68,0.09);  border-left-color: #dc2626; }
.cc-cutoffdec-awb { font-family: ui-monospace, monospace; font-weight: 700; font-size: 12px; color: #0f172a; }
.cc-cutoffdec-route { font-family: ui-monospace, monospace; font-weight: 600; font-size: 11px; color: #475569; margin-left: 4px; }
.cc-cutoffdec-meta { font-size: 10.5px; color: #64748b; margin-top: 2px; }
.cc-cutoffdec-rec { font-size: 11px; margin-top: 4px; font-weight: 600; }
.cc-cutoffdec-rec-rebook   { color: #1d4ed8; }
.cc-cutoffdec-rec-expedite { color: #b45309; }
.cc-cutoffdec-btn {
  border: none; cursor: pointer;
  background: #1d4ed8; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: 6px;
  transition: background 150ms ease;
}
.cc-cutoffdec-btn:hover { background: #1e40af; }
#cc-app[data-cc-theme="dark"] .cc-cutoffdec-head { color: #cbd5e1; }
#cc-app[data-cc-theme="dark"] .cc-cutoffdec-awb { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-cutoffdec-meta { color: #94a3b8; }

/* ── v1.0.e.2 — Decision Detail drawer (explainability) ── */
.cc-decision-scrim {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(15,23,42,0.45);
}
.cc-decision-drawer {
  position: fixed; top: 0; right: 0; z-index: 4001;
  width: 420px; max-width: 92vw; height: 100%;
  background: #fff; box-shadow: -8px 0 28px rgba(15,23,42,0.25);
  display: flex; flex-direction: column;
  animation: cc-dec-slidein 180ms ease;
}
/* v1.0.e.2.2 — the [hidden] attribute must beat `display:flex` above,
   otherwise the drawer can't be closed. */
.cc-decision-drawer[hidden], .cc-decision-scrim[hidden] { display: none !important; }
@keyframes cc-dec-slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.cc-decision-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #e2e8f0;
}
.cc-decision-title { font-weight: 700; font-size: 14px; color: #0f172a; }
.cc-decision-close {
  border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #64748b;
}
.cc-decision-body { padding: 14px 16px; overflow-y: auto; }
.cc-dec-engine {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(29,78,216,0.07); border: 1px solid rgba(29,78,216,0.18);
  margin-bottom: 10px;
}
.cc-dec-engine-model { font-weight: 700; font-size: 13px; color: #1d4ed8; }
.cc-dec-engine-sub { font-size: 10.5px; color: #64748b; }
/* v1.0.e.4.1 — Issue → Resolution lead block */
.cc-dec-issue {
  font-size: 12px; color: #7f1d1d; background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.22); border-left-width: 3px; border-left-color: #dc2626;
  border-radius: 7px; padding: 8px 10px; margin-bottom: 8px;
}
.cc-dec-issue-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #b91c1c; margin-bottom: 2px; }
.cc-dec-issue-text { font-weight: 700; color: #0f172a; }
.cc-dec-issue-detail { font-size: 11px; color: #64748b; margin-top: 2px; }
.cc-dec-chosen {
  font-size: 12px; color: #166534; background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.25); border-left-width: 3px; border-left-color: #16a34a;
  border-radius: 7px; padding: 8px 10px; margin-bottom: 12px;
}
#cc-app[data-cc-theme="dark"] .cc-dec-issue-text { color: #e5e7eb; }
.cc-dec-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin: 12px 0 6px; font-weight: 700; }
.cc-dec-cand { padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 7px; margin-bottom: 6px; }
.cc-dec-cand-win { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.06); }
.cc-dec-cand-head { display: flex; align-items: center; gap: 8px; }
.cc-dec-rank {
  flex: 0 0 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: #e2e8f0; color: #475569;
}
.cc-dec-cand-win .cc-dec-rank { background: #16a34a; color: #fff; }
.cc-dec-cand-label { flex: 1; font-size: 12px; font-weight: 600; color: #0f172a; }
.cc-dec-cand-score { font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; color: #1d4ed8; }
.cc-dec-bar { height: 5px; border-radius: 3px; background: #eef2f7; margin: 5px 0 4px; overflow: hidden; }
.cc-dec-bar > span { display: block; height: 100%; background: #1d4ed8; }
.cc-dec-cand-win .cc-dec-bar > span { background: #16a34a; }
.cc-dec-cand-meta { font-size: 10px; color: #64748b; }
.cc-dec-weights { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-dec-wchip { font-size: 10.5px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 3px 8px; color: #475569; }
.cc-dec-wchip b { color: #0f172a; }
.cc-dec-foot { font-size: 10.5px; color: #94a3b8; margin-top: 12px; line-height: 1.5; }
.cc-dec-foot-sub { font-size: 10px; color: #b45309; margin-top: 6px; line-height: 1.5; } /* v1.0.e.2.5 — lever→objective note */
#cc-app[data-cc-theme="dark"] .cc-decision-drawer { background: #0f172a; }
#cc-app[data-cc-theme="dark"] .cc-decision-title,
#cc-app[data-cc-theme="dark"] .cc-dec-cand-label { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-dec-cand { border-color: #1e293b; }
#cc-app[data-cc-theme="dark"] .cc-dec-wchip { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* ── v1.0.f.1 — Accountable actor + communication-flow blocks (shared by the
   decision drawer and the Decisions slate detail) ── */
.cc-dec-actor { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
.cc-dec-actor-icon { font-size: 18px; line-height: 1; }
.cc-dec-actor-id { display: flex; flex-direction: column; }
.cc-dec-actor-id b { color: #0f172a; font-size: 12.5px; }
.cc-dec-actor-role { font-size: 10.5px; color: #64748b; }
.cc-dec-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cc-dec-flow-step { font-size: 10.5px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 6px; padding: 3px 8px; }
.cc-dec-flow-arrow { color: #94a3b8; font-size: 11px; }
#cc-app[data-cc-theme="dark"] .cc-dec-actor { background: #111827; border-color: #1e293b; }
#cc-app[data-cc-theme="dark"] .cc-dec-actor-id b { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-dec-flow-step { background: #1e293b; border-color: #334155; color: #93c5fd; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.f.1 — Decisions slate (resolution ledger view)
   ═══════════════════════════════════════════════════════════════════════ */
.cc-declog { padding: 14px 18px 24px; }
.cc-declog-loading { color: #94a3b8; font-size: 13px; padding: 30px; text-align: center; }
.cc-declog-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.cc-declog-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cc-declog-kpi-v { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.cc-declog-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; }
.cc-declog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cc-declog-search { flex: 1 1 220px; min-width: 180px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; }
.cc-declog-sel { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; background: #fff; color: #0f172a; }
.cc-declog-toggle { font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cc-declog-clear { margin-left: auto; padding: 7px 12px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #64748b; font-size: 11.5px; cursor: pointer; }
.cc-declog-clear:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.cc-declog-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 14px; align-items: start; }
.cc-declog-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.cc-declog-row { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.cc-declog-row:hover { border-color: #cbd5e1; background: #f8fafc; }
.cc-declog-row.is-selected { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 1px #6366f1 inset; }
.cc-declog-row-icon { font-size: 16px; flex: 0 0 auto; }
.cc-declog-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cc-declog-row-title { font-size: 12.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-declog-row-sub { font-size: 10.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-declog-row-eur { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; font-weight: 800; color: #16a34a; flex: 0 0 auto; }
/* ⛔ 2026-10-30 · P2P-20 — GREEN AND A LEADING `+` BOTH SAY "MONEY CAME BACK". On a demurrage or
   exception-resolution row the figure is an avoided cost, so the row read `+€80,261` in gain-green for a
   quantity nothing recovered. The `+` is gone from those rows (the renderer decides from the field the server
   named); this stops the colour making the same claim. Slate, not red: an avoided cost is not a loss either. */
.cc-declog-row-eur--avoided { color: #475569; font-weight: 700; }
.cc-declog-row-verb { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #64748b; }
.cc-declog-row-time { font-size: 9.5px; font-weight: 600; color: #94a3b8; }
.cc-declog-empty, .cc-declog-detail-empty { color: #94a3b8; font-size: 12.5px; padding: 26px 16px; text-align: center; border: 1px dashed #e2e8f0; border-radius: 9px; }
.cc-declog-detail { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; max-height: 70vh; overflow-y: auto; }
.cc-declog-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cc-declog-detail-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; }
.cc-declog-detail-time { font-size: 10.5px; color: #94a3b8; font-weight: 600; }
.cc-declog-detail-title { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.cc-declog-cost { display: flex; flex-direction: column; gap: 5px; }
.cc-declog-cost-row { display: grid; grid-template-columns: 1fr 90px auto; align-items: center; gap: 8px; }
.cc-declog-cost-label { font-size: 11.5px; color: #475569; }
.cc-declog-cost-bar { height: 7px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.cc-declog-cost-bar > span { display: block; height: 100%; background: #16a34a; }
.cc-declog-cost-eur { font-size: 11.5px; font-weight: 700; color: #0f172a; text-align: right; }
@media (max-width: 860px) {
  .cc-declog-kpis { grid-template-columns: repeat(2, 1fr); }
  .cc-declog-grid { grid-template-columns: 1fr; }
}
#cc-app[data-cc-theme="dark"] .cc-declog-kpi,
#cc-app[data-cc-theme="dark"] .cc-declog-row,
#cc-app[data-cc-theme="dark"] .cc-declog-detail { background: #0f172a; border-color: #1e293b; }
#cc-app[data-cc-theme="dark"] .cc-declog-kpi-v,
#cc-app[data-cc-theme="dark"] .cc-declog-row-title,
#cc-app[data-cc-theme="dark"] .cc-declog-detail-title,
#cc-app[data-cc-theme="dark"] .cc-declog-cost-eur { color: #e5e7eb; }
#cc-app[data-cc-theme="dark"] .cc-declog-row.is-selected { background: #1e1b4b; }
#cc-app[data-cc-theme="dark"] .cc-declog-search,
#cc-app[data-cc-theme="dark"] .cc-declog-sel { background: #111827; border-color: #334155; color: #e5e7eb; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.3.1 — Map UI enhancements
     · Aircraft + Weather markers
     · Rich click-popups for all moving assets
     · Weather-alert rings (pulsing animation)
   ═══════════════════════════════════════════════════════════════════════ */

/* v1.0.c.3.1.4 — Aircraft marker overhaul.
   Solid white circle with navy ✈ glyph that rotates per great-circle
   bearing. Pointer-events explicit so the popup-on-click fires. */
.cc-marker-aircraft-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #fff;
  border: 2px solid #4338ca;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(67,56,202,0.35);
  cursor: pointer;
  pointer-events: auto;
  /* v1.0.c.3.1.6 — Fade-in so newly-airborne flights don't snap onto
     the map. Animation only fires when the marker DOM is created;
     reused markers (re-used across refresh ticks) won't re-trigger it. */
  animation: cc-aircraft-fadein 500ms ease-out;
}
@keyframes cc-aircraft-fadein {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1.0); }
}
.cc-marker-aircraft-glyph {
  font-size: 16px;
  color: #4338ca;
  font-weight: 700;
  line-height: 1;
  transform-origin: 50% 50%;
  pointer-events: none;     /* let clicks pass to the wrap */
}
/* Legacy class kept so any pre-cached HTML doesn't break */
.cc-marker.cc-marker-aircraft {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-size: 18px;
  color: #4338ca;
  transform-origin: 50% 50%;
}

/* v1.0.c.3.1.4 — Weather observation icon overhaul.
   Bigger, more opaque background, clearer border, click cursor. */
.cc-marker.cc-marker-weather {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  font-size: 16px;
  background: rgba(255,255,255,1.0);
  border: 2px solid #f59e0b;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: auto;
}

/* Weather alert ring — slow pulse */
@keyframes cc-weather-alert-pulse {
  0%   { stroke-opacity: 0.9; fill-opacity: 0.18; }
  50%  { stroke-opacity: 0.5; fill-opacity: 0.10; }
  100% { stroke-opacity: 0.9; fill-opacity: 0.18; }
}
.cc-weather-alert-ring { animation: cc-weather-alert-pulse 2.4s ease-in-out infinite; }

/* Rich popup styling (Leaflet bindPopup) */
.leaflet-popup-content .cc-mappop {
  font-size: 12px;
  min-width: 200px;
}
.leaflet-popup-content .cc-mappop b { color: #0f172a; }
.leaflet-popup-content .cc-mappop-row {
  display: block;
  font-size: 11px;
  color: #475569;
  margin-top: 3px;
}
.leaflet-popup-content .cc-mappop-row b { color: #0f172a; font-weight: 700; }
.leaflet-popup-content .cc-mappop-src {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
  font-size: 10px;
  color: #64748b;
  font-style: italic;
  font-family: ui-monospace, monospace;
}
.cc-mappop-status-ontime  { color: #15803d; }
.cc-mappop-status-loading { color: #0ea5e9; }
.cc-mappop-status-atrisk  { color: #d97706; }
.cc-mappop-status-late    { color: #dc2626; }

/* Predictive DELIVERY-ETA overlay — a compact badge at each RfsTrip's destination + severity text in the popup */
.cc-eta-badge {
  display: inline-block;
  transform: translate(-50%, -140%);
  white-space: nowrap;
  font: 700 11px/1 ui-monospace, monospace;
  color: #fff;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.cc-eta-low    { background: #15803d; }
.cc-eta-medium { background: #d97706; }
.cc-eta-high   { background: #dc2626; }
.cc-eta-txt-low    { color: #15803d; }
.cc-eta-txt-medium { color: #d97706; }
.cc-eta-txt-high   { color: #dc2626; }

/* Layer-control polish (Leaflet default plus a slight upgrade) */
.leaflet-control-layers {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
.leaflet-control-layers-expanded {
  padding: 10px 12px !important;
  font-size: 12px;
}
.leaflet-control-layers-overlays label {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.4 — CONFIGURATION PAGE (Configure & Run)
   ───────────────────────────────────────────────────────────────────────
   Three-step guided flow at the top of the sidebar: actors → sim → run.
   Visual idiom borrows from the TIPPR settings page: numbered step strip
   across the top, large content panel below, primary CTA at the bottom.
   ═══════════════════════════════════════════════════════════════════════ */

.cc-configuration {
  display: flex; flex-direction: column;
  padding: 24px clamp(16px, 3vw, 40px);
  gap: 22px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 100%;
}

.cc-config-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}
.cc-config-title {
  margin: 0 0 4px 0;
  font-size: 28px; font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.cc-config-subtitle {
  margin: 0;
  font-size: 14px; color: #64748b;
}
.cc-config-version-chip {
  display: inline-block;
  padding: 4px 10px;
  background: #4338ca; color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Step strip ─────────────────────────────────────────────────── */
.cc-config-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.cc-config-step {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #475569;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.cc-config-step:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cc-config-step.is-active {
  background: #eef2ff;
  border-color: #4338ca;
  color: #1e1b4b;
}
.cc-config-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #e2e8f0;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  color: #475569;
  flex-shrink: 0;
}
.cc-config-step.is-active .cc-config-step-num {
  background: #4338ca; color: #fff;
}
.cc-config-step.is-complete .cc-config-step-num {
  background: #16a34a; color: #fff;
}
.cc-config-step-label {
  flex: 1;
  font-size: 14px; font-weight: 600;
}
.cc-config-step-status {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px;
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b;
  white-space: nowrap;
}
.cc-config-step.is-complete .cc-config-step-status {
  background: #dcfce7; color: #166534;
}

/* ── Step panel ─────────────────────────────────────────────────── */
.cc-config-panel {
  display: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px clamp(16px, 2.5vw, 32px);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.cc-config-panel.is-active { display: flex; flex-direction: column; gap: 22px; }

.cc-config-panel-head h2 {
  margin: 0 0 6px 0;
  font-size: 20px; font-weight: 700;
  color: #0f172a;
}
.cc-config-panel-head p {
  margin: 0;
  font-size: 13px; color: #64748b;
  max-width: 78ch;
  line-height: 1.55;
}

/* ── Active-actor selector row ──────────────────────────────────── */
.cc-config-actives {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cc-config-active-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
}
.cc-config-active-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748b; font-weight: 600;
  margin-bottom: 6px;
}
.cc-config-active-value {
  font-size: 15px; font-weight: 600; color: #0f172a;
}
.cc-config-active-sub {
  font-size: 12px; color: #94a3b8; margin-top: 2px;
}

/* ── Actor grid ─────────────────────────────────────────────────── */
.cc-config-actor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cc-config-actor-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.cc-config-actor-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.cc-config-actor-card-head {
  display: flex; align-items: center; gap: 10px;
}
.cc-config-actor-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9;
  border-radius: 8px;
}
.cc-config-actor-name {
  font-size: 14px; font-weight: 700;
  color: #0f172a;
  flex: 1;
}
.cc-config-actor-count {
  font-size: 12px; font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 999px;
}
.cc-config-actor-drives {
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}
.cc-config-actor-drives b { color: #0f172a; }
.cc-config-actor-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.cc-config-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.cc-config-chip-ok    { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.cc-config-chip-warn  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.cc-config-chip-info  { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.cc-config-actor-open {
  margin-top: auto;
  align-self: flex-start;
  font-size: 12px; font-weight: 600;
  color: #4338ca;
  background: none; border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
}
.cc-config-actor-open:hover { color: #312e81; }

/* ── Two-engine disclosure callout ──────────────────────────────── */
.cc-config-callout {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #78350f;
}
.cc-config-callout > summary {
  cursor: pointer;
  font-weight: 600;
  color: #92400e;
  list-style: none;
}
.cc-config-callout > summary::-webkit-details-marker { display: none; }
.cc-config-callout > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 120ms;
}
.cc-config-callout[open] > summary::before {
  transform: rotate(90deg);
}
.cc-config-callout-body {
  margin-top: 10px;
  line-height: 1.6;
}
.cc-config-callout-body p { margin: 0 0 8px 0; }
.cc-config-callout-body p:last-child { margin-bottom: 0; }
.cc-config-callout-body .cc-config-chip { vertical-align: middle; }

/* ── Sim config grid (step 2) ───────────────────────────────────── */
.cc-config-sim-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cc-config-sim-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.cc-config-sim-tile-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748b; font-weight: 600;
}
.cc-config-sim-tile-value {
  font-size: 16px; font-weight: 700; color: #0f172a;
}
.cc-config-sim-tile-hint {
  font-size: 12px; color: #94a3b8;
}
.cc-config-sim-tile-edit {
  margin-top: 6px;
  font-size: 12px; font-weight: 600;
  color: #4338ca;
  background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline;
  align-self: flex-start;
}

/* ── Pre-flight checklist (step 3) ──────────────────────────────── */
.cc-config-preflight {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-config-preflight li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
}
.cc-config-preflight-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.cc-config-preflight-text {
  flex: 1;
  color: #334155;
}
.cc-config-preflight-text b { color: #0f172a; }
.cc-config-preflight-detail {
  font-size: 12px;
  color: #94a3b8;
}
.cc-config-preflight li.is-ok   .cc-config-preflight-icon { color: #16a34a; }
.cc-config-preflight li.is-warn .cc-config-preflight-icon { color: #f59e0b; }
.cc-config-preflight li.is-fail .cc-config-preflight-icon { color: #dc2626; }

/* ── Run CTA + skip checkbox ────────────────────────────────────── */
.cc-config-run-cta {
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
  padding: 28px 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 14px;
}
.cc-btn-lg {
  font-size: 16px; padding: 14px 28px;
  border-radius: 10px;
}
.cc-config-run-icon {
  display: inline-block; margin-right: 6px;
}
.cc-config-skip-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #64748b;
}

/* ── Action row ─────────────────────────────────────────────────── */
.cc-config-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed #e2e8f0;
  margin-top: 8px;
  padding-top: 18px;
}
.cc-config-actions .cc-btn:first-child {
  margin-right: auto;   /* Back button left, others right */
}

/* Re-use cc-btn pattern from sidebar / sim-config — fallback styles
   if cc-btn isn't already defined elsewhere. */
.cc-configuration .cc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.cc-configuration .cc-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.cc-configuration .cc-btn-primary {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
}
.cc-configuration .cc-btn-primary:hover {
  background: #312e81;
  border-color: #312e81;
}

/* Dark theme support */
#cc-app[data-cc-theme="dark"] .cc-configuration {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
#cc-app[data-cc-theme="dark"] .cc-config-title { color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-config-subtitle { color: #94a3b8; }
#cc-app[data-cc-theme="dark"] .cc-config-steps,
#cc-app[data-cc-theme="dark"] .cc-config-panel {
  background: #1e293b;
  border-color: #334155;
}
#cc-app[data-cc-theme="dark"] .cc-config-step { color: #cbd5e1; }
#cc-app[data-cc-theme="dark"] .cc-config-step:hover { background: #334155; color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-config-step.is-active { background: #1e1b4b; color: #e0e7ff; }
#cc-app[data-cc-theme="dark"] .cc-config-actor-card { background: #1e293b; border-color: #334155; }
#cc-app[data-cc-theme="dark"] .cc-config-actor-name { color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-config-active-card,
#cc-app[data-cc-theme="dark"] .cc-config-sim-tile,
#cc-app[data-cc-theme="dark"] .cc-config-preflight li { background: #0f172a; border-color: #334155; }

/* v1.0.c.5 — Deprecation banner on the legacy Sim Tuning page */
.cc-cfg-deprecation-banner {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fbbf24;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(245,158,11,0.15);
}
.cc-cfg-deprecation-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.cc-cfg-deprecation-body { flex: 1; }
.cc-cfg-deprecation-title {
  font-size: 14px; font-weight: 700;
  color: #78350f;
  margin-bottom: 4px;
}
.cc-cfg-deprecation-msg {
  font-size: 13px; line-height: 1.5;
  color: #92400e;
}
.cc-cfg-deprecation-msg strong { color: #78350f; }
.cc-cfg-deprecation-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: #4338ca; color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms;
}
.cc-cfg-deprecation-cta:hover { background: #312e81; }

/* v1.0.c.5 — Native sim controls inside Step 2 of the Configuration page */
.cc-config-sim-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
}
.cc-config-sim-switch input { width: 16px; height: 16px; cursor: pointer; }
.cc-config-sim-tile input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: #4338ca;
}
.cc-config-sim-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  flex-wrap: wrap;
}
.cc-config-sim-seg-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 5px;
  font: inherit;
  font-size: 12px; font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.cc-config-sim-seg-btn:hover { background: #f1f5f9; color: #0f172a; }
.cc-config-sim-seg-btn.is-active {
  background: #4338ca; color: #fff;
}
#cc-app[data-cc-theme="dark"] .cc-config-sim-seg { background: #1e293b; border-color: #334155; }
#cc-app[data-cc-theme="dark"] .cc-config-sim-seg-btn { color: #cbd5e1; }
#cc-app[data-cc-theme="dark"] .cc-config-sim-seg-btn:hover { background: #334155; color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-config-sim-switch { color: #f8fafc; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.c.6 — PERSONA MODEL
   ───────────────────────────────────────────────────────────────────────
   · Persona picker (Configuration Step 1)
   · Counterparty inventory tiles (Step 1)
   · Top-bar persona chip + dropdown menu
   ═══════════════════════════════════════════════════════════════════════ */

.cc-persona-picker {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 14px;
}
.cc-persona-picker-head { display: flex; flex-direction: column; gap: 2px; }
.cc-persona-picker-title {
  font-size: 14px; font-weight: 700;
  color: #4c1d95;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.cc-persona-picker-sub { font-size: 12px; color: #6d28d9; }

.cc-persona-kind-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: rgba(255,255,255,0.6);
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  padding: 6px;
}
.cc-persona-kind-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: #6b21a8;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.cc-persona-kind-tab:hover { background: #f5f3ff; }
.cc-persona-kind-tab.is-active {
  background: #fff;
  border-color: #7c3aed;
  color: #4c1d95;
  box-shadow: 0 1px 3px rgba(124,58,237,0.25);
}
.cc-persona-kind-icon { font-size: 20px; }

.cc-persona-profile-row {
  display: flex; align-items: center; gap: 12px;
}
.cc-persona-profile-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6d28d9; font-weight: 600;
  flex-shrink: 0;
}
.cc-persona-profile-select {
  flex: 1;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}
.cc-persona-empty {
  font-size: 13px; color: #6d28d9;
  font-style: italic;
}

.cc-persona-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  border: 1px dashed #ddd6fe;
}
.cc-persona-detail-kv {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px;
}
.cc-persona-detail-kv span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #7c3aed; font-weight: 600;
}
.cc-persona-detail-kv b { color: #1e1b4b; font-weight: 700; }

/* ── Counterparty inventory ─────────────────────────────────────── */
.cc-persona-counterparties {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}
.cc-persona-counterparties-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #475569; font-weight: 700;
  margin-bottom: 10px;
}
.cc-persona-counterparties-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.cc-persona-counter {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.cc-persona-counter-icon { font-size: 22px; }
.cc-persona-counter-count {
  font-size: 22px; font-weight: 700;
  color: #0f172a;
  line-height: 1;
}
.cc-persona-counter-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b; font-weight: 600;
}

/* ── Top-bar persona chip ──────────────────────────────────────── */
.cc-shell-persona { position: relative; }
.cc-shell-persona-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  color: #fff;
  border: 1px solid #4338ca;
  border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: filter 100ms;
}
.cc-shell-persona-btn:hover { filter: brightness(1.1); }
.cc-shell-persona-btn[aria-expanded="true"] { filter: brightness(0.9); }
.cc-shell-persona-icon  { font-size: 14px; }
.cc-shell-persona-label { letter-spacing: 0.02em; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-shell-persona-chev  { font-size: 10px; opacity: 0.85; }

.cc-shell-persona-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 280px; max-width: 360px;
  max-height: 480px; overflow-y: auto;
  background: #fff;
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(67,56,202,0.15), 0 4px 8px rgba(15,23,42,0.08);
  padding: 8px;
  z-index: 1200;
}
.cc-shell-persona-section { padding: 4px 0; }
.cc-shell-persona-section + .cc-shell-persona-section {
  border-top: 1px solid #e9d5ff;
  margin-top: 4px;
}
.cc-shell-persona-section-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 6px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6d28d9;
}
.cc-shell-persona-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: background 100ms;
}
.cc-shell-persona-row:hover { background: #f5f3ff; }
.cc-shell-persona-row.is-current {
  background: #ede9fe; color: #4c1d95; font-weight: 700;
}
.cc-shell-persona-row-check { color: #7c3aed; font-weight: 700; }
.cc-shell-persona-empty {
  padding: 6px 10px;
  font-size: 12px; color: #94a3b8; font-style: italic;
}

/* Dark theme */
#cc-app[data-cc-theme="dark"] .cc-persona-picker {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-color: #4338ca;
}
#cc-app[data-cc-theme="dark"] .cc-persona-picker-title,
#cc-app[data-cc-theme="dark"] .cc-persona-picker-sub { color: #c4b5fd; }
#cc-app[data-cc-theme="dark"] .cc-persona-kind-tabs { background: rgba(0,0,0,0.2); border-color: #4338ca; }
#cc-app[data-cc-theme="dark"] .cc-persona-kind-tab { color: #c4b5fd; }
#cc-app[data-cc-theme="dark"] .cc-persona-kind-tab.is-active { background: #1e1b4b; color: #f5f3ff; }
#cc-app[data-cc-theme="dark"] .cc-persona-profile-select { background: #0f172a; border-color: #4338ca; color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-persona-detail { background: rgba(0,0,0,0.2); border-color: #4338ca; }
#cc-app[data-cc-theme="dark"] .cc-persona-detail-kv b { color: #f5f3ff; }
#cc-app[data-cc-theme="dark"] .cc-persona-counterparties { background: #1e293b; border-color: #334155; }
#cc-app[data-cc-theme="dark"] .cc-persona-counter { background: #0f172a; border-color: #334155; }
#cc-app[data-cc-theme="dark"] .cc-persona-counter-count { color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-shell-persona-menu { background: #1e293b; border-color: #4338ca; }
#cc-app[data-cc-theme="dark"] .cc-shell-persona-row { color: #f8fafc; }
#cc-app[data-cc-theme="dark"] .cc-shell-persona-row:hover { background: #312e81; }
#cc-app[data-cc-theme="dark"] .cc-shell-persona-row.is-current { background: #4c1d95; color: #f5f3ff; }

/* v1.0.c.7.4 — Per-airport ULD status chip (map "ULD status" layer) */
.cc-uld-airport-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #4338ca;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(67,56,202,0.18);
  font-size: 11px; font-weight: 600;
  color: #1e1b4b;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
}
.cc-uld-airport-chip:hover { box-shadow: 0 3px 6px rgba(67,56,202,0.28); }
.cc-uld-chip-count {
  font-size: 13px; font-weight: 800;
  line-height: 1;
  color: #312e81;
}
.cc-uld-chip-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #6366f1;
}
.cc-uld-chip-bar {
  display: inline-flex;
  height: 6px; width: 32px;
  border-radius: 3px; overflow: hidden;
  background: #e2e8f0;
}
.cc-uld-chip-seg {
  display: inline-block;
  height: 100%;
}
/* Popup status-dot */
.cc-uld-pop-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: baseline;
}
#cc-app[data-cc-theme="dark"] .cc-uld-airport-chip {
  background: #1e293b;
  border-color: #6366f1;
  color: #e0e7ff;
}
#cc-app[data-cc-theme="dark"] .cc-uld-chip-count { color: #c7d2fe; }
#cc-app[data-cc-theme="dark"] .cc-uld-chip-label { color: #a5b4fc; }
#cc-app[data-cc-theme="dark"] .cc-uld-chip-bar { background: #334155; }

/* ─── v1.0.j — Exception Queue · Agent vs CMP (card ac_s3_c) ─── */
#cc-app .cc-exq{display:flex;flex-direction:column;gap:10px;}
#cc-app .cc-exq-head{font-size:13px;color:var(--cc-text);padding:2px 2px 8px;border-bottom:1px solid var(--cc-line);}
#cc-app .cc-exq-head b{font-weight:800;}
#cc-app .cc-exq-bad{color:#dc2626;}
#cc-app .cc-exq-good{color:#16a34a;}
#cc-app .cc-exq-list{display:flex;flex-direction:column;gap:9px;}
#cc-app .cc-exq-row{border:1px solid var(--cc-line);border-radius:10px;padding:11px 12px;background:var(--cc-surface);}
#cc-app .cc-exq-top{display:flex;align-items:center;gap:8px;}
#cc-app .cc-exq-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#9ca3af;}
#cc-app .cc-exq-sev-high{background:#dc2626;}
#cc-app .cc-exq-sev-medium{background:#f59e0b;}
#cc-app .cc-exq-sev-low{background:#3b82f6;}
#cc-app .cc-exq-title{font-weight:700;font-size:13px;color:var(--cc-text);flex:1 1 auto;min-width:0;}
#cc-app .cc-exq-ent{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--cc-muted);background:var(--cc-surface-2);border:1px solid var(--cc-line);border-radius:5px;padding:1px 5px;}
#cc-app .cc-exq-since{font-size:11.5px;font-weight:700;color:#b45309;white-space:nowrap;}
#cc-app .cc-exq-meta{font-size:11.5px;color:var(--cc-muted);margin:6px 0 8px;}
#cc-app .cc-exq-meta b{color:var(--cc-text);}
#cc-app .cc-exq-tl{display:flex;flex-direction:column;gap:5px;}
#cc-app .cc-exq-tlrow{display:grid;grid-template-columns:42px 1fr 58px;align-items:center;gap:8px;}
#cc-app .cc-exq-tllab{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--cc-muted);}
#cc-app .cc-exq-bar{height:9px;background:var(--cc-surface-2);border-radius:5px;overflow:hidden;}
#cc-app .cc-exq-fill{display:block;height:100%;border-radius:5px;min-width:3px;transition:width .5s ease;}
#cc-app .cc-exq-fill-agent{background:linear-gradient(90deg,#f59e0b,#dc2626);}
#cc-app .cc-exq-fill-cmp{background:linear-gradient(90deg,#16a34a,#22c55e);}
#cc-app .cc-exq-tlval{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;text-align:right;}
#cc-app .cc-exq-act{margin-top:9px;}
#cc-app .cc-exq-btn{font-family:inherit;font-weight:700;font-size:12px;color:#fff;background:#16a34a;border:none;border-radius:7px;padding:6px 12px;cursor:pointer;transition:.15s;}
#cc-app .cc-exq-btn:hover{background:#15803d;transform:translateY(-1px);}

/* ─── v1.0.j — per-widget help (ⓘ) button + help panel ─── */
#cc-app .cc-widget-help{flex:0 0 auto;width:18px;height:18px;margin-left:7px;padding:0;border:1px solid var(--cc-line);border-radius:50%;background:var(--cc-surface-2);color:var(--cc-muted);font-size:11px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
#cc-app .cc-widget-help:hover{background:#2563eb;color:#fff;border-color:transparent;}
#cc-app .cc-whelp{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;}
#cc-app .cc-whelp-scrim{position:absolute;inset:0;background:rgba(8,23,38,.45);}
#cc-app .cc-whelp-panel{position:relative;z-index:1;width:min(440px,92vw);max-height:86vh;overflow:auto;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.32);padding:24px 24px 22px;}
#cc-app .cc-whelp-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:8px;border:none;background:var(--cc-surface-2);color:var(--cc-muted);font-size:18px;line-height:1;cursor:pointer;}
#cc-app .cc-whelp-x:hover{background:#ef4444;color:#fff;}
#cc-app .cc-whelp-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--cc-muted);}
#cc-app .cc-whelp-h{font-size:19px;font-weight:800;color:var(--cc-text);margin:6px 0 10px;}
#cc-app .cc-whelp-desc{font-size:14px;line-height:1.6;color:var(--cc-text);}
#cc-app .cc-whelp-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;padding-top:13px;border-top:1px solid var(--cc-line);font-size:12px;color:var(--cc-muted);}
#cc-app .cc-whelp-meta b{color:var(--cc-text);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-right:4px;}

/* v1.0.k — AWB booking source · registry "live source" badge + Sim Config source line */
#cc-app .cc-sys-live-badge{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#059669;background:#05966915;border:1px solid #05966940;text-transform:uppercase;}
#cc-app .cc-booking-source{font-weight:600;color:var(--cc-text);}
#cc-app .cc-booking-source::before{content:"📡 ";}

/* v1.0.l — ac_s3_d/ac_s2_d · Bidirectional TMS ↔ CMS Kafka sync split-screen */
#cc-app .cc-sync{width:100%;}
#cc-app .cc-sync-cols{display:grid;grid-template-columns:1fr 190px 1fr;gap:12px;align-items:start;}
@media (max-width:760px){#cc-app .cc-sync-cols{grid-template-columns:1fr;}}
#cc-app .cc-sync-col{background:var(--cc-surface,#fff);border:1px solid var(--cc-line);border-radius:10px;padding:10px;min-height:120px;}
#cc-app .cc-sync-col-tms{border-top:3px solid #f97316;}
#cc-app .cc-sync-col-cms{border-top:3px solid #3b82f6;}
#cc-app .cc-sync-col-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--cc-line);}
#cc-app .cc-sync-col-title{font-size:13px;font-weight:800;color:var(--cc-text);letter-spacing:.01em;}
#cc-app .cc-sync-col-sub{font-size:11px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.04em;}
#cc-app .cc-sync-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:7px;margin-bottom:4px;background:var(--cc-bg,#f8fafc);animation:ccSyncIn .35s ease;}
#cc-app .cc-sync-row-icon{font-size:14px;flex:0 0 auto;}
#cc-app .cc-sync-row-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
#cc-app .cc-sync-row-label{font-size:12.5px;font-weight:700;color:var(--cc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cc-app .cc-sync-row-ent{font-size:11px;color:var(--cc-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cc-app .cc-sync-row-topic{font-size:10px;color:var(--cc-muted);font-family:ui-monospace,Menlo,monospace;opacity:.65;white-space:nowrap;display:none;}
#cc-app .cc-sync-row-ago{font-size:10.5px;color:var(--cc-muted);flex:0 0 auto;}
#cc-app .cc-sync-row.is-bridge{box-shadow:inset 3px 0 0 var(--cc-gold,#F6B40A);}
#cc-app .cc-sync-empty{font-size:12px;color:var(--cc-muted);padding:10px 4px;text-align:center;}
/* Centre spine */
#cc-app .cc-sync-spine{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#f9731611,#3b82f611);border:1px dashed var(--cc-line);}
#cc-app .cc-sync-spine-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
#cc-app .cc-sync-spine-title{font-size:12px;font-weight:800;color:var(--cc-text);}
#cc-app .cc-sync-spine-counts{font-size:11px;color:var(--cc-muted);text-align:right;line-height:1.3;}
#cc-app .cc-sync-spine-counts b{color:var(--cc-text);font-variant-numeric:tabular-nums;}
#cc-app .cc-sync-bridge{display:flex;align-items:center;gap:7px;padding:6px 7px;border-radius:7px;background:var(--cc-surface,#fff);border:1px solid var(--cc-line);animation:ccSyncIn .4s ease;}
#cc-app .cc-sync-bridge-arrow{font-size:15px;font-weight:800;flex:0 0 auto;}
#cc-app .cc-sync-bridge-tms2cms{border-left:3px solid #f97316;}
#cc-app .cc-sync-bridge-tms2cms .cc-sync-bridge-arrow{color:#f97316;}
#cc-app .cc-sync-bridge-cms2tms{border-left:3px solid #3b82f6;}
#cc-app .cc-sync-bridge-cms2tms .cc-sync-bridge-arrow{color:#3b82f6;}
#cc-app .cc-sync-bridge-body{display:flex;flex-direction:column;min-width:0;}
#cc-app .cc-sync-bridge-label{font-size:11.5px;font-weight:700;color:var(--cc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cc-app .cc-sync-bridge-ent{font-size:10.5px;color:var(--cc-muted);font-variant-numeric:tabular-nums;}
@keyframes ccSyncIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}

/* v1.0.m — Quantum engine · Sim Config backend-URL text field */
#cc-app .cc-sim-cfg-text{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--cc-line);border-radius:7px;background:var(--cc-bg,#f8fafc);color:var(--cc-text);font-size:12.5px;font-family:ui-monospace,Menlo,monospace;}
#cc-app .cc-sim-cfg-text:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f133;}
#cc-app .cc-sim-cfg-select{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--cc-line);border-radius:7px;background:var(--cc-bg,#f8fafc);color:var(--cc-text);font-size:12.5px;font-family:inherit;cursor:pointer;}
#cc-app .cc-sim-cfg-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f133;}

/* H3b — case-aware chip on opportunity/decision rows: compact COUNT-ONLY so it can never push/clip the
   Resolve button (full type list is in the title tooltip). Width-capped + ellipsis as a belt-and-braces guard. */
#cc-app .cc-case-badge{display:inline-block;vertical-align:middle;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:1.5;padding:0 5px;margin-left:4px;border-radius:6px;background:#fdecec;color:#c0392b;font-weight:700;cursor:default;}

/* Optimisation Opportunities widget — per-resolution-path buttons (the CHOICE) on each row */
#cc-app .cc-opp-row { align-items: start; }
#cc-app .cc-opp-paths { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#cc-app .cc-opp-path { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cc-line, #e2e8f0); background: var(--cc-bg, #f8fafc); color: var(--cc-text, #0f172a); font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; text-transform: capitalize; }
#cc-app .cc-opp-path:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
#cc-app .cc-opp-path:hover .cc-opp-path-eur { color: #cfe0ff; }
#cc-app .cc-opp-path-eur { font-weight: 700; color: #047857; font-variant-numeric: tabular-nums; }
#cc-app .cc-opp-none { font-size: 10.5px; color: var(--cc-text-dim, #64748b); font-style: italic; }
#cc-app[data-cc-theme="dark"] .cc-opp-path { background: #1e293b; color: #e5e7eb; }

/* H6 — case-spine connection indicator (top bar): shows if this tab/station is live on the server spine */
#cc-app .cc-spine-chip{display:inline-flex;align-items:center;gap:4px;margin-right:8px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2px;border:1px solid var(--cc-line);white-space:nowrap;cursor:default;vertical-align:middle;}
#cc-app .cc-spine-chip.is-live{color:#047857;background:#10b9811a;border-color:#10b98159;}
#cc-app .cc-spine-chip.is-connecting{color:#b45309;background:#f59e0b1a;border-color:#f59e0b59;}
#cc-app .cc-spine-chip.is-error{color:#b91c1c;background:#ef44441a;border-color:#ef444459;}
#cc-app .cc-spine-chip.is-local{color:var(--cc-text-dim,#64748b);background:#64748b12;border-color:var(--cc-line);}
#cc-app .cc-spine-chip.is-standalone{color:#92400e;background:#f59e0b1f;border-color:#f59e0b66;}  /* SSOT · offline (not authoritative) */

/* SS-0 — deployment-mode chip (green ● LIVE · amber 🧪 SIM · red ⚠ DISCONNECTED) */
#cc-app .cc-mode-chip{display:inline-flex;align-items:center;gap:4px;margin-right:8px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px;white-space:nowrap;cursor:default;vertical-align:middle;border:1px solid transparent;}
#cc-app .cc-mode-chip.is-live{color:#065f46;background:#10b98122;border-color:#10b98166;}
#cc-app .cc-mode-chip.is-sim{color:#92400e;background:#f59e0b22;border-color:#f59e0b66;}
#cc-app .cc-mode-chip.is-connecting{color:#475569;background:#94a3b81f;border-color:#94a3b855;font-weight:700;}
#cc-app .cc-mode-chip.is-lost{color:#fff;background:#b00020;border-color:#8a0018;animation:cc-fs-pulse 1.6s ease-in-out infinite;}
#cc-app .cc-mode-chip.is-prod{color:#fff;background:#b00020;border-color:#8a0018;}
/* composite state badge · DATA · DEPLOYMENT · [SIMULATION] segments */
#cc-app .cc-mode-chip .cc-mode-live{font-weight:800;}
#cc-app .cc-mode-chip.is-prod .cc-mode-live{color:#6ee7b7;}
#cc-app .cc-mode-chip.is-sim  .cc-mode-live{color:#059669;}
#cc-app .cc-mode-chip .cc-mode-local{opacity:.8;}
#cc-app .cc-mode-chip.is-prod .cc-mode-simseg{color:#bfdbfe;}
#cc-app .cc-mode-chip.is-sim  .cc-mode-simseg{color:#1e40af;}
/* the client SIMULATION toggle */
#cc-app .cc-sim-toggle{display:inline-flex;align-items:center;margin-right:6px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px;white-space:nowrap;cursor:pointer;vertical-align:middle;border:1px solid transparent;}
#cc-app .cc-sim-toggle.is-on{color:#1e3a8a;background:#3b82f622;border-color:#3b82f666;}
#cc-app .cc-sim-toggle.is-off{color:#475569;background:#94a3b81f;border-color:#94a3b855;}
#cc-app .cc-sim-toggle:hover{filter:brightness(1.06);}
/* map ULD fleet FOOTPRINT selector (operating vs full network) */
#cc-app .cc-uld-footprint-ctl{background:var(--cc-surface,#fff);color:var(--cc-text,#0f172a);border-radius:8px;padding:6px 8px;box-shadow:0 1px 6px rgba(0,0,0,.22);display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:236px;}
#cc-app .cc-uldfp-lbl{font-weight:800;opacity:.65;width:100%;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;}
#cc-app .cc-uldfp-btn{cursor:pointer;border:1px solid rgba(148,163,184,.5);background:transparent;color:inherit;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;}
#cc-app .cc-uldfp-btn.is-active{background:#2563eb;color:#fff;border-color:#2563eb;}
#cc-app .cc-uldfp-btn:hover{filter:brightness(1.05);}
#cc-app .cc-uldfp-status{width:100%;opacity:.85;font-size:11px;font-weight:600;margin-top:3px;color:#0f172a;}
/* production: a subtle red top hairline (no layout shift, no shouty ribbon) — the chip carries the label */
#cc-app.cc-is-prod{box-shadow:inset 0 3px 0 #b00020;}
/* FT-1 · live aircraft markers — heading-rotated plane icon + flight-number label + radar trail */
.cc-plane-ic{background:none;border:none;}
.cc-plane-wrap{width:84px;text-align:center;line-height:0;pointer-events:none;}
/* Polish B · on-map fleet-true flight count readout (bottom-left) */
#cc-app .cc-flightcount-ctl{background:rgba(255,255,255,.92);border-radius:8px;padding:4px 9px;font-size:11px;
  color:#0f172a;box-shadow:0 1px 4px rgba(0,0,0,.18);border:none;}
#cc-app .cc-flightcount-ctl .cc-fc-win{opacity:.7;font-style:italic;}
/* Connectors #6 polish · low-zoom cluster badge for the live overlay (count of markers in a grid cell) */
.cc-ov-cluster{background:none;border:none;}
.cc-ov-cluster-badge{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:rgba(28,111,224,.88);color:#fff;font-size:12px;font-weight:800;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;}
.cc-plane{display:inline-block;width:26px;height:26px;pointer-events:auto;}
.cc-plane svg{width:26px;height:26px;display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));}
.cc-plane-lbl{font:700 9px/11px -apple-system,BlinkMacSystemFont,sans-serif;color:#152232;margin-top:1px;white-space:nowrap;
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff;pointer-events:none;}
.cc-plane-trail{pointer-events:none;}
/* flight-level ULD blip — ULDs on board (from reconciliation), subtle pill under the flight number */
.cc-plane-uld{display:inline-block;margin-top:1px;font:700 8px/10px -apple-system,BlinkMacSystemFont,sans-serif;
  color:#1e3a8a;background:rgba(219,234,254,.92);border:0.5px solid rgba(37,99,235,.55);border-radius:6px;
  padding:0 4px;white-space:nowrap;pointer-events:none;box-shadow:0 0 2px rgba(255,255,255,.9);}
.cc-plane-uld.is-flagged{color:#fff;background:rgba(217,130,10,.95);border-color:#b45309;}
/* 2026-09-28 — A CARRYING AIRCRAFT IS VISIBLE WITHOUT ITS PILL.
   The "N ULD" pill above is hidden in a crowded pocket, and correctly so: a pill floating beside a neighbour reads
   as THAT flight's count. Nothing compensated for it, so at the default zoom 7 loaded aircraft looked identical to
   416 empty ones — which is exactly what Mario reported. This ring is drawn ON the glyph, anchored to the aircraft
   it belongs to, so it cannot be misattributed the way a floating pill can. It says only "this one is carrying";
   HOW MUCH stays in the pill and the popup, which own that number. */
.cc-plane-wrap.is-loaded .cc-plane svg{
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)) drop-shadow(0 0 0 rgba(0,0,0,0));}
.cc-plane-wrap.is-loaded .cc-plane{position:relative;}
.cc-plane-wrap.is-loaded .cc-plane::after{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:2px solid rgba(22,163,74,.95);
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 5px rgba(22,163,74,.55);
  pointer-events:none;}
.cc-plane-wrap.is-loaded .cc-plane-lbl{color:#14532d;}

/* The aircraft layer states its own condition — counts when painting, the reason and the next step when not.
   Sits under the truck fleet counts in the same map overlay panel. */
#cc-app .cc-map-overlay-aircraft{
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(15,23,42,.10);
  font-size:12px;line-height:1.35;font-weight:600;color:#0f172a;max-width:420px;}
#cc-app .cc-map-overlay-aircraft.is-live{color:#14532d;}
#cc-app .cc-map-overlay-aircraft.is-awaiting{color:#92400e;font-weight:500;}

/* SS-0 — FAIL-SAFE lockout: loud banner + full-screen click-shield (live deployment, link lost) */
.cc-failsafe{position:fixed;inset:0;z-index:2147483000;pointer-events:none;}
.cc-failsafe .cc-failsafe-shield{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(120,0,10,.20),rgba(120,0,10,.20) 22px,rgba(120,0,10,.30) 22px,rgba(120,0,10,.30) 44px);pointer-events:auto;cursor:not-allowed;}
.cc-failsafe .cc-failsafe-banner{position:absolute;top:0;left:0;right:0;background:#b00020;color:#fff;padding:14px 22px;text-align:center;font:800 19px/1.35 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.3px;box-shadow:0 4px 16px rgba(0,0,0,.45);pointer-events:auto;animation:cc-fs-pulse 1.7s ease-in-out infinite;}
.cc-failsafe .cc-failsafe-sub{margin-top:5px;font:500 13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;opacity:.96;}
@keyframes cc-fs-pulse{0%,100%{background:#b00020}50%{background:#7f0016}}

/* v1.0.o — ConnectedCargo Adaptive Engine · cockpit learning panel */
#cc-app .cc-adaptive-panel{margin-top:12px;padding:12px 13px;border:1px solid var(--cc-line);border-radius:10px;background:linear-gradient(180deg,#6366f10d,transparent);}
#cc-app .cc-adaptive-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
#cc-app .cc-adaptive-title{font-size:13px;font-weight:800;color:var(--cc-text);letter-spacing:.01em;}
#cc-app .cc-adaptive-reset{font-size:11px;font-weight:700;color:var(--cc-muted);background:transparent;border:1px solid var(--cc-line);border-radius:6px;padding:3px 9px;cursor:pointer;}
#cc-app .cc-adaptive-reset:hover{color:#ef4444;border-color:#ef444455;}
#cc-app .cc-adaptive-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px;}
#cc-app .cc-adaptive-metric{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;background:var(--cc-bg,#f8fafc);border-radius:8px;}
#cc-app .cc-adaptive-metric-v{font-size:17px;font-weight:800;color:#6366f1;font-variant-numeric:tabular-nums;}
#cc-app .cc-adaptive-metric-l{font-size:10px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.03em;text-align:center;}
#cc-app .cc-adaptive-spark-wrap{margin-bottom:11px;}
#cc-app .cc-adaptive-spark-cap{font-size:10.5px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
#cc-app .cc-adaptive-spark{display:block;width:100%;height:38px;color:#10b981;}
#cc-app .cc-adaptive-spark-empty{font-size:11.5px;color:var(--cc-muted);padding:8px 0;font-style:italic;}
#cc-app .cc-adaptive-actions{display:flex;flex-direction:column;gap:9px;}
#cc-app .cc-adaptive-action-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--cc-text);margin-bottom:4px;}
#cc-app .cc-adaptive-action-head b{font-weight:700;text-transform:capitalize;}
#cc-app .cc-adaptive-action-head span{font-size:10.5px;color:var(--cc-muted);font-variant-numeric:tabular-nums;}
#cc-app .cc-adaptive-wbars{display:flex;gap:6px;}
#cc-app .cc-adaptive-wbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
#cc-app .cc-adaptive-wbar-label{font-size:9px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.02em;}
#cc-app .cc-adaptive-wbar-track{width:100%;height:5px;border-radius:3px;background:var(--cc-line);overflow:hidden;}
#cc-app .cc-adaptive-wbar-fill{display:block;height:100%;border-radius:3px;}
#cc-app .cc-adaptive-wbar-fill.is-pos{background:#10b981;}
#cc-app .cc-adaptive-wbar-fill.is-neg{background:#f59e0b;}
#cc-app .cc-adaptive-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--cc-line);font-size:10.5px;color:var(--cc-muted);line-height:1.5;}

/* v1.0.q — "Why this pick" tooltip + engine benchmark table */
#cc-app .cc-why{position:relative;display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;color:#6366f1;cursor:help;border-bottom:1px dotted #6366f1;}
#cc-app .cc-why-pop{position:absolute;left:0;bottom:calc(100% + 6px);z-index:60;display:none;width:232px;padding:9px 10px;background:var(--cc-surface,#fff);border:1px solid var(--cc-line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);text-align:left;white-space:normal;font-weight:400;}
#cc-app .cc-why:hover .cc-why-pop,#cc-app .cc-why:focus .cc-why-pop,#cc-app .cc-why:focus-within .cc-why-pop{display:block;}
#cc-app .cc-why-h{display:block;font-size:11px;font-weight:800;color:var(--cc-text);margin-bottom:6px;}
#cc-app .cc-why-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
#cc-app .cc-why-k{flex:0 0 62px;font-size:10px;color:var(--cc-muted);text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#cc-app .cc-why-track{flex:1;height:5px;border-radius:3px;background:var(--cc-line);overflow:hidden;}
#cc-app .cc-why-fill{display:block;height:100%;border-radius:3px;}
#cc-app .cc-why-fill.is-pos{background:#10b981;}
#cc-app .cc-why-fill.is-neg{background:#f59e0b;}
#cc-app .cc-why-v{flex:0 0 40px;text-align:right;font-size:10px;font-variant-numeric:tabular-nums;color:var(--cc-text);}
#cc-app .cc-why-foot{display:block;margin-top:5px;font-size:9.5px;color:var(--cc-muted);font-style:italic;}

#cc-app .cc-bench-section{margin-top:14px;}
#cc-app .cc-bench-run{font-size:12px;font-weight:700;color:#fff;background:#6366f1;border:none;border-radius:7px;padding:7px 14px;cursor:pointer;white-space:nowrap;}
#cc-app .cc-bench-run:hover{background:#4f46e5;}
#cc-app .cc-bench-results{margin-top:10px;overflow-x:auto;}
#cc-app .cc-bench-empty{font-size:12.5px;color:var(--cc-muted);padding:10px 0;}
#cc-app .cc-bench-table{width:100%;border-collapse:collapse;font-size:12px;}
#cc-app .cc-bench-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--cc-muted);padding:5px 8px;border-bottom:1px solid var(--cc-line);}
#cc-app .cc-bench-table td{padding:6px 8px;border-bottom:1px solid var(--cc-line);color:var(--cc-text);}
#cc-app .cc-bench-num{text-align:right;font-variant-numeric:tabular-nums;}
#cc-app .cc-bench-eur{font-weight:700;color:#059669;}
#cc-app .cc-bench-eng{font-weight:600;white-space:nowrap;}
#cc-app .cc-bench-ico{margin-right:6px;}
#cc-app .cc-bench-rank{font-variant-numeric:tabular-nums;color:var(--cc-muted);}
#cc-app .cc-bench-win{background:#10b98112;}
#cc-app .cc-bench-win td{font-weight:600;}
#cc-app .cc-bench-opt{display:inline-block;font-size:10px;font-weight:700;color:#059669;background:#05966915;border-radius:4px;padding:1px 6px;}
#cc-app .cc-bench-perf{font-size:11px;color:var(--cc-muted);white-space:nowrap;}
#cc-app .cc-bench-note{font-size:10.5px;color:var(--cc-muted);max-width:220px;}
#cc-app .cc-bench-err td{color:var(--cc-muted);font-style:italic;}
#cc-app .cc-bench-cap{margin-top:8px;font-size:11px;color:var(--cc-muted);}

/* v1.0.t — In-app optimisation guide + training dashboard */
#cc-app .cc-opti-guide{margin:0 0 14px;border:1px solid var(--cc-line);border-radius:10px;background:linear-gradient(180deg,#1763b00a,transparent);overflow:hidden;}
#cc-app .cc-opti-guide>summary{cursor:pointer;list-style:none;padding:11px 14px;font-size:13px;font-weight:800;color:var(--cc-text);display:flex;align-items:center;gap:8px;}
#cc-app .cc-opti-guide>summary::-webkit-details-marker{display:none;}
#cc-app .cc-opti-guide-ico{font-size:15px;}
#cc-app .cc-opti-guide-hint{font-weight:500;color:var(--cc-muted);font-size:11px;}
#cc-app .cc-opti-guide-body{padding:4px 16px 16px;font-size:12.5px;line-height:1.6;color:var(--cc-text);}
#cc-app .cc-opti-guide-lead{margin:0 0 12px;color:var(--cc-text);}
#cc-app .cc-opti-guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
@media (max-width:760px){#cc-app .cc-opti-guide-steps{grid-template-columns:1fr;}}
#cc-app .cc-opti-guide-step{display:flex;gap:9px;padding:10px;background:var(--cc-bg,#f8fafc);border-radius:8px;font-size:12px;}
#cc-app .cc-opti-guide-n{flex:0 0 22px;height:22px;border-radius:50%;background:#1763B0;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:12px;}
#cc-app .cc-opti-guide-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:10px;}
@media (max-width:760px){#cc-app .cc-opti-guide-cols{grid-template-columns:1fr;}}
#cc-app .cc-opti-guide-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--cc-muted);margin-bottom:5px;}
#cc-app .cc-opti-guide-body ul{margin:0;padding-left:18px;}
#cc-app .cc-opti-guide-body li{margin-bottom:4px;}
#cc-app .cc-opti-guide-note{margin:8px 0 0;font-size:11.5px;color:var(--cc-muted);border-top:1px solid var(--cc-line);padding-top:9px;}

#cc-app .cc-tdash-section{margin-top:14px;}
#cc-app .cc-tdash-refresh{font-size:12px;font-weight:700;color:var(--cc-text);background:transparent;border:1px solid var(--cc-line);border-radius:7px;padding:6px 12px;cursor:pointer;white-space:nowrap;}
#cc-app .cc-tdash-refresh:hover{border-color:#1763B0;color:#1763B0;}
#cc-app .cc-tdash{margin-top:10px;}
#cc-app .cc-tdash-empty{font-size:12.5px;color:var(--cc-muted);padding:10px 0;}
#cc-app .cc-tdash-exec{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;}
@media (max-width:760px){#cc-app .cc-tdash-exec{grid-template-columns:repeat(2,1fr);}}
#cc-app .cc-tdash-card{padding:11px;border:1px solid var(--cc-line);border-radius:10px;background:var(--cc-surface,#fff);text-align:center;}
#cc-app .cc-tdash-card-ico{font-size:18px;}
#cc-app .cc-tdash-card-v{font-size:15px;font-weight:800;color:var(--cc-text);margin:3px 0 1px;}
#cc-app .cc-tdash-card-l{font-size:10px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.03em;}
#cc-app .cc-tdash-trend{margin-bottom:12px;color:#1763B0;}
#cc-app .cc-tdash-trend-cap{display:block;font-size:10.5px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
#cc-app .cc-tdash-spark{display:block;width:100%;height:34px;}
#cc-app .cc-tdash-expert-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--cc-muted);margin-bottom:6px;}
#cc-app .cc-tdash-table{width:100%;border-collapse:collapse;font-size:12px;}
#cc-app .cc-tdash-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--cc-muted);padding:5px 8px;border-bottom:1px solid var(--cc-line);}
#cc-app .cc-tdash-table td{padding:6px 8px;border-bottom:1px solid var(--cc-line);color:var(--cc-text);}
#cc-app .cc-tdash-num{text-align:right;font-variant-numeric:tabular-nums;}
#cc-app .cc-tdash-promo{background:#10b9810f;}
#cc-app .cc-tdash-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--cc-muted);background:var(--cc-bg,#f1f5f9);border-radius:4px;padding:1px 7px;}
#cc-app .cc-tdash-badge.is-promo{color:#059669;background:#05966915;}
#cc-app .cc-tdash-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--cc-line);font-size:11px;color:var(--cc-muted);line-height:1.5;}

/* ═══════════════════════════════════════════════════════════════════
   Compliance page — build-up (as-you-scan) · ONE Record · conformance
   ═══════════════════════════════════════════════════════════════════ */
#cc-app .cc-compliance { padding: 16px 20px; }
#cc-app .cc-compliance-conn { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--cc-surface-3); color: var(--cc-muted); }
#cc-app .cc-compliance-conn.is-on { background: rgba(22,163,74,0.12); color: var(--cc-good); }
#cc-app .cc-compliance-conn.is-degraded { background: rgba(217,119,6,0.12); color: var(--cc-warn); }
#cc-app .cc-compliance-conn.is-off { background: var(--cc-surface-3); color: var(--cc-muted); }
#cc-app .cc-compliance-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--cc-line); margin-bottom: 14px; }
#cc-app .cc-compliance-tab { border: none; background: transparent; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--cc-muted); cursor: pointer; border-bottom: 2px solid transparent; }
#cc-app .cc-compliance-tab.is-active { color: var(--cc-accent); border-bottom-color: var(--cc-accent); }
#cc-app .cc-compliance-offbar { background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.25); color: #92400e; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
#cc-app .cc-compliance-panel { display: none; }
#cc-app .cc-compliance-panel.is-active { display: block; }
#cc-app .cc-compliance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { #cc-app .cc-compliance-grid { grid-template-columns: 1fr; } }
#cc-app .cc-compliance-card { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 10px; padding: 14px; margin-bottom: 14px; box-shadow: var(--cc-shadow-1); }
#cc-app .cc-compliance-card-h { font-size: 13px; font-weight: 700; color: var(--cc-text); margin-bottom: 8px; }
#cc-app .cc-compliance-sub { font-size: 12px; color: var(--cc-muted); font-weight: 500; }

/* ── PROVENANCE AT THE PIXEL (2026-09-07) ───────────────────────────────────────────────────────────────────
   §0 as enforced: "a number carries its basis". The BASIS is always in the title, on every number the server
   declared one for; only `derived` and `awaiting-feed` are marked visibly.

   `measured` is deliberately unmarked. It is the expected case, and a screen where every figure carries a
   badge is a screen where none of them is read — the gap is tracked in ops/d3-basis-coverage.py, which is the
   right place for a number that has to move, not in the operator's field of view.

   The derived marker is a dotted underline, not a colour: it must read on a dense board without competing with
   the severity colours those boards already use to mean something else. */
/* Static reference content — an assessment, not a measurement. Visually set apart so it cannot be read as a
   platform figure, and marked with data-cc-static-reference so the provenance meter excludes it by
   declaration rather than by a special case in the instrument. */
#cc-app .cc-bench-static { font-size: 11.5px; color: var(--cc-muted); background: var(--cc-surface-2);
  border: 1px dashed var(--cc-border, rgba(120,120,120,.35)); border-radius: 6px; padding: 6px 9px; margin: 0 0 8px; }

#cc-app .cc-basis { cursor: help; }
#cc-app .cc-basis.is-derived { border-bottom: 1px dotted var(--cc-muted); }
#cc-app .cc-basis.is-awaiting { border-bottom: 1px dotted var(--cc-warn, #d97706); opacity: .85; }
#cc-app .cc-basis.is-measured { border-bottom: 0; }

/* IROPs case-scope card (airline profile) — the same rule, on a FORM. The Graduate threshold decides which AWBs
   get their own recovery case, and it was pre-filled with the platform's 50000 as though the carrier had stated
   it; the scope select pre-selected the platform's "Hybrid" the same way. The value is empty when unstated, and
   these labels say for BOTH terms whether what is on screen is the operator's or ours. Every class the card
   references is defined here — an unstyled block renders as invisible text. */
#cc-app .cc-scope-basis { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; line-height: 1.35; font-weight: 600; }
#cc-app .cc-scope-basis.is-stated { color: var(--cc-good); background: rgba(22,163,74,0.10); }
#cc-app .cc-scope-basis.is-default { color: var(--cc-warn, #d97706); background: rgba(217,119,6,0.10);
  font-weight: 500; font-style: italic; }
#cc-app .cc-scope-basis.is-edited { color: var(--cc-muted); background: var(--cc-surface-3, rgba(120,120,120,.14));
  font-weight: 600; }
#cc-app .cc-scope-basis-note { font-size: 10.5px; color: var(--cc-muted); font-style: italic; }
#cc-app .cc-scope-needs { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--cc-warn, #d97706); }
#cc-app .cc-scope-setby { margin-top: 6px; }
#cc-app .cc-compliance-uldbox { background: var(--cc-surface-2); border: 1px solid var(--cc-line-2); border-radius: 8px; padding: 10px; }
#cc-app .cc-compliance-piece { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--cc-line-2); font-size: 13px; }
#cc-app .cc-compliance-dg { background: rgba(220,38,38,0.10); color: var(--cc-bad); font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
#cc-app .cc-compliance-nondg { background: rgba(22,163,74,0.10); color: var(--cc-good); font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
#cc-app .cc-compliance-scanbtn { display: block; width: 100%; text-align: left; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 9px 12px; margin-bottom: 7px; cursor: pointer; font-size: 13px; }
#cc-app .cc-compliance-scanbtn:hover { border-color: var(--cc-accent); }
#cc-app .cc-compliance-btn { background: var(--cc-accent); color: #fff; border: none; border-radius: 7px; padding: 7px 13px; font-size: 12px; font-weight: 600; cursor: pointer; }
#cc-app .cc-compliance-reset { background: var(--cc-surface-3); color: var(--cc-muted); margin-top: 4px; }
#cc-app .cc-compliance-verdict-empty { color: var(--cc-muted); font-size: 13px; padding: 30px 10px; text-align: center; }
#cc-app .cc-compliance-decision { border-radius: 8px; padding: 12px 14px; font-size: 13px; }
#cc-app .cc-compliance-decision.is-ok { background: rgba(22,163,74,0.10); border: 1px solid rgba(22,163,74,0.30); color: #14532d; }
#cc-app .cc-compliance-decision.is-reject { background: rgba(220,38,38,0.10); border: 1px solid rgba(220,38,38,0.30); color: #7f1d1d; }
#cc-app .cc-compliance-decision-h { font-weight: 800; font-size: 15px; margin-bottom: 3px; }
#cc-app .cc-compliance-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
#cc-app .cc-compliance-kpi { background: var(--cc-surface-3); border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--cc-text-2); }
#cc-app .cc-compliance-rule { border-left: 3px solid var(--cc-line); padding: 6px 10px; margin: 6px 0; background: var(--cc-surface-2); border-radius: 0 6px 6px 0; font-size: 13px; }
#cc-app .cc-compliance-rule.is-violated { border-left-color: var(--cc-bad); }
#cc-app .cc-compliance-rule.is-ok { border-left-color: var(--cc-good); }
#cc-app .cc-compliance-rule.is-warn { border-left-color: var(--cc-warn); }
#cc-app .cc-compliance-rule-v { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#cc-app .cc-compliance-auth { font-size: 11px; color: var(--cc-muted); font-style: italic; }
#cc-app .cc-compliance-gov { margin-top: 10px; font-size: 12px; color: var(--cc-text-2); background: var(--cc-surface-3); padding: 7px 10px; border-radius: 6px; }
#cc-app .cc-compliance-caserow { margin-top: 7px; font-size: 12px; color: var(--cc-text-2); }
#cc-app .cc-compliance-json { background: #0b1220; color: #e2e8f0; padding: 12px; border-radius: 8px; font-size: 11px; line-height: 1.5; overflow: auto; max-height: 520px; }

/* Decisions Feed — real event-bus control bar */
#cc-app .cc-kfk-streambar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin: 0 0 10px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; font-size: 13px; }
#cc-app .cc-kfk-streamdot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-muted); display: inline-block; }
#cc-app .cc-kfk-streamdot.is-on { background: var(--cc-good); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
#cc-app .cc-kfk-streamsub { color: var(--cc-muted); font-weight: 500; }
#cc-app .cc-kfk-streambar [data-cc-kfk-run] { margin-left: auto; }

/* Help / playbook page */
#cc-app .cc-help { padding: 18px 22px; max-width: 900px; }
#cc-app .cc-help-card { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--cc-shadow-1); }
#cc-app .cc-help-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--cc-text); }
#cc-app .cc-help-card p { margin: 0 0 6px; font-size: 13px; color: var(--cc-text-2); line-height: 1.6; }
#cc-app .cc-help-list { margin: 6px 0 0; padding-left: 20px; }
#cc-app .cc-help-list li { font-size: 13px; color: var(--cc-text-2); line-height: 1.7; }
#cc-app .cc-help-card code { background: var(--cc-surface-3); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* Compliance pipeline — animated step-by-step playback of the touchpoint-5 trace */
#cc-app .cc-pipe { font-size: 13px; }
#cc-app .cc-pipe-h { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--cc-text); }
#cc-app .cc-pipe-h.is-ok { color: var(--cc-good); }
#cc-app .cc-pipe-h.is-reject { color: var(--cc-bad); }
#cc-app .cc-pipe-bar { height: 6px; background: var(--cc-surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
#cc-app .cc-pipe-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cc-accent), var(--cc-brand)); border-radius: 999px; transition: width .35s ease; }
#cc-app .cc-pipe-stage { display: flex; align-items: flex-start; gap: 10px; padding: 7px 9px; border-radius: 8px; margin-bottom: 4px; opacity: .45; transition: opacity .25s, background .25s; }
#cc-app .cc-pipe-stage.is-running { opacity: 1; background: rgba(37,99,235,0.06); }
#cc-app .cc-pipe-stage.is-ok, #cc-app .cc-pipe-stage.is-blocked, #cc-app .cc-pipe-stage.is-skip { opacity: 1; }
#cc-app .cc-pipe-ico { font-size: 16px; line-height: 1.3; width: 22px; text-align: center; }
#cc-app .cc-pipe-body { flex: 1; display: flex; flex-direction: column; }
#cc-app .cc-pipe-label { font-weight: 600; color: var(--cc-text); }
#cc-app .cc-pipe-detail { font-size: 12px; color: var(--cc-muted); margin-top: 1px; }
#cc-app .cc-pipe-stage.is-blocked .cc-pipe-label { color: var(--cc-bad); }
#cc-app .cc-pipe-status { font-size: 14px; font-weight: 700; width: 18px; text-align: center; }
#cc-app .cc-pipe-stage.is-running .cc-pipe-status { color: var(--cc-accent); animation: cc-pipe-spin 1s linear infinite; display: inline-block; }
#cc-app .cc-pipe-stage.is-ok .cc-pipe-status { color: var(--cc-good); }
#cc-app .cc-pipe-stage.is-blocked .cc-pipe-status { color: var(--cc-bad); }
#cc-app .cc-pipe-stage.is-skip .cc-pipe-status { color: var(--cc-muted); }
@keyframes cc-pipe-spin { to { transform: rotate(360deg); } }
#cc-app .cc-pipe-msgs { background: #0b1220; border-radius: 8px; padding: 8px 10px; margin: 10px 0; max-height: 150px; overflow: auto; }
#cc-app .cc-pipe-msgs-h { color: #64748b; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
#cc-app .cc-pipe-msg { color: #cbd5e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.7; animation: cc-pipe-fade .3s ease; }
#cc-app .cc-pipe-msg.is-blocked { color: #fca5a5; }
#cc-app .cc-pipe-msg.is-ok { color: #86efac; }
#cc-app .cc-pipe-msg-arrow { color: #475569; }
@keyframes cc-pipe-fade { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
#cc-app .cc-pipe-verdict-wrap { margin-top: 8px; animation: cc-pipe-fade .4s ease; }

/* ULD lifecycle widget — touchpoint progress bar + per-stage compliance detail */
#cc-app .cc-uldlc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
#cc-app .cc-uldlc-uld { font-weight: 800; font-size: 15px; color: var(--cc-text); }
#cc-app .cc-uldlc-track { position: relative; margin: 8px 6px 18px; }
#cc-app .cc-uldlc-track::before { content: ""; position: absolute; top: 16px; left: 16px; right: 16px; height: 3px; background: var(--cc-surface-3); border-radius: 999px; }
#cc-app .cc-uldlc-fill { position: absolute; top: 16px; left: 16px; height: 3px; background: linear-gradient(90deg, var(--cc-good), var(--cc-accent)); border-radius: 999px; transition: width .4s ease; max-width: calc(100% - 32px); }
#cc-app .cc-uldlc-nodes { position: relative; display: flex; justify-content: space-between; }
#cc-app .cc-uldlc-node { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 0; }
#cc-app .cc-uldlc-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; background: var(--cc-surface); border: 2px solid var(--cc-line); color: var(--cc-muted); transition: transform .15s; }
#cc-app .cc-uldlc-node:hover .cc-uldlc-dot { transform: scale(1.08); }
#cc-app .cc-uldlc-node.is-done .cc-uldlc-dot { background: var(--cc-good); border-color: var(--cc-good); color: #fff; }
#cc-app .cc-uldlc-node.is-blocked .cc-uldlc-dot { background: var(--cc-bad); border-color: var(--cc-bad); color: #fff; }
#cc-app .cc-uldlc-node.is-current .cc-uldlc-dot { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,0.18); animation: cc-uldlc-pulse 1.6s ease-in-out infinite; }
@keyframes cc-uldlc-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(37,99,235,0.18); } 50% { box-shadow: 0 0 0 7px rgba(37,99,235,0.10); } }
#cc-app .cc-uldlc-node.is-sel .cc-uldlc-dot { outline: 2px solid var(--cc-text); outline-offset: 2px; }
#cc-app .cc-uldlc-lbl { font-size: 10.5px; color: var(--cc-text-2); text-align: center; line-height: 1.25; }
#cc-app .cc-uldlc-node.is-current .cc-uldlc-lbl, #cc-app .cc-uldlc-node.is-blocked .cc-uldlc-lbl { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-uldlc-detail { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 14px; margin-top: 6px; }
#cc-app .cc-uldlc-detail-h { font-weight: 700; font-size: 14px; color: var(--cc-text); margin-bottom: 6px; }
#cc-app .cc-uldlc-row { font-size: 12.5px; color: var(--cc-text-2); margin: 6px 0; }
#cc-app .cc-uldlc-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--cc-surface-3); color: var(--cc-muted); }
#cc-app .cc-uldlc-badge.is-done { background: rgba(22,163,74,0.12); color: var(--cc-good); }
#cc-app .cc-uldlc-badge.is-blocked { background: rgba(220,38,38,0.12); color: var(--cc-bad); }
#cc-app .cc-uldlc-badge.is-current { background: rgba(37,99,235,0.12); color: var(--cc-accent); }

/* v2.37.0 — ULD Lifecycle: context header (flight · manifest · compliance · €) */
#cc-app .cc-uldlc-hdr { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
#cc-app .cc-uldlc-hdr-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#cc-app .cc-uldlc-type { font-size: 11px; color: var(--cc-muted); font-weight: 600; }
#cc-app .cc-uldlc-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--cc-surface-3); color: var(--cc-text-2); white-space: nowrap; }
#cc-app .cc-uldlc-chip.is-status { background: rgba(37,99,235,0.10); color: var(--cc-accent); }
#cc-app .cc-uldlc-chip.is-comp-ok { background: rgba(22,163,74,0.12); color: var(--cc-good); }
#cc-app .cc-uldlc-chip.is-comp-warn { background: rgba(245,158,11,0.14); color: #b45309; }
#cc-app .cc-uldlc-chip.is-comp-bad { background: rgba(220,38,38,0.12); color: var(--cc-bad); }
#cc-app .cc-uldlc-chip.is-eur { background: rgba(220,38,38,0.12); color: var(--cc-bad); }
#cc-app .cc-uldlc-chip.is-flag-warn { background: rgba(245,158,11,0.14); color: #b45309; }
#cc-app .cc-uldlc-chip.is-flag-bad { background: rgba(220,38,38,0.12); color: var(--cc-bad); }
#cc-app .cc-uldlc-chip.is-flag-cold { background: rgba(37,99,235,0.10); color: var(--cc-accent); }
#cc-app .cc-uldlc-hdr-flight { font-size: 12px; color: var(--cc-text-2); margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-uldlc-hdr-manifest { font-size: 12px; color: var(--cc-text-2); margin-top: 3px; }

/* per-stage detail: responsible actor + systems */
#cc-app .cc-uldlc-drow { font-size: 12px; color: var(--cc-text-2); margin: 6px 0 4px; }
#cc-app .cc-uldlc-dk { font-weight: 700; color: var(--cc-muted); margin-right: 6px; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
#cc-app .cc-uldlc-sys { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
#cc-app .cc-uldlc-syschip { font-size: 10px; padding: 2px 7px; border-radius: 6px; background: var(--cc-surface-3); color: var(--cc-text-2); border: 1px solid var(--cc-line-2); }

/* manifest (collapsible) */
#cc-app .cc-uldlc-manifest { margin-top: 10px; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface); overflow: hidden; }
#cc-app .cc-uldlc-manifest > summary { cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--cc-text); list-style: none; }
#cc-app .cc-uldlc-manifest > summary::-webkit-details-marker { display: none; }
#cc-app .cc-uldlc-manifest > summary::before { content: "▸ "; color: var(--cc-muted); }
#cc-app .cc-uldlc-manifest[open] > summary::before { content: "▾ "; }
#cc-app .cc-uldlc-awbs { padding: 0 8px 8px; }
#cc-app .cc-uldlc-awb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--cc-line-2); padding: 7px 4px; cursor: pointer; }
#cc-app .cc-uldlc-awb-row:hover { background: var(--cc-surface-2); }
#cc-app .cc-uldlc-awb-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--cc-accent); }
#cc-app .cc-uldlc-awb-dg { font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: rgba(220,38,38,0.14); color: var(--cc-bad); }
#cc-app .cc-uldlc-awb-st { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--cc-surface-3); color: var(--cc-text-2); }
#cc-app .cc-uldlc-awb-meta { flex: 1; min-width: 0; font-size: 11px; color: var(--cc-muted); }

/* cross-navigation footer */
#cc-app .cc-uldlc-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#cc-app .cc-uldlc-navbtn { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text-2); cursor: pointer; }
#cc-app .cc-uldlc-navbtn:hover { background: var(--cc-surface-2); color: var(--cc-text); border-color: var(--cc-accent); }

/* v2.38.0 — Phase 2: live cases + inline resolve + telemetry */
#cc-app .cc-uldlc-cases { margin-top: 10px; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface); padding: 8px 10px; }
#cc-app .cc-uldlc-cases-h { font-size: 12px; font-weight: 700; color: var(--cc-text); margin-bottom: 6px; }
#cc-app .cc-uldlc-case { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--cc-line-2); }
#cc-app .cc-uldlc-case:first-of-type { border-top: none; }
#cc-app .cc-uldlc-case-sev { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 4px; background: var(--cc-surface-3); color: var(--cc-muted); }
#cc-app .cc-uldlc-case-sev.is-low { background: rgba(100,116,139,0.14); color: var(--cc-muted); }
#cc-app .cc-uldlc-case-sev.is-medium { background: rgba(245,158,11,0.14); color: #b45309; }
#cc-app .cc-uldlc-case-sev.is-high { background: rgba(220,38,38,0.12); color: var(--cc-bad); }
#cc-app .cc-uldlc-case-sev.is-critical { background: var(--cc-bad); color: #fff; }
#cc-app .cc-uldlc-case-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--cc-text-2); }
#cc-app .cc-uldlc-case-eur { font-size: 12px; font-weight: 700; color: var(--cc-bad); }
#cc-app .cc-uldlc-resolve { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 7px; border: 1px solid var(--cc-accent); background: var(--cc-accent); color: #fff; cursor: pointer; }
#cc-app .cc-uldlc-resolve:hover { filter: brightness(1.06); }
#cc-app .cc-uldlc-telem { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; }
#cc-app .cc-uldlc-telem-t { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-uldlc-telem-s { color: var(--cc-text-2); flex: 1; min-width: 0; }
#cc-app .cc-uldlc-telem-pull { padding: 4px 10px; }
/* COMM-01 + MRO-04 · per-ULD custody chain + asset/scrap status in the lifecycle */
#cc-app .cc-uldlc-ca { margin-top: 10px; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface); padding: 8px 10px; }
#cc-app .cc-uldlc-ca-h { font-size: 12px; font-weight: 700; color: var(--cc-text); margin-bottom: 6px; }
#cc-app .cc-uldlc-ca-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 11.5px; padding: 2px 0; }
#cc-app .cc-uldlc-ca-k { font-weight: 700; color: var(--cc-text); min-width: 66px; }
#cc-app .cc-uldlc-ca-v { color: var(--cc-text-2); flex: 1; min-width: 0; }
#cc-app .cc-uldlc-ca-v b { color: var(--cc-text); }
#cc-app .cc-uldlc-ca-ok { color: #059669; font-weight: 600; }
#cc-app .cc-uldlc-ca-warn { color: #b45309; font-weight: 600; }
#cc-app .cc-uldlc-ca-bad { color: #dc2626; font-weight: 600; }
#cc-app .cc-uldlc-ca-btn { padding: 2px 9px; }
#cc-app .cc-uldlc-ca-out { font-size: 11px; margin-top: 4px; min-height: 12px; }
/* ULD Lifecycle widget · filterable ULD picker (fleet can be hundreds of units) */
#cc-app .cc-uldlcw-pickrow { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
#cc-app .cc-uldlcw-filter { flex: 1 1 120px; min-width: 90px; padding: 6px 9px; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface); color: var(--cc-text); font-size: 12.5px; }
#cc-app .cc-uldlcw-filter:focus { outline: none; border-color: var(--cc-accent, #1178b3); box-shadow: 0 0 0 3px rgba(17,120,179,.12); }
#cc-app .cc-uldlcw-sel { flex: 1 1 130px; min-width: 110px; padding: 6px 8px; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface-3); color: var(--cc-text); font-size: 12.5px; }
#cc-app .cc-uldlcw-count { flex: 0 0 auto; min-width: 22px; text-align: center; font-size: 11px; font-weight: 700; color: var(--cc-text-2); background: var(--cc-surface-2); border-radius: 10px; padding: 2px 7px; }

/* v2.39.0 — Phase 3: responsive/compact layout so the enriched widget stays
   readable at small dashboard tile sizes. Container queries adapt to the
   WIDGET's own width (not the viewport), so the same renderer works full-width
   on the Compliance page and cramped in a 3-col dashboard tile. */
#cc-app .cc-uldlc { container-type: inline-size; }
@container (max-width: 460px) {
  #cc-app .cc-uldlc-node { width: 52px; }
  #cc-app .cc-uldlc-dot { width: 28px; height: 28px; font-size: 13px; }
  #cc-app .cc-uldlc-lbl { font-size: 9px; }
  #cc-app .cc-uldlc-hdr-flight, #cc-app .cc-uldlc-hdr-manifest { font-size: 11px; }
  #cc-app .cc-uldlc-case { flex-wrap: wrap; }
  #cc-app .cc-uldlc-resolve { margin-left: auto; }
}
@container (max-width: 340px) {
  /* touchpoint track → compact dot strip (labels drop; the detail panel names
     the selected stage, and each node keeps its title tooltip) */
  #cc-app .cc-uldlc-node { width: auto; }
  #cc-app .cc-uldlc-dot { width: 22px; height: 22px; font-size: 10px; border-width: 2px; }
  #cc-app .cc-uldlc-lbl { display: none; }
  #cc-app .cc-uldlc-track { margin: 6px 2px 12px; }
  #cc-app .cc-uldlc-track::before { top: 11px; left: 11px; right: 11px; }
  #cc-app .cc-uldlc-fill { top: 11px; left: 11px; max-width: calc(100% - 22px); }
  #cc-app .cc-uldlc-node.is-current .cc-uldlc-dot { box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
  #cc-app .cc-uldlc-hdr { padding: 6px 8px; }
  #cc-app .cc-uldlc-detail { padding: 10px; }
  #cc-app .cc-uldlc-awb-meta { flex-basis: 100%; }
  #cc-app .cc-uldlc-navbtn { flex: 1 1 auto; text-align: center; }
  #cc-app .cc-uldlc-telem-pull { flex: 1 1 100%; }
}

/* Value Recovery Cockpit — the margin engine */
#cc-app .cc-vrc { padding: 16px 20px; }
#cc-app .cc-vrc-kpis { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
#cc-app .cc-vrc-kpi { flex: 1; min-width: 160px; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--cc-shadow-1); }
#cc-app .cc-vrc-kpi-v { font-size: 26px; font-weight: 800; line-height: 1.1; }
#cc-app .cc-vrc-kpi-l { font-size: 12px; color: var(--cc-muted); margin-top: 3px; }
#cc-app .cc-vrc-kpi.is-risk .cc-vrc-kpi-v { color: var(--cc-bad); }
#cc-app .cc-vrc-kpi.is-recovered .cc-vrc-kpi-v { color: var(--cc-good); }
#cc-app .cc-vrc-kpi.is-rate .cc-vrc-kpi-v { color: var(--cc-accent); }
#cc-app .cc-vrc-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--cc-line); margin-bottom: 14px; }
#cc-app .cc-vrc-tab { border: none; background: transparent; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--cc-muted); cursor: pointer; border-bottom: 2px solid transparent; }
#cc-app .cc-vrc-tab.is-active { color: var(--cc-accent); border-bottom-color: var(--cc-accent); }
#cc-app .cc-vrc-panel { display: none; }
#cc-app .cc-vrc-panel.is-active { display: block; }
#cc-app .cc-vrc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 900px) { #cc-app .cc-vrc-grid { grid-template-columns: 1fr; } }
#cc-app .cc-vrc-kindgroup { margin-bottom: 12px; }
#cc-app .cc-vrc-kindhead { display: flex; justify-content: space-between; font-size: 13px; color: var(--cc-text); padding: 4px 0; border-bottom: 1px solid var(--cc-line-2); margin-bottom: 4px; }
#cc-app .cc-vrc-kindeur { color: var(--cc-bad); font-weight: 700; }
#cc-app .cc-vrc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
#cc-app .cc-vrc-row-lbl { flex: 1; color: var(--cc-text-2); }
#cc-app .cc-vrc-row-eur { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-vrc-row-eur.is-good { color: var(--cc-good); }
#cc-app .cc-vrc-rec { padding: 3px 12px; font-size: 11px; }
#cc-app .cc-vrc-seg { display: inline-flex; border: 1px solid var(--cc-line); border-radius: 7px; overflow: hidden; }
#cc-app .cc-vrc-segbtn { border: none; background: var(--cc-surface); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--cc-muted); cursor: pointer; }
#cc-app .cc-vrc-segbtn.is-active { background: var(--cc-accent); color: #fff; }
#cc-app .cc-vrc-uldchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#cc-app .cc-vrc-uldchip { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
#cc-app .cc-vrc-uldchip.is-sel { background: var(--cc-accent); color: #fff; border-color: var(--cc-accent); }
#cc-app .cc-vrc-actbtn { display: block; width: 100%; text-align: left; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 9px 13px; margin-bottom: 7px; font-size: 13px; cursor: pointer; }
#cc-app .cc-vrc-actbtn:hover { border-color: var(--cc-accent); }
#cc-app .cc-vrc-toast { background: rgba(22,163,74,0.12); color: var(--cc-good); border-radius: 7px; padding: 8px 12px; font-size: 12.5px; margin-top: 8px; animation: cc-pipe-fade .3s ease; }

/* VRC predictive leak radar + learned strategies */
#cc-app .cc-vrc-sysrisk-h { font-size: 12px; font-weight: 700; color: var(--cc-text); margin: 16px 0 8px; padding-top: 12px; border-top: 1px dashed var(--cc-line); }
#cc-app .cc-vrc-sysdone { float: right; font-size: 11.5px; font-weight: 700; color: #047857; }
#cc-app .cc-vrc-leak { border: 1px solid var(--cc-line); border-left-width: 3px; border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; background: var(--cc-surface); }
#cc-app .cc-vrc-leak.is-hot { border-left-color: var(--cc-bad); }
#cc-app .cc-vrc-leak.is-warm { border-left-color: var(--cc-warn); }
#cc-app .cc-vrc-leak.is-cool { border-left-color: var(--cc-accent); }
#cc-app .cc-vrc-leak-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
#cc-app .cc-vrc-leak-lbl { flex: 1; color: var(--cc-text-2); }
#cc-app .cc-vrc-leak-eur { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-vrc-leak-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#cc-app .cc-vrc-leadbar { width: 90px; height: 5px; background: var(--cc-surface-3); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
#cc-app .cc-vrc-leak.is-hot .cc-vrc-leadbar-fill { background: var(--cc-bad); }
#cc-app .cc-vrc-leak.is-warm .cc-vrc-leadbar-fill { background: var(--cc-warn); }
#cc-app .cc-vrc-leak.is-cool .cc-vrc-leadbar-fill { background: var(--cc-accent); }
#cc-app .cc-vrc-leadbar-fill { height: 100%; border-radius: 999px; }
#cc-app .cc-vrc-recbadge { font-size: 11px; color: var(--cc-accent); background: rgba(37,99,235,0.08); padding: 2px 8px; border-radius: 999px; }
#cc-app .cc-vrc-strat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }

/* VRC per-actor scorecards */
#cc-app .cc-vrc-actorcard { padding: 8px 0; border-bottom: 1px solid var(--cc-line-2); }
#cc-app .cc-vrc-actorcard-top { display: flex; justify-content: space-between; align-items: baseline; }
#cc-app .cc-vrc-actorcard-name { font-weight: 600; font-size: 13px; color: var(--cc-text); }
#cc-app .cc-vrc-actorbar { height: 5px; background: var(--cc-surface-3); border-radius: 999px; overflow: hidden; margin: 5px 0; }
#cc-app .cc-vrc-actorbar-fill { height: 100%; background: linear-gradient(90deg, var(--cc-good), var(--cc-accent)); border-radius: 999px; }

/* VRC floating agent toast (always visible, whichever tab) */
#cc-app .cc-vrc-toaststack { position: fixed; right: 18px; bottom: 18px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
#cc-app .cc-vrc-agenttoast { background: #0b1220; color: #e2e8f0; border: 1px solid rgba(37,99,235,0.5); border-radius: 10px; padding: 10px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); animation: cc-vrc-toastin .25s ease; }
#cc-app .cc-vrc-agenttoast b { color: #93c5fd; }
@keyframes cc-vrc-toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sandbox Studio */
#cc-app .cc-sbx { padding: 16px 20px; }
#cc-app .cc-sbx-offbar { background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.25); color: #92400e; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
#cc-app .cc-sbx-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 16px; }
@media (max-width: 1100px) { #cc-app .cc-sbx-grid { grid-template-columns: 1fr; } }
#cc-app .cc-sbx-syscard { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
#cc-app .cc-sbx-sysname { font-weight: 700; font-size: 13px; color: var(--cc-text); margin-bottom: 8px; }
#cc-app .cc-sbx-field { margin-bottom: 8px; }
#cc-app .cc-sbx-lbl { display: block; font-size: 11px; color: var(--cc-muted); margin-bottom: 3px; font-weight: 600; }
#cc-app .cc-sbx-input { width: 100%; padding: 5px 9px; border: 1px solid var(--cc-line); border-radius: 6px; font-size: 13px; background: var(--cc-surface); color: var(--cc-text); box-sizing: border-box; }
#cc-app .cc-sbx-field select { width: 100%; }
#cc-app .cc-sbx-scn .cc-sbx-lbl { margin-top: 4px; }

/* Sandbox Studio tabs + End-to-End pipeline */
#cc-app .cc-sbx-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-sbx-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--cc-muted); cursor: pointer; }
#cc-app .cc-sbx-tab.is-active { color: var(--cc-text); border-bottom-color: var(--cc-accent, #2563eb); }
#cc-app .cc-sbx-tabpane { display: none; }
#cc-app .cc-sbx-tabpane.is-active { display: block; }
#cc-app .cc-e2e-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
@media (max-width: 1100px) { #cc-app .cc-e2e-grid { grid-template-columns: 1fr; } }
#cc-app .cc-e2e-scenarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#cc-app .cc-e2e-scn { text-align: left; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
#cc-app .cc-e2e-scn.is-active { border-color: var(--cc-accent, #2563eb); box-shadow: 0 0 0 1px var(--cc-accent, #2563eb) inset; }
#cc-app .cc-e2e-scn-lbl { font-weight: 700; font-size: 13px; color: var(--cc-text); margin-bottom: 3px; }
#cc-app .cc-e2e-flag { font-size: 10px; color: #b45309; background: rgba(217,119,6,0.12); padding: 1px 6px; border-radius: 10px; font-weight: 700; }
#cc-app .cc-e2e-play { width: 100%; background: var(--cc-accent, #2563eb); color: #fff; border: none; border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; }
#cc-app .cc-e2e-play:disabled { opacity: .55; cursor: default; }
#cc-app .cc-e2e-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#cc-app .cc-e2e-pipeline { position: relative; }
#cc-app .cc-e2e-stage { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; opacity: .32; transition: opacity .3s ease, transform .3s ease; transform: translateY(2px); }
#cc-app .cc-e2e-stage.is-live { opacity: 1; transform: translateY(0); }
#cc-app .cc-e2e-stage.is-done { opacity: 1; transform: translateY(0); }
#cc-app .cc-e2e-stage-ico { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 50%; }
#cc-app .cc-e2e-stage.is-live .cc-e2e-stage-ico { border-color: var(--cc-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
#cc-app .cc-e2e-stage.is-done .cc-e2e-stage-ico { border-color: rgba(16,185,129,0.55); }
#cc-app .cc-e2e-stage-t { font-weight: 700; font-size: 13px; color: var(--cc-text); }
#cc-app .cc-e2e-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 6px; text-transform: uppercase; }
#cc-app .cc-e2e-badge.is-ok { background: rgba(16,185,129,0.14); color: #047857; }
#cc-app .cc-e2e-badge.is-blocked { background: rgba(220,38,38,0.14); color: #b91c1c; }
#cc-app .cc-e2e-line { height: 3px; background: var(--cc-line); border-radius: 3px; margin-top: 6px; overflow: hidden; }
#cc-app .cc-e2e-line-fill { display: block; height: 100%; width: 0; background: var(--cc-accent, #2563eb); transition: width .5s ease; }
#cc-app .cc-e2e-narrative { margin-top: 14px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 12px 14px; }
#cc-app .cc-e2e-narr-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); margin-bottom: 6px; }
#cc-app .cc-e2e-narr { font-size: 13px; line-height: 1.55; color: var(--cc-text); }

/* D3 — prominent outcome "so-what" banner */
#cc-app .cc-e2e-outcome { border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--cc-line); animation: cc-e2e-fadein .35s ease; }
#cc-app .cc-e2e-outcome.is-gain { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); }
#cc-app .cc-e2e-outcome.is-prevent, #cc-app .cc-e2e-outcome.is-blocked { background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.35); }
#cc-app .cc-e2e-oc-head { font-size: 15px; font-weight: 800; color: var(--cc-text); line-height: 1.3; }
#cc-app .cc-e2e-oc-eur { font-size: 26px; font-weight: 800; margin: 6px 0 8px; letter-spacing: -0.01em; }
#cc-app .cc-e2e-outcome.is-gain .cc-e2e-oc-eur { color: #047857; }
#cc-app .cc-e2e-outcome.is-prevent .cc-e2e-oc-eur, #cc-app .cc-e2e-outcome.is-blocked .cc-e2e-oc-eur { color: #b45309; }
#cc-app .cc-e2e-oc-eur span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
#cc-app .cc-e2e-oc-line { font-size: 12px; line-height: 1.5; color: var(--cc-text); }
#cc-app .cc-e2e-oc-risk { color: #92400e; }
#cc-app .cc-e2e-outcome.is-gain .cc-e2e-oc-risk { color: var(--cc-muted); }
#cc-app .cc-e2e-oc-act { color: #047857; margin-top: 2px; }

/* E2E "show the work" — ticker · counters · spinner · work list · systems · message log */
#cc-app .cc-e2e-ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 0 10px; margin-bottom: 8px; border-bottom: 1px dashed var(--cc-line); }
#cc-app .cc-e2e-tick { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; padding: 2px 7px; border-radius: 10px; background: var(--cc-surface-2); color: var(--cc-muted); border: 1px solid var(--cc-line); opacity: .5; transition: all .3s ease; }
#cc-app .cc-e2e-tick.is-lit { opacity: 1; background: rgba(37,99,235,0.12); color: #1d4ed8; border-color: rgba(37,99,235,0.4); }
#cc-app .cc-e2e-tick.is-blocked { opacity: 1; background: rgba(220,38,38,0.12); color: #b91c1c; border-color: rgba(220,38,38,0.4); }
#cc-app .cc-e2e-tick-arr { color: var(--cc-muted); font-size: 10px; opacity: .6; }
#cc-app .cc-e2e-counters { display: flex; gap: 14px; margin-bottom: 10px; }
#cc-app .cc-e2e-cnt { font-size: 11px; color: var(--cc-muted); }
#cc-app .cc-e2e-cnt b { color: var(--cc-text); font-size: 13px; }
#cc-app .cc-e2e-stage-ico { position: relative; }
#cc-app .cc-e2e-spin { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cc-accent, #2563eb); opacity: 0; }
#cc-app .cc-e2e-stage.is-live .cc-e2e-spin { opacity: 1; animation: cc-e2e-spin .7s linear infinite; }
#cc-app .cc-e2e-stage.is-live .cc-e2e-ico-glyph { opacity: .35; }
@keyframes cc-e2e-spin { to { transform: rotate(360deg); } }
#cc-app .cc-e2e-stage-meta { font-size: 10px; color: var(--cc-muted); font-weight: 500; margin-left: 8px; }
#cc-app .cc-e2e-work { list-style: none; margin: 6px 0 0; padding: 0; }
#cc-app .cc-e2e-work-i { font-size: 11.5px; color: var(--cc-muted); padding: 1px 0 1px 16px; position: relative; animation: cc-e2e-fadein .25s ease; }
#cc-app .cc-e2e-work-i::before { content: "→"; position: absolute; left: 0; color: var(--cc-accent, #2563eb); opacity: .7; }
@keyframes cc-e2e-fadein { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: none; } }
#cc-app .cc-e2e-systems { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#cc-app .cc-e2e-sys-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); margin-right: 2px; }
#cc-app .cc-e2e-sys { font-size: 10.5px; padding: 1px 7px; border-radius: 5px; background: var(--cc-surface-3); color: var(--cc-text); border: 1px solid var(--cc-line); }
#cc-app .cc-e2e-msgs { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
#cc-app .cc-e2e-msg { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; background: #0f172a; color: #cbd5e1; border-radius: 6px; padding: 6px 9px; border-left: 3px solid #334155; animation: cc-e2e-fadein .3s ease; }
#cc-app .cc-e2e-msg.is-in { border-left-color: #38bdf8; }
#cc-app .cc-e2e-msg.is-out { border-left-color: #34d399; }
#cc-app .cc-e2e-msg-dir { font-size: 9px; opacity: .7; margin-right: 6px; }
#cc-app .cc-e2e-msg-topic { color: #93c5fd; font-weight: 700; }
#cc-app .cc-e2e-msg-lbl { color: #94a3b8; margin-left: 6px; }
#cc-app .cc-e2e-msg-kv { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
#cc-app .cc-e2e-kv { color: #e2e8f0; }
#cc-app .cc-e2e-kv-k { color: #64748b; margin-right: 3px; }
#cc-app .cc-sbx-scnrow { padding: 7px 9px; border: 1px solid var(--cc-line); border-radius: 7px; margin-bottom: 6px; background: var(--cc-surface-2); }
#cc-app .cc-sbx-scnrow.is-curated { border-color: rgba(37,99,235,0.35); }
#cc-app .cc-sbx-scnrow-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cc-app .cc-sbx-curatedtag { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #1d4ed8; background: rgba(37,99,235,0.12); padding: 1px 6px; border-radius: 9px; }

/* Sandbox — systems & connectivity readout */
#cc-app .cc-sbx-conn-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-sbx-conn-kpi { font-size: 12px; color: var(--cc-muted); }
#cc-app .cc-sbx-conn-kpi b { color: var(--cc-text); font-size: 15px; }
#cc-app .cc-sbx-conn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { #cc-app .cc-sbx-conn-cols { grid-template-columns: 1fr; } }
#cc-app .cc-sbx-conn-h { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); font-weight: 700; margin-bottom: 6px; }
#cc-app .cc-sbx-conn-row { display: grid; grid-template-columns: 14px 1.6fr 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
#cc-app .cc-sbx-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-muted); }
#cc-app .cc-sbx-conn-dot.is-on { background: #10b981; }
#cc-app .cc-sbx-conn-dot.is-off { background: #ef4444; }
#cc-app .cc-sbx-conn-dot.is-none { background: #cbd5e1; }
#cc-app .cc-sbx-conn-name { color: var(--cc-text); font-weight: 600; }
#cc-app .cc-sbx-conn-cat { color: var(--cc-muted); font-size: 11px; }
#cc-app .cc-sbx-conn-st { font-size: 10px; font-weight: 700; text-transform: uppercase; text-align: right; }
#cc-app .cc-sbx-conn-st.is-on { color: #047857; }
#cc-app .cc-sbx-conn-st.is-off { color: #b91c1c; }
#cc-app .cc-sbx-conn-st.is-none { color: #94a3b8; }
#cc-app .cc-sbx-conn-st.is-live { color: #047857; }
#cc-app .cc-sbx-conn-st.is-sim { color: #2563eb; }
#cc-app .cc-sbx-conn-dot.is-live { background: #10b981; }
#cc-app .cc-sbx-conn-dot.is-sim { background: #3b82f6; }
#cc-app .cc-sbx-conn-banner { background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.22); color: var(--cc-text); font-size: 12px; line-height: 1.5; padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; }
#cc-app .cc-sbx-conn-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 10.5px; }
#cc-app .cc-sbx-conn-legend .cc-sbx-conn-st { text-align: left; }
#cc-app .cc-sbx-conn-code { font-size: 9.5px; color: var(--cc-muted); font-family: ui-monospace, Menlo, monospace; }
#cc-app .cc-sbx-conn-row { grid-template-columns: 1.6fr 1fr auto; }

/* Predictive ULD Control Tower (thin client over UNIE™) */
#cc-app .cc-uld { padding: 16px 20px; }
#cc-app .cc-uld-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 1100px) { #cc-app .cc-uld-kpis { grid-template-columns: repeat(4, 1fr); } }
#cc-app .cc-uld-kpi { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 9px; padding: 10px 12px; }
#cc-app .cc-uld-kpi-v { font-size: 22px; font-weight: 800; color: var(--cc-text); letter-spacing: -0.01em; }
#cc-app .cc-uld-kpi-l { font-size: 10.5px; color: var(--cc-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
#cc-app .cc-uld-kpi.is-good .cc-uld-kpi-v { color: #047857; }
#cc-app .cc-uld-kpi.is-warn .cc-uld-kpi-v { color: #b45309; }
#cc-app .cc-uld-kpi.is-risk .cc-uld-kpi-v { color: #b91c1c; }
#cc-app .cc-uld-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
@media (max-width: 1100px) { #cc-app .cc-uld-grid { grid-template-columns: 1fr; } }
#cc-app .cc-uld-board-row { display: grid; grid-template-columns: 52px repeat(3, 1fr); gap: 6px; margin-bottom: 6px; align-items: center; }
#cc-app .cc-uld-board-head .cc-uld-board-cell { font-size: 10.5px; font-weight: 700; color: var(--cc-muted); text-align: center; text-transform: uppercase; }
#cc-app .cc-uld-board-st { font-size: 12px; font-weight: 700; color: var(--cc-text); }
#cc-app .cc-uld-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 30px; border-radius: 6px; font-size: 13px; font-weight: 700; border: 1px solid var(--cc-line); }
#cc-app .cc-uld-cell.is-deficit { background: rgba(220,38,38,0.14); color: #b91c1c; border-color: rgba(220,38,38,0.30); }
#cc-app .cc-uld-cell.is-surplus { background: rgba(16,185,129,0.14); color: #047857; border-color: rgba(16,185,129,0.30); }
#cc-app .cc-uld-cell.is-balanced { background: var(--cc-surface-2); color: var(--cc-muted); }
/* NOT REPORTED — distinct from balanced. A station×type the network model has no cell for used to render
   as a balanced zero, which is the most reassuring reading of 'we have no data' on a board scanned for
   trouble. It reads as a gap now, and is not clickable, because there are no levers for a cell that does
   not exist. */
#cc-app .cc-uld-cell.is-unknown { background: transparent; color: var(--cc-muted);
  border: 1px dashed var(--cc-border, rgba(120,120,120,.35)); opacity: .6; cursor: default; }
/* ⛔ A CELL THE PLATFORM CANNOT CLASSIFY (2026-09-24). Distinct from `is-unknown` (no cell at all):
   here the stock IS known and the THRESHOLD is not — no operator has authored a station buffer, so the
   board must not colour the tile green, amber or red. It shows the net and says why, and it stays
   clickable so the operator can go and set the term. */
#cc-app .cc-uld-cell.is-unstated { background: repeating-linear-gradient(135deg, rgba(148,163,184,.13) 0 6px, transparent 6px 12px); color: var(--cc-muted); border: 1px dashed var(--cc-line); cursor: pointer; }
/* ⛔ THE ULD BALANCE POLICY EDITOR (2026-09-24) — the screen that was never built, for terms the server has
   accepted all along. Every row says WHOSE the number is, because a platform default presented as the
   operator's term is how a code constant ended up deciding 99 cells. */
#cc-app .cc-ubp { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
#cc-app .cc-ubp-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-ubp-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-ubp-k { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-ubp-u { display: block; font-weight: 400; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-ubp-v { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#cc-app .cc-ubp-v input { width: 104px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 12px; text-align: right; }
#cc-app .cc-ubp-src { font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-ubp-src.is-authored { color: var(--cc-good, #16a34a); font-weight: 700; }
#cc-app .cc-ubp-why { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-ubp-actions { display: flex; gap: 8px; margin-top: 2px; }
#cc-app .cc-ubp-rate { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 4px 0; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-ubp-rate.is-gap b { color: var(--cc-warn, #d97706); font-weight: 700; }
#cc-app .cc-ubp-driver { grid-column: 1 / -1; font-size: 10px; color: var(--cc-muted); font-family: ui-monospace, monospace; }
#cc-app .cc-ubp-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-top: 4px; }

#cc-app .cc-uld-legend { margin-top: 8px; font-size: 11px; color: var(--cc-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* v2.41.0 — actionable cells + €-strip + cell lever panel */
#cc-app button.cc-uld-cell { cursor: default; font-family: inherit; }
#cc-app .cc-uld-cell.is-actionable { cursor: pointer; }
#cc-app .cc-uld-cell.is-actionable:hover { outline: 2px solid var(--cc-accent); outline-offset: 1px; }
#cc-app .cc-uld-board-eur { margin-top: 8px; font-size: 11.5px; color: var(--cc-text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cc-app .cc-uld-board-eur b { color: var(--cc-bad); }
#cc-app .cc-uld-board-eurtoggle { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text-2); cursor: pointer; }
#cc-app .cc-uld-board-eurtoggle:hover { border-color: var(--cc-accent); color: var(--cc-text); }
#cc-app .cc-uld-board-rebalance { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--cc-accent); background: var(--cc-accent); color: #fff; cursor: pointer; }
#cc-app .cc-uld-board-rebalance:hover { filter: brightness(1.06); }
/* structural flows (dominant surplus→deficit lanes) */
#cc-app .cc-uld-flows { margin-top: 10px; }
#cc-app .cc-uld-flows-h { font-size: 11.5px; font-weight: 700; color: var(--cc-text); margin-bottom: 4px; }
#cc-app .cc-uld-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--cc-line-2); }
#cc-app .cc-uld-flow:first-of-type { border-top: none; }
#cc-app .cc-uld-flow-lane { font-weight: 700; color: var(--cc-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-uld-flow-arrow { color: var(--cc-accent); font-weight: 800; }
#cc-app .cc-uld-flow-meta { color: var(--cc-muted); }
#cc-app .cc-uld-flow-meta b { color: var(--cc-good); }
#cc-app .cc-reb-btns { white-space: nowrap; }
/* cell lever panel — right slide-in (above dashboard edit controls @1200) */
#cc-app .cc-cellpanel-scrim { position: fixed; inset: 0; background: rgba(15,23,42,0.30); z-index: 1250; }
#cc-app .cc-cellpanel-scrim[hidden] { display: none; }
#cc-app .cc-cellpanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw); background: var(--cc-surface); border-left: 1px solid var(--cc-line); box-shadow: -8px 0 24px rgba(15,23,42,0.14); z-index: 1260; display: flex; flex-direction: column; animation: cc-awb-drawer-in 240ms cubic-bezier(0.32,0.72,0,1); }
#cc-app .cc-cellpanel[hidden] { display: none; }

/* ⛔ THE DECISION DRAWERS HAD NO STYLING AT ALL (2026-09-24). `#cc-uldbal-drawer` (Idle ULD Activation →
   Resolve) and `#cc-cutoff-drawer` (Cut-off Decisions → Resolve) are built with class `cc-dec-drawer`, and
   NEITHER that class NOR those ids had a single rule in this stylesheet. Their CONTENTS were fully styled
   (`cc-dec-cand` and friends), so the markup rendered — as an unstyled block appended in normal flow at the
   very bottom of a long dashboard. Mario: "no panel appears when I click resolve." It had appeared; it was
   just nowhere a human would ever see it.
   ⛔ And this is why a probe that asks "did an element become visible?" cannot be trusted alone: the element
   HAD layout boxes, so it scored green while the operator saw nothing.
   Same chrome as `.cc-cellpanel` above — the platform's existing side panel, not a third design. */
#cc-app .cc-dec-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw); background: var(--cc-surface); border-left: 1px solid var(--cc-line); box-shadow: -8px 0 24px rgba(15,23,42,0.14); z-index: 1260; display: flex; flex-direction: column; animation: cc-awb-drawer-in 240ms cubic-bezier(0.32,0.72,0,1); }
#cc-app .cc-dec-drawer[hidden] { display: none; }
/* ⛔ THE RESOLUTION STEPS AND THE PARTIES TOLD (2026-09-24). Mario: "I see no resolution at all if it is meant
   for that purpose." The server sends a PLAYBOOK with every option — the ordered steps, who is responsible, and
   the command where one exists — and seven client sites carried it into metadata while none rendered it. Same
   for `consulted`, the parties a decision must be told to (Cargo iQ MOP N.5). Both are now drawn on every
   option card, which is what makes a board called Resolve actually resolve anything. */
#cc-app .cc-dec-playbook { margin-top: 8px; border-top: 1px dashed var(--cc-line); padding-top: 8px; }
#cc-app .cc-dec-playbook-h { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 6px; }
#cc-app .cc-dec-playbook-step { display: grid; grid-template-columns: 18px 1fr; gap: 4px 8px; align-items: start; margin-bottom: 7px; }
#cc-app .cc-dec-playbook-n { width: 18px; height: 18px; border-radius: 50%; background: var(--cc-accent); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
#cc-app .cc-dec-playbook-what { font-size: 12px; line-height: 1.45; color: var(--cc-text); }
#cc-app .cc-dec-playbook-who { display: block; font-size: 11px; color: var(--cc-muted); }
#cc-app .cc-dec-playbook-how { grid-column: 2; font-size: 10.5px; color: var(--cc-muted); font-style: italic; }
/* ⛔ "Still to price: demurrageEurPerUldDay, downgradeEurPerKg, …" — the platform's internal field names, shown
   to an operator (Mario, 2026-09-24: "what does this mean — the panel serves no value at all"). Now said
   properly, and pointing at BOTH places a rate can be authored: the actor's own profile term wins, the rate
   card applies where the profile states none. */
/* an option with no stated industry basis — the server calls that a contract defect; it must not look
   identical on screen to one that cites a procedure */
#cc-app .cc-uldlc-msnote { display: block; font-size: 10px; line-height: 1.4; color: var(--cc-muted); margin-top: 2px; }
#cc-app .cc-basis-absent { color: var(--cc-warn, #d97706); font-style: italic; }

/* THE GROUNDS OF A CHARGE, AND THE BASIS OF AN ARRIVAL. Both were held by the server and dropped by the
   renderer (2026-09-24): the who-pays table printed party / owes / amount with no reason the party being
   charged could answer, and a split-arrival fork card printed an RCF time without saying whether a handler
   reported it or the platform merely noted being told. Both now render as a muted sentence under their row
   or card — styled HERE, because an unstyled block is how two Resolve panels rendered invisibly at the foot
   of the page. */
#cc-app .cc-whopays-basis { padding: 0 6px 5px; font-size: 11px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-irops-fork-basis { margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
/* `_absent` renders its titled dash through .cc-compliance-sub, which carries its OWN font-size: 12px
   (:10129). Nested in these two blocks the dash would come out LARGER than the sentence it stands in —
   11px and 10.5px respectively — so the missing value would read as the loudest thing in the row. */
#cc-app .cc-whopays-basis .cc-compliance-sub,
#cc-app .cc-irops-fork-basis .cc-compliance-sub { font-size: inherit; }

/* ⛔ 2026-09-24 · the repair board's `blockedWhy` had NO render site in the bundle at all. A case whose options
   could not be built must read as a missing fact with an owner, not as a board that failed to load — and it is
   styled here, not inline: an unstyled block is how two Resolve panels rendered invisibly at the foot of the page. */
#cc-app .cc-coord-blocked { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--cc-warn, #d97706); border-left-width: 3px; border-radius: 6px; background: var(--cc-surface-2); color: var(--cc-text); font-size: 12px; line-height: 1.5; }
#cc-app .cc-coord-blocked b { color: var(--cc-warn, #d97706); }
#cc-app .cc-coord-blocked-sub { margin-top: 3px; font-size: 11px; color: var(--cc-muted); }

#cc-app .cc-dec-unpriced { margin-top: 9px; border-top: 1px dashed var(--cc-line); padding-top: 8px; }
#cc-app .cc-dec-unpriced-h { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 5px; }
#cc-app .cc-dec-unpriced-r { font-size: 11.5px; color: var(--cc-text); padding: 2px 0 2px 12px; position: relative; }
#cc-app .cc-dec-unpriced-r::before { content: "\2022"; position: absolute; left: 2px; color: var(--cc-muted); }
#cc-app .cc-dec-unpriced-w { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--cc-muted); }

#cc-app .cc-dec-consulted { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
#cc-app .cc-dec-consulted-h { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-dec-consulted-p { font-size: 11px; color: var(--cc-text); background: var(--cc-bg-alt, rgba(148,163,184,.14)); border-radius: 5px; padding: 2px 7px; }

/* the exclusions the option-set producers state beside the euro (`context.costsNotIncluded`). Until
   2026-09-24 only the cut-off drawer drew them, as an unstyled inline sub-line; every other board dropped
   them. Given the same weight as "Rates this cell still needs" — an exclusion changes what the
   comparison MEANS, so it is not muted body text. */
#cc-app .cc-dec-excl { margin-top: 9px; border-top: 1px dashed var(--cc-line); padding-top: 8px; }
#cc-app .cc-dec-excl-h { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-warn, #d97706); margin-bottom: 5px; }
#cc-app .cc-dec-excl-r { font-size: 11.5px; line-height: 1.45; color: var(--cc-muted); padding: 2px 0 2px 12px; position: relative; }
#cc-app .cc-dec-excl-r::before { content: "\2022"; position: absolute; left: 2px; color: var(--cc-warn, #d97706); }

/* ⛔ WHOSE PRIORITIES, AND WHAT THEY ADDED UP TO (2026-09-24). The server sends `recommendation.weights` with
   `authored: false` and its own note, and a per-objective `contributions` breakdown for every compared option;
   the drawer rendered neither, so a platform-default ranking was indistinguishable on screen from the operator's
   own and a score bar had nothing behind it. The unauthored state is drawn in the colour of an ABSENCE, not of a
   pass — the same reading `.cc-basis-absent` gives a figure whose basis nothing states. */
#cc-app .cc-dec-wbasis { margin-top: 7px; border-radius: 6px; padding: 6px 8px; background: rgba(217,119,6,.10); color: var(--cc-warn, #d97706); font-size: 11px; line-height: 1.45; }
#cc-app .cc-dec-wbasis.is-authored { background: rgba(22,163,74,.10); color: var(--cc-good, #16a34a); }
#cc-app .cc-dec-wbasis b { font-weight: 800; }
#cc-app .cc-dec-wbasis-note { display: block; font-size: 10.5px; color: var(--cc-muted); margin-top: 2px; }

#cc-app .cc-dec-contrib { margin-top: 8px; border-top: 1px dashed var(--cc-line); padding-top: 8px; }
#cc-app .cc-dec-contrib-h { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 5px; }
#cc-app .cc-dec-contrib-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; align-items: baseline; padding: 2px 0; }
#cc-app .cc-dec-contrib-obj { font-size: 11.5px; color: var(--cc-text); }
#cc-app .cc-dec-contrib-dir { display: block; font-size: 10px; color: var(--cc-muted); font-style: italic; }
#cc-app .cc-dec-contrib-val { font-size: 11.5px; color: var(--cc-text); font-variant-numeric: tabular-nums; }
#cc-app .cc-dec-contrib-w { font-size: 11px; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
#cc-app .cc-dec-contrib-sum { margin-top: 5px; font-size: 11.5px; color: var(--cc-text); text-align: right; }

/* ⛔ THE STEPS ROW BENEATH AN OPTION (2026-09-24). The four coordination boards and the IROPs cockpit draw each
   option as a TABLE ROW, so the playbook and the consulted parties go in a full-width row under it — a five-step
   workflow does not fit the label column. Shipped without these rules the block renders flush and unstyled, which
   is exactly how two Resolve panels rendered invisibly at the foot of the page earlier tonight.
   ⛔ `--cc-text-dim` IS NEVER DEFINED in this stylesheet (measured 2026-09-24: 0 declarations, ~hundreds of bare
   `var(--cc-text-dim)` uses in the bundle's inline styles). A bare var() on an INHERITED property falls back to the
   parent's colour, so a "dim" note silently renders at full strength. New rules state a fallback; the pre-existing
   bare uses are a separate finding, not repaired here. */
#cc-app .cc-dec-steps { padding: 2px 10px 10px 10px; background: var(--cc-surface-2); border-bottom: 0.5px solid var(--cc-line); }
#cc-app .cc-dec-steps .cc-dec-playbook { margin-top: 6px; border-top: none; padding-top: 0; }
#cc-app .cc-dec-optmeta { font-size: 11px; line-height: 1.45; color: var(--cc-text-2); padding-top: 6px; }
/* the set's own statement of what these options ARE — `context.note`, which no client site had ever read */
#cc-app .cc-dec-setnote { margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--cc-text-dim, var(--cc-muted)); }

#cc-app .cc-dec-drawer-in { display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; flex: 1 1 auto; }
#cc-app .cc-cellpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--cc-line); font-weight: 800; font-size: 14px; color: var(--cc-text); }
#cc-app .cc-cellpanel-close { border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--cc-muted); }
#cc-app .cc-cellpanel-body { padding: 12px 14px; overflow: auto; }
#cc-app .cc-cellpanel-pos { border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--cc-text-2); margin-bottom: 10px; }
#cc-app .cc-cellpanel-pos.is-deficit { background: rgba(220,38,38,0.06); }
#cc-app .cc-cellpanel-pos.is-surplus { background: rgba(16,185,129,0.06); }
#cc-app .cc-cellpanel-heat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--cc-surface-3); color: var(--cc-text-2); margin-right: 6px; }
#cc-app .cc-cellpanel-eur { color: var(--cc-bad); }
#cc-app .cc-cellpanel-lever { border: 1px solid var(--cc-line); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; background: var(--cc-surface); }
#cc-app .cc-cellpanel-lever.is-rec { border-color: var(--cc-accent); box-shadow: 0 0 0 2px rgba(37,99,235,0.10); }
#cc-app .cc-cellpanel-lv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#cc-app .cc-cellpanel-lv-label { font-weight: 700; font-size: 13px; color: var(--cc-text); }
#cc-app .cc-cellpanel-lv-net { font-weight: 800; font-size: 13px; white-space: nowrap; }
#cc-app .cc-cellpanel-lv-net.is-good { color: var(--cc-good); }
#cc-app .cc-cellpanel-lv-net.is-bad { color: var(--cc-bad); }
#cc-app .cc-cellpanel-lv-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
#cc-app .cc-cellpanel-risk { font-weight: 700; padding: 0 5px; border-radius: 4px; }
#cc-app .cc-cellpanel-risk.is-low { color: var(--cc-good); } #cc-app .cc-cellpanel-risk.is-medium { color: #b45309; } #cc-app .cc-cellpanel-risk.is-high { color: var(--cc-bad); }
#cc-app .cc-cellpanel-safe { font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: rgba(16,185,129,0.14); color: #047857; margin-left: 4px; }
#cc-app .cc-cellpanel-btn { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 7px; border: 1px solid var(--cc-accent); background: var(--cc-accent); color: #fff; cursor: pointer; }
#cc-app .cc-cellpanel-btn:hover { filter: brightness(1.06); }
#cc-app .cc-cellpanel-btn.is-auto { border-color: var(--cc-good); background: var(--cc-good); }
#cc-app .cc-cellpanel-btn.is-approve { border-color: var(--cc-good); background: var(--cc-good); }
#cc-app .cc-cellpanel-btn.is-reject { border-color: var(--cc-line); background: var(--cc-surface); color: var(--cc-text-2); }
#cc-app .cc-cellpanel-rev { margin-top: 8px; border-top: 1px dashed var(--cc-line); padding-top: 8px; }
#cc-app .cc-cellpanel-fb { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 12px; padding: 6px 8px; border: 1px solid var(--cc-line); border-radius: 6px; margin: 5px 0; resize: vertical; background: var(--cc-surface-2); color: var(--cc-text); }
#cc-app .cc-cellpanel-rev-actions { display: flex; gap: 6px; }
#cc-app .cc-cellpanel-foot { margin-top: 10px; }
/* cost-profile editor rows */
#cc-app .cc-costrows { margin-top: 10px; }
#cc-app .cc-costrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--cc-line-2); }
#cc-app .cc-costrow:first-child { border-top: none; }
#cc-app .cc-costrow-l { font-size: 12.5px; color: var(--cc-text-2); }
#cc-app .cc-costrow input[type="number"] { width: 92px; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface-2); color: var(--cc-text); text-align: right; }
#cc-app .cc-costrow input[type="checkbox"] { width: 16px; height: 16px; }
#cc-app .cc-uld-fc, #cc-app .cc-uld-rec { border: 1px solid var(--cc-line); border-left-width: 3px; border-radius: 8px; padding: 8px 11px; margin-bottom: 7px; background: var(--cc-surface); }
#cc-app .cc-uld-fc.is-deficit { border-left-color: #ef4444; }
#cc-app .cc-uld-fc.is-surplus { border-left-color: #10b981; }
#cc-app .cc-uld-rec { border-left-color: var(--cc-accent, #2563eb); }
#cc-app .cc-uld-fc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cc-app .cc-uld-fc-eur { font-weight: 800; color: var(--cc-text); }
#cc-app .cc-uld-fc-eur.is-good { color: #047857; }
/* TWIN-02 #106 — seasonal forecast horizon strip */
#cc-app .cc-uld-strip { display: flex; gap: 3px; margin: 6px 0 4px; flex-wrap: wrap; }
#cc-app .cc-uld-scell { flex: 1 1 22px; min-width: 22px; text-align: center; font-size: 10px; font-weight: 700;
  padding: 3px 0; border-radius: 4px; color: #fff; letter-spacing: .02em; }
#cc-app .cc-uld-scell-o { background: #94a3b8; }
#cc-app .cc-uld-scell-d { background: #ef4444; }
#cc-app .cc-uld-scell-s { background: #d97706; }
#cc-app .cc-uld-scell.cc-uld-cellhit { outline: 2px solid var(--cc-text); outline-offset: 1px; }
/* TELE-03 #107 — positioning fusion */
#cc-app .cc-uld-fuse-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 4px 0; }
#cc-app .cc-uld-fuse-acc { font-size: 22px; font-weight: 800; color: var(--cc-text); }
#cc-app .cc-uld-fuse-conf { font-size: 22px; font-weight: 800; color: #047857; }
#cc-app .cc-uld-fuse-latlng { font-family: ui-monospace, Menlo, monospace; margin-bottom: 6px; }
#cc-app .cc-uld-fusesrcs { display: flex; flex-direction: column; gap: 4px; }
#cc-app .cc-uld-fusesrc { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--cc-line); background: var(--cc-surface); font-size: 12px; }
#cc-app .cc-uld-fusesrc.is-dropped { opacity: .5; }
#cc-app .cc-uld-fusesrc.is-used { border-left: 3px solid #2563eb; }
/* TELE-03b · ULD position map */
#cc-app .cc-uldpos-head { margin-bottom: 6px; }
#cc-app .cc-uldpos-kpis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12px; }
#cc-app .cc-uldpos-kpis b { font-size: 15px; font-variant-numeric: tabular-nums; }
#cc-app .cc-uldpos-map { width: 100%; height: 340px; border-radius: 8px; overflow: hidden; border: 1px solid var(--cc-line); }
#cc-app .cc-uldpos-map .leaflet-container { background: var(--cc-surface-2); }
/* COMM-04 · multi-currency ULD pooling billing */
#cc-app .cc-uld-bill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
#cc-app .cc-uld-bill-total { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
#cc-app .cc-uld-bill-sel { font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text); }
#cc-app .cc-uld-bill-fx { margin-top: 4px; font-size: 11px; font-weight: 700; color: #2563eb; }
#cc-app .cc-uld-bill-fx.is-hi { color: #d97706; }
#cc-app .cc-uld-bill-ccys { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#cc-app .cc-uld-bill-ccy { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--cc-line); background: var(--cc-surface); font-size: 12px; font-variant-numeric: tabular-nums; }
#cc-app .cc-uld-bill-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
#cc-app .cc-uld-bill-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--cc-muted); padding: 3px 6px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-uld-bill-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--cc-line); }
/* #120 · part-shipment control tower */
#cc-app .cc-partship-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
#cc-app .cc-partship-kpi { border: 1px solid var(--cc-line); border-radius: 8px; padding: 6px 8px; background: var(--cc-surface); text-align: center; }
#cc-app .cc-partship-kpi b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
#cc-app .cc-partship-kpi span { font-size: 10px; color: var(--cc-muted); text-transform: uppercase; letter-spacing: .03em; }
#cc-app .cc-partship-list { display: flex; flex-direction: column; gap: 8px; }
#cc-app .cc-partship-row { border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 10px; background: var(--cc-surface); }
#cc-app .cc-partship-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cc-app .cc-partship-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; }
#cc-app .cc-partship-dv { background: rgba(217,119,6,.15); color: #b45309; }
#cc-app .cc-partship-pd { background: rgba(37,99,235,.15); color: #1d4ed8; }
#cc-app .cc-partship-bar { height: 6px; border-radius: 999px; background: var(--cc-line); overflow: hidden; margin: 6px 0 4px; }
#cc-app .cc-partship-fill { height: 100%; border-radius: 999px; }
#cc-app .cc-partship-fill.is-ok { background: #16a34a; }
#cc-app .cc-partship-fill.is-warn { background: #d97706; }
#cc-app .cc-partship-fill.is-bad { background: #dc2626; }
#cc-app .cc-partship-meta { display: flex; justify-content: space-between; gap: 8px; }
#cc-app .cc-uld-rec-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
#cc-app .cc-uld-ab-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cc-muted); margin: 10px 0 5px; }
#cc-app .cc-uld-ab-run:disabled { opacity: .5; cursor: default; }
/* #1 · Vendor IoT connectors widget */
#cc-app .cc-uld-conns { display: flex; flex-direction: column; gap: 8px; }
#cc-app .cc-uld-conn { border: 1px solid var(--cc-line); border-radius: 10px; padding: 8px 10px; background: var(--cc-surface-2); }
#cc-app .cc-uld-conn-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cc-app .cc-uld-conn-name { font-size: 13px; }
#cc-app .cc-uld-conn-status { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; }
#cc-app .cc-uld-conn-status.is-live { color: #047857; background: rgba(16,163,74,0.12); }
#cc-app .cc-uld-conn-status.is-ready { color: var(--cc-muted); background: var(--cc-surface-3); }
#cc-app .cc-uld-conn-proto { margin: 2px 0 6px; }
#cc-app .cc-uld-conn-reg { font-weight: 700; border-radius: 8px; padding: 0 6px; font-size: 10.5px; }
#cc-app .cc-uld-conn-reg.is-reg { color: #047857; background: rgba(16,163,74,0.12); }
#cc-app .cc-uld-conn-reg.is-unreg { color: #b45309; background: rgba(217,119,6,0.12); }
#cc-app .cc-uld-conn-reg.is-generic { color: var(--cc-muted); background: var(--cc-surface-3); }
#cc-app .cc-uld-conn-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
#cc-app .cc-uld-conn-btn { padding: 2px 9px; font-size: 11px; border-radius: 10px; }
#cc-app .cc-uld-conn-out { margin-top: 6px; }
#cc-app .cc-uld-conn-fired { font-size: 11px; color: var(--cc-text-2); word-break: break-word; }
#cc-app .cc-uld-conn-fired code { background: var(--cc-surface-3); border-radius: 4px; padding: 1px 5px; font-size: 10.5px; }
#cc-app .cc-uld-conn-case { margin-top: 4px; font-size: 11px; color: #b45309; }
#cc-app .cc-uld-conn-case b { color: var(--cc-text); }
#cc-app .cc-uld-conn-note { margin-top: 8px; font-style: italic; }
/* TELE-02 · DO-160G flight-mode strip + held-in-flight confirmation */
#cc-app .cc-uld-flightmode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 6px 9px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-2); font-size: 11px; }
#cc-app .cc-uld-fm-badge { font-weight: 600; color: #1d4ed8; background: rgba(37,99,235,.10); border-radius: 5px; padding: 1px 7px; }
#cc-app .cc-uld-fm-stat { color: var(--cc-text-2); }
#cc-app .cc-uld-fm-stat b { color: var(--cc-text); }
#cc-app .cc-uld-fm-gated b { color: #1d4ed8; }
#cc-app .cc-uld-conn-held { margin-top: 4px; font-size: 11px; color: #1d4ed8; }
#cc-app .cc-uld-conn-held b { color: var(--cc-text); }
/* COMM-01 · ULD Custody / e-UCR widget */
#cc-app .cc-uld-ucr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 6px 9px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-2); font-size: 11px; }
#cc-app .cc-uld-ucr-badge { font-weight: 600; color: #6d28d9; background: rgba(109,40,217,.10); border-radius: 5px; padding: 1px 7px; }
#cc-app .cc-uld-ucr-stat { color: var(--cc-text-2); }
#cc-app .cc-uld-ucr-stat b { color: var(--cc-text); }
#cc-app .cc-uld-ucr-ok { color: #059669; }
#cc-app .cc-uld-ucr-bad { color: #dc2626; font-weight: 600; }
#cc-app .cc-uld-ucr-verify { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
#cc-app .cc-uld-ucr-input { flex: 1 1 160px; min-width: 120px; padding: 4px 8px; border: 1px solid var(--cc-border); border-radius: 6px; background: var(--cc-surface); color: var(--cc-text); font-size: 11px; }
#cc-app .cc-uld-ucr-vout { font-size: 11px; }
#cc-app .cc-uld-ucr-list { display: flex; flex-direction: column; gap: 3px; }
#cc-app .cc-uld-ucr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 6px; border-radius: 6px; background: var(--cc-surface-2); font-size: 11px; }
#cc-app .cc-uld-ucr-uld { font-weight: 600; color: #1d4ed8; cursor: pointer; }
#cc-app .cc-uld-ucr-uld:hover { text-decoration: underline; }
#cc-app .cc-uld-ucr-move { color: var(--cc-text-2); }
#cc-app .cc-uld-ucr-move b { color: var(--cc-text); }
#cc-app .cc-uld-ucr-cond { font-size: 10px; font-weight: 600; border-radius: 4px; padding: 0 5px; }
#cc-app .cc-uld-ucr-cond.is-ser { color: #059669; background: rgba(5,150,105,.12); }
#cc-app .cc-uld-ucr-cond.is-dam { color: #b45309; background: rgba(180,83,9,.12); }
#cc-app .cc-uld-ucr-hash { margin-left: auto; font-size: 10px; color: var(--cc-text-2); background: var(--cc-surface-3); border-radius: 4px; padding: 1px 5px; }
#cc-app .cc-uld-ucr-hint { margin: -4px 0 6px; }
/* MRO-04 · ULD Scrap Analyzer widget */
#cc-app .cc-uld-scrap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 6px 9px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-2); font-size: 11px; }
#cc-app .cc-uld-scrap-badge { font-weight: 600; color: #047857; background: rgba(4,120,87,.10); border-radius: 5px; padding: 1px 7px; }
#cc-app .cc-uld-scrap-stat { color: var(--cc-text-2); }
#cc-app .cc-uld-scrap-stat b { color: var(--cc-text); }
#cc-app .cc-uld-scrap-scrap b { color: #dc2626; }
#cc-app .cc-uld-scrap-watch b { color: #b45309; }
#cc-app .cc-uld-scrap-save { margin-left: auto; font-weight: 600; color: #047857; }
#cc-app .cc-uld-scrap-list { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
#cc-app .cc-uld-scrap-row { display: grid; grid-template-columns: 1.2fr .5fr 1fr .9fr .6fr .9fr .8fr auto; align-items: center; gap: 4px 8px; padding: 3px 6px; border-radius: 6px; background: var(--cc-surface-2); font-size: 11px; }
#cc-app .cc-uld-scrap-uld { font-weight: 600; color: var(--cc-text); }
#cc-app .cc-uld-scrap-cell { color: var(--cc-text-2); }
#cc-app .cc-uld-scrap-badge2 { font-size: 10px; font-weight: 600; border-radius: 4px; padding: 0 5px; text-align: center; }
#cc-app .cc-uld-scrap-badge2.is-scrap { color: #dc2626; background: rgba(220,38,38,.12); }
#cc-app .cc-uld-scrap-badge2.is-watch { color: #b45309; background: rgba(180,83,9,.12); }
#cc-app .cc-uld-scrap-save2 { font-weight: 600; color: #047857; text-align: right; }
#cc-app .cc-uld-scrap-btn { padding: 1px 8px; font-size: 10.5px; }
#cc-app .cc-uld-scrap-tools { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
#cc-app .cc-uld-scrap-out { font-size: 11px; min-height: 14px; }
#cc-app .cc-uld-scrap-ok { color: #047857; font-weight: 600; }
#cc-app .cc-uld-scrap-econ-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1300; display: flex; align-items: center; justify-content: center; }
#cc-app .cc-uld-scrap-econ-box { background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 12px; padding: 16px 18px; max-width: 560px; width: 92%; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
#cc-app .cc-uld-scrap-econ-box h4 { margin: 0 0 10px; font-size: 13px; }
#cc-app .cc-uld-scrap-econ-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
#cc-app .cc-uld-scrap-econ-tbl th, #cc-app .cc-uld-scrap-econ-tbl td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--cc-border); }
#cc-app .cc-uld-scrap-econ-in { width: 74px; padding: 3px 5px; border: 1px solid var(--cc-border); border-radius: 5px; background: var(--cc-surface); color: var(--cc-text); font-size: 11px; text-align: right; }
#cc-app .cc-uld-scrap-econ-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* #3 · Competitive Positioning benchmark widget */
#cc-app .cc-bench-wrap { overflow-x: auto; }
#cc-app table.cc-bench { border-collapse: collapse; width: 100%; font-size: 11.5px; }
#cc-app .cc-bench th, #cc-app .cc-bench td { border: 1px solid var(--cc-line-2); padding: 3px 6px; text-align: center; }
#cc-app .cc-bench th.cc-bench-cap, #cc-app .cc-bench td.cc-bench-cap { text-align: left; font-weight: 600; white-space: nowrap; }
#cc-app .cc-bench th.cc-bench-col { font-size: 10.5px; color: var(--cc-muted); font-weight: 700; }
#cc-app .cc-bench th.is-us, #cc-app .cc-bench td.is-us { background: rgba(37,99,235,0.10); }
#cc-app .cc-bench th.is-us { color: #1d4ed8; }
#cc-app .cc-bench tr.is-lead td.cc-bench-cap { color: #1d4ed8; font-weight: 700; }
#cc-app .cc-bench-s { font-weight: 800; font-variant-numeric: tabular-nums; }
#cc-app .cc-bench-s.is-strong { color: #047857; }
#cc-app .cc-bench-s.is-mid { color: var(--cc-muted); }
#cc-app .cc-bench-s.is-weak { color: #b45309; opacity: .8; }
#cc-app .cc-bench-legend { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
#cc-app .cc-bench-rfp { margin-top: 4px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--cc-line);
  border-left: 3px solid #16a34a; background: var(--cc-surface-2); font-size: 11.5px; }
#cc-app .cc-bench-rfp b { color: #16a34a; }
/* #2 · Repair-shop allocation widget */
#cc-app .cc-uld-repairs { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
#cc-app .cc-uld-repair { border: 1px solid var(--cc-line); border-left: 3px solid var(--cc-line); border-radius: 8px; padding: 7px 9px; background: var(--cc-surface-2); }
#cc-app .cc-uld-repair.is-xvendor { border-left-color: #16a34a; }
#cc-app .cc-uld-repair-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#cc-app .cc-uld-repair-vendor { font-weight: 700; font-size: 11px; border-radius: 8px; padding: 0 6px; background: var(--cc-surface-3); color: var(--cc-muted); }
#cc-app .cc-uld-repair-vendor.is-x { color: #047857; background: rgba(16,163,74,0.12); }
#cc-app .cc-uld-repair-exec { margin-top: 6px; padding: 3px 10px; font-size: 11.5px; border-radius: 10px; }
#cc-app .cc-uld-repair-dir { font-weight: 700; font-size: 10.5px; border-radius: 8px; padding: 0 6px; }
#cc-app .cc-uld-repair-dir.is-airline { color: #047857; background: rgba(16,163,74,0.12); }
#cc-app .cc-uld-repair-dir.is-vendor { color: var(--cc-muted); background: var(--cc-surface-3); }
#cc-app .cc-uld-repair-lia { font-size: 10.5px; border-radius: 8px; padding: 0 6px; margin-left: 4px; }
#cc-app .cc-uld-repair-lia.is-chargeable { color: #b45309; background: rgba(217,119,6,0.12); }
#cc-app .cc-uld-repair-lia.is-fair-wear { color: var(--cc-muted); background: var(--cc-surface-3); }
/* ULD Repair Contracts editor */
#cc-app .cc-rc-wrap { overflow-x: auto; }
#cc-app table.cc-rc { border-collapse: collapse; width: 100%; font-size: 11.5px; margin-bottom: 4px; }
#cc-app .cc-rc th, #cc-app .cc-rc td { border: 1px solid var(--cc-line-2); padding: 3px 6px; text-align: center; vertical-align: middle; }
#cc-app .cc-rc th { font-size: 10.5px; color: var(--cc-muted); font-weight: 700; }
#cc-app .cc-rc td:first-child, #cc-app .cc-rc th:first-child { text-align: left; white-space: nowrap; }
#cc-app .cc-rc-n { width: 62px; text-align: right; }
#cc-app .cc-rc-t { display: inline-flex; align-items: center; gap: 2px; margin: 0 3px; font-size: 11px; }
#cc-app .cc-rc-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* GHA (ground handling agent) ULD widgets */
#cc-app .cc-gha-scope { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#cc-app .cc-gha-scope label { font-size: 12px; font-weight: 600; color: var(--cc-muted); display: inline-flex; align-items: center; gap: 6px; }
#cc-app .cc-gha-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--cc-text-2); }
#cc-app .cc-gha-kpis b { font-size: 16px; color: var(--cc-text); }
#cc-app .cc-gha-head { font-size: 13px; margin-bottom: 6px; }
#cc-app .cc-gha-head b { font-size: 16px; }
#cc-app .cc-gha-good { color: #047857; font-weight: 700; }
#cc-app .cc-gha-bad { color: #dc2626; font-weight: 700; }
#cc-app .cc-gha-dmg { color: #b45309; font-weight: 700; font-size: 10.5px; }
#cc-app table.cc-gha-stock td { text-align: center; }
#cc-app .cc-gha-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
#cc-app .cc-gha-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; border: 1px solid var(--cc-line-2); border-left: 3px solid var(--cc-line); border-radius: 8px; padding: 5px 8px; background: var(--cc-surface-2); }
#cc-app .cc-gha-row.is-ok { border-left-color: #16a34a; }
#cc-app .cc-gha-row.is-risk { border-left-color: #dc2626; }
#cc-app .cc-gha-row.is-warn { border-left-color: #d97706; }
#cc-app .cc-gha-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
#cc-app .cc-gha-chip { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; background: var(--cc-surface-3); color: var(--cc-muted); }
/* ULD Contract SLA Monitor */
#cc-app .cc-sla-chip { font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 1px 7px; margin-right: 3px; }
#cc-app .cc-sla-chip.is-ok { color: #047857; background: rgba(16,163,74,0.12); }
#cc-app .cc-sla-chip.is-at-risk { color: #b45309; background: rgba(217,119,6,0.14); }
#cc-app .cc-sla-chip.is-breach { color: #dc2626; background: rgba(220,38,38,0.12); }
#cc-app .cc-sla-chip.is-awaiting { color: #6b7280; background: rgba(107,114,128,0.12); }   /* OPEN 1f · no term entered → no verdict */
#cc-app table.cc-sla td:nth-child(6) { white-space: nowrap; }
#cc-app table.cc-sla tr.is-breach td { background: rgba(220,38,38,0.05); }
#cc-app table.cc-sla tr.is-at-risk td { background: rgba(217,119,6,0.05); }
/* UNIE P5 · fleet right-sizing + controller scorecard */
#cc-app .cc-rs-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; font-size: 12px; }
#cc-app .cc-rs-target { width: 58px; text-align: right; }
#cc-app .cc-score-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
#cc-app .cc-score-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--cc-line-2); padding: 4px 2px; font-size: 12px; }
#cc-app .cc-score-metric { color: var(--cc-text-2); }
#cc-app .cc-score-val { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#cc-app .cc-score-val b { font-size: 14px; }
#cc-app .cc-score-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--cc-muted); }
#cc-app .cc-score-dot.is-good { background: #16a34a; }
#cc-app .cc-score-dot.is-warn { background: #d97706; }
#cc-app .cc-score-dot.is-neutral { background: #94a3b8; }
#cc-app .cc-sla-edit { width: 54px; text-align: right; }
#cc-app .cc-sla-editin { font-size: 10px; color: var(--cc-muted); cursor: help; white-space: nowrap; }
/* ULD Management — widget container + filter */
#cc-app .cc-uld-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
#cc-app .cc-uld-fbtn { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 14px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--cc-muted); cursor: pointer; text-transform: capitalize; }
#cc-app .cc-uld-fbtn.is-active { background: rgba(37,99,235,0.12); color: #1d4ed8; border-color: rgba(37,99,235,0.4); }
#cc-app .cc-uld-fsearch { margin-left: auto; }
#cc-app .cc-uld-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; }
#cc-app .cc-uld-widget { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 10px; overflow: hidden; }
#cc-app .cc-uld-widget[data-cc-uld-wtype="uld-net-kpis"] { grid-column: 1 / -1; }
#cc-app .cc-uld-widget-h { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--cc-line); font-size: 12.5px; font-weight: 700; color: var(--cc-text); background: var(--cc-surface-2); }
#cc-app .cc-uld-wref { background: none; border: none; color: var(--cc-muted); cursor: pointer; font-size: 13px; }
#cc-app .cc-uld-wref:hover { color: var(--cc-accent, #2563eb); }
#cc-app .cc-uld-widget-b { padding: 11px 12px; }
#cc-app .cc-uld-kpis-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
/* D2 — per-system value/impact cards + high-value situations */
#cc-app .cc-sbx-sys-card { padding: 8px 0; border-bottom: 1px dashed var(--cc-line); }
#cc-app .cc-sbx-sys-card:last-child { border-bottom: none; }
#cc-app .cc-sbx-sys-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cc-app .cc-sbx-sys-feed { font-size: 11px; color: var(--cc-text); margin-top: 3px; }
#cc-app .cc-sbx-sys-impact { font-size: 11px; color: #92400e; margin-top: 1px; }
#cc-app .cc-sbx-sits { display: flex; flex-wrap: wrap; gap: 8px; }
#cc-app .cc-sbx-sit-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
#cc-app .cc-sbx-sit-btn:hover { border-color: var(--cc-accent, #2563eb); }
#cc-app .cc-sbx-sit-lbl { font-size: 12.5px; font-weight: 600; color: var(--cc-text); }
#cc-app .cc-sbx-sit-eur { font-size: 10.5px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: .02em; }

/* Simulated-system editable cards — clearer UX */
#cc-app .cc-sbx-howto { background: var(--cc-surface-2); border-left: 3px solid var(--cc-accent, #2563eb); border-radius: 6px; padding: 9px 12px; font-size: 12px; line-height: 1.55; color: var(--cc-text); margin-bottom: 12px; }
#cc-app .cc-sbx-simtag { font-size: 9.5px; font-weight: 700; color: #2563eb; background: rgba(37,99,235,0.12); padding: 1px 7px; border-radius: 9px; vertical-align: middle; }
#cc-app .cc-sbx-cardhelp { font-size: 11px; color: var(--cc-muted); line-height: 1.45; margin: 2px 0 8px; }
#cc-app .cc-sbx-hint { font-size: 10px; color: var(--cc-muted); margin-top: 2px; font-style: italic; }

/* A2 — crafted snapshot-entity editor */
#cc-app .cc-sbx-entity-toggle { display: block; font-size: 12px; color: var(--cc-text); margin: 10px 0 8px; cursor: pointer; line-height: 1.4; }
#cc-app .cc-sbx-entity-toggle input { margin-right: 6px; vertical-align: middle; }
#cc-app .cc-sbx-ent-h { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); font-weight: 700; margin: 12px 0 5px; }
#cc-app .cc-sbx-ent-grid4 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 6px; }
#cc-app .cc-sbx-ent-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
#cc-app .cc-sbx-ent-row { display: grid; grid-template-columns: 1.1fr .7fr .7fr .7fr .8fr .8fr 22px; gap: 4px; margin-bottom: 4px; align-items: center; }
#cc-app .cc-sbx-ent-crow { display: grid; grid-template-columns: 1fr 1fr 22px; gap: 4px; margin-bottom: 4px; align-items: center; }
#cc-app .cc-sbx-ent-row .cc-sbx-input, #cc-app .cc-sbx-ent-crow .cc-sbx-input { padding: 4px 6px; font-size: 12px; }
#cc-app .cc-sbx-ent-x { border: none; background: var(--cc-surface-3); color: var(--cc-muted); border-radius: 5px; cursor: pointer; height: 26px; font-size: 14px; line-height: 1; }
#cc-app .cc-sbx-ent-x:hover { background: rgba(220,38,38,0.14); color: #b91c1c; }
#cc-app .cc-sbx-ent-add { margin-top: 4px; font-size: 12px; padding: 4px 10px; }
#cc-app .cc-sbx-ent-rowhdr .cc-sbx-input, #cc-app .cc-sbx-ent-rowhdr { pointer-events: none; }
#cc-app .cc-sbx-ent-rowhdr span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--cc-muted); font-weight: 700; padding-left: 2px; }
#cc-app .cc-sbx-ent-tip { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); border-radius: 7px; padding: 9px 12px; font-size: 12px; line-height: 1.55; color: var(--cc-text); margin-bottom: 10px; }
#cc-app .cc-sbx-ent-ex { display: inline-block; margin-top: 7px; font-size: 11.5px; padding: 4px 10px; }

/* A4 — run-all touchpoints matrix */
#cc-app .cc-sbx-mx { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
#cc-app .cc-sbx-mx-row { display: grid; grid-template-columns: 22px 1.5fr 2fr; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--cc-line); background: var(--cc-surface-2); font-size: 12px; }
#cc-app .cc-sbx-mx-row.is-ok { border-left: 3px solid #10b981; }
#cc-app .cc-sbx-mx-row.is-reject { border-left: 3px solid #ef4444; }
#cc-app .cc-sbx-mx-v { font-weight: 800; text-align: center; }
#cc-app .cc-sbx-mx-row.is-ok .cc-sbx-mx-v { color: #047857; }
#cc-app .cc-sbx-mx-row.is-reject .cc-sbx-mx-v { color: #b91c1c; }
#cc-app .cc-sbx-mx-tp { font-weight: 600; color: var(--cc-text); }
#cc-app .cc-sbx-mx-det { color: var(--cc-muted); }

/* E2E explainability — EIE fused signals + Decision ranked table */
#cc-app .cc-e2e-extra { margin-top: 8px; }
#cc-app .cc-e2e-explain, #cc-app .cc-e2e-ranked { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 7px; padding: 8px 10px; }
#cc-app .cc-e2e-ranked { margin-top: 6px; }
#cc-app .cc-e2e-explain-h { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--cc-muted); font-weight: 700; margin-bottom: 6px; }
#cc-app .cc-e2e-sig { display: grid; grid-template-columns: 1.4fr 1.3fr 70px 34px; gap: 8px; align-items: center; font-size: 11px; padding: 2px 0; }
#cc-app .cc-e2e-sig-n { color: var(--cc-text); font-weight: 600; }
#cc-app .cc-e2e-sig-v { color: var(--cc-muted); }
#cc-app .cc-e2e-sig-bar { height: 6px; background: var(--cc-surface-3); border-radius: 4px; overflow: hidden; }
#cc-app .cc-e2e-sig-bar > span { display: block; height: 100%; background: var(--cc-accent, #2563eb); }
#cc-app .cc-e2e-sig-w { font-size: 10.5px; color: var(--cc-muted); text-align: right; }
#cc-app .cc-e2e-explain-why { margin-top: 6px; font-size: 11px; color: var(--cc-muted); font-style: italic; }
#cc-app .cc-e2e-rank { display: grid; grid-template-columns: 1.7fr 1fr 70px; gap: 8px; align-items: center; font-size: 11.5px; padding: 3px 0; }
#cc-app .cc-e2e-rank-lbl { color: var(--cc-muted); }
#cc-app .cc-e2e-rank.is-chosen .cc-e2e-rank-lbl { color: var(--cc-text); font-weight: 700; }
#cc-app .cc-e2e-rank-bar { height: 7px; background: var(--cc-surface-3); border-radius: 4px; overflow: hidden; }
#cc-app .cc-e2e-rank-bar > span { display: block; height: 100%; background: #94a3b8; }
#cc-app .cc-e2e-rank.is-chosen .cc-e2e-rank-bar > span { background: #10b981; }
#cc-app .cc-e2e-rank-eur { text-align: right; color: var(--cc-text); font-weight: 600; }

/* ═══ D7 · CONNECTION BANNER ══════════════════════════════════════════════════════════
   An operator must never have to infer from a small grey chip that the numbers in front of
   them stopped being live. When the link to the server is not healthy this states it across
   the full width of the cockpit, in wall-clock terms, and stays there until it is true again.
   Severity is carried by colour AND by wording, so it survives a monochrome screen. */
#cc-app .cc-connbar{display:flex;align-items:center;gap:10px;padding:7px 14px;font-size:12.5px;line-height:1.35;
  border-bottom:1px solid transparent;font-weight:600;position:sticky;top:0;z-index:60;}
#cc-app .cc-connbar[hidden]{display:none;}
#cc-app .cc-connbar .cc-connbar-ico{font-size:14px;flex:0 0 auto;}
#cc-app .cc-connbar .cc-connbar-msg{flex:1 1 auto;min-width:0;}
#cc-app .cc-connbar .cc-connbar-age{flex:0 0 auto;font-weight:500;opacity:.85;font-variant-numeric:tabular-nums;}
/* Reconnecting — the data is real but ageing. Amber: attention, not alarm. */
#cc-app .cc-connbar.is-degraded{color:#92400e;background:#fef3c7;border-bottom-color:#f59e0b80;}
/* Disconnected — nothing on screen is live. Red, and it says so in words. */
#cc-app .cc-connbar.is-offline{color:#7f1d1d;background:#fee2e2;border-bottom-color:#ef444480;}
/* Standalone — an explicit operator choice; the data here is generated, not observed. */
#cc-app .cc-connbar.is-local{color:#334155;background:#e2e8f0;border-bottom-color:#94a3b880;}
@media (prefers-color-scheme:dark){
  #cc-app .cc-connbar.is-degraded{color:#fde68a;background:#78350f;border-bottom-color:#f59e0b80;}
  #cc-app .cc-connbar.is-offline{color:#fecaca;background:#7f1d1d;border-bottom-color:#ef444480;}
  #cc-app .cc-connbar.is-local{color:#cbd5e1;background:#334155;border-bottom-color:#94a3b880;}
}

/* ═════ the fifteen operator screens added 2026-09-24 — routes that had no UI entry path ═════ */

/* --- uld-stock-check · Station Stock Check (SCM) --- */
/* ⛔ THE ULD-CONTROL ACTUATION FORMS (2026-09-24) — three routes that accept an operator's statement about the
   physical world and that nothing in the bundle ever called. SHARED BLOCK: the `cc-scm-*` families below are used
   by all three widgets (stock check, e-UCR handover, ODLN report) — insert this block ONCE. */
#cc-app .cc-scm, #cc-app .cc-ucrh, #cc-app .cc-odr { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
#cc-app .cc-scm-h, #cc-app .cc-ucrh-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-scm-lead { font-size: 11px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-scm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; }
#cc-app .cc-scm-f { display: flex; flex-direction: column; gap: 3px; }
#cc-app .cc-scm-f > span { font-weight: 700; color: var(--cc-text); font-size: 11.5px; }
#cc-app .cc-scm-f > i { font-style: normal; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-scm-f input, #cc-app .cc-scm-f select, #cc-app .cc-scm-f textarea {
  width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px;
  background: var(--cc-surface); color: inherit; font: inherit; font-size: 12px; }
#cc-app .cc-scm-hint { font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); padding: 3px 0; }
#cc-app .cc-scm-hint.is-warn, #cc-app .cc-scm-warn { color: var(--cc-warn, #d97706); font-weight: 700; }
#cc-app .cc-scm-rows { max-height: 260px; overflow: auto; border: 1px solid var(--cc-line); border-radius: 8px; padding: 6px 8px; }
/* the row is a DIV with the tick in its own <label>: a <select> inside a <label> can re-toggle that label's
   checkbox, which would flip a unit off the count while the counter was setting its condition. */
#cc-app .cc-scm-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px;
  padding: 4px 0; border-bottom: 1px solid var(--cc-line-2, rgba(120,120,120,.18)); }
#cc-app .cc-scm-row.is-added { background: rgba(217,119,6,.08); }
#cc-app .cc-scm-tick { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
#cc-app .cc-scm-uid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--cc-text); }
#cc-app .cc-scm-row select { padding: 3px 6px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font-size: 11px; }
#cc-app .cc-scm-rec { grid-column: 1 / -1; font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-scm-row.is-transit .cc-scm-rec { color: var(--cc-warn, #d97706); }
#cc-app .cc-scm-add { display: flex; gap: 8px; align-items: center; }
#cc-app .cc-scm-add input { flex: 1; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font-size: 12px; }
#cc-app .cc-scm-div { font-size: 11px; color: var(--cc-text-2); }
#cc-app .cc-scm-div b { color: var(--cc-text); }
#cc-app .cc-scm-full { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed var(--cc-line); border-radius: 8px; }
#cc-app .cc-scm-full label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; cursor: pointer; }
#cc-app .cc-scm-full i { font-style: normal; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-scm-out:empty { display: none; }
#cc-app .cc-scm-ok { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cc-good, #16a34a); color: var(--cc-text); font-size: 11.5px; }
#cc-app .cc-scm-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-top: 4px; }
#cc-app .cc-scm-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }

/* --- uld-ucr-handover · e-UCR Custody Handover --- */
/* ⛔ e-UCR CUSTODY HANDOVER (2026-09-24) — the write half of a ledger whose five reads were all wired.
   Depends on the shared cc-scm-* block delivered with the Station Stock Check screen. */
#cc-app .cc-ucrh-look { display: flex; gap: 8px; align-items: center; }
#cc-app .cc-ucrh-look input { flex: 1; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px;
  background: var(--cc-surface); color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
#cc-app .cc-ucrh-unit:empty { display: none; }
#cc-app .cc-ucrh-line { font-size: 11px; line-height: 1.5; color: var(--cc-text-2); padding: 3px 0;
  border-bottom: 1px solid var(--cc-line-2, rgba(120,120,120,.18)); }
#cc-app .cc-ucrh-line b { color: var(--cc-text); }
#cc-app .cc-ucrh-cond { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border: 1px dashed var(--cc-line); border-radius: 8px; }
#cc-app .cc-ucrh-cond label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; cursor: pointer; }
#cc-app .cc-ucrh-cond i { font-style: normal; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }

/* --- uld-odln-report · ODLN Damage Report --- */
/* ⛔ ODLN DAMAGE REPORT (2026-09-24) — the submit half of the app a seeded ramp-agent role had nothing to open.
   Depends on the shared cc-scm-* block delivered with the Station Stock Check screen. */
#cc-app .cc-odr-findings { display: flex; flex-direction: column; gap: 6px; }
#cc-app .cc-odr-f { display: grid; grid-template-columns: 1.2fr 1.2fr 0.8fr auto; gap: 4px 6px; align-items: center;
  padding: 6px 8px; border: 1px solid var(--cc-line); border-radius: 8px; }
#cc-app .cc-odr-f select, #cc-app .cc-odr-f input { width: 100%; box-sizing: border-box; padding: 4px 6px;
  border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 11.5px; }
#cc-app .cc-odr-note { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-odr-note.is-warn { color: var(--cc-warn, #d97706); font-weight: 700; }
#cc-app .cc-odr-note.is-zero { color: var(--cc-bad, #b91c1c); font-weight: 700; }
#cc-app .cc-odr-verdict:empty { display: none; }
#cc-app .cc-odr-v { font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 8px; }
#cc-app .cc-odr-v.is-ok { color: var(--cc-good, #16a34a); border: 1px solid var(--cc-good, #16a34a); }
#cc-app .cc-odr-v.is-uns { color: var(--cc-bad, #b91c1c); border: 1px solid var(--cc-bad, #b91c1c); }
#cc-app .cc-odr-b { font-size: 10.5px; line-height: 1.5; color: var(--cc-text-2); padding: 3px 0 3px 10px;
  border-left: 2px solid var(--cc-line); }
/* the submitted-report container is NEUTRAL: the same box carries an UNSERVICEABLE verdict, and a green
   "accepted" frame around a condemned unit is the wrong first read. The verdict block carries the colour. */
#cc-app .cc-odr-res { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--cc-line); color: var(--cc-text); font-size: 11.5px; }

/* --- uld-odln-limits · ULD Damage Limits (ODLN) --- */
/* ⛔ THE ODLN DAMAGE-LIMIT EDITOR (2026-09-24) — the CMM thresholds deciding SERVICEABLE vs UNSERVICEABLE,
   served and editable since MRO-01 with nothing in the bundle calling either verb. A muted row is a
   combination with NO limit: today every finding of that type is held for manual inspection. */
#cc-app .cc-odlim { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
#cc-app .cc-odlim-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#cc-app .cc-odlim-tab { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text-2); cursor: pointer; font-family: inherit; }
#cc-app .cc-odlim-tab:hover { border-color: var(--cc-accent); color: var(--cc-text); }
#cc-app .cc-odlim-tab.is-on { border-color: var(--cc-accent); background: var(--cc-accent); color: #fff; }
#cc-app .cc-odlim-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-odlim-h b { color: var(--cc-text); }
#cc-app .cc-odlim-comp { border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 10px; }
#cc-app .cc-odlim-comp.is-zero { border-style: dashed; border-color: var(--cc-bad, #dc2626); }
#cc-app .cc-odlim-comp-h { font-weight: 800; color: var(--cc-text); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
#cc-app .cc-odlim-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-bad, #dc2626); border: 1px solid var(--cc-bad, #dc2626); border-radius: 5px; padding: 1px 6px; }
#cc-app .cc-odlim-zero { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-odlim-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 5px 0; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-odlim-row:last-child { border-bottom: none; }
#cc-app .cc-odlim-row.is-absent { opacity: .8; }
#cc-app .cc-odlim-k { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-odlim-u { display: block; font-weight: 400; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-odlim-v { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#cc-app .cc-odlim-v input[type="number"] { width: 92px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 12px; text-align: right; }
#cc-app .cc-odlim-cos { font-size: 10px; color: var(--cc-muted); display: flex; align-items: center; gap: 4px; cursor: pointer; }
#cc-app .cc-odlim-src { font-size: 10px; color: var(--cc-muted); text-align: right; max-width: 240px; }
#cc-app .cc-odlim-src.is-cosmetic { color: var(--cc-text-2); }
#cc-app .cc-odlim-more { margin-top: 4px; }
#cc-app .cc-odlim-more > summary { font-size: 10.5px; color: var(--cc-muted); cursor: pointer; padding: 3px 0; }
#cc-app .cc-odlim-actions { display: flex; gap: 8px; }
#cc-app .cc-odlim-warn { font-size: 10.5px; line-height: 1.5; color: var(--cc-warn, #d97706); border-left: 3px solid var(--cc-warn, #d97706); padding-left: 8px; }
#cc-app .cc-odlim-warn code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
#cc-app .cc-odlim-note { font-size: 10.5px; line-height: 1.55; color: var(--cc-muted); }
#cc-app .cc-odlim-note b { color: var(--cc-text-2); }

/* --- prime-fatigue · PRIME™ · Fatigue Calibration --- */
/* ⛔ THE PRIME FATIGUE CALIBRATION EDITOR (2026-09-24) — six /prime/* routes were wired and this one, the
   editable one, was not. These constants are the DENOMINATOR of every RUL, P(damage) and value-at-risk
   figure on the fleet-health board. `.is-inert` marks a constant the route stores and no computation reads. */
#cc-app .cc-pfat { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
#cc-app .cc-pfat-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-pfat-h b { color: var(--cc-text); }
#cc-app .cc-pfat-lede { font-size: 11px; line-height: 1.5; color: var(--cc-text-2); }
#cc-app .cc-pfat-empty { font-size: 11px; line-height: 1.5; color: var(--cc-warn, #d97706); border: 1px dashed var(--cc-warn, #d97706); border-radius: 8px; padding: 8px 10px; }
#cc-app .cc-pfat-type { border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 10px; }
#cc-app .cc-pfat-type.is-new { border-style: dashed; border-color: var(--cc-accent); }
#cc-app .cc-pfat-type-h { font-weight: 800; color: var(--cc-text); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-pfat-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-accent); border: 1px solid var(--cc-accent); border-radius: 5px; padding: 1px 6px; font-family: inherit; }
#cc-app .cc-pfat-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 6px 0; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-pfat-row:last-child { border-bottom: none; }
#cc-app .cc-pfat-row.is-inert { opacity: .78; }
#cc-app .cc-pfat-k { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-pfat-u { display: block; font-weight: 400; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-pfat-v { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#cc-app .cc-pfat-v input[type="number"] { width: 104px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 12px; text-align: right; }
#cc-app .cc-pfat-src { font-size: 10px; color: var(--cc-muted); text-align: right; max-width: 220px; }
#cc-app .cc-pfat-why { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-pfat-add { display: flex; gap: 8px; align-items: center; }
#cc-app .cc-pfat-add input[type="text"] { width: 120px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 12px; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-pfat-actions { display: flex; gap: 8px; }
#cc-app .cc-pfat-warn { font-size: 10.5px; line-height: 1.5; color: var(--cc-warn, #d97706); border-left: 3px solid var(--cc-warn, #d97706); padding-left: 8px; }
#cc-app .cc-pfat-warn code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
#cc-app .cc-pfat-note { font-size: 10.5px; line-height: 1.55; color: var(--cc-muted); }
#cc-app .cc-pfat-note b { color: var(--cc-text-2); }

/* --- equipment-catalogue · Equipment Specifications --- */
#cc-app .cc-eqc { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
#cc-app .cc-eqc-load { font-size: 11.5px; color: var(--cc-muted); padding: 6px 0; }
#cc-app .cc-eqc-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-eqc-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-eqc-foot { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-top: 4px; border-top: 1px solid var(--cc-line); padding-top: 6px; }
#cc-app .cc-eqc-foot code { font-family: ui-monospace, monospace; }
#cc-app .cc-eqc-stale { font-size: 10.5px; line-height: 1.5; color: var(--cc-warn, #d97706); border: 1px solid var(--cc-warn, #d97706); border-radius: 7px; padding: 6px 8px; }
#cc-app .cc-eqc-stale code { font-family: ui-monospace, monospace; }
#cc-app .cc-eqc-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#cc-app .cc-eqc-tab { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text-2); cursor: pointer; }
#cc-app .cc-eqc-tab.is-on { background: var(--cc-surface-2); color: var(--cc-text); border-color: var(--cc-accent); }
#cc-app .cc-eqc-q { flex: 1 1 150px; min-width: 110px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 11.5px; }
#cc-app .cc-eqc-list { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
#cc-app .cc-eqc-row { display: grid; grid-template-columns: 66px 1fr; gap: 2px 8px; text-align: left; width: 100%; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--cc-line); background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
#cc-app .cc-eqc-row:hover, #cc-app .cc-eqc-row.is-open { background: var(--cc-surface-2); }
#cc-app .cc-eqc-code { font-weight: 800; font-family: ui-monospace, monospace; }
#cc-app .cc-eqc-name { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-eqc-fig { grid-column: 2; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-eqc-src { grid-column: 2; font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-eqc-src.is-yours { color: var(--cc-good, #16a34a); font-weight: 700; }
#cc-app .cc-eqc-ed { border-left: 2px solid var(--cc-accent); padding: 9px 0 11px 10px; margin: 0 0 6px 4px; display: flex; flex-direction: column; gap: 9px; }
#cc-app .cc-eqc-edh { font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-eqc-f { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding-bottom: 7px; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-eqc-fk { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-eqc-fu { display: block; font-weight: 400; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-eqc-fv { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#cc-app .cc-eqc-fv input { width: 112px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 12px; text-align: right; }
#cc-app .cc-eqc-cur { font-size: 10px; color: var(--cc-muted); text-align: right; }
#cc-app .cc-eqc-fw { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-eqc-refs { font-size: 10px; line-height: 1.5; color: var(--cc-muted); font-family: ui-monospace, monospace; word-break: break-word; }
#cc-app .cc-eqc-warn { font-size: 10.5px; line-height: 1.5; color: var(--cc-warn, #b45309); border: 1px solid var(--cc-warn, #d97706); border-radius: 7px; padding: 6px 8px; }
#cc-app .cc-eqc-actions { display: flex; gap: 8px; }
#cc-app .cc-eqc-std { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }

/* --- partner-entitlements · Partner Access & Entitlements --- */
#cc-app .cc-ent { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
#cc-app .cc-ent-load { font-size: 11.5px; color: var(--cc-muted); padding: 6px 0; }
#cc-app .cc-ent-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-ent-warn { font-size: 11px; line-height: 1.5; color: var(--cc-warn, #b45309); border: 1px solid var(--cc-warn, #d97706); border-radius: 7px; padding: 7px 9px; }
#cc-app .cc-ent-foot { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-top: 4px; border-top: 1px solid var(--cc-line); padding-top: 6px; }
#cc-app .cc-ent-foot code { font-family: ui-monospace, monospace; }
#cc-app .cc-ent-list { display: flex; flex-direction: column; max-height: 220px; overflow: auto; }
#cc-app .cc-ent-row { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 2px 8px; padding: 6px 2px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-ent-row.is-all { background: color-mix(in srgb, var(--cc-warn, #d97706) 9%, transparent); }
#cc-app .cc-ent-p { font-weight: 700; font-family: ui-monospace, monospace; color: var(--cc-text); word-break: break-all; }
#cc-app .cc-ent-arrow { font-size: 10px; color: var(--cc-muted); text-transform: uppercase; letter-spacing: .04em; }
#cc-app .cc-ent-t { font-weight: 800; color: var(--cc-text); }
#cc-app .cc-ent-id { font-size: 10px; color: var(--cc-muted); font-family: ui-monospace, monospace; }
#cc-app .cc-ent-prow { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 6px 2px; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-ent-pn { font-weight: 600; color: var(--cc-text); }
#cc-app .cc-ent-pp, #cc-app .cc-ent-pt { grid-column: 1 / -1; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-ent-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#cc-app .cc-ent-form input, #cc-app .cc-ent-form select { flex: 1 1 160px; min-width: 130px; padding: 6px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 11.5px; }
#cc-app .cc-ent-form.is-wide input, #cc-app .cc-ent-form.is-wide select { flex: 1 1 100%; }
#cc-app .cc-ent-form .cc-cutoffdec-btn { flex: 0 0 auto; }

/* --- uld-tag-device-map · ULD Tag Device Registry --- */
#cc-app .cc-tdm { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
#cc-app .cc-tdm-load { font-size: 11.5px; color: var(--cc-muted); padding: 6px 0; }
#cc-app .cc-tdm-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-tdm-state { font-size: 11px; line-height: 1.5; border-radius: 7px; padding: 7px 9px; border: 1px solid var(--cc-line); color: var(--cc-text-2); }
#cc-app .cc-tdm-state.is-live { border-color: var(--cc-good, #16a34a); color: var(--cc-good, #16a34a); }
#cc-app .cc-tdm-state.is-awaiting { border-color: var(--cc-warn, #d97706); color: var(--cc-warn, #b45309); }
#cc-app .cc-tdm-err { font-size: 10.5px; line-height: 1.45; color: var(--cc-warn, #b45309); }
#cc-app .cc-tdm-gap, #cc-app .cc-tdm-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-tdm-gap code, #cc-app .cc-tdm-note code { font-family: ui-monospace, monospace; }
#cc-app .cc-tdm-ta { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--cc-line); border-radius: 7px; background: var(--cc-bg, #fff); color: inherit; font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.5; resize: vertical; }
#cc-app .cc-tdm-actions { display: flex; gap: 8px; }

/* --- command-governance · Autonomy & Command Approvals --- */
#cc-app .cc-cmdgov { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
#cc-app .cc-cmdgov-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--cc-line); padding-bottom: 7px; }
#cc-app .cc-cmdgov-tab { padding: 5px 10px; border: 1px solid var(--cc-line); border-radius: 999px; background: transparent; color: var(--cc-muted); font-size: 11px; font-weight: 700; cursor: pointer; }
#cc-app .cc-cmdgov-tab b { font-weight: 800; }
#cc-app .cc-cmdgov-tab.is-on { background: var(--cc-text, #0f172a); border-color: var(--cc-text, #0f172a); color: var(--cc-surface, #fff); }
#cc-app .cc-cmdgov-bound { font-size: 10px; color: var(--cc-muted); font-family: ui-monospace, monospace; }
#cc-app .cc-cmdgov-sub { font-size: 11px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-cmdgov-warnbar { font-size: 11px; line-height: 1.55; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--cc-warn, #d97706); background: rgba(217, 119, 6, .08); color: var(--cc-text); }
#cc-app .cc-cmdgov-head { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); margin-top: 4px; }
#cc-app .cc-cmdgov-empty { font-size: 11.5px; line-height: 1.55; color: var(--cc-muted); padding: 10px 0; }
#cc-app .cc-cmdgov-err { font-size: 11.5px; line-height: 1.5; color: var(--cc-warn, #d97706); padding: 8px 0; }
#cc-app .cc-cmdgov-cmd { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface, #fff); }
#cc-app .cc-cmdgov-cmd.is-gated { border-left: 3px solid var(--cc-warn, #d97706); }
#cc-app .cc-cmdgov-verb { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 800; font-size: 12.5px; color: var(--cc-text); font-family: ui-monospace, monospace; }
#cc-app .cc-cmdgov-cap { font-family: inherit; font-size: 10px; font-weight: 400; color: var(--cc-muted); }
#cc-app .cc-cmdgov-status { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--cc-muted); text-transform: uppercase; letter-spacing: .03em; }
#cc-app .cc-cmdgov-meta { display: flex; flex-direction: column; gap: 4px; }
#cc-app .cc-cmdgov-meta > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#cc-app .cc-cmdgov-meta em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cc-muted); min-width: 132px; }
#cc-app .cc-cmdgov-kv { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 6px; border-radius: 5px; background: var(--cc-bg, #f8fafc); font-size: 11px; color: var(--cc-text); }
#cc-app .cc-cmdgov-kv i { font-style: normal; font-size: 9.5px; color: var(--cc-muted); }
#cc-app .cc-cmdgov-kv.is-none { background: transparent; padding: 0; color: var(--cc-muted); font-size: 10.5px; line-height: 1.45; }
#cc-app .cc-cmdgov-kv.is-none i { font-style: italic; font-size: inherit; color: inherit; }
#cc-app .cc-cmdgov-kv.is-id { font-family: ui-monospace, monospace; font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-cmdgov-why { font-size: 11px; line-height: 1.5; color: var(--cc-warn, #d97706); }
#cc-app .cc-cmdgov-arm { font-size: 11.5px; line-height: 1.55; padding: 9px 10px; border-radius: 7px; border: 1px solid var(--cc-line); }
#cc-app .cc-cmdgov-arm.is-go { border-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
#cc-app .cc-cmdgov-arm.is-no { border-color: var(--cc-muted); background: var(--cc-bg, #f8fafc); }
#cc-app .cc-cmdgov-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
#cc-app .cc-cmdgov-btn { padding: 5px 11px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface, #fff); color: var(--cc-text); font-size: 11.5px; font-weight: 700; cursor: pointer; }
#cc-app .cc-cmdgov-btn:disabled { opacity: .55; cursor: default; }
#cc-app .cc-cmdgov-btn.is-go { border-color: #16a34a; color: #15803d; }
#cc-app .cc-cmdgov-btn.is-no { border-color: #dc2626; color: #b91c1c; }
#cc-app .cc-cmdgov-sel { padding: 5px 7px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 11.5px; }
#cc-app .cc-cmdgov-pol { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-cmdgov-pol.is-on { border-left: 3px solid var(--cc-good, #16a34a); padding-left: 8px; }
#cc-app .cc-cmdgov-pol.is-void { opacity: .82; }
#cc-app .cc-cmdgov-pol.is-void.is-on { border-left-color: var(--cc-warn, #d97706); opacity: 1; }
#cc-app .cc-cmdgov-pollab { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; cursor: pointer; }
#cc-app .cc-cmdgov-pollab b { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-cmdgov-code { font-family: ui-monospace, monospace; font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-cmdgov-polctl { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
#cc-app .cc-cmdgov-polwhy { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-cmdgov-polwhy i { font-style: italic; }
#cc-app .cc-cmdgov-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cc-line); font-size: 10.5px; line-height: 1.55; color: var(--cc-muted); }
#cc-app .cc-cmdgov-note ul { margin: 5px 0 0; padding-left: 16px; }
#cc-app .cc-cmdgov-note li { margin-bottom: 5px; }
#cc-app .cc-cmdgov-note code { font-family: ui-monospace, monospace; font-size: 10px; }

/* --- handling-agreement · Handling Agreement · SGHA Annex B --- */
#cc-app .cc-hga { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
#cc-app .cc-hga-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); margin-top: 4px; }
#cc-app .cc-hga-scope { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
#cc-app .cc-hga-scope label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-hga-scope select, #cc-app .cc-hga-scope input { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: var(--cc-text); font-size: 12px; }
#cc-app .cc-hga-scope button { align-self: flex-end; }
#cc-app .cc-hga-cov { font-size: 12px; color: var(--cc-text); }
#cc-app .cc-hga-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-hga-svc { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-hga-ref { display: block; font-weight: 400; font-size: 10px; line-height: 1.4; color: var(--cc-muted); }
#cc-app .cc-hga-ans { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#cc-app .cc-hga-actor { font-weight: 800; color: var(--cc-text); }
#cc-app .cc-hga-actor.is-none { font-weight: 600; font-style: italic; color: var(--cc-muted); }
#cc-app .cc-hga-basis { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--cc-line); color: var(--cc-muted); }
#cc-app .cc-hga-basis.is-measured { color: var(--cc-good, #16a34a); border-color: var(--cc-good, #16a34a); }
#cc-app .cc-hga-basis.is-derived { color: var(--cc-accent, #2563eb); border-color: var(--cc-accent, #2563eb); }
#cc-app .cc-hga-basis.is-awaiting { color: var(--cc-warn, #d97706); border-color: var(--cc-warn, #d97706); }
#cc-app .cc-hga-decides, #cc-app .cc-hga-say, #cc-app .cc-hga-terms { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
#cc-app .cc-hga-needs { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-warn, #d97706); }
#cc-app .cc-hga-act { grid-column: 1 / -1; margin-top: 2px; }
#cc-app .cc-hga-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#cc-app .cc-hga-form label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-hga-form input, #cc-app .cc-hga-form select { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: var(--cc-text); font-size: 12px; }
#cc-app .cc-hga-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#cc-app .cc-hga-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: auto; }
#cc-app .cc-hga-lrow { padding: 4px 0; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-hga-gap { font-size: 11px; line-height: 1.5; color: var(--cc-warn, #d97706); }
#cc-app .cc-hga-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-hga-note code { font-family: ui-monospace, monospace; font-size: 10px; }

/* --- case-verify · Case Verification · MOP R.4 --- */
/* ⛔ CASE VERIFICATION (2026-09-24) — the MOP R.4 queue that had no reader. A case here has been acted on and
   nobody has said whether it held; the row shows whose subject it is and what it is worth before it is closed.
   `.cc-cfg-held` is SHARED by the five cards in this batch and is defined once, here. */
#cc-app .cc-cfg-held { font-size: 10.5px; line-height: 1.5; color: var(--cc-warn, #d97706); border-left: 2px solid var(--cc-warn, #d97706); padding-left: 8px; margin-bottom: 8px; }
#cc-app .cc-cvfy-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 4px; }
#cc-app .cc-cvfy-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-bottom: 10px; }
#cc-app .cc-cvfy-row { display: flex; flex-direction: column; gap: 5px; padding: 9px 0; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-cvfy-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#cc-app .cc-cvfy-type { font-weight: 700; font-size: 12.5px; color: var(--cc-text); }
#cc-app .cc-cvfy-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--cc-line); color: var(--cc-muted); }
#cc-app .cc-cvfy-sev.is-high, #cc-app .cc-cvfy-sev.is-critical { color: var(--cc-bad); border-color: var(--cc-bad); }
#cc-app .cc-cvfy-eur { margin-left: auto; font-weight: 700; font-size: 12px; color: var(--cc-text-2); }
#cc-app .cc-cvfy-ent { font-size: 12px; color: var(--cc-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
#cc-app .cc-cvfy-meta { font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-cvfy-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-cvfy-note-in { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 12px; resize: vertical; }
#cc-app .cc-cvfy-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- case-transition · Case Status & Audit --- */
/* ⛔ CASE STATUS & AUDIT (2026-09-24) — the spine's third writer finally has a surface. The `now` chip shows the
   state a case is being moved FROM, because a transition is only readable as a pair. No reason box: the spine's
   transition entry has no field to put one in, and this card says so rather than swallowing the text. */
#cc-app .cc-ctrn-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 4px; }
#cc-app .cc-ctrn-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-bottom: 6px; }
#cc-app .cc-ctrn-absent { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-bottom: 10px; }
#cc-app .cc-ctrn-absent code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-ctrn-row { display: flex; flex-direction: column; gap: 5px; padding: 9px 0; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-ctrn-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#cc-app .cc-ctrn-type { font-weight: 700; font-size: 12.5px; color: var(--cc-text); }
#cc-app .cc-ctrn-now { font-size: 10.5px; color: var(--cc-muted); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--cc-line); }
#cc-app .cc-ctrn-eur { margin-left: auto; font-weight: 700; font-size: 12px; color: var(--cc-text-2); }
#cc-app .cc-ctrn-ent { font-size: 11.5px; color: var(--cc-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
#cc-app .cc-ctrn-id { color: var(--cc-muted); }
#cc-app .cc-ctrn-ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#cc-app .cc-ctrn-ctl select { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 11.5px; flex: 1 1 220px; min-width: 160px; }

/* --- uld-buildup · ULD Build-up Plan --- */
/* ⛔ ULD BUILD-UP PLAN (2026-09-24) — the optimiser's plan and its commit, both served and both unreachable. The
   cube fill is DELIBERATELY blank where a waybill on the unit declares no volume: the server withholds it rather
   than publishing a low figure, because an under-stated fill reads as spare capacity and spare capacity gets sold. */
#cc-app .cc-bup { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
#cc-app .cc-bup-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cc-app .cc-bup-lbl { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-bup-bar select { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 12px; }
#cc-app .cc-bup-kpis { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--cc-text-2); padding-bottom: 6px; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-bup-warn { font-size: 11px; line-height: 1.5; color: var(--cc-warn, #d97706); border-left: 2px solid var(--cc-warn, #d97706); padding-left: 8px; margin: 6px 0; }
#cc-app .cc-bup-asg { padding: 7px 0; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-bup-asg-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--cc-text); }
#cc-app .cc-bup-fill { margin-left: auto; font-size: 11px; color: var(--cc-muted); }
#cc-app .cc-bup-nocube { color: var(--cc-warn, #d97706); cursor: help; }
#cc-app .cc-bup-asg-awbs { font-size: 11px; color: var(--cc-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
#cc-app .cc-bup-dg { font-size: 10.5px; font-weight: 700; color: var(--cc-bad); margin-top: 2px; }
#cc-app .cc-bup-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-top: 4px; }
#cc-app .cc-bup-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: 8px; }
#cc-app .cc-bup-execnote { font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }

/* --- uld-forecast-outcome · Forecast Outcome Capture --- */
/* ⛔ FORECAST OUTCOME CAPTURE (2026-09-24) — the write that turns "UNIE accuracy" from a claim into a measurement
   a person made. Both figures are typed: the prediction is carried on the row as the platform's, the count is the
   operator's, and neither is pre-filled with a zero the route would have accepted as a label. */
#cc-app .cc-fcout-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 4px; }
#cc-app .cc-fcout-acc { font-size: 12px; color: var(--cc-text-2); margin-bottom: 4px; }
#cc-app .cc-fcout-needs { font-size: 10.5px; line-height: 1.45; color: var(--cc-warn, #d97706); }
#cc-app .cc-fcout-note { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-bottom: 6px; }
#cc-app .cc-fcout-absent { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-bottom: 10px; }
#cc-app .cc-fcout-absent code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-fcout-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--cc-line); }
#cc-app .cc-fcout-cell { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--cc-text); }
#cc-app .cc-fcout-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--cc-muted); }
#cc-app .cc-fcout-kind.is-deficit { color: var(--cc-bad); }
#cc-app .cc-fcout-kind.is-surplus { color: var(--cc-good, #16a34a); }
#cc-app .cc-fcout-pred { font-size: 11px; color: var(--cc-muted); }
#cc-app .cc-fcout-in { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#cc-app .cc-fcout-in label { font-size: 10.5px; color: var(--cc-muted); }
#cc-app .cc-fcout-in input, #cc-app .cc-fcout-in select { width: 128px; padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 12px; }
#cc-app .cc-fcout-free { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--cc-line); }

/* --- recovery-outcome · Recovery Outcome Log --- */
/* ⛔ RECOVERY OUTCOME LOG (2026-09-24) — the operator-observed label for the ε-greedy recovery learner. The €
   box is hidden unless the outcome succeeded, because the server totals euros over successes only and a zero sent
   for a failure would read as a measured nil recovery. The kind/lane boxes carry `data-cc-cfg-kept`: they are
   selectors restored on every repaint, not unsent work, so they must not pause the card's refresh. */
#cc-app .cc-rvout { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
#cc-app .cc-rvout-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#cc-app .cc-rvout-bar input { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 12px; min-width: 130px; }
#cc-app .cc-rvout-absent { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); }
#cc-app .cc-rvout-absent code, #cc-app .cc-rvout-why code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cc-app .cc-rvout-h { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-muted); margin: 6px 0 4px; }
#cc-app .cc-rvout-p { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px dotted var(--cc-line); }
#cc-app .cc-rvout-pname { font-weight: 700; color: var(--cc-text); }
#cc-app .cc-rvout-pn { text-align: right; font-size: 11px; color: var(--cc-muted); }
#cc-app .cc-rvout-peur { grid-column: 1 / -1; font-size: 11px; color: var(--cc-text-2); }
#cc-app .cc-rvout-tag { margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--cc-line); color: var(--cc-muted); }
#cc-app .cc-rvout-tag.is-champ { color: var(--cc-good, #16a34a); border-color: var(--cc-good, #16a34a); }
#cc-app .cc-rvout-tag.is-chal { color: var(--cc-accent); border-color: var(--cc-accent); }
#cc-app .cc-rvout-promote { font-size: 11px; line-height: 1.5; color: var(--cc-accent); margin-top: 6px; }
#cc-app .cc-rvout-form { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--cc-line); }
#cc-app .cc-rvout-in { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#cc-app .cc-rvout-in input, #cc-app .cc-rvout-in select { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-surface); color: inherit; font: inherit; font-size: 12px; min-width: 130px; }
#cc-app .cc-rvout-in input[hidden] { display: none; }
#cc-app .cc-rvout-why { font-size: 10.5px; line-height: 1.5; color: var(--cc-muted); margin-top: 6px; }

/* --- irops disruption-scope card, rebuilt 2026-09-24 (its Save could never succeed) --- */
/* ⛔ THE IROPs CASE-SCOPE CARD (repaired 2026-09-24). The card existed and saved to a route the server retired on
   2026-09-22, so its Save button could only ever fail; it now writes the two terms to the carrier's own registry
   row. The styles replace the inline cssText the card used to set on itself, and mark WHOSE each term is: a
   platform default is grey, a term the operator stated is green — the same reading as .cc-ubp-src.
   The card no longer carries .cc-airline-detail-section: that class matches NOTHING anywhere in
   thin-client/assets/css/connectedcargo.css (verified 2026-09-24), so it styled nothing and only looked as though
   it did. Every class this card renders is defined below. */
#cc-app .cc-iscope { margin-top: 12px; padding: 12px; border: 1px solid var(--cc-line); border-radius: 10px; background: var(--cc-surface-2); display: flex; flex-direction: column; gap: 8px; }
#cc-app .cc-iscope-h { font-size: 13px; font-weight: 700; color: var(--cc-text); }
#cc-app .cc-iscope-code { opacity: .7; font-weight: 600; }
#cc-app .cc-iscope-sub { font-size: 11.5px; line-height: 1.5; color: var(--cc-text-2, var(--cc-muted)); }
#cc-app .cc-iscope-warn { font-size: 11px; line-height: 1.5; color: var(--cc-warn, #d97706); border-left: 3px solid var(--cc-warn, #d97706); padding: 4px 0 4px 8px; }
#cc-app .cc-iscope-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
#cc-app .cc-iscope-field { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
#cc-app .cc-iscope-field[hidden] { display: none; }
#cc-app .cc-iscope-lbl { font-size: 11px; font-weight: 600; color: var(--cc-text-2, var(--cc-muted)); }
#cc-app .cc-iscope-field select,
#cc-app .cc-iscope-field input { padding: 5px 8px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-bg, #fff); color: inherit; font-size: 12.5px; font-family: inherit; min-width: 150px; }
#cc-app .cc-iscope-src { font-size: 10px; color: var(--cc-muted); }
#cc-app .cc-iscope-src.is-authored { color: var(--cc-good, #16a34a); font-weight: 700; }
#cc-app .cc-iscope-why { font-size: 11px; line-height: 1.5; font-style: italic; color: var(--cc-muted); }
#cc-app .cc-iscope-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
#cc-app .cc-iscope-btn { font-size: 12px; font-family: inherit; border: 1px solid var(--cc-line); color: var(--cc-text); background: transparent; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
#cc-app .cc-iscope-btn.is-primary { border-color: var(--cc-accent); color: var(--cc-accent); font-weight: 600; }
#cc-app .cc-iscope-btn:hover:not([disabled]) { background: var(--cc-surface, rgba(120, 120, 120, .10)); }
#cc-app .cc-iscope-btn[disabled] { opacity: .5; cursor: default; }
#cc-app .cc-iscope-note { font-size: 10.5px; line-height: 1.55; color: var(--cc-muted); }
#cc-app .cc-iscope-note b { color: var(--cc-text); font-weight: 700; }
#cc-app .cc-iscope-where { font-size: 10px; line-height: 1.5; color: var(--cc-muted); font-family: ui-monospace, monospace; border-top: 1px dotted var(--cc-line); padding-top: 6px; }

/* --- the day-of-week demand shape row on the ULD balance policy editor (2026-09-24) --- */
#cc-app .cc-ubp-row-dow .cc-ubp-v { flex-wrap: wrap; align-items: flex-end; gap: 6px; }
#cc-app .cc-ubp-dow { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
#cc-app .cc-ubp-dowcell { display: flex; flex-direction: column; gap: 2px; width: 52px; }
#cc-app .cc-ubp-dowcell > span { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--cc-muted); text-transform: uppercase; }
#cc-app .cc-ubp-dowcell > input { width: 100%; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
#cc-app .cc-ubp-row-dow .cc-ubp-src { flex-basis: 100%; }

/* --- the detector PARAMETERS an operator states, in the Exception Catalog editor (2026-09-24) ---
   The editor had no params surface at all, so an authored rule ran on the detector's own terms. */
#cc-app .cc-exc-params { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
#cc-app .cc-exc-param {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 200px);
  gap: 4px 12px; align-items: start;
  padding: 8px 10px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 8px;
}
#cc-app .cc-exc-param.is-unset { border-style: dashed; }
#cc-app .cc-exc-param-k { font-size: 12px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
#cc-app .cc-exc-param-u { font-size: 10.5px; font-weight: 400; color: var(--cc-muted); }
#cc-app .cc-exc-param-key { font-size: 10px; font-weight: 400; opacity: .55; }
#cc-app .cc-exc-param-v { justify-self: stretch; }
#cc-app .cc-exc-param-v > input, #cc-app .cc-exc-param-v > select { width: 100%; box-sizing: border-box; }
#cc-app .cc-exc-param-why { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--cc-muted); }
@media (max-width: 720px) { #cc-app .cc-exc-param { grid-template-columns: 1fr; } }

/* --- the SGHA Article 8 liability cap carries its own unit (2026-09-24): the amount and the unit the
   agreement states, side by side. Nothing is converted — a converted cap is not the number that was signed. */
#cc-app .cc-rc-cap { white-space: nowrap; }
#cc-app .cc-rc-cap > .cc-rc-n { width: 82px; }
#cc-app .cc-rc-capu { width: 64px; margin-left: 4px; }

/* --- ⛔ `.cc-btn-secondary` HAD NO RULE ANYWHERE (2026-09-24) --- 
   Thirty-five buttons across the app are written `class="cc-btn cc-btn-secondary"` — "Clone to customise",
   "+ Condition", "Test against recent signals", the ODLN and scope-card actions — and every one of them
   rendered identically to a plain `.cc-btn`. `.cc-btn-primary` and `.cc-btn-danger` are each defined in the
   five panes that define `.cc-btn`; the secondary modifier was simply never written, so the one visual cue
   separating "the action you probably want" from "the alternative" was absent on every screen that uses it.
   Scoped to `#cc-app` (id + class) so the five pane-scoped `.cc-btn` rules, which are more specific, keep
   winning for the base look; this only adds the modifier they were all missing. */
#cc-app .cc-btn-secondary {
  background: transparent;
  border-color: color-mix(in srgb, var(--cc-air-border, #94a3b8) 70%, transparent);
  color: var(--cc-muted, #64748b);
  font-weight: 500;
}
#cc-app .cc-btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cc-air-border, #94a3b8) 14%, transparent);
  color: var(--cc-air-text, inherit);
}
#cc-app .cc-btn-secondary:disabled { opacity: .5; cursor: default; }

/* --- the ULD balance board says why its tiles are grey (2026-09-24) ---
   An unconfigured network renders every cell `not-stated`. The tiles are honest; an unexplained grey
   board is not — it reads as a broken product. This is the sentence that makes the absence legible. */
#cc-app .cc-uld-board-notice {
  font-size: 11.5px; line-height: 1.55; margin: 0 0 8px; padding: 9px 11px; border-radius: 8px;
  border: 1px dashed var(--cc-line); background: color-mix(in srgb, var(--cc-muted, #64748b) 7%, transparent);
  color: var(--cc-text, inherit);
}
#cc-app .cc-uld-board-notice b { font-weight: 700; }