:root{
  color-scheme: dark;

  --background:#090b23;
  --foreground:#f8fafc;
  --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-bg-strong:rgba(255,255,255,.15);
  --panel-border:rgba(255,255,255,.20);
  --panel-border-strong:rgba(216,180,254,.48);
  --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);
  --panel-surface:var(--panel-overlay), var(--panel-base);
  --panel-color:var(--panel-base);
  --surface-color:var(--panel-base);

  --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);

  --nav-surface:var(--panel-surface);
  --nav-border:var(--panel-border);
  --nav-item-text:var(--text-muted);
  --nav-item-hover-bg:var(--seg-idle-hover-bg);
  --nav-item-hover-border:var(--seg-idle-hover-border);
  --nav-active-bg:var(--seg-active-bg);
  --nav-active-border:var(--seg-active-border);
  --nav-active-text:var(--seg-active-text);
  --nav-icon-bg:var(--seg-idle-bg);

  --purple:#a855f7;
  --cyan:#67e8f9;
  --emerald:#6ee7b7;
  --amber:#fbbf24;
  --danger:#ff6b88;
  --danger-bg:rgba(255,107,136,.12);

  --text-strong:#ffffff;
  --text-default:#f8fafc;
  --text-muted:rgba(216,180,254,.80);
  --text-faint:rgba(255,255,255,.45);
  --text-subtle:rgba(255,255,255,.40);
  --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);
  --input-text:#ffffff;
  --input-focus-border:rgba(103,232,249,.70);
  --input-focus-ring:rgba(34,211,238,.30);
  --select-option-bg:#1e1b4b;

  --btn-primary-bg:linear-gradient(to right, #9333ea, #c026d3);
  --btn-primary-hover-bg:linear-gradient(to right, #a855f7, #d946ef);
  --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-secondary-bg:rgba(255,255,255,.10);
  --btn-secondary-border:rgba(255,255,255,.15);
  --btn-secondary-text:#ede9fe;
  --btn-secondary-hover-bg:rgba(255,255,255,.15);
  --btn-secondary-hover-border:rgba(103,232,249,.35);
  --btn-secondary-hover-text:#ffffff;

  --btn-ghost-border:rgba(255,255,255,.15);
  --btn-ghost-text:#d8b4fe;
  --btn-ghost-hover-bg:rgba(255,255,255,.10);
  --btn-ghost-hover-text:#ffffff;

  --seg-active-bg:rgba(147,51,234,.70);
  --seg-active-border:#c084fc;
  --seg-active-text:#ffffff;
  --seg-active-shadow:0 10px 15px -3px rgba(46,16,101,.25);
  --seg-idle-bg:rgba(255,255,255,.05);
  --seg-idle-border:rgba(255,255,255,.15);
  --seg-idle-text:#ede9fe;
  --seg-idle-hover-bg:rgba(255,255,255,.10);
  --seg-idle-hover-border:rgba(103,232,249,.30);

  --table-head-bg:rgba(255,255,255,.05);
  --history-detail-sticky-bg:#302a46;
  --table-head-text:rgba(216,180,254,.90);
  --table-head-border:rgba(255,255,255,.10);
  --table-row-border:rgba(255,255,255,.05);
  --table-row-hover-bg:rgba(255,255,255,.10);

  --notice-error-bg:rgba(69,10,10,.35);
  --notice-error-border:rgba(185,28,28,.50);
  --notice-error-text:#fecaca;
  --notice-warning-bg:rgba(69,26,3,.30);
  --notice-warning-border:rgba(217,119,6,.45);
  --notice-warning-text:#fde68a;
  --notice-info-bg:rgba(59,7,100,.30);
  --notice-info-border:rgba(168,85,247,.35);
  --notice-info-text:#e9d5ff;
  --notice-success-bg:rgba(2,44,34,.30);
  --notice-success-border:rgba(5,150,105,.45);
  --notice-success-text:#a7f3d0;

  --radius-sm:0.5rem;
  --radius-md:0.75rem;
  --radius-lg:0.875rem;
  --radius-xl:1rem;
  --radius-full:9999px;

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

  --bg:var(--background);
  --panel:var(--panel-surface);
  --card:var(--panel-surface);
  --card2:var(--panel-bg);
  --surface:var(--panel-surface);
  --surface2:var(--panel-bg);
  --surface3:var(--panel-bg-strong);
  --border:var(--panel-border);
  --text:var(--text-default);
  --fg:var(--text-default);
  --muted:var(--text-muted);
  --muted2:var(--text-faint);
  --primary:var(--cyan);
  --primary2:var(--purple);
  --accent:var(--cyan);
  --ok:var(--emerald);
  --warn:var(--amber);
  --warning:var(--amber);
  --hover:var(--hover-bg, rgba(255,255,255,.10));
  --radius:var(--radius-xl);
  --shadow:var(--panel-shadow);
  --sla-modal-bg:var(--panel-surface);
  --sla-card-bg:var(--panel-bg);
  --sla-card-border:var(--panel-border);
  --sla-label-color:var(--text-label-soft);
  --sla-value-color:var(--text-strong);
  --sla-section-label:var(--text-label-soft);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background-color: var(--background);
  background-image: var(--workspace-background-image);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden;
}

.csvrec-root #appShell > .sideNav,
.csvrec-root #adminAppShell > .sideNav {
  grid-column: 1;
  grid-row: 1;
}

.csvrec-root #appShell > .main,
.csvrec-root #adminAppShell > .adminMain {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.csvrec-root #appShell > .sideNavScrim,
.csvrec-root #adminAppShell > .sideNavScrim {
  display: none;
}

.csvrec-root #appShell > .bannerHost,
.csvrec-root #appShell > .detailsPanel {
  grid-column: 2;
  grid-row: 1;
}

body.archive-fullscreen > header.topbar {
  display: none;
}

body.archive-fullscreen #appShell {
  height: 100%;
}

body.archive-fullscreen #appShell > main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
}

body.archive-fullscreen #appShell > .bannerHost,
body.archive-fullscreen #appShell > .detailsPanel {
  grid-column: 2;
  grid-row: 1;
}

/* Archive renderers are mounted inside the canonical application shell.
   Their legacy shell must not become a second global navigation column. */
body.archive-fullscreen #appShell > main .csvrec-root .appShell {
  grid-template-columns: minmax(0, 1fr);
}

body.archive-fullscreen #appShell > main .csvrec-root .appShell > .sideNav,
body.archive-fullscreen #appShell > main .csvrec-root .appShell > .sideNavScrim {
  display: none !important;
}

.csvrec-root .main--airy > .adminTabs {
  flex-direction: row;
}

@media (max-width: 767px) {
  .csvrec-root #appShell > .sideNav,
  .csvrec-root #adminAppShell > .sideNav {
    grid-column: 1;
    grid-row: 1;
  }

  .csvrec-root #appShell > .main,
  .csvrec-root #adminAppShell > .adminMain {
    grid-column: 1;
    grid-row: 2;
  }

  body.archive-fullscreen #appShell > main {
    grid-column: 1;
    grid-row: 2;
  }

  body.archive-fullscreen #appShell > .bannerHost,
  body.archive-fullscreen #appShell > .detailsPanel {
    grid-column: 1;
    grid-row: 2;
  }
}

.recInlinePanel{
  background: var(--panel-surface) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--panel-shadow) !important;
}
.recBackdrop{
  background: rgba(4,7,23,.58) !important;
  backdrop-filter: blur(8px);
}
.recSubtleFill{ background: var(--panel-bg) !important; }
.recInfoFill{
  background: var(--notice-info-bg) !important;
  border-color: var(--notice-info-border) !important;
}
.recWarningFill{
  background: var(--notice-warning-bg) !important;
  border-color: var(--notice-warning-border) !important;
  color: var(--notice-warning-text) !important;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }
.small{ font-size: 12px; }
.mono{ font-family: var(--mono); }
.recGlassPanel{ border:1px solid var(--panel-border); border-radius:var(--radius-xl); background:var(--panel-surface); box-shadow:var(--panel-shadow); backdrop-filter:blur(16px); }
.recSoftPanel{ border:1px solid var(--panel-border); border-radius:var(--radius-md); background:var(--panel-bg); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.recTableSurface{ border:1px solid var(--panel-border); border-radius:var(--radius-xl); background:var(--panel-surface); box-shadow:var(--panel-shadow); backdrop-filter:blur(16px); overflow:hidden; }
.labelEyebrow,
.metricCardLabel{ color:var(--text-label-soft); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
  opacity: .85;
}

/* --- Buttons --- */
button{
  font-family: var(--sans);
  border: 1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
  transform: none;
}
a.ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
}
button:hover{
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
  color: var(--btn-secondary-hover-text);
}
button:active{ transform: none; }
button:disabled{
  opacity: .5;
  cursor: not-allowed;
}

button.primary{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: #fff;
  font-weight: 700;
}
button.primary:hover{
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}

button.ghost, a.ghost{
  background: transparent;
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
}
button.ghost:hover, a.ghost:hover{
  background: var(--btn-ghost-hover-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-hover-text);
}
button.danger, button.ghost.danger{
  color: #ffd7df;
  border-color: rgba(255,92,122,.35);
  background: rgba(255,92,122,.08);
}
button.danger:hover, button.ghost.danger:hover{
  border-color: rgba(255,92,122,.55);
  background: rgba(255,92,122,.12);
}
button.small, a.small{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* --- Inputs --- */
input, select, textarea{
  font-family: var(--sans);
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input.mono{ font-family: var(--mono); }
input::placeholder,
textarea::placeholder{
  color: var(--input-placeholder);
}
input:focus,
select:focus,
textarea:focus{
  border-color: var(--input-focus-border);
  background-color: var(--input-bg);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 5px;
  background: rgba(2,6,23,.55);
  color: #fff;
  cursor: pointer;
}

input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 65%, 42% 100%, 100% 16%, 82% 0, 37% 66%);
  background: currentColor;
}

input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: rgba(122,162,255,.85);
  box-shadow: 0 0 0 2px rgba(122,162,255,.16);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .55;
}

select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--input-placeholder) 50%),
    linear-gradient(135deg, var(--input-placeholder) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(1em + 2px),
    calc(100% - 11px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
select option {
  background: var(--select-option-bg);
  color: var(--input-text);
}

/* --- Layout --- */
.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-gradient), var(--header-base);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: var(--header-shadow);
}

.brand{ display:flex; flex-direction: column; gap: 2px; }
.brandTitle{ color: var(--text-strong); font-weight: 700; letter-spacing: .2px; }
.brandSub{ font-size: 12px; color: var(--muted); }

.topbarStart {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topActions{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.topActions .is-active {
  background: var(--btn-ghost-hover-bg);
  border-color: rgba(103,232,249,.45);
  color: var(--text-strong);
}

.classicPrimaryBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid rgba(110,231,183,.32);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: rgba(110,231,183,.08);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.classicPrimaryRailNote {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(110,231,183,.20);
  border-radius: 8px;
  color: var(--text-muted);
  background: rgba(110,231,183,.06);
  font-size: 12px;
  font-weight: 650;
}

.shellToggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0;
  flex: 0 0 auto;
}

.shellToggle span {
  display: block;
  width: 17px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;
  background: currentColor;
}

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

.sideNavSectionBottom {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.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(--nav-item-text);
  text-align: left;
  text-decoration: none;
  font-weight: 650;
}

.sideNavItem:hover {
  color: var(--text-strong);
  text-decoration: none;
  background: var(--nav-item-hover-bg);
  border-color: var(--nav-item-hover-border);
}

.sideNavItem.active,
.adminTab.sideNavItem.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  box-shadow: var(--seg-active-shadow);
}

.sideNavIcon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--nav-icon-bg);
  color: currentColor;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.sideNavIcon--csv,
.sideNavIcon--reconciliations {
  background: rgba(122,162,255,.14);
}

.sideNavIcon--incidents {
  background: rgba(248,113,113,.15);
}

.sideNavIcon--bot,
.sideNavIcon--system {
  background: rgba(96,165,250,.14);
}

.sideNavIcon--auto {
  background: rgba(74,222,128,.13);
}

.sideNavIcon--admin,
.sideNavIcon--audit,
.sideNavIcon--projects {
  background: rgba(167,139,250,.14);
}

.sideNavIcon--theme,
.sideNavIcon--banner {
  background: rgba(251,191,36,.15);
}

.sideNavIcon--logout,
.sideNavIcon--archive {
  background: rgba(248,113,113,.12);
}

.sideNavIcon--user,
.sideNavIcon--users,
.sideNavIcon--back {
  background: rgba(148,163,184,.12);
}

.sideNavText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sideNavUser {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
}

.toolbar{
  display:flex;
  gap: 12px;
  padding: 12px 16px 0 16px;
  flex-wrap: wrap;
}
#mainToolbar.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: stretch;
  justify-content: stretch;
  grid-auto-flow: row dense;
  padding: 22px 112px 10px;
}
.toolGroup{
  background: var(--panel-soft-bg);
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 220px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.toolGroup.grow{ flex: 1 1 420px; }
#mainToolbar #extraSources {
  display: contents;
}
#mainToolbar .toolGroup {
  min-width: 0;
  width: 100%;
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 8px;
}
#mainToolbar .csvStatusMappingGroup,
.csvStatusMappingGroup,
#mainToolbar .csvValidationGroup,
.csvValidationGroup {
  align-content: start;
  min-height: 78px;
}
#mainToolbar .toolGroup.grow {
  flex: unset;
}
.csvStatusMappingGroup {
  gap: 10px;
}
.csvStatusMappingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.csvStatusMappingGroup .smapPanelActions {
  flex: 0 0 auto;
}
.csvStatusMappingGroup .smapPanelActions .small {
  padding: 5px 8px;
}
.csvStatusMappingGroup .smapExcludeRow {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.csvStatusMappingGroup .smapPanelBody {
  border-top: 1px solid var(--panel-soft-border);
  margin-top: 2px;
  padding: 10px 0 0;
}
.csvStatusMappingGroup .smapPanelFooter {
  margin-top: 8px;
}
.csvStatusMappingGroup .smapRows:empty + .smapPanelFooter {
  margin-top: 0;
}
.csvValidationGroup {
  gap: 8px;
}
.csvValidationHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.csvValidationHeader > span {
  min-width: 0;
}
.csvValidationHeader #reconValidationSummary {
  text-align: right;
}
.csvValidationGroup .reconValidationBody {
  padding: 0;
  gap: 6px;
}
.csvValidationGroup .reconValidationGroup {
  padding: 6px 8px;
}
.csvValidationGroup .reconValidationTitle {
  margin-bottom: 3px;
}
.csvAdvancedSettings {
  min-width: 0;
  margin: 0 112px;
  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);
}
.csvAdvancedSettingsBody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  gap: 12px;
  padding: 12px;
}
.csvAdvancedSettings .toolGroup {
  min-width: 0;
  width: 100%;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 8px;
}

@media (min-width: 1536px) {
  #mainToolbar.toolbar {
    gap: 16px;
  }

  #mainToolbar .csvProjectGroup,
  #mainToolbar .csvToolGroup--source,
  #mainToolbar .csvStatusMappingGroup,
  #mainToolbar .csvValidationGroup {
    padding: 12px 14px;
  }

  #mainToolbar .csvProjectGroup {
    min-height: 78px;
  }

  .csvAdvancedSettingsBody {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #mainToolbar input,
  #mainToolbar select {
    min-width: 0;
    max-width: 100%;
  }

  #mainToolbar .row > input {
    min-width: 0;
  }
}
.row{ display:flex; gap: 8px; align-items:center; }
.grow{ flex: 1; }

.main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px 16px 24px 16px;
}

