/* Issue 141 ZIP, index.html .ceo / [data-skin="light"]. Shared AI-UI baseline. */
:root {
  --fg-bg: #04192c;
  --fg-card: #0c2742;
  --fg-line: rgba(158, 190, 220, .16);
  --fg-text: #e8f2fb;
  --fg-muted: #8eabc4;
  --fg-faint: #6d89a6;
  --fg-gold: #e6c15a;
  --fg-green: #52db79;
  --fg-red: #ef6b6b;
  --fg-hover: rgba(255, 255, 255, .05);
  --fg-active: #16324c;
  --fg-nav: #c5d6e6;
  --fg-track: #12344e;
  --fg-radius: 14px;
  --fg-sidebar: 276px;
  --fg-font-body: 16px;
  --fg-font-small: 14px;
  --fg-font-label: 14px;
  --fg-font-title: 50px;
  --fg-font-section: 28px;
  --fg-font-kpi: 44px;
  --fg-weight-regular: 400;
  --fg-weight-medium: 600;
  --fg-weight-strong: 700;
  --fg-facu-bg: #f0d48a;
  --fg-facu-text: #3e2c0a;
  --fg-facu-low-bg: #ffe1e4;
  --fg-facu-low-text: #921f36;
  --fg-brand-surface: transparent;
}
html[data-theme="light"] {
  --fg-bg: #f3f1ea;
  --fg-card: #ffffff;
  --fg-line: rgba(16, 36, 64, .16);
  --fg-text: #10233a;
  --fg-muted: #5c6d80;
  --fg-faint: #5c6d80;
  --fg-gold: #946b08;
  --fg-green: #1f8a4d;
  --fg-red: #b92045;
  --fg-hover: rgba(16, 36, 64, .05);
  --fg-active: #ffffff;
  --fg-nav: #314255;
  --fg-track: #e6e1d6;
}
/* Scope the migration to the authenticated shell; public/auth flows keep their styling. */
html body .app-shell {
  --bg: var(--fg-bg);
  --panel: var(--fg-card);
  --panel-2: var(--fg-active);
  --border: var(--fg-line);
  --text: var(--fg-text);
  --muted: var(--fg-muted);
  --gold: var(--fg-gold);
  --green: var(--fg-green);
  --red: var(--fg-red);
  --chart-grid: var(--fg-line);
  --chart-muted: var(--fg-muted);
  --chart-text: var(--fg-text);
  background: var(--fg-bg);
  color: var(--fg-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--fg-font-body);
  letter-spacing: 0;
  grid-template-columns: var(--fg-sidebar) minmax(0, 1fr);
}
html body .app-shell .sidebar {
  background: var(--fg-bg);
  color: var(--fg-nav);
  border-right: 1px solid var(--fg-line);
  padding: 14px 12px 12px;
}
html body .app-shell .brand { border-color: var(--fg-line); color: var(--fg-text); }
html body .app-shell .brand strong { color: var(--fg-text); }
/* The approved wordmark carries its own transparent background. */
html body .app-shell .sidebar > .fg-brand {
  display: flex; align-items: center; justify-content: center;
  width: 244px; max-width: 100%; height: 60px; flex: none;
  padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: var(--fg-brand-surface);
}
html body .app-shell .fg-brand-logo { display: block; width: 100%; height: auto; max-width: none; flex: none; }
html body .app-shell .workspace { min-width: 0; padding: 0 24px 36px; background: var(--fg-bg); }
html body .app-shell .topbar {
  min-height: 78px;
  height: auto;
  padding: 10px 0;
  margin-bottom: 22px;
  gap: 10px;
  background: var(--fg-bg);
  border-color: var(--fg-line);
}
html body .app-shell .topbar-actions { flex: 1; min-width: 0; flex-wrap: wrap; gap: 10px; }
html body .app-shell .topbar :is(button, select, input) {
  color: var(--fg-text);
  background: var(--fg-hover);
  border: 1px solid var(--fg-line);
  border-radius: 8px;
  min-height: 44px;
  font-size: var(--fg-font-body);
  font-weight: var(--fg-weight-medium);
}
html body .app-shell .topbar select option { color: var(--fg-text); background: var(--fg-card); }
html body .app-shell .topbar .facu-topbar-widget { background: var(--fg-facu-bg); color: var(--fg-facu-text); border-color: transparent; }
html body .app-shell .topbar .facu-topbar-widget :is(span, strong) { background: transparent; color: inherit; font-size: var(--fg-font-body); font-weight: var(--fg-weight-strong); letter-spacing: 0; }
html body .app-shell .topbar .facu-topbar-widget.is-low { background: var(--fg-facu-low-bg); color: var(--fg-facu-low-text); border-color: currentColor; }
html body .app-shell .topbar .facu-topbar-widget[hidden] { display: none; }
html body .app-shell .role-switcher { color: var(--fg-muted); }
html body .app-shell .nav-group { color: var(--fg-muted); letter-spacing: 0; }
html body .app-shell .nav-item {
  color: var(--fg-nav);
  background: transparent;
  border-color: transparent;
  border-radius: 8px;
  box-shadow: none;
  height: auto;
  min-height: 44px;
  font-size: var(--fg-font-body);
  font-weight: var(--fg-weight-medium);
  padding: 8px 10px;
  line-height: 1.3;
  text-decoration: none;
}
html body .app-shell .nav-item:hover { background: var(--fg-hover); }
html body .app-shell .nav-item.is-active { background: var(--fg-active); color: var(--fg-text); }
html body .app-shell .nav-icon { color: var(--fg-muted); }
html body .app-shell .nav-item.is-active .nav-icon { color: var(--fg-gold); }
html body .app-shell .sidebar-footer { border-color: var(--fg-line); color: var(--fg-muted); flex-wrap: wrap; }
/* A translated, closed drawer must not cast a shadow or receive keyboard focus. */
html body .detail-drawer:not(.is-open) { visibility: hidden; box-shadow: none; }
html body .app-shell :is(button, a, select, input):focus-visible { outline: 2px solid var(--fg-gold); outline-offset: 3px; }
html body .app-shell .fg-theme-switch { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--fg-line); border-radius: 10px; }
html body .app-shell .fg-theme-switch button { min-height: 34px; padding: 4px 10px; border: 0; background: transparent; color: var(--fg-muted); }
html body .app-shell .fg-theme-switch button[aria-pressed="true"] { background: var(--fg-active); color: var(--fg-text); }
/* Shared controls opt in with data-fg-select; topbar controls are always enhanced. */
html body .app-shell .fg-select { display: inline-flex; position: relative; min-width: 0; max-width: 100%; }
html body .app-shell .fg-select[hidden] { display: none; }
html body .app-shell select.fg-native-select { display: none; }
html body .app-shell .fg-select-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: 74px; max-width: 100%; padding: 10px 12px; font-family: inherit;
  font-size: var(--fg-font-body); font-weight: var(--fg-weight-medium);
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 8px;
}
html body .app-shell .fg-select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .app-shell .fg-select-trigger::after { content: ''; width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
html body .app-shell .fg-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
html body .app-shell .fg-select-trigger[aria-expanded="true"] { border-color: var(--fg-gold); }
html body .fg-select-menu {
  position: fixed; z-index: 20000; overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border: 1px solid var(--fg-line); border-radius: 8px;
  background: var(--fg-card); color: var(--fg-text); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
  font: var(--fg-weight-medium) var(--fg-font-body)/1.4 Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .fg-select-menu[hidden] { display: none; }
html body .fg-select-option { padding: 10px 12px; min-height: 42px; border-radius: 4px; overflow-wrap: anywhere; cursor: pointer; }
html body .fg-select-option[aria-selected="true"] { color: var(--fg-gold); font-weight: var(--fg-weight-strong); }
html body .fg-select-option:is(:hover, .is-highlighted) { background: var(--fg-hover); outline: 1px solid var(--fg-line); }
html body .fg-select-option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
html body .app-shell .fg-notifications { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none; }
.fg-icon-bell { display: inline-block; width: 20px; height: 20px; background: currentColor; mask: url('/assets/icons/lucide/bell.svg') center / contain no-repeat; }
/* The global company search follows the same shell control surface in both themes. */
html body .app-shell .topbar .search-wrap {
  width: min(360px, 100%); height: 44px; min-height: 44px; padding: 0 12px;
  background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 8px;
}
html body .app-shell .topbar .search-wrap input {
  min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0;
  color: var(--fg-text); background: transparent; box-shadow: none;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.4 Inter, system-ui, sans-serif;
}
html body .app-shell .topbar .search-wrap input::placeholder { color: var(--fg-muted); opacity: 1; }
html body .app-shell .topbar .search-icon { color: var(--fg-gold); font-size: 18px; }
html body .app-shell .topbar .search-clear { min-height: 28px; width: 28px; height: 28px; padding: 0; background: transparent; }
html body .app-shell .topbar .search-results {
  background: var(--fg-card); border-color: var(--fg-line); border-radius: 8px;
  box-shadow: 0 12px 28px rgb(0 0 0 / .18);
}
html body .app-shell .topbar .search-results button { color: var(--fg-text); font: var(--fg-weight-medium) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif; }
html body .app-shell .topbar .search-results button:hover { color: var(--fg-text); background: var(--fg-hover); }
html body .app-shell .topbar .search-results span { color: var(--fg-muted); font-size: var(--fg-font-small); }
/* Full-width header at desktop sizes, using the existing brand and controls. */
@media (min-width: 1101px) {
  html body .app-shell .sidebar { padding-top: 92px; }
  html body .app-shell .sidebar > .brand { position: absolute; top: 9px; left: 16px; width: 244px; height: 60px; padding: 0; border: 0; z-index: 3; }
  html body .app-shell .topbar { margin-left: calc(-1 * var(--fg-sidebar) - 24px); margin-right: -24px; padding-left: calc(var(--fg-sidebar) + 24px); padding-right: 18px; }
}
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) .topbar .search-wrap { display: none; }
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) .topbar .tenant-pill { order: -2; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) .topbar .role-switcher { order: -1; }
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) #screen-v2-command .v2-command-head {
  background: transparent; border: 0; padding: 0; margin-bottom: 20px;
}
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) #pageTitle {
  font: var(--fg-weight-strong) var(--fg-font-title)/1.1 Inter, system-ui, sans-serif; color: var(--fg-text); letter-spacing: 0; margin: 8px 0 0;
}
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) #pageSubtitle { margin-top: 10px; font-size: 18px; color: var(--fg-muted); }
html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) .v2-command-head .eyebrow,
html body #screen-v2-command .ceo-kicker { margin: 0 0 8px; color: var(--fg-gold); font-size: var(--fg-font-label); font-weight: var(--fg-weight-strong); letter-spacing: 0; text-transform: uppercase; }
html body #screen-v2-command .ceo-cockpit-screen { display: block; color: var(--fg-text); }
html body #screen-v2-command .ceo-cockpit-screen .grid { gap: 16px; }
html body #screen-v2-command .ceo-cockpit-screen > .sidebar-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .86fr); align-items: stretch; }
html body #screen-v2-command .ceo-cockpit-screen :is(.card, .kpi) {
  min-width: 0; background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); box-shadow: none;
}
html body #screen-v2-command .ceo-cockpit-screen .kpi { padding: 0; min-height: 216px; display: flex; flex-direction: column; }
html body #screen-v2-command .ceo-cockpit-screen .grid.four { counter-reset: ceo-kpi; }
html body #screen-v2-command .ceo-cockpit-screen .kpi .kpi-label { color: var(--fg-muted); font-size: var(--fg-font-label); font-weight: var(--fg-weight-strong); text-transform: uppercase; line-height: 1.4; display: flex; gap: 8px; }
html body #screen-v2-command .ceo-cockpit-screen .kpi .kpi-label::before { counter-increment: ceo-kpi; content: counter(ceo-kpi, decimal-leading-zero); color: var(--fg-gold); }
html body #screen-v2-command .ceo-cockpit-screen .kpi-value { color: var(--fg-text); font: var(--fg-weight-strong) var(--fg-font-kpi)/1.15 Inter, system-ui, sans-serif; margin-top: 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
html body #screen-v2-command .ceo-cockpit-screen .kpi-value small { font-size: inherit; color: inherit; }
html body #screen-v2-command .ceo-cockpit-screen .kpi .delta { color: var(--fg-muted); font-size: var(--fg-font-body); margin-top: 8px; line-height: 1.4; }
html body #screen-v2-command .ceo-cockpit-screen .muted { color: var(--fg-muted); }
html body #screen-v2-command .ceo-cockpit-screen .card-body { padding: 18px; }
html body #screen-v2-command .ceo-cockpit-screen .card-header { align-items: flex-start; gap: 12px; }
html body #screen-v2-command .ceo-cockpit-screen .card-header > div { min-width: 0; }
html body #screen-v2-command .ceo-cockpit-screen h2 { color: var(--fg-text); font: var(--fg-weight-strong) var(--fg-font-section)/1.25 Inter, system-ui, sans-serif; margin: 0; letter-spacing: 0; }
html body #screen-v2-command .ceo-cockpit-screen .card-header .muted { margin-top: 6px; font-size: var(--fg-font-body); }
html body #screen-v2-command .ceo-cockpit-screen .status-pill { border: 0; font-size: var(--fg-font-small); font-weight: var(--fg-weight-strong); flex: none; }
html body #screen-v2-command .ceo-cockpit-screen .status-pill.gold { color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 16%, transparent); }
html body #screen-v2-command .ceo-cockpit-screen .status-pill.green { color: var(--fg-green); background: color-mix(in srgb, var(--fg-green) 14%, transparent); }
html body #screen-v2-command .ceo-cockpit-screen .status-pill.red { color: var(--fg-red); background: color-mix(in srgb, var(--fg-red) 14%, transparent); }
html body #screen-v2-command .ceo-cockpit-screen .ceo-brief-button { color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 8px; padding: 8px 12px; flex: none; }
html body #screen-v2-command .ceo-cockpit-screen .ceo-board-summary { color: var(--fg-muted); background: transparent; border-color: var(--fg-line); }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-stack { gap: 0; margin-top: 14px; }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item { padding: 16px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item + .ai-board-item { border-top: 1px solid var(--fg-line); }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item strong { color: var(--fg-text); font-size: var(--fg-font-body); font-weight: var(--fg-weight-strong); line-height: 1.4; }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item .muted { font-size: var(--fg-font-body); line-height: 1.5; margin-top: 4px; }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; font-size: 0; }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item-green .ai-board-dot { background: var(--fg-green); }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item-red .ai-board-dot { background: var(--fg-red); }
html body #screen-v2-command .ceo-cockpit-screen .ai-board-item-gold .ai-board-dot { background: var(--fg-gold); }
html body #screen-v2-command .ceo-cockpit-screen .chart-svg { width: 100%; height: auto; min-height: 0; aspect-ratio: 720 / 300; }
html body #screen-v2-command .ceo-cockpit-screen .chart-svg :is(.axis-label, .y-axis-label) { fill: var(--fg-muted); font: 11px Inter, system-ui, sans-serif; }
html body #screen-v2-command .ceo-cockpit-screen .line-grid { stroke: var(--fg-line); }
html body #screen-v2-command .ceo-cockpit-screen .forecast-divider { stroke: var(--fg-muted); }
html body #screen-v2-command .ceo-cockpit-screen .chart-legend { color: var(--fg-muted); font-size: var(--fg-font-small); flex-wrap: wrap; gap: 14px; margin: 16px 0; }
html body #screen-v2-command .ceo-cockpit-screen .chart-legend i { height: 0; border-top: 2px solid var(--legend-color); background: none; }
html body #screen-v2-command .ceo-cockpit-screen .chart-legend .is-dashed i { border-top-style: dashed; }
html body #screen-v2-command .ceo-cockpit-screen .chart-legend .is-dotted i { border-top-style: dotted; border-top-width: 3px; }
html body #screen-v2-command .ceo-cockpit-screen .list-row { background: transparent; color: var(--fg-text); border-color: var(--fg-line); }
html body #screen-v2-command .ceo-cockpit-screen .ceo-unavailable { color: var(--fg-muted); background: transparent; }
html body #screen-v2-command .ceo-health-meter { height: 5px; width: 100%; margin-top: 18px; accent-color: var(--fg-gold); border: 0; border-radius: 99px; overflow: hidden; background: var(--fg-track); }
html body #screen-v2-command .ceo-health-meter::-webkit-progress-bar { background: var(--fg-track); }
html body #screen-v2-command .ceo-health-meter::-webkit-progress-value { background: var(--fg-gold); }
html body #screen-v2-command .ceo-health-meter::-moz-progress-bar { background: var(--fg-gold); }

