:root{
  --bg:#12151c; --panel:#1a1f2a; --panel2:#222938; --line:#2e3648;
  --tx:#e8edf6; --tx2:#9aa5b8; --accent:#4c9aff; --accent2:#2f6fd0;
  --danger:#e0556a; --ok:#3fb984;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
.hidden{display:none !important}
button,select{font:inherit}

/* ── 上部バー ── */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:8px}
.logo{color:var(--accent)}
.bar-right{display:flex; align-items:center; gap:8px; min-width:0}
.fname{color:var(--tx2); font-size:13px; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.btn{
  background:var(--panel2); color:var(--tx); border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; cursor:pointer; line-height:1.2;
  transition:background .12s, transform .06s;
}
.btn:hover:not(:disabled){background:#2b3346}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{background:var(--accent2); border-color:var(--accent); color:#fff; font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--accent)}
.btn.danger{border-color:#5c2b36; color:#ffb3bf}
.btn.danger:hover:not(:disabled){background:#3a2029}
.btn.icon{padding:8px 12px; min-width:44px}
.btn.big{padding:14px 28px; font-size:17px; border-radius:12px}

/* ── ドロップ画面 ── */
.drop{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
.drop.over .drop-inner{border-color:var(--accent); background:#1b2537}
.drop-inner{
  border:2px dashed var(--line); border-radius:20px; padding:48px 40px; text-align:center; max-width:640px;
  transition:.15s;
}
.drop-icon{font-size:56px}
.drop h1{font-size:22px; margin:14px 0 6px}
.drop p{color:var(--tx2); margin:8px 0}
.note{color:var(--tx2); font-size:13px; line-height:1.7; margin-top:18px}
.note.small{font-size:12px}

/* ── 編集画面 ── */
.editor{flex:1; display:flex; flex-direction:column; min-height:0}
.stage{
  flex:1; min-height:0; background:#000; display:flex; align-items:center; justify-content:center; position:relative;
}
.stage video{max-width:100%; max-height:100%; display:block}
.srcvid{position:absolute; inset:0; margin:auto}
.stage-hint{
  position:absolute; inset:auto auto 12px 12px; background:rgba(0,0,0,.6);
  padding:6px 12px; border-radius:8px; font-size:13px; color:var(--tx2);
}

.transport{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--panel); border-top:1px solid var(--line); flex-wrap:wrap;
}
.spacer{flex:1}
.time{font-variant-numeric:tabular-nums; color:var(--tx2); font-size:14px; margin-left:6px}
.time b{color:var(--tx)}

/* ── タイムライン ── */
.timeline{background:var(--panel); padding:0 14px 12px; flex:0 0 auto}
.ruler{
  position:relative; height:18px; color:var(--tx2); font-size:10px;
  font-variant-numeric:tabular-nums; user-select:none;
}
.ruler span{position:absolute; transform:translateX(-50%); white-space:nowrap; top:2px}
.ruler span::before{content:""; position:absolute; left:50%; bottom:-4px; width:1px; height:4px; background:var(--line)}

.strip{
  position:relative; height:78px; border-radius:10px; overflow:hidden;
  background:#0c0e13; border:1px solid var(--line); cursor:pointer; touch-action:none;
}
.thumbs{position:absolute; inset:0; width:100%; height:100%; opacity:.45}
.clips{position:absolute; inset:0}

.clip{
  position:absolute; top:0; bottom:0; border:2px solid var(--accent);
  border-radius:8px; background:rgba(76,154,255,.14);
  box-shadow:inset 0 0 0 100vmax rgba(76,154,255,.06);
  cursor:grab; transition:left .12s ease, width .12s ease;
}
.strip.reordering{cursor:grabbing}
.strip.reordering .clip{cursor:grabbing}
.strip.reordering .clip.sel{box-shadow:0 6px 20px rgba(0,0,0,.5); transition:none; z-index:2}
.clip.sel{border-color:#ffd166; background:rgba(255,209,102,.16)}
.clip .h{
  position:absolute; top:0; bottom:0; width:12px; cursor:ew-resize;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
}
.clip.sel .h{background:#ffd166}
.clip .h::after{content:""; width:2px; height:20px; background:rgba(0,0,0,.45); border-radius:2px}
.clip .h.l{left:-2px; border-radius:6px 0 0 6px}
.clip .h.r{right:-2px; border-radius:0 6px 6px 0}
.clip .lbl{
  position:absolute; left:16px; right:16px; top:4px; font-size:11px; color:#dce6f7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* ── 音の設定 ── */
.audiobar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 14px; background:var(--panel); border-top:1px solid var(--line);
  font-size:13px; color:var(--tx2);
}
.audiobar .ttl{color:var(--tx); font-weight:600}
.audiobar .sep{width:1px; height:22px; background:var(--line)}
.audiobar .ctl{display:flex; align-items:center; gap:8px}
.audiobar input[type=range]{width:110px; accent-color:var(--accent)}
.audiobar output{
  min-width:52px; text-align:right; color:var(--tx);
  font-variant-numeric:tabular-nums; font-size:12px;
}
.audiobar input:disabled{opacity:.4}

.playhead{
  position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none;
  box-shadow:0 0 6px rgba(255,255,255,.8);
}
.playhead::before{
  content:""; position:absolute; top:-1px; left:-5px; border:6px solid transparent; border-top-color:#fff;
}
.tlnote{color:var(--tx2); font-size:12px; margin-top:8px; line-height:1.7}

/* ── モーダル ── */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:50;
}
.sheet{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; width:min(460px,100%);
}
.sheet h2{margin:0 0 16px; font-size:18px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.row span{color:var(--tx2); font-size:14px}
.row select{
  background:var(--panel2); color:var(--tx); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; flex:1; max-width:62%;
}
.sum{color:var(--tx2); font-size:13px; background:var(--panel2); padding:10px 12px; border-radius:8px; line-height:1.7}
.actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px}
.bar-outer{height:10px; background:var(--panel2); border-radius:6px; overflow:hidden; margin:12px 0}
.bar-inner{height:100%; width:0; background:var(--accent); transition:width .2s}
.done{font-size:17px; color:var(--ok); font-weight:600}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#2b3346; border:1px solid var(--line); color:var(--tx);
  padding:10px 18px; border-radius:10px; z-index:80; font-size:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}

@media (max-width:640px){
  .brand{font-size:14px}
  .fname{display:none}
  .transport{gap:6px}
  .btn{padding:8px 10px; font-size:13px}
  .strip{height:60px}
}