/* OmniPhysVerifier Studio — dark, dense, aligned to portal design system.
   All rules scoped to #opv-app so nothing leaks when Bootstrap is on the page. */

/* ---- layout root ---- */
html { height: 100%; margin: 0; padding: 0; }

#opv-app {
  --bg:        #070a12;
  --bg1:       #0e131f;
  --bg2:       #111725;
  --bg3:       #1a2035;
  --line:      rgba(151,169,206,.15);
  --line2:     rgba(151,169,206,.28);
  --fg:        #f5f7fc;
  --fg-dim:    #8d97ad;
  --fg-dimmer: rgba(141,151,173,.55);
  --accent:    #55e6d1;
  --accent-rgb:85, 230, 209;
  --accent-bg: rgba(85,230,209,.07);
  --violet:    #a892ff;
  --amber:     #f5c96a;

  --v-supported:       #5fb37e;
  --v-warning:         #c8a03a;
  --v-inconclusive:    #8a7fc4;
  --v-out_of_scope:    #b07a4a;
  --v-contradicted:    #c05a5a;
  --v-budget_exceeded: #7f8794;
  --v-not_dispatched:  #4a5058;

  --tie:      rgba(85,230,209,.12);
  --tie-edge: rgba(85,230,209,.28);
  --mono: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;
  --row-h: 22px;

  /* studio design-system tokens */
  --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;

  box-sizing: border-box;
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.45 var(--studio-mono, "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#opv-app *, #opv-app *::before, #opv-app *::after { box-sizing: border-box; }

#opv-app a { color: var(--accent); text-decoration: none; }
#opv-app a:hover { text-decoration: underline; }

/* ---- portal home link ---- */
#opv-app .opv-home-link {
  display: flex; align-items: center; padding: 0 12px;
  color: var(--violet); font-size: 11px; letter-spacing: .03em;
  border-right: 1px solid var(--line); white-space: nowrap;
  text-decoration: none; opacity: .85; transition: opacity .15s;
}
#opv-app .opv-home-link:hover { opacity: 1; text-decoration: none; }

/* ---- onboarding strip ---- */
#opv-onboard {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 7px 16px;
  background: rgba(168,146,255,.12);
  border-bottom: 1px solid rgba(168,146,255,.35);
  color: var(--fg-dim); font-size: 12px;
}
#opv-onboard b { color: var(--accent); font-weight: 600; }
#opv-onboard button {
  background: none; border: none; color: var(--fg-dimmer);
  cursor: pointer; font: inherit; font-size: 14px; padding: 0 4px; line-height: 1;
}
#opv-onboard button:hover { color: var(--fg); }

/* ---- header ---- */
#opv-app header {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto; min-height: 34px;
}
#opv-app header .brand {
  padding: 6px 14px; color: var(--fg-dim); white-space: nowrap;
  border-right: 1px solid var(--line); letter-spacing: .04em;
  display: flex; align-items: center;
}
#opv-app header .brand b { color: var(--accent); font-weight: 700; text-shadow: 0 0 14px rgba(85,230,209,.6); }

#opv-app nav { display: flex; }
#opv-app nav button {
  background: none; border: 0; border-right: 1px solid var(--line);
  color: var(--fg-dim); font: inherit; padding: 6px 18px; cursor: pointer;
  font-size: 12px; letter-spacing: .03em;
}
#opv-app nav button:hover { background: var(--bg2); color: var(--fg); }
#opv-app nav button.on {
  background: var(--bg3); color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
#opv-app header .spacer { flex: 1 1 auto; }
#opv-app header .modeflag {
  padding: 6px 12px; border-left: 1px solid var(--line);
  font-weight: 700; cursor: pointer; font-size: 11px; letter-spacing: .06em;
  display: flex; align-items: center;
  color: #070a12; background: var(--amber);
}
#opv-app header .modeflag.live { background: var(--accent); color: #070a12; }

/* ---- job strip ---- */
#opv-app #jobstrip {
  flex: 0 0 auto; display: none; gap: 8px; align-items: center;
  padding: 3px 12px; background: var(--bg2); border-bottom: 1px solid var(--line);
  overflow-x: auto; white-space: nowrap;
}
#opv-app #jobstrip.on { display: flex; }
#opv-app #jobstrip .job {
  border: 1px solid var(--line2); background: var(--bg1); padding: 2px 8px;
  cursor: pointer; color: var(--fg-dim); border-radius: 4px;
}
#opv-app #jobstrip .job:hover { border-color: var(--accent); color: var(--fg); }
#opv-app #jobstrip .job b { color: var(--fg); font-weight: 600; }
#opv-app #jobstrip .job.running b { color: var(--accent); }
#opv-app #jobstrip .job.done  b { color: var(--v-supported); }
#opv-app #jobstrip .job.failed b { color: var(--v-contradicted); }
#opv-app #jobstrip .clr { color: var(--fg-dimmer); cursor: pointer; margin-left: auto; font-size: 11px; }

