:root{--bg:#1b1d21;--panel:#25282e;--line:#3a3f47;--fg:#e6e8ea;--accent:#4a9eff;--clip:#2d6ea8}
*{box-sizing:border-box}
body{margin:0;height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;
     background:var(--bg);color:var(--fg);font:13px/1.5 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif}
#toolbar{display:flex;align-items:center;gap:12px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
/* ワードマーク。★ 高さだけ指定して幅は成り行き（縦横比を崩さない）。
   画像が無いときは alt の文字が出るので、その見え方も整えておく */
#brand{height:20px;width:auto;flex:none;font-size:13px;font-weight:600;color:var(--fg)}
.spacer{flex:1}
button,.file,#help{background:#333842;color:var(--fg);border:1px solid var(--line);border-radius:4px;
             padding:4px 10px;cursor:pointer;font:inherit}
button.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* 使い方ページへの導線。見た目はボタンに合わせるが、実体はただのリンク */
#help{flex:none;text-decoration:none;white-space:nowrap}
#editor{display:grid;grid-template-columns:180px 1fr 300px;overflow:hidden}
#fx-panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:8px 10px}
#track-headers{background:var(--panel);border-right:1px solid var(--line);overflow:hidden}
.ruler-pad{border-bottom:1px solid var(--line)}

/* トラックヘッダ（SPEC 12）。行だけを scrollTop ぶんずらすので、目盛りぶんのパッドは外に置く */
.th-top{display:flex;align-items:center;gap:4px}
.th-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.th-name-edit{flex:1;min-width:0;background:#1b1e24;color:var(--fg);
              border:1px solid var(--accent);border-radius:3px;padding:1px 4px;font:inherit;font-size:13px}
