/* Opsdeck — developer & ops workbench. Scoped under .od-app; the only root rule targets the mount (.uwapp-root + app
   class), never the body, which carries the app class too. Slate neutrals with a signal-blue accent; light + dark. */
.uwapp-root.uwapp-opsdeck { min-height: 0; }

.od-app {
  --od-accent: #0b6bcb;
  --od-accent-ink: #0a5bb0;
  --od-accent-hover: #0a5bb0;
  --od-on-accent: #ffffff;
  --od-accent-soft: #e6effa;
  --od-bg: #f1f4f8;
  --od-panel: #ffffff;
  --od-panel-2: #f6f8fb;
  --od-ink: #0f172a;
  --od-ink-2: #334155;
  --od-muted: #475569;
  --od-line: #dde3ea;
  --od-line-2: #94a3b8;
  --od-control: #64748b;
  --od-focus: #b45309;
  --od-code-bg: #f3f6fa;
  --od-crit-bg: #ffe4e6; --od-crit-ink: #9f1239;
  --od-high-bg: #ffedd5; --od-high-ink: #9a3412;
  --od-med-bg: #fef9c3; --od-med-ink: #854d0e;
  --od-low-bg: #dbeafe; --od-low-ink: #1e40af;
  --od-info-bg: #e9eef4; --od-info-ink: #334155;
  --od-good-bg: #dcfce7; --od-good-ink: #166534;
  --od-bad: #b91c1c;
  --od-shadow: 0 10px 30px rgba(15, 23, 42, .14);
  --od-nav-w: 206px;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--od-bg);
  color: var(--od-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}
.od-app[data-theme='dark'] {
  --od-accent: #60a5fa;
  --od-accent-ink: #93c5fd;
  --od-accent-hover: #93c5fd;
  --od-on-accent: #0f172a;
  --od-accent-soft: #0c2346;
  --od-bg: #0b1120;
  --od-panel: #111a2e;
  --od-panel-2: #16213a;
  --od-ink: #e2e8f0;
  --od-ink-2: #cbd5e1;
  --od-muted: #a5b4c8;
  --od-line: #26334d;
  --od-line-2: #64748b;
  --od-control: #94a3b8;
  --od-focus: #fbbf24;
  --od-code-bg: #0e1729;
  --od-crit-bg: #3b0a17; --od-crit-ink: #fda4af;
  --od-high-bg: #3a1a06; --od-high-ink: #fdba74;
  --od-med-bg: #332b05; --od-med-ink: #fde047;
  --od-low-bg: #0c2346; --od-low-ink: #93c5fd;
  --od-info-bg: #1b2740; --od-info-ink: #cbd5e1;
  --od-good-bg: #052e16; --od-good-ink: #86efac;
  --od-bad: #fca5a5;
  --od-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Platform element defaults (buttons, tables, links, code) leak into the workspace: reset them inside the app. */
.od-app button { font: inherit; font-size: 14px; font-weight: 600; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; width: auto; min-height: 0; }
.od-app button:hover { background: none; }
.od-app button:disabled, .od-app button[aria-disabled='true'] { cursor: not-allowed; opacity: .55; }
.od-app a { color: var(--od-accent-ink); }
.od-app :is(input, select, textarea) { font: inherit; color: inherit; }
.od-app h1, .od-app h2, .od-app h3, .od-app h4, .od-app h5 { margin: 0; line-height: 1.25; color: var(--od-ink); }
.od-app p { margin: 0; }
.od-app ul, .od-app ol { margin: 0; }
.od-app table { border-collapse: collapse; width: 100%; margin: 0; font-size: 13.5px; }
.od-app :is(th, td) { text-align: start; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--od-line); }
.od-app thead th { background: var(--od-panel-2); color: var(--od-ink-2); font-weight: 650; white-space: nowrap; }
.od-app tbody th { font-weight: 600; color: var(--od-ink); background: none; }
.od-app kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 6px; border: 1px solid var(--od-line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--od-panel-2); color: var(--od-ink); }
.od-app code, .od-app pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--od-code-bg); color: var(--od-ink); }
.od-app code { padding: 0 4px; border-radius: 4px; }
.od-app :focus-visible { outline: 3px solid var(--od-focus); outline-offset: 2px; }
.od-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.od-app [hidden] { display: none !important; }
.od-ico { flex: none; }
.od-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.od-muted { color: var(--od-muted); }
.od-bad { color: var(--od-bad); font-weight: 600; }