/* ---- layout ---- */
#opv-app main { flex: 1 1 auto; overflow: hidden; }
#opv-app .tab { display: none !important; height: 100%; }
#opv-app .tab.on { display: flex !important; }

#opv-app .pane-l {
  flex: 0 0 300px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg1);
}
#opv-app .pane-m { flex: 1 1 auto; overflow: auto; padding: 0; }
#opv-app .pane-r {
  flex: 0 0 400px; border-left: 1px solid var(--line);
  overflow: auto; background: var(--bg1);
}
#opv-app .split { width: 100%; height: 100%; overflow: hidden; }
#opv-app .scroll { overflow: auto; flex: 1 1 auto; }

/* ---- filter / list ---- */
#opv-app .filterbar {
  padding: 6px; border-bottom: 1px solid var(--line); display: flex; gap: 4px;
}
#opv-app .filterbar input,
#opv-app .filterbar select { flex: 1 1 auto; min-width: 0; }

#opv-app ul.list { list-style: none; margin: 0; padding: 0; }
#opv-app ul.list li {
  padding: 4px 10px; cursor: pointer; border-bottom: 1px solid rgba(151,169,206,.06);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#opv-app ul.list li:hover { background: var(--bg2); }
#opv-app ul.list li.on {
  background: var(--accent-bg);
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--fg);
}
#opv-app ul.list li .sub { color: var(--fg-dimmer); font-size: 11px; }

/* ---- form controls ---- */
#opv-app input[type=text],
#opv-app input[type=number],
#opv-app textarea,
#opv-app select {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line2);
  font: inherit; padding: 3px 6px; border-radius: 4px;
}
#opv-app input:focus,
#opv-app textarea:focus,
#opv-app select:focus {
  outline: 1px solid var(--accent); border-color: var(--accent);
}
#opv-app textarea { width: 100%; resize: vertical; line-height: 1.4; }

#opv-app button.btn {
  background: var(--bg3); color: var(--fg);
  border: 1px solid var(--line2);
  font: inherit; padding: 4px 14px; cursor: pointer; border-radius: 4px;
}
#opv-app button.btn:hover { background: var(--bg2); border-color: var(--accent); }
#opv-app button.btn.primary {
  background: var(--violet); border-color: var(--violet); color: #fff;
  box-shadow: 0 4px 16px rgba(168,146,255,.3);
}
#opv-app button.btn.primary:hover { background: #baa8ff; border-color: #baa8ff; box-shadow: 0 6px 20px rgba(168,146,255,.45); }
#opv-app button.mini { padding: 0 6px; font-size: 11px; }

#opv-app .toolbar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg1);
}
#opv-app .toolbar label { color: var(--fg-dim); }

/* ---- sections ---- */
#opv-app .sect { padding: 10px 14px; border-bottom: 1px solid var(--line); }
#opv-app .sect > h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-dimmer);
}
#opv-app .prose { color: var(--fg-dim); white-space: pre-wrap; line-height: 1.6; }
#opv-app .prose.tight { max-height: 8.5em; overflow: auto; }
#opv-app .muted { color: var(--fg-dimmer); }
#opv-app .warnnote { color: var(--v-warning); }

/* ---- parameter form ---- */
#opv-app .pform {
  display: grid; grid-template-columns: minmax(150px,1fr) 130px;
  gap: 2px 8px; align-items: baseline;
}
#opv-app .pform .pname { color: var(--fg); overflow-wrap: anywhere; }
#opv-app .pform .pname .u { color: var(--fg-dimmer); }
#opv-app .pform .phelp {
  grid-column: 1 / -1; color: var(--fg-dimmer); font-size: 11px;
  padding: 0 0 5px; border-bottom: 1px solid rgba(151,169,206,.08); margin-bottom: 4px;
}
#opv-app .pform input { width: 100%; text-align: right; }
#opv-app .pform input.edited { border-color: var(--v-warning); color: #f0d79a; }
#opv-app .pform input.outside { box-shadow: inset 0 0 0 1px var(--v-out_of_scope); }

