:root {
  color-scheme: dark;
  font-family:
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #edf0f5;
  background: #111318;
  font-synthesis: none;
  --border:#3d4656;
  --muted:#b7c2d4;
  --blue:#83bdff;
  --amber:#f5c076;
  --mono:Consolas,"Liberation Mono",monospace;
}

/* VIEW-01: readable, bounded configuration graph with a complete paged index. */
.relationships-view { min-width:0; padding:24px; }
.relationship-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.relationship-heading h2 { margin:0;font-size:23px;letter-spacing:-.4px; }
.relationship-heading p { margin:4px 0 20px;color:var(--muted); }
.relationship-count { font-size:13px;color:var(--muted);padding-top:7px; }
.relationship-filters { display:grid;grid-template-columns:minmax(170px,1.5fr) repeat(3,minmax(120px,1fr)) auto;gap:12px;align-items:end; }
.relationship-filters label { display:flex;flex-direction:column;gap:5px;font-size:13px;color:#d2dbe9;min-width:0; }
.relationship-filters input,.relationship-filters select { width:100%;min-width:0;border:1px solid var(--border);border-radius:6px;padding:9px 10px;background:#171d27;color:#edf0f5; }
.relationship-evidence-strip { display:flex;align-items:flex-start;gap:7px;font-size:13px;color:#c4d1e3;line-height:1.6;margin:16px 0;overflow-wrap:anywhere; }
.relationship-workspace { display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:20px;min-width:0; }
.relationship-main { min-width:0; }
.relationship-canvas-header { display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;background:#202735;border:1px solid var(--border);border-radius:8px 8px 0 0;font-size:12px;color:#c5d1e3; }
.relationship-canvas-header>div { display:flex;align-items:center;gap:8px; }
.relationship-canvas { width:100%;height:360px;overflow:auto;position:relative;border:1px solid var(--border);border-top:0;background:#131924;background-image:radial-gradient(#334057 1px,transparent 1px);background-size:20px 20px; }
.relationship-zoom-frame { position:relative; }
.relationship-stage { position:relative;transform-origin:0 0; }
.relationship-canvas-label { position:absolute;left:24px;top:16px;font-size:10px;letter-spacing:1.4px;color:#c1cce0; }
.relationship-wires { position:absolute;left:0;top:0;pointer-events:none; }
.relationship-wires path { fill:none;stroke:#728eae;stroke-width:1.6; }
.relationship-wires .unresolved,.relationship-wires .authored { stroke-dasharray:5 4; }
.relationship-wires .restricted,.relationship-wires .ambiguous { stroke:#f5c076; }
.relationship-node { position:absolute;display:flex;flex-direction:column;justify-content:center;text-align:left;gap:5px;border:1px solid #526079;border-radius:7px;padding:12px 14px;background:#202b3a;box-shadow:0 5px 16px #0003; }
.relationship-node.selected,.relationship-index-item.selected,.relationship-edge-main.selected { border-color:#a4d0ff;background:#253d58; }
.relationship-node>span { color:#c9d6e9;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.relationship-node strong { font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%; }
.relationship-node small { font-size:10px;color:#c2cfe2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.relationship-pan { display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0;font-size:12px;color:var(--muted); }
.relationship-index h3 { display:flex;gap:10px;align-items:center;font-size:15px;margin:18px 0 10px; }
.relationship-index h3 span { font-size:12px;color:var(--muted); }
.relationship-node-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.relationship-index-item { display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:12px;background:#1b2330;border:1px solid var(--border);border-radius:6px;min-width:0; }
.relationship-index-item>span:first-child { display:grid;grid-template-columns:17px minmax(0,1fr);gap:2px 8px;min-width:0; }
.relationship-index-item strong { font-size:13px;overflow-wrap:anywhere; }
.relationship-index-item small { grid-column:2;font-size:11px;color:var(--muted);overflow-wrap:anywhere; }
.relationship-state { display:inline-flex;font-size:10px;font-weight:600;line-height:1.3;padding:4px 6px;border:1px solid #55627a;border-radius:4px;color:#d1dbea;background:#283346;max-width:130px;flex-shrink:0; }
.relationship-state.matched { color:#bee9d0;background:#213b31;border-color:#486c59; }
.relationship-state.ambiguous,.relationship-state.restricted,.relationship-state.gated { color:#ffdaa4;background:#423725;border-color:#796548; }
.relationship-edge-row { display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);padding:9px 0;min-width:0; }
.relationship-edge-main { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 9px;align-items:center;text-align:left;flex:1;min-width:0;padding:8px;border:1px solid transparent;border-radius:5px; }
.relationship-edge-main>span:first-child { grid-column:1;font-size:11px;color:var(--muted);text-transform:capitalize; }
.relationship-edge-main strong { grid-column:1;font-size:13px;overflow-wrap:anywhere; }
.relationship-edge-main i { color:#93bce9;font-style:normal;padding:0 3px; }
.relationship-edge-main .relationship-state { grid-column:2;grid-row:1/3; }
.relationship-pagination { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0;color:var(--muted);font-size:12px; }
.relationship-pagination>div { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
.relationship-pagination .button svg { display:none; }
.relationship-details { border:1px solid var(--border);border-radius:8px;background:#1c2431;padding:18px;min-width:0;align-self:start;position:sticky;top:16px;overflow-wrap:anywhere; }
.relationship-details h3 { font-size:18px;margin:14px 0 8px; }
.relationship-details p { color:#ccd6e7;font-size:13px;line-height:1.65; }
.relationship-detail-heading { display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted); }
.relationship-details dl,.relationship-boundaries dl { margin:16px 0;font-size:12px; }
.relationship-details dt,.relationship-boundaries dt { color:var(--muted);margin-top:10px; }
.relationship-details dd,.relationship-boundaries dd { margin:2px 0;color:#edf0f5;overflow-wrap:anywhere; }
.relationship-details details { margin-top:15px;font-size:12px; }
.relationship-details summary { cursor:pointer;font-weight:600; }
.relationship-details pre { font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;padding:10px;background:#101722;border-radius:4px; }
.relationship-details-empty { min-height:230px;display:flex;flex-direction:column;justify-content:center; }
.relationship-candidate { display:flex;gap:8px;justify-content:space-between;text-align:left;color:#9bcaff;font-size:12px;padding:9px 0;max-width:100%;overflow-wrap:anywhere; }
.relationship-empty { padding:12px;font-size:13px;color:var(--muted); }
.relationship-boundaries { margin:22px 0 0;border-top:1px solid var(--border);padding-top:16px;font-size:13px;overflow-wrap:anywhere; }
.relationship-boundaries summary { cursor:pointer;font-weight:600; }
.relationship-boundaries li { margin:8px 0;color:#c8d4e7; }
@media(max-width:1100px) { .relationship-filters{grid-template-columns:repeat(2,minmax(0,1fr));}.relationship-workspace{grid-template-columns:minmax(0,1fr);}.relationship-details{position:static;}.relationship-details-empty{min-height:100px;} }
@media(max-width:600px) { .relationships-view{padding:16px 12px;}.relationship-heading h2{font-size:21px;}.relationship-filters{gap:10px;}.relationship-filters label:first-child{grid-column:1/-1;}.relationship-node-list{grid-template-columns:minmax(0,1fr);}.relationship-edge-row{align-items:flex-start;flex-wrap:wrap;}.relationship-edge-main{flex-basis:100%;}.relationship-state{max-width:110px;}.relationship-pagination>div{gap:6px;}.relationship-canvas{height:300px;}.relationship-canvas-header{font-size:11px;}.relationship-pan>span{flex-basis:100%;}.relationship-details{padding:14px;} }
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #56657e #1b212c;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
button:disabled {
  opacity: .45;
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  vertical-align: middle;
  flex-shrink: 0;
}
[hidden] {
  display: none !important;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #95c7ff;
  outline-offset: 3px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #8ac1ff;
  outline-offset: 1px;
}
::selection {
  background: #345986;
  color: #fff;
}
#app {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 214px;
  display: flex;
  flex-direction: column;
  padding: 0 12px 18px;
  background: #15181e;
  border-right: 1px solid var(--border);
  z-index: 10;
  overflow-y: auto;
}
.brand {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 -12px 20px;
  padding: 0 23px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
}
.brand svg {
  color: var(--blue);
}
.workspace-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 10px 8px;
  border: 1px solid #506078;
  border-radius: 3px;
  background: #202631;
  margin-bottom: 25px;
}
.workspace-switch > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.workspace-switch strong {
  font-size: 14px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.workspace-switch small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.workspace-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #70829e;
  font-family: var(--mono);
  color: #bdd8ff;
  font-size: 14px;
}
.nav-caption {
  font-size: 12px;
  font-weight: 600;
  color: #bdc9db;
  margin: 0 9px 10px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 11px 9px;
  width: 100%;
  text-align: left;
  color: #c4cddd;
  font-size: 14px;
  border-radius: 3px;
  border-left: 2px solid transparent;
}
.nav-item > span:nth-child(2) {
  flex: 1;
}
.nav-item svg {
  color: #afbbce;
}
.nav-item:hover {
  background: #29303d;
}
.nav-item.active {
  background: #29394f;
  color: #fff;
  border-left-color: #8fc6ff;
}
.nav-item.active svg {
  color: #a5d1ff;
}
.nav-count,
.tiny-tag {
  font-family: var(--mono);
  font-size: 12px;
  color: #d0def2;
  padding: 0 5px;
  background: #303e54;
  border: 1px solid #5c6e8a;
  border-radius: 2px;
}
.sidebar-divider {
  border-top: 1px solid var(--border);
  margin: 22px 9px 12px;
}
.sidebar-bottom {
  margin-top: auto;
  padding: 25px 9px 0;
}
.sidebar-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #becadd;
  font-size: 12px;
}
.sidebar-version span {
  font-family: var(--mono);
}
.sidebar-note {
  font-size: 13px;
  color: #b6c1d2;
  margin: 9px 0 0;
}
.green-dot {
  height: 6px;
  width: 6px;
  display: inline-block;
  background: #82d0af;
  border-radius: 50%;
}
.main {
  margin-left: 214px;
  width: calc(100% - 214px);
  min-width: 0;
}
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 0 23px;
  background: #15181e;
  border-bottom: 1px solid var(--border);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #b8c6d9;
  font-size: 14px;
}
.breadcrumb strong {
  color: #edf4ff;
  font-weight: 600;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
.local-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b7c6db;
  font-size: 13px;
}
.local-indicator svg {
  color: #9bd8bb;
}
.avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #63738d;
  border-radius: 3px;
  color: #d0deef;
}
.mobile-menu {
  display: none !important;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 23px 14px;
}
.page-heading h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.3px;
  line-height: 1.3;
  margin: 0;
}
.page-heading p {
  font-size: 14px;
  color: #c0cadd;
  margin: 7px 0 0;
}
.heading-actions {
  display: flex;
  gap: 10px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.button.primary {
  background: #539eee;
  color: #071d38;
  border-color: #7dbaff;
}
.button.primary:hover {
  background: #8ec6ff;
}
.button.secondary {
  background: #273142;
  color: #e0ebfc;
  border-color: #667590;
}
.button.secondary:hover {
  background: #3b4960;
}
.button.small {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}
.button.full {
  width: 100%;
}
.workspace-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 23px 16px;
  color: #bac7db;
  font-size: 13px;
}
.namespace-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c1d0e7;
  font-size: 13px;
  padding: 0;
}
.namespace-control strong {
  font-family: var(--mono);
  font-weight: 400;
  border: 1px solid #5d7190;
  background: #223047;
  color: #dfebff;
  padding: 1px 6px;
}
.meta-divider {
  height: 15px;
  width: 1px;
  background: #5d6b80;
}
.autosave {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c1d0e0;
}
.autosave svg {
  color: #9edcb9;
}
.workbench {
  margin: 0 15px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: #1b2029;
}
.workbench-tabs {
  display: flex;
  align-items: center;
  gap: 25px;
  height: 51px;
  padding: 0 17px;
  background: #232a35;
  border-bottom: 1px solid var(--border);
}
.workbench-tabs > button[role=tab] {
  height: 51px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #c6d4e8;
  border-bottom: 2px solid transparent;
  padding: 0 2px;
}
.workbench-tabs > button.active {
  color: #fff;
  border-bottom-color: #8bc4ff;
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  min-width: 19px;
  background: #304565;
  color: #c4e1ff;
  padding: 1px 4px;
  font-family: var(--mono);
  font-size: 12px;
}
.tab-count.invalid {
  background: #5f3342;
  color: #ffc5d5;
}
.tab-spacer {
  flex: 1;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 6px;
  color: #c9d9f0;
  border-radius: 3px;
}
.icon-button:hover {
  background: #3f506e;
  color: #fff;
}
.icon-button.danger:hover {
  background: #613d4d;
  color: #ffc5d3;
}
.workbench-tabs > .icon-button {
  margin-left: -16px;
}
.workbench-content {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.builder-area {
  flex: 1;
  min-width: 0;
}
.canvas {
  background: #11151b;
}
.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 57px;
  padding: 12px 16px;
  border-bottom: 1px solid #2c3543;
}
.canvas-template {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c2d1e8;
  font-size: 13px;
}
.canvas-template:hover {
  color: #aad5ff;
}
.canvas-local {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  color: #bac7da;
  font-size: 12px;
}
.diagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 19px 0;
  font-size: 13px;
  color: #c1cde0;
}
.diagram-header code {
  font-family: var(--mono);
  font-size: 13px;
  color: #cfe1fb;
}
.diagram-header > span {
  display: flex;
  gap: 7px;
  align-items: center;
}
.graph-viewport {
  overflow: auto;
}
.graph-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(155px, 1fr);
  align-items: center;
  gap: 35px;
  padding: 34px 20px 24px;
  min-height: 346px;
  background-image:
    linear-gradient(#b6c8ef07 1px, transparent 1px),
    linear-gradient(
      90deg,
      #b6c8ef07 1px,
      transparent 1px);
  background-size: 28px 28px;
}
.graph-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  z-index: 2;
}
.graph-column-label {
  font-size: 13px;
  font-weight: 600;
  color: #bfcee5;
}
.graph-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  min-height: 137px;
  text-align: left;
  padding: 15px 13px;
  border: 1px solid #617591;
  border-radius: 4px;
  background: #202936;
  color: #edf3ff;
}
.graph-node:hover {
  background: #2a3546;
  border-color: #b6c8e3;
}
.graph-node.selected {
  border-color: #9cccff;
  outline: 1px solid #9cccff;
}
.graph-node > strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.node-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: #c5d7f1;
  font-size: 13px;
  line-height: 1.4;
}
.node-type {
  display: flex;
  color: #a3d0ff;
}
.node-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: #c3d0e5;
  overflow-wrap: anywhere;
}
.selection-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #a4d3ff;
  margin-left: auto;
}
.port-dot {
  position: absolute;
  top: 50%;
  height: 7px;
  width: 7px;
  border: 1px solid #a6d1ff;
  border-radius: 50%;
  background: #cde5ff;
}
.port-dot.in {
  left: -4px;
}
.port-dot.out {
  right: -4px;
}
.gateway .port-dot.in {
  display: none;
}
.graph-node.stable {
  border-left: 3px solid #8ac0ff;
}
.graph-node.canary {
  border-left: 3px solid var(--amber);
}
.canary .node-type {
  color: #f4cb8f;
}
.route-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.node-badge {
  font-size: 12px;
  font-weight: 600;
  color: #b9d8ff;
}
.canary .node-badge {
  color: #f9d19b;
}
.route-percentage {
  font-family: var(--mono);
  font-size: 27px;
  line-height: 1;
  color: #abd2ff;
}
.route-percentage > span {
  font-size: 15px;
  margin-left: 2px;
}
.canary .route-percentage {
  color: #f5c483;
}
.version-tag {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: #d4e6ff;
  margin-left: 3px;
  padding: 1px 5px;
  border: 1px solid #7490b5;
  border-radius: 2px;
}
.canary .version-tag {
  border-color: #9b825e;
  color: #f7d7a8;
}
.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.rule-annotation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  padding: 12px 18px;
  border-top: 1px solid #3a475d;
  background: #1c2534;
  color: #c7d8ef;
  text-align: left;
  font-size: 13px;
}
.rule-annotation > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rule-annotation strong {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.rule-annotation:hover {
  background: #2c3a50;
}
.graph-placeholder {
  padding: 26px 13px;
  border: 1px dashed #7d90ae;
  text-align: center;
  font-size: 14px;
  color: #c9d8ef;
}
.graph-overflow {
  padding: 8px 20px;
  font-size: 14px;
  color: #bfcee5;
}
.canvas-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid #333f52;
}
.recipe-heading { margin: 24px 0 12px; }
.recipe-inputs { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 0 20px; }
.recipe-inputs > .field { min-width:0; }
.recipe-inputs > .field > label { display:block; margin-bottom:8px; }
.recipe-target-picker { min-width:0; }
.recipe-target-pager { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; }
.ambient-recipe-review, .ambient-recipe-review section, .ambient-recipe-review details { min-width:0; max-width:100%; }
.ambient-recipe-review p, .ambient-recipe-review code { overflow-wrap:anywhere; }
.ambient-recipe-review .code-preview { width:100%; max-width:100%; box-sizing:border-box; white-space:pre; overflow:auto; padding:14px; }
.capability-matrix { margin-top:26px; }
.capability-matrix > p { color:var(--muted); }
.capability-domain { border-top:1px solid var(--border); padding:14px 0; }
.capability-domain summary { cursor:pointer; font-weight:600; }
.capability-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:16px; padding-top:16px; }
.capability-columns dt { font-size:13px; color:var(--muted); margin-bottom:6px; }
.capability-columns dd { margin:0; line-height:1.6; overflow-wrap:anywhere; }
.recipe-evidence { padding: 0 24px 24px; font-size: 14px; line-height: 1.6; }
.recipe-evidence h3 { margin: 18px 0 8px; }
.recipe-connection { border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin: 10px 0; }
.recipe-evidence p { color: var(--muted); margin: 8px 0; overflow-wrap: anywhere; }
.graph-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: #cad8eb;
}
.graph-legend > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.legend-line {
  width: 18px;
  height: 2px;
  background: #8ac0ff;
}
.legend-line.dashed {
  background: none;
  border-top: 2px dashed #f4c583;
}
.canvas-caption {
  font-size: 12px;
  color: #c0cee4;
}
.canvas-helper {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 11px 16px;
  background: #1f2837;
  border-top: 1px solid #43516b;
  color: #c5d5ec;
  font-size: 13px;
}
.inspector {
  display: flex;
  flex-direction: column;
  flex: 0 0 350px;
  width: 350px;
  min-width: 0;
  border-left: 1px solid var(--border);
  background: #1c222c;
}
.inspector-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 15px;
  border-bottom: 1px solid var(--border);
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: #c2d0e6;
  letter-spacing: .1px;
}
.inspector-heading h2 {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}
.inspector-name {
  font-family: var(--mono);
  font-size: 13px;
  color: #c4d3e9;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border: 1px solid #7b94b8;
  border-radius: 3px;
  background: #2b3d58;
  color: #b6d6ff;
}
.type-icon.security,
.table-icon.security {
  background: #3b2c52;
  color: #e1c8ff;
}
.type-icon.gateways,
.table-icon.gateways {
  background: #423625;
  color: #f5d6a1;
}
.type-icon.observability,
.table-icon.observability {
  background: #254644;
  color: #b1e5de;
}
.type-icon.extensions,
.table-icon.extensions {
  background: #462c3e;
  color: #f7c5d7;
}
.type-icon.ambient,
.table-icon.ambient {
  background: #293e5a;
  color: #bbd9ff;
}
.inspector-tabs {
  height: 46px;
  display: flex;
  gap: 25px;
  padding: 0 20px;
  border-bottom: 1px solid #495975;
}
.inspector-tabs > button {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  font-size: 14px;
  color: #c4d3eb;
  border-bottom: 2px solid transparent;
}
.inspector-tabs > button.active {
  color: #fff;
  border-bottom-color: #9dccff;
}
.inspector-body {
  padding: 0 20px 20px;
  max-height: 660px;
  overflow-y: auto;
  flex: 1;
}
.config-section {
  padding: 16px 0;
  border-bottom: 1px solid #45536b;
}
.config-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  color: #eff5ff;
}
.config-section summary::-webkit-details-marker {
  display: none;
}
.config-section summary > svg {
  transform: rotate(-90deg);
  color: #c0d3f1;
}
.config-section[open] summary > svg {
  transform: rotate(0);
}
.section-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #d6e3f7;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #65738a;
  border-radius: 3px;
  background: #141a23;
  color: #edf4ff;
  font-size: 15px;
}
.field input::placeholder {
  color: #b4c7e2;
}
.field small,
.section-hint {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  color: #c1d1e9;
}
.section-hint {
  margin: 8px 0 0;
}
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.json-field {
  font-family: var(--mono);
  resize: vertical;
  line-height: 1.6;
}
.split-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #d0def3;
}
.split-caption > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
.weight-bar {
  display: flex;
  gap: 3px;
  height: 9px;
  background: #445572;
  border-radius: 1px;
  overflow: hidden;
}
.weight-part {
  background: #9ac8ff;
}
.weight-part.canary {
  background: #f0c182;
}
.destination-row {
  padding: 12px;
  border: 1px solid #576b8b;
  border-radius: 3px;
  background: #283347;
}
.destination-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.destination-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #b0d8ff;
}
.destination-dot.canary {
  background: #f5c781;
}
.destination-top strong {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: #e5f0ff;
}
.destination-label {
  font-size: 13px;
  color: #d5e3f8;
  margin-left: 3px;
}
.weight-input {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 15px;
  color: #e3efff;
}
.weight-input input {
  appearance: textfield;
  width: 60px;
  padding: 3px 4px;
  text-align: right;
  font-family: var(--mono);
  font-size: 17px;
  color: #edf4ff;
  background: #161f30;
  border: 1px solid #889fc3;
  border-radius: 2px;
}
.weight-input input::-webkit-inner-spin-button {
  appearance: none;
}
.destination-fields {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 9px;
  margin-top: 12px;
}
.destination-fields .field {
  font-size: 13px;
}
.destination-fields .field input {
  font-size: 14px;
  min-height: 34px;
  padding: 6px 8px;
}
.slider-label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: #dce8fb;
}
.slider-label strong {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: #f7d098;
}
input[type=range] {
  appearance: none;
  grid-column: 1/-1;
  width: 100%;
  height: 5px;
  margin: 2px 0 0;
  border-radius: 1px;
  background:
    linear-gradient(
      to right,
      #f0c589 0% var(--percent),
      #6b7b92 var(--percent) 100%);
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: #f6cc90;
  border: 2px solid #1b2a42;
  outline: 1px solid #f0c995;
  border-radius: 2px;
}
.range-markers {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: #c4d4ee;
  margin-top: -5px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: #b2d6ff;
  font-size: 13px;
  font-weight: 500;
}
.text-button:hover {
  color: white;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #dbe8fb;
}
.toggle-row input {
  appearance: none;
  position: relative;
  cursor: pointer;
  width: 32px;
  height: 18px;
  background: #596b87;
  border: 1px solid #95a7c3;
  border-radius: 2px;
}
.toggle-row input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  height: 12px;
  width: 12px;
  background: #dbeaff;
  border-radius: 1px;
}
.toggle-row input:checked {
  background: #3976c0;
  border-color: #a0cdff;
}
.toggle-row input:checked::after {
  left: 16px;
  background: #e7f3ff;
}
.subset-block {
  padding: 14px;
  border: 1px solid #5d7597;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inspector-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-top: 1px solid #596b88;
  background: #253247;
}
.inspector-footer a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #d2e2fa;
}
.empty-inspector {
  padding: 55px 25px;
  text-align: center;
  color: #cadbf4;
}
.empty-inspector h3,
.advanced-notice h3 {
  font-size: 18px;
}
.empty-inspector p,
.advanced-notice p {
  font-size: 14px;
  line-height: 1.7;
}
.advanced-notice {
  padding: 25px 0;
}
.route-picker {
  margin: 15px 0;
}
.resource-inventory {
  border-top: 1px solid #4c5d78;
  background: #1f2938;
}
.inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 16px;
}
.inventory-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.inventory-header h2 span {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid #738bb1;
  color: #ccddf7;
  background: #304568;
  padding: 0 5px;
}
.inventory-header > div {
  display: flex;
  align-items: center;
  gap: 18px;
}
.resource-search {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c5d8f6;
  border-bottom: 1px solid #8199bb;
}
.resource-search input {
  max-width: 145px;
  padding: 5px 4px;
  background: none;
  border: 0;
  color: #e1edff;
  font-size: 13px;
}
.resource-search input::placeholder {
  color: #c3d5f1;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
thead {
  background: #2b3850;
}
th {
  font-size: 12px;
  font-weight: 600;
  color: #d5e2f6;
  border-top: 1px solid #5c7395;
  border-bottom: 1px solid #5c7395;
  padding: 9px 13px;
}
td {
  padding: 12px 13px;
  white-space: nowrap;
  border-bottom: 1px solid #40546f;
}
th:first-child,
td:first-child {
  padding-left: 17px;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tr.selected {
  background: #30476b;
}
tbody tr:hover {
  background: #354d73;
}
.resource-name {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: #edf5ff;
}
.table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 2px;
  background: #35527d;
  color: #cde5ff;
}
.namespace-tag,
td code {
  font-family: var(--mono);
  font-size: 13px;
  color: #d8e7ff;
}
.table-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #b4e8c9;
}
.table-status.invalid {
  color: #ffc3d0;
}
.table-status.warning {
  color: #f6d7a6;
}
.empty-table {
  text-align: center;
  padding: 26px !important;
  font-size: 14px;
  color: #d0dff5;
}
.page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin: 14px 20px 18px;
  color: #bbcce5;
  font-size: 12px;
}
.page-footer > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.resource-overview {
  padding: 26px;
  min-height: 340px;
}
.overview-title h2 {
  font-size: 22px;
  margin: 8px 0;
}
.overview-title p {
  font-size: 14px;
  color: #c4d6f1;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 13px;
  margin-top: 23px;
}
.overview-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  padding: 20px;
  border: 1px solid #7590b7;
  background: #25344b;
  border-radius: 3px;
}
.overview-card strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.overview-card small {
  font-family: var(--mono);
  font-size: 13px;
  color: #d2e2fa;
}
.overview-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #c6d8f2;
  margin: 4px 0 0;
}
.overview-card.selected {
  outline: 1px solid #b4dbff;
  border-color: #b4dbff;
}
.overview-card:hover {
  background: #354b6e;
}
.overview-card.add-card {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: #bfdeff;
}
.info-box {
  padding: 12px 13px;
  border: 1px solid #6a84a9;
  border-left: 3px solid #acd4ff;
  border-radius: 2px;
  background: #2b3d5a;
  color: #e0ebfc;
  font-size: 13px;
  line-height: 1.7;
}
.inline-error {
  color: #ffd0da;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  margin-top: 10px;
}
.inline-error:empty {
  display: none;
}
.inline-issue {
  display: flex;
  gap: 8px;
  padding: 13px;
  margin-top: 15px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid #947449;
  background: #443725;
  color: #ffdfa9;
}
.inline-issue.error {
  background: #492c39;
  border-color: #a57788;
  color: #ffdae5;
}
.code-input {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid #7b98c3;
  border-radius: 2px;
  background: #101a2b;
  color: #d7e7ff;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  tab-size: 2;
  resize: vertical;
}
.inspector-body > .code-input {
  height: 395px;
  margin: 18px 0 15px;
  font-size: 13px;
  white-space: pre;
}
.yaml-workspace {
  display: flex;
  flex-direction: column;
  min-height: 490px;
  background: #152138;
}
.yaml-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 19px;
  border-bottom: 1px solid #6a84a9;
  color: #d0e3ff;
}
.yaml-toolbar > span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
}
#workspace-yaml {
  min-height: 355px;
  flex: 1;
  resize: vertical;
  border: 0;
  border-radius: 0;
  background: #111a2b;
  padding: 20px;
  font-size: 14px;
  white-space: pre;
}
.yaml-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2c3e5b;
  padding: 14px 17px;
  border-top: 1px solid #738eb2;
}
.yaml-actions > span {
  flex: 1;
  font-size: 13px;
  color: #d1e2fd;
}
.yaml-workspace .inline-error {
  padding: 0 19px 15px;
  max-height: 90px;
  overflow: auto;
}
.validation-view {
  padding: 24px;
  min-height: 455px;
  max-height: 670px;
  overflow-y: auto;
}
.validation-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid #78a088;
  background: #2b4538;
  border-radius: 3px;
}
.validation-icon {
  color: #b6eac8;
}
.validation-summary h2 {
  font-size: 19px;
  margin: 0;
}
.validation-summary p {
  font-size: 14px;
  color: #d6eadd;
  margin: 6px 0 0;
}
.status-badge {
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
  color: #d4f5dd;
  border: 1px solid #89b297;
  padding: 3px 6px;
}
.validation-summary.invalid {
  background: #4a303b;
  border-color: #af8898;
}
.validation-summary.invalid .validation-icon {
  color: #ffd0df;
}
.validation-summary.invalid .status-badge {
  border-color: #bd8d9f;
  color: #ffdeea;
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 23px 4px;
}
.check-list > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d4ecde;
  font-size: 14px;
}
.check-list svg {
  color: #b1e1bf;
}
.check-scope {
  margin-left: auto;
  font-size: 12px;
  color: #cbdfd3;
}
.validation-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 16px;
  margin: 12px 0;
  border: 1px solid #7794bc;
  border-radius: 3px;
  background: #2d405e;
  color: #deebff;
}
.validation-item > div {
  flex: 1;
}
.validation-item strong {
  font-size: 15px;
}
.validation-item p {
  font-size: 14px;
  line-height: 1.6;
  margin: 6px 0 0;
}
.validation-item .tiny-tag {
  margin-left: 5px;
}
.validation-item.error {
  border-color: #bc8ea1;
  background: #4c303e;
  color: #ffdaea;
}
.validation-item.warning {
  border-color: #b89b6a;
  background: #493b29;
  color: #ffe6bd;
}
.validation-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  margin-top: 15px;
  border: 1px solid #839dc4;
  border-radius: 3px;
  background: #304565;
  color: #e0ebfc;
}
.validation-note strong {
  font-size: 15px;
}
.validation-note p {
  font-size: 14px;
  line-height: 1.7;
  margin: 9px 0 13px;
}
.validation-note code {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: #e1edff;
  background: #15223b;
  padding: 8px 9px;
  margin-top: 7px;
  overflow-wrap: anywhere;
}
dialog {
  color-scheme: dark;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: 27px;
  background: #1c222c;
  color: #f3f7ff;
  border: 1px solid #66758d;
  border-radius: 4px;
  box-shadow: 0 20px 90px #0008;
}
dialog::backdrop {
  background: #080b12b3;
}
dialog.wide-modal {
  width: 880px;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 17px;
  border-bottom: 1px solid #6d88b0;
}
.modal-header h2 {
  font-size: 23px;
  font-weight: 600;
  margin: 5px 0 0;
}
.modal-header > .icon-button {
  margin: -3px -5px 0 0;
}
.modal-subtitle {
  font-size: 14px;
  line-height: 1.7;
  color: #d2e0f6;
  margin: 17px 0 23px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
  padding-top: 21px;
  margin-top: 22px;
  border-top: 1px solid #7991b3;
}
dialog > .field {
  margin: 20px 0;
}
dialog > .info-box {
  margin-top: 22px;
}
.catalog-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: #101c30;
  color: #c4e0ff;
  border: 1px solid #96b6e2;
  border-radius: 3px;
}
.catalog-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: #eff5ff;
  font-size: 14px;
}
.catalog-search input::placeholder {
  color: #c3d7f4;
}
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px 0;
}
.catalog-filters button {
  padding: 6px 9px;
  font-size: 13px;
  border: 1px solid #7997c2;
  border-radius: 2px;
  color: #e1edff;
}
.catalog-filters button.active {
  background: #466693;
  border-color: #b7d7ff;
}
.catalog-filters button span {
  font-family: var(--mono);
  margin-left: 5px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-height: 380px;
  overflow: auto;
  border-top: 1px solid #536078;
}
.catalog-card {
  display: grid;
  grid-template-columns: 35px 150px 1fr 130px 18px;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 16px 8px;
  background: #1c222c;
  border-bottom: 1px solid #465369;
}
.catalog-card strong {
  font-size: 15px;
  font-weight: 600;
}
.catalog-card p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #c4cede;
}
.catalog-card code {
  font-family: var(--mono);
  font-size: 13px;
  color: #d2e5ff;
  overflow-wrap: anywhere;
}
.catalog-card > svg {
  align-self: center;
  color: #c2e0ff;
}
.catalog-card:hover {
  background: #2b3544;
  border-color: #9ccaff;
}
.catalog-footnote {
  font-size: 13px;
  line-height: 1.7;
  color: #d6e5fc;
  margin: 17px 3px 0;
}
.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}
.preset-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 20px;
  border: 1px solid #8cabd8;
  border-radius: 3px;
  background: #242f40;
}
.preset-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.preset-card > strong {
  font-size: 18px;
  margin-top: 18px;
}
.preset-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #d5e6ff;
  margin: 9px 0 18px;
  flex: 1;
}
.preset-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #c0dfff;
}
.preset-card:hover {
  background: #35435a;
  border-color: #d1e5ff;
}
.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 22px;
  border: 1px dashed #aacbf8;
  border-radius: 3px;
  background: #273f65;
  color: #e4f0ff;
  cursor: pointer;
}
.file-drop strong {
  font-size: 16px;
}
.file-drop span {
  font-size: 14px;
  color: #d8e6ff;
}
.file-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-drop:focus-within {
  outline: 2px solid #c0dfff;
  outline-offset: 3px;
}
.import-input {
  height: 230px;
  margin-top: 18px;
}
.export-status {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid #92b19f;
  border-radius: 3px;
  background: #304c3b;
  color: #c6f0d0;
}
.export-status strong {
  font-size: 16px;
}
.export-status p {
  font-size: 13px;
  color: #e0eee3;
  margin: 6px 0 0;
}
.export-status.invalid {
  background: #50333f;
  border-color: #c899aa;
  color: #ffe1ec;
}
.export-preview {
  border: 1px solid #8eacd7;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 23px;
}
.preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  background: #30496f;
  border-bottom: 1px solid #8facd6;
  color: #e0edff;
  font-size: 12px;
}
.code-preview {
  background: #101a2b;
  max-height: 250px;
  overflow: auto;
  padding: 14px 0;
}
.code-line {
  display: flex;
  align-items: flex-start;
  white-space: pre;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  color: #e1edff;
}
.line-number {
  flex: 0 0 38px;
  text-align: right;
  padding-right: 12px;
  margin-right: 8px;
  color: #bccfee;
  user-select: none;
}
.code-key {
  color: #afd7ff;
}
.code-value {
  color: #f8d4a4;
}
.code-comment {
  color: #bdcfd9;
}
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin: 28px 0;
}
.guide-steps > div {
  display: flex;
  gap: 17px;
}
.guide-steps > div > span {
  font-family: var(--mono);
  font-size: 19px;
  color: #c4dfff;
}
.guide-steps h3 {
  font-size: 16px;
  margin: 0 0 7px;
}
.guide-steps p {
  font-size: 14px;
  line-height: 1.7;
  color: #deebff;
  margin: 0;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  transform: translate(-50%, 12px);
  background: #2e4869;
  color: #f0f7ff;
  border: 1px solid #b3d2f3;
  border-radius: 3px;
  box-shadow: 0 8px 25px #0005;
  font-size: 14px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  transition: opacity .15s, transform .15s;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
#toast.error {
  background: #643c4d;
  border-color: #e3b0c0;
}
@media (min-width: 1550px) {
  .sidebar {
    width: 230px;
  }
  .main {
    margin-left: 230px;
    width: calc(100% - 230px);
  }
  .inspector {
    width: 382px;
    flex-basis: 382px;
  }
  .graph-stage {
    min-height: 390px;
    gap: 48px;
    padding: 34px;
  }
  .graph-node {
    padding: 18px;
  }
  .graph-node > strong {
    font-size: 18px;
  }
}
@media (max-width: 1250px) {
  .sidebar {
    width: 196px;
    padding-left: 9px;
    padding-right: 9px;
  }
  .main {
    margin-left: 196px;
    width: calc(100% - 196px);
  }
  .brand {
    margin-left: -9px;
    margin-right: -9px;
    font-size: 17px;
  }
  .nav-item {
    font-size: 13px;
    gap: 8px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .inspector {
    width: 325px;
    flex-basis: 325px;
  }
  .inspector-heading,
  .inspector-body {
    padding-left: 17px;
    padding-right: 17px;
  }
  .canvas-local {
    display: none;
  }
  .graph-stage {
    grid-template-columns: minmax(138px, 1fr) minmax(138px, 1fr) minmax(144px, 1fr);
    gap: 29px;
    padding: 29px 15px;
  }
  .graph-node {
    padding: 13px 10px;
  }
  .graph-node > strong {
    font-size: 15px;
  }
  .resource-search input {
    max-width: 100px;
  }
  .resource-name {
    font-size: 13px;
  }
  th,
  td {
    padding-left: 10px;
    padding-right: 10px;
  }
  th:nth-child(3),
  td:nth-child(3) {
    display: none;
  }
  .canvas-caption {
    display: none;
  }
}
@media (max-width: 1050px) {
  .sidebar {
    width: 60px;
    padding: 0 5px 18px;
  }
  .brand {
    justify-content: center;
    margin: 0 -5px 20px;
    padding: 0;
  }
  .brand > div,
  .workspace-switch,
  .nav-caption,
  .sidebar-version,
  .sidebar-note,
  .nav-item > span,
  .nav-item > svg:last-child:not(:first-child) {
    display: none;
  }
  .nav-item {
    justify-content: center;
    padding: 13px 0;
  }
  .nav-item > svg:first-child {
    width: 20px;
    height: 20px;
    display: block;
  }
  .sidebar-divider {
    margin: 20px 3px 12px;
  }
  .main {
    width: calc(100% - 60px);
    margin-left: 60px;
  }
  .sidebar-bottom {
    padding: 0;
  }
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }
  .page-heading,
  .workspace-meta {
    padding-left: 18px;
    padding-right: 18px;
  }
  .workbench {
    margin-left: 10px;
    margin-right: 10px;
  }
  .inspector {
    width: 320px;
    flex-basis: 320px;
  }
  .graph-stage {
    grid-template-columns: 1fr;
    gap: 25px;
    min-height: 0;
    padding: 22px;
  }
  .graph-column.source,
  .graph-column.routing {
    grid-column: 1/-1;
  }
  .graph-column.destinations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    grid-column: 1/-1;
  }
  .destinations > .graph-column-label {
    grid-column: 1/-1;
  }
  .source .graph-column-label {
    display: none;
  }
  .graph-column.routing,
  .graph-column.destinations {
    align-self: start;
    padding-top: 12px;
  }
  .graph-edges {
    display: none;
  }
  .graph-column.routing::before,
  .graph-column.destinations::before {
    content: "\2193";
    position: absolute;
    top: -14px;
    left: 50%;
    font-size: 21px;
    color: #a9cdff;
  }
  .graph-column .port-dot {
    display: none;
  }
  .resource-search {
    display: none;
  }
  .page-heading h1 {
    font-size: 23px;
  }
  .workbench-tabs {
    gap: 17px;
  }
  .canvas-toolbar {
    gap: 10px;
  }
  .canvas-template {
    font-size: 12px;
  }
  .canvas-bottom {
    padding: 13px;
  }
  .graph-legend {
    gap: 13px;
    font-size: 12px;
  }
  .rule-annotation > span {
    display: none;
  }
  .page-footer > span:last-child {
    display: none;
  }
}
@media (max-width: 800px) {
  .sidebar {
    left: -214px;
    width: 214px;
    padding: 0 12px 18px;
    box-shadow: 15px 0 50px #0007;
  }
  .sidebar.mobile-open {
    left: 0;
  }
  .brand {
    justify-content: flex-start;
    margin: 0 -12px 20px;
    padding: 0 23px;
  }
  .brand > div,
  .workspace-switch,
  .nav-caption,
  .sidebar-version,
  .sidebar-note {
    display: flex;
  }
  .brand > div,
  .nav-caption {
    display: block;
  }
  .workspace-switch > span:nth-child(2) {
    display: block;
  }
  .nav-item {
    justify-content: flex-start;
    padding: 11px;
  }
  .nav-item > span,
  .nav-item > svg:last-child:not(:first-child) {
    display: block;
  }
  .sidebar-bottom {
    padding: 20px 9px 0;
  }
  .main {
    width: 100%;
    margin: 0;
  }
  .mobile-menu {
    display: inline-flex !important;
  }
  .topbar {
    height: 55px;
  }
  .topbar-right .local-indicator {
    display: none;
  }
  .page-heading {
    padding-top: 19px;
  }
  .workbench-content {
    flex-direction: column;
  }
  .inspector {
    width: 100%;
    flex-basis: auto;
    border-left: 0;
    border-top: 1px solid #7e98be;
  }
  .inspector-body {
    max-height: none;
    padding: 0 20px 20px;
  }
  .inspector-heading {
    padding: 18px 20px;
  }
  .graph-stage {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding: 30px 20px;
  }
  .graph-column.source,
  .graph-column.routing,
  .graph-column.destinations {
    grid-column: auto;
  }
  .graph-column.destinations {
    display: flex;
    gap: 15px;
  }
  .source .graph-column-label {
    display: block;
  }
  .graph-column.routing,
  .graph-column.destinations {
    padding-top: 0;
    align-self: auto;
  }
  .graph-column.routing::before,
  .graph-column.destinations::before {
    display: none;
  }
  .graph-edges {
    display: block;
  }
  .graph-column .port-dot {
    display: block;
  }
  .graph-column.source .port-dot.in {
    display: none;
  }
  .canvas-caption {
    display: block;
  }
  .rule-annotation > span {
    display: flex;
  }
  .resource-search {
    display: flex;
  }
  .catalog-card {
    grid-template-columns: 35px 1fr 18px;
    gap: 10px;
  }
  .catalog-card p {
    grid-column: 2/-1;
  }
  .catalog-card code {
    grid-column: 2;
  }
  .catalog-card > svg {
    grid-column: 3;
    grid-row: 1;
  }
  .catalog-card strong {
    font-size: 16px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 15px;
  }
}
@media (max-width: 560px) {
  .topbar {
    padding: 0 12px;
  }
  .breadcrumb {
    font-size: 13px;
    gap: 7px;
  }
  .breadcrumb > span {
    display: none;
  }
  .page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 19px 15px 13px;
  }
  .page-heading h1 {
    font-size: 25px;
  }
  .heading-actions {
    width: 100%;
  }
  .heading-actions .button {
    flex: 1;
  }
  .workspace-meta {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 12px;
    gap: 10px;
  }
  .namespace-control {
    font-size: 12px;
  }
  .namespace-control > span {
    display: none;
  }
  .autosave {
    font-size: 12px;
  }
  .workbench {
    margin: 0 8px;
  }
  .workbench-tabs {
    padding: 0 12px;
    gap: 13px;
  }
  .workbench-tabs > button[role=tab] {
    font-size: 13px;
    gap: 5px;
  }
  .workbench-tabs > button[role=tab] svg {
    width: 15px;
    height: 15px;
  }
  .workbench-tabs > .icon-button {
    margin-left: -10px;
    padding: 4px;
    min-width: 24px;
  }
  .canvas-toolbar {
    min-height: 55px;
    padding: 12px;
    gap: 12px;
  }
  .canvas-template {
    font-size: 13px;
  }
  .canvas-template svg {
    display: none;
  }
  .diagram-header {
    padding: 17px 13px 2px;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 5px;
  }
  .graph-stage {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 23px 18px;
  }
  .graph-column.source,
  .graph-column.routing {
    grid-column: 1/-1;
  }
  .graph-column.destinations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    grid-column: 1/-1;
    padding-top: 12px;
  }
  .destinations > .graph-column-label {
    grid-column: 1/-1;
  }
  .graph-column.routing {
    padding-top: 12px;
  }
  .source .graph-column-label,
  .routing .graph-column-label {
    display: none;
  }
  .graph-column.routing::before,
  .graph-column.destinations::before {
    display: block;
    top: -15px;
  }
  .graph-edges {
    display: none;
  }
  .graph-column .port-dot {
    display: none;
  }
  .graph-node {
    min-height: 125px;
    padding: 15px;
  }
  .graph-node > strong {
    font-size: 17px;
  }
  .subset > strong {
    font-size: 15px;
  }
  .route-percentage {
    font-size: 25px;
  }
  .canvas-caption {
    display: none;
  }
  .canvas-helper {
    padding: 13px;
  }
  .rule-annotation {
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 17px;
    font-size: 12px;
  }
  .rule-annotation strong {
    font-size: 12px;
  }
  .rule-annotation > svg {
    display: none;
  }
  .inventory-header {
    padding: 14px 12px;
    gap: 8px;
  }
  .inventory-header > div {
    gap: 8px;
  }
  .resource-search,
  .table-icon {
    display: none;
  }
  .resource-name {
    font-size: 13px;
    gap: 6px;
  }
  td:nth-child(4),
  th:nth-child(4) {
    display: none;
  }
  th:first-child,
  td:first-child {
    padding-left: 13px;
  }
  .inspector-heading h2 {
    font-size: 21px;
  }
  .inspector-body {
    padding: 0 18px 18px;
  }
  .inspector-tabs {
    padding: 0 18px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  .destination-fields .field input {
    font-size: 15px;
  }
  .catalog-grid,
  .preset-grid {
    grid-template-columns: 1fr;
  }
  .preset-grid {
    max-height: 420px;
    overflow: auto;
  }
  .catalog-grid {
    max-height: 390px;
  }
  .modal-header h2 {
    font-size: 21px;
  }
  dialog {
    padding: 22px;
    max-height: calc(100vh - 30px);
  }
  .modal-footer {
    gap: 8px;
    flex-wrap: wrap;
  }
  .validation-view {
    padding: 18px;
  }
  .validation-summary {
    flex-wrap: wrap;
  }
  .validation-summary h2 {
    font-size: 18px;
  }
  .status-badge {
    margin-left: 0;
  }
  .check-scope {
    display: none;
  }
  .validation-note {
    padding: 14px;
  }
  .yaml-actions {
    flex-wrap: wrap;
  }
  .yaml-actions > span {
    flex-basis: 100%;
  }
  .yaml-toolbar > span {
    font-size: 12px;
    gap: 6px;
  }
  .yaml-toolbar .tiny-tag {
    font-size: 11px;
  }
  .page-footer > span:last-child {
    display: none;
  }
}
.schema-control { display:flex; align-items:center; gap:7px; font-size:13px; }
.schema-control select { background:#202c3e; color:#edf4ff; border:1px solid #657994; padding:3px 6px; border-radius:2px; font-size:13px; }
.workspace-meta { flex-wrap:wrap; }
.workbench-tabs { overflow-x:auto; gap:20px; }
.workbench-tabs>button[role=tab] { flex-shrink:0; white-space:nowrap; }
.workbench-tabs>.icon-button { flex-shrink:0; margin-left:-10px; }
.field-error { color:#ffd0db!important; font-size:13px!important; }
.field [aria-invalid=true] { border-color:#ee9baf; }
.inline-issue code, .issue-path { display:block; font-family:var(--mono); font-size:13px; margin:4px 0 8px; overflow-wrap:anywhere; }
.schema-coverage { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:21px 0; border-bottom:1px solid #55667e; }
.schema-coverage h3 { margin:0 0 7px; font-size:16px; }
.schema-coverage p { margin:0; font-size:14px; color:#c4d5ec; line-height:1.65; }
.schema-coverage a { color:#b5d8ff; font-size:13px; white-space:nowrap; }
.coverage-unchecked { padding:8px 15px; background:#3b3227; border:1px solid #9e865c; margin-top:16px; }
.coverage-unchecked p { font-size:14px; line-height:1.6; color:#f4d7ab; }
.workflow-page { padding:25px; min-height:560px; background:#171d26; }
.workflow-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:23px; margin-bottom:23px; border-bottom:1px solid #4d5b70; }
.workflow-heading h2 { margin:0; font-size:23px; font-weight:600; }
.workflow-heading p { font-size:14px; color:#c5d1e3; line-height:1.7; margin:8px 0 0; }
.workflow-mode { color:#c4d6f0; font-size:12px; border:1px solid #637795; padding:4px 8px; border-radius:2px; white-space:nowrap; }
.workflow-empty { text-align:center; padding:65px 25px; color:#c5d6ee; }
.workflow-empty h3 { font-size:21px; color:#eef5ff; }
.workflow-empty p { font-size:15px; line-height:1.7; max-width:490px; margin:15px auto 25px; }
.planner-form { display:grid; grid-template-columns:1.5fr 1.2fr 1fr; gap:20px; align-items:start; }
.planner-form>.button { grid-column:1/-1; justify-self:start; }
.planner-form .field { font-size:14px; }
.workflow-error { display:flex; align-items:flex-start; gap:10px; padding:14px 17px; background:#462b36; border:1px solid #ba8596; color:#ffcedc; font-size:14px; margin-top:20px; line-height:1.6; }
.workflow-warning { display:flex; gap:10px; padding:13px 16px; background:#3f3528; border:1px solid #b09567; color:#ffdfa8; font-size:14px; line-height:1.6; margin:18px 0; }
.generated-plan-identity { font-size:14px; color:#c6d8f0; margin-top:24px; line-height:1.7; }
.generated-plan-identity strong { font-family:var(--mono); color:#edf5ff; font-weight:500; }
.plan-context { display:flex; align-items:center; gap:20px; margin:27px 0 23px; padding:20px; border:1px solid #586b86; background:#222d3e; }
.plan-context>div { flex:1; min-width:0; }
.plan-context>div>span { display:block; font-size:13px; color:#c4d6ee; margin-bottom:7px; }
.plan-context>div:last-of-type>span { color:#f5c483; }
.plan-context strong { font-size:15px; font-family:var(--mono); font-weight:400; overflow-wrap:anywhere; }
.stage-timeline { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 12px; }
.stage-step { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:13px; min-width:126px; flex:1; padding:18px 15px 23px; background:#202c3c; border:1px solid #637893; border-radius:3px; text-align:left; overflow:hidden; }
.stage-step.active { border-color:#a9d2ff; outline:1px solid #a9d2ff; background:#2b3d57; }
.stage-step>span { font-size:13px; color:#d1e0f7; white-space:nowrap; }
.stage-step>strong { font-family:var(--mono); font-size:30px; color:#f5c483; line-height:1.2; }
.stage-step strong small { font-size:17px; }
.stage-step>i { position:absolute; bottom:0; left:0; width:var(--stage-weight); height:4px; background:#f0c286; }
.stage-step.rollback { background:#262b34; min-width:170px; }
.stage-step.rollback strong { color:#d2e4ff; font-size:22px; }
.stage-review { border:1px solid #576983; margin:13px 0 5px; }
.stage-review-header { display:flex; align-items:center; gap:12px; padding:19px; background:#263348; border-bottom:1px solid #667991; }
.stage-review-header>div { flex:1; }
.stage-review-header h3 { font-size:18px; margin:0 0 6px; }
.stage-review-header p { font-size:14px; line-height:1.6; color:#c9d7ea; margin:0; }
.snapshot-yaml { height:380px; resize:vertical; border:0; border-radius:0; font-size:14px; background:#111a28; }
.workflow-footnote { font-size:13px; color:#c0d0e7; line-height:1.75; padding:16px 18px; border-top:1px solid #465b77; }
.planner-intro { padding:40px 0 20px; }
.example-stages { display:flex; gap:18px; align-items:center; color:#98b9e4; }
.example-stages span { font-family:var(--mono); font-size:24px; color:#f1c58a; border:1px solid #7c715c; background:#322e28; padding:12px 20px; }
.planner-intro p { font-size:15px; line-height:1.8; color:#bfcee3; max-width:670px; margin-top:26px; }
.simulator-layout { display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:28px; }
.request-form { display:flex; flex-direction:column; gap:19px; padding:19px; border:1px solid #52647f; background:#202a3a; }
.request-form textarea { font-family:var(--mono); font-size:14px; line-height:1.6; resize:vertical; }
.simulation-results { min-width:0; }
.preview-profile { overflow-wrap:anywhere; }
.preview-assumptions { border:1px solid #52647f; padding:12px; min-width:0; grid-column:1/-1; }
.preview-assumptions legend { padding:0 5px; font-size:14px; }
.preview-assumption { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.6; margin:8px 0; }
.preview-assumption input { flex:0 0 auto; margin-top:5px; width:16px; height:16px; }
.preview-inputs { grid-column:1/-1; min-width:0; }
.preview-inputs summary,.preview-transform summary,.preview-security-result summary,.preview-matrix summary { cursor:pointer; font-weight:600; padding:10px 0; }
.preview-inputs .field { margin:14px 0; }
.simulation-results pre { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font:13px/1.7 var(--mono); max-height:380px; overflow:auto; padding:14px; background:#131c29; }
.simulation-results p { overflow-wrap:anywhere; line-height:1.7; }
.simulation-results .text-button { white-space:normal; text-align:left; }
.preview-security-result { padding:18px 0; border-top:1px solid #52647f; margin-top:20px; }
.plan-context>div { min-width:0; max-width:100%; }
.plan-context strong,.plan-unavailable p,.planner-page p { overflow-wrap:anywhere; }
.plan-complete-baseline summary,.plan-unavailable summary { cursor:pointer; font-weight:600; padding:12px 0; }
.plan-complete-baseline textarea,.plan-reviewed-workspace { display:block; width:100%; max-width:100%; min-height:280px; max-height:560px; resize:vertical; font:13px/1.7 var(--mono); }
.simulation-destination.inactive { opacity:.8; }
.simulation-status { display:flex; align-items:flex-start; gap:15px; padding:19px; border:1px solid #8e7f61; background:#373228; color:#f5dbaa; }
.simulation-status.matched { border-color:#699682; background:#243a32; color:#c0ebd2; }
.simulation-status.invalid { border-color:#bc839a; background:#4b2f3c; color:#ffd0e1; }
.simulation-status h3 { margin:0 0 8px; font-size:20px; }
.simulation-status p { margin:0; font-size:14px; line-height:1.7; }
.matched-rule { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin:21px 0; font-size:14px; }
.matched-rule>span { color:#bbcee9; }
.matched-rule strong { font-family:var(--mono); font-size:15px; color:#e2efff; }
.matched-rule code { font-size:13px; color:#bed7fa; margin-left:auto; }
.simulation-distribution h4, .special-action h4 { font-size:16px; margin:22px 0 15px; font-weight:600; }
.simulation-destination { position:relative; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 18px 22px; margin:12px 0; border:1px solid #7298c8; background:#24354c; overflow:hidden; }
.simulation-destination.canary { border-color:#ab936f; background:#36312a; }
.simulation-destination>div { display:flex; flex-direction:column; gap:9px; min-width:0; }
.simulation-destination>div>strong { font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.simulation-destination code { font-family:var(--mono); font-size:14px; color:#d0e5ff; margin-left:5px; }
.simulation-destination>div>span { font-size:13px; color:#c3d3e9; }
.simulation-destination>strong { font-family:var(--mono); font-size:27px; color:#a8d0ff; }
.simulation-destination.canary>strong { color:#f5ca8d; }
.simulation-destination>i { position:absolute; bottom:0; left:0; height:3px; background:#9ecbff; }
.simulation-destination.canary>i { background:#f0c286; }
.simulation-warnings { margin:20px 0; }
.simulation-warnings p { display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.7; color:#f5d3a0; }
.match-trace { margin-top:24px; border-top:1px solid #596e8c; }
.match-trace summary { display:flex; align-items:center; justify-content:space-between; list-style:none; padding:17px 0; font-size:16px; font-weight:600; cursor:pointer; }
.match-trace ol { list-style:none; padding:0; margin:0 0 15px; display:flex; flex-direction:column; gap:17px; }
.match-trace li { display:flex; align-items:flex-start; gap:11px; font-size:14px; }
.match-trace li.passed>svg { color:#a4dfba; }
.match-trace li.failed>svg { color:#eaa7ba; }
.match-trace li.unknown>svg { color:#f3cb90; }
.match-trace li p { color:#bed0e8; font-size:13px; line-height:1.7; margin:6px 0 0; overflow-wrap:anywhere; }
.simulation-intro { display:flex; align-items:center; flex-direction:column; justify-content:center; text-align:center; padding:55px 25px; min-height:420px; color:#b4cdeb; }
.simulation-intro h3 { font-size:22px; color:#eaf4ff; margin:23px 0 12px; }
.simulation-intro p { font-size:15px; line-height:1.8; max-width:420px; margin:0 0 28px; }
.request-flow { display:flex; align-items:center; gap:8px; color:#afd1ff; }
.request-flow>span { font-size:13px; padding:9px 10px; border:1px solid #6a89b4; border-radius:2px; }
.special-action pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--mono); font-size:14px; padding:16px; background:#1c293d; }
@media (max-width:1100px) { .planner-form { grid-template-columns:1fr 1fr; } .planner-form>.button { grid-column:auto; align-self:center; margin-top:10px; } .plan-context { flex-wrap:wrap; } .plan-context>.button { width:100%; } .simulator-layout { grid-template-columns:280px minmax(0,1fr); gap:20px; } }
@media (max-width:800px) { .workflow-page { padding:20px; } .simulator-layout { grid-template-columns:1fr; } .request-form { display:grid; grid-template-columns:1fr 1fr; } .request-form>.field:last-of-type,.request-form>.button { grid-column:1/-1; } .request-flow { flex-wrap:wrap; justify-content:center; } .stage-review-header { flex-wrap:wrap; } .stage-review-header>div { flex-basis:100%; } .schema-coverage { flex-direction:column; gap:12px; } }
@media (max-width:560px) { .workflow-page { padding:18px 14px; } .workflow-heading { flex-direction:column; gap:12px; } .workflow-heading h2 { font-size:22px; } .planner-form,.request-form { grid-template-columns:1fr; } .planner-form>.button { width:100%; margin:0; } .example-stages { gap:8px; } .example-stages span { font-size:17px; padding:11px 9px; } .plan-context { padding:15px; gap:15px; } .plan-context strong { font-size:13px; } .stage-step { min-width:120px; } .stage-review-header { padding:15px; } .stage-review-header>.button { flex:1; } .snapshot-yaml { padding:15px; font-size:13px; } .schema-control { margin-left:auto; } .autosave { display:none; } .workbench-tabs { gap:18px; } .workbench-tabs>button[role=tab] { font-size:14px; } .matched-rule code { margin-left:0; } .schema-control select { font-size:14px; } }
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Workspace library and configuration reviews. */
dialog.workspace-modal { width: min(760px,calc(100vw - 32px)); }
dialog.review-modal { width: min(1000px,calc(100vw - 32px)); }
.workspace-library,.workspace-tools,.workspace-settings,.archived-workspaces,.storage-recovery,.review-body { margin: 20px 24px; }
.workspace-row { display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);margin-top:-1px; }
.workspace-row.active { background:#223045;border-left:3px solid var(--blue); }
.workspace-row>div:first-of-type { flex:1;min-width:0; }
.workspace-row strong { display:block;font-size:15px;overflow-wrap:anywhere; }
.workspace-row span:not(.workspace-avatar):not(.tiny-tag),.workspace-row small { display:block;color:var(--muted);font-size:13px; }
.workspace-row-actions { display:flex;align-items:center;gap:10px;flex-shrink:0; }
.workspace-tools { display:flex;flex-wrap:wrap;gap:10px; }
.workspace-settings { border-top:1px solid var(--border);padding-top:18px; }
.workspace-settings h3 { font-size:16px;margin:0 0 18px; }
.workspace-settings>.field { margin-bottom:16px; }
.workspace-settings .section-hint { margin-top:18px; }
.archived-workspaces>summary,.review-issues>summary { cursor:pointer;color:var(--muted);padding:8px 0; }
.storage-recovery { border:1px solid #8b693b;padding:16px;background:#302820; }
.storage-recovery p { font-size:14px;color:#f2cd9e; }
.review-body>.modal-subtitle { margin:0 0 20px; }
.project-facts { padding:16px;border:1px solid var(--border);margin-bottom:16px; }
.project-facts strong,.project-facts span { display:block;overflow-wrap:anywhere; }
.project-facts span { color:var(--muted);font-size:14px;margin-top:4px; }
.review-summary { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border); }
.review-summary>div { padding:14px 18px;border-right:1px solid var(--border); }
.review-summary>div:last-child { border:0; }
.review-summary strong { display:block;font-family:var(--mono);font-size:24px;font-weight:500; }
.review-summary span { font-size:13px;color:var(--muted); }
.review-summary .added strong { color:#9edeb8; }
.review-summary .removed strong { color:#ffa8ac; }
.review-summary .modified strong { color:var(--amber); }
.review-validation { padding:16px 0;display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center; }
.review-validation>span { font-size:14px;color:var(--muted); }
.review-validation.invalid>strong { color:#ffa8ac; }
.review-validation p { margin:0;width:100%;font-size:14px;color:var(--muted); }
.review-issues { border:1px solid var(--border);padding:5px 16px;margin-bottom:18px; }
.review-issues p { font-size:14px;overflow-wrap:anywhere;border-top:1px solid var(--border);padding-top:12px; }
.review-issues p>span { display:block;color:var(--muted); }
.review-issues .error strong { color:#ffa8ac; }
.review-resources { display:flex;flex-direction:column;gap:10px; }
.review-resource { border:1px solid var(--border); }
.review-resource>summary { display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;background:#1c2330; }
.review-resource>summary>div { flex:1;min-width:0; }
.review-resource>summary strong { display:block;font-size:15px;overflow-wrap:anywhere; }
.review-resource>summary div>span,.review-resource>summary>span:last-child { color:var(--muted);font-size:13px; }
.change-tag { font-size:12px;padding:2px 7px;border:1px solid var(--border);min-width:74px;text-align:center; }
.change-tag.added { color:#9edeb8;border-color:#567862; }
.change-tag.removed { color:#ffa8ac;border-color:#85575c; }
.change-tag.modified { color:var(--amber);border-color:#8b734e; }
.field-diffs { padding:0 16px; }
.field-diff { padding:16px 0;border-top:1px solid var(--border); }
.field-diff>code { font-size:13px;color:#bfdaff;overflow-wrap:anywhere; }
.field-diff p { margin:5px 0 10px;font-size:14px;color:var(--muted);overflow-wrap:anywhere; }
.field-diff>div { display:grid;grid-template-columns:1fr 1fr;gap:10px;font-family:var(--mono);font-size:13px; }
.field-diff>div>span { padding:9px 12px;overflow-wrap:anywhere; }
.diff-before { color:#ffd3d5;background:#35272d;border-left:2px solid #b76c78; }
.diff-after { color:#c8efd7;background:#23352e;border-left:2px solid #6fac87; }
.review-empty { padding:20px;border:1px solid var(--border);color:var(--muted);font-size:14px; }
.review-yaml { margin-top:18px;border:1px solid var(--border); }
.review-yaml>summary { padding:14px 16px;cursor:pointer;font-size:14px; }
.review-yaml>summary>span { color:var(--muted);margin-left:16px;font-size:13px; }
.diff-scroll { max-height:480px;overflow:auto;background:#151a22;border-top:1px solid var(--border);padding:8px 0; }
.diff-line { display:flex;width:max-content;min-width:100%;font-size:13px;line-height:1.8;font-family:var(--mono); }
.diff-line>span { width:45px;flex-shrink:0;text-align:right;padding-right:9px;color:#adb8cb;border-right:1px solid #394354; }
.diff-line>b { width:28px;text-align:center;font-weight:400;flex-shrink:0; }
.diff-line>code { white-space:pre;padding-right:18px; }
.diff-line.added { color:#c8efd7;background:#23352e; }
.diff-line.removed { color:#ffd3d5;background:#35272d; }
.diff-limit { color:var(--muted);padding:12px;font-size:13px; }
.coverage-intro,.configuration-boundary { padding:16px 18px;border:1px solid var(--border);background:#1c2330; }
.coverage-intro p,.configuration-boundary p { margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.65; }
.coverage-table { margin-top:22px;border:1px solid var(--border); }
.coverage-row { display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,1.1fr) minmax(210px,1.3fr);gap:20px;align-items:center;padding:16px 18px;border-top:1px solid var(--border); }
.coverage-head { border-top:0;background:#1c2330;color:var(--muted);font-size:13px;font-weight:600; }
.coverage-row small { display:block;color:var(--muted);margin-top:5px;font-size:13px; }
.coverage-row code { display:inline-block;overflow-wrap:anywhere;font-size:13px;margin:3px 8px 3px 0;color:#bfdaff; }
.coverage-state { font-size:13px;color:var(--muted); }
.coverage-state.partial { color:var(--amber); }
.coverage-pending { margin-top:26px; }
.coverage-pending>div { padding:14px 0;border-top:1px solid var(--border); }
.coverage-pending span { display:block;margin-top:6px;color:var(--muted);font-size:14px; }
.configuration-toolbar,.configuration-actions { display:flex;flex-wrap:wrap;gap:10px; }
.configuration-layout { display:grid;grid-template-columns:235px minmax(0,1fr);border:1px solid var(--border);margin-top:20px; }
.configuration-list { padding:10px;border-right:1px solid var(--border);background:#171c25; }
.configuration-list button { display:block;width:100%;text-align:left;padding:12px;border:1px solid transparent;border-radius:4px;margin-bottom:6px; }
.configuration-list button:hover { background:#222a37; }
.configuration-list button.active { background:#243348;border-color:#59718f; }
.configuration-list strong,.configuration-list span { display:block;overflow-wrap:anywhere; }
.configuration-list span { font-size:13px;color:var(--muted);margin-top:4px; }
.configuration-editor { min-width:0;padding:22px; }
.configuration-identity { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px; }
.configuration-identity span { display:block;color:var(--muted);font-size:14px;margin-top:4px; }
.configuration-editor>.field { margin-top:20px; }
.configuration-editor .code-input { min-height:350px;resize:vertical;line-height:1.7; }
.configuration-editor #config-target { max-width:420px; }
.configuration-footer { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;color:var(--muted);font-size:14px; }
.configuration-diagnostic { font-size:14px;color:var(--amber); }
.configuration-diagnostic.error { color:#ffb1b7; }
.configuration-prerequisites { margin:20px 0;border:1px solid var(--border);padding:14px 16px; }
.configuration-prerequisites summary { cursor:pointer;font-size:14px;font-weight:600; }
.configuration-prerequisites p { color:var(--muted);font-size:14px;line-height:1.65; }
.editor-section>summary::after { content:'+';margin-left:12px;flex-shrink:0;color:var(--muted); }
.editor-section[open]>summary::after { content:'−'; }
.review-body>.configuration-boundary { margin:18px 0; }
.installation-recipe-review { min-width:0;overflow-wrap:anywhere; }
.installation-recipe-review section { min-width:0; }
.installation-recipe-review p,.installation-recipe-review code,.installation-recipe-review small { overflow-wrap:anywhere; }
.installation-recipe-review small { display:block;color:var(--muted);line-height:1.6;margin-top:4px; }
.installation-recipe-review .code-preview { box-sizing:border-box;width:100%;max-width:100%;padding:14px;white-space:pre; }
.editor-field>label,.editor-map-key>label,.editor-map-add>label { display:block;font-size:14px;font-weight:500;line-height:1.5;margin-bottom:7px;overflow-wrap:anywhere; }
.editor-field .field-required { color:var(--muted);font-size:12px;font-weight:400;margin-left:6px; }
.editor-field .field-hint { line-height:1.6;white-space:normal; }
[data-editor-id="istio-metadata"] { min-width:0;overflow-wrap:anywhere; }
.editor-field .field-error { color:#ffb1b7; }
.editor-field>.editor-action { margin-top:8px;justify-self:start; }
.editor-section .section-fields { padding:0 0 0 10px;border-left:1px solid #4a5568; }
.editor-section .editor-section { margin-top:12px; }
.editor-section>summary { line-height:1.6;overflow-wrap:anywhere; }
.editor-json { min-height:90px;resize:vertical;line-height:1.7; }
.editor-map-entry,.editor-list-item { border:1px solid var(--border);padding:12px;margin:12px 0;min-width:0; }
.editor-map-key,.editor-map-add { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 0; }
.editor-map-key>label,.editor-map-add>label { grid-column:1/-1;margin:0; }
.editor-map-key>input,.editor-map-add>input { width:100%;min-width:0;border:1px solid var(--border);background:#131923;color:#edf0f5;padding:9px 11px;border-radius:4px; }
.editor-list-actions { display:flex;flex-wrap:wrap;gap:8px;margin:10px 0; }
.editor-list-toolbar { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px; }
.editor-list-toolbar>strong { flex:1;font-size:14px; }
.catalog-qualifier { display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.5; }
.catalog-card[disabled] { opacity:.5;cursor:not-allowed; }
.catalog-card.gateway-template code { border-color:#5f6d85; }
.editor-boundary { padding:10px;border:1px solid var(--border);background:#1c2330; }
.global-editor-heading { margin:16px 0; }
.global-section>summary { align-items:center;flex-wrap:wrap; }
.global-section>summary>.section-toggle { flex:1 1 260px;min-width:0;display:block;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;font-weight:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere; }
.global-section>summary>.section-toggle:hover { color:#fff; }
.global-section>summary>.editor-action { white-space:nowrap; }
.global-section .editor-search { margin:12px 0; }
.global-choice .field-hint { display:block;margin-top:6px; }
.global-section .global-section { margin-top:12px; }
.structured-editor pre { overflow:auto;max-height:240px;font-size:13px; }
.structured-editor .editor-action { min-height:34px;white-space:normal; }
.action-target .node-detail { white-space:normal;overflow-wrap:anywhere;line-height:1.6; }
.action-target.action-warning { border-color:#927147; }
.workspace-context { margin-top:18px; }
.workspace-context>summary { font-weight:600; }
.project-facts li { overflow-wrap:anywhere; }
.extension-recipe { padding:0 28px 24px;min-width:0; }
.extension-recipe .recipe-inputs { margin:0;padding:0; }
.extension-recipe .field>label { display:block;margin-bottom:7px;font-weight:600; }
.extension-input-wide { grid-column:1 / -1;min-width:0; }
.extension-recipe textarea { width:100%;box-sizing:border-box;max-width:100%; }
.extension-recipe-review p,.extension-recipe-review code,.extension-recipe-review a { overflow-wrap:anywhere; }
.extension-recipe-review .code-preview { max-width:100%;overflow:auto; }
.extension-recipe-review .validation-item { width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;text-align:left;gap:6px; }
.extension-recipe-review .review-validation { margin:0 0 20px; }
@media(max-width:600px) { .extension-recipe { padding:0 16px 20px; }.extension-recipe .recipe-inputs { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1100px) { .configuration-layout { grid-template-columns:190px minmax(0,1fr); }.configuration-toolbar { margin-top:10px; } }
@media(max-width:650px) {
  .configuration-layout { display:block; }.configuration-list { border-right:0;border-bottom:1px solid var(--border);max-height:240px;overflow:auto; }.configuration-editor { padding:16px; }
  .coverage-row { grid-template-columns:minmax(0,1fr);gap:8px; }.coverage-head { display:none; }.configuration-actions>.button { flex:1; }.configuration-toolbar>.button { flex:1; }
}
@media(max-width:600px) {
  .workspace-library,.workspace-tools,.workspace-settings,.archived-workspaces,.storage-recovery,.review-body { margin:16px; }
  .workspace-row { flex-wrap:wrap;padding:12px;gap:10px; }
  .workspace-row .workspace-avatar { display:none; }
  .workspace-row-actions { margin-left:auto; }
  .review-summary>div { padding:10px; }
  .review-summary strong { font-size:21px; }
  .review-resource>summary { flex-wrap:wrap;padding:12px;gap:8px; }
  .review-resource>summary>span:last-child { width:100%; }
  .field-diff>div { grid-template-columns:1fr; }
  .review-yaml>summary>span { display:block;margin:4px 0 0; }
}