/* Portfolio Health was built before the shared Fingoru shell. Keep its data and
   behavior, but move every visible surface onto the shared design tokens. */
html body .app-shell #screen-dashboard {
  color: var(--fg-text); font-family: Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell #screen-dashboard .onboarding-panel {
  padding: 16px; gap: 16px; margin-bottom: 22px;
  color: var(--fg-text); background: var(--fg-card);
  border: 1px solid color-mix(in srgb, var(--fg-gold) 38%, var(--fg-line));
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-dashboard .onboarding-panel .eyebrow {
  margin: 0 0 7px; color: var(--fg-gold); font-size: var(--fg-font-label);
  font-weight: var(--fg-weight-medium); letter-spacing: 0;
}
html body .app-shell #screen-dashboard .onboarding-panel h2 {
  color: var(--fg-text); font: var(--fg-weight-strong) 18px/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-dashboard .onboarding-steps button {
  min-width: 0; min-height: 58px; padding: 10px 12px; gap: 10px;
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line);
  border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.3 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-dashboard .onboarding-steps button:is(:hover, :focus-visible) {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 54%, var(--fg-line));
}
html body .app-shell #screen-dashboard .onboarding-steps strong {
  width: 30px; height: 30px; flex: none; color: var(--fg-facu-text); background: var(--fg-gold);
  font-size: var(--fg-font-body); font-weight: var(--fg-weight-strong);
}
html body .app-shell #screen-dashboard :is(.ghost-button, .range-button) {
  min-height: 44px; padding: 0 14px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.3 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-dashboard :is(.ghost-button, .range-button):is(:hover, :focus-visible) {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 54%, var(--fg-line));
}
html body .app-shell #screen-dashboard .dashboard-heading { align-items: center; margin-bottom: 18px; }
html body .app-shell #screen-dashboard .dashboard-heading h1 {
  color: var(--fg-text); font: var(--fg-weight-strong) 28px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0;
}
html body .app-shell #screen-dashboard .title-accent { color: var(--fg-gold); font-size: inherit; }
html body .app-shell #screen-dashboard .dashboard-actions { align-items: center; gap: 10px; }
html body .app-shell #screen-dashboard .dashboard-actions .fg-select-trigger { min-width: 248px; }
html body .app-shell #screen-dashboard .export-button {
  min-height: 44px; padding: 0 18px; color: var(--fg-facu-text); background: var(--fg-gold);
  border: 1px solid transparent; border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-strong) var(--fg-font-body)/1.3 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-dashboard .export-button:is(:hover, :focus-visible) {
  color: var(--fg-facu-text); background: color-mix(in srgb, var(--fg-gold) 88%, white); box-shadow: none;
}
html body .app-shell #screen-dashboard :is(.panel, .kpi-card) {
  min-width: 0; color: var(--fg-text); background: var(--fg-card);
  border: 1px solid var(--fg-line); border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-dashboard .dashboard-financial-panel { margin-bottom: 24px; }
html body .app-shell #screen-dashboard .dashboard-financial-card {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); border-radius: 8px;
}
html body .app-shell #screen-dashboard .dashboard-financial-card > strong { color: var(--fg-text); }
html body .app-shell #screen-dashboard :is(.dashboard-financial-card > span, .dashboard-financial-card > p, .dashboard-financial-card details, .dashboard-financial-meta, .muted) { color: var(--fg-muted); }
html body .app-shell #screen-dashboard .kpi-grid { gap: 16px; margin-bottom: 22px; }
html body .app-shell #screen-dashboard .kpi-card {
  min-height: 184px; padding: 18px 18px 14px; overflow: hidden;
  grid-template-rows: auto auto auto minmax(0, 58px); gap: 7px;
}
html body .app-shell #screen-dashboard .kpi-label { min-width: 0; align-items: center; }
html body .app-shell #screen-dashboard .kpi-label > span {
  min-width: 0; color: var(--fg-muted); font-size: var(--fg-font-body); font-weight: var(--fg-weight-regular);
}
html body .app-shell #screen-dashboard .kpi-label .trend {
  flex: none; font-size: 11px; font-weight: var(--fg-weight-medium);
  color: var(--fg-green); background: color-mix(in srgb, var(--fg-green) 12%, transparent);
}
html body .app-shell #screen-dashboard .kpi-label .trend.down { color: var(--fg-red); background: color-mix(in srgb, var(--fg-red) 12%, transparent); }
html body .app-shell #screen-dashboard .kpi-label .trend.warn { color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 12%, transparent); }
html body .app-shell #screen-dashboard .kpi-card > strong {
  min-width: 0; color: var(--fg-text);
  font: var(--fg-weight-strong) clamp(24px, 1.5vw, 30px)/1.12 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}
