/* CSVrec UI primitives — extracted from vshroot/CSVrec styles.css
   Scoped under .csvrec-root so we can render two variants on one canvas. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

.csvrec-root {
  /* ── REC design tokens ───────────────────────────────────────── */
  --background: #090b23;
  --workspace-background-image:
    radial-gradient(circle at 16% 10%, rgba(168,85,247,.46), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(34,211,238,.28), transparent 31%),
    linear-gradient(135deg, rgba(76,29,149,.44), transparent 35%),
    linear-gradient(225deg, rgba(8,145,178,.28), transparent 42%),
    radial-gradient(ellipse at top, #281762 0%, #111033 48%, #050717 100%);

  --panel-bg: rgba(255,255,255,.10);
  --panel-border: rgba(255,255,255,.20);
  --panel-base: rgba(22,17,53,.72);
  --panel-overlay: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
  --panel-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 42px rgba(0,0,0,.36);
  --panel-soft-bg: rgba(255,255,255,.055);
  --panel-soft-border: rgba(255,255,255,.14);
  --panel-header-fill:
    linear-gradient(135deg, rgba(139,92,246,.18), rgba(14,165,233,.08) 52%, rgba(16,185,129,.08)),
    rgba(9,7,28,.34);

  --header-base: rgba(255,255,255,.08);
  --header-gradient: linear-gradient(135deg, rgba(139,92,246,.28), rgba(14,165,233,.10) 48%, rgba(16,185,129,.13));
  --header-shadow: 0 18px 46px rgba(11,8,38,.32);

  --purple: #a855f7;
  --cyan: #67e8f9;
  --emerald: #6ee7b7;
  --amber: #fbbf24;
  --danger: #ff6b88;

  --text-strong: #ffffff;
  --text-default: #f8fafc;
  --text-muted: rgba(216,180,254,.80);
  --text-faint: rgba(255,255,255,.45);
  --text-label: rgb(216,180,254);
  --text-label-soft: rgba(216,180,254,.55);

  --input-bg: rgba(255,255,255,.10);
  --input-border: rgba(255,255,255,.20);
  --input-placeholder: rgba(216,180,254,.70);

  --btn-primary-bg: linear-gradient(to right, #9333ea, #c026d3);
  --btn-primary-border: rgba(216,180,254,.30);
  --btn-primary-shadow: 0 10px 15px -3px rgba(46,16,101,.25), 0 4px 6px -4px rgba(46,16,101,.25);
  --btn-ghost-border: rgba(255,255,255,.15);
  --btn-ghost-text: #d8b4fe;
  --btn-ghost-hover-bg: rgba(255,255,255,.10);

  --seg-active-bg: rgba(147,51,234,.70);
  --seg-active-border: #c084fc;
  --seg-idle-bg: rgba(255,255,255,.05);
  --seg-idle-border: rgba(255,255,255,.15);
  --seg-idle-text: #ede9fe;

  --table-head-bg: rgba(255,255,255,.05);
  --table-head-text: rgba(216,180,254,.90);
  --table-row-border: rgba(255,255,255,.05);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-xl: 1rem;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: "Inter", Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  background-color: var(--background);
  background-image: var(--workspace-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: local;
  color: var(--text-default);
  font-family: var(--sans);
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

body.csvrec-root {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.csvrec-root *,
.csvrec-root *::before,
.csvrec-root *::after { box-sizing: border-box; }

/* ── topbar ──────────────────────────────────────────────────── */
.csvrec-root .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--header-gradient), var(--header-base);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: var(--header-shadow);
  position: relative;
  z-index: 5;
}
.csvrec-root .topbarStart { display:flex; align-items:center; gap:12px; min-width:0; }
.csvrec-root .shellToggle {
  width:36px; height:36px; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:0;
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-ghost-border);
  background: transparent;
  color: var(--btn-ghost-text);
}
.csvrec-root .shellToggle span {
  display:block; width:15px; height:2px; border-radius:999px; background:currentColor;
}
.csvrec-root .brandTitle { color: var(--text-strong); font-weight: 700; letter-spacing:.2px; font-size: 14px;}
.csvrec-root .brandSub { font-size: 11px; color: var(--text-muted); }

.csvrec-root .topActions { display:flex; gap:8px; align-items:center; }

.csvrec-root .ghost,
.csvrec-root .ghost-btn {
  font-family: var(--sans);
  border: 1px solid var(--btn-ghost-border);
  background: transparent;
  color: var(--btn-ghost-text);
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.csvrec-root .ghost:hover { background: var(--btn-ghost-hover-bg); color: var(--text-strong); }
.csvrec-root .ghost.small { padding: 5px 10px; font-size: 12px; border-radius: 10px; }
.csvrec-root .primary-btn {
  font-family: var(--sans);
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  color: #fff;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  cursor: pointer;
}
.csvrec-root .add-file-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13px;
  border: 1px solid rgba(110,231,183,.40);
  background: rgba(110,231,183,.09);
  color: #a8f0d4;
  padding: 7px 14px; border-radius: 12px;
}
.csvrec-root .presetTrigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

/* ── shell layout ────────────────────────────────────────────── */
.csvrec-root .appShell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: calc(100vh - 65px);
  height: auto;
}
.csvrec-root.archive-fullscreen .appShell {
  min-height: calc(100vh - 65px);
  height: auto;
}
body.shell-collapsed.csvrec-root #appShell,
body.shell-collapsed.csvrec-root #adminAppShell,
body.shell-collapsed .csvrec-root .appShell {
  grid-template-columns: minmax(0, 1fr);
}
body.shell-collapsed.csvrec-root #appShell > .sideNav,
body.shell-collapsed.csvrec-root #adminAppShell > .sideNav,
body.shell-collapsed .csvrec-root .appShell > .sideNav {
  display: none;
}
body.shell-collapsed.csvrec-root #appShell > main,
body.shell-collapsed.csvrec-root #adminAppShell > main,
body.shell-collapsed .csvrec-root .appShell > main {
  grid-column: 1;
}

/* ── side nav ────────────────────────────────────────────────── */
.csvrec-root .sideNav {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
  border-right: 1px solid var(--panel-border);
  background: var(--panel-overlay), var(--panel-base);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 4;
  min-height: 0;
  overflow-y: auto;
}
.csvrec-root .sideNavSectionBottom { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--panel-border); }
.csvrec-root .sideNavSection { display:flex; flex-direction:column; gap:6px; }

.csvrec-root .sideNavItem {
  width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
}
.csvrec-root .sideNavItem:hover { color: var(--text-strong); background: var(--btn-ghost-hover-bg); }
.csvrec-root .sideNavItem.active {
  color: #fff;
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  box-shadow: 0 10px 15px -3px rgba(46,16,101,.25);
}
.csvrec-root .sideNavIcon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--seg-idle-bg);
  font-weight: 800; font-size: 15px; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.csvrec-root .icon-csv { background: rgba(122,162,255,.14); }
.csvrec-root .icon-incidents { background: rgba(248,113,113,.15); }
.csvrec-root .icon-bot { background: rgba(96,165,250,.14); }
.csvrec-root .icon-auto { background: rgba(74,222,128,.13); }
.csvrec-root .icon-plan { background: rgba(96,165,250,.14); }
.csvrec-root .icon-admin { background: rgba(167,139,250,.14); }
.csvrec-root .icon-theme { background: rgba(251,191,36,.15); }
.csvrec-root .icon-logout { background: rgba(248,113,113,.12); }
.csvrec-root .icon-user { background: rgba(148,163,184,.12); }

.csvrec-root .sideNavUser {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; min-height: 36px;
  font-size: 12px; color: var(--text-muted);
}
.csvrec-root .sideNavUserName { font-family: var(--mono); font-size: 11px; }

/* ── main area ────────────────────────────────────────────────── */
.csvrec-root .main {
  padding: 14px 16px 24px;
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: calc(100vh - 65px);
  overflow-y: auto;
}
.csvrec-root .main--airy {
  padding: 24px 32px 28px;
  gap: 22px;
}

/* ── generic panel ───────────────────────────────────────────── */
.csvrec-root .panel {
  background: var(--panel-overlay), var(--panel-base);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.csvrec-root .panelHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-header-fill);
}
.csvrec-root .panelTitle { color: var(--text-strong); font-weight: 700; font-size: 14px; }
.csvrec-root .panelSub { font-size: 12px; color: var(--text-muted); }

/* ── tool groups (BEFORE: quilt) ─────────────────────────────── */
.csvrec-root .toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  padding: 22px 32px 10px;
}
.csvrec-root .toolGroup {
  background: var(--panel-soft-bg);
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 78px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.csvrec-root .toolGroup label.muted {
  color: var(--text-label-soft); /* the faded label problem */
  font-size: 11px;
  font-weight: 600;
}
.csvrec-root .input,
.csvrec-root .toolGroup input,
.csvrec-root .toolGroup select {
  font-family: var(--mono);
  color: #fff;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  outline: none;
  font-size: 12px;
}
.csvrec-root .input::placeholder { color: var(--input-placeholder); }

/* ── csvAdvancedSettings strip ───────────────────────────────── */
.csvrec-root .advanced {
  margin: 0 32px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-xl);
  background: var(--panel-soft-bg);
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
  padding: 12px;
}

/* ── status mapping chips ────────────────────────────────────── */
.csvrec-root .smapChip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
  background: rgba(122,162,255,.12);
  border: 1px solid rgba(122,162,255,.3);
  color: #d0dcff;
  white-space: nowrap;
}
.csvrec-root .smapArrow { color: var(--text-faint); font-size: 13px; }
.csvrec-root .smapCanonical {
  font-family: var(--mono); font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.03);
  color: var(--text-default);
  width: 120px;
}

/* ── files dropzone ──────────────────────────────────────────── */
.csvrec-root .files-empty {
  padding: 36px 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 12px;
  margin: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.csvrec-root .files-empty--airy {
  padding: 52px 18px;
  border-color: rgba(110,231,183,.40);
  background: rgba(110,231,183,.04);
  color: #a8f0d4;
  font-size: 14px;
  margin: 18px 18px 22px;
}
.csvrec-root .files-empty--airy strong { color: #fff; font-weight: 700; }

/* ── history list ────────────────────────────────────────────── */
.csvrec-root .historyToolbar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0,0,0,.08);
}
.csvrec-root .historyToolbar input {
  flex: 1;
  font-family: var(--mono);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 12px;
  color: #fff;
}
.csvrec-root .historyList {
  display: flex; flex-direction: column;
  gap: 0;
}
.csvrec-root .historyItem {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--table-row-border);
  font-size: 12px;
}
.csvrec-root .historyItem:hover { background: rgba(255,255,255,.04); }
.csvrec-root .historyItem:last-child { border-bottom: none; }
.csvrec-root .historyItemName {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 13px;
}
.csvrec-root .historyItemSub {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}
.csvrec-root .historyItemMeta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}
.csvrec-root .historyItemNum {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

/* ── eyebrow / metric cards (AFTER) ──────────────────────────── */
.csvrec-root .eyebrow {
  color: var(--text-label);   /* full purple-300, not soft */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.csvrec-root .eyebrow-soft {
  color: var(--text-label-soft);
}

/* page header (AFTER) */
.csvrec-root .pageHeader {
  position: relative;
  z-index: 20;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px 22px 26px;
  min-height: 88px;
  background: var(--panel-header-fill);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}
.csvrec-root .pageHeaderLeft { display: flex; align-items: flex-start; gap: 14px; min-width:0; }
.csvrec-root .pageHeaderEmoji { font-size: 28px; line-height: 1; margin-top: 2px; }
.csvrec-root .pageHeaderTitle { font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -.005em; }
.csvrec-root .pageHeaderSub { margin-top: 6px; font-size: 13px; color: var(--text-label); font-weight: 500; }
.csvrec-root .pageHeaderRight { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.csvrec-root .freshPill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110,231,183,.35);
  background: rgba(110,231,183,.10);
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 600;
}
.csvrec-root .freshPill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110,231,183,.22);
}
.csvrec-root .freshPill .sep { color: rgba(255,255,255,.45); font-weight: 400; }

