:root {
  color-scheme: light;
  --canvas: #f8f8f7;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-strong: #fff;
  --ink: #252525;
  --muted: #777775;
  --hairline: #dededb;
  --focus: #087cff;
  --success: #2bbb62;
  --pending: #ff9500;
  --failure: #ff3b30;
  --purple: #af52de;
  --teal: #22a6a1;
  --pink: #ff2d8d;
  --brown: #9a6b42;
  --indigo: #5856d6;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.09);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-sans);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #181819;
  --surface: rgba(31, 31, 33, 0.96);
  --surface-strong: #262628;
  --ink: #f2f2f2;
  --muted: #aaa9ad;
  --hairline: #3a3a3d;
  --shadow: 0 12px 42px rgba(0, 0, 0, 0.42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #181819;
    --surface: rgba(31, 31, 33, 0.96);
    --surface-strong: #262628;
    --ink: #f2f2f2;
    --muted: #aaa9ad;
    --hairline: #3a3a3d;
    --shadow: 0 12px 42px rgba(0, 0, 0, 0.42);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--canvas); color: var(--ink); }
button, input { font: inherit; color: inherit; }
button { appearance: none; cursor: pointer; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted); }
.eyebrow { color: var(--muted); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }

.app-shell { display: grid; grid-template-columns: 248px minmax(420px, 1fr) auto; width: 100%; min-width: 1080px; height: 100%; min-height: 0; overflow: hidden; }
.sidebar { position: relative; z-index: 3; display: flex; min-width: 0; min-height: 0; height: 100%; overflow: hidden; flex-direction: column; border-right: 1px solid var(--hairline); background: var(--surface); }
.project-header { position: relative; padding: 18px; }
.project-header::after, .processes::before, .legend::before { position: absolute; right: 14px; left: 14px; height: 1px; background: var(--hairline); content: ""; }
.project-header::after { bottom: 0; }
.project-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.project-title-row h1 { overflow: hidden; margin: 0; font-family: var(--font-rounded); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.project-progress { margin-top: 7px; }
.project-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-progress-row p { margin: 0; font: 700 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.health-line { color: var(--project-progress-color, var(--success)); }
.progress-track { display: block; width: 100%; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--muted) 14%, transparent); }
.progress-track i { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--project-progress-color, var(--success)); transition: width .2s ease; }
.icon-button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 7px; background: transparent; font-size: 16px; }
.icon-button:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.popover { position: absolute; z-index: 30; min-width: 220px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-strong); box-shadow: var(--shadow); }
.project-menu { top: 48px; right: 12px; }
.menu-label { padding: 8px 11px 5px; color: var(--muted); font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; text-transform: uppercase; }
.menu-item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 11px; border: 0; background: transparent; font-family: var(--font-rounded); font-size: 11px; text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: color-mix(in srgb, var(--focus) 9%, transparent); outline: none; }
.menu-item small { margin-left: auto; color: var(--muted); font-size: 9px; }
.menu-item.danger { color: var(--failure); }
.menu-separator { height: 1px; margin: 4px 0; background: var(--hairline); }
.menu-project-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; }
.menu-project-row .menu-item { min-width: 0; }
.menu-project-row .menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-remove { border: 0; background: transparent; color: var(--muted); }
.menu-remove:hover { color: var(--failure); background: color-mix(in srgb, var(--failure) 8%, transparent); }

