:root {
  --canvas: #f3f6f5;
  --surface: #ffffff;
  --surface-muted: #f7f9f8;
  --surface-strong: #edf2ef;
  --ink: #14211c;
  --ink-soft: #34443d;
  --muted: #5e6c66;
  --faint: #67766f;
  --line: #dde5e1;
  --line-strong: #cbd6d1;
  --accent: #087a5d;
  --accent-hover: #06694f;
  --accent-soft: #e4f3ee;
  --sidebar: #10211b;
  --sidebar-soft: #172b24;
  --sidebar-text: #eef6f2;
  --sidebar-muted: #91a69d;
  --danger: #b43d35;
  --danger-soft: #fbecea;
  --warning: #966219;
  --warning-soft: #fbf2df;
  --info: #35678f;
  --info-soft: #eaf2f8;
  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 15px;
  --focus: 0 0 0 3px rgba(8, 122, 93, .16);
  --shadow-float: 0 10px 28px rgba(12, 31, 24, .12);
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-shell: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --z-table-header: 1;
  --z-search-expanded: 2;
  --z-sidebar-backdrop: 9;
  --z-sticky: 10;
  --z-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  font-family: Inter, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); }
body { min-width: 320px; font-size: 13px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
.hidden { display: none !important; }
.context-label { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 750; }

.brand-mark {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--ink);
}
.brand-mark::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.brand-mark i { position: absolute; right: 1px; top: 1px; width: 6px; height: 6px; background: currentColor; border: 1px solid currentColor; border-radius: 50%; }
.brand-mark-inverse { color: var(--sidebar-text); }
.brand-mark-inverse i { background: var(--sidebar); }