.panelShell {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.csvHomeLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.csvNewReconciliationPanel,
.csvRecentHistoryPanel,
.csvFocusedResultView {
  min-width: 0;
}

.csvNewReconciliationPanel {
  display: grid;
  gap: 14px;
}

.csvResultActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.panel{
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.panelHeader{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-header-fill);
}
.panelTitle{ color: var(--text-strong); font-weight: 700; }

.panelHeaderCompact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.metricCardGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metricCard {
  min-width: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 14px;
}

.metricCardLabel {
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.metricCardValue {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}

.metricCardNote {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.segmentedControl {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
}

.segmentedControl button {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--seg-idle-text);
  padding: 6px 10px;
  box-shadow: none;
}

.segmentedControl button:hover {
  background: var(--seg-idle-hover-bg);
  border-color: var(--seg-idle-hover-border);
  color: var(--seg-idle-text);
}

.segmentedControl button.active {
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  box-shadow: var(--seg-active-shadow);
  color: var(--seg-active-text);
}

.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 10px;
  font-size: .82rem;
}

.quickChip:hover {
  border-color: var(--seg-idle-hover-border);
  background: var(--seg-idle-hover-bg);
  color: var(--seg-idle-text);
}

.quickChip.active {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  box-shadow: var(--seg-active-shadow);
  color: var(--seg-active-text);
}

.rowClickable {
  cursor: pointer;
}

.rowClickable:hover {
  background: var(--table-row-hover-bg);
}

.sideDetailPanel {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  min-width: 0;
  overflow: hidden;
}

.sideDetailPanel[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .metricCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .panelHeaderCompact {
    display: grid;
  }

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

  .segmentedControl {
    width: 100%;
    grid-auto-columns: minmax(0, 1fr);
  }

  .segmentedControl button {
    min-width: 0;
  }
}

/* --- Progress --- */
.progressWrap{ padding: 12px 14px; }
.progressBarTrack{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
#progressBar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122,162,255,.55), rgba(61,220,151,.45));
}

/* --- Banner / toast --- */
.bannerHost{
  position: fixed;
  top: 70px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}
.banner{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(16,24,39,.88);
  box-shadow: var(--shadow);
  max-width: 360px;
}
.banner.info{ border-color: rgba(122,162,255,.35); }
.banner.ok{ border-color: rgba(61,220,151,.35); }
.banner.warn{ border-color: rgba(255,204,102,.35); }
.banner.error{ border-color: rgba(255,92,122,.35); }

/* --- Files UI cards from app.js --- */
#files{ padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.fileRow{
  background: var(--panel-soft-bg);
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

.fileMain{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.filePresetBar{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.filePresetTools,
.filePresetToolsBody,
.fileColumnSettings,
.fileAdvancedColumnSettings,
.fileColumnSettingsBody,
.fileAdvancedColumnSettingsBody {
  display: contents;
}

.fileSectionSummary {
  display: none;
}

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

.fileCols{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.fileName{
  font-weight: 650;
  width: min(360px, 55vw);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.pill.primary{
  border-color: rgba(122,162,255,.45);
  background: rgba(122,162,255,.10);
  color: #d9e4ff;
}

.fileGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.fileField--wide {
  grid-column: span 2;
}

.field{ display:flex; flex-direction: column; gap: 6px; }
.field label{ font-size: 12px; color: var(--muted); }
.field.colSpan2{ grid-column: span 2; }

@media (max-width: 980px){
  .fileGrid{ grid-template-columns: 1fr; }
  .field.colSpan2{ grid-column: span 1; }
}

/* --- Results --- */
#results{ padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.resultPair{
  background: var(--panel-soft-bg);
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.reportHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.10);
}
.pairInner{ padding: 12px 14px; }

.kpiRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.kpi{
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.kpi:hover{ background: rgba(255,255,255,.05); }
.kpiLabel{ font-size: 12px; color: var(--muted); }
.kpiVal{ font-size: 18px; font-weight: 750; margin-top: 4px; }

@media (max-width: 980px){
  .kpiRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pairFilters{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pairPager{
  display:flex;
  align-items:center;
  gap: 8px;
}

.tableWrap{
  overflow:auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}

table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th{
  position: sticky;
  top: 0;
  background: var(--table-head-bg);
  backdrop-filter: blur(10px);
  color: var(--table-head-text);
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid var(--table-head-border);
  font-weight: 650;
  white-space: nowrap;
}
tbody td{
  padding: 9px 10px;
  border-bottom: 1px solid var(--table-row-border);
  white-space: nowrap;
}
tbody tr:hover{
  background: var(--table-row-hover-bg);
}

.csvrec-root .csvHistoryTableWrap {
  padding-top: 8px;
}

.csvrec-root .csvHistoryTable th:nth-child(1) { width: 54%; }
.csvrec-root .csvHistoryTable th:nth-child(2) { width: 14%; }
.csvrec-root .csvHistoryTable th:nth-child(3) { width: 16%; }
.csvrec-root .csvHistoryTable th:nth-child(4) { width: 16%; }

.csvrec-root .csvHistoryTable .historyProjectBadge {
  max-width: min(100%, 16ch);
}

.csvrec-root .csvHistoryTable .historyItemName {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.csvrec-root .csvHistoryTable .historyItemName > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csvrec-root .historyTypeBadge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  border: 1px solid rgba(148, 163, 184, .24);
  color: var(--text-muted);
  background: rgba(148, 163, 184, .10);
}

.csvrec-root .historyTypeBadge--auto {
  color: var(--info);
  border-color: rgba(59, 130, 246, .28);
  background: rgba(59, 130, 246, .10);
}

.csvrec-root .csvHistoryRow {
  cursor: pointer;
}

.csvrec-root .csvHistoryRow:hover {
  background: var(--table-row-hover-bg);
}

/* --- Details side panel --- */
.detailsPanel{
  position: fixed;
  right: 14px;
  bottom: 14px;
  top: 84px;
  width: min(520px, calc(100vw - 28px));
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  z-index: 40;
  overflow: hidden;
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
}
.detailsHeader{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  flex-shrink: 0;
}
.detailsTitle{ font-weight: 750; }
.detailsBtns{ display:flex; gap: 8px; }
.detailsBody{
  padding: 12px 14px;
  overflow: auto;
  flex: 1;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px){
  .detailsPanel{ top: 70px; right: 10px; left: 10px; width: auto; }
  .grid2{ grid-template-columns: 1fr; }
}

/* --- Modal --- */
.modalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 60;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal{
  width: min(860px, 100%);
  max-height: min(90vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  color: var(--text);
}
.modalHead{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.modalTitle{ font-weight: 750; }
.modalBody{
  padding: 12px 14px;
  overflow: auto;
  max-height: calc(80vh - 120px);
}
.modalFoot{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display:flex;
  justify-content: flex-end;
  gap: 10px;
}

.autoReconRunDetailModal {
  width: min(1320px, calc(100vw - 32px));
}

.autoReconRunDetailModal .modalBody {
  max-height: calc(100vh - 150px);
}

.autoReconRunDetailModalBody,
.autoReconRunDetailModal .autoReconRunDetailView {
  min-width: 0;
}

.autoReconRunDetailModal .autoReconDetailToolbar {
  align-items: flex-start;
}

.autoReconRunDetailModal .autoReconDetailActions {
  justify-content: flex-end;
}

/* --- Views/columns modal helpers --- */
.stack{ display:flex; flex-direction: column; gap: 10px; }
.gridCols{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chk{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.viewRow{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.viewRowBtns{ display:flex; gap: 8px; }

/* --- Scrollbars (nice-to-have) --- */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.0);
}
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
[hidden]{
  display: none !important;
}

/* ========================================================
   Classes for dynamically generated HTML in app.js
   ======================================================== */

/* --- Button BEM aliases (app.js generates .btn .btn-* classes) --- */
.btn{
  font-family: var(--sans);
  border: 1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
  transform: none;
}
.btn:hover{ background: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-border); color: var(--btn-secondary-hover-text); }
.btn:active{ transform: none; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.btn-primary{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: #fff;
  font-weight: 700;
}
.btn-primary:hover{
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
.btn-ghost{ background: transparent; border-color: var(--btn-ghost-border); color: var(--btn-ghost-text); }
.btn-ghost:hover{ background: var(--btn-ghost-hover-bg); border-color: var(--btn-ghost-border); color: var(--btn-ghost-hover-text); }
.btn-danger{
  color: #ffd7df;
  border-color: rgba(255,92,122,.35);
  background: rgba(255,92,122,.08);
}
.btn-danger:hover{ border-color: rgba(255,92,122,.55); background: rgba(255,92,122,.12); }
.btn-sm{ padding: 6px 10px; border-radius: 10px; font-size: 12px; }

/* --- Input/select aliases --- */
.input{ font-family: var(--sans); color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); padding: 9px 10px; outline: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.input:focus{ border-color: var(--input-focus-border); background: var(--input-bg); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.input-sm{ padding: 6px 8px; font-size: 12px; border-radius: 10px; }
.select{ font-family: var(--sans); color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); padding: 9px 10px; padding-right: 28px; outline: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--input-placeholder) 50%), linear-gradient(135deg,var(--input-placeholder) 50%,transparent 50%); background-position: calc(100% - 16px) calc(1em + 2px), calc(100% - 11px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.select:focus{ border-color: var(--input-focus-border); box-shadow: 0 0 0 3px var(--input-focus-ring); }

/* --- Banner BEM modifiers (app.js uses banner--err, banner--warn) --- */
.banner--err{ border-color: rgba(255,92,122,.45); }
.banner--warn{ border-color: rgba(255,204,102,.45); }
.banner__icon{
  font-size: 16px;
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.banner__body{ flex: 1; }
.banner__title{ font-weight: 650; font-size: 13px; }
.banner__text{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.banner__actions{ margin-top: 6px; display: flex; gap: 6px; }

/* --- Results layout --- */
.results{ display: flex; flex-direction: column; gap: 12px; }
.result-block{
  background: var(--panel-soft-bg);
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.result-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.links{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.link{ font-size: 13px; }

/* --- KPI grid (app.js uses .kpi .item .value .name) --- */
.kpi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.kpi .item{
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.kpi .item:hover{ background: rgba(255,255,255,.05); }
.kpi .value{ font-size: 18px; font-weight: 750; margin-bottom: 4px; }
.kpi .name{ font-size: 12px; color: var(--muted); }
.kpi--pair .item{ cursor: pointer; }
.kpi-btn{ display: block; width: 100%; text-align: left; }

/* --- Diff tabs --- */
.diff-tabs{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.diff-tab{
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.diff-tab:hover{ background: rgba(255,255,255,.05); color: var(--text); }
.diff-tab--active{
  background: rgba(122,162,255,.15);
  border-color: rgba(122,162,255,.4);
  color: #d0dcff;
}

/* --- Pair toolbar & filters --- */
.pair-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 8px 0;
}
.pair-toolbar .left{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pair-toolbar .right{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pair-filters{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,204,102,.35);
  background: rgba(255,204,102,.08);
  color: #ffe9a0;
}

/* --- Diff pagination --- */
.diff-pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.diff-page-sizes{ display: flex; align-items: center; gap: 4px; }
.diff-page-nav{ display: flex; align-items: center; gap: 6px; }
.diff-pgsz-btn{
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  cursor: pointer;
}
.diff-pgsz-btn--active{
  background: rgba(122,162,255,.15);
  border-color: rgba(122,162,255,.4);
  color: #d0dcff;
}
.diff-nav-btn{
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor: pointer;
}
.diff-nav-btn:disabled{ opacity: .35; cursor: not-allowed; }
.diff-page-indicator{ font-size: 12px; color: var(--muted); white-space: nowrap; }

/* --- Diff table wrapper & row colors --- */
.diff-table-wrap{
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}
.diff-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.diff-row--mismatch td{ background: rgba(255,204,102,.06); }
.diff-row--mismatch:hover td{ background: rgba(255,204,102,.12); }
.diff-row--missing td{ background: rgba(122,162,255,.06); }
.diff-row--missing:hover td{ background: rgba(122,162,255,.12); }
.diff-row--dup td{ background: rgba(255,92,122,.05); }
.diff-row--dup:hover td{ background: rgba(255,92,122,.10); }
tbody .diff-row--mismatch:focus,
tbody .diff-row--missing:focus,
tbody .diff-row--dup:focus{ outline: 2px solid rgba(122,162,255,.55); }

/* --- Sticky columns in diff table --- */
.sticky-col{
  position: sticky;
  left: 0;
  background: var(--table-head-bg);
  z-index: 1;
  white-space: nowrap;
}
.sticky-col-2{
  position: sticky;
  left: 180px;
  background: rgba(16,24,39,.92);
  z-index: 1;
  white-space: nowrap;
}

/* --- Details card & KV grid --- */
.details-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.details-card{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.details-card h4{ margin: 0 0 8px 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.details-kv{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.details-kv .k{ color: var(--muted); white-space: nowrap; }
.details-kv .v{ font-family: var(--mono); word-break: break-all; }

/* --- Columns modal list --- */
.cols-list{ display: flex; flex-direction: column; gap: 6px; }
.cols-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.cols-item .left{ display: flex; align-items: center; gap: 8px; }
.cols-item .name{ font-size: 13px; }
.cols-item .actions{ display: flex; gap: 4px; }

/* --- Add file button (label styled as button) --- */
.btn-add-file{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 14px;
  border: 1px solid rgba(61,220,151,.4);
  background: rgba(61,220,151,.09);
  color: #a8f0d4;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn-add-file:hover{
  background: rgba(61,220,151,.16);
  border-color: rgba(61,220,151,.6);
  color: #c8f8e8;
}
.btn-add-file:active{ transform: none; }

.decimalCommaLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--text);
  margin-top: 4px;
}
.dropOverlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 16, 0.88);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed rgba(122, 162, 255, 0.55);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.dropOverlayInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .2px;
}
.summaryRow {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}
.summaryPrimary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.summaryDetails {
  display: block;
  min-width: 0;
}
.summaryDetailsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  min-width: 0;
}
.summaryDetails summary {
  display: none;
}
.summaryKpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  gap: 2px;
}
.summaryKpiVal {
  font-size: 15px;
  font-weight: 750;
  font-family: var(--mono);
}
.summaryKpiLabel {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.reconValidationBody {
  padding: 10px 14px 12px;
  display: grid;
  gap: 8px;
}
.reconValidationGroup {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
}
.reconValidationGroup.is-error { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.07); }
.reconValidationGroup.is-warn { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.07); }
.reconValidationGroup.is-ok { border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.06); }
.reconValidationTitle {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 750;
  margin-bottom: 4px;
}
.reconValidationItem {
  font-size: 12px;
  line-height: 1.35;
}

.reconConfidence,
.reconResolution {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid var(--border);
  text-transform: lowercase;
  white-space: nowrap;
}
.reconConfidence--exact { color: var(--ok); background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.30); }
.reconConfidence--strong { color: var(--warn); background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.35); }
.reconConfidence--weak { color: var(--danger); background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); }
.reconConfidence--unmatched { color: var(--muted); background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.25); }
.reconResolution--accepted { color: var(--ok); background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.30); }
.reconResolution--ignored { color: var(--muted); background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.25); }
.reconResolution--incident_linked { color: var(--accent); background: rgba(122,162,255,.10); border-color: rgba(122,162,255,.35); }

.reportBlock{
  border-top: 1px solid var(--border);
}
.pairHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  flex-wrap: wrap;
}
.pairTitle { font-weight: 700; }
.pairMeta { flex: 1; }

.statusFilterBar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0 8px 0;
}

.typeFilterLabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  transition: background .12s, border-color .12s;
}
.typeFilterLabel:hover { background: rgba(255,255,255,.05); }
.typeFilterLabel input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; }

/* --- Column filter popup --- */
.colFilterPopup {
  position: fixed;
  z-index: 200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 200px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.colFilterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.colFilterVals {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.colFilterItem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 0.8rem;
}
.colFilterItem:hover { background: rgba(255,255,255,.05); }
.colFilterItem input[type=checkbox] { accent-color: var(--accent); flex-shrink: 0; }
.colFilterFooter {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
th.col-filterable {
  cursor: pointer;
  user-select: none;
}
th.col-filterable:hover { color: var(--text); }
.col-filter-icon { opacity: 0.45; font-size: 0.65em; vertical-align: middle; }
.col-filter-active { color: var(--accent); font-size: 0.75em; vertical-align: middle; }

.reportSearchBar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px 0;
}
.reportSearchInput {
  padding: 4px 8px;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.8rem;
}

/* ── Inline status mapping panel body ── */
.smapPanelBody {
  padding: 12px 14px;
}
.smapPanelFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.smapPanelTitle {
  min-width: 0;
}
.smapPanelActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

/* ── Status mapping UI ── */
.smapSection {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.smapSection > .muted { display: block; margin-bottom: 10px; }

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

.smapFreeZone {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  min-height: 40px;
}
.smapFreeZone--empty {
  padding: 0.5rem 0;
}
.smapGroups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.smapGroup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto);
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface2, #23263a);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
}
.smapGroup.dnd-over {
  border-color: var(--accent, #5b7cf6);
  background: var(--surface3, #2a2d45);
}
.smapGroupChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.smapChip--free {
  cursor: grab;
}
.smapChip--free:active {
  cursor: grabbing;
}
.smapChip--dragging {
  opacity: 0.35;
}
.smapChip--free.dnd-over {
  outline: 2px solid var(--accent, #5b7cf6);
  outline-offset: 2px;
}
.smapGroupLabel {
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
  color: var(--muted, #8892b0);
  font-size: 0.85rem;
  border-bottom: 1px dashed var(--border, #444);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.smapGroupLabel:hover {
  color: var(--text, #e8eefc);
}

.smapChip--grouped { /* inherits base .smapChip styling */ }

.smapChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  background: rgba(122,162,255,.12);
  border: 1px solid rgba(122,162,255,.3);
  color: #d0dcff;
  white-space: nowrap;
}
.smapChipX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: .6;
  font-size: 11px;
  line-height: 1;
  padding: 0 1px;
  background: none;
  border: none;
  color: inherit;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.smapChipX:hover { opacity: 1; }

.csvrec-root .smapGroup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto); }
.csvrec-root .smapChipX { min-width: 18px; pointer-events: auto; z-index: 1; }


.smapArrow {
  color: var(--muted2);
  font-size: 14px;
  flex-shrink: 0;
  user-select: none;
}

.csvrec-root .smapGroup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto);
}
.csvrec-root .smapChipX {
  min-width: 18px;
  pointer-events: auto;
  z-index: 1;
}

.smapCanonical {
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  width: 130px;
  outline: none;
  transition: border-color .12s;
}
.smapCanonical:focus { border-color: rgba(122,162,255,.55); }


.smapUnmapped {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.smapUnmapped > .muted { font-size: 12px; display: block; margin-bottom: 6px; }

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

.smapUnmappedBadge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.smapUnmappedBadge:hover {
  border-color: rgba(122,162,255,.4);
  color: var(--text);
  background: rgba(122,162,255,.08);
}
.smapExcludeRow {
  display: grid;
  grid-template-columns: minmax(210px, max-content) minmax(260px, 360px);
  align-items: center;
  gap: 8px 12px;
}
.smapExcludeRow input {
  min-width: 0 !important;
  width: 100%;
}

/* ===== LOGIN PAGE ===== */

.loginPage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background);
  background-image: var(--workspace-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  padding: 24px;
}

/* Floating math symbols */
.mathBg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(168,85,247,.18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(103,232,249,.14), transparent 30%);
}

.mathSym {
  position: absolute;
  color: color-mix(in srgb, var(--purple) 58%, var(--cyan) 42%);
  font-family: "Georgia", serif;
  opacity: 0;
  text-shadow: 0 0 24px rgba(103,232,249,.34), 0 0 38px rgba(168,85,247,.24);
  animation: floatUp linear forwards;
  user-select: none;
}

@keyframes floatUp {
  0%   { transform: translateY(0)   rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) rotate(20deg); opacity: 0; }
}

/* Login card */
.loginCard {
  position: relative;
  z-index: 1;
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}

.loginBrand {
  text-align: center;
  margin-bottom: 2rem;
}

.loginBrandTitle {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}

.loginBrandSub {
  font-size: 0.75rem;
  color: var(--text-label-soft);
  margin-top: 0.2rem;
  font-family: var(--mono);
}

.loginForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.loginField {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.loginField label {
  font-size: 0.75rem;
  color: var(--text-label-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.loginField input {
  font-family: var(--mono);
  font-size: 0.9rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.7rem;
  width: 100%;
  box-sizing: border-box;
}

.loginField input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.loginBtn {
  margin-top: 0.5rem;
  padding: 0.6rem;
  background: var(--btn-primary-bg);
  color: #fff;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--radius-md);
  box-shadow: var(--btn-primary-shadow);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease;
  transform: none;
}

.loginBtn:hover  { background: var(--btn-primary-hover-bg); border-color: var(--btn-primary-border); opacity: 1; }
.loginBtn:active { transform: none; opacity: 1; }
.loginBtn:disabled { opacity: 0.4; cursor: default; }

.loginError {
  font-size: 0.8rem;
  color: var(--notice-error-text);
  background: var(--notice-error-bg);
  border: 1px solid var(--notice-error-border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  text-align: center;
  min-height: 1.1em;
}
.loginError:empty {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

/* ===== TOPBAR ADDITIONS ===== */
#incidentsNavBtn.active,
#pspControlNavBtn.active {
  background: var(--accent, #6c8aff);
  color: #fff;
  border-color: var(--accent, #6c8aff);
}
.topbarSep {
  width: 1px;
  height: 1.2em;
  background: var(--border);
  margin: 0 0.2rem;
}
.topbarUser {
  font-family: var(--mono);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== PSP CONTROL ===== */
.pspControlMain {
  max-width: none;
  margin: 0;
  width: auto;
}
.pspControlMain .panel {
  overflow: visible;
}
.pspHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.pspControlGrid,
.pspFormGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pspSimpleLayout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px 0;
}
.pspProviderBrowser {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(420px, calc(100vh - 190px), 760px);
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  background: var(--panel-soft-bg);
  padding: 10px;
}
.pspBrowserTools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 8px;
  margin-bottom: 10px;
}
.pspProviderCards {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
.pspProviderCard {
  width: 100%;
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  background: var(--panel-soft-bg);
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}
.pspProviderCard.active {
  border-color: var(--accent, #6c8aff);
  background: rgba(108,138,255,.12);
}
.pspProviderCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pspProviderCardMeta {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
  font-family: var(--mono);
}
.pspProviderOverview {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: start;
}
.pspControlGrid {
  padding: 0 0 12px;
}
.pspProviderSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  padding-bottom: 10px;
}
.pspSelectedTitle {
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 800;
}
.pspProviderFields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pspProviderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.pspWorkspacePanel {
  min-width: 0;
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  background: var(--panel-soft-bg);
  overflow: hidden;
}
.pspFormBody {
  padding: 12px 14px;
}
.pspLiteBody {
  display: grid;
  gap: 10px;
}
.pspFormBody .fieldRow input,
.pspFormBody .fieldRow select,
.pspFormBody .fieldRow textarea {
  width: 100%;
}
.pspFieldHint {
  display: block;
  margin-top: 4px;
  color: var(--muted2);
  font-size: 11px;
  line-height: 1.35;
}
.pspStatusBox {
  display: none;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  display: flex;
  align-items: center;
}
.pspStatusBox--ok { color: var(--ok); border-color: rgba(61,220,151,.25); }
.pspStatusBox--error { color: var(--danger); border-color: rgba(255,92,122,.3); }
.pspStatusBox--warn { color: var(--warn); border-color: rgba(245,158,11,.35); }
.pspReadinessStrip,
.pspNotifPreview,
.pspValidationPreview,
.pspResultContext,
.reconSuggestions {
  margin: 0 14px 12px;
  padding: 10px 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: 8px;
  background: var(--panel-soft-bg);
}
.pspReadinessStrip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}
.pspReadinessMetric {
  min-width: 0;
  min-height: 54px;
  flex: 0 0 96px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft-bg);
  padding: 6px 8px;
}
.pspReadinessMetric b {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
}
.pspValidationPreview {
  display: grid;
  gap: 10px;
}
.pspValidationHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pspValidationGrid,
.pspValidationColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pspValidationColumns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pspValidationGrid > div,
.pspValidationColumns > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
}
.pspValidationGrid b,
.pspValidationColumns b {
  display: block;
  line-height: 1.25;
}
.pspValidationColumns ul {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--muted);
}
.pspValidationColumns li {
  margin: 4px 0;
}
.pspValidationColumns li span {
  display: block;
  overflow-wrap: anywhere;
}
.pspMatrix {
  margin: 0 14px 14px;
  overflow-x: auto;
}
.pspSimpleLayout .pspMatrix,
.pspSimpleLayout .pspReadinessStrip {
  margin-left: 0;
  margin-right: 0;
}
.pspTabs {
  display: inline-flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  align-self: start;
  align-items: center;
  padding: 3px;
  flex-wrap: wrap;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
}
.pspProviderOverview .pspTabs {
  padding: 3px;
}
.pspTab {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--seg-idle-text);
  font-weight: 700;
  cursor: pointer;
}
.pspTab.active {
  color: var(--seg-active-text);
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  box-shadow: var(--seg-active-shadow);
}
.pspMatrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.pspMatrix th,
.pspMatrix td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.pspPill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
}
.pspPill--ready { color: var(--ok); border-color: rgba(61,220,151,.3); }
.pspPill--warning { color: var(--warn); border-color: rgba(245,158,11,.35); }
.pspPill--blocked { color: var(--danger); border-color: rgba(255,92,122,.35); }
.pspPill--missing,
.pspPill--info { color: var(--muted); border-color: var(--border); }
.pspPill--completed { color: var(--ok); border-color: rgba(61,220,151,.3); }
.pspSummaryCards,
.pspNotifPreview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 0;
}
.pspSummaryCard {
  min-width: 0;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft-bg);
}
.pspSummaryCard b {
  display: block;
  margin: 2px 0;
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pspRecipientPicker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.pspRecipientOption {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}
.pspRecipientOption span {
  display: block;
}
.pspTechnicalField {
  display: none;
}
.pspAdvanced {
  margin: 0 14px 14px;
}
.pspLiteBody .pspAdvanced {
  margin: 0;
}
.pspAdvanced summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 0;
}
.pspEditDetails {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  padding: 0 10px 10px;
}
.pspNestedDetails {
  margin-top: 10px !important;
  border-top: 1px solid var(--border);
  padding-top: 2px;
}
.pspLiteBody .pspMatrix {
  margin: 0;
}
.pspResultContext {
  margin: 0;
}
.pspResultGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.reconSuggestions {
  margin: 0;
  display: grid;
  gap: 8px;
}
.reconSuggestionItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.reconSuggestionItem:first-child { border-top: 0; }
.pspCheckRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.pspSwitchRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.pspSwitchRow input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pspSwitchTrack {
  width: 42px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.pspSwitchTrack span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.pspSwitchRow input:checked + .pspSwitchTrack {
  border-color: rgba(61,220,151,.4);
  background: rgba(61,220,151,.16);
}
.pspSwitchRow input:checked + .pspSwitchTrack span {
  transform: translateX(18px);
  background: var(--ok);
}
.pspSwitchRow b,
.pspSwitchRow small {
  display: block;
}
.pspSwitchRow small {
  color: var(--muted);
  line-height: 1.35;
}
.pspNotifMatrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pspSubTitle {
  font-weight: 700;
  margin-bottom: 8px;
}
.pspTargetsList,
.pspVersions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pspTargetsList {
  margin-top: 10px;
}
.pspTargetRow,
.pspVersionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
@media (max-width: 980px) {
  .pspSimpleLayout,
  .pspProviderSummary,
  .pspControlGrid,
  .pspFormGrid,
  .pspNotifMatrix,
  .pspReadinessStrip,
  .pspResultGrid,
  .pspRecipientPicker {
    grid-template-columns: 1fr;
  }
  .pspBrowserTools {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .pspSimpleLayout {
    grid-template-columns: 1fr;
  }
  .pspProviderBrowser {
    min-height: auto;
  }
  .pspProviderActions,
  .pspHeaderActions {
    justify-content: flex-start;
  }
}

/* ===== HISTORY PANEL ===== */
.historyToolbar {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.historyToolbar select,
.historyToolbar input,
.historyToolbar button {
  min-width: 0;
}
.historyList {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0;
}
.historyEmpty {
  padding: 0.5rem 0;
}
.historyRow {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: background 0.1s;
}
.historyRow:hover { background: var(--table-row-hover-bg); }
.historyRowToggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}
.historyRowToggle:hover {
  background: var(--table-row-hover-bg);
}
.historyRowMain,
.historyFiles,
.historyRowStats {
  min-width: 0;
  overflow-wrap: anywhere;
}
.historyRowTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.historyProjectBadge {
  display: inline-flex;
  align-items: center;
  max-width: 18ch;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(122,162,255,.13);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.historyRowTitle {
  color: var(--text);
  font-weight: 760;
  line-height: 1.25;
}
.historyRowMeta   { font-size: 0.8rem; color: var(--muted); }
.historyRowStats  { font-size: 0.8rem; font-family: var(--mono); }
.historyPairList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}
.historyPair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.historyPair span {
  min-width: 0;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.historyPair b {
  color: var(--ok);
  font-weight: 750;
  white-space: nowrap;
}
.csvHistoryDetailModal { width: min(1480px, calc(100vw - 24px)); }
.csvrec-root .modal--app.csvHistoryDetailModal {
  width: min(1920px, 96vw);
  height: min(1100px, 92vh);
  max-height: 92vh;
}
.csvHistoryDetailModal .modalBody {
  max-height: calc(100vh - 132px);
}
.csvrec-root .modal--app.csvHistoryDetailModal .modalBody { max-height: none; overflow: hidden; }
.csvrec-root .modal--app.csvHistoryDetailModal .modalFoot { position: sticky; bottom: 0; z-index: 4; }
.csvHistoryModalContent {
  display: grid;
  gap: 14px;
}
.reconciliationIssuesShell {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reconciliationIssuesControls,
.reconciliationIssuesPagination { flex: 0 0 auto; min-width: 0; }

.reconciliationIssuesScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 2px 14px 0;
}

/* The modal owns vertical scrolling; each report keeps a full-width horizontal table viewport. */
.reconciliationIssuesScroll .historyDetailTableWrap {
  width: 100%;
  min-width: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.reconciliationIssuesScroll .historyDetailReport {
  height: auto;
  max-height: none;
  overflow: visible;
}
.reconciliationIssuesShell .normalizedReconIssues {
  margin-bottom: 2px;
}
.historyDetailHero {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: var(--panel-soft-bg);
  align-items: start;
}
.historyDetailTitle {
  font-weight: 780;
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}
.historyDetailHero > .muted.small {
  line-height: 1.25;
}
.historyDetailMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.1;
}
.historyDetailMeta .pill,
.historyDetailMeta .historyProjectBadge,
.historyDetailMeta .muted.small.mono {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  line-height: 1;
}
.historyDetailPair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
  min-height: 0;
  flex: 0 0 auto;
  overflow: visible;
}
.historyDetailPairHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.historyDetailKpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.historyDetailKpi {
  padding: 8px 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: var(--panel-soft-bg);
}
.historyDetailKpiValue {
  font-family: var(--mono);
  font-weight: 780;
}
.historyDetailKpiLabel {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.historyDetailReport {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
.historyDetailReportHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.historyDetailReportHead span {
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  overflow-wrap: anywhere;
  text-align: right;
}
.historyDetailTableWrap {
  overflow-x: auto;
  overflow-y: auto;
  max-width: 100%;
  max-height: min(42vh, 480px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  isolation: isolate;
}
.historyDetailTable {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
  border-collapse: collapse;
}
.historyDetailTable th,
.historyDetailTable td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--table-row-border);
  vertical-align: top;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.historyDetailTable th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--history-detail-sticky-bg);
  box-shadow: 0 1px 0 var(--border);
  background-clip: padding-box;
  color: var(--table-head-text);
  text-align: left;
}
.historyDetailTable td {
  font-size: 12px;
  overflow-wrap: break-word;
}
.historyDetailCell--txid {
  width: 15%;
  min-width: 0;
  white-space: normal;
}
.historyDetailCell--issue {
  width: 13%;
}
.historyDetailCell--select {
  width: 3%;
  text-align: center;
  white-space: nowrap;
}
.historyDetailCell--explanation {
  width: 12%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.historyDetailCell--pair,
.historyDetailCell--details {
  width: 14%;
}
.historyDetailCell--pair.historyDetailCell--fee {
  width: 10%;
}
.historyDetailCell--pair.historyDetailCell--date {
  width: 16%;
  min-width: 0;
}
.historyDetailCell--pair.historyDetailCell--status {
  width: 14%;
  min-width: 0;
}
.historyDetailPairCell {
  display: grid;
  gap: 3px;
  line-height: 1.35;
}
.historyDetailPairLine {
  display: grid;
  grid-template-columns: minmax(36px, max-content) minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
.historyDetailCell--pair:not(.historyDetailCell--date) .historyDetailPairLine > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.historyDetailCell--date .historyDetailPairLine > span:last-child {
  min-width: 0;
  white-space: nowrap;
}
.historyDetailPairLabel {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}
.historyDetailTxidCell {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.historyDetailTxidCell .ghost.small {
  justify-self: start;
}
.historyDetailFooterActions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.historyDetailEmpty {
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.historyExpandedActions {
  display: flex;
  justify-content: flex-end;
}
.historyPager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.8rem;
}

.archiveBatchPanel {
  min-width: 0;
}

.archiveBatchFilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, .06);
}

.archiveFilterField {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.archiveFilterField--wide {
  grid-column: span 2;
}

.archiveFilterField :is(input, select) {
  width: 100%;
}

.archiveBatchMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.archiveBatchTableWrap {
  margin: 10px 14px 0;
}

.archiveBatchTable {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

.archiveBatchCol--project { width: 11%; }
.archiveBatchCol--side { width: 10%; }
.archiveBatchCol--name { width: 18%; }
.archiveBatchCol--direction { width: 10%; }
.archiveBatchCol--period { width: 12%; }
.archiveBatchCol--rows { width: 6%; }
.archiveBatchCol--status { width: 10%; }
.archiveBatchCol--created { width: 12%; }
.archiveBatchCol--actions { width: 11%; }

.archiveBatchTable .opTableCell--action { white-space: nowrap; }

.archiveBatchName {
  min-width: 0;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: var(--text-strong);
}

.archiveBatchPager {
  justify-content: flex-end;
  padding: 10px 14px 14px;
}

.autoReconMappings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.autoReconMain {
  overflow-x: hidden;
}

.autoReconCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.autoReconTitle {
  font-weight: 650;
}

.autoReconMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.autoReconMeta span {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.autoReconIntro .panelHeader {
  align-items: center;
}

.autoReconHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.autoReconIntroBody {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.75rem 1rem 1rem;
}

.autoReconStatus {
  line-height: 1.35;
  min-height: 1.35em;
  padding: 0 14px;
}

.autoReconStatus--ok {
  color: var(--success, #22c55e);
}

.autoReconStatus--error {
  color: var(--danger, #ef4444);
}

.autoReconHistoryRow {
  cursor: default;
}

.autoReconFilters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 14px 0;
}

.autoReconFilters--inline {
  margin: 0.5rem 0 0;
}

.autoReconFilters button,
.autoReconFilters select {
  min-height: 34px;
}

.autoReconTabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
  max-width: 100%;
  padding: 0.25rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.autoReconTabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0.42rem 0.8rem;
  border-radius: 7px;
  line-height: 1.1;
  white-space: nowrap;
}

.autoReconTabs .active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.autoReconPane {
  display: block;
}

.autoReconKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.autoReconKpi {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  padding: 0.8rem 0.9rem;
}

.autoReconKpiValue {
  display: inline-flex;
  min-width: 44px;
  justify-content: center;
  margin-top: 0.45rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 750;
  font-family: var(--mono);
  background: rgba(255,255,255,0.05);
}

.autoReconKpiValue--ok { color: var(--success, #22c55e); }
.autoReconKpiValue--warn { color: var(--amber); }
.autoReconKpiValue--danger { color: var(--danger, #ef4444); }
.autoReconKpiValue--info { color: var(--accent); }

.autoReconKpis--compact {
  margin-bottom: 1rem;
}

.autoReconSectionBlock {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.autoReconActionCenter,
.autoReconDigest {
  padding: 0.75rem;
}

.autoReconActionList,
.autoReconDigestList {
  display: grid;
  gap: 0.55rem;
}

.autoReconActionItem,
.autoReconDigestItem,
.autoReconJournalItem {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.018);
}

.autoReconActionMain {
  min-width: 0;
}

.autoReconActionTitle {
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.autoReconActionMeta,
.autoReconActionButtons,
.autoReconJournalSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.autoReconIssueChips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.autoReconIssueChips span {
  padding: 0.12rem 0.38rem;
  border: 1px solid rgba(245,158,11,0.24);
  border-radius: 4px;
  background: rgba(245,158,11,0.08);
  color: var(--amber);
  font-size: 0.76rem;
  font-weight: 650;
}

.autoReconDigestStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 0.35rem;
  min-width: min(430px, 100%);
}

.autoReconDigestStats span {
  display: grid;
  gap: 0.08rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  text-align: center;
}

.autoReconDigestStats b {
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.1;
}

.autoReconDigestStats small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.1;
}

.autoReconDigestStats .autoReconDigestWarn b {
  color: var(--amber);
}

.autoReconTableWrap {
  overflow: auto;
}

.autoReconSavedViews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.65rem 0;
}

.autoReconSavedViews .active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.autoReconBulkBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
}

.autoReconRowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.autoReconRowActionsCell {
  text-align: right;
}

.autoReconTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.autoReconTable th,
.autoReconTable td {
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}

.autoReconTable th {
  color: var(--muted);
  font-weight: 650;
  background: var(--surface);
}

.autoReconHistoryLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 0 14px;
}

.autoReconHistoryTable {
  table-layout: fixed;
  min-width: 760px;
}
.autoReconHistoryTable th:nth-child(1),
.autoReconHistoryTable td:nth-child(1) { width: 18%; }
.autoReconHistoryTable th:nth-child(2),
.autoReconHistoryTable td:nth-child(2) { width: 16%; }
.autoReconHistoryTable th:nth-child(3),
.autoReconHistoryTable td:nth-child(3) { width: 30%; }
.autoReconHistoryTable th:nth-child(4),
.autoReconHistoryTable td:nth-child(4) { width: 12%; }
.autoReconHistoryTable th:nth-child(5),
.autoReconHistoryTable td:nth-child(5) { width: 12%; }
.autoReconHistoryTable th:nth-child(6),
.autoReconHistoryTable td:nth-child(6) { width: 12%; }

.autoReconProviderChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.autoReconProviderChips span {
  max-width: 100%;
  border: 1px solid var(--panel-soft-border);
  border-radius: 999px;
  background: var(--panel-soft-bg);
  padding: 2px 7px;
  font-size: .72rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autoReconHistoryFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 0 0;
}

.autoReconIssueInboxTable {
  table-layout: fixed;
  min-width: 1080px;
}

.autoReconIssueColSelect { width: 4%; }
.autoReconIssueColProvider { width: 18%; }
.autoReconIssueColBatch { width: 16%; }
.autoReconIssueColType { width: 25%; }
.autoReconIssueColImpact { width: 12%; }
.autoReconIssueColAge { width: 9%; }
.autoReconIssueColActions { width: 16%; }

.autoReconIssueInboxTable td {
  overflow-wrap: anywhere;
}

.autoReconProviderHealthPanel {
  margin: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}

.autoReconProviderHealthHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}

.autoReconProviderHealthHeader::-webkit-details-marker {
  display: none;
}

.autoReconProviderHealthHeader::after {
  content: "Show";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.autoReconProviderHealthPanel[open] .autoReconProviderHealthHeader::after {
  content: "Hide";
}

.autoReconProviderHealthPanel:not([open]) .autoReconProviderHealthHeader {
  border-bottom: 0;
}

.autoReconProviderHealth {
  padding: 12px 14px 14px;
}

.autoReconHealthSummary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.autoReconHealthList {
  display: grid;
  gap: 12px;
}

.autoReconHealthItem {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.4fr) minmax(150px, 0.5fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}

.autoReconHealthItem--danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
}

.autoReconHealthItem--warn {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
}

.autoReconHealthItem--ok {
  border-color: color-mix(in srgb, var(--success) 24%, var(--border));
}

.autoReconHealthMain,
.autoReconHealthProblem,
.autoReconHealthMeta {
  min-width: 0;
}

.autoReconHealthTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  line-height: 1.25;
}

.autoReconHealthProblemText {
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.autoReconHealthChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.autoReconHealthChip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.autoReconHealthChip--danger {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.autoReconHealthChip--warn {
  border-color: rgba(245,158,11,0.32);
  background: rgba(245,158,11,0.1);
  color: var(--amber);
}

.autoReconHealthChip--ok {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.autoReconHealthMeta {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.autoReconInlineDetailRow td {
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}

.autoReconInlineDetail {
  margin: 0;
  padding: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.autoReconIssueDrawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
}

.autoReconIssueDrawer[hidden] {
  display: none;
}

.autoReconIssueDrawerBackdrop {
  background: rgba(0,0,0,0.48);
}

.autoReconIssueDrawerPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  height: 100vh;
  overflow: auto;
  border-left: 1px solid var(--border);
  background: var(--panel);
  box-shadow: -18px 0 45px rgba(0,0,0,0.28);
}

.autoReconIssueDrawerPanel .panelHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--panel-color) 94%, black);
}

#autoReconIssueDrawerBody {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.autoReconIssueDrawerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.autoReconIssueDrawerGrid > div,
.autoReconIssueDrawerSection {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  background: rgba(255,255,255,0.025);
}

.autoReconIssueDrawerGrid > div {
  display: grid;
  gap: 0.2rem;
}

.autoReconIssueDrawerSection pre {
  max-height: 340px;
  margin: 0.45rem 0 0;
  white-space: pre-wrap;
  overflow: auto;
  overflow-wrap: anywhere;
}

.autoReconLedgerRow {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border);
}

.autoReconHistoryColName { width: 40%; }
.autoReconHistoryColStatus { width: 8%; }
.autoReconHistoryColReview { width: 9%; }
.autoReconHistoryColStarted { width: 12%; }
.autoReconHistoryColCompleted { width: 12%; }
.autoReconHistoryColDiscrepancies { width: 10%; }
.autoReconHistoryColActions { width: 9%; }

.autoReconHistoryActionRow td {
  background: color-mix(in srgb, var(--surface-color) 78%, transparent);
  border-bottom-width: 2px;
}

.autoReconHistoryBatchActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.autoReconDiscrepancyStack {
  display: inline-flex;
  flex-direction: row;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

.autoReconDiscrepancyDelta {
  color: var(--danger, #ef4444);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
}

.autoReconHistoryNameCell {
  min-width: 0;
}

.autoReconHistoryName {
  display: block;
  max-width: 100%;
  font-weight: 750;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.autoReconHistoryMeta {
  display: block;
  max-width: 100%;
  margin-top: 0.12rem;
  overflow-wrap: anywhere;
}

.autoReconHistoryFlags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.autoReconDiscrepancyText {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.autoReconDiscrepancyText--ok {
  color: var(--success, #22c55e);
}

.autoReconDiscrepancyText--warn {
  color: var(--amber);
  background: rgba(245,158,11,0.12);
}

.autoReconBadge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 650;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}

.autoReconBadge--ok {
  background: rgba(34,197,94,0.14);
  color: var(--success, #22c55e);
}

.autoReconBadge--warn {
  background: rgba(245,158,11,0.14);
  color: var(--amber);
}

.autoReconBadge--danger {
  background: rgba(239,68,68,0.14);
  color: var(--danger, #ef4444);
}

.autoReconBadge--info {
  background: rgba(96,165,250,0.14);
  color: var(--accent);
}

.autoReconBadge--neutral {
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}

.autoReconDetailGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}

.autoReconDetailGrid > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  background: rgba(255,255,255,0.025);
}

.autoReconDetailPanel {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem 1rem 1rem;
}

.autoReconDetailToolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.autoReconDetailHeading {
  min-width: 220px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.autoReconDetailHeadingText {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.autoReconDetailHeadingText .autoReconTitle,
.autoReconDetailHeadingText .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autoReconDetailHeadingStatus {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.autoReconDetailHeadingStatus:empty {
  display: none;
}

.autoReconDetailActions,
.autoReconRunMeta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.autoReconActionResult {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: auto;
  max-width: 100%;
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 6px;
  padding: 0.38rem 0.58rem;
  color: var(--success, #22c55e);
  background: rgba(34,197,94,0.08);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.autoReconInlineStatus {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  max-width: min(100%, 42rem);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.38rem 0.6rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  font-size: 0.84rem;
  line-height: 1.25;
  overflow-wrap: normal;
  white-space: nowrap;
}

.autoReconInlineStatus--ok {
  border-color: rgba(34,197,94,0.24);
  color: var(--success, #22c55e);
  background: rgba(34,197,94,0.08);
}

.autoReconInlineStatus--error {
  border-color: rgba(248,113,113,0.28);
  color: var(--danger, #f87171);
  background: rgba(248,113,113,0.08);
}

.autoReconMetricsPanel {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}

.autoReconMetricsSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.autoReconMetricsTable {
  min-width: 720px;
}

.autoReconRunList {
  display: grid;
  gap: 0.75rem;
}

.autoReconRunsTable {
  table-layout: fixed;
  min-width: 980px;
}

.autoReconRunColName { width: 34%; }
.autoReconRunColStatus { width: 9%; }
.autoReconRunColReview { width: 10%; }
.autoReconRunColPeriod { width: 24%; }
.autoReconRunColDiscrepancies { width: 14%; }
.autoReconRunColActions { width: 9%; }

.autoReconRunCard {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
  overflow: hidden;
}

.autoReconRunHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.08);
}

.autoReconRunMeta {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.82rem;
}

.autoReconDiscrepancyTable th,
.autoReconDiscrepancyTable td {
  vertical-align: top;
}

.autoReconRunEmpty {
  padding: 0.75rem 0.85rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.autoReconRunDetailView {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.autoReconRunSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0;
}

.autoReconRunSummary .autoReconKpi {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 128px;
  padding: 0.45rem 0.6rem;
}

.autoReconRunSummary .autoReconKpiValue {
  min-width: 34px;
  margin-top: 0;
  padding: 0.18rem 0.45rem;
  font-size: 1.05rem;
}

.autoReconKpiText {
  margin-top: 0.45rem;
  min-width: 0;
  color: var(--fg);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.autoReconIssueFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0 0.05rem;
}

.autoReconIssueFilters button {
  min-height: 30px;
  padding: 0.28rem 0.52rem;
  font-size: 0.78rem;
}

.autoReconIssueFilters .active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.autoReconRunDetailTable {
  table-layout: fixed;
  min-width: 1180px;
}

.autoReconRunDetailTable th {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.78rem;
}

.autoReconRunDetailTable td {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.autoReconRunDetailColTx { width: 31%; }
.autoReconRunDetailColAmount { width: 10%; }
.autoReconRunDetailColCommission { width: 10%; }
.autoReconRunDetailColStatus { width: 11%; }
.autoReconRunDetailColDate { width: 17%; }
.autoReconRunDetailColType { width: 12%; }
.autoReconRunDetailColActions { width: 9%; }

.autoReconTxCell {
  overflow-wrap: anywhere;
}

.autoReconPairValue {
  white-space: pre-line;
  line-height: 1.35;
}

.autoReconRunDetailActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0 0.1rem;
  border-top: 1px solid var(--border);
}

.autoReconRunDetailActions button {
  min-height: 32px;
  min-width: 104px;
  text-align: center;
}

.autoReconCorrectionModal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 7, 23, 0.72);
}

.autoReconCorrectionDialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #312b52, #241f3f);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, var(--shadow));
  padding: 1rem;
}

.autoReconCorrectionDialog form {
  display: grid;
  gap: 0.85rem;
}

.autoReconCorrectionHeader,
.autoReconCorrectionActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.autoReconCorrectionSummary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem;
  background: rgba(96, 165, 250, 0.08);
}

.autoReconCorrectionSummary > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.55rem;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.autoReconCorrectionSummary b,
.autoReconCorrectionSummary small {
  display: block;
}

.autoReconCorrectionSummary small {
  margin-top: 0.2rem;
  color: var(--muted);
}

.autoReconCorrectionRaw {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.autoReconCorrectionRaw > div,
.autoReconCorrectionChoices,
.autoReconStatusCorrectionGrid,
.autoReconValueCorrectionPanel,
.autoReconMissingCorrectionPanel,
.autoReconCorrectionFields,
.autoReconCorrectionCustom,
.autoReconCorrectionPreview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem;
  background: var(--surface);
}

.autoReconCorrectionRaw > div > span {
  display: block;
  margin-bottom: 0.25rem;
}

.autoReconCorrectionRaw code {
  display: block;
  margin-top: 0.25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.autoReconCorrectionChoices,
.autoReconCorrectionPreview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.autoReconStatusCorrectionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.autoReconValueCorrectionPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
}

.autoReconMissingCorrectionPanel {
  display: grid;
  gap: 0.75rem;
}

.autoReconMissingCorrectionHeader b,
.autoReconMissingCorrectionHeader small {
  display: block;
}

.autoReconMissingCorrectionHeader b {
  color: var(--text);
}

.autoReconMissingCorrectionHeader small {
  margin-top: 0.2rem;
  color: var(--muted);
}

.autoReconMissingCorrectionFields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

.autoReconCorrectionFields,
.autoReconCorrectionCustom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.autoReconCorrectionOption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  min-height: 112px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem;
  color: var(--text);
  background: rgba(255,255,255,0.02);
}

.autoReconCorrectionOption input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
}

.autoReconCorrectionOption span,
.autoReconCorrectionOption b,
.autoReconCorrectionOption small,
.autoReconCorrectionOption code {
  display: block;
  min-width: 0;
}

.autoReconCorrectionOption small {
  margin-top: 0.25rem;
  color: var(--muted);
  line-height: 1.35;
}

.autoReconCorrectionOption code {
  margin-top: 0.45rem;
  overflow-wrap: anywhere;
}

.autoReconCorrectionFields label,
.autoReconStatusCorrectionGrid label,
.autoReconValueCorrectionPanel label,
.autoReconMissingCorrectionFields label,
.autoReconCorrectionCustom label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.autoReconStatusCorrectionGrid label {
  align-content: start;
}

.autoReconStatusCorrectionGrid label > span,
.autoReconValueCorrectionPanel label > span,
.autoReconMissingCorrectionFields label > span {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.autoReconStatusCorrectionGrid small,
.autoReconValueCorrectionPanel small {
  color: var(--muted);
}

.autoReconStatusCorrectionGrid code {
  color: var(--text);
}

.autoReconCorrectionPreview > div {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.autoReconCorrectionPreview span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.autoReconCorrectionPreview code {
  overflow-wrap: anywhere;
}

.autoReconCorrectionCustom:not(.is-active) {
  opacity: 0.72;
}

.autoReconCorrectionCustom:not(.is-active) input,
.autoReconCorrectionCustom:not(.is-active) select {
  pointer-events: none;
}

.autoReconCorrectionCustom select,
.autoReconCorrectionCustom input,
.autoReconStatusCorrectionGrid select,
.autoReconValueCorrectionPanel input,
.autoReconMissingCorrectionFields input,
.autoReconCorrectionFields input {
  width: 100%;
}

@media (max-width: 700px) {
  .autoReconCorrectionModal {
    align-items: stretch;
    padding: 0.6rem;
  }

  .autoReconCorrectionDialog {
    width: 100%;
    max-height: calc(100vh - 1.2rem);
    padding: 0.8rem;
  }

  .autoReconCorrectionHeader,
  .autoReconCorrectionActions,
  .autoReconCorrectionSummary {
    grid-template-columns: 1fr;
  }

  .autoReconCorrectionHeader,
  .autoReconCorrectionActions {
    align-items: stretch;
  }

  .autoReconCorrectionRaw,
  .autoReconCorrectionChoices,
  .autoReconStatusCorrectionGrid,
  .autoReconValueCorrectionPanel,
  .autoReconMissingCorrectionFields,
  .autoReconCorrectionFields,
  .autoReconCorrectionCustom,
  .autoReconCorrectionPreview {
    grid-template-columns: 1fr;
  }

  .autoReconCorrectionOption {
    min-height: 0;
  }
}

.autoReconTechnicalEvents pre {
  max-width: min(100%, 920px);
  max-height: 360px;
  white-space: pre-wrap;
  overflow: auto;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.autoReconTechnicalEvents {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  padding: 0.5rem 0.65rem;
}

.autoReconTechnicalEvents summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--fg);
}

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

  .autoReconHealthItem {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .autoReconHealthMeta {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 840px) {
  .autoReconKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .autoReconDetailActions,
  .autoReconDetailActions button {
    width: 100%;
  }

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

  .autoReconRunMeta {
    justify-content: flex-start;
  }
}

.autorunsAdminList {
  display: grid;
  gap: 12px;
}

.autorunsAdminCard {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
}

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

.autorunsAdminHead h3 {
  margin: 0;
  font-size: 1rem;
}

.autorunsAdminToggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.autorunsAdminToggle input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
}

.autorunsAdminSection {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.autorunsAdminSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.autorunsAdminSectionTitle {
  color: var(--text, #e8eafc);
  font-weight: 700;
  font-size: 0.9rem;
}

.autorunsProviderTableWrap {
  overflow-x: auto;
}

.autorunsProviderList {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.autorunsProviderTable {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}

.autorunsProviderTable th:nth-child(1) { width: 22%; }
.autorunsProviderTable th:nth-child(2) { width: 110px; }
.autorunsProviderTable th:nth-child(3) { width: 34%; }
.autorunsProviderTable th:nth-child(4) { width: 140px; }
.autorunsProviderTable th:nth-child(5) { width: 240px; }

.autorunsProviderTable td {
  vertical-align: middle;
}

.autorunsProviderUrl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autorunsProviderActions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.autorunsProviderTypeBadge,
.autorunsProviderStatus {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 8px;
}

.autorunsProviderTypeBadge.isPayin {
  background: rgba(59, 130, 246, 0.14);
  color: #6fa8ff;
}

.autorunsProviderTypeBadge.isPayout {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.autorunsProviderStatus {
  color: var(--muted);
  border: 1px solid var(--border);
}

.autorunsProviderStatus.isEnabled {
  border-color: rgba(91, 214, 131, 0.14);
  background: rgba(91, 214, 131, 0.11);
  color: #71df86;
}

.autorunsProviderEditPanel > td {
  background: rgba(255, 255, 255, 0.015);
  padding: 16px;
}

.autorunsProviderEditSection {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.015);
}

.autorunsProviderEditSection h4 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.autorunsProviderEditorGrid {
  display: grid;
  gap: 12px;
}

.autorunsProviderGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.autorunsProviderField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.autorunsProviderToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: end;
  min-height: 34px;
  color: var(--fg);
  font-size: 0.82rem;
  font-weight: 700;
}

.autorunsProviderField span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.autorunsProviderFieldWide {
  grid-column: span 2;
}

.autorunsProviderField input,
.autorunsProviderField select,
.autorunsProviderField textarea {
  width: 100%;
  min-width: 0;
  font-size: 0.82rem;
  box-sizing: border-box;
}

.autorunsProviderField textarea {
  min-height: 112px;
  resize: vertical;
  white-space: pre;
  overflow: auto;
}

.autorunsProviderField input[type="checkbox"],
.autorunsProviderToggle input[type="checkbox"],
.autorunsProviderControls input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
}

.autorunsProviderEmpty td {
  padding: 16px;
}

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

.autorunsAdminActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.systemHero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(122, 162, 255, 0.12), rgba(16, 24, 39, 0.86));
}

.systemHero.is-ok {
  border-color: rgba(61, 220, 151, 0.24);
}

.systemHero.is-warn {
  border-color: rgba(255, 204, 102, 0.28);
}

.systemHero h2 {
  margin: 4px 0 6px;
  color: var(--fg);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.systemHero p {
  margin: 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.systemEyebrow {
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.systemHeroMeta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.systemPanel {
  overflow: hidden;
}

.systemPanelHead {
  align-items: flex-start;
}

.systemPanelHead p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.systemDiagnosticsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.systemMetricCard {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
}

.systemMetricLabel {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.systemMetricValue {
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.systemMetricValue.is-ok {
  color: var(--ok);
}

.systemMetricValue.is-warn {
  color: var(--warn);
}

.systemMetricValue.isMono,
.systemMetricDetail.isMono {
  font-family: var(--mono);
  font-size: 0.88rem;
}

.systemMetricDetail {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.systemStatusChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.systemStatusChip.is-ok {
  color: var(--ok);
  border-color: rgba(61, 220, 151, 0.28);
  background: rgba(61, 220, 151, 0.12);
}

.systemStatusChip.is-warn {
  color: var(--warn);
  border-color: rgba(255, 204, 102, 0.28);
  background: rgba(255, 204, 102, 0.12);
}

.systemStatusChip.is-neutral {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.systemCheckGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.systemCheckItem {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.022);
}

.systemCheckIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-weight: 900;
}

.systemCheckItem.is-ok .systemCheckIcon {
  color: var(--ok);
  background: rgba(61, 220, 151, 0.12);
}

.systemCheckItem.is-warn .systemCheckIcon {
  color: var(--warn);
  background: rgba(255, 204, 102, 0.12);
}

.systemCheckItem b {
  display: block;
  color: var(--fg);
  font-size: 0.9rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.systemCheckItem span:not(.systemCheckIcon) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.systemDataGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.systemDataCount {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.022);
}

.systemDataCount span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.systemDataCount b {
  color: var(--fg);
  font-size: 1.15rem;
  line-height: 1.1;
}

.systemDataCount small {
  color: var(--muted2);
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.systemTableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#tab-system {
  overflow-x: hidden;
}

#tab-system .adminTable {
  min-width: 0;
  table-layout: fixed;
}

#tab-system .adminTable th,
#tab-system .adminTable td {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* ===== ADMIN PANEL ===== */
.adminPage {
  min-height: 100vh;
  background-color: var(--background);
  background-image: var(--workspace-background-image);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--fg);
}

.adminTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  min-height: 69px;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--panel-border);
  background: var(--header-gradient), var(--header-base);
  box-shadow: var(--header-shadow);
  backdrop-filter: blur(16px);
}

.adminBrand { color: var(--text-strong); font-weight: 700; font-size: 0.95rem; }
.adminBrandSub { font-size: 0.7rem; color: var(--muted); }

.adminMain {
  padding: 14px 16px 24px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.adminWorkspaceHeader {
  min-width: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}

.adminMain > .adminWorkspaceHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
}

.adminSideDetail {
  margin-bottom: 14px;
}

.adminSideDetailHead {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.adminSideDetailBody {
  padding: 12px 14px 14px;
}

.adminSideDetailList {
  display: grid;
  gap: 10px;
  margin: 0;
}

.adminSideDetailList div {
  display: grid;
  grid-template-columns: minmax(110px, .32fr) minmax(0, 1fr);
  gap: 12px;
}

.adminSideDetailList dt {
  color: var(--muted);
  font-size: .78rem;
}

.adminSideDetailList dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Tabs */
.adminTabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 0;
  margin-bottom: 0;
}

.adminTabs[data-admin-group] {
  padding-top: 14px;
}

.adminTabs[data-admin-group]::before {
  color: var(--muted);
  content: "";
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1;
  padding: 0 10px 2px;
  text-transform: uppercase;
}

.adminTabs[data-admin-group="access"]::before {
  content: "Access";
}

.adminTabs[data-admin-group="automation"]::before {
  content: "Automation";
}

.adminTabs[data-admin-group="oversight"]::before {
  content: "Oversight";
}

.adminTabs[data-admin-group="config"]::before {
  content: "Config";
}

body.shell-collapsed.adminShellPage .adminTabs[data-admin-group] {
  padding-top: 6px;
}

body.shell-collapsed.adminShellPage .adminTabs[data-admin-group]::before {
  display: none;
}

.adminTab {
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 0;
}

.adminTab.active {
  color: var(--nav-active-text);
}

.adminTabContent { display: none; }
.adminTabContent.active {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.adminSectionCard {
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 14px 16px 16px;
}

.adminTableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Incident sub-table section header */
.inc-sub-header {
  padding: 6px 14px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* Tables */
.adminTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}

.adminTable th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--table-head-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--table-head-border);
}

.adminTable td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--table-row-border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminTable tr:hover td { background: var(--table-row-hover-bg); }

.adminProjectsTable th:nth-child(1) { width: 34%; }
.adminProjectsTable th:nth-child(2) { width: 120px; }
.adminProjectsTable th:nth-child(3) { width: 180px; }
.adminProjectsTable th:nth-child(4) { width: 240px; }

.adminAuditTable {
  min-width: 960px;
}

.adminAuditTable th:nth-child(1) { width: 170px; }
.adminAuditTable th:nth-child(2) { width: 150px; }
.adminAuditTable th:nth-child(3) { width: 150px; }
.adminAuditTable th:nth-child(4) { width: auto; }
.adminAuditTable th:nth-child(5) { width: 150px; }
.adminAuditTable th:nth-child(6) { width: 200px; }

.adminBannerUsersTable {
  min-width: 860px;
}

.adminBannerUsersTable th:nth-child(1) { width: 190px; }
.adminBannerUsersTable th:nth-child(2) { width: 28%; }
.adminBannerUsersTable th:nth-child(3) { width: 120px; }
.adminBannerUsersTable th:nth-child(4) { width: 130px; }
.adminBannerUsersTable th:nth-child(5) { width: 210px; }

.adminBannerWishesTable th:nth-child(1) { width: 80px; }
.adminBannerWishesTable th:nth-child(2) { width: auto; }
.adminBannerWishesTable th:nth-child(3) { width: 160px; }

/* Keep Autoruns provider columns readable and independent from other admin tables. */
.autorunsProviderTable {
  min-width: 1160px;
}

.autorunsProviderTable th:nth-child(1) { width: 260px; }
.autorunsProviderTable th:nth-child(2) { width: 130px; }
.autorunsProviderTable th:nth-child(3) { width: auto; }
.autorunsProviderTable th:nth-child(4) { width: 160px; }
.autorunsProviderTable th:nth-child(5) { width: 260px; }

.adminTableActions { display: flex; gap: 0.4rem; }

#incidentsView {
  min-height: 100vh;
  overflow: visible;
}

#incidentsArchiveRoot {
  min-height: 100%;
  overflow-x: hidden;
}

#incidentsArchiveRoot > .csvrec-root {
  min-height: 100vh;
}

#incidentsArchiveRoot > .csvrec-root .appShell {
  min-height: calc(100vh - 65px);
  height: auto;
}

#incQuickQueues {
  display: none !important;
}

#incSearch,
#incidentsAssigneeFilter,
#incidentsResponsibleFilter,
#incidentsPriorityFilter,
#incidentsProviderFilter,
#incidentsReasonFilter,
#incidentsDueFilter {
  width: auto !important;
}

#incColumnManagerBtn {
  flex: 0 0 94px;
}