.sidebar-scroll { min-height: 0; flex: 1; overflow: auto; padding: 0 0 16px; scrollbar-width: thin; }
.nav-section { margin: 0; }
.nav-heading { display: flex; width: 100%; align-items: center; gap: 7px; padding: 17px 18px 7px; border: 0; background: none; color: var(--muted); font: 700 9px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.35px; text-align: left; text-transform: uppercase; }
.nav-heading::before { content: "⌄"; font-size: 11px; transition: transform .16s ease; }
.nav-section.collapsed .nav-heading::before { transform: rotate(-90deg); }
.nav-section.collapsed .nav-items { display: none; }
.nav-item { --rail: var(--muted); position: relative; display: block; width: calc(100% - 14px); min-height: 44px; margin: 0 7px; padding: 7px 10px 7px 30px; overflow: hidden; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; }
.nav-item::before { position: absolute; top: 7px; left: 10px; width: 4px; height: 30px; border-radius: 2px; background: var(--rail); content: ""; }
.nav-item:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.nav-item.selected { background: color-mix(in srgb, var(--rail) 10%, transparent); }
.nav-item:disabled { cursor: default; opacity: .46; }
.nav-item:disabled:hover { background: transparent; }
.nav-item.missing::before { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.nav-item strong { display: -webkit-box; overflow: hidden; font-family: var(--font-rounded); font-size: 11.5px; font-weight: 500; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nav-item small { display: block; margin-top: 3px; overflow: hidden; color: var(--rail); font: 700 7.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.nav-info { --rail: var(--pending); cursor: default; }
.processes { position: relative; padding: 12px 18px; color: var(--muted); }
.processes::before, .legend::before { top: 0; }
.process-heading { display: flex; align-items: center; justify-content: space-between; }
.processes .eyebrow { font-size: 8.5px; letter-spacing: 1.2px; }
.processes p { margin: 8px 0 0; font-family: var(--font-rounded); font-size: 8.5px; }
.count-badge { min-width: 17px; padding: 1px 5px; border-radius: 99px; background: color-mix(in srgb, var(--focus) 15%, transparent); color: var(--focus); font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.process-row { display: grid; grid-template-columns: 6px minmax(0, 1fr) 22px; align-items: center; gap: 7px; margin-top: 6px; padding: 6px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); }
.process-row .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.process-copy { min-width: 0; }
.process-copy strong, .process-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-copy strong { color: var(--ink); font: 600 9px var(--font-sans); }
.process-copy small { margin-top: 2px; font: 500 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.stop-process { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--failure); }
.stop-process:hover { background: color-mix(in srgb, var(--failure) 10%, transparent); }
.idle-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.legend { position: relative; padding: 14px; color: var(--muted); font-size: 8.5px; line-height: 1.5; }
.legend .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
.legend-group { margin-top: 10px; }
.legend-group > strong { display: block; color: var(--ink); font: 600 9px/1.3 var(--font-rounded); }
.legend-items { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.legend-key { display: inline-flex; min-height: 18px; align-items: center; gap: 5px; color: var(--ink); white-space: nowrap; }
.legend-block-swatch { width: 22px; height: 14px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--legend-color) 55%, var(--hairline)); border-radius: 4px; background: color-mix(in srgb, var(--legend-color) 8%, var(--surface-strong)); box-shadow: inset 5px 0 0 var(--legend-color); }
.legend-link-swatch { position: relative; width: 25px; height: 0; flex: 0 0 auto; border-top: 3px solid var(--legend-color); }
.legend-link-swatch::after { position: absolute; top: -4px; right: -1px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--legend-color); content: ""; }
.legend-link-swatch[data-kind="depends_on"], .legend-link-swatch[data-kind="validates"], .legend-link-swatch[data-kind="constrains"], .legend-link-swatch[data-kind="supersedes"] { border-top-style: dashed; }
.legend-chain-swatch { width: 22px; height: 14px; flex: 0 0 auto; border: 2px solid var(--focus); border-radius: 6px; background: color-mix(in srgb, var(--focus) 7%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus) 18%, transparent); }

.workspace { position: relative; display: grid; min-width: 0; min-height: 0; height: 100%; overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: 50px minmax(0, 1fr); background: var(--canvas); }
.toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.kind-filters { display: flex; min-width: 0; gap: 13px; overflow-x: auto; scrollbar-width: none; }
.filter-button { display: flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; border-radius: 5px; background: transparent; font-family: var(--font-rounded); font-size: 11px; font-weight: 500; white-space: nowrap; }
.filter-button:hover { background: color-mix(in srgb, var(--muted) 9%, transparent); }
.filter-button i { display: grid; width: 14px; height: 14px; place-items: center; border-radius: 4px; background: var(--kind-color, var(--focus)); color: white; font-size: 9px; font-style: normal; }
.filter-button.off { opacity: .38; }
.filter-button.off i { background: var(--muted); }
.toolbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 13px; font-size: 11px; }
.toolbar-button, .fit-button { height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; font-family: var(--font-rounded); font-size: 11px; font-weight: 600; }
.fit-button { width: 24px; height: 24px; padding: 0; font-size: 16px; }
.toolbar-button:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }

