/* Minimal dark theme UI, no external deps */
:root{
  --bg:#11141a; --panel:#1a1d24; --panel-2:#171a20; --border:#2a2f3a; --text:#e8e8ea; --muted:#9aa0a6;
  --accent:#3da5ff; --accent-2:#8a2be2; --success:#4caf50; --danger:#ff5252; --warn:#ffb300;
  --btn-bg:#252a33; --btn-hover:#2f3642; --btn-active:#3b4454;
}
html,body{background:var(--bg);color:var(--text);} 

body.light, html.light{
  --bg:#f5f7fb; --panel:#ffffff; --panel-2:#f1f3f7; --border:#d6dbe6; --text:#1a1d24; --muted:#5f6673;
  --accent:#2a7ef0; --accent-2:#6a4df0; --success:#2e7d32; --danger:#d32f2f; --warn:#f9a825;
  --btn-bg:#ffffff; --btn-hover:#f1f3f7; --btn-active:#e6eaf2;
}
header, #toolbar, #status, #segments, #timelineWrap{background:var(--panel); border-color:var(--border);} 

a{color:var(--accent)}
button, select, input[type="text"], input[type="number"], input[type="range"], input[type="search"]{
  background:var(--btn-bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px; outline:none;
}
button:hover{ background:var(--btn-hover); }
button:active{ background:var(--btn-active); }
button.danger{ color:#fff; background: #9d2d2d; border-color:#7a2222; }
button.danger:hover{ background:#b13636; }

/* Toggle pill */
.pill{background:var(--panel-2); border-color:var(--border); color:var(--muted);}
.pill input{vertical-align:middle; margin-right:6px;}

#timelineWrap{box-shadow: inset 0 0 0 1px var(--border);} /* legacy container name, harmless */

#status{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-top:8px; }

.seg{ background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:6px; }
.seg .color{ box-shadow: 0 0 0 1px var(--border); }

.note{ color:var(--muted); }

/* Progress bar */
.progress { position: relative; width: 100%; height: 8px; background: var(--panel-2); border-radius: 6px; overflow: hidden; border:1px solid var(--border); }
.progress > div { position: absolute; left:0; top:0; height:100%; width:0; background: linear-gradient(90deg, #3da5ff, #8a2be2); transition: width .2s ease; }
.progress-row { display:flex; align-items:center; gap:8px; margin-top:8px; color: var(--muted); }