/* Minimal base styles until the UI gets its own design. */
:root { --bg: #fafafa; --fg: #1a1a1a; --muted: #666; --line: #ddd; --accent: #2b59c3; --error: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg: #161616; --fg: #eee; --muted: #999; --line: #333; --accent: #7aa2ff; --error: #ff8a80; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
.top { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); }
.top .brand { font-weight: 600; text-decoration: none; color: var(--fg); margin-right: auto; }
.top .who { color: var(--muted); }
.top form { margin: 0; }
main { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
button { font: inherit; padding: .4rem .9rem; cursor: pointer; }
.login { max-width: 22rem; margin: 3rem auto; display: grid; gap: .75rem; }
.login label { display: grid; gap: .25rem; }
.login input { font: inherit; padding: .4rem; }
.error { color: var(--error); }
.hint, .meta { color: var(--muted); }
.jobs { width: 100%; border-collapse: collapse; }
.jobs th, .jobs td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); }
.head { display: flex; align-items: center; justify-content: space-between; }
.button { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.job-form { display: grid; gap: 1rem; max-width: 40rem; }
.job-form label { display: block; font-weight: 600; }
.job-form input, .job-form select, .job-form textarea { width: 100%; font: inherit; padding: .4rem; }
.job-form .helptext { color: var(--muted); font-size: .9em; }
.errorlist { color: var(--error); margin: 0; padding-left: 1.2rem; }
.original { margin-top: 1rem; color: var(--muted); }
.switcher { display: flex; gap: .5rem; align-items: center; }
.player { display: grid; gap: .5rem; }
.player video { width: 100%; background: #000; aspect-ratio: 16 / 9; }
.player .scrub { width: 100%; }
.player .controls { display: flex; gap: .5rem; align-items: center; }
.player .timecode { font: 600 1.4rem/1 ui-monospace, monospace; margin-left: .5rem; }
.player .frame, .player .fps { color: var(--muted); font-family: ui-monospace, monospace; }
.versions { padding-left: 1.2rem; }
.approved { color: #2e7d32; font-weight: 600; }
.approve { margin: 0 0 1rem; }
.markers { position: relative; height: 10px; margin: 0 8px; }
.markers .marker { position: absolute; top: 0; height: 10px; min-width: 4px; background: #e0a100; border-radius: 2px; cursor: pointer; border: 0; padding: 0; }
.markers .marker.done { background: var(--muted); opacity: .5; }
.comments { margin-top: 2rem; }
.comment-form { display: grid; gap: .5rem; margin-bottom: 1rem; }
.comment-form textarea, .reply-form textarea { width: 100%; font: inherit; padding: .4rem; }
.range-buttons { display: flex; gap: .5rem; align-items: center; }
.comment-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.comment { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; }
.comment.done { opacity: .6; }
.comment:target { outline: 2px solid var(--accent); }
.comment-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.comment-head form { margin-left: auto; }
.comment .tc { font-family: ui-monospace, monospace; }
.reply { margin: .5rem 0 0 1.2rem; padding-left: .6rem; border-left: 2px solid var(--line); }
.reply-form { margin-top: .4rem; }