:root {
  --bg-color: #1e1e1e; --fg-color: #d4d4d4; --input-bg: #2a2d2e;
  --border-color: #444; --accent-color: #0e639c; --green: #4caf50;
  --yellow: #ffd700; --red: #f44336; --code-bg: #111; --code-fg: #0f0;
}
body { background: var(--bg-color); color: var(--fg-color); font-family: sans-serif; padding: 2em; max-width: 1200px; margin: auto; }
fieldset { border: 1px solid var(--border-color); padding: 1em; margin-bottom: 1.5em; border-radius: 8px; }
legend { font-weight: bold; font-size: 1.2em; color: var(--accent-color); padding: 0 0.5em; }
label, select, input, textarea { display: block; width: 100%; box-sizing: border-box; }
label { font-weight: bold; margin-top: 1em; margin-bottom: 0.3em; }
small { color: #888; display: block; margin-top: 0.2em; }
.row { display: flex; gap: 1em; align-items: flex-end; }
.row > div { flex: 1; }
input, select {
  border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg);
  color: var(--fg-color); padding: 0.5em; font-size: 1em;
}
textarea {
  height: 150px; background: var(--code-bg); color: var(--code-fg); font-family: monospace;
  padding: 0.5em; border-radius: 6px; border: 1px solid var(--border-color);
}
textarea.small-textarea { height: 80px; font-family: sans-serif; color: var(--fg-color); background: var(--input-bg); }
select[multiple] { height: 130px; }
button {
  background: var(--accent-color); color: white; border: none; padding: 0.8em 1.2em;
  border-radius: 6px; font-size: 1em; cursor: pointer; margin-top: 1em;
}
button:hover { background: #1f88d1; }
.dropdown-group { display: flex; gap: 1em; align-items: center; margin-top: 0.5em; flex-wrap: wrap; }
.dropdown-group > * { margin-top: 0; }
.warnings { border: 1px solid var(--yellow); background: #3e391b; color: var(--yellow); padding: 1em; margin-bottom: 1em; border-radius: 4px; }
.warnings ul { margin: 0; padding-left: 1.5em; }
.explanation { border: 1px solid var(--accent-color); background: #1c2a36; padding: 1em; margin-bottom: 1em; border-radius: 4px; }
#run-list-container { margin-top: 2em; }
#run-list { list-style: none; padding: 0; background: var(--input-bg); border-radius: 4px; max-height: 300px; overflow-y: auto; }
#run-list li { padding: 0.5em 1em; border-bottom: 1px solid var(--border-color); }
#run-list li:last-child { border-bottom: none; }
#run-list .new-timer-run { color: var(--green); font-weight: bold; }
#run-list .comparison-run { color: var(--yellow); }
#comparison-container { margin-top: 2em; }
