/* ============================================================
   Smart Table v3 — clean, focused, Linear/Stripe-like
   Default state: ONLY data. Features in dropdowns/drawer.
   ============================================================ */

/* Reset some inherited styles */
.st2 * { box-sizing: border-box; }

.st2 {
  padding: 32px 36px 120px;
  font-size: 13px;
  color: var(--fg-1);
  min-height: 100%;
}

/* ───────────── HEADER ───────────── */
.st2-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 24px;
}
.st2-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.st2-meta {
  margin-top: 8px;
  display: flex; gap: 16px;
  font-size: 13px; color: var(--fg-3);
}
.st2-meta strong { color: var(--fg-1); font-weight: 600; }
.st2-meta-warn { color: #8C5C00; }
.st2-meta-err  { color: #A1242E; }
.st2-meta-warn .st2-meta-dot { background: #F5A623; }
.st2-meta-err  .st2-meta-dot { background: var(--sorp-red); }
.st2-meta-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
}

.st2-header-right { display: flex; gap: 8px; }

.st2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-1); cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.st2-btn:hover { background: var(--bg-surface-alt); }
.st2-btn.primary {
  background: var(--sorp-ink); color: white; border-color: var(--sorp-ink);
}
.st2-btn.primary:hover { background: #2A2F3A; }
.st2-btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.st2-btn.ghost:hover { background: var(--bg-surface-alt); color: var(--fg-1); }

/* ───────────── TOOLBAR ───────────── */
.st2-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.st2-tool-wrap { position: relative; }
.st2-tool {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-2); cursor: pointer;
}
.st2-tool:hover { background: var(--bg-surface-alt); color: var(--fg-1); }
.st2-tool.active {
  background: var(--sorp-red-wash);
  color: var(--sorp-red-deep);
}
.st2-tool-count {
  background: var(--sorp-red); color: white;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1.3;
  margin-left: 2px;
}
.st2-toolbar-grow { flex: 1; }

/* Menu (dropdown) */
.st2-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 200px;
  z-index: 50;
}
.st2-menu-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3);
  padding: 6px 10px 8px;
}
.st2-menu-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px;
  color: var(--fg-1);
  border-radius: 5px;
  text-align: left;
}
.st2-menu-row:hover { background: var(--bg-surface-alt); }
.st2-menu-row.active { background: var(--sorp-red-wash); color: var(--sorp-red-deep); }
.st2-menu-row.toggle { gap: 10px; }
.st2-menu-row.toggle input { margin: 0; }
.st2-menu-row.add { color: var(--sorp-red); }
.st2-menu-row > span { flex: 1; }
.st2-menu-sep {
  border-top: 1px solid var(--border-subtle);
  margin: 6px 0;
}

/* Search */
.st2-search {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  width: 240px;
}
.st2-search input {
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 13px;
  flex: 1; min-width: 0;
}
.st2-search input::placeholder { color: var(--fg-3); }

