.developer-console {
  --dc-navy-950: #071524;
  --dc-navy-900: #0b2036;
  --dc-navy-800: #12324f;
  --dc-blue-600: #195e9b;
  --dc-blue-100: #dceaf5;
  --dc-accent-strong: #195e9b;
  --dc-accent-soft: #dceaf5;
  --dc-surface: #ffffff;
  --dc-surface-soft: #f3f6f8;
  --dc-line: #d5dde4;
  --dc-line-strong: #aebbc6;
  --dc-text: #142434;
  --dc-muted: #536575;
  --dc-success: #0f6b4f;
  --dc-attention: #9a5a08;
  --dc-danger: #a43b3b;
  --dc-danger-soft: #fff2f2;
  --dc-motion-fast: 140ms;
  --dc-motion-panel: 220ms;
  --dc-sticky-top: calc(var(--cr-suite-height, 0px) + 68px);
  --dc-environment-height: 64px;
  color: var(--dc-text);
  min-width: 0;
}

[data-theme="dark"] .developer-console {
  --dc-surface: #102337;
  --dc-surface-soft: #0b1c2d;
  --dc-line: #31475a;
  --dc-line-strong: #587087;
  --dc-text: #f1f5f8;
  --dc-muted: #b8c5cf;
  --dc-blue-100: #173b58;
  --dc-accent-strong: #8fc6ef;
  --dc-accent-soft: #173b58;
  --dc-success: #6fd0a9;
  --dc-attention: #f0bb68;
  --dc-danger: #ff9292;
  --dc-danger-soft: #3b2028;
}

.developer-console *,
.developer-console *::before,
.developer-console *::after { box-sizing: border-box; }

.developer-console button,
.developer-console a,
.developer-console input,
.developer-console select,
.developer-console textarea { touch-action: manipulation; }

.developer-console :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #2f83c5;
  outline-offset: 3px;
}

html[data-developer-route="true"] .environment {
  background: #0b2036;
  border-color: #304b64;
}
html[data-developer-route="true"] .environment .environment-code {
  color: #071524;
  background: #dceaf5;
}
html[data-developer-route="true"] .environment :where(strong, small) { color: #f7fafc; }

.dc-environment-bar {
  position: sticky;
  top: var(--dc-sticky-top);
  z-index: 18;
  display: flex;
  min-width: 0;
  min-height: var(--dc-environment-height);
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 8px 12px;
  color: #e9f0f4;
  background: var(--dc-navy-950);
  border: 1px solid var(--dc-navy-800);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(7, 21, 36, .12);
}
.dc-environment-identity {
  display: flex;
  flex: 0 0 auto;
  min-width: 240px;
  align-items: center;
  gap: 10px;
}
.dc-environment-identity > span:last-child,
.dc-environment-identity :where(strong, small) { display: block; }
.dc-environment-identity strong { color: #fff; font-size: 12px; }
.dc-environment-identity small { margin-top: 2px; color: #aebfcd; font-size: 10px; }
.dc-environment-code {
  padding: 7px 8px;
  color: var(--dc-navy-950);
  background: #dceaf5;
  border-radius: 6px;
  font: 800 10px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .06em;
}
.dc-environment-facts {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dc-environment-facts div {
  flex: 0 0 auto;
  min-width: 126px;
  padding: 4px 12px;
  border-left: 1px solid #304b64;
}
.dc-environment-facts dt { color: #91a8ba; font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.dc-environment-facts dd { margin: 3px 0 0; color: #fff; font: 10px/1.35 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }

.developer-console-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 20px;
  padding: clamp(18px, 2vw, 26px);
  color: #f7fafc;
  background: var(--dc-navy-950);
  border: 1px solid var(--dc-navy-800);
  border-radius: 12px;
  overflow: hidden;
}

.developer-console-intro { align-self: center; min-width: 0; }
.developer-console-intro .eyebrow,
.developer-console-boundary .eyebrow { color: #9fc1dd; }
.developer-console-intro h2 {
  max-width: 780px;
  margin: 10px 0 16px;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.developer-console-intro > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #c8d6e1;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
}
.developer-console-actions,
.dc-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.developer-console-actions .primary-button { background: #f7fafc; color: var(--dc-navy-950); }
.developer-console-actions .ghost-button { color: #fff; border-color: #587087; }

.developer-console-boundary {
  align-self: stretch;
  padding: 18px;
  background: var(--dc-navy-900);
  border: 1px solid #304b64;
  border-radius: 14px;
}
.developer-console-boundary h3 { margin: 6px 0 14px; color: #fff; font-size: 18px; }
.developer-console-boundary dl { margin: 0; }
.developer-console-boundary dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid #304b64;
}
.developer-console-boundary dt { color: #aebfcd; }
.developer-console-boundary dd { margin: 0; color: #fff; font-weight: 650; text-align: right; }
.developer-console-boundary > p:last-child { margin: 14px 0 0; color: #c8d6e1; font-size: 13px; line-height: 1.55; }

.developer-console-workspaces {
  position: sticky;
  top: calc(var(--dc-sticky-top) + var(--dc-environment-height) + 4px);
  z-index: 10;
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: 10px;
}
.developer-console-workspaces a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  color: var(--dc-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dc-motion-fast) ease, background-color var(--dc-motion-fast) ease, border-color var(--dc-motion-fast) ease;
}
.developer-console-workspaces a:hover { color: var(--dc-text); background: var(--dc-surface-soft); }
.developer-console-workspaces a[aria-current="page"] {
  color: #fff;
  background: var(--dc-navy-900);
  border-color: var(--dc-navy-800);
}
.developer-console-workspaces a[aria-disabled="true"] { color: var(--dc-muted); opacity: .52; }
.developer-workspace-gate { margin: 9px 6px 0; color: var(--dc-muted); font-size: 12px; line-height: 1.5; }
.developer-console[data-advanced-workspaces="open"] .developer-workspace-gate { color: var(--dc-success); }

.developer-console-panels { margin-top: 16px; min-width: 0; }
.developer-console-panel {
  min-width: 0;
  padding: clamp(20px, 3vw, 36px);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: 16px;
  animation: dc-panel-enter var(--dc-motion-panel) ease-out both;
}
.developer-console-panel[hidden] { display: none; }
@keyframes dc-panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.developer-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--dc-line);
}
.developer-panel-heading h3 { margin: 6px 0 0; color: var(--dc-text); font-size: clamp(24px, 3vw, 36px); line-height: 1.12; letter-spacing: -.03em; }
.developer-panel-heading > p { max-width: 580px; margin: 0; color: var(--dc-muted); line-height: 1.6; }
.developer-panel-heading .primary-button,
.developer-panel-heading .ghost-button { flex: 0 0 auto; }

.dc-fact-register,
.dc-readiness-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--dc-line);
  border-radius: 12px;
  overflow: hidden;
}
.dc-fact-register { gap: 1px; padding: 1px; background: var(--dc-line); border: 0; }
.dc-fact-register article {
  min-width: 0;
  padding: 20px;
  background: var(--dc-surface-soft);
  border: 0;
}
.dc-fact-register span,
.dc-fact-register small { display: block; color: var(--dc-muted); }
.dc-fact-register strong { display: block; margin: 12px 0 6px; color: var(--dc-text); font-size: 19px; overflow-wrap: anywhere; }

.dc-two-column,
.dc-explorer-layout,
.dc-events-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.dc-surface,
.dc-inspector {
  min-width: 0;
  padding: 22px;
  background: var(--dc-surface-soft);
  border: 1px solid var(--dc-line);
  border-radius: 12px;
}
.dc-surface h4,
.dc-inspector h4 { margin: 5px 0 16px; color: var(--dc-text); font-size: 19px; }
.dc-lined-list { margin: 0; padding: 0; list-style: none; }
.dc-lined-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--dc-line);
}
.dc-lined-list span { color: var(--dc-muted); }
.dc-lined-list strong { text-align: right; overflow-wrap: anywhere; }
.dc-runtime-list li { align-items: start; }
.dc-runtime-list span b,
.dc-runtime-list span small { display: block; overflow-wrap: anywhere; }
.dc-runtime-list span b { color: var(--dc-text); }
.dc-runtime-list span small { margin-top: 4px; font-size: 11px; line-height: 1.45; }

.dc-integration-start { margin-top: 16px; border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-integration-start > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px; background: var(--dc-surface-soft); border-bottom: 1px solid var(--dc-line); }
.dc-integration-start h4 { margin: 5px 0 0; color: var(--dc-text); font-size: 21px; }
.dc-integration-start > header > p { max-width: 560px; margin: 0; color: var(--dc-muted); font-size: 13px; line-height: 1.55; }
.dc-integration-start-list { margin: 0; padding: 0; list-style: none; }
.dc-integration-start-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(120px, auto) auto; gap: 14px; align-items: center; min-width: 0; padding: 14px 16px; background: var(--dc-surface); border-bottom: 1px solid var(--dc-line); }
.dc-integration-start-list li:last-child { border-bottom: 0; }
.dc-integration-start-list li > span { color: var(--dc-muted); font-variant-numeric: tabular-nums; }
.dc-integration-start-list li div { min-width: 0; }
.dc-integration-start-list li :where(strong, small) { display: block; overflow-wrap: anywhere; }
.dc-integration-start-list li strong { color: var(--dc-text); }
.dc-integration-start-list li small { margin-top: 4px; color: var(--dc-muted); font-size: 11px; line-height: 1.45; }
.dc-integration-start-list li > b { color: var(--dc-muted); font-size: 10px; letter-spacing: .04em; text-align: right; overflow-wrap: anywhere; }
.dc-integration-start-list li[data-status="complete"] > b { color: var(--dc-success); }
.dc-integration-start-list li[data-status="blocked"] > b { color: var(--dc-danger); }

.dc-run-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-run-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 12px 18px;
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
}
.dc-run-list li:last-child { border-bottom: 0; }
.dc-run-list li > span { color: var(--dc-muted); font-variant-numeric: tabular-nums; }
.dc-run-list li div { min-width: 0; }
.dc-run-list li strong,
.dc-run-list li code { display: block; overflow-wrap: anywhere; }
.dc-run-list li code { margin-top: 4px; color: var(--dc-muted); font-size: 12px; }
.dc-run-list li > b { color: var(--dc-muted); font-size: 11px; letter-spacing: .05em; }
.dc-run-list li[data-status="running"] > b { color: var(--dc-blue-600); }
.dc-run-list li[data-status="passed"] > b { color: var(--dc-success); }
.dc-run-list li[data-status="failed"] > b { color: var(--dc-danger); }

.dc-quickstart-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 16px 18px; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 12px; }
.dc-quickstart-next p { max-width: 720px; margin: 0; color: var(--dc-muted); font-size: 13px; line-height: 1.55; }
.dc-quickstart-next button { flex: 0 0 auto; }