.th-del{padding:0 5px;line-height:1.4;opacity:.5}
.th-del:hover:not(:disabled){opacity:1;border-color:#c0504d;color:#ff9c99}
.th-del:disabled{opacity:.2;cursor:default}
.th-flags{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
/* ★ M/S の箱。マスターは中身が空になるので、min-height で高さを確保して
   トラックと背を揃える。空にすると 1 本だけ背が低くなって並びが崩れる。 */
.th-toggles{display:flex;align-items:center;gap:4px;min-height:24px}
/* ★ M/S と音量の入れ物。向きはここでだけ変える。
   ヘッダの 1 行は TRACK_H(96px) に収める必要があるので、横に並べる。
   縦に積むと 1 行はみ出して下のトラックに掛かる。 */
.th-controls{display:flex;gap:6px;min-width:0}
.strip-row .th-controls{flex-direction:row;align-items:center}
.strip-column .th-controls{flex-direction:column;align-items:center}
.th-flag{padding:1px 7px;font-size:12px;line-height:1.5}
.th-flag.on{background:var(--accent);border-color:var(--accent);color:#fff}
.th-gain{flex:1;min-width:0;margin:0}

/* 音量フェーダー（SPEC 12）。目盛り・スライダー・数値入力をひとまとめにする。
   ★ 向きは flex-direction だけで変える。縦用と横用を 2 つ書かない。 */
.th-fader{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.th-db{width:52px;min-width:0;background:#1b1e24;color:var(--fg);border:1px solid var(--line);
       border-radius:3px;padding:1px 3px;font:inherit;font-size:11px;text-align:right}
.th-db::-webkit-inner-spin-button{opacity:.4}

/* 目盛り。★ 真ん中の 1 本が零点（0 dB＝原音のまま）。
   スライダーは 0〜2 の線形なので、零点はちょうど中央に来る。
   ★ スライダーと同じセルに敷いて重ねる。つまみより背を高くして、
     溝に隠れず両端がはみ出して見えるようにする。 */
.th-ticks{display:flex;justify-content:space-between;flex:none;pointer-events:none}
.th-ticks .tick{background:var(--line);display:block}
.th-ticks .tick.unity{background:var(--accent)}

/* 横向き（トラックヘッダ）：目盛りの上にスライダーを重ね、右に数値を置く */
.strip-row .th-fader{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px}
.strip-row .th-ticks{grid-area:1/1;flex-direction:row;align-items:center;height:14px}
.strip-row .th-ticks .tick{width:1px;height:10px}
.strip-row .th-ticks .tick.unity{width:2px;height:14px}
.strip-row .th-gain{grid-area:1/1;background:transparent}
.strip-row .th-db{grid-area:1/2}
/* 使用中の曲線の一覧（M4 オートメーション）。色はタイムラインの曲線と揃える */
/* 会場プリセット（MODES.md）。選ぶだけで全体が整う入口 */
.venue-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.venue{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
       padding:6px 9px;text-align:left;line-height:1.35}
.venue strong{font-size:13px}
.venue small{opacity:.6;font-size:11px}
.venue.active{background:var(--accent);border-color:var(--accent);color:#fff}
.venue.active small{opacity:.85}
.venue-clear{width:100%;margin-top:6px;font-size:12px;opacity:.7}
.venue-clear:hover{opacity:1}

/* 詳細設定あり（MODES.md）。値は触らず、知らせるだけ */
.adv-badge{display:inline-block;margin:0 0 6px;padding:1px 7px;border-radius:3px;
           background:#3b3320;color:#f0c674;font-size:11px}
.to-advanced{width:100%;margin-top:10px;font-size:12px;opacity:.75}
.to-advanced:hover{opacity:1}

.stage-row{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.stage-row button{font-size:12px}
.auto-list{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.auto-row{display:flex;align-items:center;gap:6px;padding:3px 5px;border-radius:4px;cursor:pointer}
.auto-row:hover{background:#2f343c}
.auto-row.active{background:#2a2f38;box-shadow:inset 0 0 0 1px var(--accent)}
.auto-chip{width:10px;height:10px;border-radius:50%;flex:none}
.auto-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.auto-row .hint,.auto-row .ng{font-size:11px;margin:0}

.th-add{width:calc(100% - 16px);margin:6px 8px;opacity:.8;font-size:13px}

/* ミキサーの 1 本ぶん（SPEC 12）。★ 中身は共通で、向きだけを変える。
   縦用と横用に 2 つ書かないこと。以後どちらかを直し忘れる。 */
.strip{display:flex;gap:6px;padding:0 8px;box-sizing:border-box;
       border-left:3px solid transparent;cursor:pointer}
.strip-row{flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);
           overflow:hidden} /* 高さは TRACK_H 固定。あふれても下の行に掛けない */
.strip-column{flex-direction:column;align-items:stretch;width:120px;padding:10px 8px;
              border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.strip.active{border-left-color:var(--accent);background:#2a2f38}
.strip.fx-on{box-shadow:inset 0 0 0 1px var(--accent)}
.strip-master{background:#2b3038;border-left-color:#6d7683}
.strip-master .th-name{font-weight:600}
.th-fx{font-size:12px;padding:1px 6px;opacity:.75;text-align:left}
.th-fx.on{opacity:1;border-color:var(--accent);color:var(--accent)}

/* ミキサー（SPEC 12）。非モーダルの dialog なので、開いたまま右パネルを触れる。
   ★ 右パネル（300px）に重ならない幅に収める。マスターのエフェクトを
     調整しながら使うものなので、隠れると意味が無い。 */
/* 右クリックメニュー。★ 出す項目は呼び出し側が決める */
#ctx-menu{position:fixed;z-index:50;min-width:200px;padding:4px;
          background:var(--panel);border:1px solid var(--line);border-radius:6px;
          box-shadow:0 6px 24px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px}
#ctx-menu[hidden]{display:none}
#ctx-menu button{background:none;border:0;border-radius:4px;padding:5px 10px;
                 text-align:left;font-size:12px;white-space:nowrap}
#ctx-menu button:hover:not(:disabled){background:var(--accent);color:#fff}
#ctx-menu button:disabled{opacity:.35;cursor:default}
#ctx-menu hr{border:0;border-top:1px solid var(--line);margin:3px 6px}

/* 「…」付きの項目から数値を聞くダイアログ */
#ask{background:var(--panel);color:var(--fg);border:1px solid var(--line);
     border-radius:8px;padding:14px 16px;min-width:260px}
#ask::backdrop{background:rgba(0,0,0,.45)}
#ask h2{margin:0 0 6px;font-size:14px}
#ask .ask-hint{margin:0 0 10px;font-size:11px}
.ask-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}
.ask-row span{flex:1}
.ask-row input{width:80px;background:#1b1e24;color:var(--fg);border:1px solid var(--line);
               border-radius:3px;padding:2px 4px;font:inherit;text-align:right}
.ask-row small{width:2.5em;opacity:.6}
#ask menu{display:flex;justify-content:flex-end;gap:6px;margin:12px 0 0;padding:0}

/* 書き出す範囲を選ぶ（SPEC 9）。2 つを並べて、それぞれ何秒になるかを出す */
#export-dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);
               border-radius:8px;padding:14px 16px;min-width:320px}
#export-dialog::backdrop{background:rgba(0,0,0,.45)}
#export-dialog h2{margin:0 0 10px;font-size:14px}
#export-dialog h3{margin:12px 0 6px;font-size:12px;opacity:.7;font-weight:normal}
.export-bits{display:flex;align-items:center;gap:8px;font-size:12px}
.export-choices button:disabled{opacity:.4;cursor:default}
.export-choices{display:flex;gap:8px;margin:0 0 10px;padding:0}
.export-choices button{flex:1;display:flex;flex-direction:column;gap:3px;
                       align-items:flex-start;padding:8px 10px;text-align:left}
.export-choices small{opacity:.6;font-size:11px}

#mixer{position:fixed;left:16px;bottom:16px;top:auto;right:auto;margin:0;
       max-width:calc(100vw - 340px);max-height:70vh;padding:0;
       background:var(--panel);color:var(--fg);border:1px solid var(--line);
       border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);overflow:hidden}
#mixer:not([open]){display:none}
#mixer-head{display:flex;align-items:center;gap:8px;padding:6px 10px;
            border-bottom:1px solid var(--line);background:#2b2f36;
            cursor:move;user-select:none;touch-action:none}
#mixer-close{padding:0 7px;line-height:1.4}
#mixer-strips{display:flex;align-items:stretch;gap:10px;padding:12px;overflow:auto;max-height:calc(70vh - 40px)}
/* 縦向き（ミキサー）：目盛りの上にスライダーを重ね、下に数値を置く */
#mixer .th-toggles{justify-content:center}
#mixer .th-flags{justify-content:center;flex:none}
#mixer .th-fader{display:grid;grid-template-columns:auto;grid-template-rows:auto auto;
                 justify-items:center;gap:8px;flex:none}
#mixer .th-ticks{grid-area:1/1;flex-direction:column;align-items:center;width:26px;height:120px}
#mixer .th-ticks .tick{width:14px;height:1px}
#mixer .th-ticks .tick.unity{width:26px;height:2px}
#mixer .th-gain{grid-area:1/1;height:120px;width:26px;margin:0;background:transparent;
                writing-mode:vertical-lr;direction:rtl}
#mixer .th-db{grid-area:2/1;width:60px;text-align:center}
/* マスターの縦メーター。フェーダーと同じ高さに揃える */
.strip-meter{display:flex;justify-content:center;align-items:stretch;gap:3px}
.strip-meter .meter{height:120px;width:9px}
.strip-meter .meter-scale{height:120px}
#timeline{position:relative;overflow:auto}
#scroll-spacer{width:100%;height:100%}
#canvas{position:absolute;top:0;left:0;display:block}
/* 情報ライン（SPEC 12）。選択クリップの事実だけ。ツマミは置かない */
#info-line{display:flex;align-items:center;gap:14px;padding:3px 12px;min-height:24px;
           background:#1f2228;border-bottom:1px solid var(--line);
           font:11px/1.4 ui-monospace,monospace;color:#aab2bd;overflow:hidden;white-space:nowrap}
#info-line .k{opacity:.55;margin-right:4px}
#info-line .none{opacity:.45;font-family:inherit}

/* 画面下部。左に再生系、右にメーター */
#transport{display:flex;align-items:center;gap:12px;padding:6px 12px;
           background:var(--panel);border-top:1px solid var(--line)}
.tp-play{display:flex;gap:4px}
.tp-play button{min-width:38px}
.tp-time{display:flex;align-items:baseline;gap:6px;font:15px/1 ui-monospace,monospace}
.tp-time .hint{font-size:11px}
.tp-read{display:flex;flex-direction:column;justify-content:center;gap:2px;
         font:11px/1 ui-monospace,monospace}
.hint{opacity:.5;margin:0}
.tools,.transport,.zoom{display:flex;align-items:center;gap:4px}
#time{font:12px/1 ui-monospace,monospace;min-width:6em;text-align:center}
#status{min-width:16em}

/* メーター（カテゴリ 9）。★ 縦棒。下から伸びる。
   目盛りは -6dB と -12dB の位置に薄い線を入れて、どのくらい余裕があるか見えるようにする */
#meters{display:flex;align-items:flex-end;gap:3px}
.meter{position:relative;width:8px;height:34px;background:#15171b;
       border:1px solid var(--line);border-radius:2px;overflow:hidden}
/* 目盛りの線。位置は dB（-6 / -24）。数値は .meter-scale が出す */
.meter::before{content:'';position:absolute;left:0;right:0;bottom:87.5%;
               border-top:1px solid rgba(255,255,255,.16)}
.meter::after{content:'';position:absolute;left:0;right:0;bottom:50%;
              border-top:1px solid rgba(255,255,255,.1)}
.meter i{position:absolute;left:0;right:0;bottom:0;height:0;
         background:#4ade80;transition:height .04s linear}
.meter i.warn{background:#fbbf24}
.meter i.over{background:#f87171}
/* 数値目盛り。★ 位置は JS（meterPosition）が入れる。CSS に % を直書きしない */
.meter-scale{position:relative;width:1.8em;height:34px;
             font:9px/1 ui-monospace,monospace;color:#7c848f}
.meter-scale span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap}
.meter-scale span::before{content:'';position:absolute;left:-3px;top:50%;width:2px;
                          border-top:1px solid #4a5058}
#meter-db{min-width:4.5em;text-align:right;opacity:.8}
#meter-corr{min-width:4.5em;text-align:right;opacity:.6}
#meter-corr.ng{opacity:1;color:#f87171}
#inspector dl{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0}
#inspector .field{display:flex;flex-direction:column;min-width:88px;
                  padding:3px 8px;border-left:2px solid var(--line)}
#inspector dt{opacity:.55;font-size:11px;line-height:1.3}
#inspector dd{margin:0;font:13px/1.3 ui-monospace,monospace}
#inspector h2,#fx-panel h2{font-size:12px;margin:0 0 6px;font-weight:600}

/* エフェクト UI。★ レジストリから自動生成される。エフェクトごとの CSS を足さないこと */
.fx-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;
         padding-bottom:6px;border-bottom:1px solid var(--line)}
.fx-title{font-size:12px;font-weight:600}
.fx-head select{margin-left:auto}
.fx-for{font-size:11px;opacity:.6;margin:-4px 0 8px;overflow-wrap:anywhere}
.fx{border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin-bottom:8px;background:#2b2f36}
.fx-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;cursor:pointer;
              list-style:none;user-select:none}
.fx-card-head::-webkit-details-marker{display:none}
.fx-card-head::before{content:'▶';font-size:8px;opacity:.6;transition:transform .12s}
details.fx[open]>.fx-card-head::before{transform:rotate(90deg)}
details.fx:not([open]){padding-bottom:6px}
.fx-preset{font-size:11px;padding:2px 4px;max-width:11em}
.fx-name{font-size:12px;font-weight:600}
.fx-tools{margin-left:auto;display:flex;gap:2px}
.fx-tools button{padding:1px 6px;line-height:1.2}
.badge{font-size:10px;opacity:.7;border:1px solid var(--line);border-radius:3px;padding:0 4px}
.fx-param{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2px 6px;margin-top:8px}
.fx-param label{font-size:11px;opacity:.7}
.fx-param input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent);margin:0}
/* そのつまみの曲線へ飛ぶボタン（M4 オートメーション）。見出しの行の右端に並べる。
   ★ 列を 3 つにしてあるのは、これと数値表示を重ねないため */
.fx-auto{padding:0 6px;font-size:11px;line-height:1.5;opacity:.55}
.fx-auto:hover{opacity:1}
.fx-auto.on{opacity:1;background:var(--accent);border-color:var(--accent);color:#fff}
.fx-value{font:12px/1 ui-monospace,monospace;text-align:right}
.fx-select{grid-template-columns:1fr auto}
.fx-select select{grid-column:2}
.clip-box,.beat-box,.stage-box,.auto-box,.venue-box,.silence-box,.fxlist-box{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ng{color:#ffd166}

/* 右パネルのタブ */
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tabs button{flex:1;padding:5px 4px;font-size:12px}
.tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* 折り畳めるトピック。項目が増えても目当てのものを探せるように */
.group{border-top:1px solid var(--line)}
.group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
               padding:8px 2px;font-size:11px;font-weight:600;opacity:.75;user-select:none}
.group>summary::-webkit-details-marker{display:none}
.group>summary::before{content:'▶';font-size:8px;opacity:.7;transition:transform .12s}
.group[open]>summary::before{transform:rotate(90deg)}
.group>summary:hover{opacity:1;color:var(--accent)}
.group[open]{padding-bottom:8px}

/* 操作の枠。★ 値とボタンは必ず同じ枠に入れる（どの値がどのボタンか分かるように） */
.act-card{border:1px solid var(--line);border-radius:6px;padding:8px;margin-bottom:8px;background:#2b2f36}
.act-card h4{font-size:12px;font-weight:600;margin:0}
.act-hint{font-size:11px;opacity:.55;margin:3px 0 0;line-height:1.45}
.act-card button{width:100%;margin-top:8px;text-align:center}
.act-card button:disabled{opacity:.4;cursor:default}
.numbox{display:flex;align-items:center;justify-content:space-between;gap:6px;
        font-size:11px;opacity:.85;margin-top:8px}
.numbox input{width:5.5em;text-align:right;padding:3px 5px}
.numbox span:last-child{min-width:2.8em;opacity:.7}
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;max-width:36em;padding:20px}
dialog h2{font-size:14px;margin:0 0 8px}
dialog menu{display:flex;gap:8px;padding:0;margin:12px 0 0}
/* ★ ダイアログの中の注記。.hint は薄いので、読ませたい文だけ少し戻す */
dialog .hint{opacity:.7;margin-top:10px;font-size:12px}
dialog a{color:var(--accent)}
#notice form{margin-top:14px}
#relink-list{margin:8px 0;padding-left:1.2em;font:12px/1.7 ui-monospace,monospace}
#relink-list .ok{opacity:.5}
#relink-list .ng{color:#ffd166}
.warn{color:#ffd166;margin:4px 0 0;font-size:12px;white-space:pre-line}
input,select{background:#333842;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:4px 6px;font:inherit}
#project-name{font-weight:600}