#incClosedArchiveAction {
  flex: 0 0 148px;
}

#incSlaBtn {
  flex: 0 0 64px;
}

.incMobileControlsToggle {
  display: none;
}

#incidentsArchiveRoot .incFullTableWrap {
  width: 100%;
  overflow-x: hidden;
  border-bottom: 1px solid var(--border);
}

#incidentsArchiveRoot .incFullTable {
  width: 100%;
  table-layout: fixed;
}

#incidentsArchiveRoot .incQueueTable { min-width: 0; }
#incidentsArchiveRoot .incArchiveTable { min-width: 0; }
#incidentsArchiveRoot .incSlaTable { min-width: 1040px; }

#incidentsArchiveRoot .incQueueTable th[data-inc-col="select"] { width: 28px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="id"] { width: 44px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="provider"] { width: 92px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="reason"] { width: 128px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="status"] { width: 88px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="priority"] { width: 116px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="assignee"] { width: 168px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="responsible"] { width: 126px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="age"] { width: 52px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="deadline"] { width: 90px; }
#incidentsArchiveRoot .incQueueTable th[data-inc-col="countdown"] { width: 96px; }

#incidentsArchiveRoot .incQueueTable td[data-inc-col="provider"],
#incidentsArchiveRoot .incQueueTable td[data-inc-col="reason"],
#incidentsArchiveRoot .incQueueTable td[data-inc-col="assignee"],
#incidentsArchiveRoot .incQueueTable td[data-inc-col="responsible"] {
  white-space: normal;
  line-height: 1.35;
}

.csvrec-root #incidentsArchiveRoot .incQueueTable {
  min-width: 0;
  table-layout: fixed;
}

.csvrec-root #incidentsArchiveRoot .incArchiveTable {
  min-width: 0;
  table-layout: fixed;
}

#incidentsArchiveRoot .incArchiveTable th[data-inc-col="id"] { width: 54px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="provider"] { width: 150px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="reason"] { width: 190px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="status"] { width: 120px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="priority"] { width: 78px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="assignee"] { width: 130px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="age"] { width: 66px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="deadline"] { width: 96px; }
#incidentsArchiveRoot .incArchiveTable th[data-inc-col="closed_at"] { width: 96px; }

.csvrec-root .modal--incSla {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
}

.modal--incSla {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
}

.modal--incSla .modalBody {
  max-height: calc(100vh - 150px);
  padding: 0;
}

.modal--incSla .incSlaModalRoot {
  min-width: 0;
}

.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;
}

.incMetricCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px 14px 6px;
}

.incQuickChips {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  flex-wrap: wrap;
}

.incFilterChips {
  display: flex;
  gap: 6px;
  padding: 0 14px 8px;
  flex-wrap: wrap;
}

.incFilterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(122,162,255,.25);
  background: rgba(122,162,255,.09);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
}

.incFilterChip button {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
}

.incSavedViewsSidebar {
  margin: 0 14px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0,0,0,.12);
  padding: 8px;
  max-width: 420px;
}
.incSavedViewsTitle {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 750;
  margin-bottom: 6px;
}
.incSavedViewsList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.incQuickTake {
  margin-left: 6px;
  padding: 2px 6px;
}
.incQuickPriority {
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 4px;
}

.incBoard {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  padding: 10px 14px 14px;
}

.incBoardCard {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  padding: 8px;
  cursor: pointer;
}

.incBoardCard:hover { background: rgba(122,162,255,.08); }
.incBoardCard.is-dragging { opacity: .55; }

.incTimeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.82rem;
}
.incTimelineDayLabel {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 750;
  margin: 2px 0 5px;
}
.incTimelineItem {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  border-left: 1px solid var(--border);
  padding: 4px 0 4px 10px;
}
.incTimelineIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(122,162,255,.30);
  color: var(--accent);
  background: rgba(122,162,255,.08);
  font-size: 10px;
  font-weight: 800;
}
.incTimelineContent {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.incTimelineTime {
  white-space: nowrap;
}

.incEmptyState {
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

#incDetailBackdrop {
  position: fixed;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#incDetailModal {
  width: min(920px, calc(100vw - 48px));
  max-width: 920px;
  height: auto;
  max-height: calc(100vh - 48px);
  border-radius: var(--radius-xl);
  margin: 0;
  display: flex;
  flex-direction: column;
}

#incDetailModal.modal--incidentDetail {
  width: min(920px, calc(100vw - 48px));
  max-width: 920px;
}

.incDropZone {
  border: 1px dashed rgba(122,162,255,.35);
  border-radius: 8px;
  padding: 10px;
  background: rgba(122,162,255,.06);
}

.incDropZone.dragover {
  border-color: rgba(122,162,255,.8);
  background: rgba(122,162,255,.13);
}

.slaHeatmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.slaHeatCell {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  background: rgba(255,255,255,.025);
}

.slaHeatCell.high { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.slaHeatCell.medium { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); }
.slaHeatCell.low { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }

#slaBackdrop.slaScreenBackdrop {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: var(--bg) !important;
}
#slaBackdrop .slaScreenModal {
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0;
  box-sizing: border-box;
}

.adminIncSubnav {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 1rem;
}

#tab-incidents {
  overflow-x: hidden;
}

#tab-incidents .adminTable {
  min-width: 0;
  table-layout: fixed;
}

#tab-incidents .adminTable th,
#tab-incidents .adminTable td {
  overflow-wrap: anywhere;
  white-space: normal;
}

#tab-incidents .adminTable td {
  text-overflow: clip;
}

.adminIncPane[hidden] { display:none !important; }

@media (max-width: 1200px) {
  .incBoard { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

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

#tab-users {
  overflow-x: auto;
}

#tab-users .adminTable {
  min-width: 1180px;
}