html body .app-shell #screen-dashboard .kpi-card > small { color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-dashboard .kpi-card canvas {
  display: block; align-self: end; min-width: 0; width: 100% !important;
  height: 58px !important; max-height: 58px; border-radius: 0 0 8px 8px;
}
html body .app-shell #screen-dashboard :is(.dashboard-wire-grid, .dashboard-lower-grid) { gap: 16px; margin-bottom: 16px; }
html body .app-shell #screen-dashboard .panel { padding: 18px; }
html body .app-shell #screen-dashboard .panel-head { align-items: flex-start; gap: 12px; margin-bottom: 16px; }
html body .app-shell #screen-dashboard .panel-head > * { min-width: 0; }
html body .app-shell #screen-dashboard .panel-head h2 {
  color: var(--fg-text); font: var(--fg-weight-strong) 18px/1.35 Inter, system-ui, sans-serif;
  letter-spacing: 0;
}
html body .app-shell #screen-dashboard .panel-head span {
  color: var(--fg-muted); font: var(--fg-weight-regular) var(--fg-font-body)/1.4 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-dashboard .chart-stats { flex-wrap: wrap; gap: 24px 38px; margin: 2px 0 8px; }
html body .app-shell #screen-dashboard .chart-stats span { color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-dashboard .chart-stats strong {
  color: var(--fg-text); font-size: 24px; font-weight: var(--fg-weight-strong); font-variant-numeric: tabular-nums;
}
html body .app-shell #screen-dashboard .chart-panel canvas { display: block; min-width: 0; max-width: 100%; }
html body .app-shell #screen-dashboard .wire-legend .legend-item {
  color: var(--fg-muted); font-size: var(--fg-font-small); background: transparent; border: 0;
}
html body .app-shell #screen-dashboard .risky-table-panel { padding: 0; }
html body .app-shell #screen-dashboard .risky-table-panel .panel-head { padding: 22px 22px 18px; }
html body .app-shell #screen-dashboard .table-wrap { border-color: var(--fg-line); border-radius: 0 0 var(--fg-radius) var(--fg-radius); }
html body .app-shell #screen-dashboard .risk-table { color: var(--fg-text); font-family: Inter, system-ui, sans-serif; }
html body .app-shell #screen-dashboard .risk-table :is(th, td) { border-color: var(--fg-line); }
html body .app-shell #screen-dashboard .risk-table th {
  color: var(--fg-muted); font-size: 12px; font-weight: var(--fg-weight-medium); letter-spacing: 0; text-transform: uppercase;
}
html body .app-shell #screen-dashboard :is(.company-cell strong, .payment-cell strong, .activity-cell span) { color: var(--fg-text); }
html body .app-shell #screen-dashboard .company-initials { color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); }

/* Classic portfolio, company, invitation and risk pages share one control and
   surface contract. Page-specific legacy rules remain as layout fallbacks only. */
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) {
  color: var(--fg-text); font-family: Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) .screen-heading h1 {
  color: var(--fg-text); font: var(--fg-weight-strong) 28px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) :is(.screen-meta, .muted, small) {
  color: var(--fg-muted);
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) :is(.primary-button, .export-button) {
  min-height: 44px; height: auto; padding: 9px 16px;
  color: var(--fg-facu-text); background: var(--fg-facu-bg); border: 1px solid transparent;
  border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-strong) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) :is(.primary-button, .export-button):is(:hover, :focus-visible) {
  color: var(--fg-facu-text); background: color-mix(in srgb, var(--fg-facu-bg) 88%, white);
  border-color: transparent; filter: none; box-shadow: none;
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) :is(.ghost-button, .table-action-button, .action-dots, .row-menu-button, .pagination button) {
  min-height: 44px; height: auto; padding: 9px 14px;
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line);
  border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) :is(.ghost-button, .table-action-button, .action-dots, .row-menu-button, .pagination button):is(:hover, :focus-visible) {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 54%, var(--fg-line));
}
html body .app-shell :is(#screen-portfolio, #screen-companies, #screen-invitations, #screen-risk) button:disabled {
  opacity: .52; cursor: not-allowed;
}

html body .app-shell #screen-portfolio .portfolio-actions { flex-wrap: wrap; justify-content: flex-end; }
html body .app-shell #screen-portfolio .segmented-control {
  gap: 3px; padding: 4px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px;
}
html body .app-shell #screen-portfolio .segmented-control button {
  min-height: 36px; padding: 7px 12px; color: var(--fg-muted); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.3 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-portfolio .segmented-control button:is(.is-active, :hover, :focus-visible) {
  color: var(--fg-text); background: var(--fg-active);
  border-color: color-mix(in srgb, var(--fg-gold) 52%, var(--fg-line));
}
html body .app-shell #screen-portfolio .segmented-control button.is-active { color: var(--fg-gold); }
html body .app-shell #screen-portfolio .portfolio-scenario-bar {
  min-height: 68px; flex-wrap: wrap; gap: 12px; padding: 12px 16px;
  color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-portfolio .portfolio-scenario-bar > strong {
  color: var(--fg-text); font-size: var(--fg-font-body); font-weight: var(--fg-weight-strong);
}
html body .app-shell #screen-portfolio .scenario-adjustments { flex-wrap: wrap; }
html body .app-shell #screen-portfolio .scenario-adjustments label { color: var(--fg-muted); }
html body .app-shell #screen-portfolio .scenario-adjustments input {
  min-height: 38px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px; font: inherit;
}
html body .app-shell #screen-portfolio :is(.portfolio-kpi-card, .panel) {
  min-width: 0; color: var(--fg-text); background: var(--fg-card);
  border: 1px solid var(--fg-line); border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-portfolio .portfolio-kpi-card > span,
html body .app-shell #screen-portfolio .panel-head span { color: var(--fg-muted); }
html body .app-shell #screen-portfolio :is(.portfolio-kpi-card strong, .panel-head h2, .stack-item strong) { color: var(--fg-text); }
html body .app-shell #screen-portfolio .stack-item { color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); }
html body .app-shell #screen-portfolio .fg-select-trigger { min-width: 108px; }

html body .app-shell #screen-companies .company-list-panel {
  color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-companies .company-list-heading { align-items: flex-end; gap: 20px; }
html body .app-shell #screen-companies .company-list-heading > div:first-child { min-width: 0; }
html body .app-shell #screen-companies .company-list-eyebrow {
  display: block; margin-bottom: 8px; color: var(--fg-gold);
  font-size: 12px; font-weight: var(--fg-weight-strong); text-transform: uppercase;
}
html body .app-shell #screen-companies .company-heading-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
html body .app-shell #screen-companies .company-heading-actions :is(.ghost-button, .primary-button) {
  min-height: 44px; padding: 9px 16px; border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-strong) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-companies .company-heading-actions .ghost-button {
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line);
}
html body .app-shell #screen-companies .company-heading-actions .primary-button {
  color: var(--fg-facu-text); background: var(--fg-facu-bg); border: 1px solid transparent;
}
html body .app-shell #screen-companies .company-list-toolbar {
  min-height: 0; padding: 18px; background: var(--fg-card); border-color: var(--fg-line);
}
html body .app-shell #screen-companies .company-filter-stack { width: 100%; }
html body .app-shell #screen-companies .company-filter-row { align-items: end; }
html body .app-shell #screen-companies .company-filter-control {
  display: grid; min-width: 0; gap: 7px; color: var(--fg-muted);
}
html body .app-shell #screen-companies .company-filter-label {
  overflow: hidden; color: var(--fg-muted); font-size: 12px; font-weight: var(--fg-weight-medium);
  text-overflow: ellipsis; white-space: nowrap;
}
html body .app-shell #screen-companies .company-search-field {
  min-height: 44px; height: 44px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px;
}
html body .app-shell #screen-companies .company-search-field span { color: var(--fg-gold); }
html body .app-shell #screen-companies .company-search-field input {
  color: var(--fg-text); background: transparent;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.4 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-companies .company-search-field input::placeholder { color: var(--fg-muted); opacity: 1; }