/* ───────────── GRID ───────────── */
.st2-grid {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
}
.st2-grid table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.st2-grid thead th {
  background: white;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  padding: 12px 16px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.st2-grid thead th:first-child { padding: 12px 12px; }
.st2-grid thead th:last-child  { padding: 12px 12px; }

.st2-row {
  cursor: pointer;
  transition: background 80ms;
}
.st2-row td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 16px;
  vertical-align: middle;
  height: 60px;
  position: relative;
}
.st2-row:last-child td { border-bottom: 0; }
.st2-row:hover td { background: #FBF8F2; }
.st2-row.selected td { background: #FFF6E5 !important; }
.st2-row.active td   { background: #FAF4FF !important; }
.st2-row.has-error td {
  /* keep clean — error indicator only on the specific cell */
}

.st2-td-check { padding: 0 12px !important; width: 40px; }
.st2-td-check input { cursor: pointer; }

.st2-td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st2-td.edited::before,
.st2-td.error::before {
  content: ''; position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
}
.st2-td.edited::before { background: #F5A623; }
.st2-td.error::before  { background: var(--sorp-red); }
.st2-td.error { background: rgba(214, 61, 74, 0.04); }

.st2-cell {
  display: inline-flex; align-items: center;
  gap: 8px;
  max-width: 100%;
}

.st2-input {
  width: 100%;
  border: 2px solid var(--sorp-red);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: inherit; font-size: 13px;
  outline: none;
  background: white;
  box-shadow: 0 0 0 3px rgba(214,61,74,0.12);
}

.st2-muted { color: var(--fg-3); font-style: italic; font-size: 12px; }
.st2-money { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Source dot (only when toggle ON) */
.st2-src {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: help;
}

/* Status — dot + label, NOT pill */
.st2-status {
  display: inline-flex; align-items: center; gap: 8px;
}
.st2-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.st2-status-label {
  font-weight: 500;
}

/* Linked record */
.st2-linked {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
}
.st2-linked-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st2-linked-open {
  background: transparent; border: 0; cursor: pointer;
  padding: 2px; color: var(--fg-3);
  opacity: 0; transition: opacity 100ms;
  margin-left: auto;
  flex-shrink: 0;
}
.st2-row:hover .st2-linked-open { opacity: 1; }
.st2-linked-open:hover { color: var(--sorp-red); }

/* Date */
.st2-date {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.st2-date-rel {
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: var(--neutral-100); color: var(--fg-2);
}
.st2-date.overdue .st2-date-rel { background: #FDE4E7; color: #A1242E; }
.st2-date.soon .st2-date-rel    { background: #FFF4DA; color: #8C5C00; }

/* Person */
.st2-person {
  display: inline-flex; align-items: center; gap: 8px;
}

/* AI-fill in empty cell */
.st2-ai {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #F5EEFF, #EAE3FC);
  border: 1px dashed #6E45E2;
  border-radius: 999px;
  color: #4A2BA8; font-style: italic; font-size: 12px;
}
.st2-ai-yes, .st2-ai-no {
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 0 3px; line-height: 1;
}
.st2-ai-yes { color: #2F7D5B; }
.st2-ai-no  { color: var(--fg-3); }

/* Sanctions icon */
.st2-sanc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  cursor: help;
}
.st2-sanc.clean { background: #E1F2E9; color: #1E5E40; }
.st2-sanc.flag  { background: #FDE4E7; color: #A1242E; }

/* Files */
.st2-files { display: inline-flex; gap: 4px; align-items: center; }
.st2-file {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px; color: var(--fg-2);
}
.st2-file-more { font-size: 11px; color: var(--fg-3); font-weight: 600; }

/* Row actions */
.st2-td-actions {
  padding: 0 12px !important;
  width: 40px;
  text-align: right;
}
.st2-row-act {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-surface-alt);
  color: var(--fg-2);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  opacity: 0; transition: opacity 100ms;
}
.st2-row:hover .st2-row-act { opacity: 1; }
.st2-row-act:hover { background: var(--sorp-red-wash); color: var(--sorp-red); }

/* Add row */
.st2-add-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0; cursor: pointer;
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-3);
  text-align: left;
}
.st2-add-row:hover { background: var(--sorp-red-wash); color: var(--sorp-red); }

/* ───────────── BULK BAR (floating) ───────────── */
.st2-bulk {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: var(--sorp-ink); color: white;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20,23,28,0.25), 0 0 0 1px rgba(255,255,255,0.05) inset;
  z-index: 100;
  font-size: 13px;
}
.st2-bulk-count {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-weight: 600;
  color: white;
}
.st2-bulk button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: white;
  border-radius: 8px;
}
.st2-bulk button:hover { background: rgba(255,255,255,0.12); }
.st2-bulk button.danger { color: #FFA8B0; }
.st2-bulk button.danger:hover { background: rgba(255,99,109,0.2); }
.st2-bulk-sep {
  width: 1px; height: 22px; background: rgba(255,255,255,0.12);
  margin: 0 4px;
}
.st2-bulk-close {
  width: 32px; height: 32px; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: rgba(255,255,255,0.6) !important;
}

/* ───────────── DRAWER ───────────── */
.st2-drawer {
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.st2-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.st2-drawer-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.st2-drawer-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.st2-drawer-sub {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
}
.st2-drawer-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 -28px 20px;
  padding: 0 28px;
}
.st2-drawer-tabs button {
  position: relative;
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 16px 12px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.st2-drawer-tabs button.active {
  color: var(--sorp-red); font-weight: 600;
}
.st2-drawer-tabs button.active::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--sorp-red);
  border-radius: 1px;
}
.st2-tab-count {
  background: var(--neutral-100);
  color: var(--fg-2);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
}

.st2-drawer-fields {
  display: flex;
  flex-direction: column;
}
.st2-field {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F2EFEA;
  gap: 16px;
}
.st2-field-label {
  font-size: 12px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.st2-field-val {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.st2-field-src {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
}
.st2-field-edited {
  color: #F5A623; font-size: 16px;
}
.st2-field.error { background: rgba(214,61,74,0.04); }
.st2-field-error {
  grid-column: 2;
  font-size: 12px;
  color: var(--sorp-red);
  margin-top: 4px;
}

/* Comments */
.st2-drawer-comments { display: flex; flex-direction: column; gap: 14px; }
.st2-cm { display: flex; gap: 12px; }
.st2-cm > div:last-child { flex: 1; }
.st2-cm-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 4px;
}
.st2-cm-body { font-size: 13px; line-height: 1.5; }
.st2-cm-body code {
  background: var(--neutral-100);
  padding: 1px 6px; border-radius: 3px;
  font-size: 12px;
}
.st2-cm-add {
  width: 100%; min-height: 70px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit; font-size: 13px;
  resize: vertical;
}
.st2-empty { color: var(--fg-3); padding: 16px 0; font-size: 13px; }

/* History */
.st2-drawer-history { display: flex; flex-direction: column; gap: 2px; }
.st2-hist {
  display: flex; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  align-items: flex-start;
}
.st2-hist:hover { background: var(--bg-surface-alt); }
.st2-hist > svg { color: var(--fg-3); margin-top: 2px; }
.st2-hist-body { flex: 1; font-size: 13px; }
.st2-hist-body > div:first-child { margin-bottom: 2px; }
.st2-hist-meta { font-size: 11px; }

/* ============================================================
   RELATIONSHIP MAP — unchanged (use existing classes)
   ============================================================ */

.rm-screen { display: flex; flex-direction: column; height: 100%; }
.rm-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rm-title { margin: 0; font-size: 20px; font-weight: 600; }
.rm-subtitle { color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.rm-modes {
  display: flex;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.rm-mode {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--fg-2);
  border-radius: 6px;
}
.rm-mode:hover { color: var(--fg-1); }
.rm-mode.active {
  background: var(--bg-surface);
  color: var(--sorp-ink);
  box-shadow: var(--shadow-xs);
}
.rm-mode-dot { width: 7px; height: 7px; border-radius: 50%; }

.rm-canvas-wrap {
  flex: 1; position: relative;
  background: linear-gradient(var(--neutral-50) 1px, transparent 1px) 0 0/24px 24px,
              linear-gradient(90deg, var(--neutral-50) 1px, transparent 1px) 0 0/24px 24px,
              white;
  overflow: hidden;
}
.rm-canvas { position: absolute; inset: 0; }
.rm-zoom {
  position: absolute; bottom: 20px; right: 20px;
  display: flex; flex-direction: column;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.rm-zoom button {
  background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-subtle);
}
.rm-zoom button:last-child { border-bottom: 0; }
.rm-zoom button:hover { background: var(--bg-surface-alt); color: var(--sorp-red); }

.rm-legend {
  position: absolute; bottom: 20px; left: 20px;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  font-size: 11px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 10;
  max-width: 260px;
}
.rm-legend-title {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); font-size: 10px; margin-bottom: 4px;
}
.rm-legend-row { display: flex; align-items: center; gap: 8px; }
.rm-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.rm-node { cursor: pointer; transition: filter 120ms; }
.rm-node:hover { filter: brightness(1.02); }
.rm-node-rect {
  fill: white; stroke: var(--neutral-300);
  stroke-width: 1.5; rx: 8;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}
.rm-node.selected .rm-node-rect {
  stroke: var(--sorp-red); stroke-width: 2;
  filter: drop-shadow(0 3px 12px rgba(214,61,74,0.25));
}
.rm-node-header {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; fill: white; dominant-baseline: middle;
}
.rm-node-title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 13px; fill: var(--fg-1); dominant-baseline: middle;
}
.rm-node-sub {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--fg-3); dominant-baseline: middle;
}
.rm-node-field {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--fg-2); dominant-baseline: middle;
}
.rm-node-field.pk { font-weight: 700; fill: var(--sorp-red); }
.rm-node-fields-bg { fill: var(--bg-surface-alt); }
.rm-edge {
  fill: none; stroke: var(--neutral-500); stroke-width: 1.5;
  marker-end: url(#rm-arrow);
}
.rm-edge.integration { stroke: #2C5C8C; stroke-dasharray: 4 3; }
.rm-edge.ai { stroke: #6E45E2; stroke-dasharray: 2 3; }
.rm-edge-label {
  font-family: var(--font-mono); font-size: 9px;
  fill: var(--fg-3);
  paint-order: stroke; stroke: white; stroke-width: 3;
}
.rm-side {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 320px;
  background: white;
  border-left: 1px solid var(--border-subtle);
  padding: 18px;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,0.04);
  z-index: 5;
}
.rm-side-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.rm-side-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); font-weight: 700;
}
.rm-side h3 { margin: 4px 0 0; font-size: 16px; }
.rm-side p { font-size: 12px; color: var(--fg-2); line-height: 1.5; }
.rm-side-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); font-weight: 700;
  margin: 18px 0 6px;
}
.rm-side-list { display: flex; flex-direction: column; gap: 6px; }
.rm-side-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-surface-alt);
  border-radius: 6px;
  font-size: 12px;
}
.rm-side-list-item code {
  font-size: 11px;
  background: white; padding: 1px 5px; border-radius: 3px;
}