/* Users table: Login, Role, Projects, Sections, TG User ID, Created, Actions */
#tab-users .adminTable th:nth-child(1) { width: 180px; }
#tab-users .adminTable th:nth-child(2) { width: 130px; }
#tab-users .adminTable th:nth-child(3) { width: 150px; }
#tab-users .adminTable th:nth-child(4) { width: 240px; }
#tab-users .adminTable th:nth-child(5) { width: 120px; }
#tab-users .adminTable th:nth-child(6) { width: 120px; }
#tab-users .adminTable th:nth-child(7) { width: 190px; }
#tab-users .adminTable td:nth-child(7) { overflow: visible; }
#tab-users .adminTableActions {
  flex-wrap: nowrap;
  min-width: max-content;
}

/* SLA Provider table: Provider, Total, Closed, Escalated, % in deadline, Avg pickup, Avg resolution */
#slaProviderTable th:nth-child(1) { width: 160px; }
#slaProviderTable th:nth-child(2) { width: 50px; }
#slaProviderTable th:nth-child(3) { width: 60px; }
#slaProviderTable th:nth-child(4) { width: 80px; }
#slaProviderTable th:nth-child(5) { width: 110px; }
#slaProviderTable th:nth-child(6) { width: 90px; }
#slaProviderTable th:nth-child(7) { width: 110px; }

/* SLA Assignee table: User, Role, Taken, Resolved, Avg resolution */
#slaAssigneeTable th:nth-child(1) { width: 150px; }
#slaAssigneeTable th:nth-child(2) { width: 130px; }
#slaAssigneeTable th:nth-child(3) { width: 60px; }
#slaAssigneeTable th:nth-child(4) { width: 80px; }
#slaAssigneeTable th:nth-child(5) { width: 110px; }

/* Admin toolbar above table */
.adminToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* Admin pagination */
.adminPager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

/* Admin modal form */
.adminForm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 280px;
}

.adminFormField {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.adminFormField label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.adminFormField input,
.adminFormField select {
  font-family: var(--mono);
  font-size: 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  width: 100%;
  min-width: 0;
}

@media (max-width: 700px) {
  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    min-height: 61px;
  }

  .topbarStart {
    min-width: 0;
    flex: 1 1 100%;
  }

  .brandTitle {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand,
  .panelTitle,
  .detailsTitle,
  .autoReconTitle,
  .autoReconDetailHeading {
    min-width: 0;
  }

  .topActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: hidden;
    padding-bottom: 0;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .classicPrimaryBadge {
    width: 100%;
  }

  .topActions > * {
    min-width: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .toolbar,
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .toolbar {
    gap: 8px;
  }

  #mainToolbar.toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    max-width: 100%;
    overflow-x: hidden;
  }

  #mainToolbar .csvToolGroup--source,
  #mainToolbar .csvToolGroup--wide,
  #mainToolbar .csvStatusMappingGroup,
  #mainToolbar .csvValidationGroup,
  #mainToolbar .toolGroup.grow {
    grid-column: 1 / -1;
  }

  #mainToolbar .csvToolGroup--source {
    display: grid;
    grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
  }

  #mainToolbar .csvToolGroup--source label {
    white-space: nowrap;
  }

  #mainToolbar .csvToolGroup--source input {
    min-height: 36px;
    width: 100%;
  }

  .csvAdvancedSettings {
    margin: 0 8px;
  }

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

  .csvAdvancedSettingsBody .toolGroup {
    padding: 9px;
    background: rgba(15,23,42,.35);
  }

  .csvAdvancedSettingsBody .csvToolGroup--wide,
  .csvAdvancedSettingsBody .toolGroup.grow {
    grid-column: 1 / -1;
  }

  .toolGroup {
    min-width: 0;
    width: 100%;
  }

  .row,
  .panelHeader,
  .reportHead,
  .pairFilters,
  .pairPager,
  .historyPager,
  .autoReconDetailToolbar,
  .adminToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .row > *,
  .panelHeader > *,
  .reportHead > *,
  .pairFilters > *,
  .pairPager > *,
  .historyPager > *,
  .autoReconDetailToolbar > *,
  .adminToolbar > * {
    min-width: 0;
    width: 100%;
  }

  #mainToolbar .toolGroup {
    width: auto;
    min-width: 0;
    padding: 10px;
  }

  #mainToolbar #extraSources {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #mainToolbar input,
  #mainToolbar select,
  #mainToolbar button {
    min-width: 0;
    max-width: 100%;
  }

  #mainToolbar input,
  #mainToolbar select {
    width: 100%;
  }

  #mainToolbar .row {
    align-items: center;
    flex-direction: row;
  }

  #mainToolbar .row > input {
    width: auto;
  }

  #mainToolbar .row > button {
    flex: 0 0 auto;
    width: auto;
  }

  #mainToolbar .csvStatusMappingGroup {
    gap: 8px;
  }

  #mainToolbar .csvStatusMappingHeader {
    align-items: stretch;
    flex-direction: column;
  }

  #mainToolbar .csvStatusMappingGroup .smapPanelActions {
    justify-content: flex-start;
  }

  #mainToolbar .csvValidationHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  #mainToolbar .csvValidationHeader #reconValidationSummary {
    text-align: left;
  }

  .kpiRow,
  .autoReconKpis {
    grid-template-columns: 1fr;
  }

  .autoReconIntroBody {
    padding: 0.75rem;
  }

  .autoReconIntro,
  .autoReconPane {
    max-width: 100%;
    overflow-x: hidden;
  }

  .autoReconIntro .panelHeader {
    padding: 0.85rem 1rem;
  }

  .autoReconTabs {
    display: grid;
    grid-template-columns: 1fr;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .autoReconTabs button {
    min-width: 0;
    width: 100%;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    white-space: normal;
  }

  .autoReconTabs button:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .autoReconIntro .panelHeader > div,
  .autoReconIntro .muted,
  .autoReconStatus {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #incidentsArchiveRoot .panelHeader {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  #incidentsArchiveRoot .panelHeader > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  #appIncTabBar {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
    width: 100%;
  }

  #appIncTabBar .incFilterBtn {
    width: 100%;
    min-width: 0;
  }

  #incNotifBtn {
    justify-self: stretch;
  }

  .incMobileControlsToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #incSavedViewDelete[hidden] {
    display: none !important;
  }

  #incidentsArchiveRoot .incFullTableWrap {
    overflow-x: hidden;
  }

  #incidentsArchiveRoot .incFullTable {
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  #incidentsArchiveRoot .incFullTable thead {
    display: none;
  }

  #incidentsArchiveRoot .incFullTable,
  #incidentsArchiveRoot .incFullTable tbody,
  #incidentsArchiveRoot .incFullTable tr,
  #incidentsArchiveRoot .incFullTable td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #incidentsArchiveRoot .incFullTable tr {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.012);
  }

  #incidentsArchiveRoot .incFullTable td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.22rem 0;
    border: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #incidentsArchiveRoot .incFullTable td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
  }

  #incidentsArchiveRoot .incFullTable td.incEmptyState {
    display: block;
    padding: 0.5rem 0;
    text-align: center;
  }

  #incidentsArchiveRoot .incFullTable td.incEmptyState::before {
    display: none;
    content: "";
  }

  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) {
    min-width: 0;
  }

  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) thead {
    display: none;
  }

  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable),
  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) tbody,
  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) tr,
  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) td {
    display: block;
    width: 100%;
  }

  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) tr {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--border);
  }

  .autoReconSectionBlock .autoReconTable:not(.autoReconHistoryTable):not(.autoReconRunsTable):not(.autoReconRunDetailTable):not(.autoReconDiscrepancyTable):not(.autoReconMetricsTable) td {
    padding: 0.18rem 0;
    border: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .autoReconMappings,
  .autoReconActionItem,
  .autoReconDigestItem,
  .autoReconJournalItem,
  .autoReconDetailGrid {
    grid-template-columns: 1fr;
  }

  .autoReconCard,
  .autoReconRunHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .autoReconMeta,
  .autoReconRunMeta,
  .autoReconActionMeta,
  .autoReconActionButtons,
  .autoReconJournalSummary {
    justify-content: flex-start;
  }

  .autoReconActionCenter,
  .autoReconDigest {
    padding: 0.65rem;
  }

  .autoReconActionButtons button,
  .autoReconDigestActions button {
    width: 100%;
  }

  .autoReconDigestStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  .autoReconFilters,
  .autoReconFilters button,
  .autoReconFilters select,
  .autoReconDetailActions,
  .autoReconDetailActions button,
  .autoReconIssueFilters,
  .autoReconIssueFilters button,
  .autoReconRunDetailActions,
  .autoReconRunDetailActions button {
    width: 100%;
  }

  .autoReconActionResult {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .autoReconRunSummary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .autoReconRunSummary .autoReconKpi {
    min-width: 0;
  }

  .autoReconTableWrap {
    overflow-x: hidden;
  }

  .autoReconHistoryTable,
  .autoReconRunsTable,
  .autoReconRunDetailTable,
  .autoReconMetricsTable {
    min-width: 0 !important;
    table-layout: auto;
  }

  .autoReconTable thead {
    display: none;
  }

  .autoReconTable,
  .autoReconTable tbody,
  .autoReconTable tr,
  .autoReconTable td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .autoReconTable tr {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.012);
  }

  .autoReconTable td {
    border: 0;
    padding: 0.22rem 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .autoReconTable td[data-label] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    text-align: right;
  }

  .autoReconTable td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
  }

  .autoReconTable td.autoReconHistoryNameCell,
  .autoReconTable td.autoReconRowActionsCell {
    display: block;
    text-align: left;
  }

  .autoReconTable td.autoReconHistoryNameCell::before,
  .autoReconTable td.autoReconRowActionsCell::before {
    display: block;
    margin-bottom: 0.2rem;
  }

  .autoReconHistoryActionRow td {
    padding-top: 0.65rem;
  }

  .autoReconHistoryBatchActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .autoReconHistoryBatchActions button,
  .autoReconRowActions button,
  .autoReconRunDetailActions button {
    width: 100%;
  }

  .autoReconInlineStatus {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .fileMain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }

  .fileMain > * {
    min-width: 0;
  }

  .fileMain .radio {
    width: auto;
    align-self: center;
  }

  .fileMain .fileName {
    grid-column: 1 / -1;
    order: 3;
  }

  .fileMain button[data-field="remove"] {
    width: auto;
    min-width: 96px;
  }

  .filePresetBar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .filePresetBar select {
    width: 100%;
  }

  .filePresetTools,
  .fileColumnSettings,
  .fileAdvancedColumnSettings {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.02);
  }

  .filePresetToolsBody,
  .fileColumnSettingsBody,
  .fileAdvancedColumnSettingsBody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--border);
  }

  .filePresetTools:not([open]) .filePresetToolsBody,
  .fileColumnSettings:not([open]) .fileColumnSettingsBody,
  .fileAdvancedColumnSettings:not([open]) .fileAdvancedColumnSettingsBody {
    display: none;
  }

  .fileSectionSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .fileSectionSummary::-webkit-details-marker {
    display: none;
  }

  .fileSectionSummary::after {
    content: "▾";
    color: var(--muted);
    transition: transform .16s ease;
  }

  .filePresetTools[open] .fileSectionSummary::after,
  .fileColumnSettings[open] .fileSectionSummary::after,
  .fileAdvancedColumnSettings[open] .fileSectionSummary::after {
    transform: rotate(180deg);
  }

  .fileGrid {
    gap: 8px;
  }

  .fileField--wide {
    grid-column: auto;
  }

  .fileField select,
  .fileField input {
    width: 100%;
    min-width: 0;
  }

  .fileName {
    width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .fileCols {
    display: none;
  }

  .filePreview {
    display: none;
  }

  .historyRow {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

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

  .historyProjectBadge {
    max-width: 100%;
  }

  .historyRowStats {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .historyPairList {
    justify-content: flex-start;
  }

  .historyPair {
    justify-content: space-between;
    width: 100%;
  }

  .historyPair span {
    max-width: none;
    white-space: normal;
  }

  .presetCard {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .presetCardActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    width: 100%;
  }

  .presetCardActions button {
    width: 100%;
  }

  .presetSaveRow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .modalBody {
    overflow-x: hidden;
  }

  .pairHead {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }

  .pairTitle {
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .pairMeta {
    flex: none;
    overflow-wrap: anywhere;
  }

  .summaryRow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .summaryPrimary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .summaryDetails {
    display: block;
    min-width: 0;
  }

  .summaryDetails summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }

  .summaryDetails summary::-webkit-details-marker {
    display: none;
  }

  .summaryDetails summary::after {
    content: "▾";
    margin-left: 8px;
    color: var(--muted);
  }

  .summaryDetails[open] summary::after {
    content: "▴";
  }

  .summaryDetailsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }

  .summaryDetails:not([open]) .summaryDetailsGrid {
    display: none;
  }

  .summaryKpi {
    min-width: 0;
    padding: 7px 8px;
  }

  .summaryKpiVal {
    font-size: 1rem;
    line-height: 1.15;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .summaryKpiLabel {
    white-space: normal;
    text-align: center;
  }

  .mobileDiffRows {
    display: grid;
    gap: 10px;
    margin-top: 8px;
  }

  .resultPair .vtable-wrap {
    display: none;
  }

  .mobileDiffPager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
  }

  .mobileDiffPagerActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .mobileDiffRow {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
  }

  .mobileDiffRowHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  .mobileDiffTitle {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mobileDiffMeta {
    min-width: 0;
    margin-top: 4px;
    overflow-wrap: anywhere;
  }

  .mobileDiffGrid {
    display: grid;
    gap: 7px;
    margin-top: 10px;
  }

  .mobileDiffField {
    display: grid;
    grid-template-columns: minmax(94px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
  }

  .mobileDiffFieldLabel {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .mobileDiffFieldValue {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mobileDiffFieldValue .badge {
    max-width: 100%;
  }

  .mobileDiffActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
  }

  .mobileDiffSelect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.82rem;
  }

  .mobileDiffSelect input {
    width: auto;
    min-width: 0;
  }

  .tableWrap,
  .autoReconTableWrap,
  #incidentsArchiveRoot .incFullTableWrap,
  .autorunsProviderTableWrap,
  .filePreviewScroll,
  .vtable-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .detailsPanel {
    top: 64px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
  }

  .modalBackdrop {
    padding: 8px;
  }

  .modal {
    max-height: calc(100vh - 16px);
  }

  .adminMain {
    padding: 12px 10px;
    max-width: none;
  }

  .adminTabs {
    gap: 6px;
    margin-bottom: 0;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .adminTab {
    flex: 0 0 auto;
  }

  .adminTab.active {
    border-color: rgba(122,162,255,.55);
  }

  .adminTabContent.active {
    overflow-x: hidden;
  }

  .adminTable {
    min-width: 760px;
  }

  #tab-users .adminTable {
    min-width: 1100px;
  }

  .adminTableActions {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .adminSectionCard {
    overflow-x: hidden;
  }

  .adminInlineForm {
    align-items: stretch !important;
    flex-direction: column;
    max-width: none !important;
    width: 100%;
  }

  .adminInlineForm input,
  .adminInlineForm button,
  .adminInlineForm select,
  .adminInlineForm span {
    max-width: 100% !important;
    width: 100%;
  }

  .adminDataTableMobile {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
  }

  .adminDataTableMobile thead {
    display: none;
  }

  .adminDataTableMobile,
  .adminDataTableMobile tbody,
  .adminDataTableMobile tr,
  .adminDataTableMobile td {
    display: block;
    width: 100%;
  }

  .adminDataTableMobile tr {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
  }

  .adminDataTableMobile tr:hover td {
    background: transparent;
  }

  .adminDataTableMobile td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 6px 0;
    border-bottom: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .adminDataTableMobile td::before {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .adminDataTableMobile td[colspan] {
    display: block;
  }

  .adminDataTableMobile td[colspan]::before {
    content: none !important;
  }

  .adminDataTableMobile .adminTableActions {
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
  }

  .adminDataTableMobile .adminTableActions button {
    width: auto;
  }

  .autorunsProviderList {
    overflow-x: hidden;
  }

  .autorunsProviderTable {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .autorunsProviderTable thead {
    display: none;
  }

  .autorunsProviderTable,
  .autorunsProviderTable tbody,
  .autorunsProviderTable tr,
  .autorunsProviderTable td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .autorunsProviderTable .autorunsProviderRow {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
  }

  .autorunsProviderTable .autorunsProviderRow:hover td {
    background: transparent;
  }

  .autorunsProviderTable .autorunsProviderRow td {
    display: grid;
    grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    overflow: visible;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .autorunsProviderTable .autorunsProviderRow td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .autorunsProviderTable .autorunsProviderUrl {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .autorunsProviderTable .autorunsProviderActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
    width: 100%;
  }

  .autorunsProviderTable .autorunsProviderActions button {
    min-width: 0;
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
  }

  .autorunsProviderTable .autorunsProviderEditPanel {
    margin: -4px 0 12px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.015);
  }

  .autorunsProviderTable .autorunsProviderEditPanel[hidden] {
    display: none;
  }

  .autorunsProviderTable .autorunsProviderEditPanel > td {
    display: block;
    padding: 10px;
    border: 0;
  }

  .autorunsProviderTable .autorunsProviderEmpty {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
  }

  .autorunsProviderTable .autorunsProviderEmpty td {
    display: block;
    padding: 12px;
    text-align: center;
    border: 0;
  }

  .adminProjectsTable td:nth-child(1)::before { content: "Name"; }
  .adminProjectsTable td:nth-child(2)::before { content: "Users"; }
  .adminProjectsTable td:nth-child(3)::before { content: "Created"; }
  .adminProjectsTable td:nth-child(4)::before { content: "Actions"; }

  .adminAuditTable td:nth-child(1)::before { content: "Time"; }
  .adminAuditTable td:nth-child(2)::before { content: "Project"; }
  .adminAuditTable td:nth-child(3)::before { content: "Kind"; }
  .adminAuditTable td:nth-child(4)::before { content: "Event"; }
  .adminAuditTable td:nth-child(5)::before { content: "Actor"; }
  .adminAuditTable td:nth-child(6)::before { content: "Target"; }

  .adminBannerUsersTable td:nth-child(1)::before { content: "Login"; }
  .adminBannerUsersTable td:nth-child(2)::before { content: "Display name"; }
  .adminBannerUsersTable td:nth-child(3)::before { content: "Banner"; }
  .adminBannerUsersTable td:nth-child(4)::before { content: "Wishes"; }
  .adminBannerUsersTable td:nth-child(5)::before { content: "Actions"; }

  .adminBannerWishesTable td:nth-child(1)::before { content: "#"; }
  .adminBannerWishesTable td:nth-child(2)::before { content: "Text"; }
  .adminBannerWishesTable td:nth-child(3)::before { content: "Actions"; }

  .adminNotifDiagnosticsTable td:nth-child(1)::before { content: "Time"; }
  .adminNotifDiagnosticsTable td:nth-child(2)::before { content: "Channel"; }
  .adminNotifDiagnosticsTable td:nth-child(3)::before { content: "Status"; }
  .adminNotifDiagnosticsTable td:nth-child(4)::before { content: "Code"; }
  .adminNotifDiagnosticsTable td:nth-child(5)::before { content: "Error"; }

  .adminIncTemplatesTable td:nth-child(1)::before { content: "Name"; }
  .adminIncTemplatesTable td:nth-child(2)::before { content: "Provider"; }
  .adminIncTemplatesTable td:nth-child(3)::before { content: "Reason"; }
  .adminIncTemplatesTable td:nth-child(4)::before { content: "Details"; }
  .adminIncTemplatesTable td:nth-child(5)::before { content: "Deadline"; }
  .adminIncTemplatesTable td:nth-child(6)::before { content: "Actions"; }

  .adminIncProvidersTable td:nth-child(1)::before { content: "Name"; }
  .adminIncProvidersTable td:nth-child(2)::before { content: "Actions"; }

  #tab-banner .adminBannerWishesTable {
    min-width: 0 !important;
    table-layout: auto;
  }

  #tab-banner .adminBannerWishesTable thead {
    display: none;
  }

  #tab-banner .adminBannerWishesTable,
  #tab-banner .adminBannerWishesTable tbody,
  #tab-banner .adminBannerWishesTable tr,
  #tab-banner .adminBannerWishesTable td {
    display: block;
    width: 100%;
  }

  #tab-banner .adminBannerWishesTable tr {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
  }

  #tab-banner .adminBannerWishesTable td {
    display: grid;
    grid-template-columns: minmax(56px, 22%) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 6px 0;
    border-bottom: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #tab-banner .adminBannerWishesTable td:nth-child(2) {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #tab-banner h3 + div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #tab-banner #newWishInput,
  #tab-banner #addWishBtn {
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
  }

  #tab-users,
  #tab-projects,
  #tab-audit,
  #tab-banner {
    overflow-x: hidden;
  }

  #tab-incidents {
    overflow-x: hidden;
  }

  #tab-incidents .adminIncSubnav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #tab-incidents .adminIncSubnav .incFilterBtn {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }

  #tab-incidents .adminIncPane {
    max-width: 100% !important;
    min-width: 0;
  }

  #tab-incidents .adminIncPane[style] {
    box-sizing: border-box;
  }

  #tab-incidents .adminTable {
    min-width: 0;
    width: 100%;
  }

  #tab-incidents .adminTable thead {
    display: none;
  }

  #tab-incidents .adminTable,
  #tab-incidents .adminTable tbody,
  #tab-incidents .adminTable tr,
  #tab-incidents .adminTable td {
    display: block;
    width: 100%;
  }

  #tab-incidents .adminTable tr {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
  }

  #tab-incidents .adminTable td {
    border-bottom: 0;
    padding: 0.25rem 0;
  }

  #tab-incidents .adminDataTableMobile td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 6px 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #tab-incidents .adminDataTableMobile td::before {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  #tab-incidents .adminDataTableMobile td[colspan] {
    display: block;
    text-align: center;
  }

  #tab-incidents .adminDataTableMobile td[colspan]::before {
    content: none !important;
  }

  #tab-incidents .adminDataTableMobile .adminTableActions,
  #tab-incidents .adminDataTableMobile td:last-child {
    min-width: 0;
  }

  #tab-incidents .adminDataTableMobile button {
    width: auto;
  }

  #tab-incidents input,
  #tab-incidents select,
  #tab-incidents textarea,
  #tab-incidents button {
    max-width: 100%;
  }

  .adminForm {
    min-width: 0;
    width: min(100%, 420px);
  }

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

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

  .systemHero {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .systemHero h2 {
    font-size: 1.25rem;
  }

  .systemHeroMeta {
    align-items: flex-start;
    width: 100%;
    white-space: normal;
  }

  .systemPanelHead {
    gap: 8px;
  }

  .systemCheckGrid,
  .systemDataGrid {
    grid-template-columns: 1fr;
  }

  .systemCheckItem {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 10px;
  }

  .systemMetricCard,
  .systemDataCount {
    padding: 10px;
  }

  #tab-system {
    overflow-x: hidden;
  }

  .autorunsAdminCard {
    padding: 12px;
  }

  .autorunsAdminHead,
  .autorunsAdminSectionHead,
  .autorunsAdminActions,
  .autorunsProviderTop,
  .autorunsProviderControls {
    align-items: stretch;
    flex-direction: column;
  }

  .autorunsAdminActions button,
  .addAutorunProviderBtn,
  .autorunsProviderControls button {
    width: 100%;
  }

  .autorunsProviderGrid,
  .autorunsProviderReview,
  .autorunsChecklistGrid {
    grid-template-columns: 1fr;
  }

  .autorunsProviderFieldWide {
    grid-column: auto;
  }

  .autorunsProviderSteps {
    justify-content: stretch;
  }

  .autorunsProviderStep {
    flex: 1 1 140px;
    text-align: center;
  }

  .autorunsProviderSummary div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.adminFormError {
  font-size: 0.8rem;
  color: var(--danger, #c0392b);
  min-height: 1em;
}

.sectionAccessGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  background: var(--bg);
}