html body .app-shell #screen-companies .company-filter-row > .fg-select { width: 100%; min-width: 0; }
html body .app-shell #screen-companies .company-filter-control > .fg-select { width: 100%; min-width: 0; }
html body .app-shell #screen-companies .company-filter-row .fg-select-trigger { width: 100%; min-width: 0; }
html body .app-shell #screen-companies .filter-tags:empty { display: none; }
html body .app-shell #screen-companies .company-selection-toolbar {
  min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 18px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg-hover) 65%, var(--fg-card));
  border-bottom: 1px solid var(--fg-line);
}
html body .app-shell #screen-companies .company-selection-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html body .app-shell #screen-companies .company-selection-toolbar .table-action-button {
  min-height: 38px; color: var(--fg-text); background: transparent; border-color: var(--fg-line);
  font: var(--fg-weight-medium) var(--fg-font-small)/1.3 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-companies .company-selection-toolbar .table-action-button:is(:hover, :focus-visible):not(:disabled) {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 48%, var(--fg-line));
}
html body .app-shell #screen-companies .company-selection-toolbar .table-action-button:disabled { opacity: .45; cursor: not-allowed; }
html body .app-shell #screen-companies .selected-count { color: var(--fg-muted); }
html body .app-shell #screen-companies .selected-count strong { color: var(--fg-gold); }
html body .app-shell #screen-companies .company-list-status {
  padding: 12px 18px; color: var(--fg-muted); background: var(--fg-hover); border-bottom: 1px solid var(--fg-line);
}
html body .app-shell #screen-companies .company-list-status.is-error { color: var(--fg-red); }
html body .app-shell #screen-companies .company-table-loading {
  min-height: 210px; display: grid; align-content: center; gap: 12px; max-width: 520px; margin: 0 auto;
  color: var(--fg-muted); text-align: center;
}
html body .app-shell #screen-companies .company-loading-bar {
  display: block; height: 12px; overflow: hidden; background: var(--fg-hover); border-radius: 4px;
}
html body .app-shell #screen-companies .company-loading-bar::after {
  content: ""; display: block; width: 45%; height: 100%; background: color-mix(in srgb, var(--fg-gold) 32%, var(--fg-hover));
  animation: company-list-loading 1.1s ease-in-out infinite alternate;
}
html body .app-shell #screen-companies .company-loading-bar:nth-child(2)::after { animation-delay: .12s; }
html body .app-shell #screen-companies .company-loading-bar:nth-child(3)::after { animation-delay: .24s; }
@keyframes company-list-loading { from { transform: translateX(-20%); } to { transform: translateX(140%); } }
@media (prefers-reduced-motion: reduce) {
  html body .app-shell #screen-companies .company-loading-bar::after { animation: none; }
}
html body .app-shell #screen-companies .company-table-wrap { border-color: var(--fg-line); }
html body .app-shell #screen-companies .company-list-table { color: var(--fg-text); font-family: Inter, system-ui, sans-serif; }
html body .app-shell #screen-companies .company-list-table :is(th, td) { border-color: var(--fg-line); }
html body .app-shell #screen-companies .company-list-table th {
  color: var(--fg-muted); background: var(--fg-hover);
  font-size: 12px; font-weight: var(--fg-weight-medium); letter-spacing: 0; text-transform: uppercase;
}
html body .app-shell #screen-companies .company-list-table td { color: var(--fg-text); background: var(--fg-card); }
html body .app-shell #screen-companies .company-list-table tr.is-selected td {
  background: color-mix(in srgb, var(--fg-gold) 8%, var(--fg-card));
}
html body .app-shell #screen-companies .company-list-table tr.is-processing td { opacity: .62; }
html body .app-shell #screen-companies .company-sort-button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0;
  color: inherit; background: transparent; border: 0; border-radius: 4px;
  font: inherit; text-transform: inherit;
}
html body .app-shell #screen-companies .company-sort-button::after { content: "↕"; color: var(--fg-faint); font-size: 11px; }
html body .app-shell #screen-companies .company-sort-button.is-active { color: var(--fg-text); }
html body .app-shell #screen-companies .company-sort-button[data-sort-direction="asc"]::after { content: "↑"; color: var(--fg-gold); }
html body .app-shell #screen-companies .company-sort-button[data-sort-direction="desc"]::after { content: "↓"; color: var(--fg-gold); }
html body .app-shell #screen-companies :is(.company-list-name strong, .exposure-cell strong, .updated-cell strong, .forecast-cell strong) { color: var(--fg-text); }
html body .app-shell #screen-companies :is(.company-list-name small, .exposure-cell small, .updated-cell small, .forecast-cell small) { color: var(--fg-muted); }
html body .app-shell #screen-companies .company-row-icon { color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); }
html body .app-shell #screen-companies .forecast-cell span { background: var(--fg-track); }
html body .app-shell #screen-companies .score-pill.neutral { color: var(--fg-muted); background: var(--fg-hover); border: 1px solid var(--fg-line); }
html body .app-shell #screen-companies .row-menu-button {
  width: 44px; padding: 7px; border-color: transparent; background: transparent; letter-spacing: 2px;
}
html body .app-shell #screen-companies .row-actions-cell.is-open .row-menu-button {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 12%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 45%, var(--fg-line));
}
html body .app-shell #screen-companies .row-action-menu {
  z-index: 20; min-width: 240px; padding: 6px; color: var(--fg-text); background: var(--fg-card);
  border: 1px solid var(--fg-line); border-radius: 8px; box-shadow: 0 12px 30px rgb(0 0 0 / .2);
}
html body .app-shell #screen-companies .row-action-menu button {
  min-height: 40px; padding: 9px 10px; color: var(--fg-text); background: transparent;
  border: 0; border-radius: 6px; text-align: left;
  font: var(--fg-weight-regular) var(--fg-font-small)/1.4 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-companies .row-action-menu button:is(:hover, :focus-visible) {
  color: var(--fg-text); background: var(--fg-hover);
}
html body .app-shell #screen-companies .row-action-menu button:disabled { opacity: .45; cursor: not-allowed; }
html body .app-shell #screen-companies .row-actions-cell.opens-upward .row-action-menu { top: auto; bottom: 38px; }
html body .app-shell #screen-companies .company-empty-state {
  min-height: 210px; display: grid; place-items: center; align-content: center; gap: 16px;
  color: var(--fg-muted); text-align: center;
}
html body .app-shell #screen-companies .company-empty-state strong { color: var(--fg-text); font-size: 17px; }
html body .app-shell #screen-companies .company-empty-state span { color: var(--fg-muted); }
html body .app-shell #screen-companies .company-empty-state.is-error strong { color: var(--fg-red); }
html body .app-shell #screen-companies :is(.company-sort-button, .row-menu-button, .table-action-button, input, .fg-select-trigger):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fg-gold) 65%, transparent); outline-offset: 2px;
}
html body .app-shell #screen-companies .company-table-footer {
  color: var(--fg-muted); background: var(--fg-card); border-color: var(--fg-line);
}
html body .app-shell #screen-companies .company-table-footer .fg-select-trigger { min-width: 70px; min-height: 38px; padding: 7px 10px; }
html body .app-shell #screen-companies .pagination button { min-width: 36px; min-height: 36px; padding: 6px; }
html body .app-shell #screen-companies .pagination button.is-current {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 12%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 48%, var(--fg-line));
}

html body .app-shell #screen-invitations .screen-heading { align-items: end; }
html body .app-shell #screen-invitations .screen-heading > .fg-select .fg-select-trigger { min-width: 220px; }
html body .app-shell #screen-invitations .invitation-panel {
  padding: 0; overflow: hidden; color: var(--fg-text); background: var(--fg-card);
  border: 1px solid var(--fg-line); border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-invitations .table-wrap { border: 0; border-radius: 0; }
html body .app-shell #screen-invitations table { color: var(--fg-text); font-family: Inter, system-ui, sans-serif; }
html body .app-shell #screen-invitations :is(th, td) { border-color: var(--fg-line); }
html body .app-shell #screen-invitations th {
  color: var(--fg-muted); background: var(--fg-hover);
  font-size: 12px; font-weight: var(--fg-weight-medium); letter-spacing: 0; text-transform: uppercase;
}
html body .app-shell #screen-invitations td { color: var(--fg-text); background: var(--fg-card); }
html body .app-shell #screen-invitations td :is(strong, span:not(.badge)) { color: inherit; }
html body .app-shell #screen-invitations .invitation-status {
  color: var(--fg-muted); background: var(--fg-hover); border-color: var(--fg-line);
  font: var(--fg-weight-medium) 12px/1.2 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-invitations .invitation-status.pending {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 42%, var(--fg-line));
}
html body .app-shell #screen-invitations .invitation-status.accepted {
  color: var(--fg-green); background: color-mix(in srgb, var(--fg-green) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-green) 42%, var(--fg-line));
}
html body .app-shell #screen-invitations .invitation-status.rejected {
  color: var(--fg-red); background: color-mix(in srgb, var(--fg-red) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-red) 42%, var(--fg-line));
}

html body .app-shell #screen-risk .screen-heading { align-items: end; }
html body .app-shell #screen-risk .risk-company-picker { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: min(100%, 540px); }
html body .app-shell #screen-risk .risk-company-picker label { flex: none; color: var(--fg-muted); font-size: var(--fg-font-small); font-weight: var(--fg-weight-medium); }
html body .app-shell #screen-risk .risk-company-picker .fg-select { flex: 1 1 320px; }
html body .app-shell #screen-risk .risk-company-picker .fg-select-trigger { width: 100%; }
html body .app-shell #screen-risk :is(.panel, .detail-kpi-card, .post-onboarding-panel, .post-onboarding-steps article) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line); box-shadow: none;
}
html body .app-shell #screen-risk :is(.detail-kpi-card strong, .panel-head h2, .notes-panel h2, .side-line strong) { color: var(--fg-text); }
html body .app-shell #screen-risk :is(.detail-kpi-card > span, .detail-kpi-card small, .side-line span) { color: var(--fg-muted); }
html body .app-shell #screen-risk .company-detail-side { border-color: var(--fg-line); }
html body .app-shell #screen-risk .notes-panel { border-radius: var(--fg-radius); }
html body .app-shell #screen-risk .note-form :is(input, textarea) {
  min-height: 44px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px;
  font: var(--fg-weight-regular) var(--fg-font-body)/1.4 Inter, system-ui, sans-serif;
}
html body .app-shell #screen-risk .note-form :is(input, textarea)::placeholder { color: var(--fg-muted); opacity: 1; }
html body .app-shell #screen-risk .note-form textarea { min-height: 92px; }
html body .app-shell #screen-risk .note-form .primary-button { width: max-content; min-width: 160px; justify-self: end; }

/* Risk Center, Credit Application and Trade Registry use the same Fingoru
   control/surface contract instead of their fixed-black legacy palette. */
