body{font-family:Heebo,system-ui,Arial,sans-serif;margin:0;background:#f3f1ec;color:#222}
header{background:#1a3d6d;color:#fff;padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}header a{color:#fff}
#status{margin-inline-start:auto;font-size:14px}#status.bad{color:#ffb4b4;font-weight:bold}
.wrap{display:flex;gap:16px;padding:12px;align-items:flex-start}.vid{position:sticky;top:8px;width:360px;flex:none}video{width:100%;aspect-ratio:9/16;background:#000;border-radius:10px}
.tr{flex:1;background:#fff;border-radius:10px;padding:8px;max-height:calc(100vh - 90px);overflow:auto}
.seg{display:flex;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;line-height:1.6;border:2px solid transparent}.seg:hover{background:#f4f6fb}
.seg .ts{color:#1a3d6d;font-size:12px;min-width:44px;font-variant-numeric:tabular-nums;padding-top:3px}.seg.cur{border-color:#1a3d6d}
.seg.m{background:#fff2a8}.seg.sys{background:#d7ecff}.seg.m.sys{background:#c8f0c8}.seg .note{display:block;font-size:13px;color:#a40}
.seg .act{margin-inline-start:auto;display:flex;gap:4px;align-items:flex-start}button{font:inherit;cursor:pointer;border:1px solid #bbb;background:#fff;border-radius:6px;padding:2px 8px}
.btns{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}.part{background:#eee;padding:4px 8px;margin:6px 0;border-radius:6px;font-size:13px;color:#555}
.legend span{padding:0 6px;border-radius:4px;margin-inline-end:6px}
@media(max-width:760px){.wrap{display:block}.vid{width:100%;max-width:420px;margin:auto;position:sticky;top:0;z-index:2;background:#f3f1ec}video{aspect-ratio:auto;max-height:42vh}.tr{max-height:none}}
.card{background:#fff;border-radius:10px;padding:10px;margin:10px 0;display:flex;gap:10px;align-items:flex-start;border:2px solid #ddd}.card.ch{border-color:#2a2}.card.drag{opacity:.4}
.card .h{cursor:grab;font-size:22px;color:#999;user-select:none}.card .b{flex:1}.card textarea{width:100%;font:inherit;min-height:34px}