/* ---- tables ---- */
#opv-app table.grid { border-collapse: collapse; width: 100%; font-size: 12px; }
#opv-app table.grid th,
#opv-app table.grid td {
  text-align: left; padding: 3px 8px 3px 0;
  border-bottom: 1px solid rgba(151,169,206,.07);
  vertical-align: top;
}
#opv-app table.grid th {
  color: var(--fg-dimmer); font-weight: 600; position: sticky; top: 0;
  background: var(--bg1); z-index: 1; letter-spacing: .05em; font-size: 11px;
  text-transform: uppercase;
}
#opv-app table.grid td.num {
  text-align: right; font-variant-numeric: tabular-nums; padding-right: 12px;
}
#opv-app table.grid tr:hover td { background: rgba(85,230,209,.04); }

/* ---- verdict chips ---- */
#opv-app .chip {
  display: inline-block; padding: 0 7px;
  border: 1px solid currentColor; border-radius: 3px;
  font-size: 11px; line-height: 17px; white-space: nowrap; letter-spacing: .03em;
}
#opv-app .chip.supported       { color: var(--v-supported); }
#opv-app .chip.warning         { color: var(--v-warning); }
#opv-app .chip.inconclusive    { color: var(--v-inconclusive); }
#opv-app .chip.out_of_scope    { color: var(--v-out_of_scope); }
#opv-app .chip.contradicted    { color: var(--v-contradicted); }
#opv-app .chip.budget_exceeded { color: var(--v-budget_exceeded); }
#opv-app .chip.not_dispatched  { color: var(--v-not_dispatched); }
#opv-app .chip.passed          { color: var(--v-supported); }
#opv-app .chip.failed          { color: var(--v-contradicted); }
#opv-app .chip.not_applicable  { color: var(--fg-dimmer); }

/* ---- census strip ---- */
#opv-app .census {
  display: flex; height: 14px; width: 100%;
  border: 1px solid var(--line2); border-radius: 2px; overflow: hidden;
}
#opv-app .census i { display: block; height: 100%; }
#opv-app .census-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
  font-size: 11px; color: var(--fg-dim);
}
#opv-app .census-legend b { font-weight: 600; }
#opv-app .census-legend .sw {
  display: inline-block; width: 8px; height: 8px; margin-right: 4px;
}

/* ---- ranking ---- */
#opv-app .rank-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

#opv-app .rank-axis {
  position: relative; height: 30px; flex: 0 0 auto;
  border-bottom: 1px solid var(--line2); background: var(--bg1);
}
#opv-app .rank-axis .tick {
  position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line);
}
#opv-app .rank-axis .tick span {
  position: absolute; top: 2px; left: 3px; transform: translateX(-50%);
  font-size: 10px; color: var(--fg-dimmer); white-space: nowrap;
}
#opv-app .rank-axis .axname {
  position: absolute; right: 6px; bottom: 2px; font-size: 11px; color: var(--fg-dim);
}
#opv-app .rank-axis .better {
  position: absolute; left: 6px; bottom: 2px; font-size: 10px; color: var(--fg-dimmer);
}

#opv-app .rank-head {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dimmer);
  background: var(--bg1); border-bottom: 1px solid var(--line); padding: 2px 0;
}

#opv-app .rank-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; position: relative; }
#opv-app .rank-spacer { position: relative; width: 100%; }
#opv-app .rank-rows { position: absolute; left: 0; right: 0; top: 0; }

#opv-app .rrow { display: flex; align-items: center; height: var(--row-h); white-space: nowrap; }
#opv-app .rrow:hover { background: rgba(85,230,209,.04); }
#opv-app .rrow.sel { background: var(--accent-bg); }
#opv-app .rrow .c-rank  { flex: 0 0 46px; text-align: right; padding-right: 8px; color: var(--fg-dimmer); font-variant-numeric: tabular-nums; }
#opv-app .rrow .c-label { flex: 0 0 210px; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
#opv-app .rrow .c-verd  { flex: 0 0 34px; text-align: center; }
#opv-app .rrow .c-val   { flex: 0 0 130px; text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
#opv-app .rrow .c-plot  { flex: 1 1 auto; position: relative; height: var(--row-h); min-width: 120px; }

#opv-app .mk-whisk { position: absolute; top: 50%; height: 1px; background: var(--fg-dim); }
#opv-app .mk-cap   { position: absolute; top: 50%; width: 1px; height: 9px; margin-top: -4px; background: var(--fg-dim); }
#opv-app .mk-dot   { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; margin-left: -3.5px; border-radius: 50%; background: var(--fg); }
#opv-app .mk-dot.hollow { background: var(--bg); border: 1px solid var(--fg-dim); }
#opv-app .mk-nointerval { position: absolute; top: 50%; margin-top: -5px; margin-left: -5px; width: 10px; height: 10px; border-left: 1px dashed var(--fg-dimmer); border-right: 1px dashed var(--fg-dimmer); }
#opv-app .mk-band  { position: absolute; top: 1px; bottom: 1px; background: var(--tie); opacity: .55; }
#opv-app .mk-incumbent { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--v-warning); }