html body .app-shell :is(#screen-credit-application, #screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session),
html body .app-shell .credit-risk-workspace {
  color: var(--fg-text); font-family: Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell .credit-risk-workspace :is(
  .credit-risk-subject-card, .credit-risk-score-banner, .credit-risk-chart-card,
  .credit-risk-section-score-card, .credit-risk-table-card, .credit-risk-list-card,
  .credit-risk-special-card, .credit-risk-commentary-card, .credit-risk-access-state,
  .credit-risk-kpi-grid article
) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell .credit-risk-workspace :is(
  .credit-risk-page-head h2, .credit-risk-subject-copy h3, .credit-risk-score-copy h3,
  .credit-risk-section-head h3, .credit-risk-commentary-head h3, .credit-risk-kpi-grid strong,
  .credit-risk-special-value strong, .credit-risk-horizontal-chart strong,
  .credit-risk-section-scores strong, .credit-risk-source-grid strong,
  .credit-risk-list-card li strong, .credit-risk-empty-detail strong
) { color: var(--fg-text); }
html body .app-shell .credit-risk-workspace :is(
  .credit-risk-page-head p, .credit-risk-subject-copy p, .credit-risk-score-copy p,
  .credit-risk-section-head p, .credit-risk-commentary-head p, .credit-risk-kpi-grid span,
  .credit-risk-kpi-grid small, .credit-risk-special-value span, .credit-risk-special-value small,
  .credit-risk-horizontal-chart span, .credit-risk-section-scores span,
  .credit-risk-section-scores small, .credit-risk-source-grid span,
  .credit-risk-list-card li small, .credit-risk-empty-detail, .credit-risk-empty-detail p,
  .credit-risk-chart-note, .credit-risk-disclaimer
) { color: var(--fg-muted); }
html body .app-shell .credit-risk-workspace .credit-risk-page-head { border-color: var(--fg-line); }
html body .app-shell .credit-risk-workspace .credit-risk-page-actions :is(.primary-button, .ghost-button) {
  min-height: 44px; height: auto; padding: 9px 16px; border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-strong) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell .credit-risk-workspace .credit-risk-page-actions .primary-button {
  color: var(--fg-facu-text); background: var(--fg-facu-bg); border: 1px solid transparent;
}
html body .app-shell .credit-risk-workspace .credit-risk-page-actions .ghost-button {
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line);
}
html body .app-shell .credit-risk-workspace .credit-risk-page-actions .ghost-button:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 50%, var(--fg-line));
}
html body .app-shell .credit-risk-workspace .credit-risk-mode {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line);
}
html body .app-shell .credit-risk-workspace .credit-risk-mode button { color: var(--fg-muted); background: transparent; }
html body .app-shell .credit-risk-workspace .credit-risk-mode button.is-active { color: var(--fg-facu-text); background: var(--fg-facu-bg); }
html body .app-shell .credit-risk-workspace :is(.credit-risk-progress, .credit-risk-horizontal-chart i, .credit-risk-section-scores i) {
  background: var(--fg-track); border: 0;
}
html body .app-shell .credit-risk-workspace .credit-risk-progress,
html body .app-shell .credit-risk-workspace .credit-risk-section-scores i { height: 8px; }
html body .app-shell .credit-risk-workspace .credit-risk-horizontal-chart i { height: 10px; border-radius: 999px; }
html body .app-shell .credit-risk-workspace :is(.credit-risk-progress b, .credit-risk-section-scores b) { background: var(--fg-gold); }
html body .app-shell .credit-risk-workspace .credit-risk-horizontal-chart b.limit { background: var(--fg-gold); }
html body .app-shell .credit-risk-workspace .credit-risk-horizontal-chart b.risk { background: color-mix(in srgb, var(--fg-red) 72%, var(--fg-gold)); }
html body .app-shell .credit-risk-workspace .credit-risk-empty-detail {
  color: var(--fg-muted); background: var(--fg-hover); border-color: var(--fg-line);
}
html body .app-shell .credit-risk-workspace .credit-risk-chart-card > .credit-risk-empty-detail.compact {
  min-height: 150px; margin-inline: 0; border: 1px dashed var(--fg-line); border-radius: 8px;
}
html body .app-shell .credit-risk-workspace .credit-risk-commentary-grid section,
html body .app-shell .credit-risk-workspace .credit-risk-source-grid > div,
html body .app-shell .credit-risk-workspace .credit-risk-subject-skeleton {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line);
}
html body .app-shell .credit-risk-workspace .credit-risk-list-card li { border-color: var(--fg-line); }
html body .app-shell .credit-risk-workspace .credit-risk-table-wrap :is(th, td) { color: var(--fg-text); border-color: var(--fg-line); }
html body .app-shell .credit-risk-workspace .credit-risk-table-wrap th { color: var(--fg-muted); background: var(--fg-hover); }
html body .app-shell .credit-risk-workspace .credit-risk-table-wrap td { background: var(--fg-card); }
html body .app-shell .credit-risk-workspace .credit-risk-bucket-chart {
  border-color: var(--fg-line); background-image: linear-gradient(to bottom, var(--fg-line) 1px, transparent 1px);
}
html body .app-shell .credit-risk-workspace .credit-risk-bureau-status {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 7%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 32%, var(--fg-line));
}
html body .app-shell .credit-risk-workspace .credit-risk-score-copy span,
html body .app-shell .credit-risk-workspace .credit-risk-subject-icon,
html body .app-shell .credit-risk-workspace .credit-risk-score-icon {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 9%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 32%, var(--fg-line));
}

html body .app-shell #screen-credit-application .screen-heading h1,
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .audit-dashboard-head h1 {
  color: var(--fg-text); font: var(--fg-weight-strong) 28px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell #screen-credit-application :is(.screen-meta, .panel-head span, .credit-calculator-form label),
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) :is(.screen-meta, .panel-head span, small) {
  color: var(--fg-muted);
}
html body .app-shell #screen-credit-application :is(.panel, .credit-application-status, .credit-application-hero, .credit-application-metrics article, .credit-payment-cards article, .credit-bank-card, .credit-application-improvements article) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-credit-application :is(.panel-head h2, .credit-application-status h2, .credit-application-hero h2, .credit-application-metrics strong, .credit-payment-cards strong, .credit-bank-card strong) { color: var(--fg-text); }
html body .app-shell #screen-credit-application :is(.credit-application-actions, .credit-calculator-form) .fg-select { min-width: 180px; }
html body .app-shell #screen-credit-application .credit-application-actions .fg-select { min-width: min(100%, 300px); }
html body .app-shell #screen-credit-application :is(.credit-application-actions, .credit-calculator-form) .fg-select-trigger { width: 100%; }
html body .app-shell #screen-credit-application .credit-calculator-form input {
  min-height: 44px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px; font: inherit;
}
html body .app-shell #screen-credit-application .credit-bank-card:is(:hover, .is-active, :focus-visible) {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 52%, var(--fg-line));
}
html body .app-shell #screen-credit-application .audit-table-wrap { border-color: var(--fg-line); background: var(--fg-card); }
html body .app-shell #screen-credit-application .risk-table :is(th, td) { color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line); }
html body .app-shell #screen-credit-application .risk-table th { color: var(--fg-muted); background: var(--fg-hover); }

html body .app-shell :is(#screen-credit-application, #screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) :is(.primary-button, .ghost-button) {
  min-height: 44px; height: auto; padding: 9px 16px; border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-strong) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell :is(#screen-credit-application, #screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .primary-button {
  color: var(--fg-facu-text); background: var(--fg-facu-bg); border: 1px solid transparent;
}
html body .app-shell :is(#screen-credit-application, #screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .ghost-button {
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line);
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .audit-dashboard-head {
  color: var(--fg-text); background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) :is(.audit-dashboard-section, .audit-scope-card, .audit-kpi-card, .session-status-card, .manual-login-steps li, .trade-registry-login-form) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none; backdrop-filter: none;
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .trade-registry-kpis .audit-kpi-card { background: var(--fg-card); }
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) :is(.panel-head h2, .audit-kpi-card strong, .session-status-card strong, .manual-login-steps strong) { color: var(--fg-text); }
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) :is(.audit-table-wrap, .company-table-footer) {
  color: var(--fg-muted); background: var(--fg-card); border-color: var(--fg-line);
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .risk-table :is(th, td) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .risk-table th { color: var(--fg-muted); background: var(--fg-hover); }
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .trade-registry-form input {
  min-height: 44px; color: var(--fg-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 8px; font: inherit;
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .status-pill.muted {
  color: var(--fg-muted); background: var(--fg-hover); border-color: var(--fg-line);
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .row-menu-button {
  width: 44px; min-height: 40px; color: var(--fg-text); background: transparent; border: 1px solid transparent; border-radius: 8px;
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .row-actions-cell.is-open .row-menu-button {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 12%, var(--fg-card)); border-color: var(--fg-line);
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .row-action-menu {
  z-index: 20; min-width: 220px; padding: 6px; color: var(--fg-text); background: var(--fg-card);
  border: 1px solid var(--fg-line); border-radius: 8px; box-shadow: 0 12px 30px rgb(0 0 0 / .2);
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .row-action-menu button {
  min-height: 40px; padding: 9px 10px; color: var(--fg-text); background: transparent; border: 0; border-radius: 6px; text-align: left;
}
html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .row-action-menu button:is(:hover, :focus-visible) { background: var(--fg-hover); }

/* Alerts and every page reachable from the Reports catalog share the same
   surfaces and controls. Keep this block after the legacy page styles. */
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) {
  color: var(--fg-text); font-family: Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) :is(.screen-heading h1, .panel-head h2, .report-tile strong, .audit-report-head h1, .audit-report-kpi strong, .audit-detail-card h2, .audit-dashboard-head h1, .audit-section-head h2, .audit-kpi strong, .heatmap-report-head h1, .heatmap-main-panel h2, .heatmap-side-card > strong) {
  color: var(--fg-text); font-family: Inter, system-ui, sans-serif; letter-spacing: 0;
}
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) :is(.screen-meta, .muted, .panel-head span, label, small, p) { color: var(--fg-muted); }
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) :is(.primary-button, .ghost-button, .view-all-logs-button, .link-button, .action-dots) {
  min-height: 42px; height: auto; padding: 8px 14px; border-radius: 8px; box-shadow: none;
  font: var(--fg-weight-medium) var(--fg-font-body)/1.35 Inter, system-ui, sans-serif;
}
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) :is(.ghost-button, .view-all-logs-button, .link-button, .action-dots) {
  color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line);
}
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) :is(.ghost-button, .view-all-logs-button, .link-button, .action-dots):is(:hover, :focus-visible) {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 52%, var(--fg-line));
}
html body .app-shell :is(
  #screen-alerts, #screen-alert-detail, #screen-reports, #screen-cashflow,
  #screen-audit-category-report, #screen-audit-noncompliance-report,
  #screen-audit-detail, #screen-audit-dashboard, #screen-risk-heatmap-report
) .primary-button {
  color: var(--fg-facu-text); background: var(--fg-facu-bg); border: 1px solid transparent;
  font-weight: var(--fg-weight-strong);
}

html body .app-shell #screen-alerts .alert-filter-bar {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-alerts .alert-filter-bar label { color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-alerts .alert-filter-bar :is(input, select) {
  min-height: 42px; color: var(--fg-text); background: var(--fg-hover);
  border-color: var(--fg-line); border-radius: 8px; font: inherit;
}
html body .app-shell #screen-alerts .alert-filter-bar input::placeholder { color: var(--fg-muted); opacity: 1; }
html body .app-shell #screen-alerts .alert-filter-bar .fg-select,
html body .app-shell #screen-alerts .alert-filter-bar .fg-select-trigger { width: 100%; }
html body .app-shell #screen-alerts .alert-card,
html body .app-shell #screen-alert-detail :is(.panel, .alert-detail-facts div) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-alert-detail .alert-detail-facts div { background: var(--fg-hover); border-radius: 8px; }
html body .app-shell #screen-alert-detail :is(.alert-detail-description, .alert-detail-facts dt) { color: var(--fg-muted); }

html body .app-shell #screen-reports .report-tile {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none; font-family: inherit;
}
html body .app-shell #screen-reports .report-tile:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--fg-gold) 8%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 52%, var(--fg-line)); transform: translateY(-1px);
}
html body .app-shell #screen-reports .report-tile.featured {
  background: linear-gradient(135deg, color-mix(in srgb, var(--fg-gold) 10%, transparent), transparent 48%), var(--fg-card);
}
html body .app-shell #screen-reports .report-tile.is-placeholder small { color: var(--fg-muted); background: var(--fg-hover); border-color: var(--fg-line); }

