:root {
  --studio-bg: #070a12;
  --studio-panel: rgba(14, 19, 31, 0.9);
  --studio-panel-strong: #111725;
  --studio-line: rgba(151, 169, 206, 0.15);
  --studio-line-strong: rgba(151, 169, 206, 0.28);
  --studio-text: #f5f7fc;
  --studio-muted: #8d97ad;
  --studio-cyan: #55e6d1;
  --studio-cyan-rgb: 85, 230, 209;
  --studio-violet: #a892ff;
  --studio-violet-rgb: 168, 146, 255;
  --studio-amber: #f5c96a;
  --studio-red: #ff7a8d;
  --studio-radius: 18px;
  --studio-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --studio-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.sensor-studio,
.sensor-studio * {
  box-sizing: border-box;
}

.sensor-studio {
  --profile-accent: var(--studio-cyan);
  --profile-accent-rgb: var(--studio-cyan-rgb);
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 56px);
  overflow: hidden;
  padding: 34px clamp(18px, 2.3vw, 42px) 52px;
  color: var(--studio-text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 52% -15%, rgba(var(--profile-accent-rgb), .1), transparent 38%),
    var(--studio-bg);
  background-size: 36px 36px, 36px 36px, auto, auto;
  font-family: var(--studio-font);
}

.sensor-studio[data-profile="dte-gnn-translation"] {
  --profile-accent: var(--studio-violet);
  --profile-accent-rgb: var(--studio-violet-rgb);
}

.sensor-studio button,
.sensor-studio input,
.sensor-studio select {
  font: inherit;
}

.sensor-studio button:focus-visible,
.sensor-studio input:focus-visible,
.sensor-studio select:focus-visible {
  outline: 2px solid rgba(var(--profile-accent-rgb), .72);
  outline-offset: 2px;
}

.sensor-studio [hidden] {
  display: none !important;
}

.studio-ambient {
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .08;
  pointer-events: none;
}

.studio-ambient-one { top: 12%; left: -260px; background: var(--studio-cyan); }
.studio-ambient-two { right: -240px; bottom: 4%; background: var(--studio-violet); }

.studio-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  max-width: 1780px;
  margin: 0 auto 24px;
}

.studio-hero-copy { min-width: 330px; }

.studio-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--profile-accent);
  font-family: var(--studio-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.studio-eyebrow > span {
  width: 22px;
  height: 1px;
  background: var(--profile-accent);
  box-shadow: 0 0 10px var(--profile-accent);
}

.studio-title-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.studio-title-line h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1;
}