#opv-app .rrow.refused .mk-dot { background: transparent; border: 1px dashed var(--fg-dimmer); }
#opv-app .rrow.refused .c-val  { color: var(--fg-dimmer); }
#opv-app .rrow .c-val s { color: var(--fg-dimmer); }
#opv-app .rrow .c-gate {
  flex: 0 0 300px; overflow: hidden; text-overflow: ellipsis;
  color: var(--v-out_of_scope); padding-left: 8px;
}

#opv-app .crow {
  display: flex; align-items: center; height: var(--row-h);
  background: var(--bg2); border-top: 1px solid var(--line);
  color: var(--fg-dim); font-size: 11px; white-space: nowrap; overflow: hidden;
}
#opv-app .crow .c-rank { flex: 0 0 46px; text-align: right; padding-right: 8px; color: var(--fg); font-variant-numeric: tabular-nums; }
#opv-app .crow .lbl { padding-right: 10px; }
#opv-app .crow .tiebadge { color: var(--v-warning); border: 1px solid var(--v-warning); padding: 0 5px; margin-right: 8px; font-size: 10px; }
#opv-app .crow .chained { color: var(--v-inconclusive); border-color: var(--v-inconclusive); }
#opv-app .crow .exp { cursor: pointer; color: var(--accent); padding: 0 6px; }

#opv-app .fence {
  display: flex; align-items: center; gap: 8px; height: 24px;
  white-space: nowrap; overflow: hidden;
  border-top: 2px solid var(--v-out_of_scope); border-bottom: 1px solid var(--line);
  background: rgba(176,122,74,.08); color: var(--v-out_of_scope);
  font-size: 11px; padding: 0 10px;
}

/* ---- sweep cards ---- */
#opv-app .cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
  gap: 10px; padding: 12px;
}
#opv-app .card {
  border: 1px solid var(--line); background: var(--bg1); padding: 10px 12px;
  cursor: pointer; border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
#opv-app .card:hover { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px rgba(85,230,209,.15), 0 8px 24px rgba(0,0,0,.2); }
#opv-app .card h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--fg); }
#opv-app .card .meta { color: var(--fg-dimmer); font-size: 11px; margin-bottom: 6px; }

/* ---- misc ---- */
#opv-app .kv {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 1px 10px; font-size: 12px;
}
#opv-app .kv dt { color: var(--fg-dimmer); }
#opv-app .kv dd { margin: 0; overflow-wrap: anywhere; }

#opv-app .hashline { font-size: 11px; color: var(--fg-dimmer); overflow-wrap: anywhere; }
#opv-app .hashline b { color: var(--fg-dim); font-weight: 400; }

#opv-app .gatebar {
  display: inline-flex; width: 60px; height: 8px;
  border: 1px solid var(--line2); vertical-align: middle; border-radius: 2px; overflow: hidden;
}
#opv-app .gatebar i { display: block; height: 100%; }

#opv-app .empty { padding: 40px; color: var(--fg-dimmer); text-align: center; }
#opv-app .sparkline { display: block; height: 28px; width: 220px; }

/* ---- structures tab ---- */
#opv-app .st-wrap { display: flex; width: 100%; height: 100%; overflow: hidden; }
#opv-app .st-left {
  width: 330px; flex: 0 0 330px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
#opv-app .st-right { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }

#opv-app .st-sources {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 6px;
  border-bottom: 1px solid var(--line);
}
#opv-app .st-src {
  background: var(--bg1); border: 1px solid var(--line);
  color: var(--fg-dim); font: inherit; font-size: 11px;
  padding: 2px 8px; cursor: pointer; border-radius: 3px;
}
#opv-app .st-src:hover { border-color: var(--line2); color: var(--fg); }
#opv-app .st-src.on {
  background: var(--accent-bg); border-color: var(--accent); color: var(--fg);
}
#opv-app .st-src b { font-weight: 700; }

#opv-app .st-search {
  margin: 6px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line2); font: inherit; font-size: 12px;
  padding: 4px 7px; border-radius: 4px;
}
#opv-app .st-count { padding: 0 8px 4px; font-size: 11px; color: var(--fg-dimmer); }