.sectionAccessItem {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.sectionAccessItem input {
  width: auto;
  min-width: 0;
  margin: 0;
}

/* Clickable reconciliation rows */
.reconRow { cursor: pointer; }

/* ===== FILE PREVIEW ===== */
.filePreview {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.filePreviewScroll {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.filePreviewTable {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--mono);
}
.filePreviewTable th {
  padding: 4px 8px;
  text-align: left;
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid var(--table-head-border);
  border-right: 1px solid var(--table-head-border);
}
.filePreviewTable td {
  padding: 3px 8px;
  white-space: nowrap;
  color: var(--muted);
  border-bottom: 1px solid var(--table-row-border);
  border-right: 1px solid var(--table-row-border);
}
.filePreviewTable th:last-child,
.filePreviewTable td:last-child { border-right: none; }
.filePreviewTable tbody tr:last-child td { border-bottom: none; }
.filePreviewTable tbody tr:hover td { background: var(--table-row-hover-bg); }
.fpSel { background: rgba(122,162,255,.12) !important; color: var(--text) !important; }

/* ===== LIGHT THEME ===== */
html[data-theme="light"] {
  color-scheme: light;

  --background:#f4f1fb;
  --foreground:#1a1430;
  --workspace-background-image:
    linear-gradient(135deg, rgba(167,139,250,.22), transparent 36%),
    linear-gradient(225deg, rgba(103,232,249,.20), transparent 40%),
    radial-gradient(ellipse at top, #ede9fe 0%, #f4f1fb 48%, #fbfaff 100%);

  --panel-bg:rgba(255,255,255,.55);
  --panel-bg-strong:rgba(255,255,255,.78);
  --panel-border:rgba(70,50,130,.14);
  --panel-border-strong:rgba(122,90,220,.40);
  --panel-base:rgba(255,255,255,.65);
  --panel-overlay:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.30));
  --panel-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 12px 30px rgba(70,40,150,.10);
  --panel-surface:var(--panel-overlay), var(--panel-base);
  --panel-color:var(--panel-base);
  --surface-color:var(--panel-base);

  --header-base:rgba(255,255,255,.60);
  --header-gradient:linear-gradient(135deg, rgba(139,92,246,.18), rgba(14,165,233,.12) 48%, rgba(16,185,129,.14));
  --header-shadow:0 14px 36px rgba(70,40,150,.10);

  --nav-surface:var(--panel-surface);
  --nav-border:var(--panel-border);
  --nav-item-text:var(--text-muted);
  --nav-item-hover-bg:var(--seg-idle-hover-bg);
  --nav-item-hover-border:var(--seg-idle-hover-border);
  --nav-active-bg:var(--seg-active-bg);
  --nav-active-border:var(--seg-active-border);
  --nav-active-text:var(--seg-active-text);
  --nav-icon-bg:var(--seg-idle-bg);

  --purple:#7c3aed;
  --cyan:#0891b2;
  --emerald:#059669;
  --amber:#b45309;
  --danger:#c4183a;
  --danger-bg:rgba(220,38,38,.10);

  --text-strong:#1a1430;
  --text-default:#1a1430;
  --text-muted:rgba(76,29,149,.75);
  --text-faint:rgba(26,20,48,.55);
  --text-subtle:rgba(26,20,48,.45);
  --text-label:rgb(91,33,182);
  --text-label-soft:rgba(91,33,182,.55);

  --input-bg:rgba(255,255,255,.90);
  --input-border:rgba(70,50,130,.18);
  --input-placeholder:rgba(91,33,182,.45);
  --input-text:#1a1430;
  --input-focus-border:rgba(8,145,178,.55);
  --input-focus-ring:rgba(8,145,178,.18);
  --select-option-bg:#ffffff;

  --btn-secondary-bg:rgba(255,255,255,.85);
  --btn-secondary-border:rgba(70,50,130,.18);
  --btn-secondary-text:#4c1d95;
  --btn-secondary-hover-bg:#ffffff;
  --btn-secondary-hover-border:rgba(8,145,178,.40);
  --btn-secondary-hover-text:#1a1430;

  --btn-ghost-border:rgba(70,50,130,.18);
  --btn-ghost-text:#5b21b6;
  --btn-ghost-hover-bg:rgba(91,33,182,.06);
  --btn-ghost-hover-text:#1a1430;

  --seg-active-bg:linear-gradient(to right, #7c3aed, #c026d3);
  --seg-active-border:#7c3aed;
  --seg-active-text:#ffffff;
  --seg-active-shadow:0 8px 18px -6px rgba(124,58,237,.45);
  --seg-idle-bg:rgba(255,255,255,.75);
  --seg-idle-border:rgba(70,50,130,.15);
  --seg-idle-text:#4c1d95;
  --seg-idle-hover-bg:#ffffff;
  --seg-idle-hover-border:rgba(8,145,178,.35);

  --table-head-bg:rgba(124,58,237,.08);
  --history-detail-sticky-bg:#f3edff;
  --table-head-text:rgba(91,33,182,.85);
  --table-head-border:rgba(70,50,130,.12);
  --table-row-border:rgba(70,50,130,.08);
  --table-row-hover-bg:rgba(91,33,182,.05);

  --notice-error-bg:rgba(254,226,226,.85);
  --notice-error-border:rgba(220,38,38,.30);
  --notice-error-text:#991b1b;
  --notice-warning-bg:rgba(254,243,199,.85);
  --notice-warning-border:rgba(180,83,9,.30);
  --notice-warning-text:#92400e;
  --notice-info-bg:rgba(237,233,254,.85);
  --notice-info-border:rgba(124,58,237,.30);
  --notice-info-text:#5b21b6;
  --notice-success-bg:rgba(209,250,229,.85);
  --notice-success-border:rgba(5,150,105,.32);
  --notice-success-text:#065f46;

  --bg:var(--background);
  --panel:var(--panel-surface);
  --card:var(--panel-surface);
  --card2:var(--panel-bg);
  --surface:var(--panel-surface);
  --surface2:var(--panel-bg);
  --surface3:var(--panel-bg-strong);
  --border:var(--panel-border);
  --text:var(--text-default);
  --fg:var(--text-default);
  --muted:var(--text-muted);
  --muted2:var(--text-faint);
  --primary:var(--cyan);
  --primary2:var(--purple);
  --accent:var(--cyan);
  --ok:var(--emerald);
  --warn:var(--amber);
  --warning:var(--amber);
  --hover:rgba(91,33,182,.06);
  --shadow:var(--panel-shadow);
  --sla-modal-bg:var(--panel-surface);
  --sla-card-bg:var(--panel-bg);
  --sla-card-border:var(--panel-border);
  --sla-label-color:var(--text-label-soft);
  --sla-value-color:var(--text-strong);
  --sla-section-label:var(--text-label-soft);
}
html[data-theme="light"] {
  background: linear-gradient(180deg, #e8edff 0%, #f0f4ff 40%, #eaf0ff 100%);
}
html[data-theme="light"] .recBackdrop{ background: rgba(26,20,48,.22) !important; }
html[data-theme="light"] button {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}
html[data-theme="light"] button:hover {
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
  color: var(--btn-secondary-hover-text);
}
html[data-theme="light"] button.primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: #fff;
}
html[data-theme="light"] button.primary:hover {
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
html[data-theme="light"] button.ghost, html[data-theme="light"] a.ghost {
  background: transparent;
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
}
html[data-theme="light"] button.ghost:hover, html[data-theme="light"] a.ghost:hover {
  background: var(--btn-ghost-hover-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-hover-text);
}
html[data-theme="light"] .loginBtn {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: #fff;
}
html[data-theme="light"] .loginBtn:hover {
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

html[data-theme="light"] input[type="checkbox"] {
  background: rgba(255,255,255,.92);
  border-color: rgba(72,86,115,.36);
  color: #fff;
}

html[data-theme="light"] input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: rgba(59,111,212,.72);
}

html[data-theme="light"] select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--input-placeholder) 50%),
    linear-gradient(135deg, var(--input-placeholder) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(1em + 2px),
    calc(100% - 11px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[data-theme="light"] select:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
html[data-theme="light"] select option {
  background: var(--select-option-bg);
  color: var(--input-text);
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .adminTopbar,
html[data-theme="light"] .sideNav {
  border-color: var(--panel-border);
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .adminTopbar {
  background: var(--header-gradient), var(--header-base);
}
html[data-theme="light"] .sideNav {
  background: var(--nav-surface);
}
html[data-theme="light"] .panel,
html[data-theme="light"] .modal,
html[data-theme="light"] .detailsPanel,
html[data-theme="light"] .adminSectionCard,
html[data-theme="light"] .adminWorkspaceHeader,
html[data-theme="light"] .metricCard,
html[data-theme="light"] .sideDetailPanel,
html[data-theme="light"] .cmpssInputPane,
html[data-theme="light"] .cmpssPreviewPane,
html[data-theme="light"] .cmpssTabPanel,
html[data-theme="light"] .cmpssChartBox {
  background: var(--panel-surface);
  border-color: var(--panel-border);
}
html[data-theme="light"] .autoReconCorrectionDialog {
  background: linear-gradient(180deg, #ffffff, #f4f0ff);
}
html[data-theme="light"] .table th {
  background: var(--table-head-bg);
}
html[data-theme="light"] .table tr:hover td {
  background: var(--table-row-hover-bg);
}
html[data-theme="light"] .fileRow,
html[data-theme="light"] .historyRow {
  border-color: var(--border);
}
html[data-theme="light"] .banner {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.12);
}
html[data-theme="light"] .banner.ok  { border-color: rgba(40,160,90,.35); }
html[data-theme="light"] .banner.warn { border-color: rgba(180,130,0,.35); }
html[data-theme="light"] .banner.error { border-color: rgba(200,50,60,.35); }
html[data-theme="light"] .banner__text { color: var(--muted); }

/* Add file button */
html[data-theme="light"] .btn-add-file {
  color: #1a6b40;
  border-color: rgba(26,107,64,.35);
  background: rgba(26,107,64,.07);
}
html[data-theme="light"] .btn-add-file:hover {
  color: #145432;
  background: rgba(26,107,64,.13);
  border-color: rgba(26,107,64,.55);
}

/* Active tabs / page-size buttons */
html[data-theme="light"] .diff-tab--active,
html[data-theme="light"] .diff-pgsz-btn--active {
  color: #1e3f9e;
  background: rgba(59,111,212,.12);
  border-color: rgba(59,111,212,.4);
}

/* Mismatch-type filter chips */
html[data-theme="light"] .chip {
  color: #7a5200;
  border-color: rgba(180,130,0,.3);
  background: rgba(180,130,0,.07);
}

/* Hover states — invisible white tint on light bg */
html[data-theme="light"] .diff-tab:hover {
  background: rgba(0,0,0,.05);
  color: var(--text);
}
html[data-theme="light"] .typeFilterLabel:hover {
  background: rgba(0,0,0,.05);
}
html[data-theme="light"] .colFilterItem:hover {
  background: rgba(0,0,0,.05);
}

/* Table headers — hardcoded dark bg */
html[data-theme="light"] thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
}
html[data-theme="light"] .sticky-col,
html[data-theme="light"] .sticky-col-2 {
  background: var(--table-head-bg);
}

/* KPI items in light theme */
html[data-theme="light"] .kpi .item {
  background: rgba(0,0,0,.02);
}
html[data-theme="light"] .kpi .item:hover {
  background: rgba(0,0,0,.05);
}

/* Status-mapping chips */
html[data-theme="light"] .smapChip {
  color: #2a4ea0;
  background: rgba(59,111,212,.1);
  border-color: rgba(59,111,212,.25);
}
html[data-theme="light"] .smapGroup {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}
html[data-theme="light"] .smapGroup.dnd-over {
  background: rgba(59,111,212,.07);
  border-color: rgba(59,111,212,.35);
}
html[data-theme="light"] .smapCanonical {
  background: #fff;
  border-color: rgba(0,0,0,.15);
}
html[data-theme="light"] .smapGroupLabel {
  color: var(--muted);
  border-bottom-color: rgba(0,0,0,.15);
}
html[data-theme="light"] .smapGroupLabel:hover {
  color: var(--text);
}
html[data-theme="light"] .smapAddRowBtn:hover {
  color: #1a6b40;
  border-color: rgba(26,107,64,.45);
}

/* Header type filter chips */
.headerTypeFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.reportHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.presetBadge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.presetBadge--file {
  background: rgba(80,160,255,.15);
  color: #60aaff;
  border: 1px solid rgba(80,160,255,.25);
}
.presetBadge--full {
  background: rgba(100,200,120,.12);
  color: #6ec87a;
  border: 1px solid rgba(100,200,120,.22);
}
.presetList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.presetCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.presetCardMain {
  min-width: 0;
}
.presetName {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.presetMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
}
.presetCardType {
  justify-self: start;
}
.presetCardActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.presetSaveBlock {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.presetSaveTitle {
  margin-bottom: 6px;
}
.presetSaveRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.presetSaveRow input {
  flex: 1 1 auto;
  min-width: 0;
}
html[data-theme="light"] .presetBadge--file {
  background: rgba(40,100,220,.1);
  color: #2255bb;
  border-color: rgba(40,100,220,.2);
}
html[data-theme="light"] .presetBadge--full {
  background: rgba(30,130,60,.1);
  color: #1a7a35;
  border-color: rgba(30,130,60,.2);
}

/* Virtual scroll table */
.mobileDiffRows {
  display: none;
}

.vtable-wrap {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  overflow-x: auto;
}
.vtable-wrap table {
  table-layout: fixed;
  border-collapse: collapse;
}
.vtable-wrap thead th {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.vtable-body tr {
  height: 32px;   /* must match VT_ROW_HEIGHT */
}
.vtable-body td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.vt-spacer td { font-size: 0; line-height: 0; overflow: visible; }

@media (max-width: 700px) {
  .mobileDiffRows {
    display: grid;
  }
}

/* Incident modal field rows */
.fieldRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0.75rem;
}
.fieldRow textarea,
.fieldRow input[type="text"],
.fieldRow input[type="date"] {
  width: 100%;
  box-sizing: border-box;
}

/* Incident filter buttons */
.incFilterBtn {
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.incFilterBtn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.text-danger { color: var(--danger); }

/* Birthday/greeting banner — light theme */
html[data-theme="light"] #bdayCard {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 60%, #f0f4ff 100%) !important;
  border-color: rgba(100,130,255,.25) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.15) !important;
}
html[data-theme="light"] #bdayCard div { color: #1a1f2e !important; }
html[data-theme="light"] #bdayName   { color: #b8860b !important; }
html[data-theme="light"] #bdayWish   { color: rgba(30,40,80,.6) !important; }

/* ── Danger buttons — light theme ── */
html[data-theme="light"] button.danger,
html[data-theme="light"] button.ghost.danger {
  color: #b01030;
  border-color: rgba(176,16,48,.3);
  background: rgba(176,16,48,.06);
}
html[data-theme="light"] button.danger:hover,
html[data-theme="light"] button.ghost.danger:hover {
  border-color: rgba(176,16,48,.5);
  background: rgba(176,16,48,.10);
}
html[data-theme="light"] .btn-danger {
  color: #b01030;
  border-color: rgba(176,16,48,.3);
  background: rgba(176,16,48,.06);
}
html[data-theme="light"] .btn-danger:hover {
  border-color: rgba(176,16,48,.5);
  background: rgba(176,16,48,.10);
}

/* ── Pill primary — light theme ── */
html[data-theme="light"] .pill.primary {
  color: #2a4ea0;
  background: rgba(59,111,212,.12);
  border-color: rgba(59,111,212,.3);
}

/* ── Progress bar track — light theme ── */
html[data-theme="light"] .progressBarTrack {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

/* ── Scrollbars — light theme ── */
html[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.18);
}
html[data-theme="light"] *::-webkit-scrollbar-track {
  background: rgba(0,0,0,.04);
}

/* ── Status-mapping unmapped badges — light theme ── */
html[data-theme="light"] .smapUnmappedBadge {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color: var(--muted);
}
html[data-theme="light"] .smapUnmappedBadge:hover {
  background: rgba(59,111,212,.08);
  border-color: rgba(59,111,212,.3);
  color: var(--text);
}

/* ── Summary KPI row — light theme ── */
html[data-theme="light"] .summaryKpi {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}

/* ── File preview row hover — light theme ── */
html[data-theme="light"] .filePreviewTable tbody tr:hover td {
  background: var(--table-row-hover-bg);
}
html[data-theme="light"] .filePreviewTable th {
  background: var(--table-head-bg);
}

/* ── Checkbox rows & view rows — light theme ── */
html[data-theme="light"] .chk,
html[data-theme="light"] .viewRow {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.1);
}

/* ── Tool groups — light theme ── */
html[data-theme="light"] .toolGroup {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.1);
}

/* ── Diff table wrap & result blocks — light theme ── */
html[data-theme="light"] .diff-table-wrap,
html[data-theme="light"] .tableWrap {
  background: var(--panel-surface);
}

/* ── Column filter popup — light theme ── */
html[data-theme="light"] .colFilterPopup {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* ── Details card — light theme ── */
html[data-theme="light"] .details-card {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.1);
}

/* ── Drop overlay — light theme ── */
html[data-theme="light"] .dropOverlay {
  background: rgba(230,235,255,.92);
  border-color: rgba(59,111,212,.5);
}
html[data-theme="light"] .dropOverlayInner {
  color: var(--primary);
}

/* --- CSV collection operations center --- */
.csvCollectionWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 12px;
  align-items: start;
  align-content: start;
}

.csvCollectionRoot,
.csvCollectionOverview,
.csvCollectionProviders,
.csvCollectionArchiveExport,
.csvCollectionManualCollect,
.csvCollectionSchedule,
.csvCollectionRuns {
  min-width: 0;
}

.csvCollectionOverview,
.csvCollectionProviders,
.csvCollectionArchiveExport,
.csvCollectionSchedule,
.csvCollectionRuns,
.csvCollectionManualCollect {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.025);
}

.csvCollectionOverview {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(14px);
}

.csvCollectionTabs {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
  overflow-x: auto;
}

.csvCollectionTab {
  min-height: 34px;
  padding: 7px 12px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  white-space: nowrap;
}

.csvCollectionTab.active {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
}

.csvCollectionTabPanel,
.csvCollectionOverviewGrid {
  min-width: 0;
}

.csvCollectionOverviewGrid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: start;
}

.csvCollectionOverviewGrid .csvCollectionProviders {
  grid-column: 1 / -1;
}

.csvCollectionSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}

.csvCollectionSectionHeader h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: .98rem;
}

.csvCollectionStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.csvCollectionStat {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft-bg);
}

.csvCollectionStat span,
.csvCollectionFilters label span,
.csvCollectionScheduleRow label span,
.csvCollectionManualGrid label span {
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.csvCollectionStat b {
  color: var(--text-strong);
  font-size: 1.12rem;
  line-height: 1.1;
}

.csvCollectionStat small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.csvCollectionError,
.csvCollectionNotice {
  margin-bottom: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  font-size: .86rem;
}

.csvCollectionError {
  border: 1px solid var(--notice-error-border);
  background: var(--notice-error-bg);
  color: var(--notice-error-text);
}

.csvCollectionNotice {
  border: 1px solid var(--notice-success-border);
  background: var(--notice-success-bg);
  color: var(--notice-success-text);
}

.csvCollectionToast {
  position: fixed;
  top: 72px;
  right: 22px;
  z-index: 320;
  max-width: min(360px, calc(100vw - 44px));
  padding: 10px 14px;
  border: 1px solid var(--notice-success-border);
  border-radius: var(--radius-md);
  background: var(--notice-success-bg);
  color: var(--notice-success-text);
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
  font-size: .86rem;
  font-weight: 700;
}

.csvCollectionTableWrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.csvCollectionArchiveExport .csvCollectionTableWrap {
  max-height: calc(100vh - 360px);
  min-height: 260px;
  overflow: auto;
}

.csvCollectionProviderTable,
.csvCollectionDataTable {
  width: 100%;
  border-collapse: collapse;
}

.csvCollectionProviderTable th,
.csvCollectionProviderTable td,
.csvCollectionDataTable th,
.csvCollectionDataTable td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.csvCollectionProviderTable th,
.csvCollectionDataTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--table-head-text);
  background: var(--table-head-bg);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.csvCollectionProviderTable tr:hover td,
.csvCollectionDataTable tr:hover td {
  background: var(--table-row-hover-bg);
}

.csvCollectionStrong {
  min-width: 0;
  color: var(--text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.csvCollectionStatusPill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--seg-idle-border);
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--seg-idle-bg);
  color: var(--text-default);
  white-space: nowrap;
}

.csvCollectionStatusPill.isOk {
  border-color: var(--notice-success-border);
  background: var(--notice-success-bg);
  color: var(--notice-success-text);
}

.csvCollectionStatusPill.isBad {
  border-color: var(--notice-error-border);
  background: var(--notice-error-bg);
  color: var(--notice-error-text);
}

.csvCollectionStatusPill.isPending {
  border-color: var(--notice-warning-border);
  background: var(--notice-warning-bg);
  color: var(--notice-warning-text);
}

.csvCollectionRunStatusStack {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.csvCollectionAckBtn {
  min-height: 22px;
  padding: 2px 8px;
  font-size: 0.76rem;
}

.csvCollectionAckState {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--notice-success-border);
  border-radius: 999px;
  background: var(--notice-success-bg);
  color: var(--notice-success-text);
  font-size: 0.76rem;
  font-weight: 700;
}

.csvCollectionFilters,
.csvCollectionManualGrid {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(140px, .8fr)) minmax(150px, auto) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.csvCollectionFilters label,
.csvCollectionManualGrid label,
.csvCollectionScheduleRow label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.csvCollectionFilters input,
.csvCollectionFilters select,
.csvCollectionManualGrid input,
.csvCollectionManualGrid select,
.csvCollectionScheduleRow input {
  min-width: 0;
  width: 100%;
}

.csvCollectionReportTypes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.csvCollectionToggle {
  min-height: 34px;
  padding: 6px 10px;
  border-color: var(--seg-idle-border);
  background: var(--seg-idle-bg);
  color: var(--seg-idle-text);
  box-shadow: none;
}

.csvCollectionToggle.active {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
}

.csvCollectionCheck {
  display: inline-flex !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.csvCollectionCheck input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

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

.csvCollectionScheduleList {
  display: grid;
  gap: 8px;
}

.csvCollectionScheduleRow {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(120px, .6fr) minmax(170px, .8fr) auto auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.csvCollectionScheduleRow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.csvCollectionManualCollect {
  max-width: 100%;
}

.csvCollectionManualGrid {
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(140px, .8fr)) minmax(150px, auto);
}

.csvCollectionManualGrid .csvCollectionReportTypes {
  grid-column: auto;
}

.csvCollectionManualGrid button {
  justify-self: start;
}

.csvCollectionEmpty {
  color: var(--muted);
  text-align: center !important;
}

.csvCollectionErrorText {
  color: var(--notice-error-text);
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .csvCollectionStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csvCollectionFilters,
  .csvCollectionManualGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .csvCollectionOverviewGrid .csvCollectionProviders {
    grid-column: 1;
  }
}

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

@media (max-width: 700px) {
  .csvCollectionOverview,
  .csvCollectionProviders,
  .csvCollectionArchiveExport,
  .csvCollectionSchedule,
  .csvCollectionRuns,
  .csvCollectionManualCollect {
    padding: 10px;
  }

  .csvCollectionSectionHeader {
    display: grid;
  }

  .csvCollectionFilters,
  .csvCollectionManualGrid,
  .csvCollectionScheduleRow {
    grid-template-columns: 1fr;
  }

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

  .csvCollectionOverview {
    position: static;
  }

  .csvCollectionProviderTable,
  .csvCollectionProviderTable tbody,
  .csvCollectionProviderTable tr,
  .csvCollectionProviderTable td,
  .csvCollectionDataTable,
  .csvCollectionDataTable tbody,
  .csvCollectionDataTable tr,
  .csvCollectionDataTable td {
    display: block;
    width: 100%;
  }

  .csvCollectionProviderTable thead,
  .csvCollectionDataTable thead {
    display: none;
  }

  .csvCollectionProviderTable tr,
  .csvCollectionDataTable tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .csvCollectionProviderTable td,
  .csvCollectionDataTable td {
    display: grid;
    grid-template-columns: minmax(94px, 34%) minmax(0, 1fr);
    gap: 8px;
    border-bottom: 0;
  }

  .csvCollectionProviderTable td[data-label]::before,
  .csvCollectionDataTable td[data-label]::before {
    content: attr(data-label);
    color: var(--text-label-soft);
    font-size: .75rem;
    font-weight: 700;
  }

  .csvCollectionArchiveExport .csvCollectionTableWrap {
    max-height: none;
    min-height: 0;
  }
}

/* CSV collection handoff layout */
.csvCollectionHeader.pageHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-header-fill);
  box-shadow: var(--panel-shadow);
}

.pageHeaderLeft,
.pageHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pageHeaderLeft {
  align-items: flex-start;
}

.pageHeaderRight {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pageHeaderEmoji {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.08);
  font-size: 1.1rem;
}

.pageHeaderTitle {
  color: var(--text-strong);
  font-size: 1.22rem;
  font-weight: 780;
  line-height: 1.15;
}

.eyebrow,
.eyebrow-soft {
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow-soft {
  color: var(--muted);
}

.metricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.csvCollectionStats .metricCard {
  min-height: 94px;
  padding: 12px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
    rgba(20,16,48,.70);
}

.csvCollectionStats .metricCardValue {
  margin-top: 6px;
  font-size: clamp(1.22rem, 1.4vw, 1.55rem);
}

.metricCardFoot {
  margin-top: 5px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.csvCollectionStatusNumbers {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

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

.panelTitleCount {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

.pill {
  gap: 5px;
  min-height: 24px;
  font-weight: 700;
  line-height: 1;
}

.pill-emerald {
  border-color: var(--notice-success-border);
  background: var(--notice-success-bg);
  color: var(--notice-success-text);
}

.pill-amber {
  border-color: var(--notice-warning-border);
  background: var(--notice-warning-bg);
  color: var(--notice-warning-text);
}

.pill-rose {
  border-color: var(--notice-error-border);
  background: var(--notice-error-bg);
  color: var(--notice-error-text);
}

.pill-cyan {
  border-color: rgba(103,232,249,.40);
  background: rgba(8,145,178,.18);
  color: #cffafe;
}

.pill-neutral {
  border-color: var(--seg-idle-border);
  background: var(--seg-idle-bg);
  color: var(--seg-idle-text);
}

.adminChipRow {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.adminChip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--seg-idle-border);
  border-radius: var(--radius-full);
  background: var(--seg-idle-bg);
  color: var(--seg-idle-text);
  font-size: .74rem;
  font-weight: 700;
}

.adminChip--muted {
  color: var(--muted);
}

.adminStatusDot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--text-faint);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.adminStatusDot--emerald {
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(110,231,183,.12);
}

.adminStatusDot--rose {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255,107,136,.12);
}

.csvColOverviewSplit {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(520px, 1.28fr);
  gap: 12px;
  align-items: start;
}

.csvCollectionOverviewGrid.csvColOverviewSplit .csvCollectionProviders {
  grid-column: auto;
}

.csvColOverviewStack {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.csvColRunList {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.csvColProviderList {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.csvColProviderRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(112px, auto);
  align-items: center;
  gap: 10px;
  height: 64px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.045);
}

.csvColProviderName {
  color: var(--text-strong);
  font-weight: 760;
  line-height: 1.15;
}

.csvColProviderMain,
.csvColProviderBalance {
  min-width: 0;
  overflow-wrap: anywhere;
}

.csvColProviderBalance {
  color: var(--text-default);
  font-size: .76rem;
  text-align: right;
}

.csvColBalanceStack {
  display: grid;
  gap: 2px;
  justify-items: end;
  align-content: center;
  min-height: 42px;
}

.csvColBalanceLine {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}

.csvColBalanceLine strong {
  color: var(--text-default);
  font-weight: 650;
}

.csvCollectionProviderTableContract {
  display: none;
}

.csvColArchiveFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 14px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.025);
}

.csvColArchiveFilterGroup {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.csvColReportToggles {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.csvColReportToggle,
.csvColReportToggleCheck {
  min-height: 34px;
  border-radius: var(--radius-md);
}

.csvColReportToggle--active,
.csvColReportToggleCheck:has(input:checked) {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
}

.incFullTableWrap {
  width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
}

.incFullTable {
  min-width: 860px;
}

.incFullTable th,
.incFullTable td {
  padding: 8px 10px;
}

.incFullRow {
  background: rgba(255,255,255,.015);
}

.stickyCol {
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(37,31,72,.96);
}

thead .stickyCol {
  z-index: 3;
}

.csvCollectionAlignRight {
  text-align: right !important;
}

.resultPager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.025);
}

.resultPagerLeft,
.resultPagerRight {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.csvColManualForm {
  display: grid;
  grid-template-columns: minmax(240px, .95fr) minmax(220px, .75fr) minmax(260px, .85fr);
  gap: 12px;
  padding: 12px;
  margin-bottom: 0;
  align-items: stretch;
}

.csvColManualFormCol {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  height: 100%;
}

.csvColManualFormCol .primary-btn {
  align-self: end;
}

.csvColRunsTableWrap {
  overflow-x: hidden;
}

.csvColRunsTable {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.csvColRunsTable th,
.csvColRunsTable td {
  text-align: left;
  overflow-wrap: anywhere;
}

.csvColRunIdCol { width: 54px; }
.csvColRunStatusCol { width: 92px; }
.csvColRunProviderCol { width: 34%; }
.csvColRunReportsCol { width: 22%; }
.csvColRunUpdatedCol { width: 210px; }

.adminAutoRecFormGroupHead {
  display: grid;
  gap: 4px;
}

.adminAutoRecFormGroupSub,
.adminFormFieldHint {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.csvColManualSummary {
  display: grid;
  gap: 7px;
}

.csvColManualSummary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--panel-soft-border);
}

.csvColManualSummary > div:last-child {
  border-bottom: 0;
}

.csvColScheduleList {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.csvColScheduleCard {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
}

.csvColScheduleCardLeft {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.csvColScheduleCardTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong);
  font-weight: 760;
}

.csvColScheduleCardDesc,
.csvColScheduleCardMeta {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}

.csvColScheduleCardMeta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.csvColScheduleCardRight {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.csvColScheduleField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

@media (max-width: 1279px) {
  .metricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .csvColManualFormCol:last-child {
    grid-column: 1 / -1;
  }

  .csvColScheduleCard,
  .csvColScheduleCardRight {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .csvCollectionHeader.pageHeader,
  .pageHeaderLeft,
  .pageHeaderRight,
  .resultPager {
    display: grid;
    justify-items: start;
  }

  .metricGrid,
  .csvColManualForm,
  .csvColScheduleCard,
  .csvColScheduleCardRight {
    grid-template-columns: 1fr;
  }

  .csvColManualFormCol:last-child {
    grid-column: auto;
  }

  .csvColProviderRow {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .csvColProviderBalance {
    grid-column: 2;
    text-align: left;
  }

  .incFullTable {
    min-width: 0;
  }

  .stickyCol {
    position: static;
  }
}

/* --- Plan planner --- */
.cmpssDashboardMain {
  display: grid;
  gap: 14px;
}

.cmpssHeaderActions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

#cmpssDashboardStatus {
  display: block;
  padding: 0 14px 12px;
}

.cmpssDashboardGrid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.cmpssWorkbookShell {
  display: grid;
  gap: 14px;
}

.cmpssDashboardStatus {
  padding: 8px 14px 12px;
}

.cmpssTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
}

.cmpssTab {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--seg-idle-text);
  padding: 0 12px;
  font-weight: 750;
}

.cmpssTab.active {
  color: var(--seg-active-text);
  background: var(--seg-active-bg);
  border-color: var(--seg-active-border);
  box-shadow: var(--seg-active-shadow);
}

.cmpssTabPanel {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 14px;
  min-width: 0;
}

.cmpssSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cmpssHireGrid,
.cmpssTargetPlannerLayout {
  display: grid;
  gap: 12px;
}

.cmpssWorkBlock {
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: var(--panel-soft-bg);
  padding: 10px 12px;
}

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

.cmpssTeamStats span {
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft-bg);
  padding: 4px 7px;
  font-size: .75rem;
}