.dc-inspector { margin-top: 16px; background: var(--dc-navy-950); border-color: var(--dc-navy-800); color: #dce6ed; }
.dc-inspector header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dc-inspector .eyebrow { color: #91b6d3; }
.dc-inspector h4 { color: #fff; }
.dc-inspector header > span { color: #b7c8d5; font-size: 12px; font-weight: 700; }
.dc-inspector pre {
  max-height: 560px;
  margin: 16px 0 0;
  padding: 18px;
  overflow: auto;
  color: #e9f0f4;
  background: #06111d;
  border: 1px solid #2a4257;
  border-radius: 8px;
  font: 12px/1.65 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dc-explorer-form { margin-top: 16px; background: var(--dc-surface-soft); }
.dc-explorer-form label,
.dc-buy-form label,
.dc-evidence-lookup label,
.dc-code-toolbar label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--dc-text); font-weight: 650; }
.dc-explorer-form label > span,
.dc-buy-form label > span,
.dc-evidence-lookup label > span,
.dc-code-toolbar label > span { font-size: 13px; }
.dc-explorer-form label small { color: var(--dc-muted); font-weight: 400; line-height: 1.5; }
.developer-console :where(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--dc-text);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
}
.developer-console textarea { resize: vertical; font: 13px/1.55 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.dc-operation-summary,
.dc-security-note {
  margin: 0 0 18px;
  padding: 14px;
  color: var(--dc-muted);
  background: var(--dc-blue-100);
  border-left: 3px solid var(--dc-blue-600);
  font-size: 13px;
  line-height: 1.55;
}
.dc-error-summary { margin-bottom: 16px; padding: 14px; color: var(--dc-danger); background: var(--dc-danger-soft); border: 1px solid var(--dc-danger); border-radius: 8px; line-height: 1.55; }

.dc-request-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; background: #2a4257; border-radius: 8px; overflow: hidden; }
.dc-request-meta div { min-width: 0; padding: 12px; background: var(--dc-navy-950); }
.dc-request-meta div:nth-child(2) { grid-column: span 2; }
.dc-request-meta dt { color: #91a8ba; font-size: 11px; text-transform: uppercase; }
.dc-request-meta dd { margin: 5px 0 0; color: #fff; overflow-wrap: anywhere; font: 12px/1.5 "JetBrains Mono", ui-monospace, monospace; }
.dc-code-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; min-width: 0; margin-top: 16px; }
.dc-code-tabs {
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dc-code-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 11px;
  color: #9fb3c3;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 700 10px/1 "JetBrains Mono", ui-monospace, monospace;
  cursor: pointer;
  transition: color var(--dc-motion-fast) ease, background-color var(--dc-motion-fast) ease, border-color var(--dc-motion-fast) ease;
}
.dc-code-tabs button:hover { color: #fff; background: var(--dc-navy-900); }
.dc-code-tabs button[aria-selected="true"] { color: #fff; background: var(--dc-navy-800); border-color: #587087; }
.dc-code-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.dc-code-actions .ghost-button { min-height: 44px; color: #fff; border-color: #587087; white-space: nowrap; }
.dc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.dc-copy-status { grid-column: 1 / -1; min-height: 15px; margin: 0; color: #aebfcd; font-size: 10px; line-height: 1.4; }
.dc-inspector pre[data-wrap="true"] { white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-inspector pre[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
.dc-inspector pre code { display: block; min-width: 0; max-width: 100%; color: inherit; font: inherit; }
.dc-token-comment { color: #7f9aaf; }
.dc-token-string { color: #b6e3c7; }
.dc-token-keyword { color: #8fc6ef; font-weight: 700; }
.dc-token-number { color: #f0bb68; }

.dc-opaque-id-shelf,
.dc-opaque-id-register { min-width: 0; margin-top: 14px; }
.dc-opaque-id-shelf { padding-top: 12px; border-top: 1px solid #2a4257; }
.dc-opaque-id-shelf > p { margin: 0; color: #91a8ba; font-size: 11px; }
.dc-opaque-id-register { border: 1px solid var(--dc-line); border-radius: 10px; overflow: hidden; }
.dc-opaque-id-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--dc-line);
}
.dc-opaque-id-item:last-child { border-bottom: 0; }
.dc-opaque-id-shelf .dc-opaque-id-item { border-color: #2a4257; }
.dc-opaque-id-main { min-width: 0; }
.dc-opaque-id-main :where(span, code, small) { display: block; overflow-wrap: anywhere; }
.dc-opaque-id-main span { color: var(--dc-muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-opaque-id-main code { margin-top: 3px; color: var(--dc-text); font: 11px/1.45 "JetBrains Mono", ui-monospace, monospace; }
.dc-opaque-id-main small { margin-top: 3px; color: var(--dc-muted); font-size: 9px; }
.dc-opaque-id-shelf .dc-opaque-id-main span,
.dc-opaque-id-shelf .dc-opaque-id-main small { color: #91a8ba; }
.dc-opaque-id-shelf .dc-opaque-id-main code { color: #fff; }
.dc-opaque-id-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dc-opaque-id-actions :where(button, a) { min-height: 40px; padding: 7px 9px; }

.dc-scenario-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dc-scenario-card { position: relative; min-width: 0; padding: 18px; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 10px; }
.dc-scenario-card label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; cursor: pointer; }
.dc-scenario-card input { width: 20px; min-height: 20px; margin: 2px 0 0; }
.dc-scenario-card strong { display: block; color: var(--dc-text); }
.dc-scenario-card p { margin: 7px 0 0; color: var(--dc-muted); font-size: 13px; line-height: 1.5; }
.dc-scenario-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.dc-scenario-tags span { padding: 4px 7px; color: var(--dc-muted); background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 5px; font-size: 10px; }

.dc-buy-form fieldset { margin: 0; padding: 0; border: 0; }
.dc-buy-form legend { margin-bottom: 18px; color: var(--dc-text); font-size: 19px; font-weight: 700; }
.dc-binding-preflight { margin: 0 0 18px; border: 1px solid var(--dc-line); border-radius: 10px; overflow: hidden; }
.dc-binding-preflight > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--dc-surface-soft); border-bottom: 1px solid var(--dc-line); }
.dc-binding-preflight > header strong { color: var(--dc-text); font-size: 12px; }
.dc-binding-preflight > header a { min-height: 44px; display: inline-flex; align-items: center; color: var(--dc-blue-600); font-size: 11px; font-weight: 700; }
.dc-binding-preflight > p { margin: 0; padding: 12px 14px; color: var(--dc-muted); font-size: 11px; line-height: 1.5; }
.dc-binding-preflight[data-status="ready"] > p { color: var(--dc-success); }
.dc-binding-preflight[data-status="blocked"] > p { color: var(--dc-danger); }
.dc-binding-preflight ul { margin: 0; padding: 0; list-style: none; }
.dc-binding-preflight li { display: grid; grid-template-columns: minmax(120px, .7fr) auto minmax(0, 1.3fr); gap: 12px; align-items: center; min-width: 0; padding: 11px 14px; border-top: 1px solid var(--dc-line); }
.dc-binding-preflight li :where(strong, small) { display: block; overflow-wrap: anywhere; }
.dc-binding-preflight li strong { color: var(--dc-text); font-size: 12px; text-transform: capitalize; }
.dc-binding-preflight li small { color: var(--dc-muted); font-size: 9px; line-height: 1.45; }
.dc-binding-preflight li > div small { margin-top: 3px; }
.dc-binding-preflight li > b { color: var(--dc-danger); font-size: 9px; text-align: right; }
.dc-binding-preflight li[data-ready="true"] > b { color: var(--dc-success); }
.dc-channel-list { border-top: 1px solid var(--dc-line); }
.dc-channel-item { padding: 14px 0; border-bottom: 1px solid var(--dc-line); }
.dc-channel-item strong,
.dc-channel-item code { display: block; overflow-wrap: anywhere; }
.dc-channel-item code { margin-top: 5px; color: var(--dc-muted); font-size: 12px; }
.dc-checkout-progress { margin-top: 16px; }
.dc-durable-run,
.dc-pack-explorer {
  min-width: 0;
  margin-top: 16px;
  border: 1px solid var(--dc-line);
  border-radius: 12px;
  overflow: hidden;
}
.dc-durable-run[hidden],
.dc-pack-explorer[hidden] { display: none; }
.dc-durable-run > header,
.dc-pack-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  background: var(--dc-surface-soft);
  border-bottom: 1px solid var(--dc-line);
}
.dc-durable-run > header h4,
.dc-pack-heading h4 { margin: 5px 0 0; color: var(--dc-text); font-size: 21px; }
.dc-durable-run > header p:last-child,
.dc-pack-heading p:last-child { margin: 7px 0 0; color: var(--dc-muted); font-size: 12px; line-height: 1.55; }
.dc-durable-run > header > strong,
.dc-pack-heading > strong { color: var(--dc-accent-strong); font: 750 11px/1.4 "JetBrains Mono", ui-monospace, monospace; text-align: right; overflow-wrap: anywhere; }
.dc-run-truth,
.dc-pack-truth {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--dc-line);
}
.dc-run-truth div,
.dc-pack-truth div { min-width: 0; padding: 12px; background: var(--dc-surface); }
.dc-run-truth dt,
.dc-pack-truth dt { color: var(--dc-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-run-truth dd,
.dc-pack-truth dd { margin: 5px 0 0; color: var(--dc-text); font: 10px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.dc-durable-run > .dc-inline-actions,
.dc-pack-actions { margin: 0; padding: 16px 20px; border-top: 1px solid var(--dc-line); }
.dc-run-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 20px 20px; }
.dc-run-source { min-width: 0; overflow: hidden; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 9px; }
.dc-run-source > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 72px; padding: 14px 16px; background: var(--dc-surface); border-bottom: 1px solid var(--dc-line); }
.dc-run-source > header h5 { margin: 5px 0 0; color: var(--dc-text); font-size: 16px; }
.dc-run-source > header > strong { color: var(--dc-muted); font: 750 9px/1.4 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; text-align: right; }
.dc-run-source > header > strong[data-status="AVAILABLE"] { color: var(--dc-success); }
.dc-run-source > header > strong[data-status="NOT_AVAILABLE"] { color: var(--dc-attention); }
.dc-run-source > div { min-width: 0; padding: 14px 16px; }
.dc-run-source-note { margin: 0 0 12px; color: var(--dc-muted); font-size: 11px; line-height: 1.5; }
.dc-run-source-details { margin: 0; }
.dc-run-source-details div,
.dc-run-log-list dl div,
.dc-run-webhook-list dl div { display: grid; grid-template-columns: minmax(116px, .55fr) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--dc-line); }
.dc-run-source-details dt,
.dc-run-log-list dt,
.dc-run-webhook-list dt { color: var(--dc-muted); font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.dc-run-source-details dd,
.dc-run-log-list dd,
.dc-run-webhook-list dd { margin: 0; color: var(--dc-text); overflow-wrap: anywhere; font: 9px/1.5 "JetBrains Mono", ui-monospace, monospace; }
.dc-run-not-available { display: grid; gap: 5px; margin: 0; padding: 14px; color: var(--dc-attention); background: var(--dc-surface); border-left: 3px solid var(--dc-attention); border-radius: 6px; overflow-wrap: anywhere; }
.dc-run-not-available strong { font: 750 10px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.dc-run-not-available span { color: var(--dc-muted); font-size: 10px; line-height: 1.5; }
.dc-run-log-list,
.dc-run-webhook-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dc-run-log-list li,
.dc-run-webhook-list li { min-width: 0; padding: 12px; background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 7px; scroll-margin-top: 88px; }
.dc-run-log-list li > header,
.dc-run-webhook-list li > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dc-run-log-list li > header strong,
.dc-run-webhook-list li > header strong { overflow-wrap: anywhere; }
.dc-run-log-list li > header b,
.dc-run-webhook-list li > header b { color: var(--dc-accent-strong); font: 750 9px/1.4 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; text-align: right; }
.dc-run-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 20px 20px; }
.dc-run-detail-grid > section { min-width: 0; padding: 16px; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 9px; }
.dc-run-timeline { margin: 12px 0 0; padding: 0; list-style: none; }
.dc-run-timeline li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--dc-line); }
.dc-run-timeline li > span { display: grid; place-items: center; width: 25px; height: 25px; color: var(--dc-accent-strong); background: var(--dc-accent-soft); border-radius: 50%; font: 700 9px/1 "JetBrains Mono", ui-monospace, monospace; }
.dc-run-timeline li :where(strong, code, small) { display: block; overflow-wrap: anywhere; }
.dc-run-timeline li code { margin-top: 4px; color: var(--dc-muted); font-size: 9px; }
.dc-run-timeline li small { margin-top: 4px; color: var(--dc-muted); font-size: 9px; }
.dc-run-timeline li > small { margin-top: 0; text-align: right; }
.dc-run-timeline li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dc-blue-600); font-size: 10px; font-weight: 750; }
.dc-assertion-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--dc-line); }
.dc-assertion-list article :where(strong, small) { display: block; overflow-wrap: anywhere; }
.dc-assertion-list article small { margin-top: 4px; color: var(--dc-muted); font-size: 10px; line-height: 1.45; }
.dc-assertion-list article > b { color: var(--dc-muted); font-size: 10px; }
.dc-assertion-list article[data-status="PASS"] > b { color: var(--dc-success); }
.dc-assertion-list article[data-status="FAIL"] > b { color: var(--dc-danger); }
.dc-checkout-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dc-checkout-wide { grid-column: 1 / -1; }
.dc-axis-register,
.dc-id-register { margin: 0; }
.dc-axis-register div,
.dc-id-register div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--dc-line); }
.dc-axis-register dd,
.dc-id-register dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.dc-evidence-block { margin-top: 16px; }
.dc-evidence-block h5 { margin: 0 0 8px; color: var(--dc-text); font-size: 14px; }
.dc-evidence-block pre { max-height: 320px; margin: 0; padding: 14px; overflow: auto; color: #e9f0f4; background: var(--dc-navy-950); border-radius: 7px; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.6 "JetBrains Mono", ui-monospace, monospace; }
.dc-domain-timeline { display: grid; grid-template-columns: repeat(9, minmax(138px, 1fr)); gap: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; border: 1px solid var(--dc-line); border-radius: 10px; }
.dc-domain-timeline li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; min-width: 138px; padding: 14px 12px; border-right: 1px solid var(--dc-line); }
.dc-domain-timeline li:last-child { border-right: 0; }
.dc-domain-timeline li > span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--dc-accent-strong); background: var(--dc-accent-soft); border-radius: 50%; font: 700 10px/1 "JetBrains Mono", ui-monospace, monospace; }
.dc-domain-timeline li > div > :where(strong, b, code, small) { display: block; overflow-wrap: anywhere; }
.dc-domain-timeline li strong { color: var(--dc-text); font-size: 12px; line-height: 1.35; }
.dc-domain-timeline li b { margin-top: 5px; color: var(--dc-accent-strong); font-size: 10px; }
.dc-domain-timeline li code { margin-top: 9px; color: var(--dc-text); font-size: 10px; }
.dc-domain-timeline li small { margin-top: 5px; color: var(--dc-muted); font-size: 9px; line-height: 1.45; }

.dc-webhook-workspace {
  min-width: 0;
  margin-top: 22px;
  border: 1px solid var(--dc-line);
  border-radius: 12px;
  overflow: hidden;
}
.dc-webhook-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 20px;
  background: var(--dc-surface-soft);
  border-bottom: 1px solid var(--dc-line);
}
.dc-webhook-heading > div { min-width: 0; }
.dc-webhook-heading h4 { margin: 5px 0 0; color: var(--dc-text); font-size: 22px; }
.dc-webhook-heading p:last-child { max-width: 760px; margin: 8px 0 0; color: var(--dc-muted); font-size: 12px; line-height: 1.55; }
.dc-webhook-heading button { flex: 0 0 auto; }
.dc-webhook-truth {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--dc-line);
}
.dc-webhook-truth div { min-width: 0; padding: 11px 12px; background: var(--dc-surface); }
.dc-webhook-truth dt { color: var(--dc-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-webhook-truth dd { margin: 4px 0 0; color: var(--dc-text); overflow-wrap: anywhere; font: 10px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.dc-webhook-truth div:last-child dd { color: var(--dc-danger); font-weight: 750; }
.dc-webhook-workspace > .dc-error-summary { margin: 16px 16px 0; }
.dc-webhook-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; padding: 16px; }
.dc-webhook-grid + .dc-webhook-grid { padding-top: 0; }
.dc-webhook-grid .dc-surface { margin: 0; }
.dc-webhook-create fieldset,
.dc-webhook-test fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.dc-webhook-create legend,
.dc-webhook-test legend { margin-bottom: 8px; color: var(--dc-text); font-size: 17px; font-weight: 720; }
.dc-webhook-create fieldset > p { margin: 0 0 14px; color: var(--dc-muted); font-size: 12px; line-height: 1.5; }
.dc-webhook-test label:not(.dc-check-option),
.dc-webhook-subscriptions > label { display: grid; gap: 7px; margin-bottom: 14px; color: var(--dc-text); font-weight: 650; }
.dc-webhook-test label > span,
.dc-webhook-subscriptions > label > span { font-size: 12px; }
.dc-webhook-test label small { color: var(--dc-muted); font-size: 11px; font-weight: 400; line-height: 1.45; }
.dc-check-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  color: var(--dc-text);
  cursor: pointer;
}
.dc-check-option input { width: 20px; height: 20px; min-height: 20px; margin: 1px 0 0; }
.dc-check-option :where(strong, small) { display: block; overflow-wrap: anywhere; }
.dc-check-option strong { font-size: 12px; }
.dc-check-option small { margin-top: 3px; color: var(--dc-muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.dc-webhook-create > .primary-button,
.dc-webhook-test > .primary-button { width: 100%; margin-top: 14px; }
.dc-webhook-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dc-webhook-section-head h5 { margin: 5px 0 15px; color: var(--dc-text); font-size: 17px; }
.dc-webhook-section-head > span { color: var(--dc-muted); font-size: 10px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.dc-webhook-subscription-meta,
.dc-webhook-delivery-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; min-width: 0; margin: 0; }
.dc-webhook-subscription-meta div,
.dc-webhook-delivery-meta div { min-width: 0; padding: 9px 0; border-top: 1px solid var(--dc-line); }
.dc-webhook-subscription-meta dt,
.dc-webhook-delivery-meta dt { color: var(--dc-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-webhook-subscription-meta dd,
.dc-webhook-delivery-meta dd { margin: 4px 0 0; color: var(--dc-text); font: 10px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.dc-webhook-subscription-actions { margin-top: 14px; }
.dc-webhook-secret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 16px 16px;
  padding: 18px;
  color: #3e2808;
  background: #fff5df;
  border: 1px solid #d49a36;
  border-radius: 10px;
}
.dc-webhook-secret[hidden] { display: none; }
.dc-webhook-secret h5 { margin: 5px 0 7px; color: #3e2808; font-size: 17px; }
.dc-getting-started-secret { margin: 16px 0 0; }
.dc-getting-started-secret h4 { margin: 5px 0 7px; color: #3e2808; font-size: 17px; }
.dc-webhook-secret p:last-of-type { margin: 0; font-size: 12px; line-height: 1.5; }
.dc-webhook-secret code { display: block; margin-top: 12px; padding: 11px; color: #fff; background: var(--dc-navy-950); border-radius: 6px; overflow-wrap: anywhere; font: 12px/1.5 "JetBrains Mono", ui-monospace, monospace; }
.dc-webhook-secret .dc-inline-actions { justify-content: flex-end; margin: 0; }
.dc-webhook-delivery-list { max-height: 360px; min-width: 0; overflow: auto; border: 1px solid var(--dc-line); border-radius: 8px; }
.dc-webhook-delivery-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  color: var(--dc-text);
  background: var(--dc-surface);
  border: 0;
  border-bottom: 1px solid var(--dc-line);
  text-align: left;
  cursor: pointer;
}
.dc-webhook-delivery-row:last-child { border-bottom: 0; }
.dc-webhook-delivery-row:hover,
.dc-webhook-delivery-row[aria-current="true"] { background: var(--dc-blue-100); }
.dc-webhook-delivery-row > span { color: var(--dc-muted); font-size: 9px; font-weight: 750; }
.dc-webhook-delivery-row[data-state="DELIVERED"] > span { color: var(--dc-success); }
.dc-webhook-delivery-row[data-state="RETRYING"] > span { color: var(--dc-attention); }
.dc-webhook-delivery-row[data-state="FAILED"] > span { color: var(--dc-danger); }
.dc-webhook-delivery-row > div { min-width: 0; }
.dc-webhook-delivery-row :where(strong, code, small) { display: block; overflow-wrap: anywhere; }
.dc-webhook-delivery-row strong { font-size: 12px; }
.dc-webhook-delivery-row code { margin-top: 3px; color: var(--dc-muted); font-size: 9px; }
.dc-webhook-delivery-row small { color: var(--dc-muted); font-size: 9px; text-align: right; }
.dc-webhook-detail { min-width: 0; margin: 0 16px 16px; padding: 18px; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 10px; }
.dc-webhook-detail[hidden] { display: none; }
.dc-webhook-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dc-webhook-detail h5 { margin: 5px 0 15px; color: var(--dc-text); font-size: 17px; }
.dc-webhook-detail > header .dc-inline-actions { margin: 0; }
.dc-webhook-operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.dc-webhook-operations-grid > section { min-width: 0; padding: 14px; background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 8px; }
.dc-webhook-operations-grid h6 { margin: 0 0 10px; color: var(--dc-text); font-size: 13px; }
.dc-webhook-operation-ledger { display: grid; gap: 8px; max-height: 420px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.dc-webhook-operation-card { min-width: 0; padding: 11px; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 7px; }
.dc-webhook-operation-card-head { display: flex; justify-content: space-between; gap: 10px; color: var(--dc-text); font-size: 11px; }
.dc-webhook-operation-card-head span { color: var(--dc-muted); font: 700 9px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.dc-webhook-operation-card[data-status="DELIVERED"] .dc-webhook-operation-card-head span,
.dc-webhook-operation-card[data-status="ACCEPTED"] .dc-webhook-operation-card-head span { color: var(--dc-success); }
.dc-webhook-operation-card[data-status="RETRY_SCHEDULED"] .dc-webhook-operation-card-head span { color: var(--dc-attention); }
.dc-webhook-operation-card[data-status="QUARANTINED"] .dc-webhook-operation-card-head span { color: var(--dc-danger); }
.dc-webhook-operation-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin: 8px 0 0; }
.dc-webhook-operation-facts div { min-width: 0; padding: 6px 0; border-top: 1px solid var(--dc-line); }
.dc-webhook-operation-facts dt { color: var(--dc-muted); font-size: 7px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-webhook-operation-facts dd { margin: 3px 0 0; color: var(--dc-text); overflow-wrap: anywhere; font: 9px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.dc-webhook-operation-empty { padding: 12px; color: var(--dc-muted); border: 1px dashed var(--dc-line-strong); border-radius: 7px; font-size: 10px; }
.dc-webhook-raw { margin-top: 14px; }
.dc-webhook-raw summary { min-height: 44px; padding: 12px 0; color: var(--dc-text); cursor: pointer; font-size: 11px; font-weight: 700; }
.dc-webhook-detail pre { max-height: 420px; margin: 14px 0 0; padding: 14px; overflow: auto; color: #e9f0f4; background: var(--dc-navy-950); border-radius: 7px; white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.55 "JetBrains Mono", ui-monospace, monospace; }
.dc-webhook-retry-confirm { margin-top: 14px; padding: 14px; background: var(--dc-danger-soft); border: 1px solid var(--dc-danger); border-radius: 8px; }
.dc-webhook-retry-confirm[hidden] { display: none; }
.dc-webhook-retry-confirm .dc-inline-actions { margin-top: 10px; }
.dc-webhook-verify-result { min-height: 18px; margin-top: 12px; color: var(--dc-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }

.dc-gap-register { margin-top: 16px; border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-gap-register header { padding: 18px; background: var(--dc-surface-soft); border-bottom: 1px solid var(--dc-line); }
.dc-gap-register h4 { margin: 5px 0 0; color: var(--dc-text); }
.dc-gap-register ul { margin: 0; padding: 0; list-style: none; }
.dc-gap-register li { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--dc-line); }
.dc-gap-register li:last-child { border-bottom: 0; }
.dc-gap-register li strong { color: var(--dc-danger); font-size: 11px; }
.dc-gap-register li:last-child strong { color: var(--dc-attention); }

.dc-sandbox-binding-workspace { margin-bottom: 22px; }
.dc-sandbox-binding-workspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.dc-sandbox-binding-workspace > header h4 { margin: 5px 0; color: var(--dc-text); font-size: 18px; }
.dc-sandbox-binding-workspace > header p:last-child { max-width: 760px; margin: 0; color: var(--dc-muted); font-size: 11px; line-height: 1.55; }
.dc-sandbox-binding-workspace > .dc-security-note { margin: 10px 0 0; }
.dc-integration-catalog-heading { margin-top: 4px; }
.dc-sandbox-binding-row .dc-integration-status small { color: var(--dc-muted); font: 9px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }

.dc-integration-register,
.dc-readiness-register { border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-integration-row,
.dc-readiness-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(120px, .45fr) minmax(220px, 1.25fr) minmax(120px, .55fr) minmax(280px, 1.65fr); gap: 16px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--dc-line); }
.dc-integration-row { grid-template-columns: minmax(220px, .9fr) minmax(320px, 1.35fr) minmax(150px, .55fr) minmax(260px, 1fr); }
.dc-integration-row:last-child,
.dc-readiness-row:last-child { border-bottom: 0; }
.dc-integration-row strong,
.dc-readiness-row strong { overflow-wrap: anywhere; }
.dc-integration-row > div:first-child > :where(strong, span, small) { display: block; }
.dc-integration-row > div:first-child > small { margin-top: 5px; color: var(--dc-muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.dc-integration-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; min-width: 0; margin: 0; }
.dc-integration-meta div { min-width: 0; }
.dc-integration-meta dt,
.dc-integration-blocker small { color: var(--dc-muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-integration-meta dd { margin: 3px 0 0; color: var(--dc-text); font: 10px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.dc-integration-status { display: grid; gap: 7px; align-content: start; }
.dc-integration-blocker > :where(small, span) { display: block; }
.dc-integration-blocker > span { margin-top: 5px; font-size: 11px; line-height: 1.5; }
.dc-integration-blocker .dc-integration-actions { margin-top: 10px; }
.dc-readiness-row > div > :where(small, span) { display: block; }
.dc-readiness-row > div > small { margin-bottom: 5px; color: var(--dc-muted); font-size: 10px; font-weight: 700; line-height: 1.45; }
.dc-readiness-row > div > span + span { margin-top: 7px; }
.dc-readiness-row .dc-row-action { width: fit-content; margin-top: 10px; }
.dc-integration-row span,
.dc-readiness-row span { color: var(--dc-muted); overflow-wrap: anywhere; }
.dc-integration-row b,
.dc-readiness-row b { font-size: 11px; overflow-wrap: anywhere; }
.dc-integration-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.dc-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--dc-text);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line-strong);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.dc-state-live { color: var(--dc-success) !important; }
.dc-state-mock { color: var(--dc-accent-strong) !important; }
.dc-state-activation { color: var(--dc-attention) !important; }
.dc-state-missing { color: var(--dc-danger) !important; }
.dc-empty { margin: 0; padding: 24px; color: var(--dc-muted); }

.dc-collection-continuation {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  width: 100%;
  padding: 12px;
  list-style: none;
  border: 1px dashed var(--dc-line);
  border-radius: 10px;
  background: var(--dc-surface-soft);
}

.dc-collection-note {
  margin: 10px 0 0;
  color: var(--dc-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.dc-readiness-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.dc-readiness-summary article { padding: 20px; border-right: 1px solid var(--dc-line); }
.dc-readiness-summary article:last-child { border-right: 0; }
.dc-readiness-summary strong { display: block; color: var(--dc-text); font-size: 30px; }
.dc-readiness-summary span { color: var(--dc-muted); font-size: 11px; font-weight: 700; }

.dc-pack-boundary { margin: 16px 20px 0; padding: 14px; color: var(--dc-muted); background: var(--dc-blue-100); border-left: 3px solid var(--dc-blue-600); font-size: 12px; line-height: 1.55; }
.dc-pack-tabs { display: flex; min-width: 0; gap: 3px; margin: 0 20px; padding: 5px; overflow-x: auto; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 8px; scrollbar-width: thin; }
.dc-pack-tabs button { flex: 0 0 auto; min-height: 42px; padding: 0 12px; color: var(--dc-muted); background: transparent; border: 1px solid transparent; border-radius: 6px; font: 700 10px/1 "JetBrains Mono", ui-monospace, monospace; cursor: pointer; }
.dc-pack-tabs button[aria-selected="true"] { color: #fff; background: var(--dc-navy-900); border-color: var(--dc-navy-800); }
.dc-pack-panel { min-width: 0; margin: 12px 20px 20px; padding: 16px; background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 9px; }
.dc-pack-panel[hidden] { display: none; }
.dc-pack-panel pre { max-height: 520px; margin: 0; padding: 14px; overflow: auto; color: #e9f0f4; background: var(--dc-navy-950); border-radius: 7px; white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.58 "JetBrains Mono", ui-monospace, monospace; }
.dc-pack-content-grid { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.35fr); gap: 14px; min-width: 0; }
.dc-artifact-list { max-height: 560px; min-width: 0; overflow: auto; background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 8px; }
.dc-artifact-row { display: grid; width: 100%; min-height: 148px; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; color: var(--dc-text); background: transparent; border: 0; border-bottom: 1px solid var(--dc-line); text-align: left; cursor: pointer; }
.dc-artifact-row:last-child { border-bottom: 0; }
.dc-artifact-row:hover,
.dc-artifact-row[aria-selected="true"] { background: var(--dc-blue-100); }
.dc-artifact-row > span { color: var(--dc-muted); font: 700 10px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.dc-artifact-row :where(strong, code, small) { display: block; overflow-wrap: anywhere; }
.dc-artifact-row code { margin-top: 4px; color: var(--dc-muted); font-size: 9px; }
.dc-artifact-row small { margin-top: 5px; color: var(--dc-muted); font-size: 9px; line-height: 1.5; }
.dc-artifact-row .dc-artifact-digest { color: var(--dc-text); font-family: "JetBrains Mono", ui-monospace, monospace; }
.dc-artifact-row .dc-artifact-verification { color: var(--dc-attention); font-weight: 750; }
.dc-artifact-row[data-verification="VERIFIED"] .dc-artifact-verification { color: var(--dc-success); }
.dc-artifact-row[data-verification="FAILED"] .dc-artifact-verification { color: var(--dc-danger); }
.dc-artifact-context { min-width: 0; padding: 16px; background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 8px; }
.dc-artifact-context h5 { margin: 5px 0 14px; color: var(--dc-text); font-size: 18px; }
.dc-artifact-context dl { margin: 0; }
.dc-artifact-context dl div { display: grid; grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--dc-line); }
.dc-artifact-context dt { color: var(--dc-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.dc-artifact-context dd { margin: 0; overflow-wrap: anywhere; font: 10px/1.45 "JetBrains Mono", ui-monospace, monospace; }
.dc-evidence-graph { min-width: 0; overflow-x: auto; }
.dc-evidence-graph svg { display: block; min-width: 760px; width: 100%; height: auto; color: var(--dc-text); }
.dc-evidence-graph .dc-graph-node { fill: var(--dc-surface); stroke: var(--dc-line-strong); stroke-width: 1.5; }
.dc-evidence-graph .dc-graph-edge { fill: none; stroke: var(--dc-accent-strong); stroke-width: 1.5; }
.dc-evidence-graph text { fill: currentColor; font-family: "JetBrains Mono", ui-monospace, monospace; }
.dc-graph-adjacency { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 22px; }
.dc-graph-adjacency li { color: var(--dc-muted); font: 10px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.dc-verification-summary { margin-bottom: 12px; padding: 13px; color: var(--dc-muted); background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 7px; font-size: 12px; line-height: 1.5; }
.dc-verification-summary[data-status="VERIFIED"] { color: var(--dc-success); border-color: var(--dc-success); }
.dc-verification-summary[data-status="FAILED"] { color: var(--dc-danger); border-color: var(--dc-danger); }
.dc-pack-panel > code { display: block; margin: 12px 0; padding: 15px; color: #e9f0f4; background: var(--dc-navy-950); border-radius: 7px; font: 11px/1.55 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }

.dc-evidence-lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.dc-evidence-lookup label { margin: 0; }
.dc-evidence-lookup label small { color: var(--dc-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.dc-evidence-lookup button { min-height: 44px; }
.dc-evidence-lookup-links { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; margin-top: 12px; }
.dc-evidence-lookup-links .ghost-button { min-height: 44px; overflow-wrap: anywhere; }
.dc-evidence-lookup-links .dc-run-not-available { flex: 1 1 100%; }

.dc-doc-contract-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-doc-contract-strip article { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-width: 0; padding: 16px; border-right: 1px solid var(--dc-line); }
.dc-doc-contract-strip article:last-child { border-right: 0; }
.dc-doc-contract-strip article > span { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: var(--dc-navy-900); border-radius: 8px; font-size: 11px; font-weight: 750; }
.dc-doc-contract-strip h4 { margin: 0; color: var(--dc-text); }
.dc-doc-contract-strip p { margin: 4px 0 0; color: var(--dc-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }

.dc-doc-workflows { display: grid; gap: 16px; margin-top: 16px; }
.dc-doc-workflow { min-width: 0; padding: clamp(18px, 2.5vw, 26px); background: var(--dc-surface-soft); border: 1px solid var(--dc-line); border-radius: 12px; }
.dc-doc-workflow > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dc-doc-workflow h4 { margin: 6px 0 0; color: var(--dc-text); font-size: clamp(19px, 2vw, 24px); line-height: 1.25; }
.dc-doc-workflow > header > strong { flex: 0 0 auto; padding: 6px 8px; color: var(--dc-blue-600); background: var(--dc-blue-100); border-radius: 5px; font-size: 10px; letter-spacing: .05em; }
.dc-doc-sequence { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.dc-doc-sequence-quickstart { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dc-doc-sequence-buy { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dc-doc-sequence li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; min-width: 0; padding: 13px 11px; background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 8px; }
.dc-doc-sequence li:not(:last-child)::after { position: absolute; top: 27px; right: -13px; width: 12px; border-top: 1px solid var(--dc-line-strong); content: ""; }
.dc-doc-sequence li > span { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--dc-navy-900); border-radius: 50%; font: 700 10px/1 "JetBrains Mono", ui-monospace, monospace; }
.dc-doc-sequence li :where(strong, small) { display: block; overflow-wrap: anywhere; }
.dc-doc-sequence li strong { color: var(--dc-text); font-size: 12px; line-height: 1.35; }
.dc-doc-sequence li small { margin-top: 4px; color: var(--dc-muted); font-size: 10px; line-height: 1.35; }

.dc-doc-contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.dc-doc-contract-grid div { min-width: 0; padding: 13px 0; border-top: 1px solid var(--dc-line); }
.dc-doc-contract-grid dt { color: var(--dc-text); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.dc-doc-contract-grid dd { margin: 6px 0 0; color: var(--dc-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.dc-doc-contract-grid code,
.dc-doc-boundary code { color: var(--dc-text); font: 11px/1.5 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.dc-doc-boundary { margin: 4px 0 0; padding: 14px; color: var(--dc-muted); background: var(--dc-surface); border-left: 3px solid var(--dc-attention); font-size: 13px; line-height: 1.55; }
.dc-doc-boundary strong { color: var(--dc-text); }
.dc-doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dc-doc-actions :where(button, a) { min-height: 44px; }

.dc-doc-operations { margin-top: 16px; border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-doc-operations > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px; background: var(--dc-surface-soft); border-bottom: 1px solid var(--dc-line); }
.dc-doc-operations h4 { margin: 6px 0 0; color: var(--dc-text); font-size: 21px; }
.dc-doc-operations > header > p { max-width: 560px; margin: 0; color: var(--dc-muted); font-size: 13px; line-height: 1.55; }
.dc-operation-register { max-height: 620px; overflow: auto; background: var(--dc-surface); }
.dc-operation-row { display: grid; grid-template-columns: 62px minmax(190px, .9fr) minmax(260px, 1fr) auto; gap: 16px; align-items: center; min-width: 0; padding: 14px 16px; border-bottom: 1px solid var(--dc-line); }
.dc-operation-row:last-child { border-bottom: 0; }
.dc-method { justify-self: start; padding: 6px 7px; color: #fff; background: var(--dc-navy-900); border-radius: 5px; font: 750 10px/1 "JetBrains Mono", ui-monospace, monospace; }
.dc-method-get { background: #195e9b; }
.dc-method-post { background: #0f6b4f; }
.dc-method-put,
.dc-method-patch { background: #8a530c; }
.dc-method-delete { background: #963838; }
.dc-operation-identity { min-width: 0; }
.dc-operation-identity :where(strong, code, small) { display: block; overflow-wrap: anywhere; }
.dc-operation-identity strong { color: var(--dc-text); font-size: 13px; }
.dc-operation-identity code { margin-top: 5px; color: var(--dc-muted); font: 11px/1.45 "JetBrains Mono", ui-monospace, monospace; }
.dc-operation-identity small { margin-top: 5px; font-size: 9px; font-weight: 750; line-height: 1.4; }
.dc-operation-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; }
.dc-operation-meta div { min-width: 0; }
.dc-operation-meta dt { color: var(--dc-muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-operation-meta dd { margin: 4px 0 0; color: var(--dc-text); font: 10px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }

.dc-generated-details { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--dc-line); }
.dc-generated-details summary { min-height: 44px; padding: 12px 0 4px; color: var(--dc-blue-600); cursor: pointer; font-size: 12px; font-weight: 700; }
.dc-generated-details[open] summary { margin-bottom: 10px; }
.dc-generated-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; min-width: 0; margin-bottom: 4px; background: var(--dc-line); border: 1px solid var(--dc-line); }
.dc-generated-detail-grid > div { min-width: 0; padding: 13px; background: var(--dc-surface-soft); }
.dc-generated-detail-grid dt { color: var(--dc-muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dc-generated-detail-grid dd { margin: 6px 0 0; color: var(--dc-text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.dc-generated-detail-grid pre { max-height: 260px; margin: 0; padding: 12px; overflow: auto; color: #dce6ed; background: var(--dc-navy-950); border-radius: 6px; font: 10px/1.5 "JetBrains Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-generated-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }

.dc-doc-scenarios { margin-top: 16px; border: 1px solid var(--dc-line); border-radius: 12px; overflow: hidden; }
.dc-doc-scenarios > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px; background: var(--dc-surface-soft); border-bottom: 1px solid var(--dc-line); }
.dc-doc-scenarios h4 { margin: 6px 0 0; color: var(--dc-text); font-size: 21px; }
.dc-doc-scenarios > header > p { max-width: 560px; margin: 0; color: var(--dc-muted); font-size: 13px; line-height: 1.55; }
.dc-scenario-doc-register { max-height: 680px; overflow: auto; background: var(--dc-surface); }
.dc-scenario-doc-row { min-width: 0; padding: 15px 16px; border-bottom: 1px solid var(--dc-line); }
.dc-scenario-doc-row:last-child { border-bottom: 0; }
.dc-scenario-doc-row > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dc-scenario-doc-row h5 { margin: 0; color: var(--dc-text); font-size: 14px; }
.dc-scenario-doc-row header p { margin: 5px 0 0; color: var(--dc-muted); font-size: 12px; line-height: 1.5; }
.dc-scenario-doc-row header > b { flex: 0 0 auto; color: var(--dc-muted); font-size: 10px; letter-spacing: .05em; }

.dc-doc-runbooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.dc-doc-runbooks a { min-width: 0; min-height: 64px; padding: 14px; color: var(--dc-text); background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 9px; text-decoration: none; }
.dc-doc-runbooks span,
.dc-doc-runbooks small { display: block; overflow-wrap: anywhere; }
.dc-doc-runbooks span { font-weight: 700; }
.dc-doc-runbooks small { margin-top: 5px; color: var(--dc-muted); font-size: 11px; line-height: 1.45; }

.developer-console :where(button, a)[disabled],
.developer-console a[aria-disabled="true"] { cursor: not-allowed; opacity: .48; }
.developer-console :where(.primary-button, .ghost-button) { min-height: 44px; }

@media (max-width: 980px) {
  .developer-console { --dc-sticky-top: calc(var(--cr-suite-height, 0px) + 74px); }
  .dc-environment-identity { min-width: 210px; }
  .developer-console-hero { grid-template-columns: 1fr; }
  .dc-fact-register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-scenario-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-integration-row,
  .dc-readiness-row { grid-template-columns: minmax(0, 1fr) 1fr; }
  .dc-integration-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .dc-doc-sequence,
  .dc-doc-sequence-quickstart,
  .dc-doc-sequence-buy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dc-doc-sequence li:nth-child(3n)::after { display: none; }
  .dc-operation-row { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .dc-operation-meta { grid-column: 2 / -1; }
  .dc-webhook-truth { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dc-run-truth,
  .dc-pack-truth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-pack-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .dc-environment-bar { border-radius: 8px; }
  .dc-environment-identity { min-width: 196px; }
  .developer-console-hero { gap: 16px; padding: 20px 16px; border-radius: 12px; }
  .developer-console-intro h2 { font-size: clamp(26px, 8vw, 32px); }
  .developer-console-actions,
  .dc-inline-actions { flex-direction: column; }
  .developer-console-actions :where(button, a),
  .dc-inline-actions :where(button, a) { width: 100%; }
  .developer-console-workspaces { position: relative; top: auto; margin-inline: -4px; border-radius: 10px; }
  .developer-console-panel { padding: 20px 16px; border-radius: 12px; }
  .developer-panel-heading { display: grid; gap: 16px; }
  .developer-panel-heading :where(button, a) { width: 100%; }
  .dc-two-column,
  .dc-explorer-layout,
  .dc-events-layout,
  .dc-checkout-result,
  .dc-webhook-grid,
  .dc-run-source-grid,
  .dc-run-detail-grid { grid-template-columns: 1fr; }
  .dc-checkout-wide { grid-column: auto; }
  .dc-scenario-catalog { grid-template-columns: 1fr; }
  .dc-run-list li { grid-template-columns: 32px minmax(0, 1fr); }
  .dc-run-list li > b { grid-column: 2; }
  .dc-request-meta { grid-template-columns: 1fr; }
  .dc-request-meta div:nth-child(2) { grid-column: auto; }
  .dc-code-toolbar { grid-template-columns: 1fr; }
  .dc-code-actions { justify-content: flex-start; }
  .dc-evidence-lookup { grid-template-columns: 1fr; }
  .dc-doc-contract-strip { grid-template-columns: 1fr; }
  .dc-doc-contract-strip article { grid-template-columns: 40px minmax(0, 1fr); border-right: 0; border-bottom: 1px solid var(--dc-line); }
  .dc-doc-contract-strip article:last-child { border-bottom: 0; }
  .dc-doc-contract-strip article button { grid-column: 1 / -1; width: 100%; }
  .dc-doc-workflow > header,
  .dc-doc-operations > header,
  .dc-doc-scenarios > header,
  .dc-integration-start > header,
  .dc-sandbox-binding-workspace > header { display: grid; }
  .dc-sandbox-binding-workspace > header button { width: 100%; }
  .dc-doc-workflow > header > strong { justify-self: start; }
  .dc-doc-sequence,
  .dc-doc-sequence-quickstart,
  .dc-doc-sequence-buy { grid-template-columns: 1fr; }
  .dc-doc-sequence li:not(:last-child)::after { top: auto; right: auto; bottom: -13px; left: 25px; width: 0; height: 12px; border-top: 0; border-left: 1px solid var(--dc-line-strong); }
  .dc-doc-sequence li:nth-child(3n):not(:last-child)::after { display: block; }
  .dc-doc-contract-grid { grid-template-columns: 1fr; }
  .dc-doc-actions { flex-direction: column; }
  .dc-doc-actions :where(button, a) { width: 100%; }
  .dc-generated-detail-grid { grid-template-columns: 1fr; }
  .dc-operation-row { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
  .dc-operation-meta { grid-column: 1 / -1; }
  .dc-operation-row > .dc-row-action { grid-column: 1 / -1; width: 100%; }
  .dc-doc-runbooks { grid-template-columns: 1fr; }
  .dc-integration-start-list li { grid-template-columns: 32px minmax(0, 1fr); }
  .dc-integration-start-list li > :where(b, button) { grid-column: 2; justify-self: start; text-align: left; }
  .dc-quickstart-next { display: grid; }
  .dc-quickstart-next button { width: 100%; }
  .dc-webhook-heading,
  .dc-webhook-detail > header,
  .dc-webhook-secret { grid-template-columns: 1fr; display: grid; }
  .dc-webhook-heading button,
  .dc-webhook-secret .dc-inline-actions,
  .dc-webhook-detail > header .dc-inline-actions { width: 100%; }
  .dc-webhook-secret .dc-inline-actions :where(button, a),
  .dc-webhook-detail > header .dc-inline-actions :where(button, a) { flex: 1 1 180px; }
  .dc-webhook-delivery-row { grid-template-columns: 78px minmax(0, 1fr); }
  .dc-webhook-delivery-row small { grid-column: 2; text-align: left; }
  .dc-webhook-operations-grid { grid-template-columns: 1fr; }
  .dc-binding-preflight li { grid-template-columns: minmax(0, 1fr) auto; }
  .dc-binding-preflight li > small { grid-column: 1 / -1; }
  .dc-durable-run > header,
  .dc-pack-heading { display: grid; }
  .dc-durable-run > header > strong,
  .dc-pack-heading > strong { text-align: left; }
  .dc-pack-tabs { margin-inline: 12px; }
  .dc-pack-panel { margin-inline: 12px; }
}

@media (max-width: 420px) {
  .developer-console,
  .developer-console-hero { margin-inline: 0; }
  .developer-console-intro h2 { letter-spacing: -.035em; }
  .developer-console-boundary { padding: 18px; }
  .developer-console-boundary dl div { grid-template-columns: 1fr; gap: 4px; }
  .developer-console-boundary dd { text-align: left; }
  .developer-console-workspaces a { padding-inline: 13px; }
  .dc-fact-register,
  .dc-readiness-summary { grid-template-columns: 1fr; }
  .dc-readiness-summary article { border-right: 0; border-bottom: 1px solid var(--dc-line); }
  .dc-readiness-summary article:last-child { border-bottom: 0; }
  .dc-lined-list li,
  .dc-gap-register li,
  .dc-axis-register div,
  .dc-id-register div { grid-template-columns: 1fr; gap: 6px; }
  .dc-lined-list strong,
  .dc-axis-register dd,
  .dc-id-register dd { text-align: left; }
  .dc-integration-row,
  .dc-readiness-row { grid-template-columns: 1fr; gap: 7px; }
  .dc-integration-actions { grid-column: auto; }
  .dc-code-toolbar { align-items: stretch; flex-direction: column; }
  .dc-code-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dc-code-actions .ghost-button { width: 100%; }
  .dc-opaque-id-item { grid-template-columns: 1fr; }
  .dc-opaque-id-actions { justify-content: flex-start; }
  .dc-webhook-truth,
  .dc-webhook-subscription-meta,
  .dc-webhook-delivery-meta { grid-template-columns: 1fr; }
  .dc-webhook-grid { padding: 12px; }
  .dc-webhook-workspace > .dc-error-summary,
  .dc-webhook-secret,
  .dc-webhook-detail { margin-inline: 12px; }
  .dc-webhook-subscription-actions,
  .dc-webhook-retry-confirm .dc-inline-actions { flex-direction: column; }
  .dc-webhook-subscription-actions button,
  .dc-webhook-retry-confirm .dc-inline-actions button { width: 100%; }
  .dc-webhook-operation-facts { grid-template-columns: 1fr; }
  .dc-run-truth,
  .dc-pack-truth { grid-template-columns: 1fr; }
  .dc-artifact-context dl div { grid-template-columns: 1fr; }
  .dc-run-source-details div,
  .dc-run-log-list dl div,
  .dc-run-webhook-list dl div { grid-template-columns: 1fr; gap: 4px; }
  .dc-binding-preflight > header { align-items: flex-start; flex-direction: column; }
  .dc-binding-preflight > header a { width: 100%; }
  .dc-binding-preflight li { grid-template-columns: 1fr; }
  .dc-binding-preflight li > b { text-align: left; }
}

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