/* ---------------------------------------------------------------- top bar */
.od-top { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--od-panel); border-bottom: 1px solid var(--od-line); min-width: 0; flex: none; }
.od-menubar { display: flex; gap: 2px; flex: none; }
.od-menuwrap { position: relative; }
.od-app .od-menubtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border-radius: 7px; font-weight: 600; color: var(--od-ink); white-space: nowrap; }
.od-app .od-menubtn:hover, .od-app .od-menubtn[aria-expanded='true'] { background: var(--od-panel-2); box-shadow: inset 0 0 0 1px var(--od-line); }
.od-compact-menu { display: none; }
.od-top.od-compact .od-menubar { display: none; }
.od-top.od-compact .od-compact-menu { display: block; }
.od-top.od-compact2 .od-addbtn span, .od-top.od-compact2 .od-runall span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.od-name { flex: 0 1 280px; min-width: 70px; height: 34px; padding: 4px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--od-ink); font-weight: 700; font-size: 15px; text-overflow: ellipsis; }
.od-name:hover { border-color: var(--od-line); }
.od-name:focus { border-color: var(--od-control); background: var(--od-panel); }
.od-grow { flex: 1 1 0; min-width: 0; }
.od-app .od-ibtn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 4px; border-radius: 7px; color: var(--od-ink); flex: none; }
.od-app .od-ibtn:hover:not(:disabled) { background: var(--od-panel-2); box-shadow: inset 0 0 0 1px var(--od-line); }