.cmpssMiniTimeline {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.cmpssMiniTimeline span {
  min-width: 0;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft-bg);
  padding: 4px 2px;
  text-align: center;
  font-size: .68rem;
}

.cmpssTableWrap {
  overflow-x: auto;
}

.cmpssPlanTable {
  width: 100%;
  border-collapse: collapse;
}

.cmpssPlanTable th,
.cmpssPlanTable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--table-row-border);
  text-align: left;
}

.cmpssCalculatorShell {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  gap: 14px;
  align-items: start;
}

.cmpssControls,
.cmpssKpiPanel,
.cmpssInputPane,
.cmpssPreviewPane {
  min-width: 0;
}

.cmpssInputPane,
.cmpssPreviewPane {
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  padding: 14px;
}

.cmpssControlsBody {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.cmpssInputFields,
.cmpssResultDetails {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.cmpssInputFields {
  padding-top: 14px;
}

.cmpssSavedScenarioBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.cmpssSavedScenarioActions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.cmpssSavedScenarioActions .small {
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.cmpssFlowSection {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cmpssFlowHeader {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cmpssFlowTitle,
.cmpssKpiGroupTitle {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
}

.cmpssSelectGrid,
.cmpssAssumptionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cmpssTargetGrid {
  grid-template-columns: minmax(0, 1fr);
}

.cmpssDetailsPanel {
  min-width: 0;
  border-top: 1px solid var(--border);
}

.cmpssDetailsPanel summary {
  cursor: pointer;
  padding: 12px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cmpssDetailsPanel summary::marker {
  color: var(--muted);
}

.cmpssAdvancedSettings .cmpssAssumptionGrid,
.cmpssAdvancedAssumptions .cmpssAssumptionGrid,
.cmpssChartDetails .cmpssChartGrid {
  padding-top: 12px;
}

.cmpssAdvancedAssumptions {
  margin-top: 12px;
}

.cmpssControls label,
.cmpssInputPane label,
.cmpssAssumptionGrid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cmpssControls label span,
.cmpssInputPane label span,
.cmpssAssumptionGrid label span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.cmpssControls input,
.cmpssControls select,
.cmpssInputPane input,
.cmpssInputPane select {
  width: 100%;
  min-width: 0;
}

.cmpssTargetStatus {
  padding: 10px 0 0;
}

.cmpssKpiGrid {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.cmpssKpiGrid.metricCardGrid {
  grid-template-columns: 1fr;
}

.cmpssKpiGroup {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cmpssKpiCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cmpssKpi {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.cmpssKpiLabel {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.cmpssKpiValue {
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.1;
}

.cmpssChartPanel {
  min-height: 1px;
  padding: 0;
}

.cmpssChartPanel {
  overflow: hidden;
}

.cmpssChartDetails {
  margin: 0 14px 14px;
}

.cmpssChartGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.cmpssChartGridCompact {
  padding-left: 0;
  padding-right: 0;
}

.cmpssChartBox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.cmpssChartBoxHeader {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cmpssChartTitle {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.cmpssChartNote {
  line-height: 1.35;
}

.cmpssChartCanvasWrap {
  position: relative;
  width: 100%;
  height: 260px;
  min-height: 260px;
  min-width: 0;
  overflow: hidden;
}

.cmpssChartCanvasWrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.cmpssChartEmpty,
.cmpssChartFallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 14px;
  text-align: center;
}


html[data-theme="light"] .cmpssChartBox {
  background: var(--panel-surface);
}

.cmpssPlanWorkspace {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.cmpssScenarioContextBar {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--panel-soft-bg);
}

.cmpssScenarioContextBarSingleProject {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cmpssScenarioContextBar label,
.cmpssScenarioManagerToolbar label,
.cmpssSavedScenarioBar label,
.cmpssPortfolioControls label,
.cmpssSelectGrid label,
.cmpssAssumptionGrid label,
.cmpssMonthGrid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cmpssScenarioContextBar label span,
.cmpssScenarioManagerToolbar label span,
.cmpssSavedScenarioBar label span,
.cmpssPortfolioControls label span,
.cmpssSelectGrid label span,
.cmpssAssumptionGrid label span,
.cmpssMonthGrid label span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.cmpssScenarioContextBar select,
.cmpssScenarioManagerToolbar input,
.cmpssSavedScenarioBar input,
.cmpssSavedScenarioBar select,
.cmpssPortfolioControls input,
.cmpssPortfolioControls select,
.cmpssPortfolioTable select,
.cmpssSelectGrid input,
.cmpssSelectGrid select,
.cmpssAssumptionGrid input,
.cmpssAssumptionGrid select,
.cmpssMonthGrid input {
  width: 100%;
  min-width: 0;
}

.cmpssScenarioContextSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.cmpssScenarioContextItem,
.cmpssPlanStatusItem {
  min-width: 0;
}

.cmpssScenarioContextItem span,
.cmpssPlanStatusItem span,
#cmpssProjectIndicator {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.cmpssScenarioContextItem b,
.cmpssPlanStatusValue {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmpssScenarioContextActions {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 0;
}

#cmpssProjectIndicator,
#cmpssDashboardStatus {
  overflow-wrap: anywhere;
  text-align: right;
}

.cmpssPlanStatusBar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}

.cmpssScenarioLibraryGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.cmpssPageScenarioBar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cmpssMonthlyPlanControls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cmpssPageScenarioBar .cmpssSavedScenarioActions {
  grid-column: auto;
}

.cmpssSavedScenarioBlock,
.cmpssScenarioManagerBlock,
.cmpssScenarioManagerList,
.cmpssInputGroup {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cmpssPortfolioControls,
.cmpssScenarioManagerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.cmpssScenarioManagerGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.cmpssScenarioManagerToolbar {
  display: grid;
  max-width: 420px;
  min-width: 0;
}

.cmpssScenarioManagerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--panel-soft-bg);
}

.cmpssScenarioManagerName {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cmpssSectionTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cmpssSectionTabs .active {
  border-color: var(--seg-active-border);
  color: var(--seg-active-text);
  background: var(--seg-active-bg);
  box-shadow: var(--seg-active-shadow);
}

.cmpssInputResultGrid {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.cmpssSectionPane,
.cmpssOverviewPanel {
  display: none;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-surface);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}

.cmpssSectionPane.active,
.cmpssOverviewPanel.active {
  display: grid;
  gap: 14px;
}

.cmpssStickyResultPanel {
  position: sticky;
  top: 78px;
  align-self: start;
  max-height: calc(100vh - 92px);
  overflow: auto;
}

.cmpssInputGroupHeader {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.cmpssInputFieldGroupGrid {
  align-items: end;
}

.cmpssQuickResult,
.cmpssScenarioImpact .cmpssKpiCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cmpssScenarioImpact {
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}

.cmpssFieldNote {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.cmpssMonthGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  gap: 12px;
}

.cmpssKpiValueSmall {
  font-size: 13px;
  line-height: 1.35;
}

.cmpssHireSummary {
  padding: 0;
}

.cmpssPortfolioSummary {
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cmpssTableWrap {
  width: 100%;
  overflow-x: auto;
}

.cmpssPlannerTable {
  width: 100%;
  min-width: 1280px;
  border-collapse: collapse;
  font-size: 12px;
}

.cmpssPortfolioTable {
  min-width: 1440px;
}

.cmpssCurrentTeamTable {
  min-width: 720px;
}

.cmpssPlannerTable th,
.cmpssPlannerTable td {
  padding: 8px;
  border-top: 1px solid var(--table-row-border);
  text-align: left;
  vertical-align: middle;
}

.cmpssPlannerTable th {
  color: var(--muted);
  font-weight: 700;
}

.cmpssPlannerTable input {
  min-width: 72px;
  width: 100%;
}

.cmpssPlannerTable select {
  min-width: 110px;
  width: 100%;
}

.cmpssPortfolioWarning {
  max-width: 220px;
  white-space: normal;
  color: var(--muted);
  line-height: 1.35;
}

.cmpssPortfolioChartGrid {
  padding-left: 0;
  padding-right: 0;
}

html[data-theme="light"] .cmpssScenarioContextBar,
html[data-theme="light"] .cmpssScenarioManagerRow {
  background: var(--panel-soft-bg);
}

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

  .cmpssScenarioContextBar {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  }

  .cmpssScenarioContextBarSingleProject {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cmpssScenarioContextActions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
  }

  #cmpssProjectIndicator,
  #cmpssDashboardStatus {
    text-align: left;
  }

  .cmpssSavedScenarioBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmpssMonthlyPlanControls,
  .cmpssScenarioLibraryGrid,
  .cmpssScenarioManagerGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmpssSavedScenarioActions {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
}

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

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

  .cmpssStickyResultPanel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .cmpssKpiCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmpssPortfolioSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 620px) {
  .cmpssHeaderActions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cmpssScenarioContextBar,
  .cmpssScenarioContextSummary,
  .cmpssScenarioContextActions,
  .cmpssPlanStatusBar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  #cmpssProjectIndicator,
  #cmpssDashboardStatus {
    text-align: left;
  }

  .cmpssSelectGrid,
  .cmpssSavedScenarioBar,
  .cmpssMonthlyPlanControls,
  .cmpssScenarioLibraryGrid,
  .cmpssScenarioManagerGrid,
  .cmpssPortfolioControls,
  .cmpssPortfolioSummary,
  .cmpssQuickResult,
  .cmpssScenarioImpact .cmpssKpiCards,
  .cmpssAssumptionGrid,
  .cmpssMonthGrid,
  .cmpssKpiCards {
    grid-template-columns: 1fr;
  }

  .cmpssSavedScenarioActions {
    flex-wrap: wrap;
  }

  .cmpssKpiValue {
    font-size: 20px;
  }

  .cmpssChartGrid {
    padding: 12px;
  }

  .cmpssChartBox {
    padding: 10px;
  }

  .cmpssChartCanvasWrap {
    height: 230px;
    min-height: 230px;
  }
}

/* Accepted handoff layouts for the remaining panel pages */
.handoffUi {
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.main--airy {
  padding: 18px 20px 26px;
}

.handoffUi > .panel,
.handoffUi .panel {
  min-width: 0;
}

.handoffUi .pageHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--panel-header-fill);
  box-shadow: var(--panel-shadow);
}

.pageHeader--compact {
  align-items: center;
  min-height: 56px;
  padding: 10px 14px !important;
}

.pageHeader--compact .pageHeaderLeft {
  align-items: center;
}

.pageHeader--compact .pageHeaderEmoji {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.pageHeader--compact .pageHeaderTitle {
  font-size: 1.06rem;
}

.projectSwitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  color: var(--text-default);
}

.projectSwitchLabel {
  color: var(--text-label-soft);
  font-size: .68rem;
  font-weight: 750;
  text-transform: uppercase;
}

.projectSwitchValue {
  color: var(--text-strong);
  font-weight: 760;
  min-width: 0;
  max-width: min(34vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar--airy {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
}

.toolbar--airy .toolGroup {
  min-height: 0;
  padding: 10px;
  border-radius: var(--radius-md);
}

.validationNotice {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-height: 0;
  border-color: rgba(103,232,249,.28);
  background: rgba(8,145,178,.10);
}

.configExpanded {
  margin: 0 12px 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.configExpanded .csvAdvancedSettingsBody {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
}

.configExpanded .csvToolGroup--wide {
  grid-column: span 2;
}

.csvHandoffMain .csvHomeLayout {
  display: contents;
}

.csvHandoffMain .csvRecentHistoryPanel {
  position: static;
}

.csvHandoffMain .historyToolbar {
  padding: 10px 12px;
}

.autoReconPageHeader + .autoReconStatus,
.botControlPageHeader + .pspSimpleLayout,
#incidentsArchiveRoot {
  margin-top: 0;
}

.autoReconRunHistoryPanel {
  overflow: hidden;
}

.autoReconStatus {
  margin: 0 12px;
}

.autoReconFilters.incToolbar {
  margin: 0 12px 12px;
  padding: 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
}

.incToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.incToolbar > * {
  min-width: 0;
}

.incTabsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 12px 10px;
}

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

.incSegmentedBig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--seg-idle-bg);
}

.incSegmentedBig button {
  min-height: 30px;
  padding: 6px 12px;
  border-color: transparent;
  background: transparent;
  color: var(--seg-idle-text);
  box-shadow: none;
}

.incSegmentedBig button.active,
.incSegmentedBig .active {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
}

.incSegmentedBig--sm button {
  min-height: 28px;
  padding: 5px 10px;
  font-size: .78rem;
}

.incInboxBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  color: var(--text-default);
}

.incTabCount,
.incChipCount {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,.18);
  color: inherit;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 800;
}

.incFullTableWrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--border);
}

.incFullTable {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}

.incFullTable th,
.incFullTable td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--table-row-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incFullTable th {
  color: var(--table-head-text);
  background: var(--table-head-bg);
  font-size: .68rem;
  text-transform: uppercase;
}

.incFullRow:hover,
.incFullTable tr:hover td {
  background: var(--table-row-hover-bg);
}

.autoReconTableWrap.incFullTableWrap {
  border-top: 0;
}

.botShell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  min-width: 0;
}

.pspSimpleLayout.botShell {
  grid-template-columns: 320px minmax(0, 1fr);
}

.botProviderListHead {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--panel-border);
}

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

.botProviderListBody {
  display: grid;
  gap: 6px;
  align-content: start;
}

.botProviderItem {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 9px 10px;
  text-align: left;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
}

.botProviderItem:hover,
.botProviderItem--selected,
.pspProviderCard.active.botProviderItem {
  border-color: var(--panel-border-strong);
  background: rgba(167,139,250,.12);
}

.botProviderItemMain,
.botProviderItemSub {
  min-width: 0;
}

.botProviderItemName {
  color: var(--text-strong);
  font-size: .9rem;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
}

.botProviderItemSub {
  color: var(--muted);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.botTabs.pspTabs {
  justify-content: flex-start;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
}

.botTabs .pspTab {
  border-color: transparent;
  background: transparent;
}

.botSettingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.botSettingsGrid > * {
  min-width: 0;
}

.botChecksGrid {
  min-width: 0;
}

.botChecksGrid table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.botChecksGrid .botCheckRow td {
  border-top: 1px solid var(--panel-soft-border);
  border-bottom: 1px solid var(--panel-soft-border);
  background: rgba(255,255,255,.035);
}

.botChecksGrid .botCheckRow td:first-child {
  border-left: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.botChecksGrid .botCheckRow td:last-child {
  border-right: 1px solid var(--panel-soft-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.planHandoffPageHeader {
  margin-bottom: 12px;
}

.planTabsBefore {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
}

.planTabsBefore button {
  border-color: transparent;
  background: transparent;
}

.planTabsBefore button.active {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
}

.planSaveBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--notice-success-border);
  border-radius: var(--radius-md);
  background: var(--notice-success-bg);
  color: var(--notice-success-text);
  font-size: .78rem;
  font-weight: 760;
}

.planSaveDot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(110,231,183,.12);
}

.planFormGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.adminHandoffTabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
}

.adminHandoffTabs .adminTab {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: 44px;
  border-color: transparent;
  background: transparent;
}

.adminHandoffTabs .adminTab.active,
.adminHandoffTabs .adminTab--active {
  border-color: var(--seg-active-border);
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
}

.adminProjectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
}

.adminProjectCard,
.adminProjectCardCreate {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  text-align: left;
}

.adminProjectCard--selected {
  border-color: var(--panel-border-strong);
  background: rgba(167,139,250,.12);
}

.adminProjectCardHead,
.adminProjectCardActions,
.adminProjectCardStats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.adminProjectCardName {
  color: var(--text-strong);
  font-weight: 800;
}

.adminProjectCardStats > div {
  display: grid;
  gap: 2px;
}

.adminProjectCardStat {
  color: var(--text-default);
  font-weight: 760;
}

.adminUserTable {
  width: 100%;
  table-layout: auto;
}

.adminAccessHeader {
  margin-top: 0;
}

.adminSystemTwoCol.active {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 14px;
  align-items: start;
}

.adminSystemTwoCol .adminToolbar,
.adminSystemTwoCol #systemSummary {
  min-width: 0;
}

.adminWishBanner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(216,180,254,.30);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,192,203,.16), rgba(216,180,254,.12)), rgba(255,255,255,.05);
}

.adminWishBannerEmoji {
  font-size: 1.6rem;
}

.adminWishBannerMain {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.adminWishBannerHeading {
  color: var(--text-strong);
  font-size: .98rem;
  font-weight: 760;
}

.adminWishBannerHeading strong {
  color: #f9a8d4;
}

.adminWishBannerWish {
  color: var(--text-default);
  font-size: .9rem;
}

.adminWishBannerDismiss {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .csvHandoffMain .csvHomeLayout,
  .pspSimpleLayout.botShell,
  .botShell,
  .adminSystemTwoCol.active {
    grid-template-columns: 1fr;
  }

  .csvHandoffMain .csvRecentHistoryPanel {
    position: static;
  }
}

@media (max-width: 820px) {
  .main--airy {
    padding: 12px;
  }

  .handoffUi .pageHeader,
  .pageHeaderLeft,
  .pageHeaderRight,
  .incTabsRow,
  .adminWishBanner {
    display: grid;
    justify-items: start;
  }

  .toolbar--airy,
  .configExpanded .csvAdvancedSettingsBody,
  .planFormGrid,
  .adminHandoffTabs {
    grid-template-columns: 1fr;
  }
  .csvrec-root .toolbar--sourceRow {
    grid-template-columns: 1fr;
  }
  .csvrec-root .toolbarAction,
  .csvrec-root .csvTopAddFile {
    width: 100%;
  }

  .configExpanded .csvToolGroup--wide {
    grid-column: auto;
  }

  .incFullTable {
    min-width: 760px;
  }
}

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

.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: 120;
}
.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;
  justify-content:flex-end;
  flex-wrap:wrap;
  min-width:0;
}
.csvrec-root .topbarProjectSwitch {
  display:flex;
  flex:0 0 auto;
}

.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 .primary-btn:hover { background: var(--btn-primary-hover-bg); border-color: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); color: #fff; }
.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;
}
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;
}

.csvrec-root .reconciliationTabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
}
.csvrec-root .reconciliationTab {
  flex: 0 0 auto;
  border: 1px solid var(--seg-idle-border);
  background: var(--seg-idle-bg);
  color: var(--seg-idle-text);
  border-radius: 999px;
  padding: 8px 12px;
  font: 700 12px/1 var(--sans);
  cursor: pointer;
}
.csvrec-root .reconciliationTab--active {
  border-color: var(--seg-active-border);
  background: transparent;
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--seg-active-border), 0 0 0 3px rgba(192,132,252,.14);
}
.csvrec-root .reconciliationTabPanels {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.csvrec-root .reconciliationTabPanel {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.csvrec-root .reconciliationTabPanel[hidden] {
  display: none;
}

/* ── 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 .smapChip--grouped { position: relative; padding-right: 4px; }
.csvrec-root .smapChip--grouped .smapChipX { flex: 0 0 20px; width: 20px; min-width: 18px; height: 20px; margin-left: 2px; padding: 0; border-radius: 999px; cursor: pointer; pointer-events: auto; position: relative; z-index: 2; touch-action: manipulation; }
.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;
  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: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px;
}
.csvrec-root .toolbar--sourceRow {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
}
.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 .toolbarAction {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
}
.csvrec-root .csvTopAddFile {
  min-width: 132px;
  padding-inline: 18px;
  justify-content: center;
  white-space: nowrap;
}
.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--inline {
  margin: 10px 0 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}
.csvrec-root .configExpanded--inline .configHeader {
  padding: 12px 14px;
  background: transparent;
}
.csvrec-root .configExpanded--inline .configSection {
  padding: 14px;
}
.csvrec-root .csvLocalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.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;
}

#incidentsArchiveRoot .pageHeader {
  overflow: visible;
}
.csvrec-root .projectSwitch {
  display: inline-flex; align-items: center;
  gap: 10px;
  min-width: 0;
  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;
  min-width: 0;
  max-width: min(34vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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 .projectSwitchOptionMeta {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}
.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: fixed;
  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;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.csvrec-root .modalBackdrop--app {
  position: fixed;
  inset: 0;
}
.csvrec-root #autoRecArchiveModalRoot .modalBackdrop {
  position: fixed;
}
.csvrec-root .modal--app {
  width: min(860px, calc(100vw - 48px));
  max-height: calc(100vh - 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;
  color: var(--text);
}
.csvrec-root .modal--size-compact {
  width: min(560px, calc(100vw - 48px));
}
.csvrec-root .modal--size-standard {
  width: min(860px, calc(100vw - 48px));
}
.csvrec-root .modal--size-wide {
  width: min(920px, calc(100vw - 48px));
}
.csvrec-root .modal--size-full {
  width: min(1320px, calc(100vw - 48px));
}
.csvrec-root .modal--app.modal--normalizedRecon {
  width: min(1920px, 96vw);
  max-height: 92vh;
  height: min(1100px, 92vh);
}
.csvrec-root .modal--normalizedRecon .modalBody {
  overflow-y: hidden;
  overflow-x: hidden;
}
.csvrec-root .normalizedReconModal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  height: 100%;
}
.csvrec-root .normalizedReconContext,
.csvrec-root .normalizedReconSummary,
.csvrec-root .normalizedReconDetailGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.csvrec-root .normalizedReconContextItem,
.csvrec-root .normalizedReconMetric,
.csvrec-root .normalizedReconDetailGrid > div {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  padding: 9px 10px;
}
.csvrec-root .normalizedReconContextItem span,
.csvrec-root .normalizedReconMetric span,
.csvrec-root .normalizedReconDetailGrid span {
  display: block;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.csvrec-root .normalizedReconContextItem strong,
.csvrec-root .normalizedReconMetric strong,
.csvrec-root .normalizedReconDetailGrid strong {
  display: block;
  margin-top: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.csvrec-root .normalizedReconSectionHead,
.csvrec-root .normalizedReconTableFoot,
.csvrec-root .normalizedReconBulkBar,
.csvrec-root .normalizedReconFilters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.csvrec-root .normalizedReconFilters input,
.csvrec-root .normalizedReconFilters select {
  min-height: 34px;
}
.csvrec-root .normalizedReconFilters input {
  flex: 1 1 180px;
}
.csvrec-root .normalizedReconFilters input[type="number"],
.csvrec-root .normalizedReconFilters input[type="date"] {
  flex: 0 1 132px;
}
.csvrec-root .normalizedReconBulkBar {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  background: rgba(255,255,255,.035);
  gap: 6px;
  align-items: center;
}
.csvrec-root .normalizedReconControlsMeta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.csvrec-root .normalizedReconPagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
  padding-top: 2px;
  justify-content: flex-end;
}
.csvrec-root .normalizedReconIssues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.csvrec-root .normalizedReconSelectAll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-default);
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.csvrec-root .normalizedReconSelectedCount {
  font-size: 12px;
  line-height: 1.2;
}
.csvrec-root .normalizedReconBulkBar button {
  flex: 0 0 auto;
}
.csvrec-root .normalizedReconTableWrap {
  flex: 1 1 auto;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  min-height: 0;
  max-height: none;
}
.csvrec-root .normalizedReconTable {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
  table-layout: fixed;
}
.csvrec-root .normalizedReconTable th,
.csvrec-root .normalizedReconTable td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.csvrec-root .normalizedReconTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-base);
  color: var(--text-faint);
  font-size: 10px;
  text-align: left;
  text-transform: uppercase;
}
.csvrec-root .normalizedReconTable th.normalizedReconDateCol,
.csvrec-root .normalizedReconTable td.normalizedReconDateCol {
  width: 108px;
}
.csvrec-root .normalizedReconTable td.normalizedReconStatusCol {
  white-space: nowrap;
}
.csvrec-root .normalizedReconIssueRow {
  cursor: pointer;
}
.csvrec-root .normalizedReconIssueRow:hover {
  background: rgba(255,255,255,.045);
}
.csvrec-root .normalizedReconActions,
.csvrec-root .normalizedReconDetailActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.csvrec-root .normalizedReconDetail {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: rgba(12,18,34,.55);
  border-radius: var(--radius-md);
}
.csvrec-root .normalizedReconAudit {
  display: grid;
  gap: 5px;
}
.csvrec-root .modal--app .modalHead,
.csvrec-root .modal--app .modalFoot {
  flex: 0 0 auto;
}
.csvrec-root .modal--app .modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.csvrec-root .modal--app.modal--normalizedRecon .modalBody {
  overflow-y: hidden;
  overflow-x: hidden;
}
@media (max-width: 700px) {
  .csvrec-root .modalBackdrop--app {
    padding: 0;
  }
  .csvrec-root .modal--app {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}
.csvrec-root .modal--savedRun {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 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, calc(100vw - 48px));
  max-height: calc(100vh - 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, calc(100vw - 48px));
  max-height: calc(100vh - 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;
}
.csvrec-root .autoRecModalStatusStrip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: var(--radius-md);
  background: rgba(14, 165, 233, .1);
  color: var(--text-default);
}
.csvrec-root .autoRecModalStatusStrip[hidden] {
  display: none;
}
.csvrec-root .autoRecModalStatusStrip--ok {
  border-color: rgba(110, 231, 183, .3);
  background: rgba(16, 185, 129, .1);
}
.csvrec-root .autoRecModalStatusStrip--error {
  border-color: rgba(251, 113, 133, .34);
  background: rgba(244, 63, 94, .12);
}
.csvrec-root .autoRecModalStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7dd3fc;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .14);
}
.csvrec-root .autoRecModalStatusStrip--ok .autoRecModalStatusDot {
  background: #6ee7b7;
  box-shadow: 0 0 0 4px rgba(110, 231, 183, .14);
}
.csvrec-root .autoRecModalStatusStrip--error .autoRecModalStatusDot {
  background: #fb7185;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, .16);
}
.csvrec-root .autoRecModalStatusText {
  min-width: 0;
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.csvrec-root .autoRecModalStatusProgress {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.csvrec-root .autoRecModalStatusProgress[hidden] {
  display: none;
}
.csvrec-root .autoRecModalStatusProgressFill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7dd3fc, #a78bfa);
  transition: width .25s ease;
}
/* 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%;
  table-layout: fixed;
  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: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}
.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; }
.theme-light .csvrec-root .primary-btn:hover { background: linear-gradient(to right, #6d28d9, #a21caf); border-color: rgba(124,58,237,.45); box-shadow: var(--btn-primary-shadow); 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
   ═══════════════════════════════════════════════════════════════ */

.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 .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 #incidentsArchiveRoot .incFullTableWrap {
  margin: 0 14px 8px;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 0 18px 10px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,.10);
}
.csvrec-root #incidentsArchiveRoot .incFullTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.csvrec-root #incidentsArchiveRoot .incFullTable 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 #incidentsArchiveRoot .incFullTable tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--table-row-border);
  white-space: nowrap;
  color: var(--text-default);
}
.csvrec-root #incidentsArchiveRoot .incQueueTable thead th,
.csvrec-root #incidentsArchiveRoot .incQueueTable tbody td {
  padding-left: 6px;
  padding-right: 6px;
}
.csvrec-root #incidentsArchiveRoot .incQueueTable :is(th, td)[data-inc-col="countdown"] {
  padding-right: 22px;
  border-right: 18px solid transparent;
  background-clip: padding-box;
}
.csvrec-root #incidentsArchiveRoot .incQueueTable td[data-inc-col="provider"],
.csvrec-root #incidentsArchiveRoot .incQueueTable td[data-inc-col="reason"],
.csvrec-root #incidentsArchiveRoot .incQueueTable td[data-inc-col="status"],
.csvrec-root #incidentsArchiveRoot .incQueueTable td[data-inc-col="assignee"],
.csvrec-root #incidentsArchiveRoot .incQueueTable td[data-inc-col="responsible"] {
  white-space: normal;
  overflow-wrap: anywhere;
}
.csvrec-root #incidentsArchiveRoot .incFullTable 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 #incidentsArchiveRoot .incToolbarRight {
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
.csvrec-root #incidentsArchiveRoot .incToolbarRight #incSearch {
  flex: 1 1 180px;
  min-width: 150px;
  max-width: 220px;
}
.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 #incidentsArchiveRoot .incFullTableWrap {
  background: rgba(255,255,255,.50);
  border-color: var(--panel-border);
}
.theme-light .csvrec-root #incidentsArchiveRoot .incFullTable 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 — final tightening */
.csvrec-root .pageHeader--compact {
  padding: 8px 22px;
  min-height: 56px;
}
.csvrec-root .pageHeader--compact .pageHeaderEmoji { font-size: 20px; }
.csvrec-root .pageHeader--compact .pageHeaderTitle { font-size: 18px; }

