/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console (deal 1/3, seed internal-qris-payment-gateway-6c74·89c777ad·2026-11-02·r0) · redesign: full
 * nav: 240px rail, sentence-case destinations, off-canvas under 60rem · signature: the payment-state ledger, measured in tabular mono · states: empty, error, full, action feedback · console: graphite, amber for people, cool for instruments
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: E, the generated detail forms keep their old grouping, so they are flattened into ruled sections instead of rebuilding them as cards */
/* Hallmark · dismissed 49 · the provider cards are a stacked list, their labels wrap inside a full-width column */
/* Hallmark · reworded "Good morning, operator." to "Overview" · 54 names the greeting above the ledger as an eyebrow */
/* Hallmark · reworded "Enter login details" to "Sign-in details" · 71 names the duplicate head directly under the same title */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --surface-ground: var(--color-paper);
  --surface-panel: var(--color-paper-2);
  --surface-well: var(--color-paper-3);
  --line: var(--color-rule);
  --line-strong: var(--color-rule-2);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-2);
  --text-muted: var(--color-muted);
  --accent: var(--color-accent);
  --accent-ink: var(--color-accent-ink);
  --accent-soft: var(--color-accent-soft);
  --instrument: var(--color-cool);
  --instrument-soft: var(--color-cool-soft);
  --ok: var(--color-ok);
  --ok-soft: var(--color-ok-soft);
  --bad: var(--color-bad);
  --bad-soft: var(--color-bad-soft);
  --rail-width: 240px;
  --topbar-height: 64px;
}

body {
  background: var(--surface-ground);
  color: var(--text-secondary);
  font-size: var(--text-md);
}

a { text-decoration-color: var(--line-strong); }
a:hover { color: var(--accent); }

button, input, select, textarea { color: inherit; }
input, select, textarea {
  min-height: 36px;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--surface-well);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
input::placeholder { color: var(--text-muted); }
input:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
select { appearance: none; padding-right: var(--space-xl); background-image: none; }

/* Shell ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: calc(-1 * var(--space-2xl));
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}
.skip-link:focus { top: var(--space-md); }

.app-frame {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  height: 100dvh;
  padding: var(--space-lg) var(--space-md);
  background: var(--surface-well);
  border-right: var(--rule-hair) solid var(--line);
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-inline: var(--space-xs);
  color: var(--text-primary);
  text-decoration: none;
}
.brand-word {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.brand-word::after { content: "·"; color: var(--accent); margin-left: var(--space-3xs); }
.brand-caption { color: var(--text-muted); font-size: var(--text-xs); }

.nav-list { display: flex; flex-direction: column; gap: var(--space-3xs); }
.nav-label {
  margin: var(--space-md) var(--space-xs) var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}
.nav-label:first-child { margin-top: 0; }
.nav-link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav-link:hover { background: var(--surface-panel); color: var(--text-primary); }
.nav-link:active { background: var(--surface-ground); }
.nav-link.is-active { background: var(--surface-panel); color: var(--text-primary); box-shadow: inset 2px 0 var(--accent); }

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--instrument); }

.main-column { min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--topbar-height);
  padding: var(--space-xs) var(--space-lg);
  background: var(--surface-ground);
  border-bottom: var(--rule-hair) solid var(--line);
}
.topbar-meta { display: flex; align-items: baseline; gap: var(--space-md); min-width: 0; }
.topbar-title { color: var(--text-primary); font-size: var(--text-md); font-weight: 500; }
.connection-state { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.topbar-actions .button { white-space: nowrap; }
.reason-inline { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); font-size: var(--text-xs); }
.reason-inline input { width: 220px; min-height: 32px; font-size: var(--text-xs); }
.icon-button { display: none; }

.workspace {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-3xl);
}

/* Controls --------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-panel);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.button:hover { background: var(--surface-well); border-color: var(--accent); color: var(--text-primary); }
.button:active { background: var(--surface-ground); }
.button:disabled { opacity: 0.55; cursor: not-allowed; border-color: var(--line); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); filter: brightness(1.06); }
.button-primary:active { filter: brightness(0.94); }
.button-secondary { background: transparent; }
.button-quiet { background: transparent; border-color: transparent; color: var(--text-secondary); }
.button-quiet:hover { background: var(--surface-panel); border-color: var(--line); }
.compact-button { min-height: 30px; padding: var(--space-3xs) var(--space-sm); font-size: var(--text-xs); }
.link-button {
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
}
.link-button:hover { color: var(--accent); }
.action-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Status banner ---------------------------------------------------------- */
.status-banner {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-panel);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.status-banner.is-success { border-color: var(--ok); color: var(--text-primary); }
.status-banner.is-error { border-color: var(--bad); background: var(--bad-soft); color: var(--text-primary); }
.status-banner.is-warn { border-color: var(--accent); color: var(--text-primary); }
.status-banner.is-secret { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.one-time-secret { flex: 1 1 320px; min-width: 0; padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-well); color: var(--text-primary); font-family: var(--font-outlier); font-size: var(--text-xs); overflow-wrap: anywhere; user-select: all; }