#opv-app .st-list { flex: 1 1 auto; overflow-y: auto; }
#opv-app .st-row {
  padding: 4px 9px; border-bottom: 1px solid rgba(151,169,206,.06); cursor: pointer;
}
#opv-app .st-row:hover { background: var(--bg2); }
#opv-app .st-row.on { background: var(--accent-bg); }
#opv-app .st-row-t { font-size: 12px; display: flex; gap: 5px; align-items: baseline; }
#opv-app .st-row-s { font-size: 10.5px; color: var(--fg-dimmer); }

#opv-app .st-side {
  font-style: normal; font-size: 10px; padding: 0 4px; border: 1px solid;
  flex: 0 0 auto; text-transform: uppercase; letter-spacing: .04em; border-radius: 2px;
}
#opv-app .st-side.output     { color: var(--v-supported); border-color: var(--v-supported); }
#opv-app .st-side.standalone { color: var(--accent); border-color: var(--accent); }
#opv-app .st-side.handoff    { color: var(--v-inconclusive); border-color: var(--v-inconclusive); }
#opv-app .st-side.input      { color: var(--v-warning); border-color: var(--v-warning); }
#opv-app .st-side.unknown    { color: var(--fg-dimmer); border-color: var(--line2); }

#opv-app .st-view { flex: 1 1 auto; min-height: 240px; position: relative; }
#opv-app .st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#opv-app .st-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 5px 10px; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--bg1);
  font-size: 11.5px; min-height: 26px;
}
#opv-app .st-grp { display: inline-flex; align-items: center; gap: 5px; }
#opv-app .st-lab { display: inline-flex; align-items: center; gap: 3px; color: var(--fg-dim); }
#opv-app .st-lab select,
#opv-app .st-rep {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line2); font: inherit; font-size: 11px; border-radius: 3px;
}
#opv-app .st-rep:disabled { color: var(--fg-dimmer); border-color: var(--line); }
#opv-app .st-btn {
  background: var(--bg2); color: var(--fg-dim); border: 1px solid var(--line2);
  font: inherit; font-size: 11px; padding: 1px 8px; cursor: pointer; border-radius: 3px;
}
#opv-app .st-btn:hover { border-color: var(--accent); color: var(--fg); }

#opv-app .st-meta {
  flex: 0 0 auto; max-height: 44%; overflow-y: auto;
  padding: 7px 10px; font-size: 11.5px;
}
#opv-app .st-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px;
}
#opv-app .st-fmt {
  border: 1px solid var(--line2); color: var(--accent); padding: 0 5px;
  font-size: 10.5px; border-radius: 2px;
}
#opv-app .st-what { color: var(--fg-dim); margin-bottom: 3px; }
#opv-app .st-note { color: var(--v-warning); margin: 2px 0; }
#opv-app .st-conv { color: var(--fg-dimmer); margin: 2px 0; }
#opv-app .st-kv { display: flex; gap: 8px; margin: 1px 0; }
#opv-app .st-kv > i { font-style: normal; color: var(--fg-dimmer); flex: 0 0 74px; }
#opv-app .st-prov > div { display: flex; gap: 8px; }
#opv-app .st-prov i { font-style: normal; color: var(--fg-dimmer); flex: 0 0 120px; }
#opv-app .st-prov span { overflow-wrap: anywhere; }
#opv-app .st-frags { display: flex; flex-wrap: wrap; gap: 10px; }
#opv-app .st-frag { display: inline-flex; align-items: center; gap: 4px; }
#opv-app .st-frag i { width: 9px; height: 9px; display: inline-block; }
#opv-app .st-det { margin: 3px 0; }
#opv-app .st-det summary { cursor: pointer; color: var(--fg-dimmer); }
#opv-app .st-pre {
  background: var(--bg); border: 1px solid var(--line); margin: 3px 0;
  padding: 6px 8px; max-height: 260px; overflow: auto; font-size: 10.5px;
  white-space: pre; border-radius: 4px;
}
#opv-app .st-ref { margin-top: 4px; }
#opv-app .st-err { color: var(--v-contradicted); white-space: pre-wrap; padding: 10px; }
#opv-app .st-refusal {
  border-left: 2px solid var(--v-out_of_scope); padding: 4px 9px;
  display: flex; flex-direction: column; gap: 3px;
}
#opv-app .st-refusal b { color: var(--v-out_of_scope); }
#opv-app .mono { font-family: var(--studio-mono, "SFMono-Regular", Consolas, "Liberation Mono", monospace); }

#opv-app #structure-view { height: 100%; }

#opv-app .err { color: var(--v-contradicted); white-space: pre-wrap; padding: 10px; }

#opv-app .pill {
  border: 1px solid var(--line2); padding: 0 7px; border-radius: 3px;
  font-size: 11px; color: var(--fg-dim);
}