/* NLE 風ダークテーマ */
:root {
  --bg:        #16181d;
  --panel:     #1e2128;
  --panel2:    #23262e;
  --head:      #262a33;
  --line:      #33384380;
  --line-hard: #383e4a;
  --text:      #d7dae0;
  --dim:       #8b93a1;
  --accent:    #4c9aff;
  --accent2:   #2f6fd0;
  --video:     #5b7fd4;
  --video-sel: #8fb2ff;
  --audio:     #4aa87a;
  --audio-sel: #7fd8ab;
  --danger:    #e0574f;
  --in:        #f0c33c;
  --out:       #f0c33c;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overflow: hidden;
  user-select: none;
}
#app {
  display: grid;
  grid-template-rows: 40px auto minmax(120px,1fr) 6px var(--tl-h, 330px) 26px;
  height: 100%;
}
/* 行は必ず固定で割り当てる。
   素材の警告帯は非表示になるとグリッド項目から消えるので、
   自動配置に任せると以降の行が 1 つずつ繰り上がってしまう */
#app > .toolbar     { grid-row: 1; }
#app > .missing-bar { grid-row: 2; }
#app > .workspace   { grid-row: 3; }
#app > .tl-split    { grid-row: 4; }
#app > .timeline    { grid-row: 5; }
#app > .statusbar   { grid-row: 6; }