/* Page headers ----------------------------------------------------------- */
.route-page { display: none; }
.route-page.is-visible { display: block; }

.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--line);
}
.page-intro h1 { max-width: 24ch; color: var(--text-primary); font-size: var(--text-2xl); }
.page-summary { max-width: 64ch; margin-top: var(--space-xs); color: var(--text-muted); }
.page-stamp {
  display: grid;
  gap: var(--space-3xs);
  padding-top: var(--space-xs);
  border-top: var(--rule-hair) solid var(--line-strong);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-align: right;
}
.page-stamp strong { color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; }
.stamp-label { color: var(--text-muted); }

.section-block {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--line);
}
.section-block:first-of-type { border-top: 0; }
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.section-heading-stack { align-items: start; }
.section-heading h2 { color: var(--text-primary); font-size: var(--text-xl); max-width: 34ch; }
.section-heading h3 { color: var(--text-primary); font-size: var(--text-lg); }
.section-copy { max-width: 72ch; margin-top: var(--space-2xs); color: var(--text-muted); font-size: var(--text-sm); }
.section-note { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.subhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); }
.subhead h3 { color: var(--text-primary); font-size: var(--text-md); }
.subhead span { color: var(--text-muted); font-size: var(--text-xs); }

/* Overview ledger -------------------------------------------------------- */
.state-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-panel);
}
.state-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-right: var(--rule-hair) solid var(--line);
}
.state-cell:last-child { border-right: 0; }
.state-label { color: var(--text-muted); font-size: var(--text-xs); }
.state-value {
  color: var(--text-primary);
  font-family: var(--font-outlier);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1;
}
.state-cell[data-status="paid"] .state-value { color: var(--ok); }
.state-cell[data-status="pending"] .state-value { color: var(--accent); }
.state-cell[data-status="failed"] .state-value,
.state-cell[data-status="expired"] .state-value,
.state-cell[data-status="canceled"] .state-value { color: var(--bad); }
.state-cell.is-zero .state-value { color: var(--text-muted); font-family: var(--font-body); }
.state-grid:has(> .empty-state) { display: block; }
.state-grid > .empty-state { border: 0; padding: var(--space-md); }
.summary-line { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); color: var(--text-muted); font-size: var(--text-xs); }
.summary-line strong { color: var(--text-primary); font-family: var(--font-outlier); font-weight: 400; }