/* 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 .planChartsGrid--monthly {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.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 .planChartCard {
  min-width: 0;
}
.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: 48px 1fr 72px;
  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 .planBarFill--cost { background: #fb7185; }
.csvrec-root .planBarFill--team { background: #67e8f9; }
.csvrec-root .planBarVal {
  font-size: 11.5px;
  color: var(--text-default);
  text-align: right;
}

.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; }

/* 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;
}
.csvrec-root .planHireMatrix th:nth-child(2),
.csvrec-root .planHireMatrix td:nth-child(2) {
  width: 104px;
  max-width: 104px;
}
.csvrec-root .planHireSummaryRow td {
  padding: 8px 8px;
  border-top: 1px solid var(--panel-border);
  background: rgba(167,139,250,.08);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.csvrec-root .planHireSummaryStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(34,211,238,.06));
  color: var(--text-default);
  font-size: 12px;
}
.csvrec-root .planHireSummaryStrip span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.08);
}
.csvrec-root .planHireSummaryStrip span:last-child { border-right: 0; }

.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;
  width: 92px;
  max-width: 92px;
}
.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 .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(700px, calc(100vh - 380px), 1040px);
  display: flex;
  flex-direction: column;
}
.csvrec-root .csvHistoryPanel .historyList {
  flex: 1;
}
.csvrec-root .csvHistoryPanel .historyItem {
  padding-block: 9px;
}
.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 .autoRecPhPanel--collapsed .autoReconProviderBody {
  display: none;
}
.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 .planScenarioCompactGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.csvrec-root .planScenarioCompactGrid .planBundleCard {
  min-height: 0;
}
.csvrec-root .planScenarioCompactGrid .planBundleLayer {
  padding: 8px 10px;
}
.csvrec-root .planScenarioCompactGrid .planBundleLayers {
  max-height: 240px;
  overflow: auto;
}
.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 .planMultiMetricRow--compact {
  grid-template-columns: 96px 1fr;
  gap: 12px;
}
.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;
  background: #a855f7;
}
.csvrec-root .planMultiBarFill--cyan { background: #67e8f9; }
.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));
}

.csvrec-root .planCompareSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
}
.csvrec-root .planCompareSummaryCard {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.csvrec-root .planCompareSummaryValue {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-strong);
}
.csvrec-root .planCompareSummaryBar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.csvrec-root .planCompareSummaryBar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #6ee7b7;
}
.csvrec-root .planCompareSummaryMeta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11.5px;
}
.csvrec-root .planCompareMatrix {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: auto;
}
.csvrec-root .planCompareMatrixHead,
.csvrec-root .planCompareMatrixRow {
  display: grid;
  grid-template-columns: 180px repeat(12, minmax(46px, 1fr)) 82px;
  gap: 6px;
  align-items: end;
  min-width: 900px;
}
.csvrec-root .planCompareMatrixHead span {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-label-soft);
}
.csvrec-root .planCompareMatrixLabel {
  align-self: center;
  color: var(--text-strong);
  font-weight: 700;
  font-size: 12px;
}
.csvrec-root .planCompareMatrixCell {
  height: 82px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 5px 3px;
}
.csvrec-root .planCompareMatrixCell span {
  width: 70%;
  min-height: 6px;
  border-radius: 4px 4px 0 0;
  background: #a855f7;
}
.csvrec-root .planCompareMatrixCell b {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.csvrec-root .planCompareMatrixTotal {
  align-self: center;
  text-align: right;
  font-family: var(--mono);
  color: var(--text-strong);
  font-weight: 700;
}


/* — Compare bundles — */
.csvrec-root .planBundleGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 18px;
}
.csvrec-root .planBundleGrid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.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: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  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: repeat(4, minmax(0, 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 .planPortfolioAddRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.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;
  background: #6ee7b7;
}
.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 .autoRecMetricGrid .autoRecMetricCard {
  align-items: center;
  text-align: center;
  min-width: 0;
}
.csvrec-root .autoRecMetricGrid .autoRecMetricCard .eyebrow,
.csvrec-root .autoRecMetricGrid .autoRecMetricCard .metricCardValue,
.csvrec-root .autoRecMetricGrid .autoRecMetricCard .metricCardFoot {
  width: 100%;
  text-align: center;
}
.csvrec-root .autoRecLatestBatchValue {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.12;
}
.csvrec-root .autoRecHistoryTable {
  table-layout: fixed;
  min-width: 0;
}
.csvrec-root .autoRecHistoryTable .autoRecHistoryPeriod {
  width: 30%;
  font-weight: 600;
  text-align: left;
}
.csvrec-root .autoRecHistoryTable .autoRecHistoryProject {
  width: 12%;
  text-align: left;
}
.csvrec-root .autoRecHistoryTable .autoRecHistoryProviders {
  width: 8%;
  text-align: left;
}
.csvrec-root .autoRecHistoryUpdated {
  color: var(--text-muted);
}
.csvrec-root .autoReconProviderBody {
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.csvrec-root .autoReconProviderRow {
  display: grid;
  grid-template-columns: 46px 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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csvrec-root .autoRecProviderStatus .pill {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-size: 10px;
}
.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); }


/* ═══════════════════════════════════════════════════════════════
   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; }

.csvrec-root .botSettingsCockpit {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.csvrec-root .botSetupSummary {
  display: grid;
  grid-template-columns: minmax(230px, .68fr) minmax(0, 1.32fr);
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.035);
}
.csvrec-root .botSetupHero {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
}
.csvrec-root .botSetupTitle {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 760;
}
.csvrec-root .botSetupMeta {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.csvrec-root .botSetupStatus {
  margin-top: 4px;
}
.csvrec-root .botSetupMetrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.csvrec-root .botSetupMetric {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .botSetupMetric b,
.csvrec-root .botRouteSummary b,
.csvrec-root .botReadinessScore b,
.csvrec-root .botToolStats b {
  display: block;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .botSetupMetric span,
.csvrec-root .botRouteSummary small,
.csvrec-root .botReadinessScore span,
.csvrec-root .botReadinessScore small,
.csvrec-root .botToolStats span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.csvrec-root .botSetupChecklist {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.csvrec-root .botSetupCheck {
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
}
.csvrec-root .botSetupCheckDot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.csvrec-root .botSetupCheck--ok .botSetupCheckDot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,.14);
}
.csvrec-root .botSetupCheck--warn .botSetupCheckDot {
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,.14);
}
.csvrec-root .botSetupCheckLabel {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 720;
}
.csvrec-root .botSetupCheckDetail {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.csvrec-root .botCockpitSection,
.csvrec-root .botCoreSettings,
.csvrec-root .botToolPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.032);
}
.csvrec-root .botCockpitSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.csvrec-root .botSettingsColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .botSettingGroup {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
}
.csvrec-root .botStepBadge {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34,211,238,.30);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
}
.csvrec-root .botRouteSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.csvrec-root .botRouteSummary > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .botRouteSummary span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-label);
  font-size: 10.5px;
  font-weight: 760;
  text-transform: uppercase;
}
.csvrec-root .botRecipientTable {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.csvrec-root .botRecipientTable .pspTargetRow,
.csvrec-root .botRecipientTable > .muted {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .botInlineEditor,
.csvrec-root .botAdvancedFallback {
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.csvrec-root .botInlineEditor summary,
.csvrec-root .botAdvancedFallback summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 9px 12px;
  color: var(--text-strong);
  cursor: pointer;
}
.csvrec-root .botInlineEditor[open],
.csvrec-root .botAdvancedFallback[open] {
  padding-bottom: 12px;
}
.csvrec-root .botInlineEditor .botSettingsGrid,
.csvrec-root .botAdvancedFallback textarea,
.csvrec-root .botInlineEditor > button {
  margin: 0 12px 10px;
}
.csvrec-root .botAdvancedFallback summary small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-weight: 500;
}
.csvrec-root .botToolPanel--readiness {
  border-color: rgba(34,211,238,.22);
}
.csvrec-root .botToolPanel--repair {
  border-color: rgba(251,191,36,.22);
}
.csvrec-root .botReadinessScore,
.csvrec-root .botToolStats {
  min-width: 180px;
  padding: 9px 10px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .botToolStats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
}
.csvrec-root .botToolResults {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

/* 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;
  min-width: 0;
}
.csvrec-root .botEventsScroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.csvrec-root .botChecksGrid--events {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  min-width: 680px;
}
.csvrec-root .botCheckRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  min-width: 0;
}
.csvrec-root .botCheckRow--button {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
.csvrec-root .botCheckRow--button:hover,
.csvrec-root .botCheckRow--button:focus-visible {
  background: var(--table-row-hover-bg);
}
.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;
}

/* 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); }

/* Prediction and Balances */
.csvrec-root .icon-prediction { background: rgba(45,212,191,.16); }
.csvrec-root .icon-balances { background: rgba(251,191,36,.16); }
.csvrec-root .predictionHeaderControls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.csvrec-root .predictionToolbar,
.csvrec-root .predictionFilterRow,
.csvrec-root .predictionChartGrid,
.csvrec-root .predictionMetricGrid,
.csvrec-root .balancesGrid,
.csvrec-root .balancesHistoryGrid,
.csvrec-root .adminPredictionJsonGrid {
  display: grid;
  gap: 12px;
}
.csvrec-root .predictionToolbar {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}
.csvrec-root .predictionFilterRow {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}
.csvrec-root .predictionFilter,
.csvrec-root .predictionMetricCard,
.csvrec-root .balancesCard,
.csvrec-root .adminPredictionHeader {
  border: 1px solid var(--panel-border);
  background: var(--surface);
}
.csvrec-root .predictionFilter {
  display: grid;
  gap: 6px;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.csvrec-root .predictionMetricGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.csvrec-root .predictionMetricCard,
.csvrec-root .balancesCard {
  border-radius: var(--radius-lg);
  padding: 14px;
}
.csvrec-root .predictionChartGrid,
.csvrec-root .balancesGrid,
.csvrec-root .balancesHistoryGrid,
.csvrec-root .adminPredictionJsonGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.csvrec-root .adminPredictionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.csvrec-root .adminPredictionFeeTable input {
  width: 100%;
  min-width: 0;
}
.csvrec-root .adminPredictionOpsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  gap: 12px;
  padding-top: 12px;
}
.csvrec-root .adminPredictionOpsBlock {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.03);
}
.csvrec-root .adminPredictionMethodChecks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}
.csvrec-root .adminPredictionCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
  color: var(--text-default);
  font-size: 12px;
  cursor: pointer;
}
.csvrec-root .adminPredictionCheck span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .adminPredictionCheck input {
  accent-color: var(--seg-active-border);
}
.csvrec-root .adminPredictionFxTable input {
  width: 100%;
  min-width: 0;
}
.csvrec-root .adminPredictionRuns {
  margin-top: 12px;
  max-height: 280px;
  overflow: auto;
}