.od-menu { position: absolute; z-index: 60; inset-block-start: calc(100% + 4px); inset-inline-start: 0; min-width: 260px; max-height: min(70vh, 560px); overflow-y: auto; padding: 5px; background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 10px; box-shadow: var(--od-shadow); }
.od-app .od-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 5px 9px; border-radius: 6px; text-align: start; font-weight: 500; color: var(--od-ink); }
.od-app .od-menu-item:hover:not(:disabled), .od-app .od-menu-item:focus { background: var(--od-accent-soft); outline: none; }
.od-app .od-menu-item:focus-visible { outline: 2px solid var(--od-focus); outline-offset: -2px; }
.od-menu-ico { display: inline-flex; width: 16px; justify-content: center; color: var(--od-muted); }
.od-menu-label { flex: 1; }
.od-menu-key { color: var(--od-muted); font-size: 12px; white-space: nowrap; }
.od-menu-sep { height: 1px; margin: 5px 4px; background: var(--od-line); }
.od-menu-heading { padding: 6px 9px 2px; font-size: 12px; font-weight: 700; color: var(--od-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------- buttons */
.od-app .od-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--od-line-2); background: var(--od-panel); color: var(--od-ink); font-weight: 600; white-space: nowrap; max-width: 100%; }
@media (max-width: 760px) { .od-app .od-btn { white-space: normal; text-align: start; } }
.od-app .od-btn:hover:not(:disabled) { border-color: var(--od-accent); background: var(--od-accent-soft); }
.od-app .od-btn-primary { background: var(--od-accent); border-color: var(--od-accent); color: var(--od-on-accent); }
.od-app .od-btn-primary:hover:not(:disabled) { background: var(--od-accent-hover); border-color: var(--od-accent-hover); color: var(--od-on-accent); }
.od-app .od-btn-ghost { border-color: var(--od-line); background: transparent; }
.od-app .od-btn-danger { background: var(--od-bad); border-color: var(--od-bad); color: #fff; }
.od-app[data-theme='dark'] .od-btn-danger { color: #0f172a; }
.od-app .od-btn-sm { min-height: 28px; padding: 3px 9px; font-size: 13px; }
.od-app .od-btn-link { border: 0; background: none; padding: 2px 0; min-height: 24px; color: var(--od-accent-ink); text-decoration: underline; text-underline-offset: 2px; white-space: normal; text-align: start; justify-content: flex-start; justify-self: start; }
.od-app .od-btn-link:hover:not(:disabled) { background: none; color: var(--od-ink); }

/* ---------------------------------------------------------------- hint, body, nav, main */
.od-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: var(--od-low-bg); color: var(--od-low-ink); border-bottom: 1px solid var(--od-line); flex: none; }
.od-hint p { flex: 1 1 280px; }
.od-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--od-nav-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.od-nav { background: var(--od-panel); border-inline-end: 1px solid var(--od-line); overflow-y: auto; padding: 10px 8px; min-height: 0; }
.od-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.od-app .od-navbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; border-radius: 8px; color: var(--od-ink-2); font-weight: 600; text-align: start; position: relative; }
.od-app .od-navbtn:hover { background: var(--od-panel-2); color: var(--od-ink); }
.od-app .od-navbtn[aria-current='page'] { background: var(--od-accent-soft); color: var(--od-accent-ink); box-shadow: inset 3px 0 0 var(--od-accent); }
.od-app[dir='rtl'] .od-navbtn[aria-current='page'] { box-shadow: inset -3px 0 0 var(--od-accent); }
.od-navlabel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.od-navbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--od-info-bg); color: var(--od-info-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.od-navbadge-bad { background: var(--od-crit-bg); color: var(--od-crit-ink); }
.od-app .od-main:focus { outline: none; }
.od-main { position: relative; min-height: 0; overflow-y: auto; padding: 18px clamp(12px, 2.4vw, 30px) 40px; outline: none; scroll-padding-top: 12px; }
.od-section { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.od-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.od-sechead h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.od-lede { margin-top: 4px; max-width: 80ch; color: var(--od-muted); }
.od-sechead-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- cards, kpis, columns */
.od-card { position: relative; background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.od-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.od-card-title { font-size: 15.5px; font-weight: 750; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.od-card-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.od-card-hero { padding: 22px; }
.od-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.od-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.od-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.od-kpi { background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; border-block-start: 4px solid var(--od-line-2); }
.od-kpi-label { color: var(--od-muted); font-weight: 600; font-size: 13px; }
.od-kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.od-kpi-note { color: var(--od-muted); font-size: 13px; }
.od-kpi-good { border-block-start-color: #15803d; }
.od-kpi-bad { border-block-start-color: #be123c; }
.od-kpi-warn { border-block-start-color: #c2410c; }
.od-app[data-theme='dark'] .od-kpi-good { border-block-start-color: #4ade80; }
.od-app[data-theme='dark'] .od-kpi-bad { border-block-start-color: #fb7185; }
.od-app[data-theme='dark'] .od-kpi-warn { border-block-start-color: #fb923c; }
.od-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.od-grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; }
.od-grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.od-grid5 { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px 14px; }

/* ---------------------------------------------------------------- chips */
.od-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--od-info-bg); color: var(--od-info-ink); line-height: 1.5; }
.od-chip-good { background: var(--od-good-bg); color: var(--od-good-ink); }
.od-chip-bad, .od-chip-critical { background: var(--od-crit-bg); color: var(--od-crit-ink); }
.od-chip-warn, .od-chip-high { background: var(--od-high-bg); color: var(--od-high-ink); }
.od-chip-medium { background: var(--od-med-bg); color: var(--od-med-ink); }
.od-chip-low, .od-chip-info { background: var(--od-low-bg); color: var(--od-low-ink); }
.od-chip-muted { background: var(--od-info-bg); color: var(--od-info-ink); }
.od-sev { min-width: 72px; justify-content: center; }
.od-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--od-high-bg); color: var(--od-high-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- findings */
.od-findings { list-style: none; padding: 0; display: grid; gap: 8px; }
.od-finding { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--od-line); border-radius: 10px; background: var(--od-panel); border-inline-start: 4px solid var(--od-line-2); }
.od-finding-critical { border-inline-start-color: #be123c; }
.od-finding-high { border-inline-start-color: #c2410c; }
.od-finding-medium { border-inline-start-color: #ca8a04; }
.od-finding-low { border-inline-start-color: #0b6bcb; }
.od-finding-done { opacity: .78; }
.od-finding-done .od-finding-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.od-finding-title { font-weight: 650; overflow-wrap: anywhere; line-height: 1.35; }
.od-app .od-finding-src { font-size: 13px; min-height: 22px; }
.od-finding-more > summary { font-size: 13px; }
.od-finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--od-muted); font-size: 13px; margin-top: 2px; }
.od-subject { background: var(--od-code-bg); padding: 0 5px; border-radius: 4px; overflow-wrap: anywhere; max-width: 100%; }
.od-finding-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.od-tri { min-width: 150px; }
.od-finding-more { margin-top: 6px; }
.od-finding-more p { margin-top: 6px; color: var(--od-ink-2); overflow-wrap: anywhere; }
.od-fix { padding: 6px 9px; background: var(--od-panel-2); border-radius: 7px; }
.od-sevline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }

/* ---------------------------------------------------------------- forms */
.od-field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.od-field > label { font-weight: 600; font-size: 13px; color: var(--od-ink-2); }
.od-field-btn { align-content: end; }
.od-filters .od-field-wide { grid-column: span 2; }
@media (max-width: 760px) { .od-filters .od-field-wide { grid-column: auto; } }
.od-input { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid var(--od-control); border-radius: 7px; background: var(--od-panel); color: var(--od-ink); box-sizing: border-box; }
.od-input:focus { border-color: var(--od-accent); }
.od-textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.od-textarea.od-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; tab-size: 4; }
.od-help { color: var(--od-muted); font-size: 12.5px; }
.od-check { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; font-weight: 500; cursor: pointer; }
.od-check input { width: 18px; height: 18px; accent-color: var(--od-accent); flex: none; }
.od-field-check { align-self: end; }
.od-fieldset { border: 1px solid var(--od-line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; min-width: 0; }
.od-fieldset legend { padding: 0 6px; font-weight: 700; font-size: 13px; color: var(--od-ink-2); }
.od-fieldset-b { border-style: dashed; border-color: var(--od-accent); }
.od-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; padding: 12px 14px; background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 12px; }
.od-details > summary { cursor: pointer; font-weight: 600; color: var(--od-accent-ink); min-height: 24px; display: list-item; }
.od-details[open] > summary { margin-bottom: 8px; }
.od-redrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.od-redinfo { display: inline-flex; align-items: center; gap: 6px; color: var(--od-muted); font-size: 13px; }
.od-detect { display: flex; align-items: center; gap: 6px; min-height: 22px; color: var(--od-accent-ink); font-weight: 600; }

/* ---------------------------------------------------------------- evidence / batch split */
.od-split { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 16px; align-items: start; }
.od-itemlist { position: sticky; top: 0; background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 12px; padding: 6px; max-height: calc(100dvh - 190px); overflow-y: auto; }
.od-itemlist ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.od-app .od-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border-radius: 8px; text-align: start; color: var(--od-ink); font-weight: 500; }
.od-app .od-item:hover { background: var(--od-panel-2); }
.od-app .od-item[aria-current='true'] { background: var(--od-accent-soft); box-shadow: inset 0 0 0 1px var(--od-accent); }
.od-item-main { flex: 1; min-width: 0; display: grid; }
.od-item-title { font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.od-item-sub { font-size: 12px; color: var(--od-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; }
.od-item-sub .od-chip { font-size: 11.5px; padding: 0 7px; }
.od-app .od-item[aria-current='true'] .od-item-sub { color: var(--od-ink-2); }
.od-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.od-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.od-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.od-summary { font-weight: 600; color: var(--od-ink); overflow-wrap: anywhere; }
.od-ranline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.od-warnlist li::marker { color: var(--od-high-ink); }

/* ---------------------------------------------------------------- tool presentation blocks */
.od-presentation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 4px; }
.od-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0; }
.od-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.od-block-title { font-size: 14px; font-weight: 700; color: var(--od-ink-2); }
.od-block-acts { display: inline-flex; gap: 6px; }
.od-block-dl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.od-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.od-metric { background: var(--od-panel-2); border: 1px solid var(--od-line); border-radius: 9px; padding: 8px 10px; }
.od-metric dt { font-size: 12.5px; color: var(--od-muted); font-weight: 600; }
.od-metric dd { margin: 2px 0 0; font-size: 18px; font-weight: 750; overflow-wrap: anywhere; }
.od-metric-em { border-color: var(--od-accent); }
.od-tablewrap { position: relative; overflow: auto; max-height: 520px; border: 1px solid var(--od-line); border-radius: 9px; }
.od-tablewrap table th, .od-tablewrap table td { overflow-wrap: break-word; }
.od-tablewrap table td { min-width: 4.5em; }
.od-tooltable td { font-size: 13px; }
.od-table td:has(.od-spark) { padding-block: 3px; }
.od-callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; background: var(--od-info-bg); color: var(--od-info-ink); }
.od-callout p { overflow-wrap: anywhere; }
.od-callout-bad { background: var(--od-crit-bg); color: var(--od-crit-ink); }
.od-callout-warn { background: var(--od-high-bg); color: var(--od-high-ink); }
.od-callout-good { background: var(--od-good-bg); color: var(--od-good-ink); }
.od-callout .od-list { margin-top: 6px; }
.od-callout .od-btn { margin-top: 8px; }
.od-callout code { background: transparent; color: inherit; }
.od-code { margin: 0; padding: 10px 12px; border-radius: 9px; overflow: auto; max-height: 360px; border: 1px solid var(--od-line); white-space: pre; }
.od-code code { padding: 0; background: transparent; }
.od-pre-plain { margin: 0; padding: 10px 12px; border-radius: 9px; white-space: pre-wrap; border: 1px solid var(--od-line); overflow-wrap: anywhere; }
.od-list { padding-inline-start: 20px; display: grid; gap: 3px; }
.od-list li { overflow-wrap: anywhere; }
.od-figure { margin: 0; }
.od-chart { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--od-line); }
.od-graphwrap { position: relative; overflow: auto; max-height: 520px; border-radius: 8px; }
.od-graphwrap .od-chart { max-width: none; }
.od-spark { display: block; }
.od-minicharts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.od-tl { list-style: none; padding: 0; display: grid; gap: 0; }
.od-tl li { display: grid; grid-template-columns: minmax(118px, auto) minmax(0, 1fr); column-gap: 12px; padding-block: 6px; padding-inline: 12px 0; border-inline-start: 3px solid var(--od-line-2); }
.od-tl li > :not(time) { grid-column: 2; }
.od-tl time { grid-row: span 3; font-size: 12.5px; color: var(--od-muted); white-space: nowrap; }
.od-tl-label { font-weight: 600; overflow-wrap: anywhere; }
.od-tl-bad { border-inline-start-color: #be123c !important; }
.od-tl-warn { border-inline-start-color: #c2410c !important; }
.od-tl-good { border-inline-start-color: #15803d !important; }
.od-tl-info { border-inline-start-color: #0b6bcb !important; }
.od-tl-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--od-muted); flex-wrap: wrap; }
.od-tlwrap { display: grid; gap: 14px; }
.od-tlday { background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 12px; padding: 12px 14px; }
.od-tlday-h { font-size: 14px; font-weight: 750; margin-bottom: 8px; }

/* ---------------------------------------------------------------- dashboard bits */
.od-wf { list-style: none; padding: 0; display: grid; gap: 4px; }
.od-wf li { display: flex; align-items: center; gap: 9px; padding: 5px 2px; border-bottom: 1px solid var(--od-line); }
.od-wf li:last-child { border-bottom: 0; }
.od-wf-main { flex: 1; min-width: 0; display: grid; }
.od-wf-main .od-muted { font-size: 12.5px; }
.od-kindgrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; color: var(--od-ink-2); }
.od-kindgrid li { display: flex; align-items: center; gap: 7px; }
.od-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 16px; color: var(--od-muted); background: var(--od-panel); border: 1px dashed var(--od-line-2); border-radius: 12px; }
.od-empty p { max-width: 64ch; }
.od-empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.od-card .od-empty { border: 0; padding: 14px 6px; }
.od-verdict { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 16px; font-weight: 700; background: var(--od-info-bg); color: var(--od-info-ink); }
.od-verdict-good { background: var(--od-good-bg); color: var(--od-good-ink); }
.od-verdict-bad { background: var(--od-crit-bg); color: var(--od-crit-ink); }
.od-verdict-warn { background: var(--od-high-bg); color: var(--od-high-ink); }
.od-gate td { vertical-align: middle; }
.od-gate select, .od-gate input[type='number'] { min-width: 110px; }

/* ---------------------------------------------------------------- editable grid (actions, participants) */
.od-gridbox { display: grid; gap: 8px; min-width: 0; }
.od-gridwrap { position: relative; overflow: auto; border: 1px solid var(--od-line); border-radius: 9px; }
.od-grid td { padding: 4px 5px; vertical-align: middle; }
.od-grid th { font-size: 12.5px; }
.od-grid .od-input { min-height: 32px; padding: 4px 7px; }
.od-w-wide { min-width: 260px; }
.od-w-fit { min-width: 110px; }
.od-w-act { width: 1%; }
.od-row-acts { white-space: nowrap; }
.od-row-acts .od-ibtn { min-width: 28px; min-height: 28px; }
.od-gridfoot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.od-empty { font-size: 14px; }

/* ---------------------------------------------------------------- dialogs, templates, toasts */
.od-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--od-line); border-radius: 14px; background: var(--od-panel); color: var(--od-ink); box-shadow: var(--od-shadow); }
.od-dialog-wide { width: min(880px, calc(100vw - 24px)); }
.od-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.od-dialog[open] { display: flex; flex-direction: column; }
.od-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 12px 8px; padding-inline: 18px 14px; border-bottom: 1px solid var(--od-line); }
.od-dialog-head h2 { font-size: 17px; font-weight: 750; }
.od-dialog-lede { padding: 8px 18px 0; color: var(--od-muted); }
.od-dialog-body { padding: 14px 18px; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
.od-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px 18px 14px; border-top: 1px solid var(--od-line); }
.od-tpls { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.od-app .od-tpl { display: grid; gap: 6px; width: 100%; height: 100%; text-align: start; padding: 12px 14px; border: 1px solid var(--od-line); border-radius: 10px; background: var(--od-panel); font-weight: 500; color: var(--od-ink); align-content: start; }
.od-app .od-tpl:hover { border-color: var(--od-accent); background: var(--od-accent-soft); }
.od-tpl strong { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.od-tpl span { color: var(--od-muted); font-size: 13px; }
.od-recent { list-style: none; padding: 0; display: grid; gap: 6px; }
.od-recent li { display: flex; gap: 6px; align-items: center; }
.od-app .od-recent-open { flex: 1; display: grid; text-align: start; padding: 8px 10px; border: 1px solid var(--od-line); border-radius: 9px; font-weight: 500; }
.od-app .od-recent-open:hover { border-color: var(--od-accent); }
.od-sharebox { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.od-toasts { position: absolute; z-index: 90; inset-block-end: 44px; inset-inline-end: 14px; display: grid; gap: 8px; max-width: min(440px, calc(100% - 28px)); pointer-events: none; }
.od-toast { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--od-ink); color: var(--od-panel); box-shadow: var(--od-shadow); font-weight: 500; pointer-events: auto; }
.od-toast-error { background: var(--od-crit-bg); color: var(--od-crit-ink); border: 1px solid currentColor; }
.od-toast-good { background: var(--od-good-bg); color: var(--od-good-ink); border: 1px solid currentColor; }

/* ---------------------------------------------------------------- status bar */
.od-status { display: flex; align-items: center; gap: 14px; padding: 5px 12px; min-height: 32px; background: var(--od-panel); border-top: 1px solid var(--od-line); color: var(--od-muted); font-size: 12.5px; flex: none; flex-wrap: wrap; }
.od-saveinfo, .od-netinfo { display: inline-flex; align-items: center; gap: 6px; }
.od-progress-wrap { flex: 1; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.od-progress { color: var(--od-ink-2); font-weight: 600; overflow-wrap: anywhere; }
.od-on, .od-off { width: 9px; height: 9px; border-radius: 50%; background: #15803d; display: inline-block; }
.od-off { background: #b91c1c; }

/* ---------------------------------------------------------------- report */
.od-report { background: var(--od-panel); border: 1px solid var(--od-line); border-radius: 12px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.od-report h3 { font-size: 20px; }
.od-report h4 { font-size: 16px; margin-bottom: 6px; }
.od-report h5 { font-size: 14px; margin-top: 10px; margin-bottom: 4px; }
.od-report section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.od-printroot { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .od-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .od-split { grid-template-columns: minmax(0, 1fr); }
  .od-itemlist { position: static; max-height: 260px; }
}
@media (max-width: 760px) {
  .od-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .od-nav { border-inline-end: 0; border-bottom: 1px solid var(--od-line); padding: 4px 6px; overflow-x: auto; overflow-y: hidden; }
  .od-nav ul { display: flex; gap: 2px; width: max-content; }
  .od-app .od-navbtn { min-height: 36px; padding: 6px 9px; gap: 6px; white-space: nowrap; }
  .od-app .od-navbtn[aria-current='page'], .od-app[dir='rtl'] .od-navbtn[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--od-accent); }
  .od-main { padding: 12px 10px 32px; }
  .od-sechead h2 { font-size: 19px; }
  .od-grid2 { grid-template-columns: minmax(0, 1fr); }
  .od-finding { grid-template-columns: minmax(0, 1fr); }
  .od-finding-acts { flex-direction: row; flex-wrap: wrap; }
  .od-name { flex-basis: 120px; }
  .od-status { gap: 8px; }
  .od-netinfo { display: none; }
  .od-tl li { grid-template-columns: minmax(0, 1fr); }
  .od-tl li > :not(time) { grid-column: 1; }
  .od-tl time { grid-row: auto; }
  .od-kpi-value { font-size: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .od-app .od-btn, .od-app .od-navbtn, .od-app .od-item { transition: background-color .12s, border-color .12s; }
}
@media (prefers-reduced-motion: reduce) {
  .od-app * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- print: only the report */
@media print {
  .uwapp-bar, .od-top, .od-hint, .od-body, .od-status, .od-toasts, .od-dialog { display: none !important; }
  .od-app { overflow: visible; background: #fff; color: #000; display: block; }
  .od-printroot { display: block; }
  .od-printroot .od-report { border: 0; padding: 0; }
  .od-printroot .od-tablewrap { max-height: none; overflow: visible; border: 0; }
  .od-printroot table { font-size: 11px; }
  .od-printroot h4 { break-after: avoid; }
  .od-printroot tr { break-inside: avoid; }
}