/* ============================================================
   SOURCING SCREEN
   ============================================================ */
.src { padding: 32px 36px 120px; min-height: 100%; font-size: 13px; color: var(--fg-1); }
.src-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px; gap: 24px;
}
.src-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.src-sub { margin-top: 6px; color: var(--fg-3); font-size: 13px; }
.src-stats { display: flex; gap: 28px; }
.src-stat { display: flex; flex-direction: column; align-items: flex-end; }
.src-stat strong { font-size: 22px; font-weight: 700; color: var(--fg-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.src-stat span { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.src-filters {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle);
}
.src-filter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 0 4px 0 10px; height: 32px;
}
.src-filter-label { font-size: 11px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.src-filter select {
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--fg-1);
  padding: 0 6px; height: 32px; cursor: pointer;
}
.src-filter-grow { flex: 1; }
.src-filter-count { font-size: 12px; color: var(--fg-3); }
.src-filter-count strong { color: var(--fg-1); font-weight: 600; }

.src-body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

/* Category list (left) */
.src-cats {
  display: flex; flex-direction: column; gap: 4px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: 8px;
}
.src-cat {
  display: block; width: 100%;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit; font-size: 13px;
  transition: border-color 100ms, background 100ms;
}
.src-cat:hover { background: var(--bg-surface-alt); }
.src-cat.active {
  border-color: var(--sorp-red);
  background: var(--sorp-red-wash);
  box-shadow: 0 0 0 3px rgba(214,61,74,0.08);
}
.src-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.src-cat-name { font-weight: 600; font-size: 14px; color: var(--fg-1); }
.src-cat-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em;
}
.rank-A { background: #DFEFE6; color: #1E5E40; }
.rank-B { background: #FFF4DA; color: #8C5C00; }
.rank-C { background: #F2EFEA; color: #7A7468; }
.src-cat-group { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.src-cat-meta {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 11px; color: var(--fg-2);
}
.src-cat-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Workflow panel (right) */
.src-flow { display: flex; flex-direction: column; gap: 20px; }

.src-card {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 24px;
}
.src-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.src-card-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); font-weight: 700;
}
.src-card-title { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.src-card-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  background: #FFF4DA; color: #8C5C00;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px;
}
.src-card-grid {
  display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.src-card-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); font-weight: 600;
  margin-bottom: 6px;
}
.src-card-val { font-size: 14px; }
.src-card-val strong { font-size: 18px; font-weight: 700; }
.src-chip {
  display: inline-block;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-subtle);
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; margin: 0 4px 4px 0;
  color: var(--fg-2);
}