.canvas { position: relative; width: 100%; min-width: 0; min-height: 0; overflow: hidden; contain: layout paint; background-color: var(--canvas); background-image: radial-gradient(color-mix(in srgb, var(--hairline) 42%, transparent) .5px, transparent .5px); background-size: 24px 24px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.canvas.dragging { cursor: grabbing; }
.scene { position: absolute; inset: 0; transform-origin: 0 0; }
.canvas.dragging .scene, .canvas.zooming .scene { will-change: transform; }
#graph { display: block; overflow: visible; -webkit-user-select: none; user-select: none; }
#graph text, .block-node .card-copy, .block-node .card-copy * { -webkit-user-select: none; user-select: none; }
.block-hit-layer { position: absolute; top: 0; left: 0; pointer-events: none; }
.block-hit-target { position: absolute; padding: 0; border: 0; border-radius: 14px; appearance: none; background: rgba(255, 255, 255, .001); color: transparent; cursor: pointer; pointer-events: auto; }
.block-hit-target:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.scene-transition-old { opacity: 1; pointer-events: none; transition: opacity .28s cubic-bezier(.25,.1,.25,1); }
.scene-transition-old.leaving { opacity: 0; }
.topology-zone { pointer-events: none; }
.topology-zone rect { fill: color-mix(in srgb, var(--zone-color) 2.5%, transparent); stroke: color-mix(in srgb, var(--zone-color) 22%, var(--hairline)); stroke-dasharray: 4 6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.topology-zone text { fill: var(--zone-color); font: 700 10px/1 var(--font-rounded); letter-spacing: .4px; }
.chain-envelope { cursor: pointer; transition: opacity .15s ease; }
.chain-envelope .chain-fill { fill: color-mix(in srgb, var(--chain-color) 2.5%, transparent); stroke: none; }
.chain-envelope .chain-outer { fill: none; stroke: color-mix(in srgb, var(--chain-color) 18%, transparent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; vector-effect: non-scaling-stroke; }
.chain-envelope .chain-inner { fill: none; stroke: color-mix(in srgb, var(--chain-color) 82%, transparent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chain-label { cursor: pointer; }
.chain-label rect { fill: color-mix(in srgb, var(--surface-strong) 94%, transparent); stroke: var(--chain-color); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chain-label text { fill: var(--chain-color); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3px; }
.chain-label.focused rect, .chain-label:focus-visible rect { fill: color-mix(in srgb, var(--chain-color) 12%, var(--surface-strong)); stroke-width: 3; }
.chain-label.dimmed { opacity: .12; }
.chain-envelope.focused .chain-fill { fill: color-mix(in srgb, var(--chain-color) 8.5%, transparent); }
.chain-envelope.focused .chain-outer { stroke: color-mix(in srgb, var(--chain-color) 18%, transparent); stroke-width: 6; }
.chain-envelope.focused .chain-inner { stroke: color-mix(in srgb, var(--chain-color) 96%, transparent); stroke-width: 2.8; }
.chain-envelope:focus-visible, .chain-label:focus-visible { outline: none; }
.chain-envelope:focus-visible .chain-inner { stroke-width: 3; }
.edge, .edge-arrow { fill: none; stroke: var(--edge-color); stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.5; opacity: .86; pointer-events: none; vector-effect: non-scaling-stroke; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.edge-tag { color: var(--edge-color); pointer-events: none; }
.edge-tag rect { fill: color-mix(in srgb, var(--surface-strong) 92%, var(--edge-color)); stroke: color-mix(in srgb, var(--edge-color) 50%, var(--hairline)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.edge-tag text { fill: var(--edge-color); font: 700 8px/1 var(--font-rounded); letter-spacing: .3px; }
.edge-group.selected .edge, .edge-group.selected .edge-arrow { stroke-width: 3; opacity: 1; }
.edge-group.selected .edge-tag rect { stroke-width: 2; }
.edge.depends_on, .edge.validates, .edge.constrains, .edge.supersedes { stroke-dasharray: 6 4; }
.edge-group.dimmed { opacity: .1; }
.chain-motion { color: var(--chain-color); pointer-events: none; }
.chain-motion-dash { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; opacity: .34; vector-effect: non-scaling-stroke; }
.chain-motion.selected .chain-motion-dash { stroke-width: 2; opacity: .72; }
.chain-motion-marker { color: var(--chain-color); }
.chain-motion-marker .marker-halo { fill: currentColor; opacity: .16; }
.chain-motion-marker .marker-solid { fill: currentColor; }
.chain-motion-marker .marker-ring { fill: var(--surface-strong); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.block-node.dimmed { opacity: .13; }
.chain-envelope.dimmed { opacity: .12; }
.block-node { pointer-events: none; transform-box: view-box; transform-origin: 0 0; transition: opacity .15s ease; }
.block-node > * { pointer-events: none; }
.block-card { fill: var(--surface-strong); stroke: color-mix(in srgb, var(--node-color) 28%, transparent); stroke-width: 1.1; }
.block-node.hovered .block-card, .block-node.selected .block-card { stroke: var(--node-color); stroke-width: 2; }
.block-node.ghost .block-card { stroke-dasharray: 6 4; fill: color-mix(in srgb, var(--indigo) 4%, var(--surface-strong)); }
.block-node.unhealthy .block-card { stroke: var(--failure); }
.block-node.recently-changed .delivery-badge { filter: drop-shadow(0 0 3px var(--state-color)); }
.block-node .rail { fill: var(--node-color); }
.block-node .kind-pill { fill: color-mix(in srgb, var(--node-color) 10%, var(--surface-strong)); stroke: color-mix(in srgb, var(--node-color) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.block-node .kind-symbol { fill: var(--node-color); font-family: var(--font-sans); font-size: 9px; font-weight: 600; }
.block-node .kind { fill: var(--node-color); font: 700 8.5px var(--font-rounded); letter-spacing: .2px; }
.block-node .card-copy-object { overflow: visible; pointer-events: none; }
.block-node .card-copy { display: flex; height: 70px; flex-direction: column; gap: 7px; }
.block-node .card-copy .title, .block-node .card-copy .summary { display: -webkit-box; overflow: hidden; margin: 0; font-family: var(--font-rounded); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.block-node .card-copy .title { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.18; }
.block-node .card-copy .summary { color: var(--muted); font-size: 9.5px; line-height: 1.25; }
.block-node .status { fill: var(--state-color); font: 700 7.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .6px; }
.block-node .ast-pill { fill: color-mix(in srgb, var(--focus) 12%, transparent); }
.block-node .ast { fill: var(--focus); font: 800 6.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.block-node .delivery-badge { fill: var(--state-color); }
.block-node .delivery-mark { fill: white; font-family: var(--font-sans); font-size: 6.5px; font-weight: 800; }
.block-node .source-symbol { fill: var(--muted); font: 500 7.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
#graph.large-graph .block-node, #graph.large-graph .chain-envelope { transition: none; }
#graph.large-graph.overview-mode .edge-hit, #graph.large-graph.overview-mode .edge-arrow,
#graph.large-graph.overview-mode .card-copy .summary, #graph.large-graph.overview-mode .status,
#graph.large-graph.overview-mode .source-symbol, #graph.large-graph.overview-mode .ast-pill,
#graph.large-graph.overview-mode .ast, #graph.large-graph.overview-mode .edge-tag,
#graph.large-graph.overview-mode .chain-envelope:not(.focused) .chain-fill,
#graph.large-graph.overview-mode .chain-envelope:not(.focused) .chain-outer { display: none; }
#graph.large-graph.overview-mode .edge { stroke-width: 1; opacity: .42; }
#graph.large-graph.overview-mode .chain-envelope:not(.focused) .chain-inner { stroke-width: 1; opacity: .42; }
#graph.large-graph.overview-mode .card-copy { gap: 0; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; gap: 7px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); }

.inspector { position: relative; z-index: 4; display: flex; width: clamp(320px, 25vw, 380px); height: 100vh; flex-direction: column; border-left: 1px solid var(--hairline); background: var(--surface); box-shadow: -4px 0 12px rgba(0, 0, 0, .075); }
.inspector.plan-inspector { width: clamp(410px, 33vw, 500px); }
.inspector.document-inspector { width: clamp(440px, 38vw, 640px); box-shadow: none; }
.inspector-header { display: flex; min-height: 0; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px 0; }
.inspector-heading { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.inspector-header h2 { order: 0; margin: 0; font-family: var(--font-rounded); font-size: 17px; line-height: 1.25; }
.inspector-header .eyebrow { order: 1; margin-top: 16px; font-size: 8px; letter-spacing: .7px; }
.inspector-body { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 16px; overflow: auto; padding: 16px 18px; }
.inspector-header-actions { order: 2; display: flex; gap: 8px; margin-top: 12px; }
.inspector-header-actions button { padding: 6px 12px; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--muted) 12%, transparent); font-family: var(--font-rounded); font-size: 11px; font-weight: 600; }
.document-inspector .inspector-header { min-height: 0; padding: 18px; border-bottom: 1px solid var(--hairline); }
.document-inspector .inspector-header h2 { order: 0; margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: 0; }
.document-inspector .inspector-header .eyebrow { order: 1; margin-top: 12px; font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.document-inspector .inspector-body { display: block; padding: 22px 22px 70px; }
.inspector:not(.document-inspector) .summary { margin: 0; font-family: var(--font-rounded); font-size: 12px; line-height: 1.5; }
.summary { margin: 0 0 22px; font-size: 14px; line-height: 1.65; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: 10px; background: var(--hairline); }
.meta-cell { min-width: 0; padding: 10px; background: var(--surface-strong); }
.meta-cell span { display: block; overflow: hidden; margin-top: 4px; font: 600 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.detail-section { margin: 0; }
.detail-section h3 { margin: 0 0 6px; color: var(--muted); font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.status-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.status-strip .status-pill { margin: 0; padding: 4px 7px; }
.status-pill.ghost { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); }
.status-pill.solid, .status-pill.healthy { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.status-pill.warning { background: color-mix(in srgb, var(--failure) 12%, transparent); color: var(--failure); }
.status-reason, .error-text { margin: 0; color: var(--failure); font: 500 10.5px/1.45 var(--font-rounded); }
.artifact { padding: 10px 0; border-top: 1px solid var(--hairline); }
.artifact:first-of-type { border-top: 0; }
.artifact code { display: block; overflow-wrap: anywhere; color: var(--focus); font-size: 11px; }
.artifact small { color: var(--muted); font-size: 10px; }
.source-card { position: relative; }
.source-card > button:first-child { display: block; width: calc(100% - 28px); padding: 0; border: 0; background: transparent; text-align: left; }
.source-open { position: absolute; top: 10px; right: 0; width: 24px; height: 24px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--focus) 9%, transparent); color: var(--focus); }
.source-preview, .code-stream { max-height: 260px; overflow: auto; margin: 9px 0 0; padding: 10px; border: 1px solid var(--hairline); border-radius: 7px; background: color-mix(in srgb, var(--muted) 7%, transparent); white-space: pre-wrap; font: 9.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.entity-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; }
.entity-row > span { min-width: 0; }
.entity-row strong, .entity-row small { display: block; }
.entity-row strong { font: 600 11.5px var(--font-rounded); }
.entity-row small { margin-top: 2px; color: var(--muted); font: 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.entity-row > b { color: var(--muted); font-weight: 500; }
.entity-row:hover strong { color: var(--focus); }
.link-endpoints { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.link-endpoints .entity-row { height: 100%; padding: 8px; border: 1px solid var(--hairline); border-radius: 8px; }
.disclosure { border-bottom: 1px solid var(--hairline); }
.disclosure-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border: 0; background: transparent; font: 600 11px var(--font-rounded); text-align: left; }
.disclosure-toggle::before { content: '›'; color: var(--muted); transition: transform .15s ease; }
.disclosure.open .disclosure-toggle::before { transform: rotate(90deg); }
.disclosure-toggle span { flex: 1; }
.disclosure-toggle small { color: var(--muted); font: 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.disclosure-body { padding: 0 0 10px 15px; font-size: 11px; }
.disclosure-body p { margin: 0 0 6px; }
.disclosure-body code { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--focus); font-size: 9px; }
.history-diff { display: grid; gap: 4px; margin-top: 6px; }
.history-diff del, .history-diff ins { padding: 4px 6px; border-radius: 4px; text-decoration: none; }
.history-diff del { background: color-mix(in srgb, var(--failure) 9%, transparent); }
.history-diff ins { background: color-mix(in srgb, var(--success) 9%, transparent); }
.list-card { display: grid; gap: 3px; padding: 7px 0; border-bottom: 1px solid var(--hairline); font: 11px/1.45 var(--font-rounded); }
.list-card small { color: var(--muted); }
.relation-invalid { color: var(--failure); }
.plan-progress { position: relative; height: 22px; overflow: hidden; border-radius: 7px; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.plan-progress span { display: block; width: var(--progress); height: 100%; background: color-mix(in srgb, var(--focus) 14%, transparent); }
.plan-progress small { position: absolute; inset: 0; display: grid; place-items: center; color: var(--focus); font: 700 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.step-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.step-list li { position: relative; padding: 2px 0 10px 31px; border-bottom: 1px solid var(--hairline); font-size: 12px; line-height: 1.5; }
.step-list b { position: absolute; top: 0; left: 0; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--focus) 12%, transparent); color: var(--focus); font-size: 10px; }
.document { max-width: 840px; margin: auto; font-size: 15px; line-height: 1.8; }
.document h1, .document h2, .document h3 { margin: 1.35em 0 .55em; line-height: 1.25; }
.document h1:first-child { margin-top: 0; }
.document h1 { font-size: 24px; }
.document h2 { margin-top: 38px; font-size: 20px; }
.document h3 { margin-top: 28px; font-size: 18px; }
.document p { margin: 0 0 1em; }
.document ul, .document ol { padding-left: 20px; }
.document pre { overflow: auto; padding: 20px; border: 1px solid color-mix(in srgb, var(--muted) 12%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--muted) 7%, transparent); font-size: 12px; line-height: 1.5; }
.document code { padding: 2px 4px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 7%, transparent); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.document pre code { padding: 0; background: none; }
.document a { color: var(--focus); text-decoration: none; }
.document a:hover { text-decoration: underline; }
.document img { display: block; max-width: 100%; height: auto; margin: 18px auto; border-radius: 8px; }
.document figure { margin: 20px 0; }
.document figcaption { color: var(--muted); font-size: 11px; text-align: center; }
.document hr { border: 0; border-top: 1px solid var(--hairline); }
.document blockquote { margin: 16px 0; padding-left: 14px; border-left: 3px solid var(--hairline); color: var(--muted); }

.modal-layer { position: fixed; z-index: 40; inset: 0; display: grid; padding: 18px; place-items: center; background: rgba(0, 0, 0, .24); backdrop-filter: blur(3px); }
.settings-dialog { width: min(716px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-strong); color: var(--ink); box-shadow: 0 25px 100px rgba(0, 0, 0, .28); }
.settings-card { padding: 0; }
.settings-card header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 12px; border-bottom: 1px solid var(--hairline); }
.settings-card h2 { margin: 0; font-family: var(--font-rounded); font-size: 15px; font-weight: 600; }
.settings-body { display: grid; max-height: calc(100vh - 100px); grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; overflow-x: hidden; overflow-y: auto; padding: 14px 20px 18px; }
.settings-column { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.settings-section { min-width: 0; }
.settings-section > .eyebrow { margin: 0 0 5px 6px; font-size: 9.5px; letter-spacing: 1.1px; }
.primary-button { padding: 4px 10px; border: 0; border-radius: 6px; background: var(--focus); color: white; font-family: var(--font-rounded); font-size: 11px; font-weight: 600; }
.primary-button:disabled { cursor: default; opacity: .38; }
.subtle-button { padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; font-family: var(--font-rounded); font-size: 10px; font-weight: 600; }
.settings-group { border: 1px solid var(--hairline); border-radius: 10px; background: color-mix(in srgb, var(--muted) 4%, var(--surface-strong)); }
.setting-row { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 7px 12px; font-family: var(--font-rounded); font-size: 12px; font-weight: 500; }
.setting-row + .setting-row { border-top: 1px solid var(--hairline); }
.setting-row span { display: flex; align-items: center; gap: 8px; }
.setting-row i { display: inline-grid; width: 18px; place-items: center; color: var(--muted); font-family: var(--font-sans); font-size: 12px; font-style: normal; }
input { appearance: none; border: 1px solid var(--hairline); border-radius: 7px; outline: none; background: color-mix(in srgb, var(--muted) 7%, var(--surface-strong)); }
input:focus { border-color: color-mix(in srgb, var(--focus) 65%, var(--hairline)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 12%, transparent); }
.custom-select { position: relative; width: 112px; }
.select-trigger { display: flex; width: 100%; height: 27px; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; border: 1px solid var(--hairline); border-radius: 7px; background: color-mix(in srgb, var(--muted) 7%, var(--surface-strong)); font-family: var(--font-rounded); font-size: 11px; }
.select-trigger[aria-expanded="true"] { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 12%, transparent); }
.select-menu { position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; width: max-content; min-width: 100%; overflow: hidden; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-strong); box-shadow: var(--shadow); }
.select-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 7px 9px; border: 0; background: transparent; font-family: var(--font-rounded); font-size: 11px; text-align: left; white-space: nowrap; }
.select-option:hover, .select-option:focus-visible, .select-option.selected { background: color-mix(in srgb, var(--focus) 10%, transparent); outline: none; }
.select-option b { color: var(--focus); }
.project-settings { padding-top: 7px; }
.project-path-label { display: block; margin: 0 12px 5px; color: var(--muted); font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; text-transform: uppercase; }
.project-path-row { display: flex; gap: 8px; padding: 0 12px 7px; }
.project-path-row input { min-width: 0; flex: 1; padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.project-path-row button { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; font-family: var(--font-rounded); font-size: 10px; font-weight: 600; }
.settings-card p { margin: 0; padding: 6px 12px; border-top: 1px solid var(--hairline); font-family: var(--font-rounded); font-size: 10px; line-height: 1.35; }
.settings-help { border: 0 !important; padding: 5px 6px 0 !important; overflow-wrap: anywhere; }
.loading-row { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-family: var(--font-rounded); font-size: 10px; }
.spinner { width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--muted) 25%, transparent); border-top-color: var(--focus); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.editor-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; }
.editor-row + .editor-row { border-top: 1px solid var(--hairline); }
.editor-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid color-mix(in srgb, var(--hairline) 75%, transparent); border-radius: 7px; background: var(--surface-strong); font-size: 12px; }
.editor-copy { min-width: 0; }
.editor-copy strong, .editor-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-copy strong { font: 500 12px var(--font-rounded); }
.editor-copy small { margin-top: 3px; color: var(--muted); font: 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.status-pill { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 1px 5px; border-radius: 99px; background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); font: 700 7.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.status-pill.muted { background: color-mix(in srgb, var(--muted) 8%, transparent); color: var(--muted); }
.editor-action { padding: 4px 7px; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; font: 600 9.5px var(--font-rounded); }
.editor-action.primary { border-color: transparent; background: var(--focus); color: white; }
.editor-row.unavailable { opacity: .48; }
.sync-all { width: 100%; padding: 7px; border: 0; border-top: 1px solid var(--hairline); background: transparent; color: var(--focus); font: 600 10px var(--font-rounded); }
.settings-error { border: 0 !important; color: var(--failure); }
.update-panel { overflow: hidden; }
.update-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.update-row + .update-row, .update-details { border-top: 1px solid var(--hairline); }
.update-copy { min-width: 0; flex: 1; }
.update-copy strong, .update-copy small { display: block; }
.update-copy strong { font: 600 12px var(--font-rounded); }
.update-copy small { margin-top: 2px; color: var(--muted); font: 10px var(--font-rounded); }
.update-action { padding: 4px 8px; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; font: 600 10px var(--font-rounded); }
.update-action.primary { border-color: transparent; background: var(--focus); color: white; }
.update-details { padding: 8px 12px; }
.update-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--focus) 10%, transparent); color: var(--focus); }
.repo-row, .update-control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; font: 10.5px var(--font-rounded); }
.repo-row input { min-width: 0; flex: 1; padding: 4px 6px; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.repo-row button, .release-actions button, .notes-toggle { padding: 4px 7px; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; font: 600 9.5px var(--font-rounded); }
.release-select { width: 155px; }
.node-status { padding: 5px 0 !important; border: 0 !important; font-size: 8.5px !important; }
.node-status.qualified { color: var(--success); }
.node-status.warning { color: var(--failure); }
.notes-toggle { width: 100%; border: 0; color: var(--focus); text-align: left; }
.release-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; }
.release-actions .primary { border-color: transparent; background: var(--focus); color: white; }
.release-notes { max-height: 120px; overflow: auto; margin-top: 7px; padding: 8px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-strong); white-space: pre-wrap; font: 9.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.segmented { display: inline-flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.segmented button { padding: 3px 7px; border: 0; border-radius: 5px; background: transparent; font: 600 9.5px var(--font-rounded); }
.segmented button.selected { background: var(--surface-strong); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.project-dialog { width: min(620px, calc(100vw - 36px)); max-height: min(680px, calc(100vh - 36px)); overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-strong); box-shadow: 0 25px 100px rgba(0,0,0,.28); }
.project-dialog header, .project-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.project-dialog header { border-bottom: 1px solid var(--hairline); }
.project-dialog footer { border-top: 1px solid var(--hairline); }
.project-dialog h2 { margin: 2px 0 0; font: 600 15px var(--font-rounded); }
.directory-toolbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hairline); }
.directory-toolbar code { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.directory-list { max-height: 440px; overflow: auto; padding: 6px; }
.directory-row { display: grid; width: 100%; grid-template-columns: 22px minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; text-align: left; }
.directory-row:hover, .directory-row:focus-visible { background: color-mix(in srgb, var(--focus) 9%, transparent); outline: none; }
.directory-row strong { overflow: hidden; font: 500 11.5px var(--font-rounded); text-overflow: ellipsis; white-space: nowrap; }
.directory-row small, .directory-row.project > span { color: var(--success); font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.directory-row > b { color: var(--muted); }
.directory-empty { padding: 30px; color: var(--muted); font: 11px var(--font-rounded); text-align: center; }
.toast { position: fixed; z-index: 80; right: 18px; bottom: 18px; max-width: 420px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-strong); box-shadow: var(--shadow); font-size: 12px; }

@media (max-width: 950px) {
  .app-shell { grid-template-columns: 248px minmax(380px, 1fr) auto; }
  .inspector { position: fixed; top: 0; right: 0; bottom: 0; width: min(390px, 88vw); }
  .filter-button span { display: none; }
}

@media (max-width: 680px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .workspace { grid-column: 1; }
  .toolbar { padding: 0 9px; }
  .settings-body { grid-template-columns: 1fr; }
}