/* ---------- ツールバー ---------- */
.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; overflow-x: auto; overflow-y: hidden;
  background: linear-gradient(#2a2e37, #21242b);
  border-bottom: 1px solid #12141880;
}
.brand {
  margin-right: 6px; white-space: nowrap; flex: none;
  display: flex; align-items: center; gap: 8px;
  /* 大文字の帯の中心をツールバーの中心に合わせる。
     em ボックスはベースラインの下に余白があるぶん、素直に中央寄せすると上に寄って見える */
  position: relative; top: 1px;
}
/* 名前と副題は同じインライン文脈に入れて、ベースラインを共有させる */
.brand-text {
  display: block; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  line-height: 1; /* 行の高さ＝文字の高さにして、中央合わせが文字の見た目と一致するようにする */
}
.brand .phase {
  color: var(--dim); font-weight: 400; font-size: 10.5px; margin-left: 7px; letter-spacing: .04em;
}
.brand-icon {
  width: 19px; height: 19px; border-radius: 5px; display: block; flex: none;
  /* 大文字の帯（キャップハイト）の中心に合わせる。line-height:1 だと em ボックス基準に
     なるため、ベースライン下の余白ぶんだけ持ち上げる */
  position: relative; top: -0.5px;
}
.tb-group { display: flex; gap: 4px; align-items: center; }
.tb-sep { width: 1px; height: 22px; background: var(--line-hard); flex: none; }
.spacer { flex: 1; min-width: 8px; }
a.tb { text-decoration: none; }
.tb {
  background: #30353f; color: var(--text); border: 1px solid #3c424e; border-radius: 5px;
  padding: 5px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; flex: none;
}
.tb:hover { background: #3a404b; }
.tb:active { background: #272b33; }
.tb:disabled { opacity: .4; cursor: default; }
.tb.accent { background: var(--accent2); border-color: #3d80e6; }
.tb.accent:hover { background: #3a7fe0; }
.tb.export { background: #2f7a4d; border-color: #3a9560; font-weight: 700; }
.tb.export:hover { background: #37905b; }
.totalinfo { color: var(--dim); font-size: 12px; margin-right: 6px; white-space: nowrap; }
.totalinfo b { color: var(--text); font-variant-numeric: tabular-nums; }
/* クリックで時刻表記と秒表記が切り替わるので、押せることが分かるようにする */
#totalDur { cursor: pointer; border-bottom: 1px dotted var(--dim); }
#totalDur:hover { color: var(--accent); }

/* ---------- ワークスペース ---------- */
.workspace { display: grid; grid-template-columns: 240px minmax(0,1fr) 250px; gap: 1px; background: #101216; min-height: 0; }
.panel { background: var(--panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-head {
  background: var(--head); padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: #aeb6c4;
  border-bottom: 1px solid #14161a; display: flex; align-items: center; gap: 8px; flex: none;
  white-space: nowrap;
}
.panel-head.sub { background: #21242b; border-top: 1px solid #14161a; }

/* メディアビン */
.bin-list { overflow: auto; flex: 1; min-height: 60px; }
.bin-item {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.bin-item:hover { background: #262a33; }
.bin-item.active { background: #2c3a52; box-shadow: inset 3px 0 0 var(--accent); }
.bin-item .n { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-item .m { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.empty { color: var(--dim); font-size: 11.5px; padding: 10px; }
.srcinfo { padding: 8px 10px; font-size: 11px; color: var(--dim); line-height: 1.7; flex: none; }
.srcinfo b { color: var(--text); font-weight: 500; }

/* モニター */
.monitor .tabs { gap: 0; }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 4px 12px; font-size: 12px; cursor: pointer; font-weight: 700;
  white-space: nowrap; flex: none;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.mon-name { margin-left: auto; font-weight: 400; color: var(--dim); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.video-wrap {
  flex: 1; min-height: 0; background: #000; display: flex; align-items: center; justify-content: center; position: relative;
}
#video { max-width: 100%; max-height: 100%; display: block; background: #000; }
.no-media { position: absolute; color: #556; font-size: 13px; }
.scrub { padding: 0 8px; background: var(--panel); }
#scrubBar { width: 100%; height: 34px; display: block; cursor: pointer; }
.transport {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 10px 8px;
  border-top: 1px solid var(--line);
}
.tc { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.tc.dim { color: var(--dim); font-weight: 400; }
.tp-buttons { display: flex; gap: 3px; margin: 0 auto; }
.tp {
  background: #30353f; border: 1px solid #3c424e; color: var(--text);
  border-radius: 4px; min-width: 34px; height: 26px; cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tp:hover { background: #3a404b; }
.tp.play { min-width: 46px; background: #3b424f; }
.rate { color: var(--dim); font-size: 11px; min-width: 26px; }
.inout { color: var(--dim); font-size: 11.5px; }
.inout b { color: var(--in); font-variant-numeric: tabular-nums; }

/* インスペクタ */
.inspector { overflow: auto; }
.form { padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); }
/* チェックボックスだけは横並び（.form label の縦積みに負けていた） */
.form label.chk { flex-direction: row; align-items: center; gap: 6px; }
.form select, .form input[type=text], .form input[type=number] {
  background: #2a2e37; color: var(--text); border: 1px solid #3c424e; border-radius: 4px;
  padding: 4px 6px; font-size: 12px;
}
.form input[type=range] { width: 100%; }
.form .row { display: flex; gap: 8px; align-items: center; }
.srt-count { color: var(--dim); font-size: 11px; }
kbd {
  background: #2f343e; border: 1px solid #454b58; border-bottom-width: 2px; border-radius: 3px;
  padding: 0 4px; font-size: 10px; margin-right: 2px; color: var(--text);
}

/* ---------- タイムライン ---------- */
.timeline { border-top: 1px solid #101216; min-height: 0; overflow: hidden; }
.timeline > .panel-head { overflow-x: auto; overflow-y: hidden; }
.tl-tools { margin-left: auto; display: flex; align-items: center; gap: 5px; font-weight: 400; flex: none; }
.mini {
  background: #30353f; border: 1px solid #3c424e; color: var(--text);
  border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer;
  white-space: nowrap; flex: none;
}
.mini:hover { background: #3a404b; }
/* 縦スクロールはここ。見出しとキャンバスが一緒に動く */
.tl-body {
  flex: 1; display: grid; grid-template-columns: 56px minmax(0,1fr);
  min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start;
}
.tl-heads { background: var(--panel2); border-right: 1px solid var(--line-hard); }
.tl-head {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #9aa2b0; border-bottom: 1px solid var(--line);
}

.tl-canvas-wrap { position: relative; overflow: hidden; }
#tlCanvas { display: block; cursor: default; }

/* 上下を分けるスプリットバー */
.tl-split {
  background: #101216; cursor: row-resize; position: relative;
}
.tl-split::after {
  content: ''; position: absolute; left: 50%; top: 2px; width: 46px; height: 2px;
  transform: translateX(-50%); background: #4a5160; border-radius: 1px;
}
.tl-split:hover { background: #2a3140; }
.tl-split.dragging { background: var(--accent2); }

/* 横スクロール専用の帯 */
.tl-hscroll { height: 13px; overflow-x: auto; overflow-y: hidden; flex: none; background: #14161b; }
.tl-hscroll > div { height: 1px; }
.tl-hscroll::-webkit-scrollbar, .tl-body::-webkit-scrollbar { height: 11px; width: 11px; }
.tl-hscroll::-webkit-scrollbar-track, .tl-body::-webkit-scrollbar-track { background: #14161b; }
.tl-hscroll::-webkit-scrollbar-thumb, .tl-body::-webkit-scrollbar-thumb {
  background: #454c5a; border-radius: 6px; border: 2px solid #14161b;
}
.tl-hscroll::-webkit-scrollbar-thumb:hover, .tl-body::-webkit-scrollbar-thumb:hover { background: #566073; }

/* ---------- ステータスバー ---------- */
.statusbar { display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #1a1d23; border-top: 1px solid #101216; }
.status { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.status.err { color: #ff8a80; }

/* ---------- オーバーレイ ---------- */
.overlay {
  position: fixed; inset: 0; background: #0b0d10cc; display: flex; align-items: center; justify-content: center; z-index: 50;
}
.overlay.hidden { display: none; }
.overlay-box {
  background: var(--panel); border: 1px solid var(--line-hard); border-radius: 10px;
  padding: 20px 24px; width: 560px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px #0009;
}
.overlay-box h2 { margin: 0; font-size: 15px; }
.progress { width: 100%; height: 10px; background: #2b3038; border-radius: 3px; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.ov-text { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ov-log {
  margin: 0; background: #14171c; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px; height: 150px; overflow: auto; font-size: 11px; color: #9aa2b0;
  white-space: pre-wrap; user-select: text;
}
/* 中断は箱いっぱいに広がらず、真ん中に置く（縦並びの既定では横いっぱいに伸びてしまう）*/
#btnCancel { align-self: center; padding: 6px 24px; }

/* ---------- Phase 2: テロップ ---------- */
.hidden { display: none !important; }

.stage { position: relative; line-height: 0; overflow: hidden; }
.stage > video, .stage > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.stage > canvas { cursor: default; }
.stage > canvas.grab { cursor: grab; }
.stage > canvas.grabbing { cursor: grabbing; }
#video { max-width: none; max-height: none; background: #000; }

.tl-head.telop { color: #d9c07a; }

/* テロップ編集フォーム */
#telopForm textarea {
  background: #2a2e37; color: var(--text); border: 1px solid #3c424e; border-radius: 4px;
  padding: 5px 6px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 54px;
}
#telopForm .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#telopForm .swatch { display: flex; align-items: center; gap: 5px; }
#telopForm input[type=color] {
  width: 30px; height: 24px; padding: 0; border: 1px solid #3c424e; border-radius: 4px;
  background: #2a2e37; cursor: pointer;
}
#telopForm .num { width: 100%; }
.preset-row { display: flex; gap: 5px; align-items: center; }
.preset-row select { flex: 1; min-width: 0; }
.align-group { display: flex; gap: 3px; }
.align-group button {
  flex: 1; background: #2a2e37; border: 1px solid #3c424e; color: var(--dim);
  border-radius: 4px; padding: 3px 0; font-size: 11px; cursor: pointer;
}
.align-group button.on { background: var(--accent2); border-color: #3d80e6; color: #fff; }
.sub-label { color: #6f7684; font-size: 10.5px; margin-top: 2px; }
.sub-count { color: #6f7684; font-size: 10.5px; margin: -4px 0 6px; }
.sub-count.warn { color: #ff8a80; }

/* ---------- Phase 3: 音まわり / ぼかし ---------- */
.tl-head.fx { color: #9fd0c0; }


.bin-item.audio { box-shadow: inset 3px 0 0 #7b6fd0; }
.bin-item.audio.active { background: #322c52; }
.bin-item .row { display: flex; align-items: center; gap: 6px; }
.bin-item .row .n { flex: 1; min-width: 0; }
.bin-add {
  background: #3a3560; border: 1px solid #574f8c; color: #d7d2f5; border-radius: 4px;
  font-size: 11px; line-height: 1; padding: 3px 7px; cursor: pointer; flex: none;
}
.bin-add:hover { background: #474080; }
#fxForm .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#fxForm .num, #fxForm input[type=number] { width: 100%; }

/* ---------- タイムラインの範囲選択（カット作業） ---------- */
.tl-edit { display: flex; align-items: center; gap: 4px; margin-left: 14px; font-weight: 400; flex: none; }
.mini.zone { background: #4a4020; border-color: #6d5c28; color: #f0d98c; }
.mini.zone:hover { background: #5c4f26; }
.mini.danger { background: #5a2a26; border-color: #8a3f38; color: #ffc9c2; font-weight: 700; }
.mini.danger:hover { background: #6e332e; }
.mini:disabled { opacity: .35; cursor: default; }
.mini:disabled:hover { background: #30353f; }
.mini.danger:disabled:hover { background: #5a2a26; }
.zone-info {
  color: #c9b876; font-size: 11px; font-variant-numeric: tabular-nums;
  margin-left: 6px; white-space: nowrap;
}

/* ---------- 左パネル：メディア / エフェクトのタブ ---------- */
.bin .panel-head.tabs { padding: 0 4px; }
.tab.bintab { padding: 6px 12px; }
.bin-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bin-actions {
  display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex: none;
}
.bin-actions .mini { flex: 1; padding: 4px 0; }

.fx-item {
  padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.fx-item:hover { background: #262a33; }
.fx-item .row { display: flex; align-items: center; gap: 6px; }
.fx-item .n { flex: 1; font-size: 12px; }
.fx-item .d { font-size: 10.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.bin-item.image { box-shadow: inset 3px 0 0 #d08a4e; }
.bin-item.image.active { background: #43301f; }
.bin-item .thumb {
  width: 100%; height: 54px; object-fit: contain; background: #12141a;
  border-radius: 4px; margin-top: 4px;
}
.place-row { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.place-row button {
  background: #3a3020; border: 1px solid #6b5730; color: #e8d3ab;
  border-radius: 4px; font-size: 10.5px; padding: 2px 7px; cursor: pointer;
}
.place-row button:hover { background: #4a3d27; }

/* ---------- フローティングダイアログ ---------- */
.floating {
  position: fixed; z-index: 40; width: 330px;
  background: var(--panel); border: 1px solid var(--line-hard); border-radius: 9px;
  box-shadow: 0 18px 48px #0009; display: flex; flex-direction: column;
  max-height: 78vh;
}
.floating.hidden { display: none; }
.fl-head {
  background: var(--head); padding: 7px 10px; font-size: 12px; font-weight: 700; color: #cfd6e2;
  border-radius: 8px 8px 0 0; cursor: grab; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #14161a; user-select: none;
}
.fl-head.dragging { cursor: grabbing; }
.fl-close {
  margin-left: auto; background: transparent; border: none; color: var(--dim);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 3px;
}
.fl-close:hover { color: #fff; }
/* min-height:0 が要る。これが無いと中身の高さが下限になって縮まず、
   max-height を超えた分がダイアログの外へはみ出して見えなくなる */
.fl-body { overflow: auto; padding: 10px; flex: 1 1 auto; min-height: 0; }

/* テロップの寄せ指定 */
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.align-grid button {
  background: #2a2e37; border: 1px solid #3c424e; color: var(--dim);
  border-radius: 4px; padding: 5px 0; font-size: 13px; cursor: pointer; line-height: 1;
}
.align-grid button.on { background: var(--accent2); border-color: #3d80e6; color: #fff; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); }
.chk input { accent-color: var(--accent); }

/* タイムライン: 画像トラック */

/* 作業メモ（動画には出ない。プロジェクトに一緒に保存される） */
#notes {
  background: #2a2e37; color: var(--text); border: 1px solid #3c424e; border-radius: 4px;
  padding: 6px 7px; font-size: 12px; line-height: 1.6; font-family: inherit;
  resize: vertical; min-height: 90px; width: 100%;
}
#notes::placeholder { color: #626a78; }

/* 重ね順（最前面／最背面） */
.z-row { display: flex; gap: 5px; }
.z-row .mini { flex: 1; padding: 4px 0; }

/* ---------- 右クリックメニュー ---------- */
.ctx-menu {
  position: fixed; z-index: 60; min-width: 132px; padding: 4px;
  background: var(--panel2); border: 1px solid var(--line-hard); border-radius: 7px;
  box-shadow: 0 12px 32px #000a;
}
.ctx-menu.hidden { display: none; }
.ctx-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; color: var(--text);
  padding: 6px 10px; border-radius: 4px; font-size: 12px; text-align: left; cursor: pointer;
}
.ctx-menu button:hover { background: var(--accent2); color: #fff; }
.ctx-menu button .k { margin-left: auto; color: var(--dim); font-size: 10.5px; }
.ctx-menu button:hover .k { color: #dbe6f7; }

/* ---------- インスペクタのタブ ---------- */
.inspector { overflow: hidden; }
.inspector .panel-head.tabs { padding: 0 2px; flex: none; }
.tab.insptab { padding: 6px 10px; font-size: 11.5px; }
.insp-pane { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.insp-pane.hidden { display: none; }
.notes-pane { padding: 8px; }
.notes-pane textarea {
  flex: 1; width: 100%; min-height: 0; resize: none;
  background: #2a2e37; color: var(--text); border: 1px solid #3c424e; border-radius: 5px;
  padding: 8px; font-size: 12px; line-height: 1.7; font-family: inherit;
}
.notes-pane textarea::placeholder { color: #626a78; }

/* ---------- ショートカット一覧 ---------- */
#helpDialog { width: 360px; }
.keys-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.keys-table th {
  text-align: left; color: #aeb6c4; font-size: 11px; font-weight: 700;
  padding: 9px 0 4px; border-bottom: 1px solid var(--line);
}
.keys-table tr:first-child th { padding-top: 0; }
.keys-table td { padding: 4px 0; vertical-align: top; color: var(--text); }
.keys-table td:first-child { width: 42%; padding-right: 8px; color: var(--dim); }
.keys-table .dim { color: #6f7684; font-size: 10.5px; }

/* 表示トグル（サムネイル・波形） */
.mini.on { background: #2c4a6e; border-color: #3d6da0; color: #cfe4ff; }
.mini.on:hover { background: #35578020; background: #355780; }

/* ---------- アイコンボタン ---------- */
.ic { width: 17px; height: 17px; display: block; flex: none; color: currentColor; }
.tb, .mini { display: inline-flex; align-items: center; gap: 6px; }
.tb.ico, .mini.ico { padding-left: 8px; padding-right: 8px; gap: 0; }
.mini .ic { width: 15px; height: 15px; }
.tb.export .ic { width: 16px; height: 16px; }
.tb.ico:disabled, .mini.ico:disabled { opacity: .3; }
.tl-sep { width: 1px; height: 15px; background: var(--line-hard); flex: none; margin: 0 3px; }
.bin-actions .mini { justify-content: center; gap: 5px; }
.bin-actions .mini span { font-size: 11px; }
.fx-item kbd { margin-right: 2px; }
.mini.accent { background: var(--accent2); border-color: #3d80e6; color: #fff; }
.mini.accent:hover { background: #3a7fe0; }
.transport .inout { margin-left: auto; }

/* ---------- サムネモードのバー ---------- */
.thumb-bar .spacer { flex: 1; }
.thumb-bar .thumb-label { color: var(--dim); font-size: 11.5px; }
.thumb-bar .thumb-base {
  color: var(--dim); font-size: 11.5px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thumb-bar .thumb-base.unset { font-style: italic; opacity: .7; }
.thumb-bar select {
  background: #30353f; border: 1px solid #3c424e; color: var(--text);
  border-radius: 4px; height: 26px; font-size: 11.5px; max-width: 190px;
}
/* サムネ編集中は映像を出さない（下敷きは overlay に描く） */
.monitor.thumb-mode #video { visibility: hidden; }
.monitor.thumb-mode .scrub, .monitor.thumb-mode .transport:not(.thumb-bar) { display: none; }
.monitor.thumb-mode .no-media { display: none !important; }

/* ---------- テロップの行タブ ---------- */
.row-tabs { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 2px; }
.row-tab {
  background: #2a2e37; border: 1px solid #3c424e; color: var(--dim);
  border-radius: 4px; min-width: 24px; padding: 3px 6px; font-size: 11px; cursor: pointer;
}
.row-tab:hover { background: #343a45; color: var(--text); }
.row-tab.on { background: var(--accent2); border-color: #3d80e6; color: #fff; font-weight: 700; }
.row-tab.add { color: #8fd0a0; }
.row-tab.del { color: #e09a94; }
.panel-head.sub.inline {
  margin: 4px -10px 0; border-top: 1px solid #14161a; border-bottom: none;
  /* 設定が多いので、スクロールしても今どの区分を見ているか分かるようにする */
  position: sticky; top: 0; z-index: 2;
}
.align-grid.four { grid-template-columns: repeat(4, 1fr); }

/* トラック見出し（本数が変わるので高さは JS 側で指定する） */
.tl-head.fx { color: #9fd0c0; }
.tl-head.image { color: #e0ab74; }
.tl-head.telop { color: #d9c07a; }
.tl-head.sub { color: #7fd4e0; }
.tl-head.music { color: #b0a8d8; }
.tl-head.audio { color: #86c9a4; }
.tl-head.video { color: #9fb6e6; }

/* テロップセットのライブラリ */
.bin-item.lib { box-shadow: inset 3px 0 0 #d9c07a; }
/* 並べ替え。掴んでいる本人は薄く、入る場所には線を出す */
.bin-item.lib.dragging { opacity: .45; }
.bin-item.lib.drop-before { box-shadow: inset 3px 0 0 #d9c07a, inset 0 2px 0 var(--accent); }
.bin-item.lib.drop-after { box-shadow: inset 3px 0 0 #d9c07a, inset 0 -2px 0 var(--accent); }
.bin-edit {
  background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 4px;
  font-size: 11px; line-height: 1; padding: 3px 6px; cursor: pointer; flex: none;
}
.bin-edit:hover { color: var(--text); border-color: #6b6f7d; }
.bin-del {
  background: #43303a; border: 1px solid #6b4550; color: #e6b8c2; border-radius: 4px;
  font-size: 11px; line-height: 1; padding: 3px 6px; cursor: pointer; flex: none;
}
.bin-del:hover { background: #563a46; }
.mini.wide { width: 100%; justify-content: center; }

/* ぼかしのキーフレーム */
.key-list { display: flex; flex-wrap: wrap; gap: 4px; }
.key-chip {
  background: #233a36; border: 1px solid #3d6b62; color: #a8ded2;
  border-radius: 4px; padding: 2px 7px; font-size: 10.5px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.key-chip:hover { background: #2e4f49; color: #d6f5ec; }

/* ---------- ツールチップ（標準の title は出るまでが遅く、時間も変えられないので自前）---------- */
.tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: #10131a; color: #e3e8f0; border: 1px solid #3c424e;
  border-radius: 6px; padding: 5px 9px; font-size: 11.5px; line-height: 1.5;
  /* 1 行の説明が途中で折り返されないだけの幅を持たせる。
     改行したい所は説明側に改行を入れる（pre-line で保たれる） */
  max-width: 520px; box-shadow: 0 8px 24px #0009;
  white-space: pre-line;
  opacity: 0; transition: opacity .09s ease-out;
}
.tip.show { opacity: 1; }
.tip.hidden { display: none; }

/* MCP 接続ランプ */
.mcp-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  flex: none; margin-right: 4px; background: #4a5160;
}
.mcp-dot.off { background: #4a5160; }
.mcp-dot.connecting, .mcp-dot.waiting { background: #c9a94e; animation: mcpPulse 1.2s ease-in-out infinite; }
.mcp-dot.on { background: #4bd18a; box-shadow: 0 0 6px #4bd18a88; }
@keyframes mcpPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* フッターの版表示 */
.version {
  margin-left: auto; color: #626a78; font-size: 10.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-left: 12px; flex: none;
}

/* 読み込み直しが要る素材 */
.bin-item.missing { opacity: .72; }
.bin-item.missing .n { color: #c9a0a0; }
.warnline { color: #d09a72 !important; }

/* 素材が見つからない時の案内 */
.missing-bar {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 12px;
  background: #3a2f1c; border-bottom: 1px solid #5a4a28; color: #e8d3ab; font-size: 12.5px;
  flex-wrap: wrap;
}
.missing-bar.hidden { display: none; }
.missing-bar .ic { width: 16px; height: 16px; flex: none; color: #d9b25f; margin-top: 1px; }
/* 素材名は折り返す。1 行に押し込んで省略すると、窓を広げないと読めない */
.missing-bar .mb-text, .missing-bar .sv-text {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.missing-bar .mb-names {
  color: #cbb08a; word-break: break-all;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.missing-bar .tb { padding: 4px 12px; font-size: 12px; flex: none; }

/* ---- 作業フォルダ ---- */
.workdir {
  font-size: 12px; color: var(--dim);
  max-width: 200px; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 2px;
}
.workdir-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workdir-x {
  background: none; border: none; color: var(--dim); border-radius: 3px;
  font-size: 11px; line-height: 1; padding: 2px 4px; cursor: pointer; flex: none;
}
.workdir-x:hover { background: #43303a; color: #e6b8c2; }
#projPick { width: 420px; left: 50%; top: 22%; transform: translateX(-50%); }
#projPick .fl-head { cursor: default; }
#projPickList { display: flex; flex-direction: column; gap: 4px; }
.pick-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; padding: 8px 10px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); cursor: pointer; font: inherit;
}
.pick-row:hover { background: var(--head); }
.pick-name { font-size: 13px; }
.pick-time { font-size: 11px; color: var(--dim); }

/* ---- 作業フォルダを開くまでの案内 ---- */
.welcome {
  /* 下 26px はステータスバー。フッターの表記は最初の画面でも見えるように残す */
  position: fixed; left: 0; right: 0; top: 40px; bottom: 26px; z-index: 30;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
}
.welcome.hidden { display: none; }
.wc-icon { width: 96px; height: 96px; image-rendering: auto; }
.welcome h1 { margin: 0; font-size: 24px; letter-spacing: .08em; color: var(--text); }
.wc-lead { margin: 0; font-size: 14px; line-height: 1.9; color: var(--text); }
.wc-btns { display: flex; gap: 10px; margin-top: 4px; }
.welcome .tb.export { padding: 9px 20px; font-size: 14px; }
.welcome .tb.hidden { display: none; }
.wc-note { margin: 0; max-width: 560px; font-size: 12px; line-height: 1.9; color: var(--dim); }
.wc-note a { color: var(--accent); }

/* 作業フォルダが無い間は、フォルダとヘルプ以外は押せない */
body.no-workdir .toolbar .tb:not(#btnWorkDir):not(#btnHelp) { opacity: .35; pointer-events: none; }
.welcome .tb.wc-alt {
  padding: 9px 20px; font-size: 14px;
  background: var(--panel2); border: 1px solid var(--line-hard); color: var(--text);
}
.welcome .tb.wc-alt:hover { background: var(--head); }

/* フローティングダイアログの下部に常に見えている操作 */
.fl-foot {
  flex: none; padding: 8px 10px; border-top: 1px solid var(--line-hard);
  background: var(--panel2); border-radius: 0 0 8px 8px;
}

/* ダイアログ右下のリサイズつまみ */
.fl-grip {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 1;
  background:
    linear-gradient(135deg, transparent 50%, var(--dim) 50%, var(--dim) 60%, transparent 60%,
                    transparent 72%, var(--dim) 72%, var(--dim) 82%, transparent 82%);
  opacity: .6;
}
.fl-grip:hover { opacity: 1; }

/* ダイアログの中身は縦に長くなるので、スクロールバーを常に見えるようにする
   （macOS の既定は普段隠れていて、スクロールできることに気づけない） */
.fl-body::-webkit-scrollbar { width: 11px; }
.fl-body::-webkit-scrollbar-track { background: #14161b; }
.fl-body::-webkit-scrollbar-thumb { background: #454c5b; border-radius: 6px; border: 2px solid #14161b; }
.fl-body::-webkit-scrollbar-thumb:hover { background: #566073; }
.fl-body { scrollbar-width: thin; scrollbar-color: #454c5b #14161b; }

/* ライブラリフォルダの表示 */
.lib-dir { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; }
.lib-dir .mini { flex: none; }
.lib-dir-name {
  flex: 1; min-width: 0; font-size: 11px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-dir-name.unset { color: var(--dim); font-style: italic; }

/* メディア一覧の絞り込み */
.bin-filter { display: flex; gap: 4px; padding: 0 8px 6px; }
.bin-filter button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  color: var(--dim); font-size: 11px; padding: 4px 2px; cursor: pointer;
}
.bin-filter button .ic { width: 12px; height: 12px; }
.bin-filter button:hover { color: var(--text); }
.bin-filter button.on { background: var(--head); border-color: var(--line-hard); color: var(--text); }

/* 書き出し中 */
.tb.export.busy, .tb.export:disabled { opacity: .5; cursor: progress; }
body.exporting .status { color: var(--accent); font-weight: 700; }

/* フッターのリンク */
.foot-links { display: flex; gap: 10px; flex: none; font-size: 11.5px; }
.foot-links a { color: var(--dim); text-decoration: none; white-space: nowrap; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

/* 説明が付いているタイムライン見出し */
.panel-head > span[title] { cursor: help; border-bottom: 1px dotted #4a5160; }

/* 色の見本（基本色をすぐ選べるように） */
#telopForm .swatch { flex-wrap: wrap; }
#telopForm .chips { display: flex; gap: 3px; flex: 1; min-width: 0; flex-wrap: wrap; }
#telopForm .chip {
  width: 16px; height: 16px; padding: 0; flex: none;
  border: 1px solid #00000060; border-radius: 3px; cursor: pointer;
  box-shadow: inset 0 0 0 1px #ffffff20;
}
#telopForm .chip:hover { transform: scale(1.15); }
#telopForm .chip.on { outline: 2px solid var(--accent); outline-offset: 1px; }

/* フォント選び */
.font-btn {
  background: #2a2e37; color: var(--text); border: 1px solid #3c424e; border-radius: 4px;
  padding: 5px 8px; font-size: 14px; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.font-btn:hover { border-color: var(--accent); }
#fontPick { width: 380px; left: 50%; top: 12%; transform: translateX(-50%); max-height: 76vh; }
#fontPick .fl-head { cursor: default; }
.fl-sub { padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.fl-sub input {
  width: 100%; background: #2a2e37; color: var(--text);
  border: 1px solid #3c424e; border-radius: 4px; padding: 5px 8px; font-size: 12px;
}
.font-group {
  position: sticky; top: 0; background: var(--panel); color: var(--dim);
  font-size: 10.5px; padding: 6px 4px 3px; border-bottom: 1px solid var(--line);
}
.font-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px;
  width: 100%; text-align: left; padding: 7px 8px; margin: 2px 0;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text); cursor: pointer;
}
.font-row:hover { background: var(--panel2); border-color: var(--line); }
.font-row.on { background: var(--head); border-color: var(--accent); }
.font-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-sample { font-size: 14px; color: var(--dim); white-space: nowrap; }
.font-en { grid-column: 1 / -1; font-size: 10.5px; color: var(--dim); }
.fl-foot.font-foot { display: flex; gap: 6px; }
.fl-foot.font-foot .mini { flex: 1; justify-content: center; }

/* 書体の飾り（太字・斜体・下線・取り消し線） */
.align-grid.deco button { font-size: 14px; }
.align-grid .d-bold { font-weight: 800; }
.align-grid .d-italic { font-style: italic; }
.align-grid .d-underline { text-decoration: underline; }
.align-grid .d-strike { text-decoration: line-through; }

/* 一覧に無いフォントを名前で指定する欄 */
.fl-sub.manual { border-top: 1px solid var(--line); border-bottom: none; }
.fl-sub.manual label { display: block; font-size: 10.5px; color: var(--dim); margin-bottom: 4px; }
.manual-row { display: flex; gap: 6px; }
.manual-row input { flex: 1; min-width: 0; }
.manual-row .mini { flex: none; }
.manual-note { font-size: 10.5px; margin-top: 4px; min-height: 1em; }
.manual-note.ok { color: var(--audio-sel); }
.manual-note.bad { color: #ff9f9f; }

/* 画像の「使う範囲」ピッカー。元画像を切り出さずに、ここで範囲を決める */
.crop-sec { border-top: 1px solid #333944; margin-top: 8px; padding-top: 8px; }
.crop-canvas {
  width: 100%; display: block; margin: 4px 0 6px;
  background: #12151a; border: 1px solid #3c424e; border-radius: 4px;
  cursor: crosshair; touch-action: none;
}

/* メディア一覧の画像。配置ボタンは既定で畳む（増えると埋まるため） */
.bin-more {
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 11px; padding: 0 4px; line-height: 1; flex: none;
}
.bin-more:hover { color: var(--text); }