:root{--bg: #161616;--panel: #202020;--line: #333;--fg: #e6e6e6;--dim: #9a9a9a;--acc: #f2a33a;--ok: #34c759;--bad: #ff6b5e;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}#app{height:100%;display:flex;flex-direction:column}header{display:flex;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}.logo{font-weight:700;color:var(--acc)}.title{font-weight:600}.meta{color:var(--dim);flex:1}.live{display:flex;gap:8px;align-items:center}.who{color:var(--dim)}.drv{color:var(--acc)}main{flex:1;display:grid;grid-template-columns:200px 1fr 300px;min-height:0}aside{background:var(--panel);border-right:1px solid var(--line);overflow:auto}aside.side{border-right:0;border-left:1px solid var(--line);display:flex;flex-direction:column;padding:8px;gap:8px}.items{list-style:none;margin:0;padding:0}.items li{padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 8px}.items li.on{background:#2c2c2c;box-shadow:inset 3px 0 var(--acc)}.items li span{color:var(--dim);grid-column:1}.items li em{color:var(--dim);font-size:11px}.badge{width:10px;height:10px;border-radius:50%;grid-row:1;grid-column:2;align-self:center}.badge.approved{background:var(--ok)}.badge.changes{background:var(--bad)}.viewer{display:flex;flex-direction:column;min-width:0}.stage{flex:1;position:relative;overflow:hidden;background:#0b0b0b}.stage canvas{position:absolute;image-rendering:auto}.bar{display:flex;gap:6px;align-items:center;padding:6px 10px;border-top:1px solid var(--line);background:var(--panel)}.ruler{flex:1;accent-color:var(--acc)}.frame{font-variant-numeric:tabular-nums;color:var(--dim);min-width:120px}button{background:#2e2e2e;color:var(--fg);border:1px solid #444;border-radius:4px;padding:4px 10px;cursor:pointer;font:inherit}button:hover{background:#383838}button.on{border-color:var(--acc);color:var(--acc)}button[disabled]{opacity:.5;cursor:default}.vbtns{display:flex;gap:6px}.vbtns button{flex:1}.v-approve.on{border-color:var(--ok);color:var(--ok)}.v-changes.on{border-color:var(--bad);color:var(--bad)}.verdicts{color:var(--dim);font-size:12px;min-height:1em}.notes{list-style:none;margin:0;padding:0;flex:1;overflow:auto}.note{padding:6px 8px;border-bottom:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:48px 1fr;gap:0 6px}.note .fr{color:var(--acc);font-variant-numeric:tabular-nums;grid-row:span 2}.note .tx{grid-column:2;white-space:pre-wrap;word-break:break-word}.note.reply{padding-left:24px}.note.done .tx{color:var(--dim);text-decoration:line-through}.note-input{width:100%;min-height:64px;resize:vertical;background:#111;color:var(--fg);border:1px solid #444;border-radius:4px;padding:6px;font:inherit}.ask{margin:12vh auto;width:min(360px,calc(100% - 32px));display:flex;flex-direction:column;gap:10px;background:var(--panel);padding:20px;border-radius:8px;border:1px solid var(--line)}.ask h2{margin:0;color:var(--acc)}.ask input{padding:8px;background:#111;color:var(--fg);border:1px solid #444;border-radius:4px;font:inherit}.ask .err{color:var(--bad);margin:0;min-height:1em}.fatal{margin:20vh auto;max-width:480px;padding:0 16px;text-align:center;color:var(--dim);font-size:15px}@media (max-width: 800px){main{grid-template-columns:1fr;grid-template-rows:auto 55vh auto}aside{border:0;border-bottom:1px solid var(--line);max-height:30vh}aside.side{border-left:0}}