.studio-version,
.evidence-mark,
.canvas-badge,
.historical-chip {
  padding: 5px 8px;
  border: 1px solid rgba(var(--profile-accent-rgb), .34);
  border-radius: 999px;
  color: var(--profile-accent);
  background: rgba(var(--profile-accent-rgb), .07);
  font-family: var(--studio-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  white-space: nowrap;
}

.studio-hero-copy p {
  max-width: 650px;
  margin: 10px 0 0;
  color: var(--studio-muted);
  font-size: 13px;
}

.profile-switcher {
  display: flex;
  min-width: min(860px, 62vw);
  padding: 4px;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: rgba(8, 12, 21, .72);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.profile-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 66px;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--studio-muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.profile-button:hover { color: var(--studio-text); background: rgba(255,255,255,.035); }
.profile-button:active { transform: scale(.99); }
.profile-button.is-active {
  border-color: rgba(var(--profile-accent-rgb), .28);
  color: var(--studio-text);
  background: linear-gradient(120deg, rgba(var(--profile-accent-rgb), .13), rgba(var(--profile-accent-rgb), .035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 26px rgba(var(--profile-accent-rgb), .06);
}

.profile-number {
  color: var(--profile-accent);
  font-family: var(--studio-mono);
  font-size: 10px;
}

.profile-copy { display: flex; flex-direction: column; gap: 2px; }
.profile-copy strong { font-size: 12px; letter-spacing: .01em; }
.profile-copy small { color: var(--studio-muted); font-size: 10px; }
.profile-state {
  padding: 4px 6px;
  border-radius: 4px;
  color: #5e687c;
  background: rgba(255,255,255,.035);
  font-family: var(--studio-mono);
  font-size: 8px;
  letter-spacing: .08em;
}
.profile-button.is-active .profile-state { color: var(--profile-accent); }

.studio-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  max-width: 1780px;
  min-height: 43px;
  margin: 0 auto 10px;
  padding: 8px 15px;
  border: 1px solid var(--studio-line);
  border-radius: 11px;
  background: rgba(9, 13, 22, .8);
}

.status-track { display: flex; align-items: center; }
.status-dot {
  width: 7px;
  height: 7px;
  border: 1px solid #566076;
  border-radius: 50%;
  background: #111622;
  transition: .2s ease;
}
.status-dot.is-active,
.status-dot.is-complete {
  border-color: var(--profile-accent);
  background: var(--profile-accent);
  box-shadow: 0 0 9px rgba(var(--profile-accent-rgb), .8);
}
.status-dot.is-error { border-color: var(--studio-red); background: var(--studio-red); box-shadow: 0 0 9px var(--studio-red); }
.status-line { width: 17px; height: 1px; background: var(--studio-line-strong); }
.studio-status strong { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.studio-status > div:nth-child(2) span { display: block; margin-top: 1px; color: var(--studio-muted); font-size: 10px; }
.status-provenance { display: flex; align-items: center; gap: 7px; color: var(--studio-muted); font-family: var(--studio-mono); font-size: 9px; }
.live-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--profile-accent); box-shadow: 0 0 8px var(--profile-accent); }

.studio-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(500px, 1fr) minmax(300px, 360px);
  gap: 10px;
  max-width: 1780px;
  min-height: 720px;
  margin: 0 auto;
}

.studio-panel {
  min-width: 0;
  border: 1px solid var(--studio-line);
  background: var(--studio-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 24px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(20px);
}

.studio-controls { display: flex; flex-direction: column; border-radius: var(--studio-radius) 7px 7px var(--studio-radius); overflow: hidden; }
.studio-canvas-panel { display: flex; flex-direction: column; border-radius: 7px; overflow: hidden; }
.studio-inspector { border-radius: 7px var(--studio-radius) var(--studio-radius) 7px; overflow: auto; }

.panel-heading,
.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(255,255,255,.012);
}

.panel-heading > div,
.canvas-toolbar > div:first-child { display: flex; align-items: center; gap: 9px; }
.panel-index { color: var(--profile-accent); font-family: var(--studio-mono); font-size: 10px; }
.panel-heading h2,
.canvas-toolbar h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.icon-button,
.toolbar-button {
  border: 1px solid var(--studio-line);
  color: var(--studio-muted);
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.icon-button { width: 29px; height: 29px; border-radius: 7px; }
a.toolbar-button { display: inline-flex; align-items: center; text-decoration: none; }
.icon-button:hover,
.toolbar-button:hover,
.toolbar-button.is-active { border-color: rgba(var(--profile-accent-rgb), .4); color: var(--profile-accent); }

.model-identity { padding: 16px 16px 11px; }
.model-kicker { color: var(--profile-accent); font-family: var(--studio-mono); font-size: 9px; letter-spacing: .12em; }
.model-identity h3 { margin: 5px 0 7px; font-size: 16px; font-weight: 630; letter-spacing: -.02em; }
.model-identity a { color: var(--studio-muted); font-size: 10px; text-decoration: none; }
.model-identity a:hover { color: var(--profile-accent); }

.mode-switcher {
  display: flex;
  margin: 0 15px 6px;
  padding: 3px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: rgba(0,0,0,.18);
}
.mode-switcher button {
  flex: 1;
  padding: 7px;
  border: 0;
  border-radius: 6px;
  color: var(--studio-muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.mode-switcher button.is-active { color: var(--profile-accent); background: rgba(var(--profile-accent-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--profile-accent-rgb), .16); }

.control-section { padding: 10px 15px; }
.section-label { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; color: #778298; font-family: var(--studio-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.section-line { flex: 1; height: 1px; background: var(--studio-line); }

.case-list { display: grid; gap: 6px; }
.case-button {
  position: relative;
  width: 100%;
  padding: 9px 10px 9px 29px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  color: #c9d0df;
  background: rgba(255,255,255,.018);
  text-align: left;
  cursor: pointer;
}
.case-button::before { content: ""; position: absolute; top: 13px; left: 12px; width: 6px; height: 6px; border: 1px solid var(--profile-accent); border-radius: 50%; }
.case-button-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.case-button strong { display: block; min-width: 0; font-size: 11px; }
.case-button small { display: block; margin-top: 4px; color: #788399; font-size: 10px; line-height: 1.4; }
.case-chip { flex: none; padding: 3px 5px; border-radius: 4px; color: var(--profile-accent); background: rgba(var(--profile-accent-rgb), .08); font-family: var(--studio-mono); font-size: 8px; letter-spacing: .04em; white-space: nowrap; }
.case-chip.history { color: var(--studio-amber); background: rgba(245,201,106,.08); }
.case-button:hover,
.case-button.is-active { border-color: rgba(var(--profile-accent-rgb), .42); background: rgba(var(--profile-accent-rgb), .07); }
.case-button.is-active::before { background: var(--profile-accent); box-shadow: 0 0 8px rgba(var(--profile-accent-rgb), .72); }

.profile-controls { display: block; }
.profile-controls[hidden] { display: none !important; }

.studio-field { display: block; margin-bottom: 8px; }
.studio-field > span { display: block; margin-bottom: 4px; color: #b7bfce; font-size: 10px; font-weight: 650; letter-spacing: .02em; }
.studio-field input,
.studio-field select,
.catalog-filters input,
.catalog-filters select,
.inspector-input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--studio-line);
  border-radius: 7px;
  outline: none;
  color: var(--studio-text);
  background: rgba(3, 6, 13, .55);
  font-size: 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* The material picker is a list box, so it must grow past the 34px input height. */
select.inspector-input[size] {
  height: auto;
  min-height: 132px;
  padding: 4px;
  line-height: 1.7;
}
select.inspector-input[size] option { padding: 2px 5px; border-radius: 4px; }
.studio-field input:focus,
.studio-field select:focus,
.catalog-filters input:focus,
.catalog-filters select:focus,
.inspector-input:focus { border-color: rgba(var(--profile-accent-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--profile-accent-rgb), .07); }
.studio-field select,
.catalog-filters select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #758096 50%), linear-gradient(135deg, #758096 50%, transparent 50%); background-position: calc(100% - 13px) 14px, calc(100% - 9px) 14px; background-size: 4px 4px; background-repeat: no-repeat; }
.studio-field small { display: block; margin-top: 3px; color: #707b90; font-size: 10px; }
.field-grid { display: grid; gap: 6px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advanced-condition-grid .studio-field { margin-bottom: 2px; }
.studio-field.compact input { padding: 0 6px; }

.target-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.target-grid label { cursor: pointer; }
.target-grid input { position: absolute; opacity: 0; pointer-events: none; }
.target-grid span { display: block; padding: 8px; border: 1px solid var(--studio-line); border-radius: 7px; color: var(--studio-muted); background: rgba(255,255,255,.018); font-size: 10px; text-align: center; }
.target-grid input:checked + span { border-color: rgba(var(--profile-accent-rgb), .4); color: var(--profile-accent); background: rgba(var(--profile-accent-rgb), .08); }
.target-grid input:focus-visible + span { outline: 2px solid rgba(var(--profile-accent-rgb), .72); outline-offset: 2px; }
.schema-note { margin: 0; color: #788399; font-size: 10px; line-height: 1.45; }
.schema-note span { color: var(--studio-cyan); }
.node-preset-callout { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; border: 1px solid rgba(var(--profile-accent-rgb), .18); border-radius: 8px; background: rgba(var(--profile-accent-rgb), .045); }
.node-preset-callout > span { color: var(--profile-accent); font-family: var(--studio-mono); font-size: 13px; }
.node-preset-callout p { margin: 0; }
.node-preset-callout strong,
.node-preset-callout small { display: block; }
.node-preset-callout strong { color: #c2cad8; font-size: 10px; }
.node-preset-callout small { margin-top: 2px; color: #758096; font-size: 9px; line-height: 1.4; }
.explore-callout { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(var(--profile-accent-rgb), .2); border-radius: 10px; background: rgba(var(--profile-accent-rgb), .05); }
.explore-callout > span { color: var(--profile-accent); font-family: var(--studio-mono); font-size: 20px; }
.explore-callout div { display: flex; flex-direction: column; }
.explore-callout strong { font-size: 10px; }
.explore-callout small { color: var(--studio-muted); font-size: 10px; }

.run-dock { margin-top: auto; padding: 13px 15px 15px; border-top: 1px solid var(--studio-line); background: linear-gradient(to top, rgba(var(--profile-accent-rgb), .045), transparent); }
.run-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid rgba(var(--profile-accent-rgb), .48); border-radius: 10px; color: #07100f; background: var(--profile-accent); box-shadow: 0 9px 24px rgba(var(--profile-accent-rgb), .14); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.run-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(var(--profile-accent-rgb), .22); }
.run-button:disabled { opacity: .35; cursor: not-allowed; }
.run-icon { font-size: 9px; }
.run-shortcut { padding: 3px 5px; border-radius: 4px; color: rgba(0,0,0,.55); background: rgba(0,0,0,.1); font-family: var(--studio-mono); font-size: 8px; }
.run-button.is-loading .run-icon { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.25); border-top-color: #07100f; border-radius: 50%; font-size: 0; animation: studio-spin .8s linear infinite; }
.run-dock p { margin: 6px 2px 0; color: #748096; font-size: 9px; line-height: 1.4; text-align: center; }
.run-dock p.is-draft { color: var(--studio-amber); }
@keyframes studio-spin { to { transform: rotate(360deg); } }

.canvas-toolbar { min-height: 58px; }
.canvas-count { color: #748096; font-family: var(--studio-mono); font-size: 9px; }
.canvas-actions { display: flex; gap: 5px; }
.toolbar-button { min-height: 29px; padding: 0 9px; border-radius: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }

.canvas-stage { position: relative; flex: 0 0 510px; min-height: 430px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(var(--profile-accent-rgb), .045), transparent 42%), #090d17; }
.canvas-grid { position: absolute; inset: 0; opacity: .38; pointer-events: none; background-image: radial-gradient(circle, rgba(142,157,187,.24) .7px, transparent .8px); background-size: 18px 18px; mask-image: radial-gradient(circle at center, #000 35%, transparent 88%); }
#studioGraph { position: absolute; inset: 0; cursor: grab; }
#studioGraph:active { cursor: grabbing; }
.paper-figure-overlay { position: absolute; inset: 10px; z-index: 8; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--profile-accent-rgb), .26); border-radius: 12px; background: rgba(8, 12, 21, .97); box-shadow: 0 24px 70px rgba(0,0,0,.55); backdrop-filter: blur(22px); }
.paper-figure-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 49px; padding: 8px 10px; border-bottom: 1px solid var(--studio-line); }
.paper-figure-toolbar > div:first-child { display: flex; align-items: center; gap: 9px; }
.paper-figure-toolbar strong { font-size: 10px; }
.paper-figure-tabs { display: flex; align-items: center; gap: 4px; }
.paper-figure-tabs button,
.paper-figure-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; padding: 0 8px; border: 1px solid var(--studio-line); border-radius: 6px; color: var(--studio-muted); background: rgba(255,255,255,.025); font-size: 9px; text-decoration: none; cursor: pointer; }
.paper-figure-tabs button:hover,
.paper-figure-tabs button.is-active,
.paper-figure-tabs a:hover { border-color: rgba(var(--profile-accent-rgb), .4); color: var(--profile-accent); background: rgba(var(--profile-accent-rgb), .07); }
#closePaperFigure { width: 27px; padding: 0; font-size: 15px; }
.paper-figure-viewport { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 12px; overflow: auto; background: radial-gradient(circle at center, rgba(var(--profile-accent-rgb), .06), transparent 58%); }
.paper-figure-viewport img { display: block; max-width: 100%; max-height: 100%; border-radius: 7px; object-fit: contain; box-shadow: 0 10px 35px rgba(0,0,0,.3); }
.paper-figure-overlay > p { margin: 0; padding: 8px 12px; border-top: 1px solid var(--studio-line); color: var(--studio-muted); font-size: 10px; line-height: 1.45; }
.canvas-hint { position: absolute; bottom: 12px; left: 14px; z-index: 2; color: #6f7b91; font-family: var(--studio-mono); font-size: 9px; letter-spacing: .04em; pointer-events: none; }
.canvas-hint span { color: var(--profile-accent); }
.canvas-badge { position: absolute; top: 12px; left: 14px; z-index: 2; pointer-events: none; }
.graph-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; min-height: 38px; padding: 8px 14px; border-top: 1px solid var(--studio-line); color: #748096; font-family: var(--studio-mono); font-size: 9px; }
.graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend-dot.material { background: var(--studio-cyan); }
.legend-dot.environment { background: var(--studio-violet); }
.legend-dot.condition { background: var(--studio-amber); }
.legend-line { width: 15px; height: 1px; background: #5f6e8d; }
.legend-line.electrical { background: #5ca9ff; }
.legend-line.capacitive { background: var(--studio-violet); }
.legend-line.chemical { background: var(--studio-cyan); }
.legend-line.message { background: var(--studio-cyan); }
.legend-line.fingerprint { background: var(--studio-violet); }
.legend-line.readout { background: #4a5a78; }
.legend-ring { width: 9px; height: 9px; border: 2px solid var(--profile-accent); border-radius: 3px; box-shadow: 0 0 7px rgba(var(--profile-accent-rgb), .45); }
.legend-ring.draft { border-color: var(--studio-amber); border-style: dashed; box-shadow: none; }
.legend-ring.historical { border-color: var(--studio-amber); background: rgba(245,201,106,.14); box-shadow: 0 0 7px rgba(245,201,106,.32); }
.sensor-studio[data-profile="pfas-msde"] .dte-legend-state,
.sensor-studio[data-profile="pfas-msde"] .dte-edge-legend { display: none; }
.sensor-studio[data-profile="dte-gnn-translation"] .pfas-edge-legend { display: none; }

.catalog-workspace { flex: 1; min-height: 280px; border-top: 1px solid var(--studio-line); background: rgba(5, 8, 15, .52); }
.catalog-workspace[hidden] { display: none; }
.catalog-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 14px; border-bottom: 1px solid var(--studio-line); }
.catalog-header h3 { margin: 7px 0 2px; font-size: 13px; }
.catalog-header p { margin: 0; color: var(--studio-muted); font-size: 10px; }
.catalog-filters { display: flex; align-items: center; gap: 6px; min-width: 360px; }
.search-box { position: relative; flex: 1; }
.search-box span { position: absolute; top: 7px; left: 8px; z-index: 1; color: var(--studio-muted); }
.catalog-filters input { padding-left: 24px; }
.catalog-filters select { width: 132px; }
.catalog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 330px; padding: 9px; overflow: auto; }
.candidate-card { position: relative; min-width: 0; padding: 10px; border: 1px solid var(--studio-line); border-radius: 9px; color: var(--studio-text); background: rgba(255,255,255,.018); text-align: left; cursor: pointer; }
.candidate-card:hover,
.candidate-card.is-active { border-color: rgba(var(--profile-accent-rgb), .4); background: rgba(var(--profile-accent-rgb), .06); }
.candidate-card.is-paper::after { content: "PAPER"; position: absolute; top: 8px; right: 8px; color: var(--studio-amber); font-family: var(--studio-mono); font-size: 7px; letter-spacing: .08em; }
.candidate-card strong { display: block; padding-right: 32px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-card small { display: block; margin: 3px 0 8px; color: #738097; font-family: var(--studio-mono); font-size: 9px; }
.candidate-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.candidate-metrics span { display: flex; flex-direction: column; padding: 5px; border-radius: 5px; background: rgba(0,0,0,.18); color: #79859a; font-size: 9px; text-transform: uppercase; }
.candidate-metrics b { margin-top: 2px; color: #c8d0df; font-family: var(--studio-mono); font-size: 10px; font-weight: 500; text-transform: none; }

.studio-inspector .panel-heading { position: sticky; top: 0; z-index: 5; background: rgba(14, 19, 31, .96); }
.inspector-card { min-height: 242px; margin: 13px; border: 1px solid var(--studio-line); border-radius: 12px; background: rgba(2,5,11,.28); }
.empty-inspector { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 20px; text-align: center; }
.empty-inspector h3 { margin: 13px 0 5px; font-size: 11px; }
.empty-inspector p { max-width: 260px; margin: 0; color: var(--studio-muted); font-size: 10px; line-height: 1.55; }
.empty-orbit { position: relative; width: 48px; height: 48px; border: 1px solid rgba(var(--profile-accent-rgb), .18); border-radius: 50%; }
.empty-orbit::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(var(--profile-accent-rgb), .35); border-radius: 50%; }
.empty-orbit span { position: absolute; top: 21px; left: 21px; width: 5px; height: 5px; border-radius: 50%; background: var(--profile-accent); box-shadow: 0 0 12px var(--profile-accent); }
.node-inspector-content { padding: 13px; }
.node-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.node-role { display: inline-flex; align-items: center; gap: 5px; color: var(--profile-accent); font-family: var(--studio-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.node-role::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.node-inspector-content h3 { margin: 5px 0 2px; font-size: 14px; }
.node-id { color: #69758b; font-family: var(--studio-mono); font-size: 9px; }
.support-chip { padding: 4px 6px; border-radius: 5px; color: var(--studio-cyan); background: rgba(85,230,209,.08); font-family: var(--studio-mono); font-size: 8px; text-transform: uppercase; }
.support-chip.draft { color: var(--studio-amber); background: rgba(245,201,106,.08); }
.inspector-divider { height: 1px; margin: 12px 0; background: var(--studio-line); }
.inspector-label { display: block; margin-bottom: 5px; color: #7f8ba0; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.inspector-description { margin: 9px 0; color: var(--studio-muted); font-size: 10px; line-height: 1.5; }
.inspector-actions { display: flex; gap: 6px; margin-top: 8px; }
.inspector-actions button { flex: 1; min-height: 32px; border: 1px solid var(--studio-line); border-radius: 7px; color: #aeb6c6; background: rgba(255,255,255,.025); font-size: 10px; cursor: pointer; }
.inspector-actions button.primary { border-color: rgba(var(--profile-accent-rgb), .35); color: var(--profile-accent); background: rgba(var(--profile-accent-rgb), .06); }
.inspector-actions button:hover { border-color: rgba(var(--profile-accent-rgb), .45); }

.result-section { padding: 0 13px 16px; }
.model-results { min-height: 245px; }
.result-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; padding: 20px; border: 1px dashed var(--studio-line); border-radius: 11px; color: var(--studio-muted); text-align: center; }
.result-placeholder p { max-width: 250px; margin: 7px 0 0; font-size: 10px; line-height: 1.5; }
.result-glyph { color: var(--profile-accent); font-size: 24px; }
.result-hero { position: relative; overflow: hidden; padding: 13px; border: 1px solid rgba(var(--profile-accent-rgb), .24); border-radius: 11px; background: linear-gradient(135deg, rgba(var(--profile-accent-rgb), .09), rgba(var(--profile-accent-rgb), .02)); }
.result-hero::after { content: ""; position: absolute; top: -48px; right: -48px; width: 110px; height: 110px; border: 1px solid rgba(var(--profile-accent-rgb), .12); border-radius: 50%; }
.result-eyebrow { color: var(--profile-accent); font-family: var(--studio-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.result-value { display: block; margin: 5px 0 2px; font-family: var(--studio-mono); font-size: 23px; font-weight: 500; letter-spacing: -.04em; }
.result-caption { color: var(--studio-muted); font-size: 10px; }
.provenance-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.provenance-row span { padding: 4px 5px; border-radius: 4px; color: #8490a5; background: rgba(0,0,0,.2); font-family: var(--studio-mono); font-size: 8px; }
.probability-matrix-block { margin-top: 8px; padding: 9px; border: 1px solid var(--studio-line); border-radius: 9px; background: rgba(0,0,0,.13); }
.matrix-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.matrix-title span { color: #bac2d1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.matrix-title small { color: #6f7b91; font-size: 8px; text-align: right; }
.probability-matrix { display: grid; grid-template-columns: minmax(34px, .75fr) repeat(4, minmax(38px, 1fr)); gap: 3px; align-items: stretch; }
.probability-matrix > b { display: flex; align-items: center; justify-content: center; min-height: 21px; color: #78849a; font-family: var(--studio-mono); font-size: 8px; font-weight: 500; text-align: center; }
.probability-matrix > strong { display: flex; align-items: center; padding-left: 2px; color: #c3cad8; font-family: var(--studio-mono); font-size: 9px; }
.probability-cell { display: flex; align-items: center; justify-content: center; min-height: 27px; border: 1px solid rgba(var(--profile-accent-rgb), .18); border-radius: 5px; color: #edf0f8; background: rgba(var(--profile-accent-rgb), var(--heat-opacity)); font-family: var(--studio-mono); font-size: 9px; }
.design-snapshot { margin-top: 8px; border: 1px solid var(--studio-line); border-radius: 9px; background: rgba(0,0,0,.13); }
.design-snapshot summary { display: flex; align-items: center; gap: 7px; padding: 9px; color: #bac2d1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; list-style: none; cursor: pointer; }
.design-snapshot summary::-webkit-details-marker { display: none; }
.design-snapshot summary::before { content: "▸"; color: var(--profile-accent); font-size: 9px; }
.design-snapshot[open] summary::before { content: "▾"; }
.design-snapshot summary > span { margin-right: auto; }
.design-snapshot summary b { color: #758198; font-family: var(--studio-mono); font-size: 8px; font-weight: 500; text-align: right; text-transform: none; letter-spacing: 0; }
.snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 0 9px 9px; }
.snapshot-item { position: relative; min-width: 0; padding: 7px 42px 7px 7px; border: 1px solid rgba(255,255,255,.045); border-radius: 6px; background: rgba(255,255,255,.018); }
.snapshot-item > span { display: block; overflow: hidden; color: #69758b; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.snapshot-item > strong { display: block; margin-top: 3px; overflow: hidden; color: #aeb7c7; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-item > small { position: absolute; top: 7px; right: 6px; color: #5f6a7f; font-family: var(--studio-mono); font-size: 7px; }
.snapshot-item.is-changed { border-color: rgba(var(--profile-accent-rgb), .25); background: rgba(var(--profile-accent-rgb), .055); }
.snapshot-item.is-changed > strong,
.snapshot-item.is-changed > small { color: var(--profile-accent); }
.snapshot-conditions { padding: 0 9px 9px; }
.snapshot-conditions > span { color: #69758b; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.snapshot-conditions > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.snapshot-conditions b { padding: 4px 5px; border-radius: 4px; color: #8793a8; background: rgba(255,255,255,.035); font-family: var(--studio-mono); font-size: 8px; font-weight: 500; }
.task-list { display: grid; gap: 7px; margin-top: 8px; }
.task-card { padding: 9px; border: 1px solid var(--studio-line); border-radius: 9px; background: rgba(255,255,255,.018); }
.task-card-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.task-card-head strong { font-size: 10px; }
.task-card-head span { color: var(--profile-accent); font-family: var(--studio-mono); font-size: 9px; }
.class-summary { margin: -1px 0 7px; color: #69758b; font-family: var(--studio-mono); font-size: 8px; line-height: 1.45; }
.metric-row { display: grid; grid-template-columns: 68px 1fr 52px; align-items: center; gap: 6px; margin-top: 6px; color: #7e899e; font-size: 9px; }
.metric-track { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.06); }
.metric-fill { height: 100%; border-radius: inherit; background: var(--profile-accent); box-shadow: 0 0 7px rgba(var(--profile-accent-rgb), .6); }
.metric-row b { color: #b9c1d0; font-family: var(--studio-mono); font-size: 9px; font-weight: 500; text-align: right; }
.result-note,
.error-card { margin-top: 8px; padding: 9px; border-radius: 8px; font-size: 10px; line-height: 1.5; }
.result-note { border: 1px solid var(--studio-line); color: #697489; background: rgba(0,0,0,.14); }
.error-card { border: 1px solid rgba(255,122,141,.28); color: #ffabb7; background: rgba(255,122,141,.06); }
.error-card strong { display: block; margin-bottom: 3px; color: var(--studio-red); font-family: var(--studio-mono); font-size: 10px; }
.candidate-detail h3 { margin: 7px 0 2px; font-size: 13px; }
.candidate-detail .smiles { display: block; max-height: 54px; margin: 8px 0; padding: 7px; overflow: auto; border-radius: 6px; color: #8995aa; background: rgba(0,0,0,.18); font-family: var(--studio-mono); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.paper-note { margin: 8px 0; padding-left: 8px; border-left: 2px solid var(--studio-amber); color: #9ba4b5; font-size: 10px; line-height: 1.5; }

@media (max-width: 1380px) {
  .studio-workspace { grid-template-columns: 270px minmax(480px, 1fr); }
  .studio-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; border-radius: 10px; }
  .studio-inspector .panel-heading { grid-column: 1 / -1; }
  .canvas-stage { flex-basis: 500px; }
}

@media (max-width: 900px) {
  .sensor-studio { padding: 22px 12px 38px; }
  .studio-hero { align-items: stretch; flex-direction: column; }
  .studio-hero-copy { min-width: 0; }
  .profile-switcher { min-width: 0; width: 100%; }
  .studio-status { grid-template-columns: auto 1fr; }
  .status-provenance { display: none; }
  .studio-workspace { grid-template-columns: 1fr; }
  .studio-controls,
  .studio-canvas-panel,
  .studio-inspector { border-radius: 12px; }
  .studio-inspector { grid-column: auto; grid-template-columns: 1fr; }
  .studio-inspector .panel-heading { grid-column: auto; }
  .catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .canvas-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .canvas-toolbar > div:first-child { flex-wrap: wrap; }
  .canvas-actions { width: 100%; padding-bottom: 2px; overflow-x: auto; }
  .toolbar-button { flex: 1; min-width: max-content; }
  .paper-figure-toolbar { align-items: flex-start; flex-direction: column; }
  .paper-figure-tabs { width: 100%; overflow-x: auto; }
  .paper-figure-tabs button:not(#closePaperFigure),
  .paper-figure-tabs a { flex: 1; min-width: max-content; }
  .node-inspector-head { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .studio-title-line { align-items: flex-start; flex-direction: column; }
  .profile-switcher { flex-direction: column; }
  .profile-button { width: 100%; }
  .studio-status { grid-template-columns: 1fr; }
  .status-track { display: none; }
  .field-grid.three { grid-template-columns: 1fr; }
  .field-grid.two { grid-template-columns: 1fr; }
  .canvas-stage { flex-basis: 430px; }
  .catalog-header { align-items: stretch; flex-direction: column; }
  .catalog-filters { min-width: 0; flex-direction: column; }
  .catalog-filters select { width: 100%; }
  .catalog-list { grid-template-columns: 1fr; }
  .canvas-hint { display: none; }
  .graph-legend { gap: 9px 12px; }
  .probability-matrix { grid-template-columns: minmax(31px, .65fr) repeat(4, minmax(34px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sensor-studio *, .sensor-studio *::before, .sensor-studio *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .001ms !important; }
}

/* Removable chips for the custom detect-target list. */
.chip-remove {
  margin-left: 5px;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: rgba(255, 255, 255, .08);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.chip-remove:hover { background: rgba(255, 255, 255, .18); }

/* Sensor Atlas: topology-only families with no model attached. */
.sensor-studio[data-profile="sensor-atlas"] {
  --profile-accent: var(--studio-amber);
  --profile-accent-rgb: 245, 201, 106;
}
.sensor-studio[data-profile="sensor-atlas"] .dte-legend-state,
.sensor-studio[data-profile="sensor-atlas"] .dte-edge-legend,
.sensor-studio[data-profile="sensor-atlas"] .pfas-edge-legend { display: none; }

.sensor-studio[data-profile="universal-atlas"] {
  --profile-accent: #6fd7ff;
  --profile-accent-rgb: 111, 215, 255;
}
.sensor-studio[data-profile="universal-atlas"] .dte-legend-state,
.sensor-studio[data-profile="universal-atlas"] .dte-edge-legend,
.sensor-studio[data-profile="universal-atlas"] .pfas-edge-legend { display: none; }
.illustration-legend {
  display: contents;
}
.sensor-studio:not([data-profile="universal-atlas"]) .illustration-legend { display: none; }
.universal-envelope {
  display: grid;
  gap: 8px;
  margin: 0;
}
.universal-envelope > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: start;
}
.universal-envelope dt {
  color: var(--studio-muted);
  font-family: var(--studio-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.universal-envelope dd {
  margin: 0;
  color: var(--studio-text);
  font-size: 10px;
  line-height: 1.45;
}
.preparation-callout {
  padding: 11px 12px;
  border: 1px dashed rgba(var(--profile-accent-rgb), .5);
  border-radius: 10px;
  background: rgba(var(--profile-accent-rgb), .06);
}
.preparation-callout strong {
  display: block;
  color: var(--profile-accent);
  font-family: var(--studio-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.preparation-callout small { display: block; margin-top: 6px; color: var(--studio-muted); font-size: 10px; line-height: 1.55; }