:root { --bg:#ffffff; --fg:#1f2328; --muted:#8a8f98; --line:#ededed; --accent:#0b62c4;
           --hover:#f0f0f0; --guide:#e6e6e6; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#1e1e1e; --fg:#cccccc; --muted:#8a8f98; --line:#2a2a2a; --accent:#4daafc;
             --hover:#2a2d2e; --guide:#333333; } }
  * { box-sizing:border-box; }
  body { margin:0; color:var(--fg); background:var(--bg);
          font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
  header { padding:10px 12px 6px; }
  h1 { margin:0; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
        color:var(--muted); }
  .meta { color:var(--muted); font-size:11px; margin-top:2px; }
  input#f { width:calc(100% - 16px); margin:6px 8px 4px; padding:4px 8px; font-size:12px;
             border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--fg); }
  input#f:focus { outline:1px solid var(--accent); border-color:var(--accent); }
  /* two-pane: explorer on the left, generated dashboard on the right */
  .app { display:flex; height:100vh; }
  .side { width:460px; min-width:280px; max-width:70%; overflow:auto; resize:horizontal;
           border-right:1px solid var(--line); }
  .main { flex:1; position:relative; display:flex; flex-direction:column; overflow:hidden; background:#fff; }
  #tabbar { display:flex; gap:2px; flex:0 0 auto; overflow-x:auto; background:var(--hover);
             border-bottom:1px solid var(--line); }
  #tabbar:empty { display:none; }
  #tabbar .tab { padding:6px 12px; font-size:12px; cursor:pointer; border:0; background:transparent;
                  color:var(--fg); white-space:nowrap; border-bottom:2px solid transparent; }
  #tabbar .tab.active { border-bottom-color:var(--accent); font-weight:600; }
  #panes { flex:1; position:relative; overflow:hidden; }
  .pane { position:absolute; inset:0; display:none; }
  .pane.active { display:block; }
  .pane iframe { width:100%; height:100%; border:0; }
  .pane .loading, #empty2 { position:absolute; inset:0; display:flex; align-items:center;
             justify-content:center; color:var(--muted); font-size:13px; }
  nav { padding:2px 0 60px; }
  .runrow { display:flex; align-items:flex-start; }
  .runrow > input.sel { flex:0 0 auto; margin:3px 4px 0 2px; cursor:pointer; accent-color:var(--accent); }
  .runrow > details.run { flex:1; min-width:0; }

  /* tree rows: no boxes, tight, hover highlight, rotating chevron, indent guides */
  details { margin:0; }
  summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:4px;
             height:22px; padding:0 8px 0 0; white-space:nowrap; user-select:none; }
  summary::-webkit-details-marker { display:none; }
  summary:hover { background:var(--hover); }
  /* chevron for expandable rows (sections + runs) */
  summary::before { content:""; flex:0 0 auto; width:10px; height:10px; margin-left:2px;
                     background:currentColor; color:var(--muted); transition:transform .1s;
                     clip-path:polygon(30% 12%, 30% 88%, 78% 50%); }
  details[open] > summary::before { transform:rotate(90deg); }
  /* indentation + guide lines: each nested level shifts right and draws a guide */
  details.sec > *:not(summary), details.run > *:not(summary) {
    margin-left:10px; border-left:1px solid var(--guide); }
  .lbl { font-weight:400; }
  .sec > summary > .lbl { text-transform:none; }
  .tag { display:none; }                       /* drop the pill tags -- explorer has no type labels */
  .c { margin-left:auto; color:var(--muted); font-size:11px; opacity:0; }
  summary:hover .c { opacity:1; }

  /* run row */
  details.run > summary { gap:8px; }
  .rn { overflow:hidden; text-overflow:ellipsis; }
  .rmeta { color:var(--muted); font-size:11px; font-family:ui-monospace,Menlo,monospace; }
  .who { margin-left:auto; color:var(--muted); font-size:11px; }

  /* expanded run detail */
  .detail { padding:2px 10px 8px 22px; border-left:1px solid var(--guide); margin-left:10px; }
  .fld { display:flex; gap:10px; padding:3px 0; align-items:baseline; }
  .fld .k { flex:0 0 100px; color:var(--muted); font-size:11px; }
  .fld .v { flex:1; word-break:break-all; font-size:12px; }
  .note { color:var(--muted); }
  table.cfg { border-collapse:collapse; }
  table.cfg td { padding:1px 12px 1px 0; font-size:11.5px; font-family:ui-monospace,Menlo,monospace; }
  table.cfg td:first-child { color:var(--muted); }
  .none { color:var(--muted); font-size:11.5px; }
  .empty { color:var(--muted); padding:30px; text-align:center; }