.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.ops-column { min-width: 0; }
.split-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.list-region { display: flex; flex-direction: column; }
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--line);
}
.list-item:last-child { border-bottom: 0; }
.list-main { min-width: 0; }
.list-title { color: var(--text-primary); font-size: var(--text-sm); overflow-wrap: anywhere; }
.list-meta { color: var(--text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.list-meta.key-revoked { color: var(--bad); }
.status-text { font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.status-text.good { color: var(--ok); }
.status-text.warn { color: var(--accent); }
.status-text.bad { color: var(--bad); }
.empty-state {
  margin: 0;
  padding: var(--space-md);
  border: var(--rule-hair) dashed var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.empty-state.error-state { border-color: var(--bad); color: var(--bad); }

/* Tables ----------------------------------------------------------------- */
.table-region { width: 100%; overflow-x: auto; }
.table-region table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-region th {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--line-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.table-region td {
  padding: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--line);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.table-region tbody tr:hover { background: var(--surface-panel); }
.table-region tbody tr:last-child td { border-bottom: 0; }

/* Forms ------------------------------------------------------------------ */
.management-form, .detail-form, .playground-form { display: grid; gap: var(--space-md); }
.business-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; }
.filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); }
.filter-row label { min-width: 140px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.full-width { grid-column: 1 / -1; }
label { display: grid; gap: var(--space-2xs); color: var(--text-secondary); font-size: var(--text-xs); }
label > span { color: var(--text-muted); font-weight: 500; }
label small { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }
.detail-form-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.detail-form-stacked { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.form-help { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.form-help.is-success { color: var(--ok); }
.form-help.is-error { color: var(--bad); }
.reason-field { min-width: 260px; }
.wide-field { width: 100%; }

/* Business detail -------------------------------------------------------- */
.business-workspace { display: grid; gap: var(--space-lg); }
.business-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); }
.business-detail-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-lg); }
.business-detail-head h2 { color: var(--text-primary); font-size: var(--text-xl); }
.detail-actions { justify-content: flex-end; }
.detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--line); }
.detail-summary dt, .detail-summary dd { margin: 0; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--line); font-size: var(--text-sm); }
.detail-summary dt { color: var(--text-muted); }
.detail-summary dd { color: var(--text-primary); }
.detail-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.detail-setup-grid > .detail-section:nth-child(3) { grid-column: 1 / -1; }
.detail-section { min-width: 0; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--line-strong); }
.detail-section h3 { color: var(--text-primary); font-size: var(--text-md); }
.detail-section-copy { margin: var(--space-2xs) 0 var(--space-md); color: var(--text-muted); font-size: var(--text-xs); }
.detail-key-list { display: flex; flex-direction: column; }
.detail-key-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--line); }
.detail-key-row strong { display: block; color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; }
.detail-key-row span { display: block; }
.detail-subheading { margin: var(--space-md) 0 var(--space-2xs); color: var(--text-primary); font-size: var(--text-md); }

