:root {
  --bg: #EEF1F4; --surface: #FFFFFF; --ink: #14202E; --muted: #566273; --line: #D9DFE6;
  --primary: #1D4A86; --soft: #E9EFF6; --deep: #0F2A4D; --deep-ink: #B8C6D9;
  --warn-bg: #FBF1E1; --warn-ink: #8A5A12; --ok-ink: #1E7A46; --bad-ink: #B03A0A;
  --r: 12px; --rs: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.6 -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.num { font-family: "DIN Alternate", "Bahnschrift", -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font-family: inherit; font-size: 14px; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid #E5A823; outline-offset: 2px;
}
a { color: var(--primary); text-decoration: none; }

header.top {
  height: 56px; background: var(--deep); color: #fff;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
header.top .name { font-size: 16px; font-weight: 700; }
header.top .sub, header.top .right { color: var(--deep-ink); font-size: 14px; }
header.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
header.top button {
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: var(--rs); padding: 7px 14px;
}

.wrap { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.panel { background: var(--surface); border-radius: var(--r); padding: 16px; }
.col-list { flex: 0 0 240px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.col-play { flex: 0 0 380px; display: flex; flex-direction: column; gap: 14px; }
.col-edit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.vitem {
  display: flex; gap: 10px; align-items: center; text-align: left;
  border: 1px solid var(--line); border-radius: var(--rs); padding: 10px; background: #fff; width: 100%;
}
.vitem.on { border-color: var(--primary); background: var(--soft); }
.vitem .thumb { flex: 0 0 34px; height: 46px; border-radius: 4px; object-fit: cover; background: #C9D3DE; }
.vitem .t { font-size: 13px; font-weight: 600; line-height: 1.35; }
.vitem .s { font-size: 11px; color: var(--muted); }
.vitem .s.pending { color: var(--warn-ink); }
.vitem .s.done { color: var(--ok-ink); }

video.player { width: 100%; max-height: 360px; border-radius: var(--rs); background: #0B0F12; }
.frames { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.frames button { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; line-height: 0; position: relative; }
.frames button.on { border-color: var(--primary); }
.frames img { width: 100%; height: 58px; object-fit: cover; border-radius: 2px; }
.frames .tick {
  position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 11px; line-height: 16px; text-align: center;
}

h2.sec { margin: 0; font-size: 15px; font-weight: 700; }
.hint { font-size: 12px; color: var(--muted); }
.lines { border: 1px solid var(--line); border-radius: var(--rs); padding: 8px; max-height: 320px; overflow: auto; }
.line { display: flex; gap: 10px; align-items: flex-start; padding: 4px 6px; border-radius: 4px; }
.line:hover { background: #F6F8FA; }
.line .t { flex: 0 0 42px; font-size: 12px; color: var(--muted); padding-top: 3px; background: none; border: 0; text-align: left; }
.line .txt { flex: 1 1 auto; font-size: 14px; line-height: 1.6; border: 0; border-radius: 4px; padding: 2px 4px; }
.line .txt:hover { background: #EEF1F4; }
.line.edited .txt { box-shadow: inset 0 -2px 0 rgba(30,122,70,.35); }

.fact { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #F6F8FA; border-radius: var(--rs); }
.fact .kind { flex: 0 0 56px; font-size: 13px; color: var(--muted); }
.fact .val { flex: 1 1 auto; font-size: 14px; font-weight: 600; border: 0; background: none; padding: 4px; border-radius: 4px; }
.fact .val:hover { background: #E9EFF6; }
.fact.done { background: #E4F0E9; }
.fact.dropped { opacity: .5; }

.btn { border: 1px solid var(--line); background: #fff; border-radius: var(--rs); padding: 8px 14px; }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.btn.warn { background: #fff; color: var(--warn-ink); border-color: var(--warn-ink); }
.btn.big { padding: 12px 18px; font-size: 15px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.chip { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.chip.on { background: var(--soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--deep); color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 14px;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

.center { max-width: 720px; margin: 60px auto; }