:root {
  --bg: #1e2227;
  --panel: #262b31;
  --panel2: #2e343b;
  --line: #3a414a;
  --text: #dfe4ea;
  --muted: #8d97a3;
  --accent: #4fa3e0;
  --accent2: #ffd23f;
  --danger: #e0565b;
  --bar: #16191d; --field: #1a1e22; --lane: var(--lane); --lane2: var(--lane2); --sep: var(--sep); --sel: #3a4149; --on-accent2: #222; --kbd: #14171a;
  --tl-h: 34vh;
  --ins-w: 330px;
  --font: "Yu Gothic UI", "Meiryo", "Hiragino Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.5 var(--font); overflow: hidden; }
body { display: grid; grid-template-rows: 44px 1fr 5px var(--tl-h) 24px; grid-template-columns: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
input[type=checkbox] { accent-color: var(--accent); }
input[type=color] { padding: 0; width: 28px; height: 24px; border: none; background: none; }
input.num { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
input.sk { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
input.tiny { width: 38px; text-align: center; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.pad { padding: 16px; }
.spacer { flex: 1; }
kbd { background: var(--kbd); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; font-family: Consolas, monospace; font-size: 11px; }

/* toolbar */
#toolbar { display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--bar); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 7px; margin-right: 4px; user-select: none; }
.brand-mark { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.title-input { width: 180px; background: transparent; border-color: transparent; font-weight: 600; }
.title-input:hover { border-color: var(--line); }
.tgroup { display: flex; gap: 2px; padding-left: 8px; border-left: 1px solid var(--line); }
.tgroup.right { margin-left: auto; border-left: none; }
.tbtn { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.tbtn:hover { background: var(--panel2); border-color: var(--line); }
.tgroup.right .tbtn:last-child { background: var(--accent); color: #fff; }

/* main */
#main { display: grid; grid-template-columns: 1fr 5px var(--ins-w); min-height: 0; }
.vsplit, .hsplit { background: var(--bar); }
.vsplit { cursor: col-resize; }
.hsplit { cursor: row-resize; }
.vsplit:hover, .hsplit:hover { background: var(--accent); }
#viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--viewer, color-mix(in srgb, var(--bg), #000 35%)); }
.view-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px; }
.view-canvas { display: block; background: #000; }
#viewer.camedit .view-canvas { cursor: move; box-shadow: 0 0 0 2px var(--accent2); }
.view-controls { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--panel); border-top: 1px solid var(--line); }
.pbtn { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; min-width: 34px; height: 28px; cursor: pointer; }
.pbtn:hover { border-color: var(--accent); }
.pbtn.big { min-width: 48px; background: var(--accent); color: #fff; border-color: var(--accent); }
.pbtn.cam { padding: 0 12px; }
.pbtn.cam.on { background: var(--accent2); color: var(--on-accent2); border-color: var(--accent2); font-weight: 700; }
.view-wrap { position: relative; }
.cam-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.cam-hint:empty { display: none; }
.view-controls { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.view-controls > * { flex-shrink: 0; }
.view-controls .view-time { flex-shrink: 1; }

/* inspector */
#inspector { background: var(--panel); border-left: 1px solid var(--line); overflow: auto; padding: 10px 14px 40px; }
#inspector h3 { margin: 10px 0 8px; font-size: 14px; color: var(--text); }
#inspector h4 { margin: 16px 0 6px; font-size: 12px; color: var(--accent2); border-top: 1px solid var(--line); padding-top: 10px; }
.field { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.flabel { width: 84px; flex: none; color: var(--muted); font-size: 12px; }
.row { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.row.gap { gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 5px 12px; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger:hover { border-color: var(--danger); color: #ffb3b5; }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn.on { background: var(--accent2); color: var(--on-accent2); border-color: var(--accent2); }
.btn.wide { width: 100%; margin-top: 10px; }
.x { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 4px; }
.x:hover { color: var(--danger); }
.help { padding-left: 18px; margin: 0; color: var(--muted); }
.help li { margin: 4px 0; }
.keys .kv-row { display: flex; gap: 10px; margin: 3px 0; align-items: center; }
.keys .kv-row kbd { min-width: 78px; text-align: center; }
.plist { display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; gap: 8px; align-items: center; padding: 4px; border: 1px solid transparent; border-radius: 4px; }
.prow.sel { border-color: var(--accent); background: rgba(79, 163, 224, .08); }
.pthumb { width: 96px; height: 54px; flex: none; background: #fff center/cover no-repeat; border-radius: 2px; cursor: pointer; }
.pinfo { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pmenu { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.pmenu button { background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; font-size: 11px; padding: 1px 5px; cursor: pointer; }
.pmenu button:hover { border-color: var(--accent); }
.klist { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.krow { display: flex; gap: 5px; align-items: center; padding: 2px 4px; border-radius: 3px; }
.krow.here { background: rgba(255, 210, 63, .15); }
.krow .go { background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; font-size: 11px; cursor: pointer; min-width: 38px; }
.krow .kv { width: 64px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.krow select { font-size: 11px; padding: 1px 2px; max-width: 104px; }
.txtref { width: 100%; background: #fff; border-radius: 2px; }
.chars { display: flex; flex-direction: column; gap: 4px; }
.char-row { display: flex; gap: 6px; align-items: center; }

/* timeline */
#timeline { background: var(--panel); display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); }
.tl-head { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-bottom: 1px solid var(--line); }
.tl-title { font-weight: 600; }
.zbtn { background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; padding: 0 8px; cursor: pointer; }
.tl-body { flex: 1; display: grid; grid-template-columns: 44px 1fr; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tl-labels { position: relative; background: var(--lane2); border-right: 1px solid var(--line); }
.tl-label { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; border-bottom: 1px solid #23282d; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
.tl-content { position: relative; }
.tl-ruler { position: absolute; top: 0; left: 0; background: var(--lane2); border-bottom: 1px solid var(--line); cursor: ew-resize; }
.tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: color-mix(in srgb, var(--lane2), var(--text) 28%); }
.tick.major { height: 12px; background: color-mix(in srgb, var(--lane2), var(--text) 50%); }
.tick.major span { position: absolute; left: 3px; bottom: 9px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.tl-lane { position: absolute; left: 0; background: var(--lane); border-bottom: 1px solid var(--sep); }
.tl-cut { position: absolute; border: 1px solid #0d0f11; border-radius: 3px; overflow: hidden; background: #fff; cursor: grab; }
.tl-cut.sel { outline: 3px solid var(--accent2); outline-offset: -2px; z-index: 2; }
.tl-cut.insel::after { content: ''; position: absolute; inset: 0; background: rgba(255, 210, 63, .22); pointer-events: none; }
.tl-cut.dim { filter: grayscale(.6) brightness(.55); }
.tl-range { position: absolute; border: 3px solid var(--accent2); border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 210, 63, .55); pointer-events: none; z-index: 4; }
.tl-rangetag { position: absolute; top: 2px; height: 21px; line-height: 21px; padding: 0 8px; background: var(--accent2); color: var(--on-accent2); border-radius: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 6; font-variant-numeric: tabular-nums; }
.tl-rangetag { overflow: visible; display: flex; align-items: center; gap: 4px; max-width: none !important; }
.tl-rbtn { pointer-events: auto; margin-left: 6px; height: 19px; padding: 0 9px; border: none; border-radius: 3px; background: #222; color: var(--accent2); font-size: 12px; font-weight: 700; cursor: pointer; }
@media (pointer: coarse) { .tl-rangetag { height: 30px; line-height: 30px; top: 1px; } .tl-rbtn { height: 26px; padding: 0 14px; font-size: 13px; } }
.tl-rknob { position: absolute; width: 22px; margin-left: -11px; z-index: 7; cursor: ew-resize; touch-action: none; }
.tl-rknob::before { content: ''; position: absolute; left: 7px; top: 50%; width: 8px; height: 34px; margin-top: -17px; background: var(--accent2); border: 2px solid #222; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
@media (pointer: coarse) { .tl-rknob { width: 34px; margin-left: -17px; } .tl-rknob::before { left: 11px; width: 10px; height: 44px; margin-top: -22px; } }
.tl-panel { position: absolute; top: 0; bottom: 0; background: #f2f2f2 center/cover no-repeat; border-right: 1px dashed rgba(0, 0, 0, .35); }
.tl-panel.sel { box-shadow: inset 0 -4px 0 var(--accent); }
.tl-panel .kf { position: absolute; bottom: 3px; width: 8px; height: 8px; margin-left: -4px; background: var(--accent2); transform: rotate(45deg); border: 1px solid #333; z-index: 3; }
.tl-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; }
.tl-handle.l { right: auto; left: 0; }
.tl-handle:hover { background: rgba(79, 163, 224, .55); }
.tl-cutlabel { position: absolute; left: 3px; top: 2px; background: rgba(20, 22, 26, .82); color: #fff; font-weight: 700; padding: 0 5px; border-radius: 2px; font-size: 12px; pointer-events: none; }
.tl-cutdur { position: absolute; right: 6px; bottom: 2px; background: rgba(20, 22, 26, .7); color: #fff; padding: 0 4px; border-radius: 2px; font-size: 10px; font-variant-numeric: tabular-nums; pointer-events: none; }
.tl-dlg { position: absolute; background: color-mix(in srgb, var(--panel), var(--text) 12%); color: var(--text); border: 1px solid color-mix(in srgb, var(--panel), var(--text) 24%); border-left: 4px solid; border-radius: 3px; display: flex; gap: 5px; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; font-size: 12px; cursor: grab; }
.tl-dlg.sel { border-color: var(--accent2); background: var(--sel); z-index: 2; }
.tl-dlg.cross { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); }
.tl-dlg .spk { font-weight: 700; }
.tl-dlg.snd { background: color-mix(in srgb, var(--panel), var(--text) 7%); border-color: color-mix(in srgb, var(--panel), var(--text) 18%); border-left-color: var(--muted) !important; color: var(--muted); font-style: italic; }
.tl-dlg .sndtag { font-style: normal; font-weight: 700; font-size: 10px; color: #222; background: #9aa6b2; border-radius: 3px; padding: 0 4px; line-height: 15px; }
.lines-spk.snd { color: #9aa6b2; }
.tl-dlg .txt { overflow: hidden; text-overflow: ellipsis; }
.tl-dlg .h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.tl-dlg .h.l { left: 0; } .tl-dlg .h.r { right: 0; }
.tl-dlg .h:hover { background: rgba(255, 210, 63, .5); }
.tl-aud { position: absolute; background: color-mix(in srgb, var(--panel), #3fb950 30%); border: 1px solid color-mix(in srgb, var(--panel), #3fb950 50%); border-radius: 3px; padding: 0 6px; font-size: 12px; white-space: nowrap; overflow: hidden; cursor: grab; }
.tl-aud.sel { border-color: var(--accent2); }
.tl-playhead { position: absolute; top: 0; width: 1px; background: #ff4d4d; pointer-events: none; z-index: 5; }
.tl-playhead::before { content: ''; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-top: 8px solid #ff4d4d; }
.tl-insert { position: absolute; width: 4px; background: var(--accent2); z-index: 6; border-radius: 2px; }
.tl-tip { position: fixed; background: #000; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 12px; z-index: 100; pointer-events: none; }

#status { background: var(--bar); border-top: 1px solid var(--line); color: var(--muted); padding: 2px 10px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); display: flex; flex-direction: column; max-height: 92vh; }
.modal.small { width: 440px; padding: 18px 20px; }
.modal h2 { margin: 0 0 10px; font-size: 16px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
.modal-foot .hint { margin-right: auto; color: var(--muted); font-size: 12px; min-width: 0; }
.modal-foot .btn { white-space: nowrap; flex-shrink: 0; }
.form .row { margin: 8px 0; }
.modal.review { width: min(1180px, 96vw); height: 92vh; }
.review .modal-head { padding: 14px 18px 8px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.review .modal-head h2 { margin: 0; }
.review-opts { display: flex; gap: 16px; align-items: center; }
.review-pages { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.page-chip { display: flex; gap: 8px; align-items: center; background: var(--panel2); padding: 4px 8px; border-radius: 4px; }
.review-list { flex: 1; overflow: auto; padding: 8px 18px; display: flex; flex-direction: column; gap: 8px; }
.review-row { display: flex; gap: 12px; align-items: flex-start; background: var(--lane); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.review-row.off { opacity: .45; }
.rr-use { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 32px; }
.review-row .thumb { width: 240px; background: #fff; border-radius: 2px; flex: none; }
.rr-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rr-line { display: flex; gap: 14px; align-items: flex-start; }
.rr-line textarea { flex: 1; min-height: 64px; }
.txtthumb { max-height: 135px; background: #fff; border-radius: 2px; flex: none; }
.txtthumb.empty { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); }
.review .modal-foot { padding: 10px 18px 14px; margin: 0; border-top: 1px solid var(--line); }

.toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); background: #0f1215; border: 1px solid var(--line); color: #fff; padding: 8px 16px; border-radius: 6px; opacity: 0; transition: .25s; z-index: 200; max-width: 80vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: var(--danger); }
.busy { z-index: 150; }
.modal-back:not(.busy) { z-index: 160; } /* a question always shows above a busy box */
.busy-box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 320px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.busy-bar { display: none; width: 100%; height: 6px; background: var(--kbd); border-radius: 3px; overflow: hidden; }
.busy-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.camtag { color: var(--accent2t, var(--accent2)); font-size: 12px; }
.field select { min-width: 0; max-width: 170px; }
.field .row { min-width: 0; }
.btn.sm { white-space: nowrap; }
input.warn { border-color: #e9962f; background: color-mix(in srgb, var(--field), #e9962f 22%); }
.marks { color: var(--accent2t, var(--accent2)); font-size: 12px; align-self: center; }
.rr-line.trans { gap: 12px; align-items: center; font-size: 12px; }
.rr-line.trans select { font-size: 12px; }
input.num.small { width: 44px; }
/* narrow windows: keep the toolbar on one line and let it scroll */
#toolbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.brand { white-space: nowrap; flex: none; }
.title-input { flex: 0 1 200px; min-width: 90px; }
.tgroup { flex: none; }
.tgroup.right { position: sticky; right: 0; background: var(--bar); padding-left: 8px; box-shadow: -10px 0 10px var(--bar); }
@media (max-width: 1400px) { .tbtn { padding: 4px 6px; } #toolbar { gap: 6px; } }
.menu-pop { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.5); padding: 4px; display: flex; flex-direction: column; min-width: 260px; }
.menu-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: transparent; border: none; border-radius: 4px; padding: 7px 10px; cursor: pointer; }
.menu-item:hover { background: var(--panel2); }
.menu-item small { color: var(--muted); font-size: 11px; }
.timing-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.timing-row b { min-width: 80px; }
.warnt { color: #e9962f; font-size: 12px; }
.modal.small { width: min(520px, 94vw); }
/* touch */
html, body { touch-action: pan-x pan-y; overscroll-behavior: none; }
.tl-scroll, .tl-body, .view-canvas { touch-action: none; }
.tl-cut.lifted { opacity: .5; outline: 2px dashed var(--accent2); transform: translateY(-4px); }
@media (pointer: coarse) {
  .tl-handle { width: 18px; }
  .tl-dlg .h { width: 16px; }
  .pbtn { min-width: 44px; height: 32px; }
  .view-controls { padding: 3px 10px; }
  .tbtn { padding: 8px 10px; }
  .btn.sm { padding: 6px 10px; }
  .tl-scroll { scrollbar-width: none; }
  .zbtn { padding: 2px 12px; }
}
.vsplit, .hsplit { touch-action: none; }
.btn.ai { background: #5b3fa8; border-color: #7a5bd0; color: #fff; }
.row.col { flex-direction: column; align-items: stretch; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; }
.pbtn .ico { width: 18px; height: 18px; }
.pbtn.big .ico { width: 22px; height: 22px; }
/* inspector tabs + lines editor */
#inspector { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.itabs { display: flex; flex: none; border-bottom: 1px solid var(--line); background: var(--lane2); }
.itab { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 0; cursor: pointer; color: var(--muted); }
.itab.on { color: var(--text); border-bottom-color: var(--accent2); }
.ibody { flex: 1; overflow: auto; padding: 10px 14px 40px; min-height: 0; }
.ibody.lines { padding: 6px 10px 60px; }
.lines-top { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.lines-thumb { width: 48px; height: 27px; background: #fff center/cover no-repeat; border-radius: 2px; flex: none; }
.lines-row { border-left: 4px solid #666; background: var(--lane); border-radius: 4px; padding: 4px 6px 6px; margin: 4px 0; }
.lines-row.now { background: var(--sel); }
.lines-row.sel { outline: 1px solid var(--accent2); }
.lines-spk { max-width: 110px; font-weight: 700; font-size: 12px; padding: 1px 2px; }
.lines-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines-text { min-height: 30px; resize: none; overflow: hidden; line-height: 1.5; font-size: 14px; background: #fff; color: #111; border-color: #fff; }
.lines-text:focus { outline: 2px solid var(--accent2); }
.ur-toast { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.9); background: rgba(10,12,14,.85); color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 16px; opacity: 0; pointer-events: none; transition: .18s; z-index: 300; }
.ur-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lines-btns { margin-left: auto; display: flex; gap: 2px; }
.lines-spk { max-width: 96px; min-width: 0; }
.pthumb.fill-black { background: #000; }
.pthumb.fill-white { background: #fff; outline: 1px solid #555; }
.fillsel { font-size: 11px; padding: 1px 2px; }
.follow-box { margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.tl-dlg .spk { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 3px; border: 1.5px solid; border-radius: 9px; font-size: 10px; line-height: 1; flex: none; background: rgba(0,0,0,.25); }
.tl-camtags { position: absolute; left: 3px; bottom: 3px; display: flex; gap: 2px; pointer-events: none; z-index: 2; }
.tl-camtags i { font-style: normal; color: #fff; font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 2px; white-space: nowrap; }
.lines-top { flex-wrap: wrap; }
.lines-top label { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
input.wide-tiny { width: 64px; }
.field textarea { flex: 1; }
.place-in { width: 120px; }
.lines-scene { color: var(--accent2t, var(--accent2)); font-size: 12px; }
.lines-en { margin-top: 3px; min-height: 26px; resize: none; overflow: hidden; font-size: 13px; background: #e9f1ff; color: #123; border-color: #e9f1ff; }
.tl-fb { position: absolute; right: 6px; top: 2px; background: #6b5a2a; color: #ffe9a8; font-size: 10px; padding: 0 4px; border-radius: 2px; pointer-events: none; }

.snd-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; margin-top: 8px; }
.snd-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--sep); }
.snd-row:last-child { border-bottom: 0; }
.snd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.spare { margin: 8px 0; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.spare-row { display: flex; flex-wrap: wrap; gap: 6px; }
.spare-th { width: 72px; height: 41px; border: 1px solid var(--line); border-radius: 3px; background: #ddd center/cover no-repeat; cursor: pointer; padding: 0; }
.timing-list { max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.timing-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tmap-det summary { cursor: pointer; font-size: 12px; }
.tmap { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tmap-pics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tmap-pics figure { margin: 0; text-align: center; font-size: 11px; color: var(--muted); }
.tmap-th { width: 80px; height: 45px; background: #ddd center/cover no-repeat; border: 1px solid var(--line); border-radius: 3px; }
.tmap-row { display: grid; grid-template-columns: 52px 56px 1fr; gap: 6px; align-items: center; font-size: 12px; }
@media (pointer: coarse) { .tl-head { min-height: 36px; padding: 1px 10px; } }

/* folding the inspector */
.ifold { flex: none; width: 36px; background: transparent; border: none; border-right: 1px solid var(--line); color: var(--muted); font-size: 18px; cursor: pointer; }
.ifold:hover { color: var(--text); }
body.ins-fold #main { grid-template-columns: 1fr 0 40px; }
body.ins-fold #vsplit { visibility: hidden; pointer-events: none; }
body.ins-fold #inspector .ibody { display: none !important; }
body.ins-fold .itabs { flex-direction: column; height: 100%; border-bottom: none; }
body.ins-fold .ifold { width: 100%; height: 44px; border-right: none; border-bottom: 1px solid var(--line); }
body.ins-fold .itab { flex: none; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; padding: 12px 0; width: 100%; border-bottom: none; border-left: 2px solid transparent; letter-spacing: 2px; }
body.ins-fold .itab.on { border-bottom: none; border-left-color: var(--accent2); }
@media (pointer: coarse) { .ifold { width: 44px; font-size: 22px; } body.ins-fold #main { grid-template-columns: 1fr 0 48px; } }

/* timeline header: always one line */
.tl-head { flex-wrap: nowrap; white-space: nowrap; }
.tl-title, .zbtn { flex: none; white-space: nowrap; }
.tl-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .tl-hint { display: none; } }

.scan-target { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; min-width: min(460px, 80vw); }
.st-row { display: grid; grid-template-columns: 22px 1fr; gap: 4px 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.st-row:has(input:checked) { border-color: var(--accent); background: rgba(79, 163, 224, .08); }
.st-row > span { display: flex; flex-direction: column; }
.st-row small { color: var(--muted); font-size: 11px; }
.st-row > select, .st-row > .row { grid-column: 2; justify-self: start; }
.st-row input[type=radio] { margin-top: 3px; }
.st-sub { grid-column: 2; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: 12px; }
.st-sub input[type=radio] { margin: 0; }
.pbtn.cam { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; flex: none; }
.kdia { color: #ffd23f; font-size: 14px; }
.cam-fields .num { width: 56px; }
.krow.here { background: rgba(255, 210, 63, .28); box-shadow: inset 3px 0 0 #ffd23f; }

/* compact lines list: one row per line */
.lines-thumb { width: 36px; height: 20px; }
.lines-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px; align-items: start; padding: 2px 4px; margin: 2px 0; border-left-width: 3px; }
.lines-row .lines-spk { max-width: 64px; width: 64px; font-size: 11px; padding: 2px 1px; }
.lines-text { min-height: 24px; padding: 2px 6px; font-size: 13px; line-height: 1.45; }
.lines-side { display: flex; flex-direction: row; align-items: center; gap: 2px; padding-top: 3px; }
.lines-side .lines-time { font-size: 10px; min-width: 34px; text-align: right; }
/* the buttons keep their place (only fade in), so the list never jumps */
.lines-row .lines-btns { display: flex; margin: 0; gap: 0; visibility: hidden; }
.lines-row .lines-btns .x { padding: 0 3px; }
.lines-row:hover .lines-btns, .lines-row.sel .lines-btns, .lines-row:focus-within .lines-btns { visibility: visible; }
@media (pointer: coarse) { .lines-row .lines-btns { visibility: visible; } }
.lines-en { min-height: 22px; font-size: 12px; margin-top: 0; }
.tl-lgrip { position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; cursor: row-resize; z-index: 4; }
.tl-lgrip::after { content: ''; position: absolute; left: 10px; right: 10px; top: 3px; height: 2px; border-radius: 1px; background: transparent; }
.tl-lgrip:hover::after { background: var(--accent); }
@media (pointer: coarse) { .tl-lgrip { height: 18px; bottom: -9px; } .tl-lgrip::after { top: 8px; background: #48515b; } }
/* dragging on the timeline / viewer / bars must not select text */
#timeline, #viewer, #toolbar, #status, .itabs, .vsplit, .hsplit, .menu-pop { -webkit-user-select: none; user-select: none; }
#timeline input, #timeline textarea { -webkit-user-select: text; user-select: text; }
.view-time { display: flex; flex-direction: row; align-items: baseline; gap: 10px; line-height: 1.2; margin-left: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; overflow: hidden; }
.view-time b { font-size: 15px; color: var(--text); font-weight: 700; letter-spacing: .01em; }
.view-time span { font-size: 11px; color: var(--muted); }
.view-time .vt-cuts { color: var(--muted); }
@media (max-width: 760px) { .view-time .vt-fmt { display: none; } }
@media (max-width: 560px) { .view-time .vt-cuts { display: none; } .view-time b { font-size: 13px; } }
.pbtn.guide { opacity: .65; }
.pbtn.guide.on { opacity: 1; color: #78d2ff; background: rgba(120,210,255,.16); }
.ibody.lines .lines-top { position: sticky; top: -6px; z-index: 5; background: var(--panel); margin: -6px -10px 4px; padding: 8px 10px 6px; border-bottom: 1px solid var(--line); }

/* lines list: cut cell on the left of its lines */
.lines-group { display: grid; grid-template-columns: 58px 1fr; gap: 4px; padding: 3px 0; border-bottom: 1px solid var(--sep); }
.lines-cutcell { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; cursor: pointer; padding-top: 2px; }
.lines-cutcell .lines-thumb { width: 54px; height: 30px; }
.lines-cutinfo { display: flex; gap: 4px; align-items: baseline; font-size: 11px; line-height: 1.2; }
.lines-cutinfo span { color: var(--muted); font-size: 10px; }
.lines-cutcell .lines-add { background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; color: var(--text, #ddd); font-size: 12px; line-height: 14px; padding: 0 6px; cursor: pointer; }
.lines-rows { min-width: 0; }
.lines-rows .lines-row { margin: 0 0 2px; }
.lines-none { padding: 4px 2px; }
.lines-row { grid-template-columns: 58px 1fr auto; }
.lines-row .lines-spk { width: 58px; max-width: 58px; }
.lines-scene { margin: 8px 0 0; }

.tl-scene { position: absolute; box-sizing: border-box; border-radius: 3px; border: 1px solid; color: #fff; font-size: 11px; line-height: 16px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; z-index: 3; }
.tl-scene.on { color: #111; font-weight: 700; }
.tl-scene span { pointer-events: none; }
.scene-colors { display: flex; gap: 4px; flex-wrap: wrap; }
.scene-colors button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.scene-colors button.on { border-color: #fff; }
.tl-sctop { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; pointer-events: none; }
.am-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow: auto; margin-top: 8px; min-width: min(560px, 86vw); }
.am-row { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 4px; background: var(--lane); cursor: pointer; }
.am-th { width: 112px; height: 63px; flex: none; background: #fff center/contain no-repeat; border-radius: 2px; }
.am-arrow { color: var(--muted); }
.am-info { display: flex; flex-direction: column; font-size: 12px; }
.am-info small { color: var(--muted); }

/* lines: speaker | words; time and buttons float at the right on hover (no layout change) */
.lines-group { grid-template-columns: 50px 1fr; }
.lines-cutcell .lines-thumb { width: 48px; height: 27px; }
.lines-row { grid-template-columns: 58px 1fr; position: relative; }
.lines-row .lines-side { position: absolute; right: 6px; top: 4px; visibility: hidden; background: rgba(32, 37, 42, .92); border-radius: 4px; padding: 0 2px; z-index: 2; }
.lines-row:hover .lines-side, .lines-row.sel .lines-side, .lines-row:focus-within .lines-side { visibility: visible; }
.lines-row .lines-side .lines-btns { visibility: inherit; }
@media (pointer: coarse) { .lines-row .lines-side { visibility: visible; } .lines-row .lines-text { padding-right: 84px; } }

.tl-foot { flex: none; display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-top: 1px solid var(--line); background: var(--lane2); }
.tl-mnt { background: none; border: none; color: var(--muted); padding: 0 2px; cursor: pointer; display: flex; align-items: center; }
.tl-mnt:hover { color: var(--text); }
.tl-zoom { width: 120px; height: 14px; accent-color: var(--muted); }
@media (pointer: coarse) { .tl-foot { height: 30px; } .tl-zoom { width: 160px; } }
.am-ai { font-weight: 700; }
.am-ai.yes { color: #6fd18f; }
.am-ai.no { color: #e0787c; }
.tl-zoom { -webkit-appearance: none; appearance: none; background: transparent; outline: none; }
.tl-zoom::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 1px; }
.tl-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border-radius: 50%; background: var(--lane2); border: 2px solid #aab4bf; }
.tl-zoom::-moz-range-track { height: 2px; background: var(--line); }
.tl-zoom::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: var(--lane2); border: 2px solid #aab4bf; }
@media (pointer: coarse) { .tl-zoom::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; } }
.tl-zoom, .tl-zoom:focus { border: none; box-shadow: none; outline: none; padding: 0; }

/* transitions on the timeline */
.tl-tbar { position: absolute; height: 20px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.6); border-radius: 3px; z-index: 4; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-linear-gradient(135deg, #6b5aa8 0 5px, #5a4a95 5px 10px); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.tl-tbar.t-wipe { background: repeating-linear-gradient(135deg, #3a7fbf 0 5px, #2f6aa3 5px 10px); }
.tl-tbar.t-fo, .tl-tbar.t-fi { background: linear-gradient(90deg, rgba(0,0,0,.25), #111); }
.tl-tbar.t-fi { background: linear-gradient(90deg, #111, rgba(0,0,0,.25)); }
.tl-tbar.t-wo { background: linear-gradient(90deg, rgba(255,255,255,.3), #fff); color: #222; }
.tl-tbar.t-wi { background: linear-gradient(90deg, #fff, rgba(255,255,255,.3)); color: #222; }
.tl-tbar span { pointer-events: none; padding: 0 3px; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.tl-tbar.t-wo span, .tl-tbar.t-wi span { text-shadow: none; }
.tl-tbar .te { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.tl-tbar .te.l { left: 0; } .tl-tbar .te.r { right: 0; }
.tl-tbar .te:hover { background: rgba(255, 210, 63, .7); }
.tl-tadd { position: absolute; width: 16px; height: 16px; padding: 0; line-height: 14px; font-size: 12px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: var(--text); z-index: 4; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tl-content:hover .tl-tadd { opacity: .55; }
.tl-tadd:hover { opacity: 1 !important; background: var(--accent); color: #fff; }
@media (pointer: coarse) { .tl-tadd { opacity: .6; width: 22px; height: 22px; line-height: 20px; } .tl-tbar .te { width: 12px; } }
.tl-tchips { display: inline-flex; gap: 3px; margin-left: 10px; }
.tl-tchip { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; cursor: grab; color: #fff; background: #5a4a95; user-select: none; }
.tl-tchip.t-wipe { background: #2f6aa3; } .tl-tchip.t-fo, .tl-tchip.t-fi { background: #111; border: 1px solid #555; } .tl-tchip.t-wo, .tl-tchip.t-wi { background: #ddd; color: #222; }
@media (max-width: 900px) { .tl-tchips { display: none; } }

/* start screen */
.modal.start { width: min(620px, 92vw); max-height: 86vh; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.modal.start h2 { margin: 0 0 10px; }
.st-actions { margin-bottom: 6px; }
.st-list { display: flex; flex-direction: column; gap: 4px; overflow: auto; min-height: 60px; }
.st-item { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--lane); border: 1px solid transparent; border-radius: 6px; padding: 6px; cursor: pointer; color: inherit; position: relative; }
.st-item:hover { border-color: var(--accent); background: var(--panel2); }
.st-thumb { width: 96px; height: 54px; flex: none; background: #fff center/cover no-repeat; border-radius: 3px; }
.st-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.st-txt b { font-size: 14px; }
.st-txt small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-x { position: absolute; right: 8px; top: 6px; color: var(--muted); padding: 0 4px; border-radius: 3px; }
.st-x:hover { background: var(--sel); color: var(--text); }
.scene-recent { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.scene-chip { background: var(--lane); border: 1px solid; border-left-width: 4px; border-radius: 3px; color: inherit; font-size: 12px; padding: 1px 8px; cursor: pointer; }
.scene-chip:hover { background: var(--panel2); }

/* shortcut settings */
.km { max-height: 58vh; overflow: auto; min-width: min(560px, 82vw); padding-right: 4px; }
.km h4 { margin: 10px 0 4px; font-size: 12px; color: var(--muted, #8b949e); }
.km-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(127,127,127,.15); }
.km-label { flex: 1 1 auto; font-size: 13px; min-width: 0; }
.km-keys { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.km-key { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 7px; border-radius: 5px; background: rgba(127,127,127,.18); font: 600 12px/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.km-key.clash { background: rgba(255,90,90,.3); }
.km-x { border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; padding: 0 4px; font-size: 12px; }
.km-x:hover { opacity: 1; }
.km-add.on { background: #ffd23f; color: #16191d; }
.km-reset { border: 0; background: none; color: inherit; cursor: pointer; opacity: .7; font-size: 14px; }

/* typing a line right on the timeline */
.menu-k { float: right; margin-left: 12px; padding: 0 5px; border-radius: 4px; background: rgba(127,127,127,.22); font: 600 11px/1.6 ui-monospace, Menlo, Consolas, monospace; color: inherit; }
.vfit { margin-top: 3px; line-height: 1.7; }
.vfit select { max-width: 100%; }

/* the open file, quietly at the right of the top bar */
.file-path { flex: 0 1 auto; min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted, #8b949e); opacity: .75; text-align: right; }
.file-path.unsaved { font-style: italic; opacity: .55; }
@media (max-width: 700px) { .file-path { display: none; } }
.tl-pfb { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: rgba(139,92,246,.9); color: #fff; font-size: 10px; line-height: 15px; pointer-events: none; }
.tl-pfb.off { background: rgba(80,80,80,.85); }
.view-controls .view-time { min-width: 8.2em; }
@media (max-width: 820px) { .view-controls { gap: 2px; padding: 3px 6px; } .view-controls .pbtn { padding-left: 6px; padding-right: 6px; min-width: 0; } .view-controls .view-time { margin-left: 4px; } }
.tl-hold { position: absolute; top: 0; bottom: 0; background-size: cover; background-position: center; opacity: .55; pointer-events: none; }
.tl-hold::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.35) 0 3px, transparent 3px 8px); }
.hold-row .sk { width: 64px; }

/* settings window: categories on the left, their settings on the right */
.modal:has(.settings) { width: min(860px, 96vw); max-width: 96vw; }
.settings { display: grid; grid-template-columns: 170px 1fr; gap: 0; min-height: 52vh; max-height: 70vh; margin: -4px -4px 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.set-nav { display: flex; flex-direction: column; background: var(--panel2, #1f242b); border-right: 1px solid var(--line); overflow-y: auto; padding: 4px 0; }
.set-tab { text-align: left; padding: 7px 12px; background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; border-left: 3px solid transparent; }
.set-tab:hover { color: var(--text); background: rgba(127,127,127,.08); }
.set-tab.on { color: var(--text); background: rgba(127,127,127,.14); border-left-color: var(--accent); font-weight: 600; }
.set-pane { padding: 10px 16px 16px; overflow-y: auto; }
.set-pane h3 { margin-top: 2px; }
@media (max-width: 640px) { .settings { grid-template-columns: 1fr; } .set-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .set-tab { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; } .set-tab.on { border-bottom-color: var(--accent); } }

/* scrollbars in the app's colors */
* { scrollbar-color: color-mix(in srgb, var(--panel), var(--text) 28%) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--panel), var(--text) 25%); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--panel), var(--text) 40%); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }
/* time labels: same size, quieter color; numbers that don't jump as they change */
.tick.major span { color: var(--muted); font-variant-numeric: tabular-nums; }
.view-time b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.view-time span { font-variant-numeric: tabular-nums; }
.view-time b { min-width: 12.6em; }
/* live link to the stopwatch */
.menu-item.menu-check { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
.menu-sep { height: 1px; background: var(--line, #30363d); margin: 4px 6px; }
.sw-pill { margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid #3fb950; background: rgba(63,185,80,.14); color: #7ee787; font-size: 12px; cursor: pointer; white-space: nowrap; animation: swp 1.6s ease-in-out 2; }
.sw-pill[hidden] { display: none; }
@keyframes swp { 50% { background: rgba(63,185,80,.32); } }
/* status bar: the readout on the left, the film's title on the right */
#status { display: flex; align-items: center; gap: 10px; }
#status .st-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#status .st-title { flex: 0 1 260px; min-width: 90px; display: flex; align-items: center; gap: 6px; }
#status .st-title-k { font-size: 11px; opacity: .6; flex: none; }
#status .title-input { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 6px; height: 20px; font-size: 12px; font-weight: 600; color: var(--text, #e6edf3); }
/* the readout hides its smaller parts by the width of the viewer column (not the window) */
.view-controls { container-type: inline-size; container-name: vc; }
@container vc (max-width: 780px) { .view-time .vt-fmt { display: none; } }
@container vc (max-width: 690px) { .view-time .vt-cuts { display: none; } }
.view-time b { min-width: 0; flex: none; }
.set-group { padding: 10px 12px 3px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.set-group:first-child { padding-top: 4px; }
.set-nav .set-tab { padding-left: 22px; }
@media (max-width: 640px) { .set-group { display: none; } .set-nav .set-tab { padding-left: 12px; } }
.settings { grid-template-columns: 210px 1fr; } .set-nav .set-tab { white-space: normal; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
/* stopwatch button (was 「タイミング ▾」) */
.sw-btn { display: inline-flex; align-items: center; gap: 2px; }
.sw-btn svg { display: block; }
.sw-btn .sw-caret { font-size: 10px; opacity: .7; }
/* narrow screens: the lane names column goes, the timeline gets the whole width */
@media (max-width: 760px) { .tl-body { grid-template-columns: 0 1fr; } .tl-labels { overflow: hidden; border-right: 0; } }
#toolbar .tgroup.right { margin-left: auto; }
#status .title-input::placeholder { color: var(--muted); font-weight: 400; font-style: italic; opacity: .8; }
@media (max-width: 760px) {
  #status { gap: 6px; padding: 2px 6px; }
  #status .st-title-k { display: none; }
  #status .st-title { flex: 0 1 45%; min-width: 120px; }
}
.lines-music { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.lines-music .lines-mtype { flex: none; font-size: 11px; padding: 1px 2px; }
.lines-music .lines-mood { flex: 1; min-width: 0; font-size: 11px; padding: 2px 6px; background: rgba(127,127,127,.08); }
/* fixed-width digits in the time readout (no jiggling while playing) */
.view-time .dg { display: inline-block; width: .62em; text-align: center; font-style: normal; }
.view-time .vt-cuts { white-space: nowrap; }
#status .dg { display: inline-block; width: .62em; text-align: center; font-style: normal; }
/* narrow screens: the settings list goes across the top as tabs (placed last so nothing above overrides it) */
@media (max-width: 760px) {
  .settings { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: 74vh; }
  .set-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); padding: 0; scrollbar-width: none; }
  .set-nav .set-group { display: none; }
  .set-nav .set-tab { flex: none; white-space: nowrap; writing-mode: horizontal-tb; padding: 9px 12px; border-left: 0; border-bottom: 3px solid transparent; line-height: 1.2; }
  .set-nav .set-tab.on { border-bottom-color: var(--accent); }
  .set-pane { overflow-y: auto; min-height: 0; }
}

/* ---- storyboard editor ---- */
.sbe-back { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; justify-content: center; outline: none; }
.sbe { background: #fff; color: #111; width: min(1180px, 100vw); height: 100%; display: flex; flex-direction: column; font-size: 13px; }
.sbe-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sbe-head .spacer { flex: 1; }
.sbe-cols, .sbe-row { display: grid; grid-template-columns: 44px minmax(220px, 360px) 2fr 2.4fr 1.3fr 64px; }
.sbe-cols > div { background: #eee; border: 1px solid #999; border-left: none; text-align: center; font-weight: 700; padding: 3px 0; }
.sbe-body { flex: 1; overflow: auto; }
.sbe-row > div { border-right: 1px solid #999; border-bottom: 1px solid #bbb; padding: 6px; min-width: 0; }
.sbe-row.first { border-top: 2px solid #333; }
.sbe-row .c-cut { font-weight: 800; font-size: 18px; text-align: center; }
.sbe-shots { display: grid; gap: 6px; }
.sbe-shots.n2 { grid-template-columns: 1fr 1fr; } .sbe-shots.n3 { grid-template-columns: 1fr 1fr 1fr; }
.sbe-shots figure { margin: 0; }
.sbe-shots canvas { width: 100%; height: auto; display: block; background: #f4f4f4; }
.sbe-shots figcaption, .sbe-tags { color: #b02a2a; font-weight: 700; font-size: 11px; margin-top: 2px; }
.sbe-ctl { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 3px; }
.sbe-ctl button { font-size: 11px; padding: 1px 6px; border: 1px solid #bbb; background: #f6f6f6; border-radius: 4px; cursor: pointer; color: #222; }
.sbe-ctl button:hover { background: #e8eef8; }
.sbe-ctl button.add { border-color: #6a9be0; color: #1e5bb8; }
.sbe-ctl button.del { color: #b02a2a; }
.sbe-fr { font-size: 11px; color: #555; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.sbe-ed { outline: none; border-radius: 3px; padding: 1px 2px; white-space: pre-wrap; word-break: break-word; cursor: text; }
.sbe-ed:hover { background: #f3f6fb; } .sbe-ed:focus { background: #fffbe0; box-shadow: 0 0 0 1px #e6c34a; }
.sbe-memo { display: block; min-height: 1.6em; margin-top: 4px; color: #333; }
.sbe-memo:empty::before { content: attr(data-ph); color: #bbb; }
.sbe-item { margin-bottom: 4px; } .sbe-item i { font-style: normal; color: #555; }
.sbe-scene { font-weight: 700; margin-bottom: 4px; }
.sbe-line { display: flex; gap: 4px; align-items: baseline; margin-bottom: 5px; flex-wrap: wrap; }
.sbe-who { font-size: 12px; border: 2px solid #999; border-radius: 4px; background: #fff; color: #111; max-width: 8em; }
.sbe-tag { display: inline-block; font-size: 10px; color: #fff; background: #5b6672; border-radius: 3px; padding: 0 4px; margin-right: 4px; }
.sbe-tag.m { background: #7b4fc9; }
.sbe-row .c-sec { text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.sbe-row .c-sec small { color: #555; }
@media (max-width: 760px) { .sbe-cols, .sbe-row { grid-template-columns: 30px minmax(150px, 3fr) 1.6fr 2fr 1fr 44px; } .sbe { font-size: 12px; } }

.sbe-mv { display: inline-flex; align-items: center; gap: 1px; margin-right: 3px; opacity: .35; }
.sbe-line:hover .sbe-mv, .sbe-item:hover .sbe-mv, .sbe-mv:focus-within { opacity: 1; }
.sbe-mv button { font-size: 10px; padding: 0 3px; border: 1px solid #ccc; background: #f6f6f6; border-radius: 3px; cursor: pointer; color: #333; line-height: 1.4; }
.sbe-grip { cursor: grab; color: #888; padding: 0 2px; user-select: none; }
.sbe-row.drop { outline: 2px dashed #3b82f6; outline-offset: -2px; background: #eef4ff; }
@media (pointer: coarse) { .sbe-mv { opacity: .8; } }

/* ---- find & replace ---- */
.find-box { position: fixed; top: 56px; right: 16px; z-index: 45; width: min(460px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.find-box .row.gap { display: flex; gap: 6px; align-items: center; }
.find-box .wrap { flex-wrap: wrap; }
.find-box input:not([type]) { flex: 1; min-width: 0; }
.find-head { display: flex; align-items: center; gap: 8px; }
.find-head .spacer { flex: 1; }
.find-list { overflow: auto; border-top: 1px solid var(--line); margin-top: 2px; }
.find-hit { display: flex; gap: 6px; align-items: baseline; padding: 4px 4px; cursor: pointer; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.find-hit b { min-width: 3.2em; color: var(--muted, #9aa); font-weight: 600; }
.find-hit i { font-style: normal; color: var(--muted); min-width: 3em; }
.find-hit > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-hit mark { background: #ffd54a; color: #111; border-radius: 2px; }
.find-hit:hover { background: rgba(255,255,255,.05); }
.find-hit.on { background: rgba(80,140,230,.25); }

/* the cut inspector, compact */
#inspector h4 { margin: 10px 0 4px; padding-top: 7px; }
.ibody .row.gap { margin: 4px 0; }
.pthumb { width: 76px; height: 43px; }
.prow { gap: 6px; padding: 3px; }
.pinfo { flex: 1; min-width: 0; gap: 3px; }
.prow1 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.prow1 .pmenu { margin-left: auto; flex-wrap: nowrap; }
.prow1 .sk { width: 56px; }
.trow { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.trow .flabel { width: 44px; }
.trow select { flex: 1; min-width: 0; }
.trow .sk { width: 58px; flex: none; }
.cam-fields { gap: 4px 8px !important; }
.cam-fields .num { width: 46px; }
.follow-box { margin-top: 6px; padding: 6px; }
details.ifold { border-top: 1px solid var(--line); margin-top: 8px; }
details.ifold > summary { list-style: none; cursor: pointer; padding: 7px 0 4px; font-size: 12px; display: flex; gap: 8px; align-items: baseline; }
details.ifold > summary::-webkit-details-marker { display: none; }
details.ifold > summary::before { content: '▸'; color: var(--muted); width: 10px; }
details.ifold[open] > summary::before { content: '▾'; }
details.ifold > summary .ft { color: var(--accent2t, var(--accent2)); font-weight: 700; }
details.ifold > summary .fs { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
details.ifold > :not(summary) { margin-left: 0; }
details.ifold { display: block; width: 100%; flex: none; }
.cam-fields { flex-wrap: nowrap !important; font-size: 12px; }
.cam-fields label { white-space: nowrap; }
.cam-fields .num { width: 40px; padding-left: 3px; padding-right: 3px; }
details.ifold { font-size: 13px; }
details.ifold input, details.ifold select, details.ifold textarea { font-size: 13px; }
details.ifold .wide-tiny { width: 64px; }
.rr-x { color: #ff8a65; font-weight: 700; white-space: nowrap; }
details.ifold { border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0; padding: 0; background: none; }
.sbe-trans { position: relative; height: 0; z-index: 2; text-align: center; }
.sbe-trans span { position: relative; top: -10px; display: inline-block; background: #fff; color: #b02a2a; border: 1.5px solid #b02a2a; border-radius: 10px; font: 700 11px/16px sans-serif; padding: 0 10px; margin-left: 12%; }
.sbe-mv button.del { color: #b02a2a; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.theme-b { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 5px; border: 2px solid var(--line); border-radius: 8px; background: var(--panel2); cursor: pointer; }
.theme-b.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-b .sw { display: flex; height: 18px; border-radius: 4px; overflow: hidden; }
.theme-b .sw i { flex: 1; }
.theme-b .tn { font-size: 11px; line-height: 1.3; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sw-layer, .man-layer { position: fixed; inset: 0; z-index: 400; background: var(--bg); }
.sw-layer[hidden], .man-layer[hidden] { display: none; }
.sw-layer iframe, .man-layer iframe { width: 100%; height: 100%; border: 0; display: block; }

/* settings: the list and the page each scroll on their own (all of the list can be reached) */
.settings { height: min(72vh, 760px); max-height: none; grid-template-rows: minmax(0, 1fr); }
.set-nav, .set-pane { min-height: 0; }
@media (max-width: 640px) { .settings { height: 76vh; grid-template-rows: auto minmax(0, 1fr); } }

/* the stopwatch docked at the right on PCs: the app shrinks beside it */
body.sw-dock { padding-right: var(--sw-w, 440px); box-sizing: border-box; }
.sw-layer.dock { z-index: 40; left: auto; width: var(--sw-w, 440px); border-left: 1px solid var(--line); box-shadow: -4px 0 14px rgba(0,0,0,.18); }
.sw-grip { display: none; }
.sw-layer.dock .sw-grip { display: block; position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.sw-layer.dock .sw-grip:hover, .sw-layer.drag .sw-grip { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.sw-layer.drag iframe { pointer-events: none; }

/* numbers never jiggle: every digit takes the same width */
html { font-variant-numeric: tabular-nums; }
#toolbar .tgroup.right { margin-left: auto; }
#status .st-text { flex: 1 1 auto; }
#status .file-path { text-align: right; }

/* the fold button at the panel's top right, in the same place open or folded */
.ifold { border-right: none; border-left: 1px solid var(--line); }
body.ins-fold .ifold { order: -1; border-left: none; }
.sw-btn.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); border-radius: 6px; }

/* timeline: no header row; the scene jump and －／＋／全体 by the zoom slider */
.tl-foot { height: 26px; gap: 6px; }
.tl-foot .zbtn { height: 20px; padding: 0 8px; font-size: 11.5px; line-height: 1; }
@media (pointer: coarse) { .tl-foot { height: 34px; } .tl-foot .zbtn { height: 28px; } }

/* non-voice items each in their own colour: SE / ♪ music / 場面 (scene info) / 文字 (on screen) / 動作 */
.sndtag.k-se { background: #2AA6A6 !important; color: #fff !important; }
.sndtag.k-music { background: #9A5FD0 !important; color: #fff !important; }
.sndtag.k-sceneinfo { background: #D99A2B !important; color: #111 !important; }
.sndtag.k-screen { background: #5A6FD0 !important; color: #fff !important; }
.sndtag.k-action { background: #7A8B3A !important; color: #fff !important; }
.tl-dlg.snd.k-se { border-left-color: #2AA6A6 !important; background: color-mix(in srgb, var(--panel), #2AA6A6 16%); }
.tl-dlg.snd.k-music { border-left-color: #9A5FD0 !important; background: color-mix(in srgb, var(--panel), #9A5FD0 16%); }
.tl-dlg.snd.k-sceneinfo { border-left-color: #D99A2B !important; background: color-mix(in srgb, var(--panel), #D99A2B 18%); }
.tl-dlg.snd.k-screen { border-left-color: #5A6FD0 !important; background: color-mix(in srgb, var(--panel), #5A6FD0 16%); }
.tl-dlg.snd.k-action { border-left-color: #7A8B3A !important; background: color-mix(in srgb, var(--panel), #7A8B3A 16%); }

/* the lines list in a narrow panel: who above the words (the words get the whole width, never one letter per line) */
.ibody.lines { container-type: inline-size; }
@container (max-width: 420px) {
  .lines-group { grid-template-columns: 1fr; }
  .lines-cutcell { flex-direction: row; align-items: center; gap: 6px; }
  .lines-row { grid-template-columns: 1fr; }
  .lines-row .lines-spk { width: auto; max-width: 140px; }
  .lines-row .lines-text { padding-right: 6px !important; }
  .lines-row .lines-side { top: 2px; }
}

/* the play buttons shrink with the width; the time always shows whole */
.view-controls { container-type: inline-size; gap: 3px; overflow: hidden; }
.view-controls > .pbtn { flex: 1 1 0; min-width: 26px; max-width: 46px; }
.view-controls > .pbtn.big { flex: 1.4 1 0; max-width: 64px; }
.view-controls .view-time { flex: 1 0 auto; overflow: visible; margin-left: 8px; }
@container (max-width: 560px) { .view-time .vt-cuts, .view-time .vt-fmt { display: none; } .view-time b { font-size: 14px; } }
@container (max-width: 380px) { .view-time b { font-size: 12.5px; } .view-controls { padding: 3px 6px; } }
.guide-btn.on { color: var(--accent); }

/* compact: a thinner top bar, a short ruler, no gaps between the picture, its buttons and the timeline */
body { grid-template-rows: 36px 1fr 3px min(var(--tl-h), var(--tl-fit, 100vh)) 24px; }
#toolbar .tbtn { padding-top: 2px; padding-bottom: 2px; }
.tick.major { height: 8px; }
.tick.major span { bottom: 6px; line-height: 1; }
.tick { height: 4px; }
.view-controls { padding-top: 2px !important; padding-bottom: 2px !important; }
.view-controls .pbtn { height: 26px; }
@media (pointer: coarse) { body { grid-template-rows: 44px 1fr 5px min(var(--tl-h), var(--tl-fit, 100vh)) 24px; } .view-controls .pbtn { height: 30px; } }

.view-time .vt-cuts[hidden], .view-time .vt-fmt[hidden] { display: none; }
/* the timecode / cut / format text gives way last; the file name first */
#status .file-path { flex-shrink: 20; }
#status .st-title { flex-shrink: 4; }
@media (max-width: 900px) { #status .file-path { display: none; } }

/* v1.25: time on the left, the play buttons centred right under the picture */
.view-controls { display: flex; align-items: center; gap: 6px; }
.view-controls .view-time { flex: 1 1 0; min-width: max-content; margin-left: 0; order: 0; }
.view-controls .vc-btns { flex: 0 1 auto; display: flex; align-items: center; gap: 3px; min-width: 0; }
.view-controls .vc-btns > .pbtn { flex: 1 1 0; min-width: 26px; max-width: 46px; width: 46px; }
.view-controls .vc-btns > .pbtn.big { flex: 1.4 1 0; max-width: 64px; width: 64px; }
.view-controls .vc-sp { flex: 1 1 0; min-width: 0; }
/* no flash / tint when a button is pressed (it lagged behind and distracted) */
* { -webkit-tap-highlight-color: transparent; }
.pbtn:focus, .pbtn:focus-visible, .zbtn:focus, .tbtn:focus { outline: none; }
@media (hover: none) { .pbtn:hover { border-color: var(--line); } .pbtn.big:hover { border-color: var(--accent); } }
/* top bar: icon buttons centred on the same line as the words */
#toolbar .tbtn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
#toolbar .tbtn > svg { display: block; flex: none; }

/* the overview bar: the whole film */
.tl-foot .zbtn { flex: none; }
.tl-ov { position: relative; flex: 1 1 auto; min-width: 60px; height: 100%; margin: 0 6px 0 4px; cursor: pointer; }
.tl-ov-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--muted); opacity: .55; border-radius: 1px; }
.tl-ov-scn { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: 3px; pointer-events: none; }
.tl-ov-scn i { position: absolute; top: 0; height: 100%; opacity: .85; border-radius: 1px; }
.tl-ov-win { position: absolute; top: 3px; bottom: 3px; border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 3px; box-sizing: border-box; cursor: grab; }
.tl-ov-knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #e5484d; background: var(--lane2); box-sizing: border-box; pointer-events: none; }
@media (pointer: coarse) { .tl-ov-knob { width: 16px; height: 16px; margin: -8px 0 0 -8px; } }
/* the 音 lane: fold / unfold with its name */
.tl-label.aud { cursor: pointer; gap: 2px; font-size: 11px; }
.tl-label.aud .tl-fold { font-size: 9px; opacity: .7; }
.tl-label.aud.fold { font-size: 10px; }
.tl-lane.folded { background: repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--muted) 18%, transparent) 6px 7px); }
/* the 音 lane is thin: small words in it */
.tl-dlg.snd { font-size: 10px; gap: 3px; padding: 0 4px; border-left-width: 3px; }
.tl-dlg.snd .sndtag { font-size: 8px; line-height: 1; padding: 1px 3px; }
.tl-aud { font-size: 10px; line-height: 1; display: flex; align-items: center; padding: 0 4px; }
/* the title in the status bar: shown only (changed in 設定 › 作品設定) */
#status .title-show { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text, #e6edf3); }
#status .title-show.none { font-weight: 400; color: var(--muted); font-style: italic; }
#status .st-title { cursor: default; }
/* v1.33: a bigger overview bar (narrower zoom slider, the 全体・シーン button as an icon) */
.tl-zoom { width: 76px; }
@media (pointer: coarse) { .tl-zoom { width: 96px; } }
.tl-foot .zbtn.ico { padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.tl-foot .zbtn.ico svg { display: block; }
.tl-ov { margin: 0 4px 0 6px; }
.tl-ov-line { height: 4px; margin-top: -2px; border-radius: 2px; }
.tl-ov-scn { height: 5px; margin-top: 3px; }
.tl-ov-win { top: 2px; bottom: 2px; border-width: 1.5px; }
.tl-ov-knob { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-width: 2.5px; }
@media (pointer: coarse) { .tl-ov-knob { width: 20px; height: 20px; margin: -10px 0 0 -10px; } }
/* v1.34: scan review — 「同」 that looks likely, low-resolution note, how the film ends */
.camtag.warn { color: #b8620f; font-weight: 700; }
.page-chip .warn-txt { color: #b8620f; font-weight: 700; font-size: 12px; }
.review-loop { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 13px; white-space: nowrap; }
.review-loop .num.small { width: 40px; }
/* v1.34: 種類をまとめて変更 — pick lines, show only the ones without a speaker */
.snd-row { cursor: pointer; grid-template-columns: 20px 44px 1fr auto; }
.snd-list.bare-only .snd-row:not([data-bare="1"]) { display: none; }
.lines-scene[contenteditable] { cursor: text; outline: none; border-radius: 3px; }
.lines-scene[contenteditable]:focus { background: var(--field); }

/* v1.36: big scenes (a thin band above the scenes) */
.tl-scene.tl-big { border-color: var(--line); background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-size: 10px; line-height: 13px; font-weight: 600; }
.tl-scene.tl-big.on { background: color-mix(in srgb, var(--text) 30%, transparent); color: var(--text); }

/* v1.36 timeline additions (tlplus.js) */
.tl-snapline { position: absolute; top: 0; width: 2px; background: var(--accent2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); z-index: 9; pointer-events: none; }
.tl-panel .kf { cursor: ew-resize; }
.tl-panel .kf::after { content: ''; position: absolute; inset: -5px; }
@media (pointer: coarse) { .tl-panel .kf::after { inset: -10px; } }
.tl-dlg .snd-no { font-style: normal; font-weight: 700; font-size: 9px; line-height: 1; padding: 1px 3px; border-radius: 3px; background: rgba(0, 0, 0, .18); color: var(--text); flex: none; }
.tl-dlg .snd-no.res { background: #9A5FD0; color: #fff; }
.lines-row.flash { animation: lineflash 1.4s ease-out; }
@keyframes lineflash { 0%, 40% { background: color-mix(in srgb, var(--accent2) 45%, transparent); } 100% { background: transparent; } }

/* ---- v1.40: menus・settings ---- */
/* background picture (設定 → 背景画像): very light over the panels and bars, never over the picture in the main view */
html.has-bgimg #toolbar, html.has-bgimg #inspector, html.has-bgimg #timeline, html.has-bgimg #status { position: relative; }
html.has-bgimg #toolbar::after, html.has-bgimg #inspector::after, html.has-bgimg #timeline::after, html.has-bgimg #status::after {
  content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: var(--bgimg) center / cover no-repeat fixed; opacity: var(--bgimg-a, .18);
}
.settings .bg-prev { width: 200px; height: 112px; margin: 6px 0; border-radius: 4px; border: 1px solid var(--line); background: center / cover no-repeat; }
.settings .logo-prev { margin: 6px 0; padding: 6px; display: inline-block; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.settings .logo-prev img { display: block; max-height: 48px; max-width: 220px; }
/* 画材・トンマナ */
.art-side { margin: 4px 0 10px; }
.art-side .art-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 6px 0 4px; }
.art-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.art-img { position: relative; display: inline-block; }
.art-img img { display: block; height: 64px; max-width: 120px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.art-img .x { position: absolute; top: -6px; right: -6px; }
/* start screen: a short line about dropping files in */
.modal.start .st-drop { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* v1.49: scan review — the handwritten dialogue read into the box, and how each line will go in */
.rr-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr-text textarea { width: 100%; min-height: 64px; box-sizing: border-box; }
.rr-txtcol { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rr-preview { display: flex; flex-wrap: wrap; gap: 4px; }
.dlg-chip { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--panel2); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-chip.voice { color: var(--text); }
.dlg-chip b { font-weight: 600; }
.review-ainote { padding: 6px 18px; font-size: 13px; background: var(--panel2); border-bottom: 1px solid var(--line); }
/* v1.57: the export targets the cut under the playhead (no cut selected) */
.cut-target-note { color: var(--accent); margin: -2px 0 4px 0; }
/* v1.59: scan review on a narrow screen — rows wrap instead of squeezing the words into one-letter columns */
.review .modal-head { flex-wrap: wrap; gap: 8px 20px; }
.review .modal-head h2, .review-opts label, .rr-line label, .page-chip b, .page-chip span, .rr-use small { white-space: nowrap; }
.review-opts { flex-wrap: wrap; gap: 8px 16px; }
.review-opts .btn { white-space: nowrap; }
.page-chip { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
.page-chip select { max-width: 100%; min-width: 0; }
.rr-fields { min-width: 0; }
.rr-line { flex-wrap: wrap; gap: 6px 14px; }
.rr-line .rr-text { min-width: min(220px, 100%); }
.rr-txtcol canvas { max-width: 100%; height: auto; }
.review .modal-foot { flex-wrap: wrap; row-gap: 6px; }
.review .modal-foot .hint { flex: 1 1 180px; }
.page-chip .pc-place { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .modal.review { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; overflow-y: auto; }
  .review .modal-head { padding: 10px 12px 8px; }
  .review-pages, .review-ainote { padding-left: 12px; padding-right: 12px; }
  .review-list { flex: none; overflow: visible; padding: 8px 12px; }
  .review-row { flex-wrap: wrap; gap: 8px; }
  .review-row .thumb { width: min(240px, calc(100% - 44px)); height: auto; }
  .rr-fields { flex: 1 1 100%; }
  .review .modal-foot { position: sticky; bottom: 0; background: var(--panel); padding: 8px 12px 10px; }
  .review .modal-foot .hint { flex-basis: 100%; order: -1; }
  .review-loop { white-space: normal; flex-wrap: wrap; }
  .review-loop select { max-width: 110px; }
}

/* (v1.65) 編集 → 音楽リスト・台本・指示書：書き出す表の形のまま編集する（絵コンテの編集と同じ紙の見た目） */
.dce-body { padding: 0 0 40px; }
.dce-row { display: grid; border-bottom: 1px solid #bbb; }
.dce-row > div { border-right: 1px solid #ccc; padding: 5px 6px; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.dce-cols { position: sticky; top: 0; z-index: 1; }
.dce-cols > div { background: #eee; font-weight: 700; text-align: center; border-bottom: 1px solid #999; }
.dce-music { grid-template-columns: 52px 118px 1.1fr 1.1fr 0.8fr 1.6fr 1.4fr 64px; }
.dce-script { grid-template-columns: 58px 64px 76px 84px minmax(150px, 1fr) 3fr; }
.dce-row .c-no { font-weight: 800; }
.dce-row .c-ro { color: #444; }
.dce-row .c-scene.dot i, .dce-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.dce-row .c-who { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.dce-sel { font-size: 12px; max-width: 100%; border: 1px solid #999; border-radius: 4px; background: #fff; color: #111; }
.dce-num { width: 100%; box-sizing: border-box; font-size: 13px; border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #111; padding: 2px 4px; }
.dce-link { all: unset; cursor: pointer; white-space: pre-wrap; text-decoration: underline dotted #888; }
.dce-link:hover { color: #1e5bb8; }
.dce-line { font-size: 14px; min-height: 1.4em; }
.dce .sbe-ed:empty::before { content: attr(data-ph); color: #bbb; }
.dce-sec { padding: 8px 8px 4px; font-weight: 800; border-bottom: 2px solid #333; margin-top: 6px; }
.dce-empty { padding: 24px 16px; color: #555; }
.dce-split { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr); gap: 16px; padding: 12px 14px; }
.dce-form h4 { margin: 14px 0 6px; font-size: 14px; border-bottom: 1.5px solid #333; padding-bottom: 2px; }
.dce-form h4:first-child { margin-top: 0; }
.dce-act { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: start; padding: 4px 0; border-bottom: 1px solid #e2e2e2; }
.dce-t { font-size: 11px; color: #555; padding-top: 3px; font-variant-numeric: tabular-nums; }
.dce-del { border: 1px solid #ccc; background: #fff; color: #b02a2a; border-radius: 4px; cursor: pointer; padding: 0 6px; }
.dce-form .btn.sm { margin-top: 6px; }
.dce-fixed { margin-top: 8px; color: #555; font-size: 12px; }
.dce-memo { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid #bbb; border-radius: 4px; padding: 6px; background: #fff; color: #111; resize: vertical; }
.dce-pvwrap { position: sticky; top: 0; align-self: start; }
.dce-preview { display: grid; gap: 8px; margin-top: 4px; }
.dce-page { width: 100%; height: auto; display: block; box-shadow: 0 0 0 1px #bbb, 0 2px 8px rgba(0,0,0,.18); }
.dce-extra { align-items: center; }
@media (max-width: 760px) {
  /* スマホ：場面・使用を隠し、No. の右に2段（区分・入り・BPM ／ 内容・イメージ） */
  .dce-music { grid-template-columns: 40px 1fr 1fr 56px; }
  .dce-music > div:nth-child(3), .dce-music > div:nth-child(5) { display: none; }
  .dce-music > div:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .dce-music > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .dce-music > div:nth-child(4) { grid-column: 3; grid-row: 1; }
  .dce-music > div:nth-child(8) { grid-column: 4; grid-row: 1; }
  .dce-music > div:nth-child(6) { grid-column: 2; grid-row: 2; }
  .dce-music > div:nth-child(7) { grid-column: 3 / 5; grid-row: 2; }
  .dce-music > div:nth-child(1), .dce-music > div:nth-child(2), .dce-music > div:nth-child(4), .dce-music > div:nth-child(8) { border-bottom: 1px solid #e2e2e2; }
  /* 台本：No. の右に2段（役 ／ 台詞） */
  .dce-script { grid-template-columns: 50px 1fr; }
  .dce-script > div:nth-child(2), .dce-script > div:nth-child(3), .dce-script > div:nth-child(4) { display: none; }
  .dce-script > div:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .dce-script > div:nth-child(5) { grid-column: 2; grid-row: 1; border-bottom: 1px solid #e2e2e2; }
  .dce-script > div:nth-child(6) { grid-column: 2; grid-row: 2; }
  .dce-split { grid-template-columns: 1fr; }
  .dce-pvwrap { position: static; }
}

/* 画像補正: a small panel over the main view (the picture is tried out on the main view itself) */
.enh-float { position: fixed; right: 16px; top: 48px; z-index: 40; width: 360px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); padding: 10px 14px 12px; outline: none; }
.enh-float .enh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 600px) { .enh-float { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; } }

/* v1.62: the zoom group, the scene button and the whole-film bar share the timeline's foot 30 : 10 : 60 on a PC */
.tl-zgrp { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
@media (pointer: fine) and (min-width: 900px) {
  .tl-foot .tl-zgrp { flex: 30 1 0; }
  .tl-foot .tl-zgrp .tl-zoom { flex: 1 1 auto; width: auto; min-width: 40px; }
  .tl-foot .zbtn.ico { flex: 10 1 0; min-width: 28px; }
  .tl-foot .tl-ov { flex: 60 1 0; min-width: 60px; }
}
/* v1.71: on a wide screen the play bar under the picture is about half as tall (thin buttons, small time) */
@media (min-width: 1000px) {
  .view-controls { padding-top: 1px !important; padding-bottom: 1px !important; }
  .view-controls .pbtn, .view-controls .vc-btns > .pbtn { height: 14px; border-radius: 3px; }
  .view-controls .pbtn .ico { width: 11px; height: 11px; }
  .view-controls .pbtn.big .ico { width: 12px; height: 12px; }
  .view-time b { font-size: 12px; line-height: 1; }
  .view-time span { font-size: 10px; line-height: 1; }
}

/* v1.71: 脚本管理 — the count under the tab, every button on one row, a grip to reorder, the plain table */
.itab { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.itab .itab-n { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.itab .itab-n:empty { display: none; }
body.ins-fold .itab .itab-n { display: none; }
.ibody.lines { position: relative; }
.ibody.lines .lines-top { flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.ibody.lines .lines-top::-webkit-scrollbar { display: none; }
.ibody.lines .lines-top .btn.sm { flex: 0 1 auto; padding: 2px 5px; font-size: 11px; min-width: 0; }
.ibody.lines .lines-top .btn.sm.on { background: var(--accent2); color: var(--on-accent2); border-color: var(--accent2); }
.lines-row { position: relative; padding-left: 14px; }
.lines-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 13px; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: -2px; color: var(--muted); cursor: grab; touch-action: none; user-select: none; opacity: .5; }
.lines-row:hover .lines-grip, .lines-row.sel .lines-grip { opacity: 1; }
.lines-row.dragging { opacity: .45; }
.lines-drop { position: absolute; left: 6px; right: 6px; height: 2px; background: var(--accent2); pointer-events: none; z-index: 6; }
@media (pointer: coarse) { .lines-grip { width: 20px; opacity: .8; } .lines-row { padding-left: 20px; } }

/* the plain table (default): one line a row, thin rules, no cards */
.ibody.lines.tbl .lines-head { display: grid; grid-template-columns: 40px 66px 1fr 38px; padding: 2px 0; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--line); }
.ibody.lines.tbl .lines-head span:nth-child(2) { padding-left: 14px; }
.ibody.lines.tbl .lines-scene { margin: 4px 0 0; }
.ibody.lines.tbl .lines-group { grid-template-columns: 40px 1fr; gap: 0; padding: 0; border-bottom: 1px solid var(--line); }
.ibody.lines.tbl .lines-cutcell { flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 4px 3px 0; border-right: 1px solid var(--sep); }
.ibody.lines.tbl .lines-cutcell .lines-thumb { display: none; }
.ibody.lines.tbl .lines-cutinfo { flex-direction: column; gap: 0; }
.ibody.lines.tbl .lines-cutcell .lines-add { padding: 0 4px; font-size: 11px; line-height: 13px; }
.ibody.lines.tbl .lines-row { display: grid; grid-template-columns: 66px 1fr 38px; gap: 0; align-items: stretch; margin: 0; padding: 0 0 0 14px; border-left: none; border-radius: 0; background: transparent; border-bottom: 1px solid var(--sep); }
.ibody.lines.tbl .lines-rows .lines-row:last-child { border-bottom: none; }
.ibody.lines.tbl .lines-row.now { background: var(--sel); }
.ibody.lines.tbl .lines-row.sel { outline: none; box-shadow: inset 2px 0 0 var(--accent2); }
.ibody.lines.tbl .lines-row .lines-spk { width: 66px; max-width: 66px; border: none; border-radius: 0; background: transparent; font-size: 11px; padding: 2px 0; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.ibody.lines.tbl .lines-row .lines-text { min-height: 22px; padding: 2px 5px !important; font-size: 13px; line-height: 1.4; border: none; border-left: 1px solid var(--sep); border-radius: 0; background: transparent; color: var(--text); }
.ibody.lines.tbl .lines-row .lines-text:focus { background: var(--field); outline: 1px solid var(--accent2); outline-offset: -1px; }
.ibody.lines.tbl .lines-row .lines-side { position: static; visibility: visible; display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px 2px 0 0; background: none; border-left: 1px solid var(--sep); }
.ibody.lines.tbl .lines-row .lines-side .lines-time { font-size: 10px; min-width: 0; }
.ibody.lines.tbl .lines-row .lines-btns { position: absolute; right: 2px; top: 1px; visibility: hidden; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; z-index: 2; }
.ibody.lines.tbl .lines-row:hover .lines-btns, .ibody.lines.tbl .lines-row.sel .lines-btns, .ibody.lines.tbl .lines-row:focus-within .lines-btns { visibility: visible; }
.ibody.lines.tbl .lines-music { grid-column: 2 / 4 !important; padding: 0 2px 2px 5px; }
@container (max-width: 420px) {
  .ibody.lines.tbl .lines-group { grid-template-columns: 40px 1fr; }
  .ibody.lines.tbl .lines-cutcell { flex-direction: column; align-items: flex-start; }
  .ibody.lines.tbl .lines-row { grid-template-columns: 66px 1fr 38px; }
  .ibody.lines.tbl .lines-row .lines-spk { width: 66px; max-width: 66px; }
}
@media (pointer: coarse) { .ibody.lines.tbl .lines-row { padding-left: 20px; } .ibody.lines.tbl .lines-row .lines-btns { visibility: visible; position: static; } .ibody.lines.tbl .lines-row { grid-template-columns: 66px 1fr auto; } }
.ibody.lines .lines-top .btn.sm { flex: none; }
.ibody.lines .lines-top.tight { gap: 2px; }
.ibody.lines .lines-top.tight .btn.sm { padding: 1px 3px; font-size: 10px; letter-spacing: -.02em; }
/* v1.71: a long script stays light — the boxes size themselves, cuts out of sight are not laid out */
.lines-text { field-sizing: content; }
.ibody.lines .lines-group { content-visibility: auto; contain-intrinsic-size: auto 56px; }
.ibody.lines.tbl .lines-row .lines-side { border-left: none; }
.ibody.lines.tbl .lines-row .lines-text { border-right: 1px solid var(--sep); }
.ibody.lines.tbl .lines-row .lines-spk { align-self: start; height: 24px; }