/* Step */
.src-step {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
}
.src-step.done { border-color: #C8E5D2; }
.src-step.done .src-step-n { background: #2F7D5B; color: white; }
.src-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.src-step-n {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sorp-red); color: white;
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.src-step-title { font-size: 15px; font-weight: 600; }
.src-step-body { display: flex; flex-direction: column; gap: 10px; }

.src-hs { display: flex; flex-wrap: wrap; gap: 8px; }
.src-hs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono); font-size: 13px;
  cursor: pointer;
}
.src-hs-chip:hover { background: var(--bg-surface-alt); }
.src-hs-chip.active {
  background: var(--sorp-red-wash);
  border-color: var(--sorp-red-soft);
  color: var(--sorp-red-deep);
  font-weight: 600;
}
.src-hs-chip input { margin: 0; }

.src-action {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
}
.src-action:hover { background: var(--bg-surface-alt); }
.src-action.primary {
  background: var(--sorp-red); color: white; border-color: var(--sorp-red);
}
.src-action.primary:hover { background: var(--sorp-red-deep); }
.src-action.primary:disabled { background: var(--neutral-300); border-color: var(--neutral-300); cursor: wait; }
.src-action.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.src-action.ghost:hover { background: var(--bg-surface-alt); color: var(--fg-1); }
.src-action-hint { font-size: 12px; color: var(--fg-3); line-height: 1.5; }