html body .app-shell #screen-cashflow :is(.panel, .stack-item) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-cashflow .cashflow-table-filters :is(.fg-select, .fg-select-trigger) { width: min(230px, 100%); }
html body .app-shell #screen-cashflow .table-wrap :is(th, td) { color: var(--fg-text); border-color: var(--fg-line); }
html body .app-shell #screen-cashflow .table-wrap th { color: var(--fg-muted); background: var(--fg-hover); }

html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report, #screen-audit-detail) :is(
  .audit-report-head, .audit-report-panel, .audit-report-kpi, .audit-detail-card, .audit-finding-detail
) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report, #screen-audit-detail) :is(
  .audit-report-scope, .audit-report-control-list article, .audit-detail-list div,
  .audit-inline-value-grid div, .audit-evidence-data, .audit-finding-detail.is-empty
) {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); box-shadow: none;
}
html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report, #screen-audit-detail) :is(
  .audit-report-summary, .audit-report-scope span, .audit-report-scope small,
  .audit-report-control-list span, .audit-detail-card p, .audit-detail-list dt,
  .audit-detail-evidence-row p, .audit-inline-value-grid small, .audit-inline-value-grid span
) { color: var(--fg-muted); }
html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report, #screen-audit-detail) :is(
  .audit-report-table th, .audit-report-table td, .audit-evidence-data th, .audit-evidence-data td,
  .audit-detail-evidence-row
) { color: var(--fg-text); border-color: var(--fg-line); }
html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report, #screen-audit-detail) :is(.audit-report-table th, .audit-evidence-data th) {
  color: var(--fg-muted); background: var(--fg-hover);
}
html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report, #screen-audit-detail) .audit-evidence-data--ledger :is(td, code) { color: var(--fg-text); }
html body .app-shell #screen-audit-noncompliance-report .noncompliance-filter-row :is(input, select) {
  min-height: 42px; color: var(--fg-text); background: var(--fg-hover);
  border-color: var(--fg-line); border-radius: 8px; color-scheme: dark;
}
html body .app-shell #screen-audit-noncompliance-report .noncompliance-filter-row {
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .7fr)) repeat(2, minmax(128px, .55fr)) auto;
}
html body .app-shell #screen-audit-noncompliance-report :is(.noncompliance-filter-row > *, .noncompliance-tags) { min-width: 0; }
html[data-theme="light"] body .app-shell #screen-audit-noncompliance-report .noncompliance-filter-row input { color-scheme: light; }
html body .app-shell #screen-audit-noncompliance-report .noncompliance-filter-row :is(.fg-select, .fg-select-trigger) { width: 100%; }
html body .app-shell #screen-audit-noncompliance-report .noncompliance-tag {
  color: var(--fg-muted); background: var(--fg-hover); border-color: var(--fg-line);
}
html body .app-shell #screen-audit-noncompliance-report .noncompliance-tag.is-active {
  color: var(--fg-gold); background: color-mix(in srgb, var(--fg-gold) 10%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 52%, var(--fg-line));
}

html body .app-shell #screen-audit-dashboard :is(
  .audit-dashboard-head, .audit-scope-card, .audit-kpi, .audit-dashboard-section,
  .audit-priority-section, .audit-chart-card, .audit-compliance-card
) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none; backdrop-filter: none;
}
html body .app-shell #screen-audit-dashboard :is(.audit-signal-card, .audit-priority-alert, .audit-range-toggle) {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); box-shadow: none;
}
html body .app-shell #screen-audit-dashboard .audit-range-toggle button { color: var(--fg-muted); background: transparent; }
html body .app-shell #screen-audit-dashboard .audit-range-toggle button.is-active {
  color: var(--fg-text); background: var(--fg-card); border-color: color-mix(in srgb, var(--fg-gold) 45%, var(--fg-line));
}
html body .app-shell #screen-audit-dashboard :is(.audit-mini-progress, .audit-compliance-row i, .audit-html-grid) { background: var(--fg-track); border-color: var(--fg-line); }
html body .app-shell #screen-audit-dashboard :is(.audit-grid-line, .grid-line) { stroke: var(--fg-line); }
html body .app-shell #screen-audit-dashboard :is(.audit-html-bar.standard, .legend-gray) { background: var(--fg-track); }
html body .app-shell #screen-audit-dashboard :is(.audit-bar-standard, .bar-standard) { fill: var(--fg-track); }
html body .app-shell #screen-audit-dashboard :is(.audit-html-point, .audit-chart-point, .chart-point) { stroke: var(--fg-card); }
html body .app-shell #screen-audit-dashboard .skeleton-line {
  background: linear-gradient(90deg, var(--fg-hover), var(--fg-track), var(--fg-hover)); background-size: 220% 100%;
}