/* Login */
.login-view { min-height: 100svh; display: grid; grid-template-columns: minmax(540px, 1.18fr) minmax(420px, .82fr); }
.login-story {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 32px 44px;
  color: var(--sidebar-text);
  background: var(--sidebar);
}
.login-brand, .sidebar-brand { display: flex; align-items: center; gap: 11px; }
.login-brand div, .sidebar-brand div { display: grid; gap: 2px; }
.login-brand strong, .sidebar-brand strong { font-size: 14px; letter-spacing: -.01em; }
.login-brand small, .sidebar-brand small { color: var(--sidebar-muted); font-size: 10px; }
.login-story-content { width: min(680px, 88%); margin: auto 0; }
.login-story-content .context-label { color: #7cd7b7; }
.login-story-content h1 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(42px, 4.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.login-story-content > p:last-of-type { max-width: 610px; margin: 23px 0 0; color: #b7c8c0; font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.login-capabilities { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-top: 38px; color: #d5e3dd; font-size: 12px; }
.login-capabilities span { display: inline-flex; align-items: center; gap: 8px; }
.login-capabilities span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #60cda5; }
.login-environment { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(238, 246, 242, .12); color: var(--sidebar-muted); font-size: 10px; }
.login-environment span { display: inline-flex; align-items: center; gap: 8px; }
.login-panel { display: grid; place-items: center; padding: 56px; background: var(--surface); }
.login-card { width: min(410px, 100%); }
.login-card header { margin-bottom: 31px; }
.login-card h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.03em; }
.login-card header > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.login-form { display: grid; gap: 17px; }
.login-note { margin: 26px 0 0; color: var(--faint); font-size: 10px; line-height: 1.6; }

/* Controls */
.field { display: grid; gap: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input::placeholder, textarea::placeholder { color: #65736c; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #aebdb6; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); }
input[readonly] { color: var(--muted); background: var(--surface-muted); }
textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
.button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .1s ease;
}
.button:hover { color: var(--ink); border-color: #aebdb6; background: var(--surface-muted); }
.button:focus-visible, .nav button:focus-visible, .icon-close:focus-visible, .mobile-menu:focus-visible { outline: none; box-shadow: var(--focus); }
.button:active { transform: translateY(1px); }
.button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.button.primary:hover { color: #fff; background: var(--accent-hover); border-color: var(--accent-hover); }
.button.accent { color: #fff; background: var(--accent); border-color: var(--accent); }
.button.quiet { background: transparent; }
.button.danger { color: var(--danger); border-color: #e8bbb6; background: var(--danger-soft); }
.button.small { min-height: 30px; padding: 4px 9px; font-size: 11px; }
.button.full { width: 100%; min-height: 44px; margin-top: 3px; }
.button[disabled] { opacity: .48; cursor: wait; transform: none; }
.icon-button { width: 36px; padding: 0; }
.icon-button svg, .mobile-menu svg { width: 17px; height: 17px; fill: currentColor; }
.form-error { min-height: 18px; margin: -3px 0 0; color: var(--danger); font-size: 11px; }

/* Application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 23px 17px 18px;
  color: var(--sidebar-text);
  background: var(--sidebar);
  overflow-y: auto;
}
.sidebar-brand { min-height: 42px; padding: 0 8px; }
.workspace-identity { display: grid; gap: 3px; margin: 21px 4px 19px; padding: 13px 14px; border: 1px solid rgba(238, 246, 242, .1); border-radius: var(--radius); background: var(--sidebar-soft); }
.workspace-identity span, .workspace-identity small { color: var(--sidebar-muted); font-size: 9px; }
.workspace-identity strong { margin-top: 2px; font-size: 12px; }
.nav { display: grid; gap: 3px; }
.nav-label { margin: 16px 11px 5px; color: #82988e; font-size: 10px; font-weight: 750; }
.nav-label:first-child { margin-top: 1px; }
.nav button {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #a8bbb2;
  background: transparent;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.nav button svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; opacity: .82; }
.nav button:hover { color: var(--sidebar-text); background: rgba(255, 255, 255, .055); }
.nav button.active { color: #fff; background: #214035; font-weight: 730; }
.nav button.active svg { color: #72d4b0; opacity: 1; }
.sidebar-status { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 17px 9px 2px; border-top: 1px solid rgba(238, 246, 242, .1); }
.sidebar-status div { display: grid; gap: 2px; }
.sidebar-status strong { font-size: 10px; }
.sidebar-status small { color: var(--sidebar-muted); font-size: 9px; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #54c89f; box-shadow: 0 0 0 4px rgba(84, 200, 159, .14); }
.sidebar-backdrop { display: none; }

.workspace { min-width: 0; }
.topbar {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  min-height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 13px 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
}
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.breadcrumb { margin: 0 0 4px; color: var(--faint); font-size: 9px; }
.breadcrumb > span:first-child { margin: 0 4px; color: var(--line-strong); }
.topbar h1 { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: -.025em; }
.topbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-search { position: relative; display: block; width: min(250px, 22vw); }
.page-search svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; fill: var(--faint); transform: translateY(-50%); pointer-events: none; }
.page-search input { min-height: 36px; padding: 7px 11px 7px 32px; background: var(--surface-muted); font-size: 11px; }
.sync-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.sync-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.account-chip { display: flex; align-items: center; gap: 8px; min-width: 128px; margin-left: 3px; padding-left: 12px; border-left: 1px solid var(--line); }
.account-chip div { display: grid; gap: 1px; }
.account-chip strong { max-width: 100px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-chip small { color: var(--faint); font-size: 9px; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--ink); font-size: 10px; font-weight: 800; }
.mobile-menu { display: none; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.content { width: 100%; max-width: 1720px; margin: 0 auto; padding: 27px 30px 64px; }

/* Page structure */
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.page-intro h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.page-intro p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.range-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.range-switch button { min-height: 29px; padding: 5px 10px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.range-switch button:hover { color: var(--ink); }
.range-switch button[aria-pressed="true"] { color: var(--accent); background: var(--surface); box-shadow: 0 1px 3px rgba(12, 31, 24, .08); }
.range-switch button:focus-visible { outline: none; box-shadow: var(--focus); }

.summary-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: stretch; margin-bottom: 17px; border-block: 1px solid var(--line); background: rgba(255, 255, 255, .58); }
.summary-line > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 12px; padding: 14px 18px; border-right: 1px solid var(--line); }
.summary-line > div:last-child { border-right: 0; }
.summary-line span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.summary-line strong { color: var(--ink); font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.summary-line small { color: var(--faint); font-size: 10px; }

.page-tabs { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 13px; border-bottom: 1px solid var(--line); }
.page-tabs button { position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 1px 11px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.page-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.page-tabs button:hover { color: var(--ink); }
.page-tabs button[aria-selected="true"] { color: var(--accent); }
.page-tabs button[aria-selected="true"]::after { background: var(--accent); }
.page-tabs button:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--focus); }
.page-tabs small { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: var(--faint); background: var(--surface-strong); font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.page-tabs button[aria-selected="true"] small { color: var(--accent); background: var(--accent-soft); }
.subview[hidden] { display: none; }

.metric-strip { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.metric { min-height: 114px; padding: 18px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric small { display: block; margin-bottom: 14px; color: var(--muted); font-size: 10px; }
.metric strong { display: block; font-size: 24px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric em { display: block; margin-top: 10px; color: var(--faint); font-size: 9px; font-style: normal; line-height: 1.45; }
.metric.positive strong { color: var(--accent); }
.metric.alert strong { color: var(--danger); }

.attention-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #ead6b2; border-radius: var(--radius-sm); color: #714b13; background: var(--warning-soft); font-size: 11px; }
.attention-strip strong { font-size: 11px; }
.attention-strip button { color: #714b13; border-color: #dec28e; }

.section-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
.panel, .table-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.panel + .panel, .table-section + .table-section { margin-top: 18px; }
.panel-header, .section-header { min-height: 59px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.panel-header h3, .section-header h3 { margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.panel-header p, .section-header p { margin: 0; color: var(--faint); font-size: 11px; line-height: 1.5; }

.table-scroll { width: 100%; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
.table-scroll table { min-width: 720px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--muted); background: var(--surface-muted); font-size: 11px; font-weight: 750; text-align: left; white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid #e9eeeb; color: var(--ink-soft); line-height: 1.45; vertical-align: middle; }
.table-scroll td { white-space: normal; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background: #f8faf9; }
tbody tr[hidden] { display: none; }
.search-hidden { display: none !important; }
.cell-main { display: grid; gap: 3px; min-width: 112px; }
.cell-main strong { color: var(--ink); font-size: 12px; font-weight: 700; }
.cell-main small, .secondary { color: var(--faint); font-size: 10px; line-height: 1.45; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-variant-numeric: tabular-nums; }
.number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.number, .table-scroll th.number { text-align: right; }
td:has(> .number) { text-align: right; }
.actions { display: flex; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.health-cell { display: grid; justify-items: start; gap: 4px; }
.health-cell small { color: var(--faint); font-size: 8px; white-space: nowrap; }

.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 3px 8px; border-radius: 999px; color: var(--muted); background: var(--surface-strong); font-size: 10px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge.active, .badge.completed, .badge.healthy, .badge.applied, .badge.matched, .badge.normal { color: var(--accent); background: var(--accent-soft); }
.badge.disabled, .badge.failed, .badge.open { color: var(--danger); background: var(--danger-soft); }
.badge.risk, .badge.high, .badge.invalid { color: var(--danger); background: var(--danger-soft); }
.badge.queued, .badge.in_progress, .badge.submission_uncertain, .badge.degraded, .badge.review, .badge.medium, .badge.ambiguous { color: var(--warning); background: var(--warning-soft); }
.badge.created, .badge.info, .badge.unmatched { color: var(--info); background: var(--info-soft); }
.capability { color: var(--ink-soft); background: var(--surface-strong); }
.capability::before { display: none; }
.empty { padding: 48px 22px; color: var(--faint); font-size: 12px; line-height: 1.7; text-align: center; }
.loading { min-height: 380px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.loading::before { content: ""; width: 20px; height: 20px; margin-bottom: -64px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.channel-list { padding: 3px 16px; }
.channel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.channel-row:last-child { border-bottom: 0; }
.channel-row strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 11px; }
.channel-row small { display: block; color: var(--faint); font-size: 9px; line-height: 1.45; }
.channel-row > div:last-child { display: grid; justify-items: end; align-content: center; gap: 5px; text-align: right; }
.profit-line { display: flex; justify-content: space-between; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 11px; }
.profit-line:last-child { border-bottom: 0; }
.profit-line strong { font-variant-numeric: tabular-nums; }

/* Supplier workspace */
.supplier-workspace {
  min-height: 610px;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  background: transparent;
  overflow: visible;
}
.supplier-rail,
.supplier-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.supplier-rail { background: var(--surface-muted); }
.supplier-rail > header,
.credential-pane > header,
.supplier-model-pane > header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f3f7f5;
}
.supplier-rail h3,
.credential-pane h4,
.supplier-model-pane h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 14px; line-height: 1.3; }
.section-step {
  width: 20px;
  height: 20px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #b9d8cb;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 800;
}
.supplier-rail header p,
.credential-pane header p,
.supplier-model-pane header p { margin: 0; color: var(--faint); font-size: 10px; line-height: 1.45; }
.supplier-picker-list { padding: 7px; }
.supplier-picker {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.supplier-picker:hover { color: var(--ink); background: var(--surface); }
.supplier-picker:focus-visible { outline: none; box-shadow: var(--focus); }
.supplier-picker.active { color: var(--ink); border-color: #b9d8cb; background: var(--accent-soft); }
.supplier-picker > span:first-child { min-width: 0; display: grid; gap: 4px; }
.supplier-picker strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-picker small { color: var(--faint); font-size: 8px; }
.supplier-picker-count { display: grid; flex: 0 0 auto; justify-items: end; gap: 2px; }
.supplier-picker-count strong { color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; }
.supplier-detail { container-type: inline-size; }
.supplier-workspace-header {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}
.supplier-current-label { display: block; margin-bottom: 5px; color: var(--accent); font-size: 10px; font-weight: 750; }
.supplier-heading-line { display: flex; align-items: center; gap: 8px; }
.supplier-heading-line h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.supplier-workspace-header p { max-width: 820px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-wrap: pretty; }
.supplier-account-pane {
  min-width: 0;
  margin: 14px 14px 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.supplier-account-pane > header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: #f3f7f5;
}
.supplier-account-heading { min-width: 0; }
.supplier-account-heading h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 14px; }
.supplier-account-heading p { margin: 0; color: var(--faint); font-size: 10px; line-height: 1.45; }
.account-state {
  min-height: 24px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.account-state::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.account-state.ready { color: #376454; background: #eaf4f0; }
.account-state.verified { color: var(--accent); background: var(--accent-soft); }
.account-state.error { color: var(--danger); background: var(--danger-soft); }
.supplier-account-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: stretch;
}
.supplier-account-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(100px, .65fr) minmax(170px, 1.25fr) minmax(140px, 1fr);
}
.supplier-account-summary > div { min-width: 0; display: grid; align-content: center; gap: 6px; padding: 13px 15px; border-right: 1px solid var(--line); }
.supplier-account-summary small { color: var(--faint); font-size: 9px; }
.supplier-account-summary strong { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-account-actions { min-width: 0; display: grid; align-content: center; gap: 9px; padding: 12px 14px; background: var(--surface-muted); }
.supplier-account-actions p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.supplier-account-actions .actions { justify-content: flex-start; flex-wrap: wrap; }
.supplier-account-actions .button[disabled] { cursor: not-allowed; }
.supplier-config-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(360px, 410px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
  background: var(--surface-muted);
}
.credential-pane,
.supplier-model-pane {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.credential-profile-list,
.supplier-model-list { min-width: 0; }
.credential-profile-list { display: grid; gap: 9px; padding: 10px; background: #f8faf9; }
.credential-profile-row {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.credential-profile-row:hover { border-color: #c5d4cd; }
.credential-profile-main { min-width: 0; }
.credential-profile-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.credential-profile-title > strong { color: var(--ink); font-size: 12px; }
.credential-profile-main > small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
.credential-url { display: block; margin-top: 5px; overflow: hidden; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; }
.credential-secret-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 0;
  border-block: 1px solid var(--line);
}
.credential-secret-label { color: var(--muted); font-size: 9px; font-weight: 750; }
.credential-secret-mask {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 700 10px/1.4 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.credential-secret-state { color: var(--accent); font-size: 8px; font-weight: 750; white-space: nowrap; }
.credential-secret-summary.is-missing .credential-secret-state { color: #8a5a12; }
.mini-tag { display: inline-flex; min-height: 18px; align-items: center; padding: 2px 6px; border-radius: 999px; color: var(--muted); background: var(--surface-strong); font-size: 8px; font-weight: 750; }
.mini-tag.accent { color: var(--accent); background: var(--accent-soft); }
.mini-tag.multiplier { color: #445b51; background: #edf2ef; }
.mini-tag.cost-source.verified { color: var(--accent); background: var(--accent-soft); }
.mini-tag.cost-source.pending { color: #775315; background: var(--warning-soft); }
.mini-tag.cost-source.manual { color: var(--muted); background: var(--surface-strong); }
.credential-profile-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 12px; border-block: 1px solid var(--line); background: var(--line); }
.credential-profile-meta > span { min-width: 0; display: grid; gap: 3px; padding: 8px; background: var(--surface); }
.credential-profile-meta strong { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.credential-profile-meta small { color: var(--faint); font-size: 8px; }
.credential-profile-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-top: 10px; }
.credential-profile-foot > small { min-width: 0; overflow: hidden; color: var(--faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-model-columns {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr) auto;
  gap: 12px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 9px;
  font-weight: 750;
}
.supplier-model-columns span:last-child { min-width: 76px; text-align: center; }
.supplier-model-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid var(--line);
}
.supplier-model-row:last-child { border-bottom: 0; }
.supplier-model-row:hover { background: #f9fbfa; }
.supplier-model-identity { min-width: 0; display: grid; justify-items: start; gap: 6px; }
.supplier-model-identity > strong { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-model-identity > small { max-width: 100%; overflow: hidden; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; }
.model-key-bindings { min-width: 0; display: grid; gap: 7px; }
.model-key-binding {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(90px, .6fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.model-key-binding-name { min-width: 0; display: flex; align-items: center; gap: 6px; }
.model-key-binding-name > strong { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.binding-kind { flex: 0 0 auto; padding: 2px 5px; border-radius: 999px; color: #365b4d; background: var(--accent-soft); font-size: 8px; font-weight: 750; }
.key-status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--faint); }
.key-status-dot.active { background: var(--accent); box-shadow: 0 0 0 3px rgba(8, 122, 93, .11); }
.model-key-binding-detail { min-width: 0; display: grid; gap: 3px; }
.model-key-binding-detail span,
.model-key-binding-detail strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.model-key-binding-detail span { color: var(--faint); }
.model-key-binding-detail strong { color: var(--ink-soft); font-weight: 650; }
.model-key-binding-detail .model-key-preview { color: var(--accent); font-weight: 700; }
.model-price-formula { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.model-price-formula span,
.model-price-formula strong { overflow: visible; text-overflow: clip; white-space: normal; }
.model-price-formula strong { color: var(--accent); }
.supplier-model-add-key { min-width: max-content; justify-self: end; margin-top: 1px; white-space: nowrap; }
.compact-empty { padding: 26px 15px; }

@container (max-width: 980px) {
  .supplier-config-grid { grid-template-columns: 1fr; }
  .supplier-account-body { grid-template-columns: 1fr; }
  .supplier-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-account-summary > div:nth-child(2n) { border-right: 0; }
  .supplier-account-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .supplier-account-actions { border-top: 1px solid var(--line); }
}

@container (max-width: 700px) {
  .credential-profile-list { grid-template-columns: 1fr; }
  .supplier-model-columns { display: none; }
  .supplier-model-row { grid-template-columns: 1fr; align-items: start; }
  .supplier-model-add-key { grid-column: auto; justify-self: start; }
  .credential-profile-foot { grid-template-columns: 1fr; }
  .supplier-account-pane > header { align-items: flex-start; }
  .supplier-account-summary { grid-template-columns: 1fr; }
  .supplier-account-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .supplier-account-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .supplier-account-summary > div:last-child { border-bottom: 0; }
}

.internal-route-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius-sm);
  color: #285746;
  background: #eff7f4;
}
.internal-route-note strong { flex: 0 0 auto; font-size: 10px; }
.internal-route-note p { max-width: 780px; margin: 0; font-size: 9px; line-height: 1.55; }
.choice-field { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: 11px; cursor: pointer; }
.choice-field input { width: 16px; min-height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.choice-field > span { display: grid; gap: 4px; }
.choice-field strong { font-size: 11px; }
.choice-field small { color: var(--faint); font-size: 9px; font-weight: 400; line-height: 1.5; }
.choice-field input:disabled { cursor: not-allowed; }
.form-details { border-top: 1px solid var(--line); padding-top: 4px; }
.form-details summary { padding: 8px 0; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.form-details[open] summary { margin-bottom: 10px; color: var(--ink); }
.manual-cost-settings[open] { padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.manual-cost-settings[open] summary { padding-top: 0; }
.manual-cost-settings .decision-note { margin-bottom: 12px; }

/* Application-centered configuration workspace */
.application-workspace {
  min-height: 680px;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.application-rail { min-width: 0; border-right: 1px solid var(--line); background: var(--surface-muted); }
.application-rail > header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}
.application-rail h3 { margin: 0 0 4px; font-size: 13px; }
.application-rail header p { margin: 0; color: var(--faint); font-size: 10px; line-height: 1.4; }
.application-picker-list { display: grid; gap: 3px; padding: 7px; }
.application-picker {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.application-picker:hover { color: var(--ink); background: var(--surface); }
.application-picker:focus-visible { outline: none; box-shadow: var(--focus); }
.application-picker.active { color: var(--ink); border-color: #b9d8cb; background: var(--accent-soft); }
.application-picker > span:first-child { min-width: 0; display: grid; gap: 4px; }
.application-picker strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.application-picker small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.application-picker-count { display: grid; flex: 0 0 auto; justify-items: end; gap: 2px; }
.application-picker-count strong { color: var(--accent); font-size: 15px; font-variant-numeric: tabular-nums; }

.application-detail { min-width: 0; }
.application-workspace-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.application-workspace-header > div:first-child { min-width: 0; }
.application-heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.application-heading-line h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.application-workspace-header p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.application-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  list-style: none;
}
.application-flow li {
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 15px 18px 15px 0;
}
.application-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}
.application-flow li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.application-flow li > div { min-width: 0; display: grid; gap: 4px; }
.application-flow strong { overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.application-flow small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.application-flow li.complete > span { color: #fff; border-color: var(--accent); background: var(--accent); }
.application-flow li.complete strong { color: var(--accent); }
.application-flow li.current > span { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.application-flow li.current strong { color: var(--ink); }

.application-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.application-summary > div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 18px; border-right: 1px solid var(--line); }
.application-summary > div:last-child { border-right: 0; }
.application-summary span { color: var(--muted); font-size: 10px; }
.application-summary strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.application-summary .warning { background: var(--warning-soft); }
.application-summary .warning strong { color: var(--warning); }
.application-summary .healthy strong { color: var(--accent); }
.application-detail > .page-tabs { margin: 0; padding: 0 18px; }
.application-detail > .subview { padding: 18px; }

.application-model-list,
.application-route-group { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.application-model-list > header,
.application-route-group > header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.application-model-list h4 { margin: 0 0 4px; font-size: 13px; }
.application-model-list header p { margin: 0; color: var(--faint); font-size: 10px; line-height: 1.45; }
.application-model-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(132px, .85fr) minmax(180px, 1.3fr) minmax(122px, .78fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px;
  border-bottom: 1px solid var(--line);
}
.application-model-row:last-child { border-bottom: 0; }
.application-model-row:hover { background: #f9fbfa; }
.application-model-identity,
.application-model-price,
.application-model-route,
.application-model-readiness { min-width: 0; display: grid; align-content: center; gap: 5px; }
.application-model-identity > div { display: flex; flex-wrap: wrap; gap: 5px; }
.application-model-identity > strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.application-model-identity > small { overflow: hidden; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; }
.application-model-price > small,
.application-model-route > small { color: var(--faint); font-size: 9px; }
.application-model-price > strong { color: var(--ink); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.application-model-price > span,
.application-model-route > span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.application-model-route > div { min-width: 0; display: grid; gap: 4px; }
.route-summary-item { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.route-summary-item strong { flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; }
.route-summary-item small { min-width: 0; overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.route-summary-more { color: var(--info); font-size: 9px; font-weight: 700; }
.configuration-missing { color: var(--warning); font-size: 10px; font-weight: 700; }
.application-model-readiness { justify-items: start; }
.application-model-readiness > small { color: var(--faint); font-size: 9px; line-height: 1.45; }
.application-model-actions { display: grid; justify-items: stretch; gap: 6px; }
.application-model-actions .button { white-space: nowrap; }
.application-empty { display: grid; justify-items: center; gap: 9px; }
.application-empty strong { color: var(--ink); font-size: 13px; }
.application-empty span { max-width: 480px; }
.application-empty .button { margin-top: 5px; }

.application-route-list { display: grid; gap: 14px; }
.context-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 12px 14px;
  border: 1px solid #c9ddd5;
  border-radius: var(--radius-sm);
  color: #285746;
  background: #eff7f4;
}
.context-note strong { flex: 0 0 auto; font-size: 11px; }
.context-note p { max-width: 760px; margin: 0; font-size: 10px; line-height: 1.55; }
.application-route-group > header > div { min-width: 0; display: grid; gap: 4px; }
.application-route-group > header strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.application-route-group > header small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.application-route-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(130px, 1fr) minmax(160px, 1.35fr) minmax(125px, .85fr) minmax(104px, auto);
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.application-route-row:last-child { border-bottom: 0; }
.application-route-row:hover { background: #f9fbfa; }
.application-route-rank,
.application-route-source,
.application-route-model,
.application-route-cost,
.application-route-health { min-width: 0; display: grid; align-content: center; gap: 4px; }
.application-route-rank { grid-template-columns: 25px minmax(0, 1fr); align-items: center; }
.application-route-rank > span { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.application-route-rank small,
.application-route-source small,
.application-route-model small,
.application-route-cost small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.application-route-source strong,
.application-route-model strong,
.application-route-cost strong { overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.application-route-cost strong { font-variant-numeric: tabular-nums; }
.application-route-empty { padding: 19px 15px; color: var(--warning); background: #fffdf8; font-size: 10px; }

.application-business { display: grid; gap: 18px; }
.application-business .summary-line { margin-bottom: 0; }
.application-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); gap: 1px; overflow: hidden; }
.application-settings-grid > div { min-width: 0; min-height: 78px; display: grid; align-content: center; gap: 7px; padding: 13px 15px; background: var(--surface); }
.application-settings-grid small { color: var(--faint); font-size: 9px; }
.application-settings-grid strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.settings-action-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.settings-action-row > div { min-width: 0; display: grid; gap: 4px; }
.settings-action-row strong { font-size: 11px; }
.settings-action-row small { color: var(--faint); font-size: 9px; line-height: 1.5; }

/* Route assignment dialog */
.route-assignment-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #c9ddd5; border-radius: var(--radius-sm); color: #285746; background: #eff7f4; }
.route-assignment-intro > div { min-width: 0; display: grid; gap: 4px; }
.route-assignment-intro span { font-size: 9px; }
.route-assignment-intro strong { font-size: 11px; }
.route-assignment-intro p { grid-column: 1 / -1; margin: 0; padding-top: 9px; border-top: 1px solid #c9ddd5; font-size: 9px; line-height: 1.6; }
.route-assignment-list { display: grid; gap: 8px; }
.route-assignment-option {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(205px, 1.25fr) minmax(145px, .9fr) minmax(170px, 1.05fr) minmax(108px, .65fr);
  align-items: center;
  gap: 12px 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.route-assignment-option:hover { border-color: #b9d8cb; background: #f9fbfa; }
.route-assignment-option:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.route-assignment-check { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; color: var(--ink-soft); cursor: pointer; }
.route-assignment-check input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--accent); }
.route-assignment-check > span { min-width: 0; display: grid; gap: 4px; }
.route-assignment-check strong { color: var(--ink); font-size: 10px; }
.route-assignment-check small { color: var(--faint); font-size: 9px; line-height: 1.45; }
.route-assignment-source,
.route-assignment-price,
.route-assignment-state { min-width: 0; display: grid; gap: 4px; }
.route-assignment-source strong,
.route-assignment-price strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.route-assignment-source span,
.route-assignment-source small,
.route-assignment-price span,
.route-assignment-price small,
.route-assignment-state small { overflow: hidden; color: var(--faint); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.route-assignment-price strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.route-assignment-state { justify-items: start; }
.route-assignment-advanced { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
.route-assignment-advanced summary { color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; }
.route-assignment-advanced[open] summary { color: var(--ink); }
.route-assignment-advanced > .form-grid { margin-top: 11px; }
.route-assignment-empty { padding: 32px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-muted); font-size: 11px; line-height: 1.65; text-align: center; }
.route-assignment-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; }
.route-assignment-empty p { max-width: 620px; margin: 0 auto; }
.field-context { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.field-context small { color: var(--faint); font-size: 9px; }
.field-context strong { color: var(--ink); font-size: 11px; }

/* Overview refinements */
.overview-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr); gap: 18px; margin-bottom: 18px; }
.business-board { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.business-board-header { display: flex; justify-content: space-between; gap: 20px; padding: 17px 18px 14px; border-bottom: 1px solid var(--line); }
.business-board-header h3 { margin: 0 0 4px; font-size: 13px; }
.business-board-header p { margin: 0; color: var(--faint); font-size: 9px; }
.business-board-header strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.business-kpis { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); }
.business-kpi { min-height: 113px; padding: 19px 18px; border-right: 1px solid var(--line); }
.business-kpi:last-child { border-right: 0; }
.business-kpi span { display: block; margin-bottom: 14px; color: var(--muted); font-size: 9px; }
.business-kpi strong { display: block; font-size: 23px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.business-kpi small { display: block; margin-top: 10px; color: var(--faint); font-size: 9px; line-height: 1.4; }
.business-kpi.positive strong { color: var(--accent); }
.business-kpi.alert strong { color: var(--danger); }
.resource-overview { display: grid; align-content: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.resource-overview header { padding: 17px 18px 14px; border-bottom: 1px solid var(--line); }
.resource-overview h3 { margin: 0 0 4px; font-size: 13px; }
.resource-overview header p { margin: 0; color: var(--faint); font-size: 9px; }
.resource-item { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.resource-item:last-child { border-bottom: 0; }
.resource-item span { color: var(--muted); font-size: 10px; }
.resource-item strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.overview-main { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr); gap: 18px; align-items: start; }
.overview-main > .table-section { min-width: 0; }
.overview-side { display: grid; gap: 18px; }
.overview-side .panel + .panel { margin-top: 0; }

/* Modal and drawer */
.modal {
  width: min(680px, calc(100vw - 32px));
  max-height: 90vh;
  max-height: 90dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.modal.wide { width: min(1040px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(8, 22, 17, .42); backdrop-filter: blur(2px); }
.modal-frame {
  max-height: inherit;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.modal-frame > header, .drawer-panel > header { min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-frame h2, .drawer-panel h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.35; letter-spacing: -.02em; }
.icon-close { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.icon-close:hover { color: var(--ink); background: var(--surface-strong); }
.modal-body {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 20px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal-frame > footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field.full { grid-column: 1 / -1; }
.form-grid > .full { grid-column: 1 / -1; }
.field-hint { color: var(--faint); font-size: 9px; font-weight: 400; line-height: 1.5; }
[hidden] { display: none !important; }
.modal-form-stack { display: grid; gap: 24px; }
.modal-form-section {
  min-width: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.modal-form-section:last-child { padding-bottom: 0; border-bottom: 0; }
.modal-form-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.modal-form-section > header > div { min-width: 0; display: grid; gap: 2px; }
.modal-form-section > header small { color: var(--muted); font-size: 11px; }
.modal-form-section > header strong { overflow: hidden; color: var(--accent); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.modal-form-section > header > span {
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 800;
}
.modal-form-section > h3 { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: -.01em; }
.modal-form-section > p { max-width: 76ch; margin: 5px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.adapter-guide {
  min-width: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft);
}
.adapter-guide strong { color: var(--ink); font-size: 12px; }
.adapter-guide p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.credential-current-value {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  padding: 12px;
  border: 1px solid #cdded6;
  border-radius: var(--radius-sm);
  background: #f4f8f6;
}
.credential-current-value > span { color: var(--muted); font-size: 9px; font-weight: 750; }
.credential-current-value > code { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.credential-current-value > small { grid-column: 1 / -1; color: var(--faint); font-size: 9px; line-height: 1.5; }
.credential-modal-stack { gap: var(--space-lg); }
.credential-section { min-width: 0; }
.credential-section > p { margin-bottom: var(--space-md); }
.credential-supplier-context {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0 var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.credential-supplier-context > span { min-width: 0; display: grid; gap: var(--space-2xs); }
.credential-supplier-context small { color: var(--muted); font-size: 11px; }
.credential-supplier-context strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.credential-supplier-context em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.credential-profile-grid,
.credential-secret-stack,
.credential-advanced-stack { display: grid; gap: var(--space-md); }
.credential-profile-grid { margin-top: var(--space-md); }
.credential-availability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(170px, .75fr);
  align-items: start;
  gap: var(--space-md);
}
.credential-default-choice {
  min-height: 68px;
  padding: var(--space-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.credential-default-choice input { width: 18px; min-height: 18px; }
.credential-default-choice strong { color: var(--ink); font-size: 13px; }
.credential-default-choice small { font-size: 11px; }
.credential-advanced-stack { gap: var(--space-sm); margin-top: var(--space-md); }
.credential-advanced-stack .form-details > .form-grid { margin-top: var(--space-sm); }
.credential-advanced-stack .decision-note + .form-grid { margin-top: var(--space-sm); }
@media (max-width: 720px) {
  .credential-modal-stack { gap: var(--space-shell); }
  .credential-availability-grid { grid-template-columns: 1fr; }
  .credential-supplier-context { align-items: flex-start; }
}
.account-auth-current {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #cdded6;
  border-radius: var(--radius-sm);
  background: #f4f8f6;
}
.account-auth-current > span { color: var(--muted); font-size: 9px; font-weight: 750; }
.account-auth-current > code { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.account-auth-current > small { grid-column: 1 / -1; color: var(--faint); font-size: 9px; line-height: 1.5; }
.account-auth-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 9px;
}
.account-auth-scope strong { color: var(--accent); }
.account-auth-scope span { color: var(--muted); }
.account-auth-scope span + span::before { content: "·"; margin-right: 12px; color: var(--line-strong); }

.supplier-onboarding { display: grid; gap: 0; }
.supplier-onboarding-intro {
  padding: 16px;
  border: 1px solid #c8d9d2;
  border-radius: var(--radius);
  background: #f3f8f6;
}
.supplier-onboarding-intro > strong { display: block; color: var(--ink); font-size: 15px; }
.supplier-onboarding-intro > p { max-width: 78ch; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.supplier-layer-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #d5e2dc;
}
.supplier-layer-map > span { min-width: 0; display: grid; gap: 4px; }
.supplier-layer-map small { color: var(--faint); font-size: 11px; }
.supplier-layer-map strong { color: var(--ink); font-size: 13px; }
.supplier-layer-map em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.45; }
.supplier-layer-map > i { color: var(--accent); font-size: 10px; font-style: normal; font-weight: 800; }

.supplier-onboarding-step { padding: 19px 1px; border-bottom: 1px solid var(--line); }
.supplier-onboarding-step:last-child { border-bottom: 0; }
.supplier-onboarding-step > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.supplier-onboarding-step > header > b {
  width: 23px;
  height: 23px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 10px;
}
.supplier-onboarding-step > header > span { display: grid; gap: 3px; }
.supplier-onboarding-step > header strong { color: var(--ink); font-size: 13px; }
.supplier-onboarding-step > header small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.supplier-connection-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.supplier-connection-choice { position: relative; display: block; cursor: pointer; }
.supplier-connection-choice > input {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.supplier-connection-choice > span {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .16s ease, background-color .16s ease;
}
.supplier-connection-choice:hover > span { border-color: #9fb9ad; background: var(--surface-muted); }
.supplier-connection-choice > input:focus-visible + span { box-shadow: var(--focus); }
.supplier-connection-choice > input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.supplier-connection-choice strong { color: var(--ink); font-size: 13px; }
.supplier-connection-choice small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.supplier-connection-choice em { align-self: end; color: var(--accent); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.45; }
.supplier-connection-panel { margin-top: 13px; }
.supplier-connection-panel > .decision-note { margin-bottom: 13px; }
.supplier-connection-panel > .decision-note:last-child { margin-bottom: 0; }
.supplier-onboarding-next { padding-bottom: 0; }
.supplier-onboarding-next > header { margin-bottom: 0; }

@media (max-width: 700px) {
  .supplier-layer-map { grid-template-columns: 1fr; gap: 8px; }
  .supplier-layer-map > i { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); }
  .supplier-connection-choice > span { min-height: 0; }
}

.drawer { position: fixed; z-index: var(--z-backdrop); inset: 0; pointer-events: none; visibility: hidden; }
.drawer.open { pointer-events: auto; visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 17, .36); opacity: 0; transition: opacity .2s ease; }
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel { position: absolute; right: 0; top: 0; width: min(680px, 62vw); height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); box-shadow: -10px 0 28px rgba(12, 31, 24, .14); transform: translateX(100%); transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-body { min-height: 0; height: auto; overflow: auto; padding: 20px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--line); }
.detail-item { min-height: 68px; padding: 12px; background: var(--surface); }
.detail-item small { display: block; margin-bottom: 7px; color: var(--faint); font-size: 9px; }
.detail-item strong { color: var(--ink-soft); font-size: 11px; word-break: break-word; }
.code-block { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: #2c4037; background: var(--surface-muted); font: 10px/1.7 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.detail-section { margin-top: 20px; }
.detail-section h3 { margin: 0 0 10px; font-size: 12px; }
.pricing-detail { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); gap: 1px; overflow: hidden; }
.pricing-detail > div { min-height: 92px; display: grid; align-content: start; gap: 7px; padding: 13px; background: var(--surface); }
.pricing-detail small { color: var(--faint); font-size: 9px; }
.pricing-detail strong { color: var(--ink); font-size: 11px; line-height: 1.5; }
.pricing-detail span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.raw-detail { margin-top: 10px; }
.raw-detail summary { padding: 8px 0; color: var(--muted); font-size: 9px; cursor: pointer; }
.raw-detail[open] summary { color: var(--ink); }
.recovery-panel { display: grid; gap: 15px; margin-bottom: 18px; padding: 16px; border: 1px solid #e1c992; border-radius: var(--radius); color: #62430f; background: #fff9eb; }
.recovery-panel > div:first-child > span { display: inline-flex; min-height: 22px; align-items: center; padding: 3px 8px; border-radius: 999px; color: var(--warning); background: #f6e8c4; font-size: 9px; font-weight: 800; }
.recovery-panel h3 { margin: 10px 0 5px; color: #4c3510; font-size: 14px; }
.recovery-panel p { max-width: 590px; margin: 0; font-size: 10px; line-height: 1.65; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.danger-action { color: var(--danger); border-color: #e6bbb7; }
.danger-action:hover { color: #7f241f; background: var(--danger-soft); }
.decision-note { grid-column: 1 / -1; padding: 13px 14px; border: 1px solid #bfd4e3; border-radius: var(--radius-sm); color: #234a63; background: var(--info-soft); }
.decision-note.warning { color: #684814; border-color: #ead6b2; background: var(--warning-soft); }
.decision-note.success { color: #1e5d47; border-color: #b8ddcf; background: var(--accent-soft); }
.decision-note strong { display: block; margin-bottom: 5px; font-size: 11px; }
.decision-note p { margin: 0; font-size: 9px; line-height: 1.65; }

.upstream-sync-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--line);
}
.upstream-sync-source > div { min-width: 0; display: grid; gap: 5px; }
.upstream-sync-source strong { font-size: 12px; }
.upstream-sync-source small { overflow: hidden; color: var(--faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.upstream-sync-source > span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 8px; font-weight: 750; }
.upstream-sync-summary { display: flex; margin-bottom: 15px; border-block: 1px solid var(--line); }
.upstream-sync-summary > span { min-width: 128px; display: grid; gap: 3px; padding: 11px 18px 11px 0; margin-right: 18px; border-right: 1px solid var(--line); }
.upstream-sync-summary > span:last-child { margin-right: 0; border-right: 0; }
.upstream-sync-summary strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.upstream-sync-summary small { color: var(--muted); font-size: 8px; }
.upstream-sync-controls { margin-bottom: 14px; }
.upstream-sync-refresh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.upstream-sync-refresh span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.upstream-sync-warnings { display: grid; gap: 1px; margin: 13px 0; border: 1px solid #ead6b2; border-radius: var(--radius-sm); overflow: hidden; background: #ead6b2; }
.upstream-sync-warnings p { margin: 0; padding: 8px 10px; color: #684814; background: var(--warning-soft); font-size: 9px; line-height: 1.55; }
.upstream-price-table { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: auto; }
.upstream-price-table table { min-width: 940px; }
.upstream-price-table th { position: sticky; top: 0; z-index: var(--z-table-header); background: var(--surface-muted); }
.upstream-price-table td { vertical-align: top; }
.upstream-price-table .cell-main strong { font-size: 9px; line-height: 1.45; white-space: normal; }
.upstream-price-table .cell-main small { max-width: 260px; font-size: 8px; line-height: 1.45; white-space: normal; }
.sync-blocked-row { background: #fffdf8; }
.sync-decision { display: inline-flex; min-height: 20px; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.sync-decision.ready { color: #1e5d47; background: var(--accent-soft); }
.sync-decision.blocked { color: #744d13; background: var(--warning-soft); }
.sync-decision-note { display: block; max-width: 180px; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.upstream-sync-loading { min-height: 230px; display: grid; place-content: center; gap: 8px; text-align: center; }
.upstream-sync-loading::before { content: ""; width: 28px; height: 28px; justify-self: center; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: upstream-spin .8s linear infinite; }
.upstream-sync-loading strong { font-size: 12px; }
.upstream-sync-loading p, .upstream-sync-help p { max-width: 620px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.upstream-sync-help { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.token-group-preview-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.token-group-preview-source > div { min-width: 0; display: grid; gap: 5px; }
.token-group-preview-source strong { font-size: 12px; }
.token-group-preview-source small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.token-group-preview-source > span { flex: 0 0 auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.token-group-global-warnings {
  display: grid;
  gap: 1px;
  margin: 13px 0;
  border: 1px solid #ead6b2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #ead6b2;
}
.token-group-global-warnings p { display: flex; gap: 10px; margin: 0; padding: 8px 10px; color: #684814; background: var(--warning-soft); font-size: 9px; line-height: 1.55; }
.token-group-global-warnings strong { flex: 0 0 auto; }
.token-group-preview-columns,
.token-group-preview-row {
  min-width: 980px;
  display: grid;
  grid-template-columns: 32px minmax(145px, 1.05fr) minmax(145px, 1fr) minmax(155px, 1.05fr) minmax(210px, 1.25fr) minmax(145px, .95fr);
  align-items: center;
  gap: 11px;
}
.token-group-preview-columns {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 9px;
  font-weight: 750;
}
.token-group-preview-list {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface);
}
.token-group-preview-row {
  min-height: 88px;
  padding: 11px;
  border-bottom: 1px solid var(--line);
}
.token-group-preview-row:last-child { border-bottom: 0; }
.token-group-preview-row.warning { background: #fffdf8; }
.token-group-preview-row.danger { background: #fff9f8; }
.token-group-row-select { display: grid; place-items: center; cursor: pointer; }
.token-group-row-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.token-group-row-select input:disabled { cursor: not-allowed; opacity: .42; }
.token-group-credential,
.token-group-upstream,
.token-group-groups,
.token-group-change,
.token-group-result { min-width: 0; display: grid; align-content: center; gap: 5px; }
.token-group-preview-row small { color: var(--faint); font-size: 9px; line-height: 1.45; }
.token-group-preview-row strong,
.token-group-preview-row code { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.token-group-preview-row code { color: var(--muted); font-size: 9px; }
.token-group-groups strong { white-space: normal; }
.inline-warning { color: var(--danger); font-size: 8px; font-weight: 700; line-height: 1.45; }
.token-group-change > span { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
.token-group-change em { color: var(--muted); font-size: 9px; font-style: normal; }
.token-group-change b { color: var(--faint); font-size: 10px; }
.token-group-change strong { color: var(--accent); white-space: normal; }
.token-group-result .sync-decision { justify-self: start; }
.token-group-result > small { max-width: 180px; color: var(--muted); }
@keyframes upstream-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .upstream-sync-loading::before { animation-duration: 1.8s; } }
.pricing-formula-preview {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
}
.pricing-formula-value { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 11px 12px; background: var(--surface-muted); }
.pricing-formula-value small { color: var(--faint); font-size: 8px; }
.pricing-formula-value strong { color: var(--ink-soft); font-size: 10px; line-height: 1.45; word-break: break-word; }
.pricing-formula-value.final { background: #f1f8f5; }
.pricing-formula-value.final strong { color: var(--accent); }
.pricing-formula-operator { display: grid; place-items: center; padding: 9px 11px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 750; white-space: nowrap; }
.pricing-formula-empty { grid-column: 1 / -1; padding: 12px; color: var(--faint); background: var(--surface-muted); font-size: 9px; line-height: 1.55; }
.task-health { margin-bottom: 18px; border: 1px solid #b8ddcf; border-radius: var(--radius-sm); }
.pricing-health { margin-bottom: 18px; border: 1px solid #b8ddcf; border-radius: var(--radius-sm); }
.value-positive { color: var(--accent); }
.value-negative { color: var(--danger); }
.risk-list, .access-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.risk-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.risk-item:last-child { border-bottom: 0; }
.risk-item > span { display: inline-flex; justify-content: center; min-height: 22px; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.risk-item p { margin: 2px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.risk-item.high > span { color: var(--danger); background: var(--danger-soft); }
.risk-item.medium > span { color: var(--warning); background: var(--warning-soft); }
.risk-item.info > span { color: var(--info); background: var(--info-soft); }
.healthy-note { display: grid; gap: 4px; padding: 13px; color: var(--accent); background: var(--accent-soft); }
.healthy-note strong { font-size: 11px; }
.healthy-note span { color: #356957; font-size: 9px; line-height: 1.55; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.access-row:last-child { border-bottom: 0; }
.access-row > div { display: grid; gap: 3px; }
.access-row > div:last-child { justify-items: end; text-align: right; }
.access-row strong { font-size: 10px; }
.access-row small { color: var(--faint); font-size: 9px; }

.application-workspace small,
.route-assignment-intro span,
.route-assignment-intro p,
.route-assignment-option small,
.route-assignment-advanced summary,
.field-context small,
.supplier-workspace small,
.business-board small,
.resource-overview small,
.field-hint,
.decision-note p,
.healthy-note span { font-size: 10px; }
.mini-tag,
.credential-profile-meta small,
.credential-profile-foot > small,
.supplier-picker small,
.health-cell small { font-size: 10px; }
td.number,
.table-scroll td.number { text-align: right; }

.toast-region { position: fixed; z-index: var(--z-toast); right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 390px; padding: 12px 14px; border: 1px solid #a8d4c3; border-radius: var(--radius-sm); color: #0b583f; background: #edf8f4; font-size: 11px; line-height: 1.5; box-shadow: 0 6px 14px rgba(12, 31, 24, .1); animation: toast-in .18s ease-out; }
.toast.warning { color: #82510c; border-color: #e8c98e; background: #fff8e8; }
.toast.error { color: #8e2f29; border-color: #e6b2ad; background: var(--danger-soft); }
@keyframes toast-in { from { transform: translateY(7px); opacity: 0; } }

@media (max-width: 1360px) {
  .metric-strip { grid-template-columns: repeat(3, 1fr); }
  .metric:nth-child(3n) { border-right: 0; }
  .metric:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .overview-summary, .overview-main { grid-template-columns: 1fr; }
  .resource-overview { grid-template-columns: repeat(4, 1fr); }
  .resource-overview header { grid-column: 1 / -1; }
  .resource-item { border-bottom: 0; border-right: 1px solid var(--line); }
  .resource-item:last-child { border-right: 0; }
  .section-grid { grid-template-columns: 1fr; }
  .supplier-config-grid { grid-template-columns: 1fr; }
  .credential-pane { border: 1px solid var(--line-strong); }
  .credential-profile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-profile-row:nth-child(odd) { border-right: 1px solid var(--line); }
  .application-workspace { grid-template-columns: 200px minmax(0, 1fr); }
  .application-model-row { grid-template-columns: minmax(140px, 1.1fr) minmax(125px, .85fr) minmax(165px, 1.25fr) minmax(116px, .8fr); }
  .application-model-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .application-route-row { grid-template-columns: 70px minmax(120px, 1fr) minmax(150px, 1.2fr) minmax(120px, .8fr) auto; gap: 11px; }
}

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar { padding-inline: 14px; }
  .topbar { padding-inline: 22px; }
  .content { padding-inline: 22px; }
  .sync-state, .logout-button { display: none; }
  .page-search { width: 190px; }
  .business-kpis { grid-template-columns: repeat(2, 1fr); }
  .business-kpi:nth-child(2) { border-right: 0; }
  .business-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .supplier-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .credential-profile-list { grid-template-columns: 1fr; }
  .credential-profile-row:nth-child(odd) { border-right: 0; }
  .supplier-model-row { grid-template-columns: minmax(125px, .5fr) minmax(0, 1.5fr); }
  .supplier-model-add-key { grid-column: 2; justify-self: start; }
  .supplier-model-columns { display: none; }
  .application-workspace { grid-template-columns: 186px minmax(0, 1fr); }
  .application-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 6px; }
  .application-flow li { min-height: 66px; padding-block: 9px; }
  .application-flow li:nth-child(2)::after { display: none; }
  .application-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .application-summary > div:nth-child(3) { border-right: 0; }
  .application-summary > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .application-model-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  .application-model-route { padding-top: 11px; border-top: 1px solid var(--line); }
  .application-model-readiness { padding-top: 11px; border-top: 1px solid var(--line); }
  .application-model-actions { grid-column: 1 / -1; }
  .application-route-row { grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr); }
  .application-route-cost { grid-column: 2; }
  .application-route-health { grid-column: 3; }
  .application-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-assignment-option { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-assignment-check { grid-column: 1 / -1; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
  .route-assignment-state { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .login-view { grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 26px 28px 32px; }
  .login-story-content { width: 100%; margin: 72px 0 58px; }
  .login-story-content h1 { font-size: clamp(36px, 8vw, 54px); }
  .login-panel { min-height: 620px; padding: 52px 28px; }
}

@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: 248px; transform: translateX(-100%); transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: var(--z-sidebar-backdrop); inset: 0; display: block; border: 0; background: rgba(8, 22, 17, .4); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
  body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  .mobile-menu { display: grid; }
  .topbar { padding-inline: 18px; }
  .content { padding: 23px 18px 56px; }
  .account-chip { min-width: auto; }
  .account-chip div { display: none; }
  .page-search { width: min(240px, 36vw); }
  .drawer-panel { width: min(680px, 92vw); }
  .supplier-workspace { grid-template-columns: 1fr; }
  .supplier-rail { border: 1px solid var(--line); }
  .supplier-picker-list { display: flex; gap: 6px; overflow-x: auto; }
  .supplier-picker { min-width: 188px; }
  .supplier-workspace-header { align-items: flex-start; flex-direction: column; }
  .supplier-workspace-header .toolbar { justify-content: flex-start; }
  .token-group-preview-columns { display: none; }
  .token-group-preview-list { border-radius: var(--radius-sm); overflow: hidden; }
  .token-group-preview-row {
    min-width: 0;
    grid-template-columns: 28px repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 11px 14px;
  }
  .token-group-row-select { grid-row: 1 / span 3; align-self: stretch; }
  .token-group-credential { grid-column: 2; }
  .token-group-upstream { grid-column: 3; }
  .token-group-groups { grid-column: 2; }
  .token-group-change { grid-column: 3; }
  .token-group-result { grid-column: 2 / -1; padding-top: 9px; border-top: 1px solid var(--line); }
  .token-group-result > small { max-width: none; }
  .credential-profile-list { grid-template-columns: 1fr; }
  .credential-profile-row:nth-child(odd) { border-right: 0; }
  .application-workspace { grid-template-columns: 1fr; }
  .application-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .application-picker-list { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; }
  .application-picker { min-width: 190px; }
  .application-workspace-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .application-workspace-header .toolbar { justify-content: flex-start; }
  .application-flow li:not(:last-child)::after { display: none; }
  .application-route-row { grid-template-columns: 66px repeat(2, minmax(0, 1fr)); }
  .context-note { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (max-width: 640px) {
  .login-story { padding-inline: 20px; }
  .login-story-content { margin: 54px 0 42px; }
  .login-story-content h1 { font-size: 36px; }
  .login-capabilities { display: grid; gap: 10px; }
  .login-environment { display: grid; }
  .login-panel { min-height: 560px; padding-inline: 20px; }
  .topbar { min-height: 66px; }
  .topbar h1 { font-size: 17px; }
  .breadcrumb { display: none; }
  .page-search { width: 42px; }
  .page-search input { width: 42px; padding-inline: 0; color: transparent; cursor: pointer; }
  .page-search input::placeholder { color: transparent; }
  .page-search:focus-within { position: absolute; left: 66px; right: 62px; z-index: var(--z-search-expanded); width: auto; }
  .page-search:focus-within input { width: 100%; padding-left: 32px; color: var(--ink); cursor: text; }
  .page-search:focus-within input::placeholder { color: #65736c; }
  .account-chip, .sync-state { display: none; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .page-intro .toolbar { width: 100%; justify-content: flex-start; }
  .summary-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-line > div { padding: 13px 12px; border-bottom: 1px solid var(--line); }
  .summary-line > div:nth-child(2n) { border-right: 0; }
  .summary-line > div:nth-last-child(-n+2) { border-bottom: 0; }
  .page-tabs { gap: 17px; overflow-x: auto; }
  .page-tabs button { flex: 0 0 auto; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric, .metric:nth-child(3n) { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .business-kpi { padding: 16px 14px; }
  .business-kpi strong { font-size: 20px; }
  .resource-overview { grid-template-columns: 1fr; }
  .resource-overview header { grid-column: auto; }
  .resource-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .form-grid, .detail-grid, .pricing-detail { grid-template-columns: 1fr; }
  .modal {
    width: calc(100vw - 16px);
    max-height: 96vh;
    max-height: 96dvh;
    border-radius: var(--radius);
  }
  .modal-frame > header { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-frame > footer { padding: 12px 16px; }
  .modal-frame > footer .button { min-height: 44px; }
  .modal-form-stack { gap: 20px; }
  .modal-form-section { padding-bottom: 20px; }
  .drawer-panel { width: 100%; }
  .toast-region { left: 14px; right: 14px; bottom: 14px; }
  .toast { min-width: 0; max-width: none; }
  .supplier-workspace-header { padding: 14px; }
  .supplier-workspace-header .toolbar { width: 100%; }
  .supplier-workspace-header .toolbar .button { flex: 1 1 auto; }
  .supplier-account-pane { margin: 10px 10px 0; }
  .supplier-account-pane > header { flex-direction: column; }
  .supplier-account-actions .actions { display: grid; grid-template-columns: 1fr; }
  .supplier-account-actions .button { width: 100%; }
  .supplier-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .supplier-picker { min-width: 0; }
  .supplier-model-row { grid-template-columns: 1fr; }
  .supplier-model-add-key { grid-column: auto; }
  .model-key-binding { grid-template-columns: 1fr auto; }
  .model-key-binding-detail { grid-column: 1 / -1; grid-row: 2; }
  .pricing-formula-preview { grid-template-columns: 1fr; }
  .pricing-formula-operator { min-height: 34px; }
  .internal-route-note { align-items: flex-start; flex-direction: column; gap: 6px; }
  .upstream-sync-source { align-items: flex-start; flex-direction: column; gap: 10px; }
  .upstream-sync-summary { overflow-x: auto; }
  .upstream-sync-summary > span { min-width: 118px; }
  .upstream-sync-refresh { align-items: stretch; flex-direction: column; }
  .upstream-sync-refresh .button { width: 100%; }
  .token-group-preview-source { align-items: flex-start; flex-direction: column; gap: 8px; }
  .token-group-preview-row { grid-template-columns: 28px minmax(0, 1fr); }
  .token-group-row-select { grid-row: 1 / span 5; }
  .token-group-credential,
  .token-group-upstream,
  .token-group-groups,
  .token-group-change,
  .token-group-result { grid-column: 2; }
  .token-group-result { padding-top: 9px; }
  .account-auth-current { grid-template-columns: 1fr; }
  .account-auth-current > small { grid-column: auto; }
  .account-auth-scope { display: grid; }
  .account-auth-scope span + span::before { content: none; }
  .application-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .application-picker { min-width: 0; }
  .application-workspace-header { padding: 14px; }
  .application-workspace-header .toolbar { width: 100%; }
  .application-workspace-header .toolbar .button { flex: 1 1 auto; }
  .application-flow { grid-template-columns: 1fr; padding: 6px 14px; }
  .application-flow li { min-height: 58px; padding: 8px 0; }
  .application-flow li:not(:last-child) { border-bottom: 1px solid var(--line); }
  .application-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-summary > div { padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .application-summary > div:nth-child(2n) { border-right: 0; }
  .application-summary > div:nth-child(3) { border-right: 1px solid var(--line); }
  .application-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
  .application-summary > div:nth-child(4) { border-bottom: 1px solid var(--line); }
  .application-summary > div:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .application-detail > .page-tabs { padding-inline: 14px; }
  .application-detail > .subview { padding: 14px; }
  .application-model-list > header { align-items: flex-start; }
  .application-model-row { grid-template-columns: 1fr; gap: 11px; }
  .application-model-route,
  .application-model-readiness { padding-top: 10px; }
  .application-model-actions { grid-column: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-route-group > header { align-items: flex-start; }
  .application-route-row { grid-template-columns: 46px minmax(0, 1fr); gap: 10px 12px; }
  .application-route-source,
  .application-route-model,
  .application-route-cost,
  .application-route-health { grid-column: 2; }
  .application-route-rank { grid-row: 1 / 5; align-self: stretch; align-content: start; grid-template-columns: 1fr; justify-items: center; padding-top: 2px; }
  .application-route-rank > span { grid-row: auto; }
  .application-route-rank small { white-space: normal; text-align: center; }
  .application-settings-grid { grid-template-columns: 1fr; }
  .settings-action-row { align-items: stretch; flex-direction: column; }
  .settings-action-row .button { width: 100%; }
  .route-assignment-intro { grid-template-columns: 1fr; }
  .route-assignment-intro p { grid-column: auto; }
  .route-assignment-option { grid-template-columns: 1fr; align-items: start; }
  .route-assignment-source,
  .route-assignment-price,
  .route-assignment-state,
  .route-assignment-check,
  .route-assignment-advanced { grid-column: auto; }
  .route-assignment-source,
  .route-assignment-price,
  .route-assignment-state { padding-left: 27px; }
}

/* Supplier control plane: account facts, upstream keys, then task/cost evidence. */
body[data-page="supplierControl"] .page-search { display: none; }

.control-plane-flow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.control-plane-flow > span { min-width: 0; display: grid; gap: 3px; }
.control-plane-flow > span small { color: var(--muted); font-size: 11px; }
.control-plane-flow > span strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.control-plane-flow > i { color: var(--accent); font-size: 10px; font-style: normal; font-weight: 800; }
.control-plane-flow > i::after { content: "  →"; }

.supplier-control-identity,
.account-status-stack,
.quota-cell,
.token-count-cell,
.sync-result,
.upstream-token-identity,
.token-expiry,
.model-limit-cell,
.binding-state,
.last-used-cell {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.supplier-control-identity strong,
.quota-cell strong,
.token-count-cell strong,
.sync-result strong,
.upstream-token-identity strong,
.token-expiry strong,
.model-limit-cell strong,
.binding-state strong,
.last-used-cell strong { color: var(--ink); font-size: 12px; }

.supplier-control-identity small,
.account-status-stack small,
.quota-cell small,
.token-count-cell small,
.sync-result small,
.upstream-token-identity small,
.token-expiry small,
.model-limit-cell small,
.binding-state small,
.last-used-cell small { color: var(--muted); font-size: 10px; line-height: 1.4; }

.quota-cell.converted strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.quota-cell.unverified strong { color: var(--warning); font-variant-numeric: tabular-nums; }
.quota-cell.unverified small { color: #8a6221; }

.sync-result small,
.model-limit-cell small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-result.failed strong { color: var(--danger); }
.sync-result.success strong { color: var(--accent); }

.control-capabilities {
  min-width: 210px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.control-capability { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.control-capability i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.control-capability.supported { color: var(--accent); }
.control-capability.supported i { background: var(--accent); }
.control-capability.unsupported { color: var(--danger); }
.control-capability.unsupported i { background: var(--danger); }

.control-row-actions { min-width: max-content; flex-wrap: nowrap; }

.supplier-token-workspace {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.supplier-token-context {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.supplier-token-context h3 { margin: 2px 0 5px; font-size: 16px; }
.supplier-token-context p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 11px; }

.supplier-token-context-main { min-width: min(440px, 55vw); display: grid; gap: 7px; }
.supplier-control-picker { min-width: 0; display: grid; gap: 4px; }
.supplier-control-picker select {
  width: min(420px, 100%);
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
  font-weight: 750;
}
.supplier-control-picker select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }

.upstream-token-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(135px, auto) minmax(150px, auto) auto auto;
  align-items: end;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.upstream-token-toolbar label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.upstream-token-toolbar input,
.upstream-token-toolbar select { width: 100%; min-width: 0; min-height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); }
.upstream-token-toolbar input { padding: 7px 10px; }
.upstream-token-toolbar select { padding: 6px 28px 6px 9px; }
.upstream-token-toolbar input:focus,
.upstream-token-toolbar select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.token-result-count { min-height: 34px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.token-result-count strong { color: var(--ink); font-size: 13px; }

.upstream-token-table { width: 100%; max-width: 100%; overflow: auto; scrollbar-gutter: stable; overscroll-behavior-inline: contain; }
.upstream-token-table table { min-width: 1120px; table-layout: fixed; }
.upstream-token-table th:nth-child(1) { width: 44px; }
.upstream-token-table th:nth-child(2) { width: 18%; }
.upstream-token-table th:nth-child(3) { width: 18%; }
.upstream-token-table th:nth-child(4) { width: 18%; }
.upstream-token-table th:nth-child(5) { width: 17%; }
.upstream-token-table th:nth-child(6) { width: 20%; }
.upstream-token-table th:nth-child(7) { width: 9%; }
.upstream-token-table th { position: sticky; top: 0; z-index: var(--z-table-header); background: var(--surface-muted); }
.upstream-token-table td { vertical-align: top; }
.upstream-token-table .token-select-cell { padding-inline: 10px; text-align: center; }
.upstream-token-table .token-select-cell input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.upstream-token-table tbody tr:has([data-upstream-token-select]:checked) { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.upstream-token-identity code { max-width: 210px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.token-scope-cell,
.token-upstream-state {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}
.token-scope-cell > small,
.token-upstream-state > small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.token-upstream-state > strong { color: var(--ink); font-size: 12px; }
.token-upstream-state .token-expiry { gap: 2px; }
.token-upstream-state .token-expiry strong { font-size: 10px; font-weight: 650; }
.token-upstream-state .token-expiry small { display: none; }

.token-readiness { min-width: 0; display: grid; gap: 6px; }
.token-readiness > span { min-width: 0; display: grid; grid-template-columns: 7px minmax(52px, auto) 1fr; align-items: center; gap: 5px; }
.token-readiness i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.token-readiness strong { color: var(--ink); font-size: 10px; white-space: nowrap; }
.token-readiness small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.token-readiness .ready i { background: var(--accent); }
.token-readiness .ready strong { color: var(--accent); }
.token-readiness .blocked i { background: var(--danger); }
.token-readiness .blocked strong { color: var(--danger); }
.token-readiness .pending i { background: var(--warning); }
.token-readiness .pending strong { color: var(--warning); }

.group-tags { max-width: 220px; display: flex; flex-wrap: wrap; gap: 4px; }
.group-tags span { max-width: 190px; overflow: hidden; padding: 3px 6px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.group-tags em { color: var(--muted); font-size: 10px; font-style: normal; }

.token-expiry.expired strong,
.binding-state.warning strong { color: var(--danger); }
.token-expiry.expiring strong { color: var(--warning); }
.binding-state.bound strong { color: var(--accent); }
.binding-state.unbound strong { color: var(--muted); }

.token-binding-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.token-binding-facts > span { min-width: 0; display: grid; gap: 4px; padding: 12px 14px; border-right: 1px solid var(--line); }
.token-binding-facts > span:last-child { border-right: 0; }
.token-binding-facts small { color: var(--muted); font-size: 10px; }
.token-binding-facts strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.token-binding-facts code,
.token-binding-facts em { overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.binding-current-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); }
.binding-current-card > div { min-width: 0; display: grid; gap: 4px; }
.binding-current-card small { color: var(--muted); font-size: 10px; }
.binding-current-card strong { color: var(--ink); font-size: 14px; }
.binding-current-card code { color: var(--muted); font-size: 10px; }

.token-binding-candidates { display: grid; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.token-binding-candidate { min-width: 0; display: grid; grid-template-columns: 18px minmax(180px, 1.25fr) minmax(170px, .9fr) minmax(170px, 1fr); align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.token-binding-candidate:last-child { border-bottom: 0; }
.token-binding-candidate:has(input:checked) { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.token-binding-candidate.disabled { opacity: .58; cursor: not-allowed; }
.token-import-list { display: grid; max-height: 300px; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); list-style: none; }
.token-import-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.token-import-list li:last-child { border-bottom: 0; }
.token-import-list li > span { min-width: 0; display: grid; gap: 4px; }
.token-import-list li > span:last-child { justify-items: end; text-align: right; }
.token-import-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.token-import-list code,
.token-import-list small,
.token-import-list em { overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.candidate-main,
.candidate-meta,
.candidate-result { min-width: 0; display: grid; gap: 4px; }
.candidate-main strong,
.candidate-result strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-main code { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-main small,
.candidate-meta small,
.candidate-result small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.candidate-meta em { color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; }
.match-state { width: max-content; padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.match-state.matched { color: var(--accent); background: var(--accent-soft); }
.match-state.mismatch { color: var(--danger); background: var(--danger-soft); }
.match-state.unknown { color: var(--muted); background: var(--surface-muted); }
.token-binding-confirm { margin-top: 0; }

.inline-error {
  min-height: 128px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 24px;
  color: var(--danger);
  background: var(--danger-soft);
  text-align: center;
}
.inline-error span { max-width: 720px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.token-filter-empty { border-top: 1px solid var(--line); }
.token-filter-empty[hidden] { display: none !important; }

.supplier-evidence-workspace { min-width: 0; }
.supplier-evidence-context {
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
}

.evidence-summary-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.evidence-summary-strip > span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 82px;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.evidence-summary-strip > span:last-child { border-right: 0; }
.evidence-summary-strip small { color: var(--muted); font-size: 10px; }
.evidence-summary-strip strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.evidence-summary-strip em { color: var(--faint); font-size: 9px; font-style: normal; line-height: 1.4; }
.evidence-summary-strip .danger strong { color: var(--danger); }
.evidence-summary-strip .warning strong { color: var(--warning); }

.evidence-quota-notice,
.evidence-status-warning {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d7c39a;
  border-radius: var(--radius-sm);
  color: #684712;
  background: var(--warning-soft);
  font-size: 11px;
  line-height: 1.55;
}

.evidence-quota-notice strong,
.evidence-status-warning strong { flex: 0 0 auto; color: #684712; }
.evidence-quota-notice span,
.evidence-status-warning span { min-width: 0; color: #684712; }
.evidence-status-warning { border-color: #e7b9b5; color: var(--danger); background: var(--danger-soft); }
.evidence-status-warning strong,
.evidence-status-warning span { color: var(--danger); }

.evidence-sections { min-width: 0; margin-top: 14px; }
.evidence-sections .table-section + .table-section { margin-top: 14px; }
.upstream-evidence-table { width: 100%; max-width: 100%; min-width: 0; }
.upstream-evidence-table > .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}
.upstream-evidence-table table { width: 100%; table-layout: fixed; }
.task-evidence-table table { min-width: 900px; }
.log-evidence-table table { min-width: 1060px; }
.upstream-evidence-table th { background: var(--surface-muted); }
.upstream-evidence-table td { vertical-align: top; }
.task-evidence-table th:nth-child(1) { width: 18%; }
.task-evidence-table th:nth-child(2) { width: 15%; }
.task-evidence-table th:nth-child(3) { width: 13%; }
.task-evidence-table th:nth-child(4) { width: 13%; }
.task-evidence-table th:nth-child(5) { width: 20%; }
.task-evidence-table th:nth-child(6) { width: 21%; }
.log-evidence-table th:nth-child(1) { width: 13%; }
.log-evidence-table th:nth-child(2) { width: 12%; }
.log-evidence-table th:nth-child(3) { width: 14%; }
.log-evidence-table th:nth-child(4) { width: 14%; }
.log-evidence-table th:nth-child(5) { width: 15%; }
.log-evidence-table th:nth-child(6) { width: 16%; }
.log-evidence-table th:nth-child(7) { width: 16%; }

.evidence-id-cell,
.evidence-model-cell,
.evidence-status-cell,
.evidence-quota-cell,
.evidence-time-cell,
.evidence-event-cell,
.evidence-match,
.evidence-gate {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.evidence-id-cell code {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-soft);
  font: 10px/1.45 "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-id-cell small,
.evidence-model-cell small,
.evidence-status-cell small,
.evidence-quota-cell small,
.evidence-time-cell small,
.evidence-event-cell small,
.evidence-match small,
.evidence-gate small { color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }

.evidence-model-cell strong,
.evidence-quota-cell strong,
.evidence-time-cell strong,
.evidence-match strong,
.evidence-gate strong { color: var(--ink); font-size: 11px; line-height: 1.4; }
.evidence-quota-cell strong { font-variant-numeric: tabular-nums; }
.evidence-quota-cell.debit strong { color: var(--danger); }
.evidence-quota-cell.credit strong { color: var(--accent); }
.evidence-match.matched strong,
.evidence-gate.eligible strong { color: var(--accent); }
.evidence-match.ambiguous strong,
.evidence-gate.manual strong { color: var(--warning); }
.evidence-match.conflict strong { color: var(--danger); }
.evidence-match.unmatched strong { color: var(--info); }
.evidence-match code {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font: 9px/1.4 "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evidence-inline-error { min-height: 116px; }

@media (max-width: 980px) {
  .control-plane-flow { grid-template-columns: 1fr; }
  .control-plane-flow > i { padding-left: 8px; }
  .control-plane-flow > i::after { content: "  ↓"; }
  .upstream-token-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, auto)); }
  .token-result-count { justify-content: flex-start; }
  .evidence-summary-strip { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .evidence-summary-strip > span:nth-child(3) { border-right: 0; }
  .evidence-summary-strip > span:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .supplier-token-context { align-items: flex-start; flex-direction: column; }
  .supplier-token-context-main { width: 100%; min-width: 0; }
  .supplier-token-context .toolbar { width: 100%; }
  .supplier-token-context .button { flex: 1 1 auto; }
  .upstream-token-toolbar { grid-template-columns: 1fr; }
  .token-result-count { grid-column: auto; }
  .token-binding-facts { grid-template-columns: 1fr; }
  .token-binding-facts > span { border-right: 0; border-bottom: 1px solid var(--line); }
  .token-binding-facts > span:last-child { border-bottom: 0; }
  .binding-current-card { grid-template-columns: 1fr; }
  .token-binding-candidate { grid-template-columns: 18px 1fr; }
  .token-import-list li { grid-template-columns: 1fr; gap: 7px; }
  .token-import-list li > span:last-child { justify-items: start; text-align: left; }
  .candidate-meta,
  .candidate-result { grid-column: 2; }
  .evidence-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-summary-strip > span,
  .evidence-summary-strip > span:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .evidence-summary-strip > span:nth-child(even) { border-right: 0; }
  .evidence-summary-strip > span:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
  .evidence-quota-notice,
  .evidence-status-warning { flex-direction: column; gap: 3px; }
}

@media (max-width: 430px) {
  .evidence-summary-strip { grid-template-columns: 1fr; }
  .evidence-summary-strip > span,
  .evidence-summary-strip > span:nth-child(3),
  .evidence-summary-strip > span:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--line); }
  .evidence-summary-strip > span:last-child {
    grid-column: auto;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 2026-08 admin visual foundation
   Keep the interface dense enough for operations work without making core data miniature. */
:root {
  --control-height: 40px;
  --control-height-compact: 34px;
  --content-gap: 16px;
}

body {
  font-size: 14px;
  line-height: 1.45;
}

small { line-height: 1.45; }

input,
select,
textarea {
  min-height: var(--control-height);
  font-size: 13px;
}

.field { font-size: 13px; }
.field-hint,
.form-error { font-size: 11px; }

.button {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
}

.button.small {
  min-height: var(--control-height-compact);
  padding: 6px 10px;
  font-size: 12px;
}

.button[disabled] { cursor: not-allowed; }

.app-shell { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { padding-inline: 15px; }
.workspace-identity span,
.workspace-identity small,
.sidebar-status small { font-size: 11px; }
.workspace-identity strong,
.sidebar-status strong { font-size: 12px; }
.nav-label { font-size: 11px; }

.topbar {
  min-height: 68px;
  padding: 11px 26px;
}

.breadcrumb,
.sync-state,
.account-chip small { font-size: 11px; }
.topbar h1 { font-size: 20px; }
.account-chip strong { font-size: 12px; }
.page-search { width: min(280px, 25vw); }
.page-search input { min-height: 38px; font-size: 12px; }

.content {
  max-width: none;
  padding: 22px 26px 56px;
}

.page-intro {
  align-items: center;
  margin-bottom: 16px;
}

.page-intro h2 { font-size: 21px; }
.page-intro p { font-size: 13px; }
.page-tabs { margin-bottom: 16px; }
.page-tabs button { min-height: 42px; font-size: 13px; }
.page-tabs small { font-size: 11px; }
.range-switch button { min-height: 31px; font-size: 11px; }

.summary-line {
  margin-bottom: 15px;
  background: var(--surface);
}

.summary-line > div { padding: 12px 16px; }
.summary-line span { font-size: 12px; }
.summary-line small { font-size: 11px; }
.summary-line strong { font-size: 19px; }

.metric-strip,
.overview-summary,
.overview-main,
.section-grid { gap: var(--content-gap); }
.metric { min-height: 108px; padding: 16px; }
.metric small,
.metric em { font-size: 11px; }
.metric strong { font-size: 23px; }

.panel,
.table-section,
.business-board,
.resource-overview {
  max-width: 100%;
  box-shadow: none;
}

.panel-header,
.section-header {
  min-height: 62px;
  padding: 14px 16px;
}

.panel-header h3,
.section-header h3 { font-size: 15px; }
.panel-header p,
.section-header p { font-size: 12px; }

.table-scroll {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

table { font-size: 13px; }
th {
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.35;
  vertical-align: middle;
}
td {
  padding: 12px 13px;
  font-size: 13px;
  line-height: 1.5;
}
.cell-main { gap: 4px; }
.cell-main strong { font-size: 13px; }
.cell-main small,
.secondary,
.health-cell small { font-size: 11px; }
.mono { font-size: 11px; }
.actions { align-items: center; gap: 7px; }
.badge { min-height: 24px; font-size: 11px; }

.empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 34px 24px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 13px;
  line-height: 1.65;
  text-wrap: pretty;
}

.compact-empty { min-height: 112px; padding: 24px 18px; }
.loading { font-size: 13px; }
.channel-row strong,
.profit-line { font-size: 12px; }
.channel-row small { font-size: 11px; }

/* Dense product surfaces still need readable secondary data. */
.application-workspace small,
.application-picker small,
.application-model-identity > small,
.application-model-route > small,
.application-model-route > span,
.application-model-readiness > small,
.route-summary-item small,
.route-summary-more,
.application-route-group > header small,
.application-route-cost small,
.application-settings-grid small,
.settings-action-row small,
.route-assignment-intro span,
.route-assignment-intro p,
.route-assignment-check small,
.route-assignment-state small,
.route-assignment-advanced summary,
.field-context small,
.business-board small,
.resource-overview small,
.decision-note p,
.healthy-note span,
.access-row small,
.detail-item small,
.pricing-detail small,
.pricing-detail span,
.raw-detail summary,
.upstream-sync-source small,
.upstream-sync-source > span,
.upstream-sync-summary small,
.upstream-sync-refresh span,
.upstream-sync-warnings p,
.upstream-price-table .cell-main strong,
.upstream-price-table .cell-main small,
.sync-decision,
.sync-decision-note,
.upstream-sync-loading p,
.upstream-sync-help p,
.token-group-preview-source small,
.token-group-preview-source > span,
.token-group-global-warnings p,
.token-group-preview-row small,
.token-group-preview-row code,
.token-group-change em,
.pricing-formula-value small,
.pricing-formula-empty,
.risk-item p { font-size: 11px; }

.application-model-list h4,
.application-route-group > header strong,
.business-board-header h3,
.resource-overview h3,
.upstream-sync-source strong,
.token-group-preview-source strong,
.healthy-note strong,
.access-row strong { font-size: 13px; }

.application-model-identity > strong,
.application-model-price > strong,
.application-route-cost strong,
.application-settings-grid strong,
.route-assignment-price strong,
.detail-item strong,
.pricing-detail strong { font-size: 12px; }

.risk-item > span,
.mini-tag,
.binding-kind,
.account-state { font-size: 10px; }

/* Supplier page: supplier context first, then a compact key library beside a roomy model list. */
.supplier-workspace {
  min-height: 0;
  display: block;
  background: transparent;
  overflow: visible;
}

/* Compatibility for the previous vertical rail: render it as a compact horizontal switcher. */
.supplier-rail {
  min-width: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.supplier-rail > header {
  min-height: 68px;
  padding: 11px 15px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-muted);
}

.supplier-picker-list,
.supplier-switcher {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.supplier-picker,
.supplier-switcher-item {
  min-width: 168px;
  min-height: 52px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
}

.supplier-picker:hover,
.supplier-switcher-item:hover { border-color: var(--line); background: var(--surface-muted); }
.supplier-picker.active,
.supplier-switcher-item.active,
.supplier-switcher-item[aria-pressed="true"] { border-color: #b9d8cb; background: var(--accent-soft); }
.supplier-picker strong,
.supplier-switcher-item strong { font-size: 12px; }
.supplier-picker small,
.supplier-switcher-item small { font-size: 11px; }
.supplier-picker-count strong { font-size: 15px; }

.supplier-context-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.supplier-context-bar > header,
.supplier-context-heading {
  min-width: 190px;
  flex: 0 0 auto;
}

.supplier-context-bar h3,
.supplier-context-heading h3 { margin: 0 0 3px; font-size: 15px; }
.supplier-context-bar p,
.supplier-context-heading p { margin: 0; color: var(--muted); font-size: 11px; }

.supplier-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.supplier-workspace-header {
  min-height: 66px;
  padding: 12px 16px;
  gap: 18px;
}

.supplier-current-label { margin-bottom: 3px; font-size: 11px; }
.supplier-heading-line h3 { font-size: 17px; }
.supplier-workspace-header p { margin-top: 5px; font-size: 12px; }

.section-step {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.supplier-account-pane {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}

.supplier-account-pane > header {
  min-height: 92px;
  align-items: flex-start;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-muted);
}

.supplier-account-heading h4 { font-size: 14px; }
.supplier-account-heading p { font-size: 11px; }
.supplier-account-body { grid-template-columns: minmax(0, 1fr) minmax(210px, 270px); }
.supplier-account-summary { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
.supplier-account-summary > div { padding: 12px 13px; }
.supplier-account-summary small,
.supplier-account-actions p { font-size: 11px; }
.supplier-account-summary strong { font-size: 12px; }

.supplier-account-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.supplier-account-strip .supplier-account-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.supplier-account-strip .supplier-account-summary > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
}

.supplier-config-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(310px, 370px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.credential-pane,
.supplier-model-pane {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
}

.credential-pane { border-right: 1px solid var(--line); }
.credential-pane > header,
.supplier-model-pane > header {
  min-height: 64px;
  padding: 12px 14px;
  background: var(--surface);
}

.credential-pane-header > div { min-width: 0; }
.credential-pane-header > .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.credential-pane h4,
.supplier-model-pane h4 { margin-bottom: 3px; font-size: 15px; }
.credential-pane header p,
.supplier-model-pane header p { font-size: 11px; }

.credential-profile-list {
  display: block;
  padding: 0;
  background: var(--surface);
}

.credential-profile-row {
  min-width: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}

.credential-profile-row:last-child { border-bottom: 0; }
.credential-profile-row:hover { border-color: var(--line); background: #f8faf9; }
.credential-profile-title > strong { font-size: 13px; }
.credential-profile-main > small,
.credential-url { font-size: 11px; }

.credential-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.credential-alias {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 800;
}

.credential-card-identity { min-width: 0; display: grid; gap: 3px; }
.credential-card-identity > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credential-card-identity .credential-secret-mask {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.credential-card-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.credential-card-facts {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.credential-card-facts strong { color: var(--ink-soft); font-size: 12px; }
.credential-card-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.credential-card-actions > small { color: var(--muted); font-size: 11px; }
.credential-card-actions .actions { flex: 0 0 auto; }

.credential-secret-summary { margin-top: 9px; }
.credential-secret-label,
.credential-secret-state,
.credential-profile-meta small,
.credential-profile-foot > small { font-size: 11px; }
.credential-secret-mask,
.credential-profile-meta strong { font-size: 11px; }

.supplier-model-pane { min-height: 520px; }
.supplier-model-tools {
  min-width: min(360px, 48%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.supplier-model-tools [data-supplier-model-search] {
  min-width: 210px;
  min-height: var(--control-height-compact);
  font-size: 12px;
}

.supplier-model-columns {
  grid-template-columns: minmax(150px, .44fr) minmax(0, 1.56fr) auto;
  padding: 10px 15px;
  font-size: 11px;
}

.supplier-model-row {
  grid-template-columns: minmax(155px, .44fr) minmax(0, 1.56fr) auto;
  align-items: start;
  gap: 14px;
  padding: 14px 15px;
}

.supplier-model-identity { gap: 5px; padding-top: var(--space-2xs); }
.supplier-model-identity > strong { font-size: 13px; }
.supplier-model-identity > small { font-size: 11px; }
.model-key-bindings { gap: 6px; }
.model-key-binding {
  grid-template-columns: minmax(116px, .58fr) minmax(0, 1.42fr) auto;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.model-key-binding-name > strong { font-size: 12px; }
.model-key-binding-detail { gap: 4px; }
.model-key-binding-detail span,
.model-key-binding-detail strong { font-size: 11px; }

/* The masked value is already visible once in the key library; model rows identify the key by alias/name. */
.supplier-model-pane .model-key-preview { display: none; }

.model-binding-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.model-binding-chip .credential-alias {
  width: 20px;
  height: 20px;
  color: var(--surface);
  background: var(--accent);
  font-size: 9px;
}

.model-price-formula { gap: 5px 9px; }
.supplier-model-add-key { align-self: start; margin-top: var(--space-2xs); }

@container (max-width: 1040px) {
  .supplier-account-pane { grid-template-columns: 1fr; }
  .supplier-account-pane > header {
    min-height: 64px;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .supplier-config-grid { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  .supplier-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 820px) {
  .supplier-config-grid { grid-template-columns: 1fr; }
  .credential-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .supplier-model-pane { min-height: 0; }
  .supplier-model-tools { min-width: 0; }
}

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .topbar,
  .content { padding-inline: 20px; }
  .supplier-rail { grid-template-columns: 180px minmax(0, 1fr); }
  .supplier-picker,
  .supplier-switcher-item { min-width: 158px; }
}

@media (max-width: 860px) {
  .content { padding: 20px 16px 48px; }
  .supplier-rail { display: block; }
  .supplier-rail > header {
    min-height: 56px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .supplier-context-bar { align-items: flex-start; flex-direction: column; }
  .supplier-context-bar > header,
  .supplier-context-heading { min-width: 0; }
  .supplier-switcher { width: 100%; }
  .supplier-workspace-header { align-items: flex-start; }
  .supplier-account-body { grid-template-columns: 1fr; }
  .supplier-account-actions { border-top: 1px solid var(--line); }
  .supplier-model-columns { display: none; }
  .supplier-model-row { grid-template-columns: minmax(130px, .4fr) minmax(0, 1.6fr); }
  .supplier-model-add-key { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  .topbar { padding-inline: 14px; }
  .content { padding-inline: 12px; }
  .page-intro { align-items: flex-start; }
  .page-intro h2 { font-size: 19px; }
  .supplier-picker-list,
  .supplier-switcher { display: flex; padding: 7px; overflow-x: auto; }
  .supplier-picker,
  .supplier-switcher-item { min-width: 158px; }
  .supplier-workspace-header { padding: 12px; }
  .supplier-account-summary { grid-template-columns: 1fr; }
  .supplier-account-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .supplier-account-summary > div:last-child { border-bottom: 0; }
  .supplier-account-strip { grid-template-columns: 1fr; }
  .supplier-model-pane > header { align-items: flex-start; flex-direction: column; }
  .supplier-model-tools { width: 100%; justify-content: stretch; }
  .supplier-model-tools [data-supplier-model-search] { min-width: 0; flex: 1 1 auto; }
  .credential-card-head { grid-template-columns: 30px minmax(0, 1fr); }
  .credential-card-state { grid-column: 2; justify-content: flex-start; }
  .credential-card-actions { align-items: stretch; flex-direction: column; }
  .credential-card-actions .actions { width: 100%; }
  .credential-card-actions .button { flex: 1 1 auto; }
  .supplier-model-row { grid-template-columns: 1fr; }
  .supplier-model-add-key { grid-column: auto; }
  .model-key-binding { grid-template-columns: 1fr auto; }
  .model-key-binding-detail { grid-column: 1 / -1; }
}

/* Exact structure used by the compact supplier workspace. */
body.page-channels.channels-workspace-active .page-search { display: none; }

.channels-page-toolbar {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  padding: 6px 0;
}

.channels-page-toolbar p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* The sticky top bar already names the page; content starts with context and actions. */
.page-intro { min-height: 42px; align-items: center; margin-bottom: 14px; }
.page-intro h2 { display: none; }
.page-intro p { max-width: 820px; font-size: 12px; }

body[data-page="overview"] .page-search,
body[data-page="reports"] .page-search,
body[data-page="risk"] .page-search,
body[data-page="settings"] .page-search,
body.page-applications.applications-models-active .page-search { display: none; }
.global-search-hidden .page-search { display: none; }
.topbar-actions { margin-left: auto; }

.overview-main { display: block; }
.overview-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--content-gap);
  margin-top: var(--content-gap);
}
.overview-side .panel + .panel { margin-top: 0; }

body[data-page="settings"] .section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--content-gap);
  align-items: stretch;
}

body[data-page="settings"] .section-grid > .table-section {
  height: 100%;
  margin-top: 0;
}

.supplier-context-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.supplier-switcher {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0;
  overflow: visible;
}

.supplier-switcher-label {
  min-width: 118px;
  display: grid;
  gap: 2px;
}

.supplier-switcher-label strong { color: var(--ink); font-size: 12px; }
.supplier-switcher-label small { color: var(--muted); font-size: 10px; }

.supplier-switcher-list {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.supplier-switcher-item {
  min-width: 132px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  cursor: pointer;
}

.supplier-switcher-name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-switcher-count {
  min-width: 25px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.supplier-switcher-item.active .supplier-switcher-count { color: var(--accent); background: var(--surface); }
.supplier-context-actions { display: flex; align-items: center; gap: 7px; }

.supplier-account-strip {
  grid-template-columns: minmax(205px, .75fr) minmax(0, 1.75fr) auto;
  min-height: 74px;
  padding: 10px 12px;
  background: var(--surface-muted);
}

.supplier-account-strip-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.supplier-account-strip-heading > span:last-child { min-width: 0; display: grid; gap: 2px; }
.supplier-account-strip-heading strong { color: var(--ink); font-size: 12px; }
.supplier-account-strip-heading small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-account-strip-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(70px, .55fr) minmax(120px, 1.15fr) minmax(105px, .9fr);
  align-items: stretch;
  border-inline: 1px solid var(--line);
}

.supplier-account-strip-facts > span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 4px 10px;
  border-right: 1px solid var(--line);
}

.supplier-account-strip-facts > span:last-child { border-right: 0; }
.supplier-account-strip-facts small { color: var(--muted); font-size: 10px; }
.supplier-account-strip-facts strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-account-strip-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.supplier-model-pane-header {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(300px, 1fr);
  align-items: center;
  gap: 14px;
}

.supplier-model-tools { min-width: 0; }
.supplier-model-search {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
}

.supplier-model-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.supplier-model-search input { background: var(--surface-muted); }

.supplier-model-identity > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.supplier-model-identity > span > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-model-identity > span > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-binding-chip {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 400;
  white-space: normal;
}

.model-binding-key {
  min-width: 0;
  display: grid;
  grid-template-columns: 7px auto;
  align-items: center;
  gap: 2px 7px;
}

.model-binding-key .key-status-dot { grid-row: 1 / 3; }
.model-binding-key strong { color: var(--ink); font-size: 12px; }
.model-binding-key small { color: var(--muted); font-size: 10px; }
.model-binding-summary { min-width: 0; display: grid; gap: 2px; }
.model-binding-summary strong { color: var(--accent); font-size: 12px; }
.model-binding-summary small,
.model-binding-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-binding-summary .model-binding-apps {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 750;
}

.model-binding-summary .model-binding-apps.is-unassigned {
  color: var(--warning);
  background: var(--warning-soft);
}

.model-binding-summary .model-binding-token-state {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  color: var(--accent);
  font-weight: 750;
}

.model-binding-states {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-2xs);
}

.model-binding-summary .model-binding-token-state.disabled { color: var(--danger); }
.model-binding-summary .model-binding-token-state.review { color: var(--warning); }

.model-binding-edit { flex: 0 0 auto; }

/* Application management follows the same pattern: compact horizontal app switcher, full-width detail below. */
.application-workspace {
  min-height: 0;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.application-rail {
  min-width: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.application-rail > header {
  min-height: 66px;
  padding: 11px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-muted);
}

.application-picker-list {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.application-picker {
  min-width: 178px;
  min-height: 50px;
  flex: 0 0 auto;
}

.application-detail { min-width: 0; }

.applications-page-toolbar {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.applications-page-toolbar p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.application-context-bar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.application-switcher {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.application-switcher-label {
  min-width: 120px;
  display: grid;
  gap: 2px;
}

.application-switcher-label strong { color: var(--ink); font-size: 12px; }
.application-switcher-label small { color: var(--muted); font-size: 10px; }
.application-switcher-list {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.application-switcher-item {
  min-width: 140px;
  min-height: 42px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
}

.application-switcher-item:hover { border-color: var(--line); background: var(--surface-muted); }
.application-switcher-item:focus-visible { outline: none; box-shadow: var(--focus); }
.application-switcher-item.active,
.application-switcher-item[aria-pressed="true"] { border-color: #b9d8cb; background: var(--accent-soft); }
.application-switcher-name {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-switcher-count {
  min-width: 25px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.application-switcher-item.active .application-switcher-count { color: var(--accent); background: var(--surface); }
.application-context-actions { display: flex; align-items: center; gap: 7px; }

.application-status-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.application-status-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
  border-right: 1px solid var(--line);
}

.application-status-metrics > span {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 4px 14px 4px 4px;
}

.application-status-metrics small { color: var(--muted); font-size: 10px; }
.application-status-metrics strong { color: var(--ink); font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.application-status-metrics .healthy strong { color: var(--accent); }
.application-status-metrics .warning strong { color: var(--warning); }

.application-flow-compact {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.application-flow-compact li {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-content: center;
  gap: 2px 8px;
  padding: 6px 10px;
  background: var(--surface);
}

.application-flow-compact li > span {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 10px;
  font-weight: 800;
}

.application-flow-compact li > strong {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-flow-compact li > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-flow-compact li.complete > span { color: #fff; background: var(--accent); }
.application-flow-compact li.current > span { color: var(--warning); background: var(--warning-soft); }
.application-detail > .page-tabs { margin: 0; padding-inline: 14px; }

.application-model-list { min-width: 0; }
.application-model-list-header {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(300px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.application-model-list-header h4 { margin: 0 0 3px; font-size: 15px; }
.application-model-list-header p { margin: 0; color: var(--muted); font-size: 11px; }
.application-model-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.application-model-search { min-width: 0; flex: 1 1 auto; display: block; }
.application-model-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.application-model-search input {
  min-width: 210px;
  min-height: var(--control-height-compact);
  font-size: 12px;
  background: var(--surface-muted);
}

.application-model-rows { min-width: 0; }
.application-model-row {
  min-width: 0;
  grid-template-columns: minmax(130px, 1.08fr) minmax(105px, .74fr) minmax(150px, 1.2fr) minmax(105px, .76fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}

.application-model-identity > strong { font-size: 13px; }
.application-model-identity > small { font-size: 11px; }
.application-model-price > small,
.application-model-route > small,
.application-model-readiness > small,
.application-model-route > span,
.route-summary-item small { font-size: 10px; }
.application-model-price > strong { font-size: 12px; }
.application-model-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Collapse navigation a little earlier so 900px-wide QA still gives the data workspace enough room. */
@media (max-width: 960px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 248px;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    z-index: var(--z-sidebar-backdrop);
    inset: 0;
    display: block;
    border: 0;
    background: rgba(8, 22, 17, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  .mobile-menu { display: grid; }
  .content { padding-inline: 18px; }
  .application-rail { grid-template-columns: 190px minmax(0, 1fr); }
  body[data-page="settings"] .section-grid { grid-template-columns: 1fr; }
}

@container (max-width: 920px) {
  .supplier-account-strip {
    grid-template-columns: minmax(185px, .7fr) minmax(0, 1.3fr);
  }
  .supplier-account-strip-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
}

@container (max-width: 740px) {
  .supplier-config-grid { grid-template-columns: 1fr; }
  .credential-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .supplier-account-strip { grid-template-columns: 1fr; }
  .supplier-account-strip-facts { border: 1px solid var(--line); }
  .supplier-account-strip-actions { grid-column: auto; justify-content: flex-start; }
  .supplier-model-pane-header { grid-template-columns: 1fr; }
  .supplier-model-tools { width: 100%; justify-content: flex-start; }
}

@container (max-width: 760px) {
  .application-status-strip { grid-template-columns: 1fr; }
  .application-status-metrics { border-right: 0; border-bottom: 1px solid var(--line); }
  .application-model-list-header { grid-template-columns: 1fr; }
  .application-model-tools { justify-content: flex-start; }
  .application-model-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-model-actions { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .channels-page-toolbar { align-items: flex-start; flex-direction: column; }
  .applications-page-toolbar { align-items: flex-start; flex-direction: column; }
  .supplier-context-bar { grid-template-columns: 1fr; align-items: stretch; }
  .supplier-switcher { grid-template-columns: 1fr; gap: 7px; }
  .supplier-switcher-label { min-width: 0; }
  .supplier-context-actions { justify-content: flex-start; }
  .supplier-account-strip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-account-strip-facts > span:nth-child(2) { border-right: 0; }
  .supplier-account-strip-facts > span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .application-rail { display: block; }
  .application-rail > header { border-right: 0; border-bottom: 1px solid var(--line); }
  .application-context-bar { grid-template-columns: 1fr; align-items: stretch; }
  .application-switcher { grid-template-columns: 1fr; gap: 7px; }
  .application-switcher-label { min-width: 0; }
  .application-context-actions { justify-content: flex-start; }
  .application-flow-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-model-tools { width: 100%; }
  .application-model-search input { min-width: 0; }
  .overview-side { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .application-model-row { grid-template-columns: 1fr; }
  .application-model-route,
  .application-model-readiness { min-width: 0; width: 100%; }
  .application-model-actions { grid-column: auto; }
  .route-summary-item { flex-wrap: wrap; }
}

/* Unified model catalog: filters stay attached to the list they control. */
body[data-page="models"] .page-search { display: none; }

.model-catalog {
  min-width: 0;
  display: grid;
  background: var(--surface);
}

.model-catalog-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(130px, 160px) minmax(130px, 160px) auto;
  align-items: end;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.model-catalog-search,
.model-catalog-filter {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.model-catalog-search > span,
.model-catalog-filter > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.model-catalog-search input,
.model-catalog-filter select {
  min-width: 0;
  min-height: 38px;
  font-size: 12px;
  background: var(--surface-muted);
}

.model-catalog-reset {
  min-height: 38px;
  align-self: end;
  white-space: nowrap;
}

.model-catalog-result-line {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--surface-muted);
  font-size: 12px;
}

.model-catalog-result-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-catalog-result-line > small { flex: 0 0 auto; color: var(--muted); font-size: 11px; }

.model-catalog-table {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.model-catalog-table table { min-width: 720px; table-layout: auto; }
.model-catalog-table th:first-child,
.model-catalog-table td:first-child { width: 44%; }
.model-catalog-table th:last-child,
.model-catalog-table td:last-child { width: 1%; white-space: nowrap; }
.model-catalog-table td { vertical-align: middle; }

.model-catalog-empty {
  min-height: 220px;
  gap: 5px;
  border-bottom: 1px solid var(--line);
}

.model-catalog-empty[hidden] { display: none; }
.model-catalog-empty strong { color: var(--ink); font-size: 14px; }
.model-catalog-empty span { color: var(--muted); font-size: 12px; }

.model-catalog-pagination {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.model-catalog-pagination[hidden] { display: none; }
.model-catalog-pagination > span {
  min-width: 92px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.model-catalog-pagination .button { min-width: 76px; }

/* Audit rows disclose machine details on demand without letting raw payloads widen the page. */
.audit-change-summary {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-operation,
.audit-change { min-width: 0; display: grid; gap: 4px; }
.audit-operation strong { color: var(--ink); font-size: 12px; }
.audit-operation small { color: var(--muted); font-size: 11px; }

.audit-detail,
.audit-change-details {
  width: min(100%, 560px);
  max-width: 100%;
  color: var(--ink-soft);
}

.audit-detail > summary,
.audit-change-details > summary {
  padding: 4px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.audit-detail[open] > summary,
.audit-change-details[open] > summary { margin-bottom: 7px; color: var(--ink); }
.audit-detail pre,
.audit-detail code,
.audit-change-details pre,
.audit-change-details code {
  max-width: 100%;
  color: var(--ink-soft);
  font: 11px/1.55 "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.audit-detail pre,
.audit-change-details pre {
  max-height: 260px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  overflow: auto;
  white-space: pre-wrap;
}

.audit-detail code,
.audit-change-details code { white-space: normal; }
.audit-action-code { display: block; margin-bottom: 7px; color: var(--muted); }
.audit-raw-json { white-space: pre-wrap; }

@media (max-width: 820px) {
  .model-catalog-controls {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(120px, .55fr));
  }
  .model-catalog-reset { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 580px) {
  .model-catalog-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-catalog-search { grid-column: 1 / -1; }
  .model-catalog-reset { grid-column: 1 / -1; width: 100%; }
  .model-catalog-result-line { align-items: flex-start; flex-direction: column; gap: 3px; }
  .model-catalog-result-line > span { white-space: normal; }
  .model-catalog-pagination { justify-content: space-between; gap: 7px; }
  .model-catalog-pagination .button { min-width: 0; }
}

/* Core operations pages: keep context brief and place controls beside the data they affect. */
.page-command-bar {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.page-command-bar > p {
  max-width: 76ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.page-command-bar .toolbar { flex: 0 0 auto; }

.supplier-stage-nav {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.supplier-stage-nav > button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.supplier-stage-nav > button:hover { border-color: var(--line-strong); background: var(--surface); }
.supplier-stage-nav > button:focus-visible { outline: none; box-shadow: var(--focus); }
.supplier-stage-nav > button.active { border-color: #b8ddcf; color: var(--ink); background: var(--surface); }
.supplier-stage-nav > button small {
  grid-row: 1 / 3;
  align-self: center;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
  font-weight: 750;
}
.supplier-stage-nav > button.active small { color: var(--accent); background: var(--accent-soft); }
.supplier-stage-nav > button strong { min-width: 0; font-size: 13px; line-height: 1.3; }
.supplier-stage-nav > button span { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.supplier-stage-nav > i { align-self: center; color: var(--faint); font-size: 16px; font-style: normal; }

.supplier-setup-empty {
  min-height: 220px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 28px;
  color: var(--ink-soft);
  background: var(--surface-muted);
}

.supplier-setup-empty.compact { min-height: 190px; padding: 24px 18px; }
.supplier-setup-empty strong { color: var(--ink); font-size: 13px; }
.supplier-setup-empty p {
  max-width: 54ch;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  text-wrap: pretty;
}
.supplier-model-pane-header .button[disabled] { cursor: not-allowed; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.list-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.list-search,
.list-filter {
  position: relative;
  min-width: 0;
  display: block;
}

.list-search input {
  width: min(310px, 28vw);
  min-width: 220px;
  min-height: 38px;
  background: var(--surface-muted);
  font-size: 12px;
}

.list-filter select {
  width: 142px;
  min-height: 38px;
  background: var(--surface-muted);
  font-size: 12px;
}

.filterable-table { min-width: 0; }
.list-filter-empty { min-height: 180px; }
.list-filter-empty[hidden] { display: none; }

body[data-page="tasks"] .page-search,
body[data-page="users"] .page-search { display: none; }

body[data-page="tasks"] .task-table table { min-width: 1300px; }
body[data-page="tasks"] .task-table th:nth-child(n + 6):nth-child(-n + 9),
body[data-page="tasks"] .task-table td:nth-child(n + 6):nth-child(-n + 9) {
  min-width: 104px;
}
body[data-page="users"] [data-user-table] table { min-width: 860px; }
body[data-page="risk"] .table-section table { min-width: 860px; }
body[data-page="reports"] .table-section table { min-width: 720px; }

body[data-page="tasks"] .task-health { margin-bottom: 14px; }
body[data-page="tasks"] .healthy-note.task-health {
  min-height: 46px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid #b8ddcf;
  border-radius: var(--radius-sm);
}

.risk-summary .summary-line > div:nth-child(2) strong { color: var(--danger); }
.risk-summary .summary-line > div:nth-child(3) strong,
.risk-summary .summary-line > div:nth-child(4) strong { color: var(--warning); }

.report-metric-strip .metric:nth-child(-n+3) { background: #fbfdfc; }
.reports-command-bar .range-switch { flex: 0 0 auto; }

@media (max-width: 1100px) {
  body[data-page="tasks"] .section-header,
  body[data-page="users"] .section-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body[data-page="tasks"] .section-header .toolbar,
  body[data-page="users"] .section-header .toolbar {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  body[data-page="tasks"] .list-controls { width: 100%; justify-content: flex-start; }
  body[data-page="tasks"] .list-search { flex: 1 1 280px; }
  body[data-page="tasks"] .list-search input { width: 100%; }
}

@media (max-width: 960px) {
  .page-tabs {
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .page-tabs button { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  .supplier-stage-nav { grid-template-columns: 1fr; }
  .supplier-stage-nav > i { display: none; }
  .page-command-bar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .page-command-bar .toolbar { width: 100%; justify-content: flex-start; }
  .list-controls { width: 100%; align-items: stretch; flex-direction: column; }
  .list-search,
  .list-search input,
  .list-filter,
  .list-filter select { width: 100%; min-width: 0; }
  body[data-page="tasks"] .healthy-note.task-health { grid-template-columns: 1fr; }
}

/* Automatic cost gate: version review and currency semantics stay visible before evidence tables. */
.semantics-audit-gate {
  min-width: 0;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.semantics-gate-header {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
}

.semantics-state-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(150, 98, 25, .12);
}

.semantics-audit-gate.ready .semantics-state-mark {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 122, 93, .12);
}

.semantics-audit-gate.blocked .semantics-state-mark {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(180, 61, 53, .11);
}

.semantics-gate-header > div { min-width: 0; }
.semantics-gate-header > div:first-of-type { display: grid; gap: 3px; }
.semantics-gate-header small { color: var(--muted); font-size: 10px; }
.semantics-gate-header h3 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.35; }
.semantics-audit-gate.ready .semantics-gate-header h3 { color: var(--accent); }
.semantics-audit-gate.incomplete .semantics-gate-header h3 { color: var(--warning); }
.semantics-audit-gate.blocked .semantics-gate-header h3 { color: var(--danger); }
.semantics-gate-header p { max-width: 78ch; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-wrap: pretty; }

.semantics-gate-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 1px;
  border-block: 1px solid var(--line);
  background: var(--line);
}

.semantics-gate-facts > span {
  min-width: 0;
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 11px 13px;
  background: var(--surface-muted);
}

.semantics-gate-facts small { color: var(--muted); font-size: 10px; }
.semantics-gate-facts strong { min-width: 0; color: var(--ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.semantics-gate-facts em { min-width: 0; color: var(--faint); font-size: 9px; font-style: normal; line-height: 1.45; overflow-wrap: anywhere; }
.semantics-gate-facts code,
.semantics-audit-history code,
.semantics-revoke-summary code {
  color: var(--ink-soft);
  font: 10px/1.45 "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.observed-version-list { display: flex; flex-wrap: wrap; gap: 4px; }
.observed-version-list code { padding: 2px 5px; border-radius: 4px; color: var(--info); background: var(--info-soft); }
.observed-version-list > span { color: var(--muted); font-weight: 600; }
.semantics-formula strong { color: var(--accent); }

.cost-basis-explainer {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.cost-basis-explainer > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 14px;
  background: var(--surface);
}

.cost-basis-explainer strong { color: var(--ink); font-size: 11px; }
.cost-basis-explainer small { color: var(--muted); font-size: 10px; line-height: 1.55; text-wrap: pretty; }

.auto-cost-sync-result {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(480px, 1.6fr);
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border-top: 1px solid #b8ddcf;
  color: var(--ink);
  background: var(--accent-soft);
}

.auto-cost-sync-result.has-conflict { border-top-color: #d7c39a; background: var(--warning-soft); }
.auto-cost-sync-result > div { min-width: 0; display: grid; gap: 4px; }
.auto-cost-sync-result > div strong { color: var(--accent); font-size: 11px; }
.auto-cost-sync-result.has-conflict > div strong { color: var(--warning); }
.auto-cost-sync-result > div span { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.auto-cost-sync-result dl { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(72px, 1fr)); gap: 1px; margin: 0; background: rgba(8, 122, 93, .18); }
.auto-cost-sync-result.has-conflict dl { background: rgba(150, 98, 25, .2); }
.auto-cost-sync-result dl > div { min-width: 0; display: grid; gap: 3px; padding: 7px 9px; background: rgba(255, 255, 255, .78); }
.auto-cost-sync-result dt { color: var(--muted); font-size: 9px; }
.auto-cost-sync-result dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 780; font-variant-numeric: tabular-nums; }

.semantics-audit-history { border-top: 1px solid var(--line); }
.semantics-audit-history > summary { padding: 10px 14px; color: var(--ink-soft); font-size: 10px; font-weight: 750; cursor: pointer; }
.semantics-audit-history > summary:hover { color: var(--ink); background: var(--surface-muted); }
.semantics-audit-history > summary:focus-visible { outline: none; box-shadow: inset var(--focus); }
.semantics-audit-history ol { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.semantics-audit-history li { min-width: 0; display: grid; grid-template-columns: 92px minmax(180px, 1fr) minmax(160px, .65fr); align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.semantics-audit-history li:last-child { border-bottom: 0; }
.semantics-audit-history li > span { min-width: 0; display: grid; gap: 3px; }
.semantics-audit-history li strong { color: var(--ink); font-size: 10px; }
.semantics-audit-history li small { color: var(--muted); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.semantics-history-error { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #e7b9b5; color: var(--danger); background: var(--danger-soft); font-size: 10px; }

.semantics-audit-gate + .evidence-summary-strip {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
}

.semantics-confirm-intro {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #d7c39a;
  border-radius: var(--radius-sm);
  color: #684712;
  background: var(--warning-soft);
}

.semantics-confirm-intro strong { font-size: 12px; }
.semantics-confirm-intro p { max-width: 74ch; margin: 0; font-size: 10px; line-height: 1.55; text-wrap: pretty; }
.semantics-confirm-form { margin-top: 16px; }
.semantics-confirm-choice { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.semantics-revoke-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.semantics-revoke-summary > span { min-width: 0; display: grid; gap: 5px; padding: 11px 13px; background: var(--surface-muted); }
.semantics-revoke-summary > span + span { border-left: 1px solid var(--line); }
.semantics-revoke-summary small { color: var(--muted); font-size: 10px; }
.semantics-revoke-summary strong { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .semantics-gate-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-cost-sync-result { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .semantics-gate-header { grid-template-columns: 12px minmax(0, 1fr); align-items: start; }
  .semantics-gate-header .toolbar { grid-column: 1 / -1; width: 100%; }
  .semantics-gate-header .button { width: 100%; }
  .semantics-gate-facts,
  .cost-basis-explainer { grid-template-columns: 1fr; }
  .semantics-gate-facts > span { min-height: 0; }
  .auto-cost-sync-result dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .semantics-audit-history li { grid-template-columns: 1fr; gap: 6px; }
  .semantics-history-error { flex-direction: column; gap: 3px; }
  .semantics-revoke-summary { grid-template-columns: 1fr; }
  .semantics-revoke-summary > span + span { border-left: 0; border-top: 1px solid var(--line); }
}

/* Final small-screen override: every page category stays visible instead of being cut off. */
@media (max-width: 640px) {
  .page-tabs {
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding-bottom: 10px;
    overflow: visible;
  }
  .page-tabs button {
    min-height: 34px;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
  }
  .page-tabs button::after { display: none; }
  .page-tabs button[aria-selected="true"] {
    border-color: #b9d8cb;
    background: var(--accent-soft);
  }
  .application-detail > .page-tabs { padding: 10px 14px; }
}

/* Supplier operations: four explicit work areas, with monitoring separate from keys. */
.supplier-domain-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.supplier-domain-tabs button {
  min-width: 0;
  min-height: 62px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: 11px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.supplier-domain-tabs button:last-child { border-right: 0; }
.supplier-domain-tabs button:hover { color: var(--ink); background: var(--surface-muted); }
.supplier-domain-tabs button:focus-visible { position: relative; z-index: 1; outline: none; box-shadow: inset var(--focus); }
.supplier-domain-tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
.supplier-domain-tabs button span { overflow: hidden; max-width: 100%; font-size: 13px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.supplier-domain-tabs button small { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.supplier-monitor-workspace {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.supplier-monitor-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.supplier-monitor-header p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 11px; }

.supplier-account-overview {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.supplier-account-overview > span {
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.supplier-account-overview small { color: var(--muted); font-size: 10px; }
.supplier-account-overview strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.supplier-account-overview em { color: var(--faint); font-size: 9px; font-style: normal; line-height: 1.45; text-wrap: pretty; }
.supplier-account-overview .warning strong { color: var(--warning); }
.supplier-account-overview .danger strong { color: var(--danger); }

.settlement-rule {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 12px 15px;
  border-bottom: 1px solid #b9d8cb;
  color: var(--ink);
  background: var(--accent-soft);
}

.settlement-rule.missing { border-bottom-color: #d7c39a; background: var(--warning-soft); }
.settlement-rule > span { min-width: 0; display: grid; gap: 4px; }
.settlement-rule small { color: var(--muted); font-size: 10px; }
.settlement-rule strong { color: var(--accent); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.settlement-rule.missing strong { color: var(--warning); }
.settlement-rule p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; text-wrap: pretty; }
.supplier-monitor-workspace > .table-section { border: 0; border-radius: 0; }
.supplier-monitor-workspace > .table-section .section-header { border-top: 0; }

.supplier-settlement-cell {
  min-width: 150px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.supplier-settlement-cell strong { color: var(--ink); font-size: 11px; white-space: nowrap; }
.supplier-settlement-cell small { color: var(--muted); font-size: 9px; }

.supplier-evidence-workspace > .settlement-rule {
  margin-top: 12px;
  border: 1px solid #b9d8cb;
  border-radius: var(--radius-sm);
}

.evidence-cost-formula {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.evidence-cost-formula strong { color: var(--ink); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.evidence-cost-formula small { color: var(--accent); font-size: 10px; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.evidence-cost-formula.pending strong { color: var(--warning); }
.evidence-cost-formula.pending small { color: var(--muted); font-weight: 500; }

.log-evidence-table table { min-width: 1210px; }
.log-evidence-table th:nth-child(1) { width: 11%; }
.log-evidence-table th:nth-child(2) { width: 10%; }
.log-evidence-table th:nth-child(3) { width: 12%; }
.log-evidence-table th:nth-child(4) { width: 12%; }
.log-evidence-table th:nth-child(5) { width: 15%; }
.log-evidence-table th:nth-child(6) { width: 13%; }
.log-evidence-table th:nth-child(7) { width: 13%; }
.log-evidence-table th:nth-child(8) { width: 14%; }

.settlement-settings-section .section-form-copy {
  max-width: 74ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-wrap: pretty;
}

.settlement-settings-section .settlement-rule {
  margin-top: 14px;
  border: 1px solid #b9d8cb;
  border-radius: var(--radius-sm);
}

@media (max-width: 1180px) {
  .supplier-account-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .supplier-domain-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-domain-tabs button:nth-child(2) { border-right: 0; }
  .supplier-domain-tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .supplier-monitor-header { align-items: flex-start; flex-direction: column; }
  .supplier-monitor-header .toolbar { width: 100%; }
  .supplier-monitor-header .button { flex: 1 1 auto; }
  .settlement-rule { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 620px) {
  .supplier-domain-tabs { grid-template-columns: 1fr; }
  .supplier-domain-tabs button,
  .supplier-domain-tabs button:nth-child(2) { min-height: 52px; border-right: 0; border-bottom: 1px solid var(--line); }
  .supplier-domain-tabs button:last-child { border-bottom: 0; }
  .supplier-account-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-monitor-header .toolbar { display: grid; grid-template-columns: 1fr; }
  .supplier-monitor-header .button { width: 100%; }
}

@media (max-width: 420px) {
  .supplier-account-overview { grid-template-columns: 1fr; }
  .supplier-account-overview > span { min-height: 76px; }
}