.src-hits-summary { font-size: 13px; color: var(--fg-2); }
.src-hits-summary strong { color: var(--fg-1); font-weight: 600; }

.src-hits {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 12px;
  margin: 8px 0 4px;
}
.src-hits th {
  background: var(--bg-surface-alt);
  text-align: left;
  padding: 8px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-subtle);
}
.src-hits td {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.src-hits tr:last-child td { border-bottom: 0; }
.src-hits tr.existing { opacity: 0.5; background: var(--bg-surface-alt); }
.src-hits td.mono { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.src-hits td.muted { color: var(--fg-3); }
.src-hits tr:hover td { background: #FBF8F2; }

.src-tag-mini {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  background: var(--neutral-200); color: var(--fg-2);
  padding: 1px 6px; border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.src-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px;
  border-radius: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.src-score.high { background: #DFEFE6; color: #1E5E40; }
.src-score.mid  { background: #FFF4DA; color: #8C5C00; }
.src-score.low  { background: #FDE4E7; color: #A1242E; }
.src-row-act {
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-3); padding: 4px;
}
.src-row-act:hover { color: var(--sorp-red); }

.src-clean-done {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #DFEFE6; color: #1E5E40;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  align-self: flex-start;
}

.src-script {
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(135deg, #FAF6FF, #F5EEFF);
  border: 1px solid #D8C8F0;
  border-radius: 10px;
  padding: 18px 20px;
}
.src-script-row {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 16px;
  font-size: 13px;
  line-height: 1.55;
}
.src-script-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #6E45E2; font-weight: 700;
  padding-top: 2px;
}
.src-script-actions {
  display: flex; gap: 8px;
  padding-top: 8px; border-top: 1px dashed #D8C8F0;
}

/* ============================================================
   NORMALIZE SCREEN
   ============================================================ */
.nrm { padding: 32px 36px 120px; min-height: 100%; font-size: 13px; }
.nrm-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 24px; }
.nrm-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.nrm-sub { margin-top: 6px; color: var(--fg-3); font-size: 13px; }
.nrm-sub strong { color: var(--fg-1); font-weight: 700; }
.nrm-header-actions { display: flex; gap: 8px; }

.nrm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.nrm-btn:hover { background: var(--bg-surface-alt); }
.nrm-btn.primary { background: var(--sorp-ink); color: white; border-color: var(--sorp-ink); }
.nrm-btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }

.nrm-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
}
.nrm-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 14px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
  position: relative; top: 1px;
}
.nrm-tab:hover { color: var(--fg-1); }
.nrm-tab.active {
  color: var(--sorp-red);
  border-bottom-color: var(--sorp-red);
  font-weight: 600;
}
.nrm-tab-dot { width: 8px; height: 8px; border-radius: 50%; }
.nrm-tab-count {
  background: var(--neutral-100); color: var(--fg-2);
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.nrm-tab.active .nrm-tab-count { background: var(--sorp-red); color: white; }

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

.nrm-item {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: start;
}
.nrm-item.resolved { opacity: 0.55; background: var(--bg-surface-alt); }
.nrm-item:hover { border-color: var(--border-default); }

.nrm-item-left { display: flex; justify-content: center; padding-top: 2px; }
.nrm-item-type {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
}

.nrm-item-body { min-width: 0; }

.nrm-item-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 11px; color: var(--fg-3);
  flex-wrap: wrap;
}
.nrm-ref { background: var(--neutral-100); padding: 2px 7px; border-radius: 4px; font-size: 11px; color: var(--fg-2); }
.nrm-row { font-family: var(--font-mono); }
.nrm-src {
  background: var(--bg-surface-alt);
  padding: 1px 7px; border-radius: 999px;
  font-weight: 600;
}
.nrm-conf {
  padding: 1px 7px; border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nrm-conf.high { background: #DFEFE6; color: #1E5E40; }
.nrm-conf.mid  { background: #FFF4DA; color: #8C5C00; }
.nrm-conf.low  { background: #FDE4E7; color: #A1242E; }
.nrm-blocker {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FDE4E7; color: #A1242E;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}
.nrm-resolved-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #DFEFE6; color: #1E5E40;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}

.nrm-diff {
  display: grid; grid-template-columns: 1fr 24px 1fr;
  gap: 12px; align-items: center;
}
.nrm-side {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
}
.nrm-side.new {
  background: #FCFBF7;
  border-color: #E8DCC4;
}
.nrm-side-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); font-weight: 700;
  margin-bottom: 4px;
}
.nrm-side-val { font-size: 13px; word-break: break-word; line-height: 1.45; }
.nrm-side-val.proposed { color: var(--sorp-ink); font-weight: 500; }
.nrm-arrow { color: var(--fg-3); display: flex; justify-content: center; }

.nrm-pair {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-right: 12px;
}
.nrm-pair-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-3); font-weight: 600;
}
.nrm-pair-v {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);
}

.nrm-edit {
  width: 100%;
  border: 2px solid var(--sorp-red);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: inherit; font-size: 13px;
  outline: none; background: white;
  box-shadow: 0 0 0 3px rgba(214,61,74,0.12);
}

.nrm-item-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: stretch;
}
.nrm-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.nrm-action:hover { background: var(--bg-surface-alt); }
.nrm-action.primary {
  background: var(--sorp-red); color: white; border-color: var(--sorp-red);
}
.nrm-action.primary:hover { background: var(--sorp-red-deep); }
.nrm-action.ghost { background: transparent; border-color: transparent; color: var(--fg-3); }
.nrm-action.ghost:hover { background: var(--bg-surface-alt); color: var(--fg-1); }

.nrm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 0;
  color: var(--fg-3);
  text-align: center;
}
.nrm-empty > div:nth-child(2) { font-size: 15px; font-weight: 600; color: var(--fg-2); margin-top: 12px; }
.nrm-empty-sub { font-size: 12px; margin-top: 4px; }

.nrm-hotkeys {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px; color: var(--fg-3);
}
.nrm-hotkeys kbd {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-bottom-width: 2px;
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-1); margin: 0 4px;
}