html body .app-shell #screen-risk-heatmap-report :is(.heatmap-report-head, .heatmap-toolbar, .heatmap-layout, .heatmap-detail-panel) {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-risk-heatmap-report :is(.heatmap-side-card, .heatmap-main-panel) {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line);
  border-radius: var(--fg-radius); box-shadow: none;
}
html body .app-shell #screen-risk-heatmap-report .heatmap-search {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); border-radius: 8px;
}
html body .app-shell #screen-risk-heatmap-report .heatmap-search input { color: var(--fg-text); font: inherit; }
html body .app-shell #screen-risk-heatmap-report .heatmap-search input::placeholder { color: var(--fg-muted); opacity: 1; }
html body .app-shell #screen-risk-heatmap-report .heatmap-toolbar label { color: var(--fg-muted); }
html body .app-shell #screen-risk-heatmap-report .heatmap-toolbar .fg-select { min-width: 150px; }
html body .app-shell #screen-risk-heatmap-report .heatmap-toolbar .fg-select-trigger { width: 100%; }
html body .app-shell #screen-risk-heatmap-report .segmented-control {
  color: var(--fg-text); background: var(--fg-hover); border-color: var(--fg-line); border-radius: 8px;
}
html body .app-shell #screen-risk-heatmap-report .segmented-control button { color: var(--fg-muted); background: transparent; }
html body .app-shell #screen-risk-heatmap-report .segmented-control button.is-active {
  color: var(--fg-text); background: color-mix(in srgb, var(--fg-gold) 12%, var(--fg-card));
  border-color: color-mix(in srgb, var(--fg-gold) 52%, var(--fg-line));
}
html body .app-shell #screen-risk-heatmap-report .heatmap-risk-row i { background: var(--fg-track); }
html body .app-shell #screen-risk-heatmap-report .heatmap-cell {
  color: var(--fg-text); border-color: transparent; font-family: inherit;
}
html body .app-shell #screen-risk-heatmap-report .heatmap-cell span { color: var(--fg-muted); }
html body .app-shell #screen-risk-heatmap-report .heatmap-cell.critical { background: color-mix(in srgb, var(--fg-red) 23%, var(--fg-card)); }
html body .app-shell #screen-risk-heatmap-report .heatmap-cell.watch { background: color-mix(in srgb, var(--fg-gold) 20%, var(--fg-card)); }
html body .app-shell #screen-risk-heatmap-report .heatmap-cell.stable { background: color-mix(in srgb, var(--fg-green) 17%, var(--fg-card)); }
html body .app-shell #screen-risk-heatmap-report .heatmap-cell.empty { background: color-mix(in srgb, var(--fg-muted) 10%, var(--fg-card)); }
html body .app-shell #screen-risk-heatmap-report .heatmap-cell.is-selected { border-color: var(--fg-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg-gold) 22%, transparent); }
html body .app-shell #screen-risk-heatmap-report :is(.heatmap-x-axis, .heatmap-side-card > span, .heatmap-company-cell small, .risk-driver-chip) { color: var(--fg-muted); }
html body .app-shell #screen-risk-heatmap-report :is(.heatmap-detail-table th, .heatmap-detail-table td) { color: var(--fg-text); border-color: var(--fg-line); }
html body .app-shell #screen-risk-heatmap-report .heatmap-detail-table th { color: var(--fg-muted); background: var(--fg-hover); }
html body .app-shell #screen-risk-heatmap-report input[type="checkbox"] {
  appearance: none; width: 18px; height: 18px; display: inline-grid; place-content: center;
  margin: 0; color: var(--fg-facu-text); background: var(--fg-hover);
  border: 1px solid var(--fg-line); border-radius: 4px;
}
html body .app-shell #screen-risk-heatmap-report input[type="checkbox"]::after {
  content: ""; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0); transition: transform .12s ease;
}
html body .app-shell #screen-risk-heatmap-report input[type="checkbox"]:checked { background: var(--fg-facu-bg); border-color: transparent; }
html body .app-shell #screen-risk-heatmap-report input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
html body .chart-tooltip {
  color: var(--fg-text); background: var(--fg-card); border-color: var(--fg-line);
  font-family: Inter, system-ui, sans-serif; font-weight: var(--fg-weight-medium);
}
@media (min-width: 1380px) {
  html body .app-shell #screen-companies :is(.company-list-panel, .company-table-wrap) { overflow: visible; }
}
@media (max-width: 1550px) {
  html body .app-shell #screen-dashboard .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #screen-v2-command .ceo-cockpit-screen .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #screen-v2-command .ceo-cockpit-screen > .sidebar-layout { grid-template-columns: 1fr; }
  html body .app-shell #screen-companies .company-list-toolbar { flex-direction: column; align-items: stretch; }
  html body .app-shell #screen-companies .company-filter-row { grid-template-columns: minmax(230px, 1.3fr) repeat(2, minmax(180px, 1fr)); }
  html body .app-shell #screen-companies .company-actions { align-self: stretch; }
}
@media (max-width: 1250px) {
  html body .app-shell #screen-dashboard .onboarding-panel { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  html body .app-shell #screen-companies .company-list-toolbar { flex-direction: column; align-items: stretch; }
  html body .app-shell #screen-companies .company-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .app-shell #screen-companies .company-actions { align-self: stretch; }
}
@media (max-width: 820px) {
  html body .app-shell { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell .workspace { padding: 0 14px 28px; overflow-x: clip; }
  html body .app-shell .sidebar { padding-top: 14px; }
  html body .app-shell .topbar { flex-wrap: wrap; gap: 10px; }
  html body .app-shell .topbar .search-wrap { display: none; width: 100%; }
  html body .app-shell .topbar.search-open .search-wrap { display: flex; }
  html body .app-shell .topbar-actions { gap: 8px; }
  html body .app-shell .fg-theme-switch { margin-left: 0; }
  html body .app-shell #screen-dashboard .dashboard-heading { align-items: stretch; }
  html body .app-shell #screen-dashboard .dashboard-actions { flex-direction: row; align-items: center; }
  html body .app-shell #screen-dashboard .dashboard-actions .fg-select { flex: 1 1 220px; }
  html body .app-shell #screen-dashboard .dashboard-actions .fg-select-trigger { width: 100%; min-width: 0; }
  html body .app-shell #screen-dashboard .export-button { flex: 1 1 150px; }
  html body .app-shell #screen-portfolio :is(.portfolio-heading, .portfolio-actions, .portfolio-scenario-bar) { min-width: 0; max-width: 100%; align-items: stretch; }
  html body .app-shell #screen-portfolio .portfolio-actions { width: 100%; justify-content: flex-start; }
  html body .app-shell #screen-portfolio .portfolio-scenario-bar > :is(.segmented-control, .scenario-adjustments) { width: 100%; }
  html body .app-shell #screen-portfolio .segmented-control { min-width: 0; max-width: 100%; overflow-x: auto; }
  html body .app-shell #screen-portfolio .segmented-control button { flex: 1 0 max-content; }
  html body .app-shell #screen-companies .company-list-heading { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-companies .company-heading-actions { width: 100%; justify-content: stretch; }
  html body .app-shell #screen-companies .company-heading-actions > * { flex: 1 1 150px; }
  html body .app-shell #screen-companies .company-filter-row { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-companies .company-actions { justify-content: space-between; }
  html body .app-shell #screen-companies .company-selection-toolbar { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-companies .selected-count { min-height: 34px; grid-auto-flow: column; justify-content: start; place-items: center start; }
  html body .app-shell #screen-companies .company-selection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .app-shell #screen-companies .company-selection-actions .table-action-button { width: 100%; min-width: 0; white-space: normal; }
  html body .app-shell #screen-companies .company-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  html body .app-shell #screen-companies .company-table-footer { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  html body .app-shell #screen-companies .pagination { max-width: 100%; overflow-x: auto; }
  html body .app-shell #screen-invitations .screen-heading { align-items: stretch; }
  html body .app-shell #screen-invitations .screen-heading > .fg-select,
  html body .app-shell #screen-invitations .screen-heading > .fg-select .fg-select-trigger { width: 100%; }
  html body .app-shell #screen-risk .screen-heading { align-items: stretch; }
  html body .app-shell #screen-risk .risk-company-picker { min-width: 0; width: 100%; align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-risk .risk-company-picker .fg-select { flex-basis: auto; width: 100%; }
  html body .app-shell #screen-risk .note-form .primary-button { width: 100%; }
  html body .app-shell .credit-risk-workspace .credit-risk-page-head { align-items: stretch; flex-direction: column; }
  html body .app-shell .credit-risk-workspace .credit-risk-page-actions { justify-content: flex-start; }
  html body .app-shell #screen-credit-application .screen-heading { align-items: stretch; }
  html body .app-shell #screen-credit-application .credit-application-actions { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-credit-application .credit-application-actions :is(.fg-select, button) { width: 100%; min-width: 0; }
  html body .app-shell #screen-credit-application .credit-calculator-form { align-items: stretch; }
  html body .app-shell #screen-credit-application .credit-calculator-form > * { flex: 1 1 220px; }
  html body .app-shell :is(#screen-trade-registry, #screen-trade-registry-add, #screen-trade-registry-session) .audit-dashboard-head { align-items: stretch; }
  html body .app-shell #screen-alerts .alert-filter-bar { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-alerts .alert-filter-bar > :is(label, button) { width: 100%; min-width: 0; }
  html body .app-shell #screen-alert-detail .alert-detail-layout,
  html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report) .audit-report-head,
  html body .app-shell #screen-audit-category-report .audit-report-layout,
  html body .app-shell #screen-audit-detail :is(.audit-report-head, .audit-detail-grid),
  html body .app-shell #screen-audit-dashboard :is(.audit-cockpit-grid, .audit-chart-grid, .audit-trend-section .audit-chart-grid),
  html body .app-shell #screen-risk-heatmap-report .heatmap-layout { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report) .audit-report-head-actions {
    width: 100%; grid-template-columns: minmax(0, 1fr); justify-self: stretch;
  }
  html body .app-shell :is(#screen-audit-category-report, #screen-audit-noncompliance-report) .audit-report-head-actions > * { width: 100%; }
  html body .app-shell #screen-audit-noncompliance-report .noncompliance-filter-row { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-audit-noncompliance-report .noncompliance-filter-row > * { width: 100%; min-width: 0; }
  html body .app-shell #screen-audit-dashboard .audit-dashboard-head { flex-direction: column; }
  html body .app-shell #screen-audit-dashboard .audit-scope-card { min-width: 0; }
  html body .app-shell #screen-risk-heatmap-report :is(.heatmap-report-head, .heatmap-toolbar) { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-risk-heatmap-report :is(.heatmap-head-actions, .heatmap-toolbar-actions) { width: 100%; justify-content: flex-start; }
  html body .app-shell #screen-risk-heatmap-report .heatmap-head-actions > *,
  html body .app-shell #screen-risk-heatmap-report .heatmap-toolbar-actions > * { flex: 1 1 180px; }
  html body .app-shell #screen-risk-heatmap-report .heatmap-search { width: 100%; }
  html body .app-shell #screen-risk-heatmap-report .heatmap-toolbar label { width: 100%; align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-risk-heatmap-report .heatmap-toolbar :is(.fg-select, .fg-select-trigger, .segmented-control) { width: 100%; }
  html body .app-shell #screen-risk-heatmap-report .heatmap-axis-wrap { overflow-x: auto; padding-bottom: 6px; }
  html body .app-shell #screen-risk-heatmap-report :is(.heatmap-grid, .heatmap-x-axis) { min-width: 620px; }
  html body:has(#screen-v2-command.is-active .ceo-cockpit-screen) #pageTitle { font-size: 36px; }
  html body #screen-v2-command .ceo-cockpit-screen .ceo-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  html body .app-shell #screen-dashboard .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-dashboard .dashboard-actions { flex-direction: column; }
  html body .app-shell #screen-dashboard .dashboard-actions > * { width: 100%; }
  html body .app-shell #screen-dashboard .dashboard-actions :is(.fg-select, .export-button) { flex: 0 0 auto; }
  html body .app-shell #screen-dashboard .onboarding-panel { padding: 14px; }
  html body .app-shell #screen-dashboard .panel { padding: 14px; }
  html body .app-shell #screen-dashboard .risky-table-panel { padding: 0; }
  html body .app-shell #screen-portfolio #portfolioRange {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible;
  }
  html body .app-shell #screen-portfolio #portfolioRange button { min-width: 0; padding-inline: 6px; white-space: normal; }
  html body .app-shell #screen-portfolio #portfolioScenario {
    display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; overflow: visible;
  }
  html body .app-shell #screen-portfolio #portfolioScenario button { width: 100%; min-width: 0; white-space: normal; }
  html body .app-shell #screen-portfolio .portfolio-risk-grid .panel-head { flex-wrap: wrap; }
  html body .app-shell #screen-portfolio .portfolio-risk-grid .panel-head .fg-select,
  html body .app-shell #screen-portfolio .portfolio-risk-grid .panel-head .fg-select-trigger { width: 100%; }
  html body .app-shell .credit-risk-workspace .credit-risk-page-actions > * { width: 100%; }
  html body .app-shell #screen-credit-application .credit-calculator-form { flex-direction: column; }
  html body .app-shell #screen-credit-application .credit-calculator-form > * { width: 100%; min-width: 0; flex-basis: auto; }
  html body #screen-v2-command .ceo-cockpit-screen .grid.four { grid-template-columns: minmax(0, 1fr); }
  html body #screen-v2-command .ceo-cockpit-screen .card-header { flex-wrap: wrap; }
  html body #screen-v2-command .ceo-cockpit-screen .kpi { min-height: 156px; }
  html body #screen-v2-command .ceo-cockpit-screen .card-body { padding: 14px; }
  html body #screen-v2-command .ceo-cockpit-screen .chart-svg { min-width: 480px; }
  html body #screen-v2-command .ceo-cockpit-screen .ceo-chart-scroll { overflow-x: auto; }
}

