:root { --ink: #1b1830; --muted: #6b6880; --line: #e7e5f0; --bg: #f7f6fb; --card: #fff; --accent: #7c4dff; --accent-soft: #efe9ff;
  --ok: #1a7f37; --bad: #c62828; --warn: #b26b00; --code: #f3f2f8; }
* { box-sizing: border-box; }
body { font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 24px; background: #17142b; position: sticky; top: 0; z-index: 5; }
nav a { color: #d9d4ff; font-weight: 500; } nav a:hover { color: #fff; text-decoration: none; }
nav .brand { color: #fff; font-weight: 800; letter-spacing: .2px; margin-right: 8px; } nav .brand i { color: #a98bff; font-style: normal; }
nav form.find { margin-left: auto; }
nav form.find input { width: 300px; max-width: 60vw; padding: 7px 12px; border-radius: 8px; border: 1px solid #3a3456; background: #221d3b; color: #fff; }
nav form.find input::placeholder { color: #8f88b5; }
main { max-width: 1120px; margin: 0 auto; padding: 24px; }
h1 { font-size: 24px; margin: 4px 0 6px; } h2 { font-size: 18px; margin: 32px 0 10px; } h3 { font-size: 16px; } h4 { font-size: 13.5px; margin: 14px 0 4px; color: #3a3653; }
p { margin: 6px 0; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 15px; vertical-align: 2px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #faf9fd; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: #fbfaff; }
pre { background: var(--code); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; max-height: 420px; }
input, select, textarea { font: inherit; padding: 6px 10px; border: 1px solid #cfcbe0; border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
button, .buttons a { font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid #d8d3ea; background: #fff; color: var(--ink); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button[type=submit] { background: var(--accent); border-color: var(--accent); color: #fff; } button[type=submit]:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
button:disabled { opacity: .45; cursor: not-allowed; }
.error { color: var(--bad); } .warn { color: var(--warn); } .note { color: var(--muted); }
.status-done { color: var(--ok); } .status-failed, .status-error { color: var(--bad); } .status-running, .status-queued { color: var(--warn); } .status-cancelled, .status-pending { color: #888; }
details.step { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
details.step[open] { box-shadow: 0 2px 10px rgba(30, 20, 80, .06); }
details.step summary { cursor: pointer; } details.step summary b { display: inline-block; min-width: 110px; }
details.step.error { border-color: #f3c2c2; } details.step.running { border-color: #f1d9a6; }
details.step .metrics { color: var(--muted); font-size: 12.5px; word-break: break-word; }
.videos { display: flex; gap: 16px; flex-wrap: wrap; }
.videos video { max-height: 480px; max-width: 100%; background: #000; border-radius: 10px; }
.hook { font-size: 20px; margin: 8px 0 16px; } .hook small { color: var(--muted); font-size: 14px; }
.transcript { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.transcript p { margin: 6px 0; }
.transcript s { text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.cut-warm-up { background: #ffe0b2; } .cut-false-start { background: #ffcdd2; } .cut-repeated-take { background: #e1bee7; }
.cut-padding { background: #f0f4c3; } .cut-meta { background: #bbdefb; } .cut-tangent { background: #c8e6c9; }
.cut-filler { background: #eeeeee; } .cut-restart { background: #d7ccc8; }
.label { color: #8a86a0; font-size: 11px; }
.thumbs button { font-size: 13px; padding: 1px 6px; border: 1px solid #d8d3ea; background: #fff; border-radius: 6px; cursor: pointer; }
.thumbs button.on { background: #ffe082; border-color: #c9a227; }
.legend span { padding: 0 6px; margin-right: 6px; border-radius: 3px; }
form.feedback label { display: block; margin: 4px 0; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.sheet { max-width: 420px; display: block; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }
.strip { position: relative; margin: 12px 0 4px; border: 1px solid #d6d2e6; border-radius: 6px; background: #fbfaff; }
.strip .row { position: relative; height: 14px; }
.strip .row.shots { height: 22px; }
.strip .shot { position: absolute; top: 0; height: 100%; box-sizing: border-box; border-right: 1px solid #fff; cursor: pointer; }
.shot.speaker { background: #cfd8dc; } .shot.black { background: #000; }
.legend .shot { position: static; display: inline-block; padding: 0 6px; height: auto; border: 0; }
.legend .shot.black { color: #fff; }
.strip .mark { position: absolute; top: -2px; font-size: 12px; line-height: 14px; transform: translateX(-50%); cursor: pointer; }
.strip .cap { position: absolute; top: 2px; height: 10px; background: #90caf9; border-right: 1px solid #fff; box-sizing: border-box; }
.strip .tick { position: absolute; top: 1px; width: 2px; height: 12px; background: #e65100; }
table.decisions td { font-size: 14px; }
/* the login page: one centred card */
form.login { max-width: 360px; margin: 12vh auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(30, 20, 80, .08); }
form.login h1 { margin-top: 0; } form.login input[type=password] { width: 100%; margin: 8px 0 14px; } form.login button { width: 100%; }
@media (max-width: 700px) { main { padding: 16px; } nav { padding: 10px 16px; } nav form.find { margin-left: 0; width: 100%; } nav form.find input { width: 100%; max-width: none; } }