.csvrec-root .predictionFpHeader,
.csvrec-root .balancesFpHeader {
  min-height: 78px;
}
.csvrec-root .predictionFpToolbar,
.csvrec-root .predictionFpHistoryToolbar,
.csvrec-root .balancesFpSettlementToolbar,
.csvrec-root .balancesFpMerchantToolbar {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}
.csvrec-root .predictionFpToolbar {
  grid-template-columns: auto minmax(160px, 240px) minmax(180px, 1fr);
  align-items: end;
}
.csvrec-root .predictionFpHistoryToolbar {
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
}
.csvrec-root .predictionFpFilter,
.csvrec-root .balancesFpSearch,
.csvrec-root .balancesFpCalcInputs label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.csvrec-root .predictionFpFilter span,
.csvrec-root .balancesFpSearch span,
.csvrec-root .balancesFpCalcInputs span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label-soft);
}
.csvrec-root .predictionFpFilter select,
.csvrec-root .balancesFpSearch select {
  width: 100%;
}
.csvrec-root .predictionFpKpis,
.csvrec-root .balancesFpMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .balancesFpMetricGrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.csvrec-root .balancesFpMetricGrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csvrec-root .balancesFpMetricGrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.csvrec-root .balancesFpMetricGrid--overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.csvrec-root .predictionFpMetric,
.csvrec-root .balancesFpMetric {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    var(--surface);
}
.csvrec-root .predictionFpMetricLabel,
.csvrec-root .balancesFpMetricLabel {
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.csvrec-root .predictionFpMetricPair {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  color: var(--text-muted);
  font-size: 12px;
}
.csvrec-root .predictionFpMetricPair strong,
.csvrec-root .predictionFpMetricPair b,
.csvrec-root .balancesFpMetric strong {
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
}
.csvrec-root .predictionFpDelta,
.csvrec-root .balancesFpDelta {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.045);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.csvrec-root .predictionFpDelta span,
.csvrec-root .balancesFpMetric > span {
  color: var(--text-faint);
  font-size: 11px;
}
.csvrec-root .predictionFpDelta--up,
.csvrec-root .balancesFpDelta--up,
.csvrec-root .balancesFpOkText { color: #6ee7b7 !important; }
.csvrec-root .predictionFpDelta--down,
.csvrec-root .balancesFpDelta--down,
.csvrec-root .balancesFpBadText { color: #fca5a5 !important; }
.csvrec-root .balancesFpWarnText { color: #fcd34d !important; }
.csvrec-root .balancesFpPurpleText { color: #c4b5fd !important; }
.csvrec-root .predictionFpNotice,
.csvrec-root .balancesFpNotice {
  margin: 0;
}
.csvrec-root .predictionFpAccuracy,
.csvrec-root .predictionFpSection,
.csvrec-root .balancesFpSection {
  overflow: hidden;
}
.csvrec-root .predictionFpAccuracy {
  cursor: pointer;
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}
.csvrec-root .predictionFpAccuracyHead,
.csvrec-root .predictionFpChartHead,
.csvrec-root .balancesFpHealthCardTop,
.csvrec-root .balancesFpProviderCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.csvrec-root .predictionFpAccuracyTitle {
  margin-top: 3px;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.csvrec-root .predictionFpDots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 12px;
}
.csvrec-root .predictionFpDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
}
.csvrec-root .predictionFpDot--ok { background: #34d399; }
.csvrec-root .predictionFpDot--warn { background: #fbbf24; }
.csvrec-root .predictionFpDot--bad { background: #fb7185; }
.csvrec-root .predictionFpDot--neutral { background: rgba(255,255,255,.25); }
.csvrec-root .predictionFpTable,
.csvrec-root .balancesFpTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.csvrec-root .predictionFpTable th,
.csvrec-root .predictionFpTable td,
.csvrec-root .balancesFpTable th,
.csvrec-root .balancesFpTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: middle;
}
.csvrec-root .predictionFpTable th,
.csvrec-root .balancesFpTable th {
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.04);
}
.csvrec-root .predictionFpTable--wide,
.csvrec-root .balancesFpTable--wide { min-width: 980px; }
.csvrec-root .predictionFpMethod {
  display: grid;
  gap: 3px;
}
.csvrec-root .predictionFpMethod span {
  display: inline-flex;
  width: fit-content;
  margin-right: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(196,181,253,.25);
  background: rgba(139,92,246,.14);
  color: #ddd6fe;
  font-size: 10px;
  font-weight: 800;
}
.csvrec-root .predictionFpMethod strong,
.csvrec-root .predictionFpNet strong,
.csvrec-root .predictionFpCompare strong {
  color: var(--text-strong);
}
.csvrec-root .predictionFpMethod small,
.csvrec-root .predictionFpNet span,
.csvrec-root .predictionFpCompare span,
.csvrec-root .predictionFpCompare em {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
  font-style: normal;
}
.csvrec-root .predictionFpErr {
  font-weight: 800;
}
.csvrec-root .predictionFpErr--ok,
.csvrec-root .balancesFpRatioBadge--ok,
.csvrec-root .balancesFpRatioBar--ok b { color: #6ee7b7; }
.csvrec-root .predictionFpErr--warn,
.csvrec-root .balancesFpRatioBadge--warn,
.csvrec-root .balancesFpRatioBar--warn b { color: #fcd34d; }
.csvrec-root .predictionFpErr--bad,
.csvrec-root .balancesFpRatioBadge--bad,
.csvrec-root .balancesFpRatioBar--bad b { color: #fca5a5; }
.csvrec-root .predictionFpErr--neutral { color: var(--text-muted); }
.csvrec-root .predictionFpChartGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .predictionFpChartPanel,
.csvrec-root .balancesFpChartWrap {
  min-width: 0;
}
.csvrec-root .predictionFpLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .predictionFpLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.csvrec-root .predictionFpLegend i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
}
.csvrec-root .predictionFpCanvasWrap,
.csvrec-root .balancesFpChartWrap {
  height: 300px;
  padding: 10px 12px;
}
.csvrec-root .balancesFpChartWrap--merchant { height: 390px; }
.csvrec-root .predictionFpCanvasWrap canvas,
.csvrec-root .balancesFpChartWrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.csvrec-root .predictionFpChartFoot,
.csvrec-root .predictionFpPager,
.csvrec-root .balancesFpLegend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 12px;
}
.csvrec-root .predictionFpPager > div {
  display: flex;
  gap: 6px;
}
.csvrec-root .balancesFpProviderTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .75fr);
  gap: 12px;
  align-items: stretch;
}
.csvrec-root .balancesFpHealthSummary,
.csvrec-root .balancesFpHealthGrid,
.csvrec-root .balancesFpCoverageStats,
.csvrec-root .balancesFpMetricDeltas,
.csvrec-root .balancesFpCurrencyPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.csvrec-root .balancesFpHealth {
  min-width: 0;
}
.csvrec-root .balancesFpHealthGrid {
  padding: 0 14px 14px;
}
.csvrec-root .balancesFpHealthCard {
  min-width: 190px;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
}
.csvrec-root .balancesFpHealthCard strong,
.csvrec-root .balancesFpProviderCardHead strong {
  color: var(--text-strong);
  font-size: 13px;
}
.csvrec-root .balancesFpErrorText {
  margin-top: 4px;
  color: #fca5a5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .balancesFpCoverageGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}
.csvrec-root .balancesFpCoverageCard {
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 13px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  cursor: pointer;
}
.csvrec-root .balancesFpCoverageCard strong {
  display: block;
  margin-top: 3px;
  color: var(--text-strong);
  font-size: 18px;
}
.csvrec-root .balancesFpCoverageBadge,
.csvrec-root .balancesFpRatioBadge {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 800;
}
.csvrec-root .balancesFpCoverageBadge--healthy { color: #6ee7b7; border-color: rgba(52,211,153,.3); }
.csvrec-root .balancesFpCoverageBadge--watch { color: #fcd34d; border-color: rgba(251,191,36,.35); }
.csvrec-root .balancesFpCoverageBadge--critical { color: #fca5a5; border-color: rgba(248,113,113,.35); }
.csvrec-root .balancesFpCoverageBadge--idle { color: var(--text-muted); }
.csvrec-root .balancesFpCoverageStats {
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 11px;
}
.csvrec-root .balancesFpMiniSwitch button,
.csvrec-root .balancesFpDaysSwitch button {
  min-width: 44px;
}
.csvrec-root .balancesFpSelectPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}
.csvrec-root .balancesFpSelectPills--compact {
  padding: 0;
}
.csvrec-root .balancesFpSelectPills button,
.csvrec-root .balancesFpCurrencyPills button {
  display: grid;
  gap: 3px;
  min-width: 136px;
  padding: 9px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.045);
  color: var(--text-default);
  text-align: left;
  cursor: pointer;
}
.csvrec-root .balancesFpSelectPills button.active,
.csvrec-root .balancesFpCurrencyPills button.active {
  border-color: rgba(167,139,250,.65);
  background: rgba(139,92,246,.24);
}
.csvrec-root .balancesFpSelectPills span,
.csvrec-root .balancesFpCurrencyPills span {
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpSelectPills strong,
.csvrec-root .balancesFpCurrencyPills strong {
  color: var(--text-strong);
  font-size: 13px;
}
.csvrec-root .balancesFpDeltaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 12px;
}
.csvrec-root .balancesFpHistoryTools,
.csvrec-root .balancesFpHistoryMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.csvrec-root .balancesFpHistoryTools {
  justify-content: flex-end;
}
.csvrec-root .balancesFpHistoryMeta {
  padding: 0 14px 12px;
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpHistoryMeta span,
.csvrec-root .balancesFpFreshnessBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  font-size: 11px;
  font-weight: 800;
}
.csvrec-root .balancesFpFreshnessBadge--fresh {
  color: #6ee7b7;
  border-color: rgba(52,211,153,.32);
}
.csvrec-root .balancesFpFreshnessBadge--stale,
.csvrec-root .balancesFpFreshnessBadge--expired {
  color: #fcd34d;
  border-color: rgba(251,191,36,.35);
}
.csvrec-root .balancesFpFreshnessBadge--missing {
  color: var(--text-muted);
}
.csvrec-root .balancesFpPayflyBlock {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}
.csvrec-root .balancesFpProviderCards {
  display: grid;
  gap: 12px;
}
.csvrec-root .balancesFpProviderCardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .balancesFpProviderCard {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}
.csvrec-root .balancesFpProviderCardHead span,
.csvrec-root .balancesFpProviderCardHead small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpProviderCardTotals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.csvrec-root .balancesFpProviderCardTotals button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.045);
  color: var(--text-default);
  text-align: left;
}
.csvrec-root .balancesFpProviderCardTotals button.active {
  border-color: rgba(167,139,250,.65);
  background: rgba(139,92,246,.24);
}
.csvrec-root .balancesFpProviderCardTotals span,
.csvrec-root .balancesFpProviderCardTotals small {
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpProviderCardTotals strong {
  color: var(--text-strong);
  font-size: 16px;
}
.csvrec-root .balancesFpMethodList {
  display: grid;
  gap: 7px;
}
.csvrec-root .balancesFpMethodList button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
  color: var(--text-default);
  cursor: pointer;
}
.csvrec-root .balancesFpMethodList button.active {
  border-color: rgba(167,139,250,.65);
  background: rgba(139,92,246,.22);
}
.csvrec-root .balancesFpMetricPreview {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpMetricPreview span {
  color: #ddd6fe;
}
.csvrec-root .balancesFpMerchantToolbar {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
}
.csvrec-root .balancesFpCurrencyPills button {
  min-width: 120px;
}
.csvrec-root .balancesFpMerchantErrors {
  display: grid;
  gap: 10px;
}
.csvrec-root .balancesFpErrorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.csvrec-root .balancesFpErrorGrid div {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.csvrec-root .balancesFpErrorGrid strong { color: var(--text-strong); }
.csvrec-root .balancesFpErrorGrid span { color: var(--text-muted); font-size: 11px; }
.csvrec-root .balancesFpErrorGrid small { color: #fca5a5; }
.csvrec-root .balancesFpMerchantSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 12px;
  align-items: start;
}
.csvrec-root .balancesFpRankPanel {
  display: grid;
  gap: 12px;
}
.csvrec-root .balancesFpMerchantList {
  display: grid;
  gap: 8px;
}
.csvrec-root .balancesFpMerchantRow {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) minmax(220px, .9fr) 180px;
  grid-template-areas: "rank info methods total";
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  color: var(--text-default);
  text-align: left;
  cursor: pointer;
}
.csvrec-root .balancesFpMerchantRow.active {
  border-color: rgba(167,139,250,.65);
  background: rgba(139,92,246,.22);
}
.csvrec-root .balancesFpRank {
  grid-area: rank;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,.16);
  color: #ddd6fe;
  font-weight: 900;
}
.csvrec-root .balancesFpMerchantInfo { grid-area: info; min-width: 0; }
.csvrec-root .balancesFpMerchantInfo strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
}
.csvrec-root .balancesFpMerchantInfo small {
  color: var(--text-muted);
  word-break: break-all;
}
.csvrec-root .balancesFpMerchantTotal {
  grid-area: total;
  text-align: right;
}
.csvrec-root .balancesFpMerchantTotal b,
.csvrec-root .balancesFpMerchantTotal small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpMerchantTotal strong {
  display: block;
  color: var(--text-strong);
  font-size: 17px;
}
.csvrec-root .balancesFpMerchantMethodChips {
  grid-area: methods;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.csvrec-root .balancesFpMerchantMethodChips span {
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: 170px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}
.csvrec-root .balancesFpMerchantMethodChips b {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .balancesFpMerchantMethodChips em,
.csvrec-root .balancesFpMerchantMethodChips small {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}
.csvrec-root .balancesFpMethodBars {
  grid-area: bars;
  display: grid;
  gap: 6px;
}
.csvrec-root .balancesFpMethodBars i,
.csvrec-root .balancesFpMethodDetailRow i {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(120px, 1.2fr) 44px;
  align-items: center;
  gap: 8px;
  font-style: normal;
}
.csvrec-root .balancesFpMethodBars i b,
.csvrec-root .balancesFpMethodDetailRow i {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.csvrec-root .balancesFpMethodBars i b::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(34,211,238,.65);
}
.csvrec-root .balancesFpMethodBars span,
.csvrec-root .balancesFpMethodBars em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}
.csvrec-root .balancesFpMethodBars small {
  color: var(--text-faint);
  font-size: 11px;
}
.csvrec-root .balancesFpShowMore {
  display: flex;
  justify-content: center;
}
.csvrec-root .balancesFpMerchantDetail {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 14px;
  padding: 16px;
}
.csvrec-root .balancesFpMerchantDetailHead {
  display: grid;
  gap: 3px;
}
.csvrec-root .balancesFpMerchantDetailStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.csvrec-root .balancesFpMerchantDetailStats div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.045);
}
.csvrec-root .balancesFpMerchantDetailStats span {
  display: block;
  color: var(--text-label-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.csvrec-root .balancesFpMerchantDetailStats strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: 18px;
}
.csvrec-root .balancesFpMethodDetail {
  display: grid;
  gap: 8px;
}
.csvrec-root .balancesFpMethodDetailRow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .balancesFpMethodDetailRow strong,
.csvrec-root .balancesFpMethodDetailRow b {
  display: block;
  color: var(--text-strong);
}
.csvrec-root .balancesFpMethodDetailRow span,
.csvrec-root .balancesFpMethodDetailRow small {
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpMethodDetailRow i {
  grid-column: 1 / -1;
  display: block;
}
.csvrec-root .balancesFpMethodDetailRow i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(167,139,250,.85), rgba(34,211,238,.78));
}
.csvrec-root .balancesFpSettlementToolbar {
  grid-template-columns: minmax(220px, 320px);
  align-items: end;
}
.csvrec-root .balancesFpCalcInputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px 10px;
}
.csvrec-root .balancesFpCalcSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}
.csvrec-root .balancesFpCalcSummary div {
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
}
.csvrec-root .balancesFpCalcSummary span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}
.csvrec-root .balancesFpCalcSummary strong {
  display: block;
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 15px;
}
.csvrec-root .balancesFpAdjustInput {
  max-width: 140px;
  text-align: right;
}
.csvrec-root .balancesFpRatioBar {
  display: inline-grid;
  grid-template-columns: 80px auto;
  align-items: center;
  gap: 8px;
}
.csvrec-root .balancesFpRatioBar i {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.csvrec-root .balancesFpRatioBar i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.csvrec-root .balancesFpRatioBar--ok i::after { background: #34d399; }
.csvrec-root .balancesFpRatioBar--warn i::after { background: #fbbf24; }
.csvrec-root .balancesFpRatioBar--bad i::after { background: #fb7185; }
.csvrec-root .balancesFpSettlementRow--ok { background: rgba(16,185,129,.04); }
.csvrec-root .balancesFpSettlementRow--warn { background: rgba(245,158,11,.04); }
.csvrec-root .balancesFpSettlementRow--bad { background: rgba(244,63,94,.04); }
.csvrec-root .balancesFpTable tr.is-muted {
  opacity: .45;
}
.csvrec-root .linkLike {
  color: var(--text-strong);
  font: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.csvrec-root .linkLike:hover {
  color: #ddd6fe;
}

/* Forecast Panel visual transfer */
.csvrec-root .forecastPanelShell {
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: calc(100vh - 96px);
}
.csvrec-root .forecastPanelHeader.pageHeader {
  min-height: 82px;
  padding: 17px 22px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(139,92,246,.28), rgba(14,165,233,.10) 48%, rgba(16,185,129,.13)),
    rgba(255,255,255,.08);
  box-shadow: 0 18px 46px rgba(11,8,38,.32);
  backdrop-filter: blur(16px);
}
.csvrec-root .forecastPanelHeader .pageHeaderEmoji {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.08);
  font-size: 23px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.csvrec-root .forecastPanelHeader .pageHeaderTitle {
  font-size: 25px;
  letter-spacing: 0;
}
.csvrec-root .predictionFpFreshness {
  display: inline-grid;
  gap: 2px;
  min-width: 116px;
  padding: 7px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(255,255,255,.065);
  color: var(--text-default);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.csvrec-root .predictionFpFreshness span {
  color: var(--text-label-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.csvrec-root .predictionFpFreshness b {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .forecastPanelToolbar {
  position: sticky;
  top: 12px;
  z-index: 10;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    rgba(31,25,67,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(4,7,23,.28);
  backdrop-filter: blur(16px);
}
.csvrec-root .predictionFpMetric,
.csvrec-root .balancesFpMetric,
.csvrec-root .predictionFpChartPanel,
.csvrec-root .balancesFpSection,
.csvrec-root .balancesFpHealth,
.csvrec-root .balancesFpMerchantDetail {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    rgba(31,25,67,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(4,7,23,.28);
  backdrop-filter: blur(16px);
}
.csvrec-root .predictionFpMetricPair span em {
  color: rgba(251,146,60,.82);
  font-style: normal;
  font-weight: 800;
}
.csvrec-root .predictionFpConfidence {
  margin-top: -2px;
  color: rgba(196,181,253,.72);
  font-size: 11px;
  line-height: 1.25;
}
.csvrec-root .predictionFpLegend {
  align-items: center;
  justify-content: flex-end;
}
.csvrec-root .predictionFpLegend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.35);
  font-size: 11px;
  font-weight: 700;
}
.csvrec-root .predictionFpLegend button.active {
  background: rgba(255,255,255,.10);
  color: var(--text-strong);
}
.csvrec-root .predictionFpLegend button i {
  flex: 0 0 8px;
}
.csvrec-root .predictionFpChartFoot {
  justify-content: flex-start;
}
.csvrec-root .predictionFpChartFoot strong {
  margin-left: auto;
  color: var(--text-strong);
}
.csvrec-root .predictionFpProvisioned {
  color: rgba(251,146,60,.72);
  font-size: 11px;
  font-weight: 800;
}
.theme-light .csvrec-root .predictionFpFreshness,
.theme-light .csvrec-root .forecastPanelToolbar,
.theme-light .csvrec-root .predictionFpMetric,
.theme-light .csvrec-root .balancesFpMetric,
.theme-light .csvrec-root .predictionFpChartPanel,
.theme-light .csvrec-root .balancesFpSection,
.theme-light .csvrec-root .balancesFpHealth,
.theme-light .csvrec-root .balancesFpMerchantDetail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.46)),
    rgba(255,255,255,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 14px 34px rgba(45,37,83,.12);
}
.theme-light .csvrec-root .predictionFpLegend button.active {
  color: #241b4a;
  background: rgba(124,58,237,.12);
}

.csvrec-root .predictionHeaderControls {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.csvrec-root .forecastPanelHeader.pageHeader {
  min-height: 76px;
}
.csvrec-root .forecastPanelHeader .pageHeaderTitle {
  font-size: 23px;
}
.csvrec-root .forecastNoData {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
}
.csvrec-root .predictionFpKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.csvrec-root .predictionFpMetric {
  align-content: start;
  overflow: hidden;
}
.csvrec-root .predictionFpMetricPair {
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
}
.csvrec-root .predictionFpMetricPair span {
  min-width: 0;
}
.csvrec-root .predictionFpMetricPair strong,
.csvrec-root .predictionFpMetricPair b,
.csvrec-root .balancesFpMetric strong {
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}
.csvrec-root .predictionFpMetricPair strong,
.csvrec-root .predictionFpMetricPair b {
  font-size: clamp(16px, 1.25vw, 20px);
}
.csvrec-root .balancesFpMetric strong {
  font-size: clamp(18px, 1.45vw, 26px);
}
.csvrec-root .predictionFpChartPanel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.csvrec-root .predictionFpChartHead {
  align-items: center;
  min-width: 0;
  padding: 14px 16px 0;
}
.csvrec-root .predictionFpChartHead .panelTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .predictionFpLegend {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.csvrec-root .predictionFpLegend button {
  flex: 0 0 auto;
}
.csvrec-root .predictionFpCanvasWrap {
  height: 270px;
  padding: 12px 18px 4px;
}
.csvrec-root .balancesFpProviderTop {
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
}
.csvrec-root .balancesFpMetric {
  min-height: 128px;
  overflow: hidden;
}
.csvrec-root .balancesFpHealthGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.csvrec-root .balancesFpHealthCard {
  min-width: 0;
  max-width: none;
}
.csvrec-root .balancesFpCoverageGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.csvrec-root .balancesFpCoverageCard,
.csvrec-root .balancesFpProviderCard,
.csvrec-root .balancesFpMerchantRow,
.csvrec-root .balancesFpMethodList button {
  min-width: 0;
}
.csvrec-root .balancesFpProviderCardGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.csvrec-root .balancesFpProviderCardHead > div {
  min-width: 0;
}
.csvrec-root .balancesFpProviderCardHead strong,
.csvrec-root .balancesFpProviderCardHead span,
.csvrec-root .balancesFpProviderCardHead small,
.csvrec-root .balancesFpMethodList button span,
.csvrec-root .balancesFpMethodList button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .balancesFpMethodList button strong {
  text-align: right;
}
.csvrec-root .balancesFpMerchantSplit {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}
.csvrec-root .balancesFpMetricGrid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.csvrec-root .balancesFpMetricGrid--overview .balancesFpMetric {
  min-height: 88px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
}
.csvrec-root .balancesFpMetricGrid--overview .balancesFpMetricLabel {
  grid-column: 1 / -1;
}
.csvrec-root .balancesFpMetricGrid--overview .balancesFpMetric strong {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(20px, 1.6vw, 26px);
  text-align: right;
  white-space: nowrap;
}
.csvrec-root .balancesFpMetricGrid--overview .balancesFpMetric > span {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.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; }

/* Admin UX fixes */
.csvrec-root .adminBootShell {
  min-height: 100vh;
  color: var(--text-default);
  background: var(--app-bg);
}
.csvrec-root .adminBootShell .sideNav {
  min-height: calc(100vh - 52px);
}
.csvrec-root .adminBootShell .pageHeader {
  opacity: .92;
}

.csvrec-root .adminModal {
  background: var(--panel-surface);
}
.csvrec-root .adminModal--user {
  width: min(1240px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
}
.csvrec-root .adminModal--user .modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
.csvrec-root .adminModal--user .modalFoot {
  flex: 0 0 auto;
}
.csvrec-root .adminUserModalForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  min-width: 0;
}
.csvrec-root .adminUserModalForm .adminFormError {
  grid-column: 1 / -1;
}
.csvrec-root .adminUserModalBlock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.csvrec-root .adminUserModalBlockTitle {
  font-size: 12px;
  color: var(--text-label-soft);
}
.csvrec-root .adminUserNotifyField {
  grid-column: 1 / 2;
}
.csvrec-root .adminUserProjectField {
  grid-column: 2 / 3;
}
.csvrec-root .adminUserSectionField {
  grid-column: 3 / 4;
}
.csvrec-root .adminProjectChecks,
.csvrec-root .adminNotifyPrefs {
  display: grid;
  gap: 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: rgba(4,7,26,.42);
}
.csvrec-root .adminProjectChecks {
  grid-template-columns: 1fr;
}
.csvrec-root .adminProjectCheck,
.csvrec-root .adminNotifyPref,
.csvrec-root .adminWishCheck,
.csvrec-root .adminBannerEnabled {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-default);
  cursor: pointer;
}
.csvrec-root .adminProjectCheck {
  min-height: 28px;
}
.csvrec-root .adminProjectCheck input[type="checkbox"],
.csvrec-root .adminNotifyPref input[type="checkbox"],
.csvrec-root .adminWishCheck input[type="checkbox"],
.csvrec-root .adminBannerEnabled input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  min-width: 18px;
  margin: 0;
}
.csvrec-root .adminProjectCheckLabel,
.csvrec-root .adminNotifyPref span,
.csvrec-root .adminWishCheck span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .adminModal--user .sectionAccessGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  max-height: none;
  overflow: visible;
}
.csvrec-root .adminModal--user .sectionAccessItem {
  min-height: 28px;
}
.csvrec-root .adminModal--user .sectionAccessItem span {
  white-space: normal;
  line-height: 1.15;
}

.csvrec-root .adminModal--banner {
  width: min(980px, calc(100vw - 64px));
}
.csvrec-root .adminBannerModalForm {
  gap: 14px;
}
.csvrec-root .adminBannerEnabled {
  justify-content: flex-start;
  align-self: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
}
.csvrec-root .adminBannerEnabled span {
  font-size: 12px;
  color: var(--text-label-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.csvrec-root .adminBannerBulkRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.csvrec-root .adminBannerWishChooser {
  display: grid;
  gap: 6px;
  max-height: min(330px, 38vh);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: rgba(4,7,26,.35);
}

.csvrec-root .adminAutoRecDetail {
  overflow: hidden;
}
.csvrec-root .adminAutoRecForm {
  align-items: stretch;
}
.csvrec-root .adminAutoRecFormGroupHead {
  min-height: 34px;
}
.csvrec-root .adminAutoRecForm .adminFormField input,
.csvrec-root .adminAutoRecForm .adminFormField select {
  min-height: 36px;
}
.csvrec-root .adminAutoRecProvidersTableWrap {
  overflow-x: hidden;
}
.csvrec-root .adminAutoRecProvidersTable {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.csvrec-root .adminAutoRecProvidersTable th:nth-child(1),
.csvrec-root .adminAutoRecProvidersTable td:nth-child(1) { width: 28%; }
.csvrec-root .adminAutoRecProvidersTable th:nth-child(2),
.csvrec-root .adminAutoRecProvidersTable td:nth-child(2) { width: 92px; }
.csvrec-root .adminAutoRecProvidersTable th:nth-child(4),
.csvrec-root .adminAutoRecProvidersTable td:nth-child(4) { width: 106px; }
.csvrec-root .adminAutoRecProvidersTable th:nth-child(5),
.csvrec-root .adminAutoRecProvidersTable td:nth-child(5) { width: 170px; }
.csvrec-root .adminAutoRecProvidersTable td {
  min-width: 0;
}
.csvrec-root .adminAutoRecProvidersTable td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csvrec-root .adminAutoRecProvidersTable .autoRecRowActions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
}
.csvrec-root .adminAutoRecProvidersTable .autoRecRowActions .ghost.small {
  padding-inline: 9px;
}

.csvrec-root .adminSystemTwoCol {
  align-items: stretch;
}
.csvrec-root .adminSystemTwoCol > .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.csvrec-root .adminSystemTwoCol .adminStatList,
.csvrec-root .adminSystemTwoCol .adminIncSettings {
  flex: 1;
}
.csvrec-root .adminWishesPanel--collapsed {
  padding-bottom: 0;
}

.theme-light .csvrec-root .adminProjectChecks,
.theme-light .csvrec-root .adminNotifyPrefs,
.theme-light .csvrec-root .adminBannerWishChooser {
  background: rgba(255,255,255,.62);
}
.theme-light .csvrec-root .adminBannerEnabled {
  background: rgba(255,255,255,.58);
}

/* 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-height: clamp(720px, calc(100vh - 340px), 1120px);
  min-width: 0;
}
.csvrec-root .csvColOverviewSplit > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.csvrec-root .csvColActionNeededPanel {
  grid-column: 1 / -1;
  min-height: auto;
}
.csvrec-root .csvColActionNeededPanel--collapsed {
  flex: 0 0 auto;
}
.csvrec-root .csvColIssueHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.csvrec-root .csvColIssueToolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.csvrec-root .csvColCollapseBtn {
  min-width: 64px;
}
.csvrec-root .csvColIssueList {
  display: flex;
  flex-direction: column;
}
.csvrec-root .csvColIssueRow {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, auto) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  min-width: 0;
}
.csvrec-root .csvColIssueMain,
.csvrec-root .csvColIssueMeta,
.csvrec-root .csvColIssueActions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.csvrec-root .csvColIssueMain {
  align-items: flex-start;
}
.csvrec-root .csvColIssueTitle {
  color: var(--text-default);
  font-weight: 700;
  line-height: 1.2;
}
.csvrec-root .csvColIssueActions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.csvrec-root .csvColOverviewSplit .incFullTableWrap {
  flex: 1;
  min-height: 0;
}
.csvrec-root .csvCollectionRunsWrap {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
}
.csvrec-root .csvColOverviewSplit > .csvColRunsPanel {
  overflow: auto;
}
.csvrec-root .csvColOverviewSplit > .csvColRunsPanel .panelHeader {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
}
.csvrec-root .csvColOverviewSplit > .csvColRunsPanel .incFullTableWrap,
.csvrec-root .csvColOverviewSplit > .csvColRunsPanel .csvCollectionRunsWrap {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}
.csvrec-root .csvColOverviewSplit .csvColProviderList {
  flex: 1;
}

.csvrec-root .csvColProviderList {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 6px 10px;
  overflow: auto;
}
.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;
  height: 64px;
  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 .csvColProviderAlertHint {
  font-size: 11px;
  color: var(--amber);
}
.csvrec-root .csvColProviderBalance {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.csvrec-root .csvColBalanceStack {
  display: grid;
  gap: 2px;
  justify-items: end;
  align-content: center;
  min-height: 42px;
}
.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;
}

.csvrec-root .csvColAlertModal {
  width: min(1180px, calc(100vw - 40px));
}
.csvrec-root .csvColAlertModalBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: min(680px, calc(90vh - 130px));
  max-height: calc(90vh - 92px);
  overflow: hidden;
}
.csvrec-root .csvColAlertForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
}
.csvrec-root .csvColAlertForm label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.csvrec-root .csvColAlertRuleInputs {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
}
.csvrec-root .csvColAlertChecks,
.csvrec-root .csvColAlertFormActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  grid-column: span 2;
}
.csvrec-root .csvColAlertForm .csvColReportToggleCheck {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.csvrec-root .csvColAlertFormActions {
  justify-content: flex-end;
  margin-top: 0;
}
.csvrec-root .csvColAlertTableWrap {
  flex: 1 1 320px;
  min-height: 280px;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
}
.csvrec-root .csvColAlertTable {
  min-width: 760px;
}
.csvrec-root .csvColAlertTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.csvrec-root .csvColAlertProvider {
  color: var(--text-strong);
  font-weight: 700;
}
.csvrec-root .ghost.danger {
  color: var(--rose);
  border-color: rgba(251,113,133,.35);
}

/* 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;
}
.csvrec-root .csvColManualFormCol {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.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 .csvColBalanceScheduleCard {
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  align-items: start;
}
.csvrec-root .csvColBalanceScheduleControls {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.csvrec-root .csvColDigestRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-soft-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.csvrec-root .csvColDigestText {
  min-width: 0;
}
.csvrec-root .csvColDigestToggle {
  align-self: center;
  justify-self: start;
  white-space: nowrap;
}
.csvrec-root .csvColBalanceScheduleControls .csvColScheduleField {
  min-width: 0;
}
.csvrec-root .csvColBalanceScheduleControls .input {
  width: 100%;
}
.csvrec-root .csvColBalanceScheduleRecipient {
  grid-column: span 2;
}
.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); }
.theme-light .csvrec-root .csvColAlertForm { background: rgba(255,255,255,.55); }


/* ═══════════════════════════════════════════════════════════════
   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 .botSetupSummary,
  .csvrec-root .botSettingsColumns,
  .csvrec-root .botToolResults { grid-template-columns: 1fr; }
  .csvrec-root .botSetupMetrics,
  .csvrec-root .botSetupChecklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csvrec-root .botRouteSummary { grid-template-columns: repeat(2, minmax(0, 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 .botDetailHead,
  .csvrec-root .botCockpitSectionHead {
    display: grid;
    justify-content: stretch;
  }
  .csvrec-root .botDetailHeadRight {
    flex-wrap: wrap;
  }
  .csvrec-root .botSetupMetrics,
  .csvrec-root .botSetupChecklist,
  .csvrec-root .botRouteSummary { grid-template-columns: 1fr; }
  .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 .csvColAlertForm { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .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);
  }
  body.shell-collapsed.csvrec-root #appShell > .sideNav,
  body.shell-collapsed .csvrec-root .appShell > .sideNav,
  body.archive-fullscreen.csvrec-root #appShell > .sideNav,
  body.archive-fullscreen .csvrec-root .appShell > .sideNav {
    display: flex;
  }
  .csvrec-root .sideBrand { display: none; }
  .csvrec-root .sideNavSection {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .csvrec-root .sideNavSectionBottom {
    display: flex;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .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 .botSetupSummary,
  .csvrec-root .botCoreSettings,
  .csvrec-root .botCockpitSection,
  .csvrec-root .botToolPanel { padding: 12px; }
  .csvrec-root .botRecipientTable .pspTargetRow,
  .csvrec-root .botRecipientTable > .muted { grid-template-columns: 1fr; }
  .csvrec-root .botInlineEditor summary,
  .csvrec-root .botAdvancedFallback summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .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:not(.opTableWrap),
  .csvrec-root .modalDiffTableWrap,
  .csvrec-root .resultTableWrap { overflow-x: auto; }
  .historyDetailTableWrap { overflow-x: auto; }
  .reconciliationIssuesScroll .historyDetailTable {
    display: table;
    width: 100%;
  }
  .reconciliationIssuesScroll .historyDetailTable thead { display: table-header-group; }
  .reconciliationIssuesScroll .historyDetailTable tbody { display: table-row-group; }
  .reconciliationIssuesScroll .historyDetailTable tr { display: table-row; padding: 0; }
  .reconciliationIssuesScroll .historyDetailTable td { display: table-cell; width: auto; }
  .reconciliationIssuesScroll .historyDetailTable td::before { content: none; }
  .historyDetailTable,
  .historyDetailTable tbody,
  .historyDetailTable tr,
  .historyDetailTable td {
    display: block;
    width: 100%;
  }
  .historyDetailTable thead {
    display: none;
  }
  .historyDetailTable tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--table-row-border);
  }
  .historyDetailTable td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 0;
  }
  .historyDetailTable td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
  }
  .historyDetailCell--txid,
  .historyDetailCell--explanation,
  .historyDetailCell--details {
    width: 100%;
  }
  .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%; }
  .csvrec-root .csvColBalanceScheduleCard,
  .csvrec-root .csvColBalanceScheduleControls { grid-template-columns: 1fr; }
  .csvrec-root .csvColDigestRow { grid-template-columns: 1fr; }
  .csvrec-root .csvColDigestToggle { justify-self: start; }
  .csvrec-root .csvColAlertModal {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .csvrec-root .csvColAlertModalBody {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .csvrec-root .csvColAlertForm { grid-template-columns: 1fr; }
  .csvrec-root .csvColAlertChecks,
  .csvrec-root .csvColAlertFormActions {
    grid-column: 1 / -1;
  }
  .csvrec-root .csvColAlertTableWrap {
    flex: 1 0 260px;
    min-height: 260px;
  }
}

/* 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);
}

@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;
  }
}

@media (max-width: 767px) {
  body.shell-collapsed.csvrec-root #appShell > .sideNav,
  body.shell-collapsed .csvrec-root .appShell > .sideNav,
  body.archive-fullscreen.csvrec-root #appShell > .sideNav,
  body.archive-fullscreen .csvrec-root .appShell > .sideNav {
    display: flex !important;
  }

  body.shell-collapsed.csvrec-root #appShell > .sideNav .sideNavSectionBottom,
  body.shell-collapsed .csvrec-root .appShell > .sideNav .sideNavSectionBottom,
  body.archive-fullscreen.csvrec-root #appShell > .sideNav .sideNavSectionBottom,
  body.archive-fullscreen .csvrec-root .appShell > .sideNav .sideNavSectionBottom {
    display: flex !important;
  }
}
/* === Exact handoff design-system.css end === */

/* Balances PR1: page-content master/detail layout. */
.csvrec-root .balancesFpSummary {
  margin: 12px 0;
}

.csvrec-root .balancesFpMasterDetail {
  display: grid;
  grid-template-columns: minmax(260px, 35fr) minmax(0, 65fr);
  gap: 12px;
  align-items: start;
}

.csvrec-root .balancesFpEntityPane,
.csvrec-root .balancesFpDetailPane {
  min-width: 0;
}

.csvrec-root .balancesFpEntityPaneHead,
.csvrec-root .balancesFpDetailHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.csvrec-root .balancesFpEntityPaneHead {
  padding: 14px 16px 10px;
}

.csvrec-root .balancesFpEntityCount {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.csvrec-root .balancesFpEntitySearch {
  display: block;
  padding: 0 12px 10px;
}

.csvrec-root .balancesFpEntitySearch input {
  width: 100%;
}

.csvrec-root .balancesFpEntityList {
  max-height: 560px;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.csvrec-root .balancesFpEntityRow {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  gap: 9px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.csvrec-root .balancesFpEntityRow:hover,
.csvrec-root .balancesFpEntityRow.active {
  border-color: rgba(148,163,184,.28);
  background: rgba(148,163,184,.09);
}

.csvrec-root .balancesFpStatusIcon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.csvrec-root .balancesFpStatusIcon--healthy { background: #34d399; }
.csvrec-root .balancesFpStatusIcon--blocked,
.csvrec-root .balancesFpStatusIcon--stale,
.csvrec-root .balancesFpStatusIcon--expired { background: #f59e0b; }

.csvrec-root .balancesFpEntityName,
.csvrec-root .balancesFpEntityBalance {
  min-width: 0;
}

.csvrec-root .balancesFpEntityName strong,
.csvrec-root .balancesFpEntityName small,
.csvrec-root .balancesFpEntityBalance strong,
.csvrec-root .balancesFpEntityBalance small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csvrec-root .balancesFpEntityName strong,
.csvrec-root .balancesFpEntityBalance strong {
  color: var(--text-strong);
  font-size: 12px;
}

.csvrec-root .balancesFpEntityName small,
.csvrec-root .balancesFpEntityBalance small,
.csvrec-root .balancesFpEntityFreshness {
  color: var(--text-muted);
  font-size: 11px;
}

.csvrec-root .balancesFpEntityBalance {
  max-width: 132px;
  text-align: right;
}

.csvrec-root .balancesFpEntityFreshness {
  min-width: 48px;
  text-align: right;
}

.csvrec-root .balancesFpEntityEmpty,
.csvrec-root .balancesFpPlaceholderBody {
  padding: 28px 16px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

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

.csvrec-root .balancesFpDetailHeader {
  margin-bottom: 12px;
}

.csvrec-root .balancesFpDetailHeader h2 {
  margin: 3px 0 0;
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1.2;
}

.csvrec-root .balancesFpDetailMetrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.csvrec-root .balancesFpPlaceholderGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.csvrec-root .balancesFpPlaceholder {
  min-height: 150px;
}

.csvrec-root .balancesFpProviderDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: 12px;
}

.csvrec-root .balancesFpProviderHistory,
.csvrec-root .balancesFpProviderAlerts,
.csvrec-root .balancesFpSnapshotHistory {
  min-width: 0;
}

.csvrec-root .balancesFpProviderHistory {
  grid-column: 1 / -1;
}

.csvrec-root .balancesFpProviderEmpty {
  padding: 18px 14px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.csvrec-root .balancesFpAlertList,
.csvrec-root .balancesFpSnapshotList {
  display: grid;
  gap: 1px;
  padding: 0 8px 8px;
}

.csvrec-root .balancesFpAlertRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border-radius: 5px;
  background: rgba(148,163,184,.06);
}

.csvrec-root .balancesFpAlertRow strong,
.csvrec-root .balancesFpAlertRow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csvrec-root .balancesFpAlertRow strong {
  color: var(--text-strong);
  font-size: 12px;
}

.csvrec-root .balancesFpAlertRow small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.csvrec-root .balancesFpSnapshotRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.csvrec-root .balancesFpSnapshotRow:hover,
.csvrec-root .balancesFpSnapshotRow.active {
  border-color: rgba(148,163,184,.28);
  background: rgba(148,163,184,.09);
}

.csvrec-root .balancesFpSnapshotRow strong {
  color: var(--text-strong);
  font-size: 12px;
}

.csvrec-root .balancesFpSnapshotRow span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csvrec-root .balancesFpSnapshotRow span:last-child {
  color: var(--text-strong);
  text-align: right;
}

.csvrec-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .csvrec-root .balancesFpMasterDetail {
    grid-template-columns: 1fr;
  }

  .csvrec-root .balancesFpEntityList {
    max-height: 360px;
  }
}

@media (max-width: 680px) {
  .csvrec-root .balancesFpDetailMetrics,
  .csvrec-root .balancesFpPlaceholderGrid,
  .csvrec-root .balancesFpProviderDetailGrid {
    grid-template-columns: 1fr;
  }

  .csvrec-root .balancesFpProviderHistory {
    grid-column: auto;
  }

  .csvrec-root .balancesFpEntityRow {
    grid-template-columns: 10px minmax(0, 1fr) auto;
  }

  .csvrec-root .balancesFpEntityFreshness {
    grid-column: 2 / -1;
    text-align: left;
  }
}

/* Balances corrective iteration: keep the page body dense and bounded on desktop. */
@media (min-width: 981px) {
.csvrec-root .balancesFpPage {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.csvrec-root .balancesFpMasterDetail {
  grid-template-columns: minmax(280px, 34fr) minmax(0, 66fr);
  gap: 16px;
}

.csvrec-root .balancesFpEntityList {
  height: min(64vh, 640px);
  max-height: none;
}

.csvrec-root .balancesFpDetailPane {
  display: grid;
  gap: 16px;
}

.csvrec-root .balancesFpModeState {
  min-height: 120px;
  padding: 28px 20px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.csvrec-root .balancesFpChartHeader,
.csvrec-root .balancesFpAlertHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}

.csvrec-root .balancesFpChartHeader h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  line-height: 1.25;
}

.csvrec-root .balancesFpChartWrap {
  height: 320px;
  padding: 0 16px 16px;
}

.csvrec-root .balancesFpChartWrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.csvrec-root .balancesFpCurrencySelect {
  min-width: 96px;
}

.csvrec-root .balancesFpAlertHeader {
  align-items: flex-start;
}

.csvrec-root .balancesFpAlertHeader .panelTitle {
  color: var(--text-strong);
}

.csvrec-root .balancesFpAlertRules,
.csvrec-root .balancesFpAlertTriggers {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}

.csvrec-root .balancesFpAlertRule,
.csvrec-root .balancesFpAlertTriggers > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 5px;
  background: rgba(148,163,184,.06);
}

.csvrec-root .balancesFpAlertRule > div {
  min-width: 0;
}

.csvrec-root .balancesFpAlertRule strong,
.csvrec-root .balancesFpAlertRule small,
.csvrec-root .balancesFpAlertTriggers span,
.csvrec-root .balancesFpAlertTriggers small {
  display: block;
}

.csvrec-root .balancesFpAlertRule strong,
.csvrec-root .balancesFpAlertTriggers span {
  color: var(--text-strong);
  font-size: 12px;
}

.csvrec-root .balancesFpAlertRule small,
.csvrec-root .balancesFpAlertTriggers small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.csvrec-root .balancesFpAlertError {
  padding: 0 16px 16px;
  color: var(--danger, #f87171);
  font-size: 12px;
}

.csvrec-root .balancesFpStatusIcon--error {
  background: var(--danger, #f87171);
}

.csvrec-root .balancesFpStatusIcon--unknown,
.csvrec-root .balancesFpStatusIcon--unavailable,
.csvrec-root .balancesFpStatusIcon--not_operational {
  background: var(--text-muted);
}
}