/* Customer Agent P0 uses the shared Fingörü tokens in every language/theme combination. */
html body .app-shell #screen-customer-agent .customer-agent-page { display: grid; gap: 18px; background: var(--fg-bg); }
html body .app-shell #screen-customer-agent .customer-agent-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
html body .app-shell #screen-customer-agent .customer-agent-head h1 { margin: 4px 0; color: var(--fg-text); font-size: var(--fg-font-section); }
html body .app-shell #screen-customer-agent .customer-agent-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
html body .app-shell #screen-customer-agent .customer-agent-head-actions select {
  min-width: 280px; min-height: 44px; padding: 0 38px 0 14px; color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: 8px;
}
html body .app-shell #screen-customer-agent .customer-agent-head-actions option { color: var(--fg-text); background: var(--fg-card); }
html body .app-shell #screen-customer-agent .customer-agent-live { min-height: 18px; color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-customer-agent .customer-agent-mount { display: grid; gap: 18px; }
html body .app-shell #screen-customer-agent .customer-agent-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html body .app-shell #screen-customer-agent .customer-agent-summary article {
  min-height: 118px; display: grid; align-content: center; gap: 10px; padding: 18px; color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius);
}
html body .app-shell #screen-customer-agent .customer-agent-summary span { color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-customer-agent .customer-agent-summary strong { color: var(--fg-text); font-size: 24px; overflow-wrap: anywhere; }
html body .app-shell #screen-customer-agent .customer-agent-status { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--fg-muted); }
html body .app-shell #screen-customer-agent .customer-agent-capacity { display: grid; gap: 14px; padding: 18px; color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius); }
html body .app-shell #screen-customer-agent .customer-agent-capacity > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
html body .app-shell #screen-customer-agent .customer-agent-capacity h2 { margin: 4px 0 0; color: var(--fg-text); font-size: var(--fg-font-section); }
html body .app-shell #screen-customer-agent .customer-agent-capacity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body .app-shell #screen-customer-agent .customer-agent-capacity-grid article { display: grid; gap: 6px; min-width: 0; padding: 13px; background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 9px; }
html body .app-shell #screen-customer-agent .customer-agent-capacity-grid span,
html body .app-shell #screen-customer-agent .customer-agent-capacity p,
html body .app-shell #screen-customer-agent .customer-agent-capacity-missing { margin: 0; color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-customer-agent .customer-agent-capacity-grid strong { color: var(--fg-text); font-size: 18px; overflow-wrap: anywhere; }
html body .app-shell #screen-customer-agent .customer-agent-capacity-missing { display: grid; gap: 4px; padding: 11px; border-left: 3px solid var(--fg-gold); }
html body .app-shell #screen-customer-agent .customer-agent-capacity-missing strong { color: var(--fg-text); }
html body .app-shell #screen-customer-agent .customer-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body .app-shell #screen-customer-agent .customer-agent-card {
  display: grid; gap: 12px; min-width: 0; padding: 18px; color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: var(--fg-radius);
}
html body .app-shell #screen-customer-agent .customer-agent-card.is-selected { border-color: var(--fg-gold); }
html body .app-shell #screen-customer-agent .customer-agent-card > header,
html body .app-shell #screen-customer-agent .customer-agent-card > footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
html body .app-shell #screen-customer-agent .customer-agent-card h2 { margin: 0; color: var(--fg-text); font-size: 20px; }
html body .app-shell #screen-customer-agent .customer-agent-card small,
html body .app-shell #screen-customer-agent .customer-agent-card footer { color: var(--fg-muted); }
html body .app-shell #screen-customer-agent .customer-agent-select { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-text); }
html body .app-shell #screen-customer-agent .customer-agent-select input { accent-color: var(--fg-gold); }
html body .app-shell #screen-customer-agent .customer-agent-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
html body .app-shell #screen-customer-agent .customer-agent-metrics div { min-width: 0; padding: 10px; background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 8px; }
html body .app-shell #screen-customer-agent .customer-agent-metrics dt { color: var(--fg-muted); font-size: 12px; }
html body .app-shell #screen-customer-agent .customer-agent-metrics dd { margin: 5px 0 0; color: var(--fg-text); font-weight: var(--fg-weight-strong); overflow-wrap: anywhere; }
html body .app-shell #screen-customer-agent .customer-agent-aging { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; color: var(--fg-muted); font-size: 12px; }
html body .app-shell #screen-customer-agent .customer-agent-aging span { padding: 7px; background: var(--fg-hover); border-radius: 7px; }
html body .app-shell #screen-customer-agent .customer-agent-flags { display: flex; flex-wrap: wrap; gap: 7px; min-height: 26px; }
html body .app-shell #screen-customer-agent .customer-agent-sources { color: var(--fg-muted); border-top: 1px solid var(--fg-line); padding-top: 10px; }
html body .app-shell #screen-customer-agent .customer-agent-sources summary { cursor: pointer; color: var(--fg-text); }
html body .app-shell #screen-customer-agent .customer-agent-sources :is(span, code) { display: block; margin-top: 6px; color: var(--fg-muted); overflow-wrap: anywhere; }
html body .app-shell #screen-customer-agent .customer-agent-evidence-result { display: grid; gap: 5px; margin-top: 9px; padding: 10px; background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 8px; }
html body .app-shell #screen-customer-agent .customer-agent-evidence-result strong { color: var(--fg-text); }
html body .app-shell #screen-customer-agent .customer-agent-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; color: var(--fg-text); background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 999px; font-size: 12px; }
html body .app-shell #screen-customer-agent .customer-agent-chip.is-warning { color: var(--fg-gold); border-color: var(--fg-gold); }
html body .app-shell #screen-customer-agent .customer-agent-chip.is-danger { color: var(--fg-red); border-color: var(--fg-red); }
html body .app-shell #screen-customer-agent .customer-agent-muted { color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-customer-agent .customer-agent-empty { grid-column: 1 / -1; display: grid; justify-items: start; gap: 10px; padding: 28px; color: var(--fg-muted); background: var(--fg-card); border: 1px dashed var(--fg-line); border-radius: var(--fg-radius); }
html body .app-shell #screen-customer-agent .customer-agent-empty strong { color: var(--fg-text); font-size: 20px; }
html body .app-shell #screen-customer-agent .commercial-credit-workspace {
  display: grid; gap: 16px; padding: 20px; color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-gold); border-radius: var(--fg-radius);
}
html body .app-shell #screen-customer-agent .commercial-credit-head,
html body .app-shell #screen-customer-agent .commercial-credit-governance > header,
html body .app-shell #screen-customer-agent .commercial-credit-facility > header,
html body .app-shell #screen-customer-agent .commercial-credit-columns section > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
html body .app-shell #screen-customer-agent .commercial-credit-head h2,
html body .app-shell #screen-customer-agent .commercial-credit-workspace h3 { margin: 3px 0; color: var(--fg-text); }
html body .app-shell #screen-customer-agent .commercial-credit-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--fg-muted); }
html body .app-shell #screen-customer-agent .commercial-credit-calculator,
html body .app-shell #screen-customer-agent .commercial-credit-reserve-form,
html body .app-shell #screen-customer-agent .commercial-credit-decision-form {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 10px; padding: 14px; background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 10px;
}
html body .app-shell #screen-customer-agent .commercial-credit-workspace label { display: grid; gap: 6px; min-width: 0; color: var(--fg-muted); font-size: var(--fg-font-small); }
html body .app-shell #screen-customer-agent .commercial-credit-workspace :is(input, select) {
  width: 100%; min-height: 42px; padding: 8px 11px; color: var(--fg-text); background: var(--fg-card); border: 1px solid var(--fg-line); border-radius: 8px; font: inherit;
}
html body .app-shell #screen-customer-agent .commercial-credit-workspace option { color: var(--fg-text); background: var(--fg-card); }
html body .app-shell #screen-customer-agent .commercial-credit-results { display: grid; gap: 14px; }
html body .app-shell #screen-customer-agent .commercial-credit-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
html body .app-shell #screen-customer-agent .commercial-credit-kpis article,
html body .app-shell #screen-customer-agent .commercial-credit-scenarios article {
  display: grid; gap: 6px; min-width: 0; padding: 12px; background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 9px;
}
html body .app-shell #screen-customer-agent .commercial-credit-kpis span,
html body .app-shell #screen-customer-agent .commercial-credit-scenarios span,
html body .app-shell #screen-customer-agent .commercial-credit-scenarios small { color: var(--fg-muted); font-size: 12px; }
html body .app-shell #screen-customer-agent .commercial-credit-kpis strong,
html body .app-shell #screen-customer-agent .commercial-credit-scenarios strong { color: var(--fg-text); overflow-wrap: anywhere; }
html body .app-shell #screen-customer-agent .commercial-credit-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 12px; }
html body .app-shell #screen-customer-agent .commercial-credit-columns > section,
html body .app-shell #screen-customer-agent .commercial-credit-governance,
html body .app-shell #screen-customer-agent .commercial-credit-facility {
  display: grid; gap: 12px; min-width: 0; padding: 14px; background: var(--fg-bg); border: 1px solid var(--fg-line); border-radius: 10px;
}
html body .app-shell #screen-customer-agent .commercial-credit-table-wrap { max-width: 100%; overflow-x: auto; }
html body .app-shell #screen-customer-agent .commercial-credit-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; }
html body .app-shell #screen-customer-agent .commercial-credit-table-wrap :is(th, td) { padding: 9px; color: var(--fg-muted); border-bottom: 1px solid var(--fg-line); text-align: left; font-size: 12px; }
html body .app-shell #screen-customer-agent .commercial-credit-table-wrap th,
html body .app-shell #screen-customer-agent .commercial-credit-table-wrap strong { color: var(--fg-text); }
html body .app-shell #screen-customer-agent .commercial-credit-scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body .app-shell #screen-customer-agent .commercial-credit-governance ul,
html body .app-shell #screen-customer-agent .commercial-credit-reservations { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .app-shell #screen-customer-agent .commercial-credit-governance li,
html body .app-shell #screen-customer-agent .commercial-credit-reservations li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; background: var(--fg-hover); border: 1px solid var(--fg-line); border-radius: 8px; }
html body .app-shell #screen-customer-agent .commercial-credit-governance li > div,
html body .app-shell #screen-customer-agent .commercial-credit-reservations li > div { display: grid; gap: 3px; }
html body .app-shell #screen-customer-agent .commercial-credit-governance li span,
html body .app-shell #screen-customer-agent .commercial-credit-reservations li span { color: var(--fg-muted); font-size: 12px; }
html body .app-shell #screen-customer-agent .commercial-credit-governance li form { display: flex; align-items: center; gap: 8px; }
html body .app-shell #screen-customer-agent .commercial-credit-governance li form input { min-width: 220px; }
html body .app-shell #screen-customer-agent .commercial-credit-reserve-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
html body .app-shell #screen-customer-agent .commercial-credit-decision-form { grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) repeat(3, auto); }

@media (max-width: 1100px) {
  html body .app-shell #screen-customer-agent .customer-agent-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .app-shell #screen-customer-agent .customer-agent-capacity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .app-shell #screen-customer-agent .customer-agent-grid { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-customer-agent .commercial-credit-calculator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .app-shell #screen-customer-agent .commercial-credit-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body .app-shell #screen-customer-agent .commercial-credit-columns { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-customer-agent .commercial-credit-decision-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  html body .app-shell #screen-customer-agent .customer-agent-head { flex-direction: column; align-items: stretch; }
  html body .app-shell #screen-customer-agent .customer-agent-head-actions { justify-content: stretch; }
  html body .app-shell #screen-customer-agent .customer-agent-head-actions > * { width: 100%; min-width: 0; }
  html body .app-shell #screen-customer-agent .customer-agent-metrics,
  html body .app-shell #screen-customer-agent .customer-agent-aging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .app-shell #screen-customer-agent .customer-agent-capacity > header { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-customer-agent .commercial-credit-reserve-form { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-customer-agent .commercial-credit-governance li { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-customer-agent .commercial-credit-governance li form { align-items: stretch; flex-direction: column; }
  html body .app-shell #screen-customer-agent .commercial-credit-governance li form input { min-width: 0; }
}
@media (max-width: 480px) {
  html body .app-shell #screen-customer-agent .customer-agent-summary,
  html body .app-shell #screen-customer-agent .customer-agent-capacity-grid,
  html body .app-shell #screen-customer-agent .customer-agent-metrics,
  html body .app-shell #screen-customer-agent .customer-agent-aging { grid-template-columns: minmax(0, 1fr); }
  html body .app-shell #screen-customer-agent .commercial-credit-calculator,
  html body .app-shell #screen-customer-agent .commercial-credit-kpis,
  html body .app-shell #screen-customer-agent .commercial-credit-scenarios,
  html body .app-shell #screen-customer-agent .commercial-credit-decision-form { grid-template-columns: minmax(0, 1fr); }
}