/* metric cards */
.csvrec-root .metricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.csvrec-root .metricCard {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-overlay), var(--panel-base);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.csvrec-root .metricCardValue {
  margin-top: 4px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  letter-spacing: -.01em;
}
.csvrec-root .metricCardValue.small { font-size: 22px; }
.csvrec-root .metricCardForecast {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.csvrec-root .metricCardForecast.pos { color: #6ee7b7; }
.csvrec-root .metricCardForecast.neg { color: #fecaca; }
.csvrec-root .metricCardFoot {
  font-size: 11px;
  color: rgba(192,132,252,.70);
  margin-top: 2px;
}

/* status pills with semantic color */
.csvrec-root .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  border: 1px solid transparent;
  white-space: nowrap;
}
.csvrec-root .pill-emerald { border-color: rgba(52,211,153,.30); background: rgba(52,211,153,.10); color: #a7f3d0; }
.csvrec-root .pill-amber { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.10); color: #fde68a; }
.csvrec-root .pill-rose { border-color: rgba(253,164,175,.30); background: rgba(251,113,133,.12); color: #fecaca; }
.csvrec-root .pill-cyan { border-color: rgba(103,232,249,.30); background: rgba(34,211,238,.10); color: #a5f3fc; }
.csvrec-root .pill-purple { border-color: rgba(216,180,254,.30); background: rgba(167,139,250,.12); color: #e9d5ff; }
.csvrec-root .pill-neutral { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(216,180,254,.7); }

/* AFTER toolbar — single tight row */
.csvrec-root .toolbar--airy {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 18px 20px;
}
.csvrec-root .toolbar--airy .toolGroup {
  background: var(--panel-soft-bg);
  border: 1px solid var(--panel-soft-border);
}
.csvrec-root .toolbar--airy .eyebrow {
  font-size: 9.5px;
  letter-spacing: .14em;
}
.csvrec-root .configCollapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px 18px;
  color: var(--text-muted);
  font-size: 12px;
}
.csvrec-root .configCollapse strong { color: var(--text-strong); font-weight: 600; }
.csvrec-root .configCollapseBtn {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-border);
  color: var(--text-strong);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

/* brand block in sidebar (AFTER) */
.csvrec-root .sideBrand {
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 4px;
}
.csvrec-root .sideBrandTitle {
  font-size: 15px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.csvrec-root .sideBrandSub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-label-soft);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}
.csvrec-root .sideProjectChip {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(216,180,254,.18);
  background: rgba(167,139,250,.10);
  font-size: 12px;
  color: #fff;
}
.csvrec-root .sideProjectChip .label {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
.csvrec-root .sideProjectChip .name { font-weight: 600; }

/* ── configure: expanded inline ───────────────────────────── */
.csvrec-root .configExpanded {
  margin: 4px 20px 20px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-xl);
  background: var(--panel-soft-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.csvrec-root .configExpanded--collapsed .configHeader {
  border-bottom: 0;
}
.csvrec-root .configExpandedBody[hidden] {
  display: none;
}
.csvrec-root .configHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0,0,0,.10);
}
.csvrec-root .configHeaderTitle {
  margin-top: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.csvrec-root .configSection {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.csvrec-root .configSection:last-child { border-bottom: none; }
.csvrec-root .configSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.csvrec-root .configSectionSub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* status mapping rows */
.csvrec-root .smapRows {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 6px 0 10px;
}
.csvrec-root .smapRow {
  display: flex; align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.csvrec-root .smapExclude {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  align-items: center;
}

/* validation rows */
.csvrec-root .validationRows {
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .validationRow {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.csvrec-root .validationRow.is-ok {
  border-color: rgba(110,231,183,.30);
  background: rgba(110,231,183,.05);
}
.csvrec-root .validationRow.is-warn {
  border-color: rgba(251,191,36,.30);
  background: rgba(251,191,36,.05);
}
.csvrec-root .validationTitle {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.csvrec-root .validationSub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* advanced grid */
.csvrec-root .advancedGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.csvrec-root .advField {
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .advField input,
.csvrec-root .advField select {
  font-family: var(--mono);
  color: #fff;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  outline: none;
}

.csvrec-root .filesHint {
  margin: 6px 20px 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}
.csvrec-root .filesHint strong { color: var(--text-strong); font-weight: 600; }

/* project switch chip in page header (AFTER) */
.csvrec-root .projectSwitchWrap {
  position: relative;
  z-index: 70;
}
.csvrec-root .projectSwitch {
  display: inline-flex; align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(216,180,254,.30);
  background: rgba(167,139,250,.12);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.csvrec-root .projectSwitch:hover {
  background: rgba(167,139,250,.20);
  border-color: rgba(216,180,254,.55);
}
.csvrec-root .projectSwitchLabel {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
.csvrec-root .projectSwitchValue {
  font-weight: 600;
  font-family: var(--mono);
  font-size: 13px;
}
.csvrec-root .projectSwitchArrow {
  font-size: 11px;
  color: var(--text-label);
  margin-left: -2px;
}
.csvrec-root .projectSwitchMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.csvrec-root .projectSwitchOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.csvrec-root .projectSwitchOption:hover {
  background: rgba(122,162,255,.10);
}
.csvrec-root .projectSwitchOption.active {
  background: rgba(122,162,255,.16);
}
.csvrec-root .projectSwitchEmpty {
  padding: 8px 10px;
}

/* validation notice as a single-line strip */
.csvrec-root .validationNotice {
  display: flex; align-items: center;
  gap: 12px;
  margin: 0 20px 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(69,26,3,.30);
  border: 1px solid rgba(217,119,6,.45);
  color: #fde68a;
  font-size: 13px;
}
.csvrec-root .validationNotice .eyebrow {
  color: #fde68a;
  opacity: .85;
}
.csvrec-root .validationDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,.22);
  flex: 0 0 auto;
}
.csvrec-root .validationText { color: #fde68a; }
.csvrec-root .validationText strong { color: #fff; font-weight: 700; }
.csvrec-root .validationSep { margin: 0 8px; color: rgba(255,255,255,.35); }

/* ── saved run modal ──────────────────────────────────────── */
.csvrec-root .modalBackdrop {
  position: absolute; inset: 0;
  background: rgba(4,7,23,.55);
  backdrop-filter: blur(8px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.csvrec-root #autoRecArchiveModalRoot .modalBackdrop {
  position: fixed;
}
.csvrec-root .modal--savedRun {
  width: min(760px, 100%);
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel-overlay), var(--panel-base);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.csvrec-root .modal--autoRecRun {
  width: min(1100px, 100%);
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel-overlay), var(--panel-base);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

/* ── Auto rec Open-diff modal (matches original product UI) ── */
.csvrec-root .modal--autoRecDiff {
  width: min(1340px, 100%);
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel-overlay), var(--panel-base);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.csvrec-root .modalDiffTitleSmall {
  font-size: 14px;
  color: var(--text-default);
  font-weight: 600;
}
.csvrec-root .modalBody--diff {
  padding: 20px 24px 24px;
  gap: 16px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.csvrec-root .modalDiffTitleRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.csvrec-root .modalDiffTitleBlock { min-width: 0; }
.csvrec-root .modalDiffMeta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.csvrec-root .modalDiffMetaLabel { color: var(--text-label-soft); }
.csvrec-root .modalDiffMetaSep { color: var(--text-faint); }
.csvrec-root .modalDiffActions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
/* Counters (Open / Resolved) — large pills */
.csvrec-root .modalDiffCounters {
  display: flex;
  gap: 12px;
  margin: 8px 0 4px;
}
.csvrec-root .diffCounter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  min-width: 200px;
}
.csvrec-root .diffCounterLabel {
  font-size: 14px;
  color: var(--text-muted);
  flex: 1;
}
.csvrec-root .diffCounterValue {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.csvrec-root .diffCounterValue--amber { color: #fbbf24; }
.csvrec-root .diffCounterValue--emerald { color: #6ee7b7; }

/* Tabs — pill-styled, cyan outline on active */
.csvrec-root .modalDiffTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.csvrec-root .modalDiffTab {
  padding: 7px 16px;
  border-radius: 9999px;
  border: 1px solid var(--seg-idle-border);
  background: var(--seg-idle-bg);
  color: var(--text-label);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.csvrec-root .modalDiffTab:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(34,211,238,.30);
}
.csvrec-root .modalDiffTab--active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(34,211,238,.10);
}

/* Diff table — P/A pairs in single cells */
.csvrec-root .modalDiffTableWrap {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
  flex: 1 1 auto;
  min-height: 240px;
  overflow: auto;
}
.csvrec-root .modalDiffTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.csvrec-root .modalDiffTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-label);
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(255,255,255,.03);
}
.csvrec-root .modalDiffRow td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--text-default);
}
.csvrec-root .modalDiffRow:last-child td { border-bottom: 0; }
.csvrec-root .modalDiffTxId {
  color: var(--text-strong);
  font-size: 13px;
  letter-spacing: .01em;
  white-space: nowrap;
  font-weight: 500;
}
.csvrec-root .diffCell { display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.csvrec-root .diffCellTag { color: var(--text-label-soft); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.csvrec-root .modalDiffDash { color: var(--text-faint); font-family: var(--mono); }

/* Technical details collapsible */
.csvrec-root .modalDiffTech {
  padding: 4px 0;
}
.csvrec-root .modalDiffTechBtn {
  background: transparent;
  border: 0;
  color: var(--text-label);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
}
.csvrec-root .modalDiffTechCount {
  color: var(--text-label-soft);
  font-weight: 500;
}

/* Empty state (clean) */
.csvrec-root .modalDiffEmpty {
  padding: 56px 24px;
  text-align: center;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(110,231,183,.05);
}
.csvrec-root .modalDiffEmptyEmoji {
  font-size: 36px;
  margin-bottom: 12px;
}
.csvrec-root .modalDiffEmptyTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.csvrec-root .modalDiffEmptyDesc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
}

/* Light theme tweaks for diff modal */
.theme-light .csvrec-root .modal--autoRecDiff {
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(28,18,58,.22);
}
.theme-light .csvrec-root .modalDiffTableWrap { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .diffCounter { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .modalDiffEmpty { background: rgba(110,231,183,.10); }

/* ── Correct locally sub-modal ── */
.csvrec-root .modal--correctLocal {
  width: min(620px, 100%);
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel-overlay), var(--panel-base);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.csvrec-root .correctLocalTxid {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.csvrec-root .correctLocalContext {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.csvrec-root .correctLocalContextRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.csvrec-root .correctLocalContextRow {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 13px;
}
.csvrec-root .correctLocalContextLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
.csvrec-root .correctLocalContextValue {
  color: var(--text-default);
  word-break: break-all;
}
.csvrec-root .correctLocalContextDual {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}
.csvrec-root .correctLocalDelta {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
}
.csvrec-root .correctLocalDelta--amber { background: rgba(251,191,36,.18); color: #fde68a; }
.csvrec-root .correctLocalDelta--rose  { background: rgba(251,113,133,.18); color: #fecaca; }
.csvrec-root .correctLocalDelta--cyan  { background: rgba(34,211,238,.18); color: #67e8f9; }

.csvrec-root .correctLocalCard {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.csvrec-root .correctLocalOptions {
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .correctLocalOption {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: all .15s;
}
.csvrec-root .correctLocalOption:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(34,211,238,.30);
}
.csvrec-root .correctLocalOption--checked {
  border-color: var(--seg-active-border);
  background: rgba(167,139,250,.10);
}
.csvrec-root .correctLocalNativeRadio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.csvrec-root .correctLocalRadio {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--text-label-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.csvrec-root .correctLocalOption--checked .correctLocalRadio {
  border-color: var(--seg-active-border);
}
.csvrec-root .correctLocalRadioDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
}
.csvrec-root .correctLocalOption--checked .correctLocalRadioDot {
  background: var(--seg-active-border);
}
.csvrec-root .correctLocalOptionMain {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.csvrec-root .correctLocalOptionLabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.csvrec-root .correctLocalOptionValue {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 13px;
}
.csvrec-root .correctLocalOptionDesc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.csvrec-root .correctLocalFormula {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  margin-left: 6px;
}
.csvrec-root .correctLocalContextRow--derived {
  padding-top: 6px;
  border-top: 1px dashed var(--panel-border);
  margin-top: 2px;
}
.csvrec-root .correctLocalCustomInputRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.csvrec-root .correctLocalCustomPrefix,
.csvrec-root .correctLocalCustomSuffix {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
}
.csvrec-root .correctLocalCustomInput {
  width: 200px;
  font-family: var(--mono);
  font-size: 14px;
}
.csvrec-root .correctLocalCustom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--panel-border);
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow: hidden;
}
.csvrec-root .correctLocalCustom label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.csvrec-root .correctLocalCustom label:first-child,
.csvrec-root .correctLocalCustom label:nth-child(4),
.csvrec-root .correctLocalField--wide {
  grid-column: 1 / -1;
}
.csvrec-root .correctLocalCustom label span {
  min-width: 0;
  color: var(--text-strong);
}
.csvrec-root .correctLocalCustom .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 12.5px;
}
/* Light theme */
.theme-light .csvrec-root .modal--correctLocal {
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(28,18,58,.22);
}
.theme-light .csvrec-root .correctLocalContext { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .correctLocalCard { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .correctLocalOption { background: rgba(255,255,255,.65); }
.theme-light .csvrec-root .correctLocalOption--checked { background: rgba(167,139,250,.12); }
/* auto rec issue list */
.csvrec-root .autoRecIssueList {
  display: flex; flex-direction: column;
  gap: 8px;
}
.csvrec-root .autoRecLegend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* text summary */
.csvrec-root .autoRecRunSummary {
  padding: 6px 4px 4px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .autoRecRunSummaryLine {
  font-size: 14px;
  color: var(--text-default);
}
.csvrec-root .autoRecRunSummaryLine strong { color: var(--text-strong); }
.csvrec-root .autoRecRunSummaryLine--meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.csvrec-root .autoRecDotSep { color: var(--text-faint); }
.csvrec-root .autoRecCleanText strong { color: #6ee7b7; }
.csvrec-root .autoRecWarnText  strong { color: #fde68a; }
.csvrec-root .autoRecFailText  strong { color: #fecaca; }
/* providers header row */
.csvrec-root .autoRecIssueHeader {
  display: flex; align-items: center;
  gap: 12px;
  padding: 4px 14px 8px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 4px;
}
.csvrec-root .autoRecIssueHeader .eyebrow-soft {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
/* mismatches column with colored dot */
.csvrec-root .autoRecMismatches {
  width: 240px;
  flex: 0 0 240px;
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  color: var(--text-default);
  white-space: nowrap;
}
.csvrec-root .autoRecDot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.csvrec-root .autoRecDot--rose    { background: #fb7185; box-shadow: 0 0 0 2px rgba(251,113,133,.20); }
.csvrec-root .autoRecDot--amber   { background: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.20); }
.csvrec-root .autoRecDot--emerald { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.20); }
.csvrec-root .autoRecMismatches--rose .mono    { color: #fecaca; }
.csvrec-root .autoRecMismatches--amber .mono   {
  color: #fde68a;
}
.csvrec-root .autoRecMismatches--emerald .mono { color: var(--text-muted); }
.csvrec-root .autoRecMismatches .mono { white-space: nowrap; }
.csvrec-root .autoRecIssueRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
}
.csvrec-root .autoRecIssueRow .pill { flex: 0 0 auto; }
.csvrec-root .autoRecIssueMain {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csvrec-root .autoRecIssueMain strong { color: var(--text-strong); }
.csvrec-root .autoRecIssueEndpoint {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.csvrec-root .autoRecIssueDivider {
  color: var(--text-faint);
}
.csvrec-root .autoRecIssueSummary {
  color: var(--text-default);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csvrec-root .autoRecIssueRow .ghost.small {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 96px;
  justify-content: center;
}
/* clean providers collapsible */
.csvrec-root .modalCardToggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.csvrec-root .autoRecCleanList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-top: 10px;
}
.csvrec-root .autoRecCleanRow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  font-size: 12px;
}
.csvrec-root .autoRecCleanRow strong { color: var(--text-strong); }
.csvrec-root .autoRecCleanEndpoint { color: var(--text-muted); font-size: 11px; }
.csvrec-root .autoRecCleanRows {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .modalHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-header-fill);
}
.csvrec-root .modalHeadLeft { min-width: 0; }
.csvrec-root .modalHeadRight {
  display: flex; align-items: center; gap: 10px;
}
.csvrec-root .modalTitleBig {
  margin-top: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.005em;
}
.csvrec-root .modalClose {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--btn-ghost-border);
  background: transparent;
  color: var(--btn-ghost-text);
  cursor: pointer;
  font-size: 13px;
}
.csvrec-root .modalClose:hover {
  background: var(--btn-ghost-hover-bg);
  color: #fff;
}

.csvrec-root .modalBody {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
}

.csvrec-root .modalKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.csvrec-root .modalKpi {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.csvrec-root .modalKpiVal {
  margin-top: 2px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.csvrec-root .modalKpiVal.pos { color: #6ee7b7; }
.csvrec-root .modalKpiVal.warn { color: #fde68a; }
.csvrec-root .modalKpiNote {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* generic modal card */
.csvrec-root .modalCard {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.csvrec-root .modalCard > .eyebrow { color: var(--text-label); }
.csvrec-root .modalCardHead {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* sources rows */
.csvrec-root .modalSourceRow {
  display: flex; align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.05);
}
.csvrec-root .modalSourceRow:first-of-type { border-top: none; padding-top: 0; }
.csvrec-root .modalSourceTag {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(122,162,255,.14);
  color: #d0dcff;
  font-weight: 700;
  font-size: 12px;
}
.csvrec-root .modalSourceMain {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.csvrec-root .modalSourceMain strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.csvrec-root .modalSourceMeta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* settings grid */
.csvrec-root .modalSettingsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px 16px;
}
.csvrec-root .modalSettingsVal {
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.csvrec-root .modalSettingsVal.mono { font-family: var(--mono); font-size: 12.5px; }

/* mini diff table */
.csvrec-root .modalMiniTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 4px;
}
.csvrec-root .modalMiniTable th {
  text-align: left;
  padding: 8px 10px;
  color: var(--table-head-text);
  font-weight: 650;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(255,255,255,.03);
}
.csvrec-root .modalMiniTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text-default);
}
.csvrec-root .modalMiniTable tbody tr:last-child td { border-bottom: none; }
.csvrec-root .modalDiffWarn { color: #fde68a; text-align: right; }
.csvrec-root .modalDiffNeg { color: #fecaca; text-align: right; }

/* modal foot */
.csvrec-root .modalFoot {
  display: flex; align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--panel-border);
  background: rgba(0,0,0,.10);
}
.csvrec-root .modalFootDanger {
  color: #ffd7df;
  border-color: rgba(255,107,136,.35);
  background: rgba(255,107,136,.08);
}
.csvrec-root .modalFootDanger:hover {
  border-color: rgba(255,107,136,.55);
  background: rgba(255,107,136,.14);
  color: #fff;
}

/* ── full result view ─────────────────────────────────────── */
.csvrec-root .resultTabsRow {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0,0,0,.08);
}
.csvrec-root .resultTabsRight { display: flex; gap: 8px; }

.csvrec-root .diff-tabs {
  display: flex; gap: 6px;
}
.csvrec-root .diff-tab {
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center;
  gap: 8px;
  transition: all .15s ease;
}
.csvrec-root .diff-tab:hover {
  background: rgba(255,255,255,.08);
  color: var(--text-strong);
}
.csvrec-root .diff-tab--active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(46,16,101,.25);
}
.csvrec-root .diffTabCount {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: inherit;
  font-weight: 700;
}
.csvrec-root .diff-tab--active .diffTabCount {
  background: rgba(0,0,0,.30);
  color: #fff;
}

/* filters row */
.csvrec-root .resultFilters {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .resultFiltersLeft {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.csvrec-root .quickChip {
  display: inline-flex; align-items: center;
  gap: 6px;
  border: 1px solid var(--seg-idle-border);
  border-radius: 999px;
  background: var(--seg-idle-bg);
  color: var(--seg-idle-text);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.csvrec-root .quickChip:hover {
  border-color: rgba(103,232,249,.30);
  background: rgba(255,255,255,.08);
}
.csvrec-root .quickChip--active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(46,16,101,.25);
}

/* table */
.csvrec-root .resultTableWrap {
  overflow-x: auto;
}
.csvrec-root .resultTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.csvrec-root .resultTable thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--table-head-text);
  font-weight: 700;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.csvrec-root .resultTable tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--table-row-border);
  white-space: nowrap;
}
.csvrec-root .resultRow {
  cursor: pointer;
  transition: background .12s ease;
}
.csvrec-root .resultRow:hover {
  background: var(--table-row-hover-bg);
}
.csvrec-root .resultRow--amount td {
  background: rgba(251,191,36,.05);
}
.csvrec-root .resultRow--amount:hover td {
  background: rgba(251,191,36,.10);
}
.csvrec-root .resultRow--status td {
  background: rgba(255,107,136,.05);
}
.csvrec-root .resultRow--status:hover td {
  background: rgba(255,107,136,.10);
}
.csvrec-root .resultRow--selected td {
  background: rgba(167,139,250,.16) !important;
  box-shadow: inset 2px 0 0 var(--seg-active-border);
}
.csvrec-root .resultTable .stickyCol {
  position: sticky;
  left: 0;
  background: rgba(22,17,53,.92);
  z-index: 1;
}
.csvrec-root .resultTable .resultRow--amount .stickyCol {
  background: linear-gradient(rgba(251,191,36,.05), rgba(251,191,36,.05)), rgba(22,17,53,.92);
}
.csvrec-root .resultTable .resultRow--status .stickyCol {
  background: linear-gradient(rgba(255,107,136,.05), rgba(255,107,136,.05)), rgba(22,17,53,.92);
}
.csvrec-root .resultTable .resultRow--selected .stickyCol {
  background: rgba(167,139,250,.20);
}

/* pagination */
.csvrec-root .resultPager {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--panel-border);
  background: rgba(0,0,0,.08);
}
.csvrec-root .resultPagerLeft {
  display: flex; align-items: center; gap: 6px;
}
.csvrec-root .resultPagerRight {
  display: flex; align-items: center; gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — override all tokens when wrapped in .theme-light
   ═══════════════════════════════════════════════════════════════ */
.theme-light .csvrec-root {
  --background: #f4f1ec;
  --workspace-background-image:
    radial-gradient(circle at 16% 10%, rgba(168,85,247,.22), transparent 35%),
    radial-gradient(circle at 88% 4%, rgba(34,211,238,.18), transparent 35%),
    linear-gradient(135deg, rgba(196,181,253,.28), transparent 40%),
    linear-gradient(225deg, rgba(165,243,252,.24), transparent 45%),
    radial-gradient(ellipse at top, #efe9f6 0%, #f4f1ec 50%, #ece5dc 100%);

  --panel-bg: rgba(255,255,255,.78);
  --panel-bg-strong: rgba(255,255,255,.92);
  --panel-border: rgba(28,18,58,.10);
  --panel-border-strong: rgba(124,58,237,.40);
  --panel-base: rgba(255,255,255,.88);
  --panel-overlay: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.22));
  --panel-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 6px 18px rgba(28,18,58,.06),
    0 18px 42px rgba(28,18,58,.08);
  --panel-soft-bg: rgba(255,255,255,.55);
  --panel-soft-border: rgba(28,18,58,.08);
  --panel-header-fill:
    linear-gradient(135deg, rgba(139,92,246,.10), rgba(14,165,233,.05) 52%, rgba(16,185,129,.05)),
    rgba(255,255,255,.55);

  --header-base: rgba(255,255,255,.78);
  --header-gradient: linear-gradient(135deg, rgba(139,92,246,.14), rgba(14,165,233,.07) 48%, rgba(16,185,129,.07));
  --header-shadow: 0 6px 18px rgba(28,18,58,.06);

  --text-strong: #1c123a;
  --text-default: #2b2152;
  --text-muted: rgba(28,18,58,.62);
  --text-faint: rgba(28,18,58,.42);
  --text-subtle: rgba(28,18,58,.36);
  --text-label: #7c3aed;
  --text-label-soft: rgba(124,58,237,.62);

  --input-bg: rgba(255,255,255,.85);
  --input-border: rgba(28,18,58,.16);
  --input-placeholder: rgba(28,18,58,.40);
  --input-text: #1c123a;
  --input-focus-border: rgba(124,58,237,.55);
  --input-focus-ring: rgba(124,58,237,.18);

  --btn-primary-bg: linear-gradient(to right, #7c3aed, #c026d3);
  --btn-primary-hover-bg: linear-gradient(to right, #6d28d9, #a21caf);
  --btn-primary-border: rgba(124,58,237,.30);
  --btn-primary-shadow:
    0 8px 16px -4px rgba(124,58,237,.32),
    0 4px 6px -4px rgba(124,58,237,.20);

  --btn-ghost-border: rgba(28,18,58,.14);
  --btn-ghost-text: #6d28d9;
  --btn-ghost-hover-bg: rgba(124,58,237,.08);
  --btn-ghost-hover-text: #4c1d95;

  --seg-active-bg: rgba(124,58,237,.92);
  --seg-active-border: #6d28d9;
  --seg-active-text: #ffffff;
  --seg-active-shadow: 0 8px 14px -3px rgba(124,58,237,.32);
  --seg-idle-bg: rgba(255,255,255,.55);
  --seg-idle-border: rgba(28,18,58,.10);
  --seg-idle-text: #2b2152;
  --seg-idle-hover-bg: rgba(124,58,237,.06);
  --seg-idle-hover-border: rgba(124,58,237,.30);

  --table-head-bg: rgba(255,255,255,.70);
  --table-head-text: rgba(124,58,237,.85);
  --table-head-border: rgba(28,18,58,.10);
  --table-row-border: rgba(28,18,58,.06);
  --table-row-hover-bg: rgba(124,58,237,.05);

  --notice-warning-bg: rgba(245,158,11,.12);
  --notice-warning-border: rgba(245,158,11,.45);
  --notice-warning-text: #92400e;
}

/* — Specific token-light overrides for elements that hardcode colors — */

.theme-light .csvrec-root .brandTitle,
.theme-light .csvrec-root .pageHeaderTitle,
.theme-light .csvrec-root .panelTitle,
.theme-light .csvrec-root .sideBrandTitle,
.theme-light .csvrec-root .modalTitleBig,
.theme-light .csvrec-root .metricCardValue {
  color: var(--text-strong);
}

.theme-light .csvrec-root .pageHeaderSub,
.theme-light .csvrec-root .sideBrandSub {
  color: var(--text-muted);
}

/* sidenav icon tints — bump opacity for visibility on light */
.theme-light .csvrec-root .icon-csv { background: rgba(96,127,229,.18); }
.theme-light .csvrec-root .icon-incidents { background: rgba(239,68,68,.18); }
.theme-light .csvrec-root .icon-bot { background: rgba(59,130,246,.18); }
.theme-light .csvrec-root .icon-auto { background: rgba(34,197,94,.20); }
.theme-light .csvrec-root .icon-plan { background: rgba(59,130,246,.18); }
.theme-light .csvrec-root .icon-admin { background: rgba(139,92,246,.20); }
.theme-light .csvrec-root .icon-theme { background: rgba(251,191,36,.32); }
.theme-light .csvrec-root .icon-logout { background: rgba(239,68,68,.16); }
.theme-light .csvrec-root .icon-user { background: rgba(100,116,139,.18); }
.theme-light .csvrec-root .sideNavIcon { box-shadow: inset 0 1px 0 rgba(255,255,255,.60); }

/* nav active — purple gradient with white text stays the same */
.theme-light .csvrec-root .sideNavItem.active { color: #fff; }
.theme-light .csvrec-root .sideNavItem { color: #4b3a78; }

/* add-file button (emerald) */
.theme-light .csvrec-root .add-file-btn {
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.45);
  color: #047857;
}
.theme-light .csvrec-root .add-file-btn:hover {
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.60);
  color: #065f46;
}

/* primary button text stays white */
.theme-light .csvrec-root .primary-btn { color: #fff; }

/* project switch chip */
.theme-light .csvrec-root .projectSwitch {
  background: rgba(124,58,237,.10);
  border-color: rgba(124,58,237,.30);
  color: var(--text-strong);
}
.theme-light .csvrec-root .projectSwitch:hover {
  background: rgba(124,58,237,.16);
  border-color: rgba(124,58,237,.50);
}
.theme-light .csvrec-root .projectSwitchArrow { color: #6d28d9; }

/* validation notice */
.theme-light .csvrec-root .validationNotice {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.45);
  color: #92400e;
}
.theme-light .csvrec-root .validationDot { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.20); }
.theme-light .csvrec-root .validationText { color: #92400e; }
.theme-light .csvrec-root .validationText strong { color: #1c123a; }
.theme-light .csvrec-root .validationNotice .eyebrow { color: #b45309; opacity: 1; }

/* status mapping chips — blue tint on light */
.theme-light .csvrec-root .smapChip {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.35);
  color: #4338ca;
}
.theme-light .csvrec-root .smapArrow { color: var(--text-faint); }
.theme-light .csvrec-root .smapCanonical {
  background: rgba(255,255,255,.85);
  border-color: var(--input-border);
  color: var(--text-strong);
}

/* config block */
.theme-light .csvrec-root .configHeader { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .configHeaderTitle { color: var(--text-strong); }
.theme-light .csvrec-root .configCollapseBtn {
  background: rgba(255,255,255,.65);
  border-color: var(--panel-border);
  color: var(--text-strong);
}
.theme-light .csvrec-root .smapRow {
  background: rgba(255,255,255,.45);
  border-color: var(--panel-border);
}

/* semantic pills — dark text on light tint */
.theme-light .csvrec-root .pill-emerald { background: rgba(52,211,153,.18); border-color: rgba(52,211,153,.45); color: #047857; }
.theme-light .csvrec-root .pill-amber { background: rgba(251,191,36,.20); border-color: rgba(251,191,36,.55); color: #92400e; }
.theme-light .csvrec-root .pill-rose { background: rgba(251,113,133,.18); border-color: rgba(251,113,133,.50); color: #9f1239; }
.theme-light .csvrec-root .pill-cyan { background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.50); color: #155e75; }
.theme-light .csvrec-root .pill-purple { background: rgba(167,139,250,.20); border-color: rgba(167,139,250,.50); color: #5b21b6; }
.theme-light .csvrec-root .pill-neutral { background: rgba(28,18,58,.06); border-color: rgba(28,18,58,.14); color: var(--text-default); }

/* history rows */
.theme-light .csvrec-root .historyItemName { color: var(--text-strong); }
.theme-light .csvrec-root .historyItemSub { color: var(--text-muted); }
.theme-light .csvrec-root .historyItemNum { color: var(--text-strong); }
.theme-light .csvrec-root .historyToolbar { background: rgba(255,255,255,.40); }

/* eyebrow text — fully purple, no muting */
.theme-light .csvrec-root .eyebrow { color: var(--text-label); }
.theme-light .csvrec-root .eyebrow-soft { color: var(--text-label-soft); }

/* sidenav user text */
.theme-light .csvrec-root .sideNavUser { color: var(--text-muted); }
.theme-light .csvrec-root .sideNavUserName { color: var(--text-default); }

/* ── modal — light variant ── */
.theme-light .csvrec-root .modalBackdrop {
  background: rgba(28,18,58,.35);
  backdrop-filter: blur(8px);
}
.theme-light .csvrec-root .modal--savedRun {
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(28,18,58,.22);
}
.theme-light .csvrec-root .modal--autoRecRun {
  box-shadow: var(--panel-shadow), 0 32px 80px rgba(28,18,58,.22);
}
.theme-light .csvrec-root .autoRecIssueRow {
  background: rgba(255,255,255,.55);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root .autoRecCleanRow {
  background: rgba(255,255,255,.55);
}
.theme-light .csvrec-root .modalHead { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .modalCard {
  background: rgba(255,255,255,.55);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root .modalKpi {
  background: rgba(255,255,255,.65);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root .modalKpiVal { color: var(--text-strong); }
.theme-light .csvrec-root .modalKpiVal.pos { color: #059669; }
.theme-light .csvrec-root .modalKpiVal.warn { color: #d97706; }
.theme-light .csvrec-root .modalKpiNote { color: var(--text-muted); }
.theme-light .csvrec-root .modalSourceTag { background: rgba(99,102,241,.18); color: #3730a3; }
.theme-light .csvrec-root .modalSourceMeta { color: var(--text-muted); }
.theme-light .csvrec-root .modalSettingsVal { color: var(--text-strong); }
.theme-light .csvrec-root .modalFoot { background: rgba(255,255,255,.45); border-top-color: var(--panel-border); }
.theme-light .csvrec-root .modalFootDanger {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.40);
  color: #b91c1c;
}
.theme-light .csvrec-root .modalFootDanger:hover {
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.60);
  color: #991b1b;
}
.theme-light .csvrec-root .modalClose {
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
}
.theme-light .csvrec-root .modalClose:hover {
  background: var(--btn-ghost-hover-bg);
  color: var(--btn-ghost-hover-text);
}

/* ── full result view — light variant ── */
.theme-light .csvrec-root .resultTabsRow { background: rgba(255,255,255,.40); }
.theme-light .csvrec-root .diff-tab {
  background: rgba(255,255,255,.55);
  border-color: var(--panel-border);
  color: var(--text-default);
}
.theme-light .csvrec-root .diff-tab:hover {
  background: rgba(255,255,255,.80);
  color: var(--text-strong);
}
.theme-light .csvrec-root .diff-tab--active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: #fff;
  box-shadow: var(--seg-active-shadow);
}
.theme-light .csvrec-root .diffTabCount { background: rgba(28,18,58,.08); color: inherit; }
.theme-light .csvrec-root .diff-tab--active .diffTabCount { background: rgba(0,0,0,.20); color: #fff; }
.theme-light .csvrec-root .quickChip {
  background: rgba(255,255,255,.55);
  border-color: var(--panel-border);
  color: var(--text-default);
}
.theme-light .csvrec-root .quickChip:hover {
  background: rgba(255,255,255,.80);
}
.theme-light .csvrec-root .quickChip--active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: #fff;
  box-shadow: var(--seg-active-shadow);
}

/* result table — amount mismatch & status mismatch tints */
.theme-light .csvrec-root .resultRow--amount td { background: rgba(251,191,36,.10); }
.theme-light .csvrec-root .resultRow--amount:hover td { background: rgba(251,191,36,.16); }
.theme-light .csvrec-root .resultRow--status td { background: rgba(251,113,133,.10); }
.theme-light .csvrec-root .resultRow--status:hover td { background: rgba(251,113,133,.16); }
.theme-light .csvrec-root .resultRow--selected td {
  background: rgba(167,139,250,.20) !important;
  box-shadow: inset 2px 0 0 #6d28d9;
}
.theme-light .csvrec-root .resultTable .stickyCol { background: rgba(255,255,255,.96); }
.theme-light .csvrec-root .resultTable .resultRow--amount .stickyCol {
  background: linear-gradient(rgba(251,191,36,.10), rgba(251,191,36,.10)), rgba(255,255,255,.96);
}
.theme-light .csvrec-root .resultTable .resultRow--status .stickyCol {
  background: linear-gradient(rgba(251,113,133,.10), rgba(251,113,133,.10)), rgba(255,255,255,.96);
}
.theme-light .csvrec-root .resultTable .resultRow--selected .stickyCol {
  background: rgba(167,139,250,.22);
}
.theme-light .csvrec-root .modalDiffWarn { color: #d97706; }
.theme-light .csvrec-root .modalDiffNeg { color: #b91c1c; }
.theme-light .csvrec-root .resultPager { background: rgba(255,255,255,.40); }

/* — Light theme — final shadow + ghost on the existing buttons — */
.theme-light .csvrec-root .ghost { color: var(--btn-ghost-text); }
.theme-light .csvrec-root .ghost:hover { color: var(--btn-ghost-hover-text); }
.theme-light .csvrec-root .shellToggle { color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); }

/* annotations (red pins on the BEFORE) */

.csvrec-anno {
  position: absolute;
  z-index: 30;
  pointer-events: none;
}
.csvrec-anno-pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ff6b88;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255,107,136,.25), 0 4px 12px rgba(0,0,0,.4);
}
.csvrec-anno-pin.good {
  background: #6ee7b7;
  color: #0e1f1a;
  box-shadow: 0 0 0 3px rgba(110,231,183,.22), 0 4px 12px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════════════
   INCIDENTS — page-specific elements
   ═══════════════════════════════════════════════════════════════ */

/* — BEFORE specific — */
.csvrec-root .incHeaderActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csvrec-root .incSegmented {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
}
.csvrec-root .incSegmented button {
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--seg-idle-text);
  font-size: 12px;
  cursor: pointer;
}
.csvrec-root .incSegmented button.active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: var(--seg-active-text);
  box-shadow: var(--seg-active-shadow);
}

.csvrec-root .incControlsBar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0,0,0,.06);
}
.csvrec-root .incControlsBar select.input,
.csvrec-root .incControlsBar input.input {
  font-size: 12px;
  padding: 5px 8px;
}

.csvrec-root .incQuickChipsBefore { display: flex; gap: 6px; padding: 8px 14px 4px; }
.csvrec-root .incTrendBefore { padding: 0 14px 8px; }

.csvrec-root .incSubHeader {
  padding: 10px 14px 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-default);
  display: flex; align-items: center; gap: 8px;
}
.csvrec-root .incSubCount { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.csvrec-root .incTableWrap {
  margin: 0 14px 8px;
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,.10);
}
.csvrec-root .incTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.csvrec-root .incTable thead th {
  text-align: left;
  padding: 7px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-label-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(255,255,255,.02);
  white-space: nowrap;
}
.csvrec-root .incTable tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--table-row-border);
  white-space: nowrap;
  color: var(--text-default);
}
.csvrec-root .incTable input[type="checkbox"] { width: 14px; height: 14px; min-width: 14px; }
.csvrec-root .metricCardValueOld {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* — AFTER specific — */
.csvrec-root .incTabsRow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.csvrec-root .incTabsRight { display: flex; align-items: center; gap: 10px; }

.csvrec-root .incSegmentedBig {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
  backdrop-filter: blur(16px);
}
.csvrec-root .incSegmentedBig button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--seg-idle-text);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.csvrec-root .incSegmentedBig button.active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: var(--seg-active-text);
  box-shadow: var(--seg-active-shadow);
}
.csvrec-root .incTabCount {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: inherit;
  font-weight: 700;
}
.csvrec-root .incSegmentedBig button.active .incTabCount { background: rgba(0,0,0,.30); color: #fff; }

.csvrec-root .incQueueBoard {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
}
.csvrec-root .incQueueBoard button {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--seg-idle-text);
  font-size: 12px;
  cursor: pointer;
}
.csvrec-root .incQueueBoard button.active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  color: var(--seg-active-text);
  box-shadow: var(--seg-active-shadow);
}

.csvrec-root .incToolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.csvrec-root .incToolbarLeft,
.csvrec-root .incToolbarRight {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.csvrec-root .incChipCount {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  color: inherit;
  font-weight: 700;
}
.csvrec-root .incFiltersBtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  font-size: 12.5px;
  cursor: pointer;
  font-family: var(--sans);
}
.csvrec-root .incFiltersBtn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(103,232,249,.30);
}
.csvrec-root .incFiltersChip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--seg-active-bg);
  color: #fff;
  font-weight: 700;
}

/* After table cells */
.csvrec-root .incTableAfter td { padding: 12px 14px; }
.csvrec-root .incProvCell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csvrec-root .incProvCell strong { color: var(--text-strong); font-size: 13.5px; font-weight: 600; }
.csvrec-root .incProvReason { color: var(--text-muted); font-size: 11.5px; }
.csvrec-root .incAssigneeCell { display: flex; align-items: center; gap: 6px; }
.csvrec-root .incAssigneeName { font-family: var(--mono); font-size: 12.5px; color: var(--text-default); }
.csvrec-root .incRespNote { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.csvrec-root .incDeadlineCell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csvrec-root .incDeadlineCell .mono { font-size: 12px; color: var(--text-default); }
.csvrec-root .incCountdown { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.csvrec-root .incCountdown--overdue { color: #fecaca; font-weight: 700; }
.csvrec-root .incInfoCell { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.csvrec-root .incInfoTag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-border);
}
.csvrec-root .incInfoMenu {
  width: 26px; height: 26px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.csvrec-root .incCollapsedHeader { cursor: pointer; }
.csvrec-root .incCollapseArrow { color: var(--text-muted); font-size: 12px; }

/* — light overrides — */
.theme-light .csvrec-root .incSegmented { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .incSegmented button { color: var(--text-default); }
.theme-light .csvrec-root .incSegmented button.active { color: #fff; }

.theme-light .csvrec-root .incControlsBar { background: rgba(255,255,255,.40); }

.theme-light .csvrec-root .incTableWrap {
  background: rgba(255,255,255,.50);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root .incTable thead th {
  background: rgba(255,255,255,.65);
  color: var(--text-label-soft);
}

.theme-light .csvrec-root .incSegmentedBig { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .incSegmentedBig button { color: var(--text-default); }
.theme-light .csvrec-root .incSegmentedBig button.active { color: #fff; }
.theme-light .csvrec-root .incTabCount { background: rgba(28,18,58,.08); color: inherit; }
.theme-light .csvrec-root .incSegmentedBig button.active .incTabCount { background: rgba(0,0,0,.20); color: #fff; }
.theme-light .csvrec-root .incQueueBoard { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .incQueueBoard button { color: var(--text-default); }
.theme-light .csvrec-root .incQueueBoard button.active { color: #fff; }

.theme-light .csvrec-root .incFiltersBtn {
  background: rgba(255,255,255,.65);
  border-color: var(--panel-border);
  color: var(--text-default);
}
.theme-light .csvrec-root .incFiltersBtn:hover { background: rgba(255,255,255,.85); }
.theme-light .csvrec-root .incChipCount { background: rgba(28,18,58,.08); }
.theme-light .csvrec-root .incFiltersChip { background: var(--seg-active-bg); color: #fff; }

.theme-light .csvrec-root .incInfoTag {
  background: rgba(255,255,255,.55);
  border-color: var(--panel-border);
  color: var(--text-muted);
}
.theme-light .csvrec-root .incCountdown--overdue { color: #b91c1c; }


/* compact page header — for dense list views like Incidents */
.csvrec-root .pageHeader--compact {
  padding: 14px 22px;
}
.csvrec-root .pageHeader--compact .pageHeaderEmoji {
  font-size: 22px;
}
.csvrec-root .pageHeader--compact .pageHeaderTitle {
  font-size: 20px;
  line-height: 1.15;
}
.csvrec-root .pageHeaderLeft {
  align-items: center;
}

/* panel title with inline count */
.csvrec-root .panelTitleCount {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* sort indicators in table headers */
.csvrec-root .sortInd {
  opacity: .55;
  margin-left: 3px;
  font-size: 10px;
}

/* — Rich 13-column incident table — */
.csvrec-root .incFullTableWrap {
  overflow-x: auto;
  border-top: 1px solid var(--panel-border);
}
.csvrec-root .incFullTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.csvrec-root .incFullTable thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--table-head-text);
  font-weight: 700;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
  user-select: none;
}
.csvrec-root .incFullTable tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--table-row-border);
  white-space: nowrap;
}
.csvrec-root .incFullRow {
  cursor: pointer;
  transition: background .12s ease;
}
.csvrec-root .incFullRow:hover {
  background: var(--table-row-hover-bg);
}
.csvrec-root .incFullRow--selected td {
  background: rgba(167,139,250,.16) !important;
  box-shadow: inset 2px 0 0 var(--seg-active-border);
}
.csvrec-root .incFullTable .stickyCol {
  position: sticky;
  left: 0;
  background: rgba(22,17,53,.92);
  z-index: 1;
}
.csvrec-root .incFullRow--selected .stickyCol {
  background: rgba(167,139,250,.20) !important;
}

/* light theme overrides for the rich table */
.theme-light .csvrec-root .incFullTable .stickyCol {
  background: rgba(255,255,255,.96);
}
.theme-light .csvrec-root .incFullRow--selected td {
  background: rgba(167,139,250,.20) !important;
  box-shadow: inset 2px 0 0 #6d28d9;
}
.theme-light .csvrec-root .incFullRow--selected .stickyCol {
  background: rgba(167,139,250,.22) !important;
}


/* — page header compact: center-align + tighter padding to remove dead space — */
.csvrec-root .pageHeader--compact {
  padding: 10px 22px;
  align-items: center;
}
.csvrec-root .pageHeader--compact .pageHeaderRight {
  align-items: center;
}

/* — small variant of the big segmented control (for Queue/Board) — */
.csvrec-root .incSegmentedBig--sm button {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
}

/* — constrain panels & table wrap so 13-col tables don't overflow — */
.csvrec-root .panel { min-width: 0; }
.csvrec-root .incFullTableWrap { width: 100%; max-width: 100%; }
.csvrec-root .incFullTable { width: 100%; }
/* slightly tighter cell padding to fit 13 cols within ~990px content area */
.csvrec-root .incFullTable thead th { padding: 9px 9px; }
.csvrec-root .incFullTable tbody td { padding: 9px 9px; }


/* ═══════════════════════════════════════════════════════════════
   INCIDENTS — Inbox button (matches incSegmentedBig visual weight)
   ═══════════════════════════════════════════════════════════════ */
.csvrec-root .incInboxBtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
  color: var(--seg-idle-text);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  backdrop-filter: blur(16px);
  transition: all .15s ease;
}
.csvrec-root .incInboxBtn:hover {
  background: var(--seg-idle-hover-bg);
  border-color: var(--seg-idle-hover-border);
}

/* ═══════════════════════════════════════════════════════════════
   BOARD VIEW — kanban
   ═══════════════════════════════════════════════════════════════ */
.csvrec-root .incBoard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: flex-start;
}
.csvrec-root .incBoardCol {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-soft-bg);
  min-width: 0;
}
.csvrec-root .incBoardColHead {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--panel-border);
  min-width: 0;
}
.csvrec-root .incBoardColHead .eyebrow {
  color: var(--text-label);
  flex: 1;
  white-space: nowrap;
}
.csvrec-root .incBoardDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.csvrec-root .incBoardDot--cyan { background: #67e8f9; box-shadow: 0 0 0 3px rgba(103,232,249,.20); }
.csvrec-root .incBoardDot--amber { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.20); }
.csvrec-root .incBoardDot--rose { background: #fb7185; box-shadow: 0 0 0 3px rgba(251,113,133,.20); }
.csvrec-root .incBoardDot--emerald { background: #6ee7b7; box-shadow: 0 0 0 3px rgba(110,231,183,.20); }
.csvrec-root .incBoardColCount {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: var(--text-default);
  font-weight: 700;
  flex-shrink: 0;
}

.csvrec-root .incBoardCards {
  display: flex; flex-direction: column;
  gap: 8px;
}
.csvrec-root .incBoardCard {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--panel-overlay), var(--panel-base);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.csvrec-root .incBoardCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  border-color: var(--panel-border-strong);
}
.csvrec-root .incBoardCard--overdue {
  border-color: rgba(255,107,136,.45);
  background: linear-gradient(180deg, rgba(255,107,136,.06), rgba(255,107,136,.02)), var(--panel-base);
}
.csvrec-root .incBoardCardTop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.csvrec-root .incBoardCardId {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.csvrec-root .incBoardCardTitle {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 700;
}
.csvrec-root .incBoardCardReason {
  color: var(--text-muted);
  font-size: 12px;
}
.csvrec-root .incBoardCardFoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.csvrec-root .incBoardCardAssignee {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.csvrec-root .incBoardAvatar {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #9333ea, #06b6d4);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.csvrec-root .incBoardCardAssignee .mono {
  font-size: 11.5px;
  color: var(--text-default);
}
.csvrec-root .incBoardCardDeadline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.csvrec-root .incBoardCardDeadline--overdue {
  color: #fecaca;
  font-weight: 700;
}
.csvrec-root .incBoardAdd {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.csvrec-root .incBoardAdd:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  border-color: rgba(255,255,255,.22);
}

/* ═══════════════════════════════════════════════════════════════
   SLA REPORT
   ═══════════════════════════════════════════════════════════════ */
.csvrec-root .metricCardValueSuffix {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

.csvrec-root .slaCharts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.csvrec-root .slaChartPanel { min-width: 0; }

.csvrec-root .slaLegend {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
}
.csvrec-root .slaLegendItem {
  display: inline-flex; align-items: center; gap: 6px;
}
.csvrec-root .slaLegendDot {
  width: 8px; height: 8px;
  border-radius: 2px;
}
.csvrec-root .slaLegendDot--critical { background: #fb7185; }
.csvrec-root .slaLegendDot--high { background: #fbbf24; }
.csvrec-root .slaLegendDot--medium { background: #67e8f9; }

.csvrec-root .slaBarChart {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px 18px;
}
.csvrec-root .slaBarRow {
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  align-items: center;
  gap: 12px;
}
.csvrec-root .slaBarLabel {
  font-size: 11.5px;
  color: var(--text-default);
  text-align: right;
}
.csvrec-root .slaBarTrack {
  display: flex;
  height: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .slaBarSegment {
  height: 100%;
  transition: width .25s ease;
}
.csvrec-root .slaBarSegment--critical { background: #fb7185; }
.csvrec-root .slaBarSegment--high { background: #fbbf24; }
.csvrec-root .slaBarSegment--medium { background: #67e8f9; }
.csvrec-root .slaBarValue {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
  text-align: left;
}

.csvrec-root .slaLineChartWrap {
  padding: 18px 22px 14px;
}
.csvrec-root .slaLineChart {
  width: 100%;
  height: 160px;
}
.csvrec-root .slaLineAxis {
  display: flex; justify-content: space-between;
  padding: 6px 4px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* — light theme overrides — */
.theme-light .csvrec-root .incInboxBtn {
  background: rgba(255,255,255,.55);
  border-color: var(--panel-border);
  color: var(--text-default);
}
.theme-light .csvrec-root .incInboxBtn:hover {
  background: rgba(255,255,255,.80);
}
.theme-light .csvrec-root .incBoardCol {
  background: rgba(255,255,255,.45);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root .incBoardColCount {
  background: rgba(28,18,58,.08);
  color: var(--text-default);
}
.theme-light .csvrec-root .incBoardCard {
  background: rgba(255,255,255,.90);
  box-shadow: 0 4px 12px rgba(28,18,58,.10);
}
.theme-light .csvrec-root .incBoardCard:hover {
  box-shadow: 0 8px 18px rgba(28,18,58,.15);
}
.theme-light .csvrec-root .incBoardCard--overdue {
  border-color: rgba(239,68,68,.45);
  background: linear-gradient(180deg, rgba(239,68,68,.06), rgba(239,68,68,.02)), rgba(255,255,255,.90);
}
.theme-light .csvrec-root .incBoardCardDeadline--overdue { color: #b91c1c; }
.theme-light .csvrec-root .incBoardCardFoot { border-top-color: rgba(28,18,58,.08); }
.theme-light .csvrec-root .incBoardAdd {
  border-color: rgba(28,18,58,.14);
  color: var(--text-faint);
}
.theme-light .csvrec-root .incBoardAdd:hover {
  background: rgba(255,255,255,.55);
  color: var(--text-default);
  border-color: rgba(28,18,58,.28);
}
.theme-light .csvrec-root .slaBarTrack {
  background: rgba(28,18,58,.04);
  border-color: rgba(28,18,58,.08);
}


/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER COMPACT — tighter padding, unified button heights
   ═══════════════════════════════════════════════════════════════ */
.csvrec-root .pageHeader--compact {
  padding: 12px 22px;
  align-items: center;
  gap: 16px;
}
.csvrec-root .pageHeader--compact .pageHeaderLeft {
  align-items: center;
  gap: 12px;
}
.csvrec-root .pageHeader--compact .pageHeaderEmoji {
  font-size: 22px;
  line-height: 1;
}
.csvrec-root .pageHeader--compact .pageHeaderTitle {
  font-size: 19px;
  line-height: 1.15;
  font-weight: 700;
}
.csvrec-root .pageHeader--compact .pageHeaderRight {
  align-items: center;
  gap: 8px;
}
.csvrec-root .pageHeader--compact .projectSwitch,
.csvrec-root .pageHeader--compact .primary-btn,
.csvrec-root .pageHeader--compact .ghost {
  height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   SLA — compact cards + charts, more info-dense
   ═══════════════════════════════════════════════════════════════ */

/* compact metric cards in SLA */
.csvrec-root .metricGrid .metricCard {
  padding: 12px 14px;
}
.csvrec-root .metricCardValue {
  font-size: 26px;
  margin-top: 2px;
}

/* sla sub-grid: by priority + by department */
.csvrec-root .slaSubGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.csvrec-root .slaSubGroup {
  padding: 14px 16px;
  min-width: 0;
}
.csvrec-root .slaSubGroup + .slaSubGroup {
  border-left: 1px solid var(--panel-border);
}
.csvrec-root .slaSubHead {
  margin-bottom: 10px;
}
.csvrec-root .slaSubRows {
  display: flex; flex-direction: column;
  gap: 10px;
}
.csvrec-root .slaSubRow {
  display: grid;
  grid-template-columns: 80px 1fr 44px;
  align-items: center;
  gap: 10px;
  row-gap: 2px;
}
.csvrec-root .slaSubMeter {
  height: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .slaSubMeterBar {
  height: 100%;
  border-radius: 999px;
  transition: width .25s ease;
}
.csvrec-root .slaSubPct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: right;
}
.csvrec-root .slaSubMeta {
  grid-column: 2 / span 2;
  font-size: 11px;
  color: var(--text-muted);
}
.csvrec-root .slaSubDept {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

/* tighter chart panels */
.csvrec-root .slaBarChart {
  padding: 12px 16px;
  gap: 8px;
}
.csvrec-root .slaBarRow {
  grid-template-columns: 56px 1fr 28px;
  gap: 10px;
}
.csvrec-root .slaBarTrack {
  height: 18px;
}
.csvrec-root .slaLineChartWrap {
  padding: 12px 16px;
}
.csvrec-root .slaLineChart {
  height: 140px;
}

/* light overrides */
.theme-light .csvrec-root .slaSubMeter {
  background: rgba(28,18,58,.05);
  border-color: rgba(28,18,58,.08);
}
.theme-light .csvrec-root .slaSubGroup + .slaSubGroup {
  border-left-color: var(--panel-border);
}


/* page header compact — keep archive tabs the same size as CSV */
.csvrec-root .pageHeader--compact {
  padding: 22px 26px 22px 26px;
  min-height: 88px;
  align-items: center;
  gap: 20px;
}
.csvrec-root .pageHeader--compact .pageHeaderLeft {
  gap: 14px;
}
.csvrec-root .pageHeader--compact .pageHeaderEmoji {
  font-size: 28px;
}
.csvrec-root .pageHeader--compact .pageHeaderTitle {
  font-size: 24px;
  line-height: 1.1;
}

/* sla extended packets — 2nd grid row */
.csvrec-root .slaSubGrid + .slaSubGrid {
  border-top: 1px solid var(--panel-border);
}
.csvrec-root .slaLeaderRow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.csvrec-root .slaLeaderRow:last-child { border-bottom: none; }
.csvrec-root .slaLeaderName {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--text-default);
}
.csvrec-root .slaLeaderAvatar {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #9333ea, #06b6d4);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.csvrec-root .slaLeaderStats {
  display: flex; gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
}
.csvrec-root .slaLeaderStatVal {
  color: var(--text-strong);
  font-weight: 600;
}
.csvrec-root .slaLeaderStatLabel {
  color: var(--text-faint);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-right: 4px;
}
.theme-light .csvrec-root .slaLeaderRow { border-bottom-color: rgba(28,18,58,.06); }


/* ═══════════════════════════════════════════════════════════════
   PLAN — Inputs tab
   ═══════════════════════════════════════════════════════════════ */

/* — BEFORE specific — */
.csvrec-root .planTabsBefore {
  display: flex; gap: 4px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}
.csvrec-root .planTabsBefore button {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--panel-border);
  border-bottom: none;
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.csvrec-root .planTabsBefore button.active {
  background: var(--seg-active-bg);
  color: #fff;
  border-color: var(--seg-active-border);
}
.csvrec-root .planLayersBefore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .planLayerRow {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04);
  padding: 6px 8px;
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
}
.csvrec-root .planLayerRow label.muted {
  font-size: 10.5px;
  color: var(--text-label-soft);
  min-width: 80px;
  font-weight: 600;
}
.csvrec-root .planLayerRow select {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 6px;
}
.csvrec-root .planCalcBefore {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}
.csvrec-root .planCalcBefore label.muted {
  font-size: 10.5px;
  color: var(--text-label-soft);
  font-weight: 600;
}
.csvrec-root .planCalcBefore select,
.csvrec-root .planCalcBefore input {
  font-size: 12px;
  padding: 5px 8px;
}
.csvrec-root .planKpisBefore {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 10px 14px;
}
.csvrec-root .planKpiBefore {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  padding: 8px 10px;
}
.csvrec-root .planKpiBefore .muted {
  font-size: 10px;
  color: var(--text-label-soft);
}
.csvrec-root .planKpiValBefore {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  font-family: var(--mono);
  margin-top: 4px;
}
.csvrec-root .planChartsBefore {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 14px;
}
.csvrec-root .planChartBefore {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  overflow: hidden;
}
.csvrec-root .planChartPlaceholder {
  height: 90px;
  background:
    linear-gradient(rgba(168,85,247,.10), rgba(168,85,247,.02)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
}
.csvrec-root .planFormBefore {
  padding: 10px 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.csvrec-root .planFormGroupBefore {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  padding: 8px 10px;
}
.csvrec-root .planFormGridBefore {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.csvrec-root .planFieldBefore {
  display: flex; flex-direction: column;
  gap: 2px;
}
.csvrec-root .planFieldBefore label.muted {
  font-size: 9px;
  color: var(--text-label-soft);
  text-transform: lowercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.csvrec-root .planFieldBefore input {
  font-size: 11px;
  padding: 4px 6px;
}

/* — AFTER specific — */
.csvrec-root .planSaveBadge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(110,231,183,.35);
  background: rgba(110,231,183,.10);
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 600;
}
.csvrec-root .planSaveBadge--saved .planSaveDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110,231,183,.22);
}
.csvrec-root .planSaveBadge--dirty {
  border-color: rgba(251,191,36,.40);
  background: rgba(251,191,36,.10);
  color: #fde68a;
}
.csvrec-root .planSaveBadge--dirty .planSaveDot {
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,.22);
}

.csvrec-root .planLayersTitle {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.csvrec-root .planLayersGrid {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: stretch;
  padding: 16px 18px;
  gap: 6px;
}
.csvrec-root .planLayerCard {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
  min-width: 0;
}
.csvrec-root .planLayerHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.csvrec-root .planLayerMeta {
  font-size: 11px;
  color: var(--text-muted);
}
.csvrec-root .planLayerJoin {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  font-size: 18px;
  font-weight: 300;
}

.csvrec-root .planCalcRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-header-fill);
}
.csvrec-root .planCalcCell {
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.csvrec-root .planKpisAfter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 18px;
}
.csvrec-root .planKpiAfter {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.csvrec-root .planKpiValAfter {
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 26px;
  font-weight: 700;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.csvrec-root .planKpiSuffix {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 1px;
}
.csvrec-root .planKpiFoot {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.csvrec-root .planChartsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.csvrec-root .planChartTitle {
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
}
.csvrec-root .planChartBody {
  padding: 14px 18px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.csvrec-root .planChartAxis {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.csvrec-root .planChartLegend {
  display: flex; gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

/* scenario comparison bars */
.csvrec-root .planBarChart {
  display: flex; flex-direction: column;
  gap: 14px;
}
.csvrec-root .planBarGroup {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
}
.csvrec-root .planBarLabel {
  font-size: 12px;
  color: var(--text-default);
  font-weight: 600;
}
.csvrec-root .planBarStack {
  display: flex; flex-direction: column;
  gap: 4px;
}
.csvrec-root .planBarRow {
  display: grid;
  grid-template-columns: 1fr 50px;
  align-items: center;
  gap: 8px;
}
.csvrec-root .planBarTrack {
  height: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .planBarFill {
  height: 100%;
  border-radius: 999px;
  transition: width .25s ease;
}
.csvrec-root .planBarFill--tpv { background: #a855f7; }
.csvrec-root .planBarFill--profit { background: #6ee7b7; }
.csvrec-root .planBarVal {
  font-size: 11.5px;
  color: var(--text-default);
  text-align: right;
}

/* waterfall */
.csvrec-root .planWaterfall {
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .planWaterRow {
  display: grid;
  grid-template-columns: 140px 1fr 70px;
  align-items: center;
  gap: 12px;
}
.csvrec-root .planWaterLabel {
  font-size: 12px;
  color: var(--text-default);
}
.csvrec-root .planWaterTrack {
  height: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  overflow: hidden;
}
.csvrec-root .planWaterFill {
  height: 100%;
  border-radius: 5px;
  transition: width .25s ease;
}
.csvrec-root .planWaterFill--rev { background: #6ee7b7; }
.csvrec-root .planWaterFill--cost { background: #fb7185; }
.csvrec-root .planWaterFill--total { background: linear-gradient(to right, #a855f7, #c026d3); }
.csvrec-root .planWaterVal {
  font-size: 12px;
  color: var(--text-default);
  text-align: right;
  font-weight: 600;
}
.csvrec-root .planWaterRow--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}
.csvrec-root .planWaterRow--total .planWaterLabel,
.csvrec-root .planWaterRow--total .planWaterVal {
  color: var(--text-strong);
  font-weight: 700;
}

/* form groups */
.csvrec-root .planFormBody {
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.csvrec-root .planFormGroup {
  display: flex; flex-direction: column;
  gap: 10px;
}
.csvrec-root .planFormGroupHead {
  display: flex; flex-direction: column;
  gap: 2px;
}
.csvrec-root .planFormGroupNote {
  font-size: 11px;
  color: var(--text-muted);
}
.csvrec-root .planFormGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.csvrec-root .planField {
  display: flex; flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.csvrec-root .planFieldInputWrap {
  position: relative;
  display: flex;
}
.csvrec-root .planFieldInputWrap input {
  width: 100%;
  padding-right: 28px;
}
.csvrec-root .planFieldSuffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

/* — light overrides — */
.theme-light .csvrec-root .planSaveBadge--saved {
  background: rgba(52,211,153,.18);
  border-color: rgba(52,211,153,.45);
  color: #047857;
}
.theme-light .csvrec-root .planSaveBadge--dirty {
  background: rgba(251,191,36,.20);
  border-color: rgba(251,191,36,.55);
  color: #92400e;
}
.theme-light .csvrec-root .planLayerCard { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .planLayerJoin { color: rgba(28,18,58,.30); }
.theme-light .csvrec-root .planCalcRow { background: rgba(255,255,255,.40); border-bottom-color: var(--panel-border); }
.theme-light .csvrec-root .planKpiAfter { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .planBarTrack { background: rgba(28,18,58,.04); border-color: rgba(28,18,58,.08); }
.theme-light .csvrec-root .planWaterTrack { background: rgba(28,18,58,.04); border-color: rgba(28,18,58,.08); }
.theme-light .csvrec-root .planWaterFill--cost { background: #ef4444; }
.theme-light .csvrec-root .planWaterFill--total { background: linear-gradient(to right, #7c3aed, #c026d3); }
.theme-light .csvrec-root .planTabsBefore button { background: rgba(255,255,255,.55); color: var(--text-default); }
.theme-light .csvrec-root .planTabsBefore button.active { background: var(--seg-active-bg); color: #fff; }
.theme-light .csvrec-root .planLayerRow,
.theme-light .csvrec-root .planKpiBefore,
.theme-light .csvrec-root .planChartBefore,
.theme-light .csvrec-root .planFormGroupBefore {
  background: rgba(255,255,255,.50);
}
.theme-light .csvrec-root .planChartPlaceholder {
  background: linear-gradient(rgba(168,85,247,.08), rgba(168,85,247,.02));
}


/* — Hire plan section (merged into Inputs) — */
.csvrec-root .planHireBody {
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 20px;
}
.csvrec-root .planHireSub {
  display: flex; flex-direction: column;
  gap: 10px;
}
.csvrec-root .planHireTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.csvrec-root .planHireTable thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--table-head-text);
  font-weight: 700;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .planHireTable tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--table-row-border);
  color: var(--text-default);
}
.csvrec-root .planHireMatrixWrap {
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.csvrec-root .planHireMatrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.csvrec-root .planHireMatrix thead th {
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--table-head-text);
  font-weight: 700;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.csvrec-root .planHireMatrix .planHireMonth {
  text-align: center;
  font-family: var(--mono);
  font-weight: 600;
  width: 56px;
}
.csvrec-root .planHireMatrix tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--table-row-border);
  color: var(--text-default);
  vertical-align: middle;
}
.csvrec-root .planHireMatrix tbody tr:hover {
  background: var(--table-row-hover-bg);
}
.csvrec-root .planHireCell { padding: 4px !important; }
.csvrec-root .planHireInput {
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding: 5px 4px;
  background: rgba(255,255,255,.03);
}
.csvrec-root .planHireInput::placeholder { color: var(--text-faint); opacity: .6; }
.csvrec-root .planHireTotal {
  text-align: right;
  font-weight: 700;
  color: var(--text-strong);
  background: rgba(167,139,250,.06);
}
.csvrec-root .planHireFooter td {
  background: rgba(0,0,0,.10);
  border-top: 1px solid var(--panel-border);
  font-weight: 600;
}

.theme-light .csvrec-root .planHireMatrixWrap {
  background: rgba(255,255,255,.50);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root .planHireInput {
  background: rgba(255,255,255,.55);
}
.theme-light .csvrec-root .planHireTotal {
  background: rgba(167,139,250,.10);
}
.theme-light .csvrec-root .planHireFooter td {
  background: rgba(255,255,255,.40);
}


/* — Current team editable cells — */
.csvrec-root .planHireSubHead {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.csvrec-root .planHireRowInput {
  padding: 7px 9px;
  font-size: 12.5px;
  background: rgba(255,255,255,.04);
  width: 100%;
}
.csvrec-root .planHireRoleCell {
  display: flex; gap: 6px;
  align-items: center;
}
.csvrec-root .planHireSalaryCell {
  position: relative;
  display: flex; align-items: center;
}
.csvrec-root .planHireSalaryPrefix {
  position: absolute;
  left: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
  pointer-events: none;
}
.csvrec-root .planHireSalaryInput {
  padding-left: 20px;
  text-align: right;
}
.csvrec-root .planHireRowActions {
  display: inline-flex; gap: 4px;
  justify-content: flex-end;
}
.csvrec-root .autoRecRowActions {
  display: inline-flex; gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.csvrec-root .autoRecRowActions .ghost.small {
  padding: 5px 12px;
  min-width: 54px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.csvrec-root .panelHeader--toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 14px 18px;
}
.csvrec-root .panelHeader--toggle:hover .panelTitle {
  color: var(--text-strong);
}
/* collapsed provider health = compact full-width bar */
.csvrec-root .autoRecPhPanel--collapsed .panelHeader--toggle {
  padding: 8px 16px;
}
.csvrec-root .autoRecPhPanel--collapsed .panelTitle {
  font-size: 14px;
}
.csvrec-root .planHireRowActions button {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.csvrec-root .planHireRowDelete {
  color: #ffd7df;
  border-color: rgba(255,107,136,.30);
  background: rgba(255,107,136,.06);
}
.csvrec-root .planHireRowDelete:hover {
  border-color: rgba(255,107,136,.55);
  background: rgba(255,107,136,.14);
  color: #fff;
}
.csvrec-root .planHireRow:hover .planHireRowInput {
  background: rgba(255,255,255,.06);
}
.csvrec-root .planHireTable tbody td {
  padding: 6px 8px;
  vertical-align: middle;
}

.theme-light .csvrec-root .planHireRowInput {
  background: rgba(255,255,255,.65);
}
.theme-light .csvrec-root .planHireRow:hover .planHireRowInput {
  background: rgba(255,255,255,.85);
}
.theme-light .csvrec-root .planHireRowDelete {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.30);
  color: #b91c1c;
}
.theme-light .csvrec-root .planHireRowDelete:hover {
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.50);
  color: #991b1b;
}


/* layer cards — save actions footer */
.csvrec-root .planLayerActions {
  display: flex; gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.csvrec-root .planLayerSave {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  flex: 1;
}
.csvrec-root .planLayerActions .ghost.small {
  flex: 1;
  height: 30px;
}
.theme-light .csvrec-root .planLayerActions {
  border-top-color: rgba(28,18,58,.08);
}

/* trip planning */
.csvrec-root .planTripsBody {
  padding: 14px 18px;
}
.csvrec-root .planTripsGrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.csvrec-root .planTripCell {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.csvrec-root .planTripCell .eyebrow-soft {
  text-align: center;
  letter-spacing: .10em;
}
.csvrec-root .planTripInput {
  width: 100%;
  text-align: center;
  padding: 7px 4px;
  font-size: 13px;
  background: rgba(255,255,255,.04);
}
.csvrec-root .planTripInput::placeholder { color: var(--text-faint); opacity: .55; }
.theme-light .csvrec-root .planTripInput {
  background: rgba(255,255,255,.65);
}


/* — cost breakdown rows — */
.csvrec-root .planCostBreakdown {
  display: flex; flex-direction: column;
  gap: 8px;
}
.csvrec-root .planCostRow {
  display: grid;
  grid-template-columns: 130px 1fr 100px;
  align-items: center;
  gap: 12px;
}
.csvrec-root .planCostLabel {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--text-default);
}
.csvrec-root .planCostDot {
  width: 8px; height: 8px;
  border-radius: 2px;
}
.csvrec-root .planCostDot--rose { background: #fb7185; }
.csvrec-root .planCostDot--amber { background: #fbbf24; }
.csvrec-root .planCostDot--cyan { background: #67e8f9; }
.csvrec-root .planCostDot--emerald { background: #6ee7b7; }
.csvrec-root .planCostDot--neutral { background: rgba(216,180,254,.50); }
.csvrec-root .planCostTrack {
  height: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .planCostFill {
  height: 100%;
  border-radius: 999px;
}
.csvrec-root .planCostFill--rose { background: #fb7185; }
.csvrec-root .planCostFill--amber { background: #fbbf24; }
.csvrec-root .planCostFill--cyan { background: #67e8f9; }
.csvrec-root .planCostFill--emerald { background: #6ee7b7; }
.csvrec-root .planCostFill--neutral { background: rgba(216,180,254,.50); }
.csvrec-root .planCostStats {
  display: flex; gap: 8px;
  justify-content: flex-end;
  font-size: 11.5px;
}
.csvrec-root .planCostPct { color: var(--text-strong); font-weight: 700; }
.csvrec-root .planCostMoney { color: var(--text-muted); }

/* — provider mix — */
.csvrec-root .planProviderBody {
  padding: 14px 18px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.csvrec-root .planProviderRow {
  display: grid;
  grid-template-columns: 130px 1fr 50px 70px;
  align-items: center;
  gap: 12px;
}
.csvrec-root .planProviderName {
  font-size: 13px;
  color: var(--text-default);
  font-weight: 600;
}
.csvrec-root .planProviderTrack {
  position: relative;
  height: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .planProviderFill { height: 100%; border-radius: 999px; }
.csvrec-root .planProviderFill--rose { background: rgba(251,113,133,.55); }
.csvrec-root .planProviderFill--amber { background: rgba(251,191,36,.55); }
.csvrec-root .planProviderFill--cyan { background: rgba(103,232,249,.55); }
.csvrec-root .planProviderFill--purple { background: rgba(168,85,247,.55); }
.csvrec-root .planProviderFill--emerald { background: rgba(110,231,183,.55); }
.csvrec-root .planProviderFill--neutral { background: rgba(216,180,254,.30); }
.csvrec-root .planProviderCap {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: #ffd7df;
  font-weight: 700;
}
.csvrec-root .planProviderPct { font-size: 12px; font-weight: 700; color: var(--text-strong); text-align: right; }
.csvrec-root .planProviderTpv { font-size: 11.5px; color: var(--text-muted); text-align: right; }

.theme-light .csvrec-root .planCostTrack,
.theme-light .csvrec-root .planProviderTrack {
  background: rgba(28,18,58,.04);
  border-color: rgba(28,18,58,.08);
}
.theme-light .csvrec-root .planProviderCap { color: #b91c1c; }


/* — Monthly Plan · Compare mode — */
.csvrec-root .planCompareSelect {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel-header-fill);
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .planCompareScenarios { min-width: 0; }
.csvrec-root .planCompareChips {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.csvrec-root .planCompareChip {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  font-size: 12.5px;
  font-weight: 600;
}
.csvrec-root .planCompareChip--rose { border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.10); }
.csvrec-root .planCompareChip--purple { border-color: rgba(168,85,247,.45); background: rgba(168,85,247,.10); }
.csvrec-root .planCompareChip--emerald { border-color: rgba(110,231,183,.45); background: rgba(110,231,183,.10); }
.csvrec-root .planCompareChipDot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.csvrec-root .planCompareChipX {
  width: 18px; height: 18px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: rgba(0,0,0,.20);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.csvrec-root .planCompareChipX:hover { background: rgba(0,0,0,.35); color: #fff; }
.csvrec-root .planCompareAdd {
  padding: 6px 12px;
  border: 1px dashed rgba(255,255,255,.20);
  background: transparent;
  color: var(--text-faint);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.csvrec-root .planCompareAdd:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  border-color: rgba(255,255,255,.30);
}

.csvrec-root .planCompareKpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.csvrec-root .planCompareKpi {
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--panel-overlay), var(--panel-base);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  gap: 12px;
  box-shadow: var(--panel-shadow);
}
.csvrec-root .planCompareKpiHead {
  display: flex; align-items: center; gap: 8px;
}
.csvrec-root .planCompareKpiBody {
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .planCompareKpiRow {
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.csvrec-root .planCompareKpiVal {
  font-size: 22px;
  font-weight: 700;
}
.csvrec-root .planCompareKpiSub {
  font-size: 12.5px;
  color: var(--text-default);
}

.theme-light .csvrec-root .planCompareSelect {
  background: rgba(255,255,255,.40);
}
.theme-light .csvrec-root .planCompareAdd {
  border-color: rgba(28,18,58,.20);
  color: rgba(28,18,58,.45);
}
.theme-light .csvrec-root .planCompareAdd:hover {
  background: rgba(255,255,255,.50);
  color: var(--text-default);
  border-color: rgba(28,18,58,.40);
}
.theme-light .csvrec-root .planCompareChipX {
  background: rgba(28,18,58,.08);
  color: var(--text-muted);
}
.theme-light .csvrec-root .planCompareChipX:hover {
  background: rgba(28,18,58,.20);
  color: var(--text-strong);
}


/* — Compare mode: heatmap + multi-metric — */
.csvrec-root .planHeatmapBody { padding: 14px 18px; }
.csvrec-root .planHeatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 11.5px;
}
.csvrec-root .planHeatmapCorner { width: 130px; }
.csvrec-root .planHeatmapMonth {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--text-label-soft);
  font-weight: 700;
  padding: 4px 0;
}
.csvrec-root .planHeatmapLabel {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text-default);
  font-weight: 600;
  white-space: nowrap;
}
.csvrec-root .planHeatmapCell {
  padding: 0;
  text-align: center;
  border-radius: 4px;
  vertical-align: middle;
  height: 36px;
  transition: transform .12s ease;
}
.csvrec-root .planHeatmapCell:hover { transform: scale(1.06); }
.csvrec-root .planHeatmapVal {
  font-size: 12px;
  font-weight: 600;
}
.csvrec-root .planHeatmapTotal {
  text-align: right;
  font-size: 12.5px;
  padding-left: 14px;
  padding-right: 4px;
  font-family: var(--mono);
}
.csvrec-root .planHeatmapScale {
  display: flex; align-items: center;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
.csvrec-root .planHeatmapScaleBar {
  width: 120px; height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(168,85,247,.08), rgba(168,85,247,.85));
}

/* multi-metric */
.csvrec-root .planMultiMetricBody {
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.csvrec-root .planMultiMetricRow {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 16px;
}
.csvrec-root .planMultiMetricLabel .eyebrow {
  color: var(--text-label);
  font-size: 11px;
}
.csvrec-root .planMultiMetricBars {
  display: flex; flex-direction: column;
  gap: 6px;
}
.csvrec-root .planMultiBar {
  display: grid;
  grid-template-columns: 1fr 80px;
  align-items: center;
  gap: 10px;
}
.csvrec-root .planMultiBarTrack {
  height: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .planMultiBarFill {
  height: 100%;
  border-radius: 999px;
}
.csvrec-root .planMultiBarVal {
  font-size: 12.5px;
  text-align: right;
}

.theme-light .csvrec-root .planMultiBarTrack {
  background: rgba(28,18,58,.04);
  border-color: rgba(28,18,58,.08);
}
.theme-light .csvrec-root .planHeatmapScaleBar {
  background: linear-gradient(to right, rgba(124,58,237,.15), rgba(124,58,237,.85));
}


/* — Compare bundles — */
.csvrec-root .planBundleGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 18px;
}
.csvrec-root .planBundleCard {
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.csvrec-root .planBundleCard--rose { border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.06); }
.csvrec-root .planBundleCard--purple { border-color: rgba(168,85,247,.45); background: rgba(168,85,247,.06); }
.csvrec-root .planBundleCard--emerald { border-color: rgba(110,231,183,.45); background: rgba(110,231,183,.06); }
.csvrec-root .planBundleHead {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .planBundleDot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.csvrec-root .planBundleName {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 6px;
  min-width: 0;
}
.csvrec-root .planBundleName:focus,
.csvrec-root .planBundleName:hover {
  border-color: var(--panel-border);
  background: rgba(255,255,255,.05);
}
.csvrec-root .planBundleRemove {
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.20);
  color: var(--text-muted);
  border: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.csvrec-root .planBundleRemove:hover { background: rgba(0,0,0,.35); color: #fff; }
.csvrec-root .planBundleLayers {
  display: flex; flex-direction: column;
  gap: 8px;
}
.csvrec-root .planBundleLayer {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.csvrec-root .planBundleSelect {
  font-size: 12px;
  padding: 6px 8px;
  background: rgba(255,255,255,.06);
}

.csvrec-root .planCompareKpis--3 { grid-template-columns: repeat(3, 1fr); }

.theme-light .csvrec-root .planBundleCard { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .planBundleCard--rose { background: rgba(251,113,133,.10); }
.theme-light .csvrec-root .planBundleCard--purple { background: rgba(168,85,247,.10); }
.theme-light .csvrec-root .planBundleCard--emerald { background: rgba(110,231,183,.14); }
.theme-light .csvrec-root .planBundleRemove { background: rgba(28,18,58,.08); color: var(--text-muted); }
.theme-light .csvrec-root .planBundleSelect { background: rgba(255,255,255,.85); }


/* — Portfolio — */
.csvrec-root .planPortfolioLayers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 18px;
}
.csvrec-root .planPortfolioLayer {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
}
.csvrec-root .planPortfolioLayerMeta {
  font-size: 11px;
  color: var(--text-muted);
}

.csvrec-root .planPortfolioBars {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}
.csvrec-root .planPortfolioBarRow {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 12px;
}
.csvrec-root .planPortfolioBarLabel {
  font-size: 13px;
  color: var(--text-default);
  font-weight: 600;
  display: flex; align-items: center;
}
.csvrec-root .planPortfolioBarTrack {
  position: relative;
  height: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.csvrec-root .planPortfolioBarFill {
  height: 100%;
  border-radius: 999px;
}
.csvrec-root .planPortfolioBarTarget {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 22px;
  background: #fde68a;
  box-shadow: 0 0 0 1px rgba(0,0,0,.30);
  border-radius: 2px;
}
.csvrec-root .planPortfolioBarVal {
  font-size: 12.5px;
  color: var(--text-strong);
  font-weight: 700;
  text-align: right;
}
.csvrec-root .planPortfolioBarLegend {
  padding: 0 18px 12px;
  text-align: right;
}

.csvrec-root .planPortfolioGapBars {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}
.csvrec-root .planPortfolioGapRow {
  display: grid;
  grid-template-columns: 110px 1fr 80px;
  align-items: center;
  gap: 12px;
}
.csvrec-root .planPortfolioGapTrack {
  position: relative;
  height: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
}
.csvrec-root .planPortfolioGapZero {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(255,255,255,.30);
}
.csvrec-root .planPortfolioGapFill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 999px;
}
.csvrec-root .planPortfolioGapFill--pos { background: #6ee7b7; }
.csvrec-root .planPortfolioGapFill--neg { background: #fb7185; }

.theme-light .csvrec-root .planPortfolioLayer { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .planPortfolioBarTrack,
.theme-light .csvrec-root .planPortfolioGapTrack {
  background: rgba(28,18,58,.04);
  border-color: rgba(28,18,58,.08);
}
.theme-light .csvrec-root .planPortfolioGapZero { background: rgba(28,18,58,.30); }


/* — Per-geo portfolio table — */
.csvrec-root .planPortfolioGeoTable tbody td { padding: 8px 8px; }
.csvrec-root .planPortfolioMiniSelect {
  font-size: 11.5px;
  padding: 6px 22px 6px 8px;
  width: 100%;
  min-width: 0;
  background: rgba(255,255,255,.06);
}
.csvrec-root .planPortfolioTargetCell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 156px;
}
.csvrec-root .planPortfolioTargetPrefix {
  position: absolute;
  left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}
.csvrec-root .planPortfolioTargetSuffix {
  position: absolute;
  right: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}
.csvrec-root .planPortfolioTargetInput {
  width: 148px;
  text-align: center;
  padding: 6px 18px;
  font-size: 12.5px;
  background: rgba(255,255,255,.06);
  font-weight: 700;
}
.theme-light .csvrec-root .planPortfolioMiniSelect,
.theme-light .csvrec-root .planPortfolioTargetInput { background: rgba(255,255,255,.80); }


/* — Fix white text in inputs/selects on light theme — */
.theme-light .csvrec-root input,
.theme-light .csvrec-root select,
.theme-light .csvrec-root textarea,
.theme-light .csvrec-root .input,
.theme-light .csvrec-root .toolGroup input,
.theme-light .csvrec-root .toolGroup select,
.theme-light .csvrec-root .advField input,
.theme-light .csvrec-root .advField select,
.theme-light .csvrec-root .planBundleName,
.theme-light .csvrec-root .planHireRowInput,
.theme-light .csvrec-root .planTripInput,
.theme-light .csvrec-root .planHireInput,
.theme-light .csvrec-root .planPortfolioTargetInput,
.theme-light .csvrec-root .planPortfolioMiniSelect,
.theme-light .csvrec-root .planBundleSelect,
.theme-light .csvrec-root .smapCanonical,
.theme-light .csvrec-root .planHireSalaryInput {
  color: var(--input-text);
}
.theme-light .csvrec-root .planTripInput::placeholder,
.theme-light .csvrec-root .planHireInput::placeholder,
.theme-light .csvrec-root input::placeholder,
.theme-light .csvrec-root textarea::placeholder {
  color: rgba(28,18,58,.40);
}
.theme-light .csvrec-root select option {
  background: #ffffff;
  color: var(--input-text);
}
.theme-light .csvrec-root .planPortfolioTargetPrefix,
.theme-light .csvrec-root .planPortfolioTargetSuffix,
.theme-light .csvrec-root .planHireSalaryPrefix {
  color: var(--text-muted);
}


/* — Auto rec — */
.csvrec-root .autoReconProviderBody {
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.csvrec-root .autoReconProviderRow {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.csvrec-root .autoReconProviderRow--rose {
  border-color: rgba(251,113,133,.30);
  background: rgba(251,113,133,.06);
}
.csvrec-root .autoReconProviderRow--amber {
  border-color: rgba(251,191,36,.30);
  background: rgba(251,191,36,.06);
}
.csvrec-root .autoReconProviderInfo {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.csvrec-root .autoReconProviderInfo strong {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 600;
}
.csvrec-root .autoReconProviderIssue {
  font-size: 11.5px;
  color: var(--text-muted);
}
.theme-light .csvrec-root .autoReconProviderRow { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .autoReconProviderRow--rose { background: rgba(251,113,133,.10); }
.theme-light .csvrec-root .autoReconProviderRow--amber { background: rgba(251,191,36,.12); }

.csvrec-root .planMonthlyLayerPanel { overflow: visible; }
.csvrec-root .planCalcRow--monthly {
  grid-template-columns: minmax(110px, .7fr) minmax(130px, .8fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(110px, .7fr) auto;
  align-items: end;
}
.csvrec-root .planCalcCell--actions {
  flex-direction: row;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}
.csvrec-root .planBarRow {
  grid-template-columns: 48px 1fr 72px;
}
.csvrec-root .planBarFill--team { background: #67e8f9; }
.csvrec-root .planRevenueStack,
.csvrec-root .planCostBreakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
}
.csvrec-root .planRevenueRow,
.csvrec-root .planCostRow {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  color: var(--text-default);
  font-size: 12px;
}
.csvrec-root .planRevenueRow > span,
.csvrec-root .planCostRow > span { color: var(--text-muted); }
.csvrec-root .planRevenueRow > b,
.csvrec-root .planCostRow > b {
  text-align: right;
  font-family: var(--mono);
  color: var(--text-strong);
}
.csvrec-root .planRevenueTrack,
.csvrec-root .planCostTrack {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.csvrec-root .planRevenueTrack i,
.csvrec-root .planCostTrack i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.csvrec-root .planRevenueSegment--payins { background: #6ee7b7; }
.csvrec-root .planRevenueSegment--payouts { background: #67e8f9; }
.csvrec-root .planRevenueSegment--settlement { background: #a78bfa; }
.csvrec-root .planCostTrack i { background: #fb7185; }
.csvrec-root .planHireMatrix th:nth-child(2),
.csvrec-root .planHireMatrix td:nth-child(2) {
  width: 104px;
  max-width: 104px;
}
.csvrec-root .planHireSummaryRow td {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.csvrec-root .planHireSummaryStrip {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(34,211,238,.06));
  color: var(--text-default);
}
.csvrec-root .planHireSummaryStrip span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.csvrec-root .planHireSalaryInput {
  width: 92px;
  max-width: 92px;
}
.csvrec-root .planScenarioCompactGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.csvrec-root .planScenarioCompactGrid .planBundleLayer { padding: 8px 10px; }
.csvrec-root .planScenarioCompactGrid .planBundleLayers {
  max-height: 240px;
  overflow: auto;
}

.csvrec-root .autoRecHistoryPanel {
  min-height: clamp(760px, calc(100vh - 430px), 1120px);
  display: flex;
  flex-direction: column;
}
.csvrec-root .autoRecHistoryPanel .incFullTableWrap {
  flex: 1;
  min-height: 0;
}
.csvrec-root .csvHistoryPanel {
  min-height: clamp(460px, 62vh, 820px);
  display: flex;
  flex-direction: column;
}
.csvrec-root .csvHistoryPanel .historyList { flex: 1; }
.csvrec-root .csvCollectionRunsWrap {
  max-height: clamp(420px, 58vh, 760px);
  overflow: auto;
}
.csvrec-root .modal--incSla .incTabsRow {
  align-items: center;
  padding: 8px 20px 10px;
}
.csvrec-root .modal--incSla .slaTypeTabs { align-self: flex-start; }
.csvrec-root .modal--incSla .metricGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  padding: 0 20px 12px;
}
.csvrec-root .modal--incSla .metricCard {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════
   BOT CONTROL — provider settings page
   ═══════════════════════════════════════════════════════════════ */
.csvrec-root .botShell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  min-height: 0;
}
/* Provider list (left rail) */
.csvrec-root .botProviderList {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-overlay), var(--panel-base);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.csvrec-root .botProviderListHead {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.csvrec-root .botProviderFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.csvrec-root .botProviderFilter {
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--seg-idle-border);
  background: var(--seg-idle-bg);
  color: var(--text-label);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.csvrec-root .botProviderFilter:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(34,211,238,.30);
}
.csvrec-root .botProviderFilter--active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(34,211,238,.10);
}
.csvrec-root .botProviderListBody {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.csvrec-root .botProviderItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  width: 100%;
}
.csvrec-root .botProviderItem:hover {
  background: rgba(255,255,255,.04);
}
.csvrec-root .botProviderItem--selected {
  border-color: var(--panel-border-strong);
  background: rgba(167,139,250,.12);
}
.csvrec-root .botProviderDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.csvrec-root .botProviderDot--emerald { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.20); }
.csvrec-root .botProviderDot--amber   { background: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.20); }
.csvrec-root .botProviderDot--rose    { background: #fb7185; box-shadow: 0 0 0 2px rgba(251,113,133,.18); }
.csvrec-root .botProviderItemMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.csvrec-root .botProviderItemName {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csvrec-root .botProviderItemSub {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csvrec-root .botProviderItemNote {
  font-size: 10px;
  font-weight: 600;
  color: #fecaca;
  letter-spacing: .04em;
  text-transform: lowercase;
}

/* Detail (right pane) */
.csvrec-root .botDetail {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-overlay), var(--panel-base);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.csvrec-root .botDetailHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.csvrec-root .botDetailHead--compact { padding-bottom: 0; }
.csvrec-root .botDetailHeadLeft { min-width: 0; }
.csvrec-root .botDetailHeadRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.csvrec-root .botDetailTitle {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -.005em;
}
.csvrec-root .botDetailMeta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.csvrec-root .botDetailHeadRight {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Tabs (Reconciliation / Notifications / Diagnostics) */
.csvrec-root .botTabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  width: fit-content;
}
.csvrec-root .botTab {
  padding: 7px 14px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text-label);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.csvrec-root .botTab:hover { background: rgba(255,255,255,.06); color: var(--text-strong); }
.csvrec-root .botTab--active {
  background: rgba(147,51,234,.20);
  color: #fff;
  box-shadow: 0 1px 2px rgba(46,16,101,.20);
}
.csvrec-root .botTabCount {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
}

/* Settings cards grid (Variant 1) */
.csvrec-root .botSettingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.csvrec-root .botSettingCard {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.csvrec-root .botSettingCardTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.csvrec-root .botSettingCardMeta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.csvrec-root .botSettingCardBadge { margin-top: 2px; }

/* Diagnostics section (Variant 1) */
.csvrec-root .botDiagSection {
  border-top: 1px solid var(--panel-border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.csvrec-root .botDiagHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.csvrec-root .botChecksGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}
.csvrec-root .botCheckRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
}
.csvrec-root .botCheckDot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.csvrec-root .botCheckDot--emerald { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.20); }
.csvrec-root .botCheckDot--amber   { background: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.20); }
.csvrec-root .botCheckDot--rose    { background: #fb7185; box-shadow: 0 0 0 2px rgba(251,113,133,.20); }
.csvrec-root .botCheckMain {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.csvrec-root .botCheckName {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-default);
}
.csvrec-root .botCheckDetail {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Form list (Variant 2) */
.csvrec-root .botTabs--top { margin-bottom: 4px; }
.csvrec-root .botFormList {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.csvrec-root .botFormRow {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .botFormRow:last-child { border-bottom: 0; }
.csvrec-root .botFormRow:hover { background: rgba(255,255,255,.04); }
.csvrec-root .botFormLabel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.csvrec-root .botFormLabelMain {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.csvrec-root .botFormLabelHint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.csvrec-root .botFormValue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.csvrec-root .botFormValueText {
  font-size: 13px;
  color: var(--text-default);
}
.csvrec-root .botFormChip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-border);
  color: var(--text-default);
}
.csvrec-root .botFormToggle {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.csvrec-root .botFormToggle--on {
  background: rgba(52,211,153,.16);
  color: #6ee7b7;
}
.csvrec-root .botFormToggle--off {
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
}

/* Provider grid (Variant 3) */
.csvrec-root .botProviderGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.csvrec-root .botProviderCard {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--panel-overlay), var(--panel-base);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.csvrec-root .botProviderCard--selected {
  border-color: var(--panel-border-strong);
  box-shadow: var(--panel-shadow), 0 0 0 2px rgba(167,139,250,.30);
}
.csvrec-root .botProviderCard--emerald { border-top: 2px solid #34d399; }
.csvrec-root .botProviderCard--amber   { border-top: 2px solid #fbbf24; }
.csvrec-root .botProviderCard--rose    { border-top: 2px solid #fb7185; opacity: .8; }
.csvrec-root .botProviderCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.csvrec-root .botProviderCardName {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}
.csvrec-root .botProviderCardSub {
  font-size: 11px;
  color: var(--text-faint);
}
.csvrec-root .botProviderCardRows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.csvrec-root .botProviderCardRow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.csvrec-root .botProviderCardRow .eyebrow-soft {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
.csvrec-root .botProviderCardRow .mono { color: var(--text-default); }
.csvrec-root .botProviderCardWarn { color: #fecaca; font-family: var(--mono); font-size: 12px; }
.csvrec-root .botProviderCardFoot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--panel-border);
  margin-top: 4px;
  padding-top: 8px;
}

/* Light theme overrides */
.theme-light .csvrec-root .botProviderItem:hover { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .botProviderItem--selected { background: rgba(167,139,250,.14); }
.theme-light .csvrec-root .botSettingCard { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .botFormList { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .botCheckRow { background: rgba(255,255,255,.45); }
.theme-light .csvrec-root .botProviderItemNote { color: #b91c1c; }
.theme-light .csvrec-root .botProviderCardWarn { color: #b91c1c; }


/* ═══════════════════════════════════════════════════════════════
   ADMIN SECTION
   ═══════════════════════════════════════════════════════════════ */
/* Tabs at top of admin pages */
.csvrec-root .adminTabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  width: fit-content;
  align-self: flex-start;
}
.csvrec-root .adminTab {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--text-label);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.csvrec-root .adminTab:hover { background: rgba(255,255,255,.06); color: var(--text-strong); }
.csvrec-root .adminTab--active {
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
  border-color: var(--seg-active-border);
  box-shadow: 0 1px 2px rgba(46,16,101,.20);
}
.csvrec-root .adminTabLabel { font-size: 13px; }
.csvrec-root .adminTabCount { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.csvrec-root .adminTab--active .adminTabCount { color: rgba(255,255,255,.70); }

.csvrec-root .adminToolbarRight { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Access tab — projects cards */
.csvrec-root .adminProjectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 14px;
}
.csvrec-root .adminProjectCard {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.csvrec-root .adminProjectCard--selected {
  border-color: var(--panel-border-strong);
  background: rgba(167,139,250,.10);
}
.csvrec-root .adminProjectCardHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csvrec-root .adminProjectCardName { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.csvrec-root .adminProjectCardStats { display: flex; gap: 18px; }
.csvrec-root .adminProjectCardStats > div { display: flex; flex-direction: column; gap: 2px; }
.csvrec-root .adminProjectCardStats .eyebrow-soft,
.csvrec-root .adminProjectCardActions .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}
.csvrec-root .adminProjectCardStat { font-size: 14px; font-weight: 600; color: var(--text-default); }
.csvrec-root .adminProjectCardActions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.csvrec-root .adminProjectCardCreate {
  border: 1px dashed var(--panel-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-label);
  font: 600 13px var(--sans);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 16px;
  transition: all .15s;
  min-height: 130px;
}
.csvrec-root .adminProjectCardCreate:hover {
  border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,.06);
}
.csvrec-root .adminProjectCardCreatePlus { font-size: 24px; line-height: 1; }

/* Chips in tables */
.csvrec-root .adminChipRow { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.csvrec-root .adminChip {
  font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.25);
  color: #67e8f9;
}
.csvrec-root .adminChip--muted {
  background: rgba(255,255,255,.05);
  border-color: var(--panel-border);
  color: var(--text-muted);
}

/* Access tab table — controlled column widths */
.csvrec-root .adminUserTable { table-layout: auto; width: 100%; }
.csvrec-root .adminUserTable th,
.csvrec-root .adminUserTable td {
  padding: 12px 16px;
  vertical-align: middle;
}

/* ── Auto rec config — master-detail layout ─────────────────── */
.csvrec-root .adminAutoRecShell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  min-width: 0;
}
.csvrec-root .adminAutoRecRail {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-overlay), var(--panel-base);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.csvrec-root .adminAutoRecRailHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .adminAutoRecRailBody { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.csvrec-root .adminAutoRecRailItem {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all .15s;
}
.csvrec-root .adminAutoRecRailItem:hover { background: rgba(255,255,255,.04); }
.csvrec-root .adminAutoRecRailItem--selected {
  border-color: var(--panel-border-strong);
  background: rgba(167,139,250,.12);
}
.csvrec-root .adminAutoRecRailItemHead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.csvrec-root .adminAutoRecRailItemName { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.csvrec-root .adminAutoRecRailItemSub { font-size: 11px; color: var(--text-faint); }
.csvrec-root .adminStatusDot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.csvrec-root .adminStatusDot--emerald { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.20); }
.csvrec-root .adminStatusDot--amber   { background: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.20); }
.csvrec-root .adminStatusDot--rose    { background: #fb7185; box-shadow: 0 0 0 2px rgba(251,113,133,.20); }

.csvrec-root .adminAutoRecDetail {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 22px;
  min-width: 0;
}
.csvrec-root .adminAutoRecDetailHead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.csvrec-root .adminAutoRecDetailHeadLeft { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.csvrec-root .adminAutoRecDetailTitle {
  font-size: 22px; font-weight: 700; color: var(--text-strong);
  display: flex; align-items: center;
}
.csvrec-root .adminAutoRecDetailMeta {
  font-size: 12px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.csvrec-root .adminAutoRecDetailMeta .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
  margin-right: 4px;
}
.csvrec-root .adminAutoRecDetailHeadRight { display: flex; gap: 8px; flex-shrink: 0; }

/* 3-column form */
.csvrec-root .adminAutoRecForm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--panel-border);
}
.csvrec-root .adminAutoRecFormCol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.csvrec-root .adminAutoRecFormGroupHead {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 4px;
}
.csvrec-root .adminAutoRecFormGroupSub {
  font-size: 11px; color: var(--text-muted);
}

.csvrec-root .adminFormField { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.csvrec-root .adminFormField label.eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
  display: flex; align-items: baseline; gap: 6px;
}
.csvrec-root .adminFormFieldHint {
  font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-faint);
}

.csvrec-root .adminFormToggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-default); cursor: pointer;
  padding: 4px 0;
}
.csvrec-root .adminFormToggle input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--seg-active-border);
}
.csvrec-root .adminFormToggleHint { color: var(--text-muted); font-size: 11px; }

/* Providers section inside auto rec detail */
.csvrec-root .adminAutoRecProviders { display: flex; flex-direction: column; gap: 10px; }
.csvrec-root .adminAutoRecProvidersHead {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}

/* ── System tab ─────────────────────────────────────────────── */
.csvrec-root .adminHealthBanner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
}
.csvrec-root .adminHealthBanner--warn {
  border-color: rgba(251,191,36,.35);
  background:
    linear-gradient(180deg, rgba(251,191,36,.08), rgba(251,191,36,.02)),
    var(--panel-base);
}
.csvrec-root .adminHealthBannerTitle {
  font-size: 26px; font-weight: 700; color: var(--text-strong);
  margin-top: 4px; letter-spacing: -.005em;
}
.csvrec-root .adminHealthBannerDesc {
  margin-top: 8px; font-size: 13px; color: var(--text-muted);
}

/* Operational checks — flex-wrap list with fixed item width so rows always align */
.csvrec-root .adminOpsList {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.csvrec-root .adminOpsRow {
  flex: 1 1 calc(25% - 8px);
  min-width: 220px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  box-sizing: border-box;
}
.csvrec-root .adminOpsRow--warn { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.csvrec-root .adminOpsRow--fail { border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.06); }
.csvrec-root .adminOpsIcon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.csvrec-root .adminOpsIcon--ok   { background: rgba(52,211,153,.18); color: #6ee7b7; }
.csvrec-root .adminOpsIcon--warn { background: rgba(251,191,36,.22); color: #fde68a; }
.csvrec-root .adminOpsIcon--fail { background: rgba(251,113,133,.22); color: #fecaca; }
.csvrec-root .adminOpsMain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csvrec-root .adminOpsName { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.csvrec-root .adminOpsDetail { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* System two-column */
.csvrec-root .adminSystemTwoCol {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: start;
}

/* Statistics — flex-wrap list (fixed widths prevent grid jagged rows) */
.csvrec-root .adminStatList {
  display: flex; flex-wrap: wrap;
  gap: 12px;
}
.csvrec-root .adminStatGroup {
  flex: 1 1 calc(50% - 6px);
  min-width: 220px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  box-sizing: border-box;
}
.csvrec-root .adminStatGroupHead {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.csvrec-root .adminStatRow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px;
}
.csvrec-root .adminStatRow .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}
.csvrec-root .adminStatRow .mono {
  color: var(--text-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60%; text-align: right;
}
.csvrec-root .adminMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.csvrec-root .adminMetric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .adminMetric span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
.csvrec-root .adminMetric strong {
  font-size: 20px;
  line-height: 1.1;
  color: var(--text-strong);
}

/* Incident settings rows */
.csvrec-root .adminIncSettings { display: flex; flex-direction: column; gap: 2px; }
.csvrec-root .adminFormRow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
.csvrec-root .adminFormRow:hover { background: rgba(255,255,255,.04); }
.csvrec-root .adminFormRow .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}
.csvrec-root .adminFormRow .mono { color: var(--text-default); font-size: 13px; }

/* ── Banners (wishes) tab ───────────────────────────────────── */
.csvrec-root .adminWishBanner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(255,192,203,.16), rgba(216,180,254,.12)),
    rgba(255,255,255,.05);
  border: 1px solid rgba(216,180,254,.30);
}
.csvrec-root .adminWishBannerEmoji {
  font-size: 32px;
  line-height: 1;
}
.csvrec-root .adminWishBannerMain {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.csvrec-root .adminWishBannerHeading {
  font-size: 18px; font-weight: 600; color: var(--text-strong);
}
.csvrec-root .adminWishBannerHeading strong { color: #f9a8d4; font-weight: 700; }
.csvrec-root .adminWishBannerWish {
  font-size: 14px; color: var(--text-default);
  font-style: italic;
}
.csvrec-root .adminWishBannerDismiss {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.csvrec-root .adminBannerToggle {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px; font-weight: 600;
  font-family: var(--sans);
}
.csvrec-root .adminBannerToggle--on  { background: rgba(52,211,153,.18); color: #6ee7b7; border: 1px solid rgba(52,211,153,.35); }
.csvrec-root .adminBannerToggle--off { background: rgba(255,255,255,.05); color: var(--text-faint); border: 1px solid var(--panel-border); }

.csvrec-root .adminBannerUserTable th,
.csvrec-root .adminBannerUserTable td {
  padding: 10px 14px;
}

.csvrec-root .adminWishAddRow {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 0 12px;
}
.csvrec-root .adminWishList {
  display: flex; flex-direction: column;
  gap: 4px;
}
.csvrec-root .adminWishItem {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
}
.csvrec-root .adminWishItem:hover { background: rgba(255,255,255,.05); }
.csvrec-root .adminWishNum {
  font-size: 11px; color: var(--text-faint);
  text-align: center;
}
.csvrec-root .adminWishText { font-size: 13px; color: var(--text-default); }
.csvrec-root .adminWishActions { display: flex; gap: 4px; }

/* Light theme overrides */
.theme-light .csvrec-root .adminProjectCard { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .adminProjectCard--selected { background: rgba(167,139,250,.12); }
.theme-light .csvrec-root .adminOpsRow { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .adminStatGroup { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .adminFormRow:hover { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .adminWishItem { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .adminAutoRecRailItem:hover { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .adminAutoRecRailItem--selected { background: rgba(167,139,250,.14); }
.theme-light .csvrec-root .adminWishBanner {
  background:
    linear-gradient(135deg, rgba(255,192,203,.22), rgba(216,180,254,.16)),
    rgba(255,255,255,.65);
  border-color: rgba(124,58,237,.30);
}
.theme-light .csvrec-root .adminWishBannerHeading strong { color: #db2777; }


/* CSV collection — keep grid items top-aligned + compact metric cards */
.csvrec-root .main--airy {
  grid-auto-rows: min-content;
  align-content: start;
}
.csvrec-root .metricGrid .metricCard {
  padding: 10px 14px !important;
  min-height: 0 !important;
  gap: 4px !important;
}
.csvrec-root .metricGrid .metricCardValue {
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.05;
}
.csvrec-root .metricGrid .metricCardFoot {
  margin-top: 0;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════
   CSV COLLECTION
   ═══════════════════════════════════════════════════════════════ */
.csvrec-root .csvColAgent {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 18px 22px;
  align-items: center;
}
.csvrec-root .csvColAgentLeft {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.csvrec-root .csvColAgentTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  display: flex; align-items: center;
}
.csvrec-root .csvColAgentDesc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.csvrec-root .csvColAgentStats {
  display: grid;
  grid-template-columns: repeat(3, 160px);
  gap: 14px 24px;
}
.csvrec-root .csvColAgentStats > div {
  display: flex; flex-direction: column; gap: 4px;
}
.csvrec-root .csvColAgentStats .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}
.csvrec-root .csvColAgentStats .mono { font-size: 13px; color: var(--text-default); }
.csvrec-root .csvColAgentSmall { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Overview split — recent jobs + provider quick list */
.csvrec-root .csvColOverviewSplit {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: stretch;
  min-width: 0;
}
.csvrec-root .csvColOverviewSplit > .panel {
  display: flex;
  flex-direction: column;
}
.csvrec-root .csvColOverviewSplit .incFullTableWrap {
  flex: 1;
}
.csvrec-root .csvColOverviewSplit .csvColProviderList {
  flex: 1;
}

.csvrec-root .csvColProviderList {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 6px 10px;
}
.csvrec-root .csvColProviderGroup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.csvrec-root .csvColProviderGroup + .csvColProviderGroup {
  margin-top: 8px;
}
.csvrec-root .csvColProviderGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px 4px;
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.csvrec-root .csvColProviderGroupRows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.csvrec-root .csvColProviderRow {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.csvrec-root .csvColProviderRow:hover { background: rgba(255,255,255,.04); }
.csvrec-root .csvColProviderMain {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.csvrec-root .csvColProviderName {
  font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.csvrec-root .csvColProviderBalance {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.csvrec-root .csvColBalanceStack {
  display: grid;
  gap: 2px;
  justify-items: end;
}
.csvrec-root .csvColBalanceLine {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}
.csvrec-root .csvColBalanceLine strong {
  color: var(--text-default);
  font-weight: 650;
}

/* Archive filters */
.csvrec-root .csvColArchiveFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(255,255,255,.02);
  align-items: flex-end;
}
.csvrec-root .csvColArchiveFilterGroup {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.csvrec-root .csvColArchiveFilterGroup .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}
.csvrec-root .csvColReportToggles {
  display: inline-flex; gap: 4px;
  align-items: center;
}
.csvrec-root .csvColReportToggle {
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--seg-idle-border);
  background: var(--seg-idle-bg);
  color: var(--text-label);
  font: 600 12px var(--sans);
  cursor: pointer;
  transition: all .15s;
}
.csvrec-root .csvColReportToggle:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(34,211,238,.30);
}
.csvrec-root .csvColReportToggle--active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(34,211,238,.10);
}
.csvrec-root .csvColReportToggleCheck {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 9999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color: var(--text-default);
  cursor: pointer;
}
.csvrec-root .csvColReportToggleCheck input { accent-color: var(--seg-active-border); }

/* Manual run form — 3 column layout */
.csvrec-root .csvColManualForm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px 22px;
  align-items: stretch;
}
.csvrec-root .csvColManualFormCol {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  height: 100%;
}
.csvrec-root .csvColManualFormCol .primary-btn { margin-top: auto; }
.csvrec-root .csvColRunsTableWrap { overflow-x: hidden; }
.csvrec-root .csvColRunsTable {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.csvrec-root .csvColRunsTable th,
.csvrec-root .csvColRunsTable td {
  text-align: left;
  overflow-wrap: anywhere;
}
.csvrec-root .csvColRunIdCol { width: 54px; }
.csvrec-root .csvColRunStatusCol { width: 92px; }
.csvrec-root .csvColRunProviderCol { width: 34%; }
.csvrec-root .csvColRunReportsCol { width: 22%; }
.csvrec-root .csvColRunUpdatedCol { width: 210px; }
.csvrec-root .csvColManualSummary {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
}
.csvrec-root .csvColManualSummary > div {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px;
  font-size: 12px;
}
.csvrec-root .csvColManualSummary .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}
.csvrec-root .csvColManualSummary .mono { color: var(--text-default); font-size: 13px; }

/* Schedule cards */
.csvrec-root .csvColScheduleList {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px 18px;
}
.csvrec-root .csvColScheduleCard {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  align-items: center;
}
.csvrec-root .csvColScheduleCardLeft {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.csvrec-root .csvColScheduleCardTitle {
  font-size: 16px; font-weight: 700; color: var(--text-strong);
  display: flex; align-items: center;
}
.csvrec-root .csvColScheduleCardDesc {
  font-size: 13px; color: var(--text-default);
  margin-top: 4px;
}
.csvrec-root .csvColScheduleCardMeta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--text-muted);
  margin-top: 6px;
}
.csvrec-root .csvColScheduleCardMeta .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
  margin-right: 4px;
}
.csvrec-root .csvColScheduleCardRight {
  display: flex; align-items: flex-end; gap: 12px;
  flex-wrap: wrap;
}
.csvrec-root .csvColScheduleField {
  display: flex; flex-direction: column; gap: 4px;
}
.csvrec-root .csvColScheduleField .eyebrow-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-label-soft);
}

/* Light theme */
.theme-light .csvrec-root .csvColProviderRow:hover { background: rgba(255,255,255,.50); }
.theme-light .csvrec-root .csvColManualSummary { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .csvColScheduleCard { background: rgba(255,255,255,.55); }
.theme-light .csvrec-root .csvColArchiveFilters { background: rgba(255,255,255,.40); }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — desktop-first; degrade for tablet and mobile
   ═══════════════════════════════════════════════════════════════ */

/* < 1440px: dense ops screens still fit, just tighter */
@media (max-width: 1439px) {
  .csvrec-root .main--airy { padding: 20px 24px 24px; gap: 18px; }
  .csvrec-root .metricGrid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .csvrec-root .botSettingsGrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* < 1280px: collapse 3-col forms to 2; KPI to 2x2 */
@media (max-width: 1279px) {
  .csvrec-root .metricGrid { grid-template-columns: repeat(2, 1fr); }
  .csvrec-root .adminAutoRecForm { grid-template-columns: 1fr 1fr; }
  .csvrec-root .adminFormGrid--3 { grid-template-columns: 1fr 1fr; }
  .csvrec-root .csvColOverviewSplit { grid-template-columns: 1fr; }
  .csvrec-root .csvColManualForm { grid-template-columns: 1fr 1fr; }
  .csvrec-root .csvColAgentStats { grid-template-columns: repeat(2, 1fr); }
  .csvrec-root .adminSystemTwoCol { grid-template-columns: 1fr; }
  .csvrec-root .modalDiffTable { font-size: 12px; }
  .csvrec-root .modalDiffTable thead th,
  .csvrec-root .modalDiffRow td { padding: 12px 14px; }
}

/* < 1024px: master-detail stacks; sidebar narrower; forms single-col */
@media (max-width: 1023px) {
  .csvrec-root .sideNav { width: 200px; }
  .csvrec-root .appShell { grid-template-columns: 200px 1fr; }
  .csvrec-root .botShell,
  .csvrec-root .adminAutoRecShell { grid-template-columns: 1fr; }
  .csvrec-root .botProviderList,
  .csvrec-root .adminAutoRecRail { max-height: 320px; }
  .csvrec-root .adminAutoRecForm { grid-template-columns: 1fr; }
  .csvrec-root .adminFormGrid--2,
  .csvrec-root .adminFormGrid--3 { grid-template-columns: 1fr; }
  .csvrec-root .csvColManualForm { grid-template-columns: 1fr; }
  .csvrec-root .csvColAgentStats { grid-template-columns: repeat(2, 1fr); }
  .csvrec-root .csvColScheduleCard { grid-template-columns: 1fr; }
  .csvrec-root .csvColScheduleCardRight { flex-wrap: wrap; }
  .csvrec-root .pageHeader { padding: 16px 20px; }
  .csvrec-root .pageHeaderTitle { font-size: 20px; }
}

/* < 768px: mobile — sidebar becomes top drawer; tables scroll horizontally */
@media (max-width: 767px) {
  .csvrec-root .appShell { grid-template-columns: 1fr; }
  .csvrec-root .sideNav {
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .csvrec-root .sideBrand,
  .csvrec-root .sideNavSectionBottom { display: none; }
  .csvrec-root .sideNavSection {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .csvrec-root .sideNavItem {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
  }
  .csvrec-root .main--airy { padding: 14px 14px 18px; gap: 14px; }
  .csvrec-root .pageHeader { padding: 12px 14px; flex-direction: column; align-items: flex-start; }
  .csvrec-root .pageHeaderRight { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .csvrec-root .pageHeaderTitle { font-size: 18px; }
  .csvrec-root .pageHeaderEmoji { font-size: 22px; }
  .csvrec-root .metricGrid { grid-template-columns: 1fr; gap: 8px; }
  .csvrec-root .adminProjectGrid { grid-template-columns: 1fr; }
  .csvrec-root .adminOpsList .adminOpsRow,
  .csvrec-root .adminStatList .adminStatGroup { flex-basis: 100%; }
  .csvrec-root .botSettingsGrid,
  .csvrec-root .botChecksGrid,
  .csvrec-root .autoRecCleanList { grid-template-columns: 1fr; }
  .csvrec-root .botFormRow { grid-template-columns: 1fr; gap: 8px; }
  .csvrec-root .botFormRow > button { justify-self: start; }
  .csvrec-root .modalBackdrop { padding: 0; }
  .csvrec-root .modal--savedRun,
  .csvrec-root .modal--autoRecRun,
  .csvrec-root .modal--autoRecDiff,
  .csvrec-root .modal--correctLocal {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .csvrec-root .modalDiffActions { flex-wrap: wrap; }
  .csvrec-root .modalDiffCounters { flex-direction: column; }
  .csvrec-root .diffCounter { width: 100%; }
  .csvrec-root .autoRecIssueRow { flex-wrap: wrap; }
  .csvrec-root .autoRecIssueMain { white-space: normal; }
  .csvrec-root .incFullTableWrap,
  .csvrec-root .modalDiffTableWrap,
  .csvrec-root .resultTableWrap { overflow-x: auto; }
  .csvrec-root .adminTabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .csvrec-root .adminTab { flex-shrink: 0; }
  .csvrec-root .adminBannerCard { grid-template-columns: 36px 1fr; }
  .csvrec-root .adminBannerCardActions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .csvrec-root .csvColArchiveFilters { flex-direction: column; align-items: stretch; }
  .csvrec-root .csvColArchiveFilterGroup { width: 100%; }
}

/* Plan archive desktop analytics polish */
.csvrec-root .planChartsGrid--monthly {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.csvrec-root .planChartCard .planChartBody,
.csvrec-root .planCompareChart .planChartBody,
.csvrec-root .planPortfolioChart .planChartBody {
  min-height: 238px;
  overflow: visible;
  padding: 12px 14px 14px;
}

.csvrec-root .planChartSvg {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
}

.csvrec-root .planChartSvg .grid-line {
  stroke: rgba(255,255,255,.07);
  stroke-width: 1;
}

.csvrec-root .planProviderMixPanel {
  margin-top: 0;
}

.csvrec-root .planProviderBody,
.csvrec-root .planConcentrationBars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.csvrec-root .planProviderRow {
  display: grid;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) 54px 90px;
  align-items: center;
  gap: 12px;
}

.csvrec-root .planProviderName {
  color: var(--text-strong);
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csvrec-root .planProviderTrack {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
}

.csvrec-root .planProviderFill {
  height: 100%;
  min-width: 12px;
  border-radius: inherit;
  background: #a855f7;
}

.csvrec-root .planProviderFill--rose { background: #fb7185; }
.csvrec-root .planProviderFill--amber { background: #fbbf24; }
.csvrec-root .planProviderFill--cyan { background: #67e8f9; }
.csvrec-root .planProviderFill--purple { background: #a855f7; }
.csvrec-root .planProviderFill--emerald { background: #6ee7b7; }
.csvrec-root .planProviderFill--neutral { background: #94a3b8; }

.csvrec-root .planProviderCap {
  position: absolute;
  right: 8px;
  top: -1px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.csvrec-root .planProviderPct,
.csvrec-root .planProviderTpv {
  text-align: right;
  color: var(--text-strong);
}

.csvrec-root .planCompareToolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 320px;
}

.csvrec-root .planCompareGeo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 190px;
}

.csvrec-root .planBundleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0 18px 18px;
}

.csvrec-root .planBundleCard {
  min-width: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
  padding: 12px;
}

.csvrec-root .planBundleHead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.csvrec-root .planBundleDot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 0 4px rgba(168,85,247,.12);
}

.csvrec-root .planBundleName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-weight: 900;
}

.csvrec-root .planBundleLayers {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.csvrec-root .planBundleLayer {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.csvrec-root .planBundleSelect {
  width: 100%;
}

.csvrec-root .planCompareBreakdownTable,
.csvrec-root .planPortfolioGeoTable {
  min-width: 1120px;
}

.csvrec-root .planPortfolioGeoTable th:nth-child(5),
.csvrec-root .planPortfolioGeoTable td:nth-child(5) {
  min-width: 172px;
}

.csvrec-root .planPortfolioGeoTable .stickyCol {
  min-width: 130px;
}

.csvrec-root .planPortfolioStaticValue {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--text-strong);
  font-weight: 800;
}

.csvrec-root .planPortfolioDeleteGeo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}

.csvrec-root .planPortfolioBarFill--volume {
  background: #67e8f9;
}

.csvrec-root .planPortfolioStackTrack {
  display: flex;
  overflow: hidden;
}

.csvrec-root .planPortfolioStackTrack i {
  display: block;
  height: 100%;
}

.csvrec-root .planScenarioColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 18px 18px;
}

.csvrec-root .planScenarioListCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 360px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
}

.csvrec-root .planScenarioRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.csvrec-root .planScenarioRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}

.csvrec-root .planScenarioRow b {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-light .csvrec-root .planProviderTrack,
.theme-light .csvrec-root .planPortfolioStackTrack {
  background: rgba(57,36,100,.10);
  border-color: rgba(57,36,100,.10);
}

.theme-light .csvrec-root .planBundleCard,
.theme-light .csvrec-root .planScenarioListCard,
.theme-light .csvrec-root .planScenarioRow {
  background: rgba(255,255,255,.62);
}

.lotsFinanceRoot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100vh - 88px);
}
.lotsFinanceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lotsFinanceKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lotsFinancePanel {
  min-height: 0;
}
.csvrec-root .lotsFinanceHeader .pageHeaderEmoji {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(216,180,254,.24);
  background: rgba(139,92,246,.20);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}
.csvrec-root .lotsFinanceContent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.csvrec-root .lotsFinanceOverviewGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.csvrec-root .lotsFinanceLotsSummary {
  margin-bottom: 0;
}
.csvrec-root .lotsFinanceFundSummary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.csvrec-root .lotsFinanceSalarySummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.csvrec-root .lotsFinanceSalaryBatches {
  display: grid;
  gap: 10px;
}
.csvrec-root .lotsFinanceSalaryBatch {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
}
.csvrec-root .lotsFinanceSalaryBatch summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.csvrec-root .lotsFinanceSalaryBatch summary::-webkit-details-marker {
  display: none;
}
.csvrec-root .lotsFinanceSalaryBatchTitle,
.csvrec-root .lotsFinanceSalaryBatchStats {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.csvrec-root .lotsFinanceSalaryBatchTitle {
  flex-wrap: wrap;
}
.csvrec-root .lotsFinanceSalaryBatchTitle strong {
  color: var(--text-strong);
  font-size: 14px;
}
.csvrec-root .lotsFinanceSalaryBatchTitle span,
.csvrec-root .lotsFinanceSalaryBatchStats span {
  color: var(--text-muted);
  font-size: 12px;
}
.csvrec-root .lotsFinanceSalaryBatchStats strong {
  color: var(--text-strong);
  font-size: 13px;
}
.csvrec-root .lotsFinanceSalaryBatch .lotsFinanceTableWrap {
  border-top: 1px solid rgba(255,255,255,.08);
}
.csvrec-root .lotsFinanceOverviewCard {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 150px;
  min-width: 0;
  padding: 16px 18px;
  overflow: hidden;
}
.csvrec-root .lotsFinanceOverviewCard--wide {
  grid-column: 1 / -1;
  min-height: 0;
}
.csvrec-root .lotsFinanceOverviewCard > strong {
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.08;
}
.csvrec-root .lotsFinanceOverviewCard .lotsFinanceAccent {
  color: var(--success);
}
.csvrec-root .lotsFinanceOverviewRows {
  display: grid;
  gap: 7px;
}
.csvrec-root .lotsFinanceOverviewRow {
  display: grid;
  grid-template-columns: minmax(56px, .55fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.csvrec-root .lotsFinanceOverviewRow span,
.csvrec-root .lotsFinanceOverviewRow em,
.csvrec-root .lotsFinanceOverviewEmpty {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}
.csvrec-root .lotsFinanceOverviewRow b {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .lotsFinanceLotMatrix {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.csvrec-root .lotsFinanceLotMatrixHead,
.csvrec-root .lotsFinanceLotMatrixRow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.csvrec-root .lotsFinanceLotMatrixHead {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.csvrec-root .lotsFinanceLotMatrixRow {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.csvrec-root .lotsFinanceLotMatrixRow > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.csvrec-root .lotsFinanceLotMatrixRow span,
.csvrec-root .lotsFinanceLotMatrixRow em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .lotsFinanceLotMatrixRow strong {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .lotsFinancePanel {
  overflow: hidden;
  padding: 16px;
}
.csvrec-root .lotsFinancePanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 12px;
}
.csvrec-root .lotsFinanceActionBar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.csvrec-root .lotsFinanceRowActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.csvrec-root .lotsFinanceBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: lowercase;
}
.csvrec-root .lotsFinanceBadge--ok {
  border-color: rgba(94,234,212,.28);
  background: rgba(45,212,191,.12);
  color: var(--success);
}
.csvrec-root .lotsFinanceBadge--warn {
  border-color: rgba(251,191,36,.34);
  background: rgba(251,191,36,.10);
  color: var(--warning);
}
.csvrec-root .lotsFinanceBadge--danger {
  border-color: rgba(251,113,133,.34);
  background: rgba(251,113,133,.10);
  color: var(--danger);
}
.csvrec-root .lotsFinanceTableWrap {
  width: 100%;
  overflow-x: auto;
}
.csvrec-root .lotsFinanceTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.csvrec-root .lotsFinanceTable th,
.csvrec-root .lotsFinanceTable td {
  white-space: nowrap;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  vertical-align: middle;
}
.csvrec-root .lotsFinanceTable th {
  color: var(--text-label);
  background: rgba(255,255,255,.06);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.csvrec-root .lotsFinanceTable td:first-child,
.csvrec-root .lotsFinanceTable th:first-child {
  width: 1%;
}
.csvrec-root .lotsFinancePager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}
.csvrec-root .lotsFinancePagerControls {
  display: flex;
  gap: 8px;
}
.csvrec-root .lotsFinancePager button:disabled {
  cursor: default;
  opacity: .45;
}
.csvrec-root .lotsFinanceAlertList {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.csvrec-root .lotsFinanceAlertItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.csvrec-root .lotsFinanceAlertMain {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.csvrec-root .lotsFinanceAlertTop,
.csvrec-root .lotsFinanceAlertMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.csvrec-root .lotsFinanceAlertTop strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-strong);
}
.csvrec-root .lotsFinanceAlertMeta {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.csvrec-root .lotsFinanceAlertItem p {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}
.csvrec-root .lotsFinanceDashboardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .lotsFinanceSummaryCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
}
.csvrec-root .lotsFinanceSummaryCard strong {
  color: var(--text-strong);
  font-size: 18px;
}
.csvrec-root .lotsFinanceOverlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 28, .72);
  backdrop-filter: blur(10px);
}
.csvrec-root .lotsFinanceModal {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
}
.csvrec-root .lotsFinanceModal .modalBody {
  padding: 18px 22px;
}
.csvrec-root .lotsFinanceModalSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.csvrec-root .lotsFinanceModalMetric {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
}
.csvrec-root .lotsFinanceModalMetric span {
  color: var(--text-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.csvrec-root .lotsFinanceModalMetric strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: 17px;
  line-height: 1.15;
}
.csvrec-root .lotsFinanceModalFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--panel-border);
}
.csvrec-root .lotsFinanceFormGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .lotsFinanceFormGrid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.csvrec-root .lotsFinanceField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--text-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.csvrec-root .lotsFinanceField--wide {
  grid-column: 1 / -1;
}
.csvrec-root .lotsFinanceField input,
.csvrec-root .lotsFinanceField select,
.csvrec-root .lotsFinanceField textarea {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-strong);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.csvrec-root .lotsFinanceField input {
  height: 38px;
}
.csvrec-root .lotsFinanceField select {
  height: 38px;
  appearance: none;
}
.csvrec-root .lotsFinanceField input[readonly] {
  border-color: rgba(168, 139, 250, .45);
  background: rgba(168, 139, 250, .12);
}
.csvrec-root .lotsFinanceCoverAmount {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,.05);
  color: var(--text-strong);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.csvrec-root .lotsFinanceField textarea {
  min-height: 98px;
  resize: vertical;
  line-height: 1.5;
}
.sideNavIcon--lots-finance {
  background: rgba(139, 92, 246, 0.22);
}

@media (max-width: 1180px) {
  .csvrec-root .planChartsGrid--monthly,
  .csvrec-root .planBundleGrid,
  .csvrec-root .planScenarioColumns {
    grid-template-columns: 1fr;
  }

  .csvrec-root .planCompareToolbar {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
}

/* Print — hide nav and topbar; flatten panels */
@media print {
  .csvrec-root .topbar,
  .csvrec-root .sideNav { display: none; }
  .csvrec-root .appShell { grid-template-columns: 1fr; }
  .csvrec-root,
  .csvrec-root .panel,
  .csvrec-root .pageHeader {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .csvrec-root .pill {
    background: #fff !important;
    border: 1px solid #999 !important;
    color: #000 !important;
  }
}