body { font: 14px/1.4 system-ui, sans-serif; margin: 0; display: flex; height: 100vh; }
#form { width: 430px; padding: 16px; overflow-y: auto; overflow-x: hidden; border-right: 1px solid #ddd; }
#log  { flex: 1; background: #0b0b0b; color: #d6d6d6; padding: 12px;
        overflow: auto; white-space: pre-wrap; font: 12px/1.35 ui-monospace, monospace; }
h2 { margin: 0 0 8px; }
label { display: block; margin: 6px 0 2px; font-weight: 600; overflow-wrap: anywhere; }
label.chk { font-weight: 500; }
input, select { width: 100%; min-width: 0; box-sizing: border-box; padding: 4px 6px; }
input[type=checkbox] { width: auto; min-width: 0; }
fieldset { border: 1px solid #ddd; border-radius: 6px; margin: 12px 0; padding: 8px 12px 12px; }
legend { font-weight: 700; padding: 0 6px; color: #333; }
legend label { cursor: pointer; }
legend input { margin-right: 4px; vertical-align: -1px; }
fieldset.off > :not(legend) { opacity: .4; }
.subhead { font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
           color: #1565c0; margin: 12px 0 2px; padding-bottom: 2px; border-bottom: 1px solid #e3eefc; }
.subhead:first-of-type { margin-top: 4px; }
#presets, #savedPresets { margin: 8px 0 0; }
#presets b, #savedPresets b { font-size: 12px; }
#presets button, #savedPresets button { margin: 4px 4px 0 0; padding: 4px 9px; font-size: 12px; font-weight: 600; }
#savedPresets select { width: auto; max-width: 150px; padding: 3px 6px; font-size: 12px; vertical-align: middle; }
.row { display: flex; gap: 8px; align-items: flex-end; }
.row > div { flex: 1; min-width: 0; }
.hint { font-weight: 400; font-size: 12px; color: #888; }
.hidden { display: none; }
/* changed-from-default highlight (amber, distinct from blue theme / .err / .ok) */
label.changed { color: #e8590c; }
label.changed::after { content: " ●"; font-size: 9px; vertical-align: 1px; color: #e8590c; }
input.changed, select.changed { border-color: #e8590c; background: #fff4e6; }
/* hover help popup (floating, body-level) */
#tooltip { position: fixed; display: none; z-index: 1000; max-width: 280px; pointer-events: none;
           background: #212529; color: #fff; padding: 6px 8px; border-radius: 4px;
           font-size: 12px; line-height: 1.35; white-space: pre-line;
           box-shadow: 0 2px 8px rgba(0,0,0,.3); }
button { margin-top: 12px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
#browse { margin-top: 0; padding: 5px 10px; }
#status { margin-top: 8px; font-weight: 700; }
.err { color: #c92a2a; } .ok { color: #2b8a3e; }
#viewerBox { display: none; margin-top: 10px; padding: 8px; background: #e7f5ff;
             border: 1px solid #74c0fc; border-radius: 6px; }
#viewerBox a { font-weight: 700; }
/* folder-picker modal */
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.4);
         display: none; align-items: center; justify-content: center; z-index: 10; }
#modalBox { background: #fff; width: 540px; max-height: 72vh; display: flex;
            flex-direction: column; border-radius: 8px; padding: 16px; }
#mPath { font: 12px ui-monospace, monospace; word-break: break-all; margin: 6px 0;
         color: #333; background: #f1f3f5; padding: 6px; border-radius: 4px; }
#mList { flex: 1; overflow: auto; border: 1px solid #eee; border-radius: 6px; min-height: 120px; }
.mItem { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #f3f3f3; }
.mItem:hover { background: #f1f3f5; }
.mEmpty { padding: 10px; color: #aaa; }
.mbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.mbtns button { margin-top: 0; }
/* pipeline tab switcher */
#pipelineTabs { display: flex; gap: 6px; margin-bottom: 10px; }
#pipelineTabs button { padding: 6px 12px; border: 1px solid #adb5bd; border-radius: 6px;
                       background: #f1f3f5; cursor: pointer; }
#pipelineTabs button.active { background: #1971c2; color: #fff; border-color: #1971c2; }
/* datasets/runs browser panel */
#datasetsPanel { position: fixed; right: 12px; bottom: 12px; width: 520px;
  max-height: 70vh; overflow: auto; background: #1b1b1b; border: 1px solid #444;
  border-radius: 8px; padding: 10px; z-index: 50; }
#datasetsHeader { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
#datasetsHeader b { flex: 1; }
.dsCard { border-top: 1px solid #333; padding: 6px 0; }
.dsTitle { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dsLabel { background: #111; border: 1px solid #444; color: #ddd; padding: 2px 4px; width: 140px; }
.dsMuted { color: #888; font-size: 11px; }
.dsRuns, .dsArts { margin-left: 18px; }
.dsRunHead { cursor: pointer; padding: 3px 0; display: flex; gap: 6px; align-items: center; }
.dsArt { margin-left: 18px; font-size: 12px; }
.dsBadge { padding: 1px 6px; border-radius: 4px; font-size: 10px; background: #333; }
.dsStatus-done { background: #1f5130; } .dsStatus-running { background: #1f3a51; }
.dsStatus-partial { background: #514a1f; } .dsStatus-failed { background: #511f1f; }
.dsStatus-empty { background: #333; }
.dsToggle { background: none; border: none; color: #ccc; cursor: pointer; }