/* Providers -------------------------------------------------------------- */
.provider-scope-field { min-width: 280px; }
.setup-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-lg); }
.setup-guide { display: flex; flex-direction: column; gap: 0; border-left: var(--rule-hair) solid var(--line); }
.guide-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--line); }
.guide-step > span { color: var(--text-muted); font-family: var(--font-outlier); font-size: var(--text-xs); }
.guide-step strong { display: block; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
.guide-step p { color: var(--text-muted); font-size: var(--text-xs); }
.guide-step.is-active { border-left: 2px solid var(--accent); margin-left: -1px; }
.guide-step.is-active strong { color: var(--text-primary); }
.setup-panel { min-width: 0; padding: var(--space-md); border: var(--rule-hair) solid var(--line); border-radius: var(--radius-card); background: var(--surface-panel); color: var(--text-secondary); }
.guided-form { display: grid; gap: var(--space-md); }
.guided-form > .button, .wizard-step > .button { justify-self: start; }
.form-section-heading { display: flex; align-items: baseline; gap: var(--space-sm); }
.step-number { color: var(--accent); font-family: var(--font-outlier); font-size: var(--text-sm); }
.wizard-step { display: grid; gap: var(--space-md); }
.wizard-step h4 { margin: 0; color: var(--text-primary); font-size: var(--text-md); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.provider-choice, .method-choice {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-well);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.provider-choice:hover, .method-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.provider-choice:active, .method-choice:active { background: var(--surface-panel); }
.provider-choice strong, .method-choice strong { font-weight: 500; }
.provider-choice span, .method-choice span, .choice-list span { color: var(--text-muted); font-size: var(--text-xs); }
.choice-list { display: grid; gap: var(--space-xs); }
.wizard-back { justify-self: start; }
.setup-status { min-height: 1lh; }
.manual-fallback { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--line); padding-top: var(--space-sm); }
.manual-fallback summary { color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; }
.manual-fallback summary:hover { color: var(--accent); }
.manual-fallback[open] summary { margin-bottom: var(--space-md); }
.provider-setup .management-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.provider-setup .management-form button { justify-self: start; }

/* Playground and docs ---------------------------------------------------- */
.playground-form { max-width: 980px; }
.playground-summary { margin-top: var(--space-md); }
.code-block {
  overflow-x: auto;
  margin: var(--space-md) 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-well);
  color: var(--text-secondary);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: 1.55;
}
code { font-family: var(--font-outlier); font-size: 0.92em; color: var(--text-primary); }
.payload-block { max-height: 40vh; }
.docs-section { max-width: 90ch; }
.docs-section .table-region { margin-top: var(--space-md); }
.docs-steps { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; padding: 0; list-style: none; counter-reset: step; }
.docs-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--line); }
.docs-steps li::before { counter-increment: step; content: counter(step); color: var(--accent); font-family: var(--font-outlier); font-size: var(--text-xs); }
.docs-steps strong { display: block; color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; }
.docs-steps span { color: var(--text-muted); font-size: var(--text-sm); }
.boundary-list { display: grid; grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr); margin: var(--space-md) 0; border-top: var(--rule-hair) solid var(--line); }
.boundary-list dt, .boundary-list dd { margin: 0; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--line); font-size: var(--text-sm); }
.boundary-list dt { color: var(--text-muted); }
.boundary-list dd { color: var(--text-secondary); }

/* Settings --------------------------------------------------------------- */
.settings-card { max-width: 760px; }
.connection-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: end; }
.connection-form button { justify-self: start; }
.mono { font-family: var(--font-outlier); font-size: var(--text-xs); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 80rem) {
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .topbar-actions { display: contents; }
  .topbar-actions .button-secondary { display: none; }
  .topbar-actions .button-quiet { grid-column: 3; grid-row: 1; }
  .reason-inline { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .reason-inline > span { white-space: nowrap; }
  .reason-inline input { flex: 1; width: auto; }
}

@media (max-width: 60rem) {
  .app-frame { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-modal);
    width: min(84vw, 300px);
    display: none;
  }
  .sidebar.is-open { display: flex; }
  .icon-button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }
  .topbar { padding-inline: var(--space-md); }
  .workspace { padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .page-intro { grid-template-columns: minmax(0, 1fr); }
  .page-stamp { text-align: left; }
  .state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .state-cell:nth-child(4n) { border-right: 0; }
  .ops-grid, .split-section, .detail-setup-grid, .setup-layout, .form-grid, .detail-form-stacked, .connection-form { grid-template-columns: minmax(0, 1fr); }
  .business-create-form { grid-template-columns: minmax(0, 1fr); }
  .provider-setup .management-form { grid-template-columns: minmax(0, 1fr); }
  .connection-state { display: none; }
}

@media (max-width: 48rem) {
  .list-item { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-cell:nth-child(4n) { border-right: var(--rule-hair) solid var(--line); }
  .state-cell:nth-child(2n) { border-right: 0; }
  .table-region thead { display: none; }
  .table-region tr { display: grid; gap: var(--space-2xs); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--line); }
  .table-region td { display: grid; grid-template-columns: minmax(90px, 0.4fr) minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-3xs) 0; border: 0; }
  .table-region td::before { content: attr(data-label); color: var(--text-muted); font-size: var(--text-xs); }
  .page-intro h1 { font-size: var(--text-xl); }
  .section-heading { flex-direction: column; align-items: start; }
  .filter-row label, .reason-field, .provider-scope-field { min-width: 100%; }
}