/* Pathology Studio — Graph Studio–style chrome, scoped under the app root. */
.pathology-studio-root,
.pathology-studio-app {
  --pr-blue: #2f6bd4;
  --pr-blue-dk: #21508f;
  --pr-teal: #16a0a0;
  --pr-bg: #f4f6fa;
  --pr-surface: #ffffff;
  --pr-nav-bg: #eef1f6;
  --pr-line: #d7dce6;
  --pr-ink: #1f2733;
  --pr-ink-soft: #6c7686;
  --pr-hover: #e4ebf7;
  --pr-active: #d6e4fb;
  --pr-shadow: 0 1px 3px rgba(20, 40, 80, 0.12);
  --path-ink: var(--pr-ink);
  --path-muted: var(--pr-ink-soft);
  --path-line: var(--pr-line);
  --path-soft: var(--pr-bg);
  --path-purple: var(--pr-blue);
  --path-teal: var(--pr-teal);
  --path-blue: var(--pr-blue);
  --path-orange: #d97706;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--pr-ink);
  background: var(--pr-bg);
  font-size: 13px;
  overflow: hidden;
}
.dark .pathology-studio-root,
.dark .pathology-studio-app {
  --pr-bg: #1a1d24;
  --pr-surface: #20242d;
  --pr-nav-bg: #181b21;
  --pr-line: #333a47;
  --pr-ink: #e8ecf3;
  --pr-ink-soft: #9aa5b5;
  --pr-hover: #2a3140;
  --pr-active: #2f3e58;
  --pr-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pathology-studio-root .studio { --st-accent: var(--pr-blue); height: 100%; }
.pathology-studio-root .st-workspace { background: var(--pr-bg); }
.pathology-studio-root .st-card {
  border: 1px solid var(--pr-line);
  border-radius: 10px;
  background: var(--pr-surface);
  box-shadow: none;
}
.pathology-studio-root button { font: inherit; }

.path-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.path-body { flex: 1; display: flex; min-height: 0; }
.path-lock-banner {
  flex: 0 0 auto;
  padding: 7px 12px;
  background: #fff4e5;
  color: #9a4b00;
  font-size: 12px;
  border-bottom: 1px solid #f2cea2;
}
.path-slot-toolbar { flex: 0 0 auto; z-index: 6; }
.path-slot-nav {
  width: var(--path-nav-w, 244px);
  flex: 0 0 var(--path-nav-w, 244px);
  background: var(--pr-nav-bg);
  border-right: 1px solid var(--pr-line);
  overflow-y: auto;
}
.path-nav-resizer { flex: 0 0 6px; cursor: col-resize; background: transparent; z-index: 2; }
.path-nav-resizer:hover, .path-nav-resizer.is-dragging {
  background: color-mix(in srgb, var(--pr-blue) 35%, transparent);
}
.path-slot-content { flex: 1; min-width: 0; overflow: auto; background: var(--pr-surface); padding: 14px 16px 28px; }
.path-slot-content.is-canvas { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.path-slot-content.is-canvas > * { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.path-slot-tabs {
  display: flex; align-items: stretch; gap: 4px; flex: 0 0 auto;
  background: var(--pr-nav-bg); border-top: 1px solid var(--pr-line);
  padding: 4px 8px 0; min-height: 30px;
}
.path-tabs, .path-tabs-scroll {
  display: flex; flex: 1; min-width: 0; align-items: flex-end; gap: 2px;
}
.path-tabs-scroll { overflow-x: auto; overflow-y: hidden; }
.path-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  border: 1px solid var(--pr-line); border-bottom: none;
  background: var(--pr-bg); color: var(--pr-ink-soft);
  padding: 5px 12px; border-radius: 6px 6px 0 0;
  font-size: 12px; cursor: pointer; white-space: nowrap;
  border-top: 3px solid transparent;
}
.path-tab:hover { background: var(--pr-hover); }
.path-tab.active { background: var(--pr-surface); color: var(--pr-ink); font-weight: 600; }
.path-tab.kind-data { border-top-color: color-mix(in srgb, var(--pr-blue) 45%, transparent); }
.path-tab.kind-result { border-top-color: color-mix(in srgb, var(--pr-teal) 45%, transparent); }
.path-tab.kind-graph { border-top-color: color-mix(in srgb, #f0a500 45%, transparent); }
.path-tab.kind-info { border-top-color: color-mix(in srgb, #8b5cf6 45%, transparent); }
.path-tab.kind-layout { border-top-color: color-mix(in srgb, #d6336c 45%, transparent); }
.path-tab.kind-data.active { border-top-color: var(--pr-blue); }
.path-tab.kind-result.active { border-top-color: var(--pr-teal); }
.path-tab.kind-graph.active { border-top-color: #f0a500; }
.path-tab.kind-info.active { border-top-color: #8b5cf6; }
.path-tab.kind-layout.active { border-top-color: #d6336c; }
.path-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto; padding: 3px 14px; min-height: 20px;
  background: var(--pr-blue-dk); color: rgba(255,255,255,.9); font-size: 11px;
}
.path-status-right { color: rgba(255,255,255,.7); }
.path-render-error {
  margin: 10px; padding: 8px 12px; border: 1px solid #e6b3b3;
  background: #fdeeee; color: #8a2b2b; border-radius: 6px; font-size: 12px;
}

.path-menubar {
  display: flex; align-items: stretch; background: var(--pr-surface);
  border-bottom: 1px solid var(--pr-line); padding: 0 3px; position: relative; z-index: 20; min-height: 22px;
}
.path-menu { position: relative; }
.path-menu-title {
  border: none; background: transparent; color: var(--pr-ink);
  padding: 2px 9px; font-size: 12px; cursor: pointer; height: 100%;
}
.path-menu-title:hover, .path-menu-title.open { background: var(--pr-hover); }
.path-menu-title.open { background: var(--pr-active); color: var(--pr-blue-dk); }
.path-menu-drop {
  position: absolute; top: 100%; left: 0; min-width: 210px;
  background: var(--pr-surface); border: 1px solid var(--pr-line);
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(20,40,80,.22);
  padding: 5px; z-index: 30;
}
.path-menu-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: var(--pr-ink); padding: 6px 12px; font-size: 12.5px; border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.path-menu-item:hover { background: var(--pr-blue); color: #fff; }
.path-menu-sep { height: 1px; background: var(--pr-line); margin: 5px 6px; }

.path-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--pr-line);
  background: var(--pr-surface); flex-wrap: wrap; flex: 0 0 auto;
}
.path-sheet-title { display: grid; gap: 1px; min-width: 160px; }
.path-sheet-title strong { font-size: 14px; }
.path-sheet-title span { color: var(--pr-ink-soft); font-size: 11px; }
.path-welcome-open {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 0 0 18px; padding: 14px 16px;
  background: var(--pr-active); border: 1.5px dashed var(--pr-blue); border-radius: 10px;
}
.path-welcome-openbtn {
  font-size: 14px; font-weight: 700; color: #fff; background: var(--pr-blue);
  border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer;
}
.path-welcome-openbtn:hover { filter: brightness(1.06); }
.path-welcome-openhint { color: var(--pr-ink-soft); font-size: 12.5px; line-height: 1.4; max-width: 420px; }
.path-overview-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin: 0 0 14px;
}
.path-overview-gallery .path-preview { width: 100%; height: 88px; }

.path-viewer-workspace, .path-schematic-workspace {
  display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--pr-surface);
}
.path-viewer-body {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0;
}
.path-viewer-workspace .path-stage { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.path-viewer-inspector {
  overflow: auto; border-left: 1px solid var(--pr-line); background: var(--pr-nav-bg);
  padding: 10px; display: grid; align-content: start; gap: 10px;
}
.path-viewer-inspector .st-card { margin: 0; }
.path-filmstrip { flex: 0 0 auto; }
.path-schematic-workspace .path-schematic-shell { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.path-schematic-workspace .path-schematic-viewport { height: 100%; }
.path-schematic-workspace .path-schematic-lower {
  flex: 0 0 auto; max-height: 230px; overflow: auto; margin: 0; padding: 10px 14px;
  border-top: 1px solid var(--pr-line); background: var(--pr-nav-bg);
}

.path-ribbon { background: var(--pr-surface); border-bottom: 1px solid var(--pr-line); box-shadow: var(--pr-shadow); }
.path-ribbon-strip {
  display: flex; align-items: stretch; gap: 10px;
  background: linear-gradient(180deg, var(--pr-blue), var(--pr-blue-dk));
  color: #fff; padding: 0 10px; height: 30px;
}
.path-ribbon-brand { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; padding-right: 6px; }
.path-ribbon-mark { color: #bfe0ff; }
.path-ribbon-tabs { display: flex; align-items: stretch; gap: 2px; flex: 1; }
.path-ribbon-tab {
  border: none; background: transparent; color: rgba(255,255,255,.78);
  padding: 0 13px; font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 6px 6px 0 0; line-height: 30px;
}
.path-ribbon-tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.path-ribbon-tab.active { color: var(--pr-blue-dk); background: var(--pr-surface); }
.path-ribbon-strip-right { display: flex; align-items: center; gap: 6px; }
.path-ribbon-simpletoggle,
.path-ribbon-aitoggle {
  border: 1px solid rgba(255,255,255,.3); border-radius: 5px;
  padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; height: 21px;
}
.path-ribbon-simpletoggle { background: rgba(255,255,255,.12); color: #fff; }
.path-ribbon-aitoggle { background: var(--pr-teal); color: #fff; }
.path-ribbon-body {
  display: flex; align-items: stretch; gap: 6px;
  padding: 5px 7px; overflow-x: auto; min-height: 0;
}
.path-ribbon-group {
  display: flex; flex-direction: column; gap: 3px; padding: 3px 9px;
  border-radius: 8px; background: color-mix(in srgb, var(--pr-ink) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--pr-ink) 6%, transparent);
  flex: 0 0 auto; width: max-content;
}
.path-ribbon-group.is-quick { flex: 0 1 auto; max-width: min(560px, 100%); }
.path-ribbon-items { display: flex; align-items: stretch; gap: 2px; flex: 1; }
.path-ribbon-items.quick {
  display: grid; grid-template-columns: repeat(auto-fill, 52px); grid-auto-rows: 44px; gap: 2px;
}
.path-ribbon-smallcol { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 2px; }
.path-ribbon-smallcol + .path-ribbon-smallcol { border-left: 1px solid var(--pr-line); padding-left: 7px; }
.path-ribbon-grouplabel {
  font-size: 9.5px; font-weight: 700; color: var(--pr-ink-soft);
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.path-rib-big {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; width: 56px; min-height: 46px; padding: 4px 2px;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--pr-ink); cursor: pointer; font-size: 10.5px; text-align: center;
}
.path-rib-big:hover { background: var(--pr-hover); border-color: var(--pr-line); }
.path-rib-big .path-rib-icon { color: var(--pr-blue); display: inline-flex; }
.path-rib-big .path-rib-icon svg { width: 19px; height: 19px; }
.path-rib-big.primary { background: var(--pr-blue); border-color: var(--pr-blue); color: #fff; font-weight: 700; }
.path-rib-big.primary .path-rib-icon { color: #fff; }
.path-rib-big.primary:hover { background: var(--pr-blue-dk); }
.path-rib-big.accent { background: color-mix(in srgb, var(--pr-teal) 10%, transparent); border-color: color-mix(in srgb, var(--pr-teal) 25%, transparent); font-weight: 600; }
.path-rib-big.accent .path-rib-icon { color: var(--pr-teal); }
.path-rib-big.disabled, .path-rib-small.disabled, .path-rib-quick.disabled { opacity: .4; cursor: default; }
.path-rib-label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.path-rib-small {
  display: flex; align-items: center; gap: 5px; padding: 2px 7px 2px 4px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--pr-ink); cursor: pointer; font-size: 11px; max-width: 128px;
  white-space: nowrap; min-height: 19px;
}
.path-rib-small:hover { background: var(--pr-hover); border-color: var(--pr-line); }
.path-rib-icon-sm { color: var(--pr-blue); display: inline-flex; }
.path-rib-icon-sm svg { width: 13px; height: 13px; display: block; }
.path-rib-quick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 52px; height: 44px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--pr-ink); cursor: pointer; font-size: 9.5px;
}
.path-rib-quick:hover { background: var(--pr-hover); border-color: var(--pr-line); }
.path-rib-quick-icon { color: var(--pr-blue); display: inline-flex; }
.path-rib-quick-icon svg { width: 16px; height: 16px; }
.path-rib-quick-label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.path-nav { display: flex; flex-direction: column; }
.path-nav-search { padding: 6px 8px; position: sticky; top: 0; background: var(--pr-nav-bg); z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.path-search { width: 100%; padding: 5px 9px; border: 1px solid var(--pr-line); border-radius: 6px; background: var(--pr-surface); color: var(--pr-ink); font-size: 12px; }
.path-search:focus { outline: none; border-color: var(--pr-blue); }
.path-nav-modes { display: flex; gap: 4px; }
.path-nav-mode { flex: 1; border: 1px solid var(--pr-line); background: var(--pr-surface); color: var(--pr-ink-soft); border-radius: 5px; padding: 2px 0; font-size: 10.5px; cursor: pointer; font-weight: 600; }
.path-nav-mode.active { background: var(--pr-active); color: var(--pr-blue-dk); border-color: var(--pr-blue); }
.path-nav-section { display: flex; align-items: center; gap: 6px; padding: 7px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--pr-ink-soft); }
.path-nav-seclabel { flex: 1; }
.path-nav-count { background: var(--pr-line); color: var(--pr-ink-soft); border-radius: 8px; font-size: 10px; padding: 0 6px; font-weight: 700; }
.path-nav-item { display: flex; align-items: center; gap: 5px; padding: 4px 6px 4px 12px; cursor: pointer; border-left: 3px solid transparent; }
.path-nav-item.depth-1 { padding-left: 22px; }
.path-nav-item.depth-2 { padding-left: 30px; }
.path-nav-item:hover { background: var(--pr-hover); }
.path-nav-item.active { background: var(--pr-active); border-left-color: var(--pr-blue); }
.path-nav-item.in-family { background: color-mix(in srgb, var(--pr-blue) 8%, transparent); }
.path-nav-glyph { width: 16px; text-align: center; color: var(--pr-blue); font-size: 12px; flex: 0 0 auto; }
.path-nav-item.kind-result .path-nav-glyph { color: var(--pr-teal); }
.path-nav-item.kind-graph .path-nav-glyph { color: #d97706; }
.path-nav-item.kind-info .path-nav-glyph { color: #8b5cf6; }
.path-nav-item.kind-layout .path-nav-glyph { color: #d6336c; }
.path-nav-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.path-nav-twist { background: transparent; border: none; color: var(--pr-blue); cursor: pointer; width: 16px; height: 16px; font-size: 9px; padding: 0; transform: rotate(0); transition: transform .12s; }
.path-nav-twist.open { transform: rotate(90deg); }

.path-welcome { padding: 28px 32px 20px; }
.path-welcome-head h1, .path-welcome-head h2 { margin: 0 0 4px; font-size: 22px; }
.path-welcome-head p { margin: 0 0 14px; color: var(--pr-ink-soft); }
.path-welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.path-format-gallery, .path-welcome-demos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.path-format-card, .path-welcome-demo {
  display: flex; flex-direction: column; gap: 6px; padding: 0; overflow: hidden;
  background: var(--pr-surface); border: 1.5px solid var(--pr-line); border-radius: 10px;
  cursor: pointer; text-align: left; color: inherit;
}
.path-format-card:hover, .path-welcome-demo:hover { border-color: var(--pr-blue); }
.path-format-card { padding: 12px; }
.path-format-glyph { color: var(--pr-blue); font-size: 22px; }
.path-format-label { font-weight: 700; font-size: 13px; }
.path-format-blurb { color: var(--pr-ink-soft); font-size: 11.5px; line-height: 1.35; }
.path-welcome-thumb { height: 92px; display: block; width: 100%; object-fit: cover; background: #eadde6; }
.path-welcome-demo-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.path-welcome-demo-body strong { font-size: 12.5px; }
.path-welcome-demo-body span { color: var(--pr-ink-soft); font-size: 11px; }

.path-incidence { width: 100%; border-collapse: collapse; font-size: 12px; }
.path-incidence th, .path-incidence td { border: 1px solid var(--pr-line); padding: 6px 8px; text-align: center; }
.path-incidence th { background: var(--pr-nav-bg); font-size: 11px; }
.path-incidence td.heat-0 { background: #f4f6fa; }
.path-incidence td.heat-1 { background: #d6e4fb; }
.path-incidence td.heat-2 { background: #9ec0f0; }
.path-incidence td.heat-3 { background: #2f6bd4; color: #fff; }
.path-incidence td.heat-4 { background: #21508f; color: #fff; }

.path-wsi-canvas { width: 100%; height: 100%; display: block; }
.path-stage-inner { transform-origin: center center; }
.path-schematic-world { transform-origin: 0 0; min-width: 100%; min-height: 100%; }
.path-layer-chip {
  position: absolute; left: 18px; top: 12px; z-index: 4;
  padding: 4px 8px; border-radius: 999px; border: 1px solid;
  background: rgba(255,255,255,.92); color: #1f2733; font-size: 10px; font-weight: 700;
}

.pathology-studio-root .studio { --st-accent: var(--pr-blue); height: 100%; }


.path-v1-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--path-purple) 28%, var(--path-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--path-purple) 8%, white);
  font-size: 12px;
}

.path-v1-readonly :is(.st-workspace, .st-inspector) :is(button, input, select, textarea) {
  pointer-events: none;
  opacity: .66;
}

.path-guided-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.path-command-bar { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 8px; border: 1px solid var(--pr-line); border-radius: 10px; background: var(--pr-surface); }
.path-command-bar > input { flex: 1; min-width: 180px; }
.path-command-results { display: flex; gap: 5px; flex-wrap: wrap; }
.path-resume-list, .path-recent-list { display: grid; gap: 6px; }
.path-resume-list button, .path-recent-list button { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 8px; border: 1px solid var(--pr-line); border-radius: 8px; background: var(--pr-surface); color: var(--pr-ink); text-align: left; cursor: pointer; }
.path-resume-list button span { grid-row: 1 / 3; padding: 4px 6px; border-radius: 5px; background: var(--pr-active); color: var(--pr-blue-dk); font-size: 8px; font-weight: 800; }
.path-resume-list button small, .path-recent-list button small { color: var(--pr-ink-soft); }
.path-recent-list button.active { border-color: var(--pr-blue); background: var(--pr-active); }
.path-breadcrumbs { display: flex; align-items: center; gap: 7px; color: var(--path-muted); font-size: 10px; }
.path-breadcrumbs strong { color: var(--path-ink); }
.path-breadcrumbs b { color: #b2abb9; }
.path-guided-actions { display: flex; gap: 5px; }
.path-slot-content .path-subnav {
  position: sticky;
  top: -16px;
  z-index: 12;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  margin: 0 -16px 15px;
  padding: 7px 16px;
  border-top: 1px solid #ece8ef;
  border-bottom: 1px solid var(--path-line);
  background: rgba(251,250,252,.96);
  backdrop-filter: blur(12px);
}
.path-slot-content .path-subnav button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #655e70;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.path-slot-content .path-subnav button:hover { background: #f0ecf4; }
.path-slot-content .path-subnav button.active { background: #e9e0f2; color: #5d3c89; }

.path-progress-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(85px, 1fr));
  gap: 0;
  overflow-x: auto;
  margin: -4px 0 10px;
  padding: 9px 8px;
  border: 1px solid var(--path-line);
  border-radius: 11px;
  background: #fff;
}
.path-progress-rail button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #8b8493;
  cursor: pointer;
}
.path-progress-rail button:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 62%;
  width: 76%;
  height: 2px;
  background: #ded9e5;
}
.path-progress-rail span {
  z-index: 1;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eeeaf1;
  font-size: 9px;
  font-weight: 900;
}
.path-progress-rail small { white-space: nowrap; font-size: 8px; }
.path-progress-rail button.complete span { color: #08796e; background: #c4eadf; }
.path-progress-rail button.complete:not(:last-child)::after { background: #8fd5c4; }
.path-progress-rail button.active span { color: #fff; background: var(--pr-blue); box-shadow: 0 0 0 3px var(--pr-active); }

.path-canvas-toolbar,
.path-filterbar,
.path-demo-filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.path-canvas-toolbar .st-field,
.path-filterbar .st-field,
.path-demo-filters .st-field { min-width: 150px; margin: 0; }
.path-schematic-shell {
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--pr-line);
  border-radius: 0;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--pr-blue) 16%, transparent) 1px, transparent 1.2px) 0 0/20px 20px,
    var(--pr-bg);
}
.path-schematic-viewport { position: relative; height: 560px; overflow: hidden; }
.path-schematic { display: block; min-width: 100%; }
.path-schematic-edge { fill: none; stroke: #9aa5b5; stroke-width: 1.5; }
.path-schematic-node { cursor: grab; outline: none; transition: opacity .15s; }
.path-schematic-node:active { cursor: grabbing; }
.path-schematic-node.dimmed { opacity: .14; }
.path-schematic-node.selected rect:first-of-type { filter: drop-shadow(0 4px 7px rgba(72,48,99,.24)); }
.path-schematic-type { fill: var(--pr-ink-soft); font: 700 8px system-ui; text-transform: uppercase; letter-spacing: .5px; }
.path-schematic-label { fill: var(--pr-ink); font: 650 10px system-ui; }
.path-schematic-minimap {
  position: sticky;
  left: calc(100% - 170px);
  bottom: 10px;
  width: 145px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 10px;
  padding: 8px 10px;
  border: 1px solid var(--pr-line);
  border-radius: 9px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 15px rgba(20,40,80,.13);
  font-size: 9px;
}
.path-schematic-minimap small { grid-column: 1 / -1; color: var(--path-muted); }
.path-schematic-lower { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(360px, 1.2fr); gap: 12px; margin-top: 12px; }
.path-help-list { margin: 0; padding-left: 18px; color: #5f5868; font-size: 10px; line-height: 1.8; }
.path-node-summary { display: grid; gap: 8px; }
.path-node-summary-head { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; }
.path-node-summary-head > i { width: 7px; height: 32px; border-radius: 7px; }
.path-node-summary-head strong, .path-node-summary-head span { display: block; }
.path-node-summary-head strong { font-size: 11px; }
.path-node-summary-head span { color: var(--path-muted); font-size: 9px; margin-top: 2px; }
.path-node-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.path-node-tabs span { padding: 4px 6px; border-radius: 5px; background: #f0ecf4; color: #655970; font-size: 8px; }

.path-anatomy-map { display: grid; grid-template-columns: 130px 1fr; gap: 15px; align-items: center; }
.path-anatomy-figure { position: relative; height: 200px; }
.path-anatomy-head { position: absolute; left: 50%; top: 4px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: #ddc9d5; }
.path-anatomy-torso { position: absolute; left: 50%; top: 46px; width: 72px; height: 104px; margin-left: -36px; border-radius: 32px 32px 20px 20px; background: linear-gradient(#ead7e1,#d7bfcc); }
.path-anatomy-limbs { position: absolute; left: 15px; right: 15px; top: 68px; height: 118px; border: 13px solid #ddc9d5; border-top-width: 10px; border-bottom: 0; border-radius: 35px 35px 0 0; }
.path-anatomy-organs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.path-anatomy-organs button { display: flex; gap: 6px; padding: 6px; border: 1px solid var(--path-line); border-radius: 7px; background: #fff; color: #605866; font-size: 9px; cursor: pointer; }
.path-anatomy-organs button.present { border-color: #9ed9cd; background: #eefaf7; color: #08796e; font-weight: 700; }
.path-tma-grid { display: grid; grid-template-columns: repeat(8, minmax(42px, 1fr)); gap: 4px; }
.path-tma-grid button { display: grid; gap: 2px; padding: 7px 3px; border: 1px solid #d7cedf; border-radius: 6px; background: #f8f3f7; cursor: pointer; }
.path-tma-grid strong { color: #6f4f91; font-size: 9px; }
.path-tma-grid span { overflow: hidden; text-overflow: ellipsis; font-size: 7px; white-space: nowrap; }

.path-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.path-detail-grid textarea { min-height: 62px; resize: vertical; }

.path-grid-shell { min-width: 0; border: 1px solid #ded9e5; border-radius: 10px; overflow: hidden; background: #fff; }
.path-grid-toolbar { display: flex; align-items: center; gap: 5px; padding: 7px; border-bottom: 1px solid #e3dee7; background: #f8f6fa; }
.path-grid-search { flex: 1; min-width: 130px; padding: 6px 8px; border: 1px solid #d7d0de; border-radius: 7px; background: #fff; font-size: 10px; }
.path-grid-select,
.path-grid-button { padding: 6px 7px; border: 1px solid #d7d0de; border-radius: 7px; background: #fff; color: #564f5f; font-size: 9px; cursor: pointer; }
.path-grid-button span { margin-right: 3px; font-weight: 900; }
.path-grid-button:disabled { opacity: .45; cursor: default; }
.path-grid-columns { position: relative; font-size: 9px; }
.path-grid-columns summary { padding: 6px 7px; border: 1px solid #d7d0de; border-radius: 7px; background: #fff; cursor: pointer; }
.path-grid-columns > div { position: absolute; z-index: 20; right: 0; top: 28px; min-width: 180px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid #d7d0de; border-radius: 8px; background: #fff; box-shadow: 0 9px 25px rgba(42,31,54,.16); }
.path-grid-columns label { display: flex; gap: 6px; padding: 3px; }
.path-grid-viewport { max-height: 510px; overflow: auto; outline: none; }
.path-grid { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 9px; }
.path-grid th { position: sticky; z-index: 4; top: 0; min-width: 110px; padding: 8px; border-right: 1px solid #e8e3eb; border-bottom: 1px solid #dcd5e2; background: #f4f1f6; color: #5f5769; text-align: left; cursor: pointer; white-space: nowrap; }
.path-grid td { height: 35px; padding: 0 8px; border-right: 1px solid #eeeaf1; border-bottom: 1px solid #eeeaf1; color: #45404d; white-space: nowrap; }
.path-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.path-grid td.frozen, .path-grid th:first-child { position: sticky; left: 0; z-index: 3; background: #fff; box-shadow: 1px 0 #ded9e5; }
.path-grid th:first-child { z-index: 6; background: #f4f1f6; }
.path-grid tr:hover td { background-color: #faf7fc; }
.path-grid tr.selected td { background-color: #eee7f6; }
.path-grid tr.locked td { background-image: linear-gradient(135deg, transparent 0 48%, rgba(118,84,167,.035) 48% 52%, transparent 52%); color: #77717e; }
.path-grid td.invalid { box-shadow: inset 0 0 0 1px #dc2626; background: #fff1f2; }
.path-grid td input, .path-grid td select { width: 100%; min-width: 94px; height: 27px; padding: 3px 5px; border: 1px solid transparent; background: transparent; font: inherit; }
.path-grid td input:focus, .path-grid td select:focus { outline: 2px solid var(--pr-blue); border-color: #fff; background: #fff; }
.path-grid-group td { position: sticky; left: 0; height: 28px; padding: 5px 8px; background: #eae4ef !important; color: #5e4b70; font-weight: 800; }
.path-grid-spacer td { padding: 0; border: 0; }
.path-grid-status { padding: 5px 8px; border-top: 1px solid #e7e2ea; background: #faf9fb; color: #77707e; font-size: 8px; }
.path-grid-mobile { display: grid; gap: 8px; padding: 8px; background: #f8f6fa; }
.path-grid-card { display: grid; gap: 5px; padding: 10px; border: 1px solid #dfd9e5; border-radius: 9px; background: #fff; }
.path-grid-card:focus { outline: 2px solid #9e83c0; outline-offset: 1px; }
.path-grid-card.locked { background: #f7f5f8; }
.path-grid-card-field { display: grid; grid-template-columns: minmax(92px, 36%) 1fr; gap: 8px; align-items: center; min-height: 26px; }
.path-grid-card-field > strong { color: #6f6677; font-size: 9px; }
.path-grid-card-value { min-width: 0; overflow-wrap: anywhere; font-size: 10px; }
.path-grid-card-value.invalid { padding: 3px; border: 1px solid #dc2626; border-radius: 5px; background: #fff1f2; }
.path-grid-card-value :is(input, select) { width: 100%; min-width: 0; padding: 5px 6px; border: 1px solid #d8d1de; border-radius: 6px; background: #fff; font: inherit; }
.path-mapping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px; margin: 8px 0 10px; }
.path-validation-summary { margin: 8px 0; padding: 7px 9px; border: 1px solid #f2b8b8; border-radius: 7px; background: #fff1f2; color: #9f1239; font-size: 10px; }
.path-validation-summary p { margin: 2px 0; }

.path-demo-filters .path-demo-count { align-self: center; margin-left: auto; color: var(--path-muted); font-size: 10px; }
.path-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.path-demo-card { overflow: hidden; border: 1px solid var(--path-line); border-radius: 13px; background: #fff; box-shadow: 0 2px 6px rgba(42,31,54,.05); }
.path-demo-visual {
  height: 98px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 11px;
  background:
    radial-gradient(circle at 18% 36%, hsla(var(--demo-hue),55%,55%,.48) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 58%, hsla(calc(var(--demo-hue) + 32),48%,44%,.45) 0 12px, transparent 13px),
    radial-gradient(circle at 82% 24%, hsla(calc(var(--demo-hue) - 38),55%,62%,.5) 0 9px, transparent 10px),
    linear-gradient(135deg, #f3d9e5, #e9d7ee);
  background-size: 52px 48px, 69px 61px, 73px 65px, auto;
}
.path-demo-visual span, .path-demo-visual b { padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.88); color: #473c50; font-size: 9px; }
.path-demo-body { display: grid; gap: 7px; padding: 11px; }
.path-demo-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.path-demo-title strong { font-size: 12px; }
.path-demo-body p { margin: 0; color: var(--path-muted); font-size: 9px; line-height: 1.45; }
.path-demo-walkthrough { margin: 0; padding-left: 20px; color: #5e5766; font-size: 8px; line-height: 1.65; }

.path-dashboard-summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 9px; margin-bottom: 12px; }
.path-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.path-dashboard-grid .st-card { min-width: 0; overflow: auto; }
.path-dashboard-chart { display: block; width: 100%; height: auto; min-height: 250px; }
.path-chart-meta { display: flex; align-items: center; gap: 8px; padding-top: 7px; color: var(--path-muted); font-size: 8px; }
.path-chart-meta .st-btn { margin-left: auto; }
.path-chart-error { padding: 16px; border: 1px solid #f1bd8a; border-radius: 9px; background: #fff7ed; color: #9a4b00; }
.path-chart-error p { margin: 3px 0; font-size: 9px; }
.path-chart-builder { display: grid; grid-template-columns: 250px minmax(420px, 1fr); gap: 12px; }
.path-chart-controls { display: grid; align-content: start; gap: 2px; padding: 11px; border: 1px solid var(--path-line); border-radius: 12px; background: #fff; }
.path-chart-preview { min-width: 0; display: grid; align-content: start; justify-items: stretch; padding: 14px; border: 1px solid var(--path-line); border-radius: 12px; background: #fff; overflow: auto; }
.path-chart-source { display: grid; gap: 4px; margin-top: 10px; padding: 8px; border-radius: 8px; background: #f7f4f9; color: #675f70; font-size: 9px; }
.path-chart-source pre { margin: 4px 0 0; white-space: pre-wrap; font-size: 8px; }

.path-compare-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #151820; height: 100%; }
.path-compare-stage > div { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.path-compare-stage > div > strong { display: block; padding: 5px 8px; color: #eee8f2; background: #1f2633; font-size: 9px; }
.path-compare-stage .path-stage { height: auto; flex: 1; border-top: 1px solid #2a3140; }
.path-overlay-compare { position: relative; overflow: hidden; }
.path-comparison-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }
.path-registration-badge { position: absolute; right: 14px; top: 14px; z-index: 4; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.9); color: #4e405b; font-size: 9px; font-weight: 700; }
.path-viewer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 9px 0; }
.path-layer-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.path-layer-legend button { display: grid; grid-template-columns: 8px 1fr auto; gap: 6px; align-items: center; padding: 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #665f6e; text-align: left; font-size: 8px; cursor: pointer; }
.path-layer-legend button.active { border-color: var(--pr-line); background: var(--pr-active); color: var(--pr-blue-dk); }
.path-layer-legend i { width: 8px; height: 8px; border-radius: 50%; }
.path-layer-legend b { font-size: 7px; }
.path-viewer-nav { display: grid; gap: 6px; }
.path-viewer-minimap { position: relative; width: 92px; height: 54px; overflow: hidden; border: 1px solid #bdb5c5; border-radius: 6px; }
.path-viewer-minimap img { width: 100%; height: 100%; object-fit: cover; }
.path-viewer-minimap i { position: absolute; left: 35%; top: 30%; min-width: 12px; min-height: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pr-blue); }

.path-proposal-head { display: flex; gap: 5px; margin-bottom: 7px; }
.path-proposal-rationale { margin: 0 0 8px; color: #554d5d; font-size: 10px; line-height: 1.45; }
.path-proposal-warnings { margin: 0 0 8px; padding-left: 18px; color: #9a5700; font-size: 9px; }
.path-proposal-ops { display: grid; gap: 5px; }
.path-proposal-ops label { display: grid; grid-template-columns: 18px 1fr; gap: 5px; padding: 7px; border: 1px solid #e2dce7; border-radius: 7px; background: #faf8fb; }
.path-proposal-ops strong, .path-proposal-ops code { display: block; }
.path-proposal-ops strong { font-size: 9px; }
.path-proposal-ops code { overflow-wrap: anywhere; color: #6d6474; font-size: 7px; margin-top: 2px; }
.path-inspector-comment { padding: 6px 0; border-bottom: 1px solid #eeeaf1; }
.path-inspector-comment strong { font-size: 9px; }
.path-inspector-comment span { float: right; color: var(--path-muted); font-size: 7px; }
.path-inspector-comment p { margin: 3px 0 0; color: #5d5665; font-size: 8px; line-height: 1.4; }

.path-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.path-section-head .st-section-h { margin: 0 0 3px; }
.path-section-head p { color: var(--path-muted); margin: 0; font-size: 12px; }

.path-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--path-line);
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
  color: #5e5868;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
}
.path-badge.ok { border-color: #a9ddd1; background: #ecfaf6; color: #08796e; }
.path-badge.warn { border-color: #f2cea2; background: #fff7ea; color: #a75b00; }

.path-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.path-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid var(--path-line);
  border-radius: 12px;
  background: #fff;
}
.path-metric > strong { font-size: 26px; color: var(--pr-blue); }
.path-metric span { display: block; font-weight: 700; font-size: 12px; }
.path-metric small { display: block; color: var(--path-muted); margin-top: 2px; }
.path-metric.teal > strong { color: var(--path-teal); }
.path-metric.blue > strong { color: var(--path-blue); }
.path-metric.orange > strong { color: var(--path-orange); }
.path-metric.green > strong { color: #23875e; }

.path-overview-grid,
.path-review-grid,
.path-govern-grid,
.path-model-grid,
.path-spatial-grid,
.path-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.path-spatial-grid { grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr); }
.path-kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; }
.path-kv dt { color: var(--path-muted); font-size: 11px; }
.path-kv dd { margin: 0; font-weight: 650; font-size: 12px; overflow-wrap: anywhere; }
.path-prose { margin: 0; color: #4d4858; line-height: 1.55; }

.path-checks { display: grid; gap: 6px; margin-bottom: 10px; }
.path-check { display: flex; gap: 9px; align-items: center; padding: 7px 9px; border-radius: 8px; background: var(--pr-bg); }
.path-check > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--pr-nav-bg); font-weight: 800; }
.path-check strong, .path-check small { display: block; }
.path-check strong { font-size: 11px; }
.path-check small { color: var(--path-muted); margin-top: 1px; }
.path-check.ok { background: #eefaf6; }
.path-check.ok > span { background: #bde8dc; color: #08796e; }
.path-check.pending { background: #fff8ed; }
.path-check.pending > span { background: #f9d8ab; color: #9f5a00; }

.path-workflow {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 5px 0;
}
.path-step { min-width: 82px; display: grid; justify-items: center; gap: 4px; position: relative; color: #8b8493; }
.path-step:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: 65%; width: 70%; height: 2px; background: #ded9e5; }
.path-step span { z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #ede9f1; font-size: 10px; font-weight: 800; }
.path-step small { text-align: center; text-transform: capitalize; font-size: 9px; }
.path-step.done span { background: #bde8dc; color: #08796e; }
.path-step.active span { background: var(--pr-blue); color: #fff; box-shadow: 0 0 0 4px var(--pr-active); }
.path-step.done:not(:last-child)::after { background: #8fd5c4; }

.path-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 30px 20px;
  border: 2px dashed var(--pr-blue);
  border-radius: 14px;
  background: color-mix(in srgb, var(--pr-blue) 6%, var(--pr-surface));
  color: var(--pr-ink);
  cursor: pointer;
  margin-bottom: 12px;
}
.path-drop:hover, .path-drop.drop { border-color: var(--pr-blue-dk); background: var(--pr-active); }
.path-drop-icon { font-size: 28px; color: var(--pr-blue); }
.path-drop span { color: var(--path-muted); font-size: 11px; text-align: center; }
.path-actionbar { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
.path-actionbar .st-field { min-width: 190px; margin: 0; }

.path-slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 12px;
}
.path-slide-card {
  padding: 0;
  border: 1px solid var(--path-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.path-slide-card:hover, .path-slide-card.active { border-color: var(--pr-blue); box-shadow: var(--pr-shadow); transform: translateY(-1px); }
.path-slide-card-body { display: grid; gap: 5px; padding: 10px; }
.path-slide-card-body strong { font-size: 12px; }
.path-slide-card-body > span { color: var(--path-muted); font-size: 10px; }
.path-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.path-preview { display: block; object-fit: cover; background: #d6e4fb; }
.path-preview-card { width: 100%; height: 135px; }
.path-preview-film { width: 76px; height: 42px; border-radius: 5px; }
.path-preview.missing { display: grid; place-items: center; align-content: center; color: #786b7e; background: repeating-linear-gradient(135deg, #e9dce5 0 12px, #f2eaf0 12px 24px); }
.path-preview.missing span { font-size: 18px; font-weight: 800; }
.path-preview.missing small { font-size: 8px; }

.path-viewbar {
  display: flex;
  gap: 7px;
  align-items: end;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--path-line);
  border-radius: 10px 10px 0 0;
  background: #fff;
}
.path-viewbar .st-field { min-width: 120px; margin: 0; }
.path-zoom { min-width: 46px; text-align: center; font-size: 11px; font-weight: 700; }
.path-slider { display: grid; gap: 2px; min-width: 110px; font-size: 9px; color: var(--path-muted); }
.path-slider input { width: 110px; accent-color: var(--pr-blue); }
.path-stage {
  position: relative;
  height: min(58vh, 590px);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #151820;
  border: 1px solid var(--pr-line);
  border-top: 0;
}
.path-stage-inner {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 1.55;
  transform-origin: center;
  background: #1a2030;
  overflow: hidden;
  cursor: grab;
}
.path-slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.path-wsi-placeholder { height: 100%; display: grid; place-items: center; align-content: center; gap: 7px; color: #6a5e71; background: repeating-linear-gradient(135deg, #eadde6 0 24px, #f4ebf1 24px 48px); }
.path-wsi-placeholder span { font-size: 64px; font-weight: 900; opacity: .22; }
.path-overlay, .path-qc-overlay {
  position: absolute;
  border: 3px solid;
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.path-overlay.active { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px currentColor; }
.path-overlay span { position: absolute; left: -2px; top: -25px; max-width: 180px; padding: 3px 6px; background: currentColor; color: #fff; font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.path-overlay b { position: absolute; right: 2px; top: 2px; font-size: 10px; }
.path-qc-overlay { border-color: #f59e0b; background: rgba(245,158,11,.16); pointer-events: none; }
.path-scale { position: absolute; left: 18px; bottom: 16px; color: #fff; padding: 0 3px 5px; text-shadow: 0 1px 2px #000; font-size: 10px; }
.path-scale i { display: block; height: 4px; background: #fff; margin-bottom: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.path-stage-hint { position: absolute; right: 12px; bottom: 10px; padding: 4px 7px; border-radius: 6px; color: #ddd8e2; background: rgba(20,18,25,.7); font-size: 9px; }
.path-filmstrip { display: flex; gap: 7px; padding: 8px; overflow-x: auto; border-top: 1px solid var(--pr-line); background: var(--pr-nav-bg); }
.path-filmstrip button { display: grid; gap: 3px; padding: 4px; border: 1px solid transparent; background: transparent; border-radius: 7px; cursor: pointer; }
.path-filmstrip button.active { border-color: var(--pr-blue); background: var(--pr-active); }
.path-filmstrip span { width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }

.path-qc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; }
.path-qc-card { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--path-line); border-radius: 8px; background: #fff; cursor: pointer; }
.path-qc-card strong { flex: 1; font-size: 10px; text-align: left; }
.path-qc-card span:last-child { color: var(--path-muted); font-size: 9px; text-transform: capitalize; }
.path-tip { padding: 8px 10px; color: #635b6c; background: #f2edf7; border-radius: 8px; font-size: 10px; }

.path-pipeline-layout { display: grid; grid-template-columns: minmax(290px, .8fr) minmax(380px, 1.2fr); gap: 12px; margin-bottom: 12px; }
.path-pipeline-list { display: grid; align-content: start; gap: 5px; }
.path-pipeline-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--path-line); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; }
.path-pipeline-row.active { border-color: var(--pr-blue); background: var(--pr-active); }
.path-pipeline-row strong, .path-pipeline-row small { display: block; }
.path-pipeline-row strong { font-size: 11px; }
.path-pipeline-row small { color: var(--path-muted); font-size: 9px; margin-top: 2px; }
.path-pipeline-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--pr-blue); font-size: 9px; font-weight: 800; }
.path-pipeline-chain { display: flex; align-items: stretch; overflow-x: auto; gap: 19px; padding: 5px 2px 12px; }
.path-pipeline-chain.compact { flex-wrap: wrap; }
.path-pipeline-node { position: relative; min-width: 112px; display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid #d8d0e0; border-radius: 8px; background: #fff; }
.path-pipeline-node:not(:last-child)::after { content: "→"; position: absolute; right: -17px; color: #9a91a2; }
.path-pipeline-node span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--pr-active); color: var(--pr-blue-dk); font-size: 9px; font-weight: 800; }
.path-pipeline-node strong { font-size: 9px; }

.path-mini-chart { display: grid; gap: 7px; }
.path-mini-row { display: grid; grid-template-columns: 78px 1fr 46px; gap: 7px; align-items: center; font-size: 9px; }
.path-mini-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-mini-track { height: 8px; overflow: hidden; border-radius: 999px; background: #eeeaf1; }
.path-mini-track i { display: block; height: 100%; border-radius: inherit; }
.path-mini-row b { text-align: right; }
.path-formula { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.path-formula code { padding: 6px 8px; border-radius: 7px; background: #f4f0f6; color: #584a65; }
.path-phenotypes { display: grid; gap: 6px; }
.path-phenotype { display: flex; gap: 8px; align-items: center; padding: 7px; border: 1px solid var(--path-line); border-radius: 8px; }
.path-phenotype i { width: 9px; height: 30px; border-radius: 5px; }
.path-phenotype strong, .path-phenotype code { display: block; }
.path-phenotype strong { font-size: 10px; }
.path-phenotype code { color: var(--path-muted); font-size: 8px; margin-top: 2px; }

.path-control-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #6a6372; font-size: 10px; border-bottom: 1px solid #eeeaf1; }
.path-control-line span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #f6dcc0; color: #a65b00; font-weight: 800; }
.path-control-line.ok span { background: #c4eadf; color: #08796e; }
.path-uncertain { display: grid; gap: 5px; margin: 8px 0 12px; }
.path-uncertain span { padding: 7px; border-radius: 7px; background: #f6f1fa; color: #604d70; font-size: 10px; }

.path-integration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-bottom: 12px; }
.path-integration-card { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid var(--path-line); border-radius: 10px; background: #fff; }
.path-integration-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--pr-active); color: var(--pr-blue); font-weight: 800; }
.path-integration-card strong { font-size: 11px; }
.path-integration-card p { margin: 3px 0 0; color: var(--path-muted); font-size: 9px; line-height: 1.35; }
.path-automation-list { columns: 2; margin: 0; padding-left: 20px; color: #5b5563; font-size: 10px; line-height: 1.8; }
.path-report, .path-ai-output { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: #433e4b; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.path-report { max-height: 580px; overflow: auto; }
.path-ai-output { max-height: 320px; overflow: auto; }
.path-ai-context { margin: 0 0 8px; color: var(--path-muted); font-size: 10px; }
.path-ai-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.path-toggle { display: flex; gap: 7px; align-items: center; padding: 6px 0; color: #56505e; font-size: 10px; }
.path-toggle input { accent-color: var(--pr-blue); }

@media (max-width: 980px) {
  .path-metrics { grid-template-columns: repeat(2, 1fr); }
  .path-overview-grid, .path-review-grid, .path-govern-grid, .path-model-grid, .path-spatial-grid, .path-chart-grid, .path-pipeline-layout { grid-template-columns: 1fr; }
  .path-detail-grid, .path-dashboard-grid, .path-schematic-lower, .path-chart-builder { grid-template-columns: 1fr; }
  .path-dashboard-summary { grid-template-columns: repeat(2, 1fr); }
  .path-viewer-summary { grid-template-columns: 1fr 1fr; }
  .path-viewer-body { grid-template-columns: 1fr; }
  .path-progress-rail { grid-template-columns: repeat(7, minmax(82px, 1fr)); }
  .path-stage { height: 440px; }
  .path-automation-list { columns: 1; }
}

@media (max-width: 640px) {
  .path-guided-head { align-items: flex-start; flex-direction: column; }
  .path-command-bar { align-items: stretch; flex-direction: column; }
  .path-progress-rail { margin-left: -10px; margin-right: -10px; border-radius: 0; }
  .path-dashboard-summary, .path-viewer-summary, .path-compare-stage { grid-template-columns: 1fr; }
  .path-schematic-viewport { height: 460px; }
  .path-schematic-shell { min-height: 460px; }
  .path-grid-toolbar { flex-wrap: wrap; }
  .path-grid-search { flex-basis: 100%; }
  .path-demo-grid { grid-template-columns: 1fr; }
}

#os.theme-macos .pathology-studio-root { --path-purple: #0a84ff; }
#os.theme-macos .path-pipeline-icon { background: var(--path-purple); }