/* Phase 18 - Timeline, Animation, and FFmpeg Bridge */
.canvas-stack #phase18OnionCanvas,
.canvas-stack #phase18PlaybackCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.canvas-stack #phase18OnionCanvas{
  z-index:3;
  opacity:.38;
  mix-blend-mode:screen;
}
.canvas-stack #phase18PlaybackCanvas{
  z-index:4;
  display:none;
  background:transparent;
}
.phase18-controls{
  width:100%;
  display:grid;
  grid-template-columns:minmax(230px,auto) 1fr minmax(240px,auto);
  gap:8px;
  align-items:center;
  padding:6px 8px;
  margin-top:6px;
  border-top:1px solid rgba(57,207,255,.25);
  background:linear-gradient(180deg,rgba(18,32,42,.86),rgba(13,18,24,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.phase18-row,
.phase18-actions,
.phase18-transform{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
.phase18-controls button,
.phase18-controls select,
.phase18-controls input{
  min-height:22px;
  border:1px solid rgba(93,113,126,.9);
  border-radius:4px;
  background:#1c1f24;
  color:#e8f7ff;
  font-size:10px;
  line-height:1;
}
.phase18-controls button{
  padding:4px 7px;
  cursor:pointer;
}
.phase18-controls button:hover{
  border-color:#39cfff;
  color:#9defff;
}
.phase18-controls button.phase18-primary{
  border-color:#39cfff;
  background:linear-gradient(180deg,rgba(57,207,255,.24),rgba(9,18,26,.95));
}
.phase18-controls button.phase18-hot{
  border-color:#f5b942;
  color:#ffe8a6;
}
.phase18-controls label{
  display:inline-flex;
  gap:3px;
  align-items:center;
  color:#b7cbd7;
  font-size:10px;
  white-space:nowrap;
}
.phase18-controls input[type="number"]{
  width:54px;
  padding:2px 4px;
}
.phase18-controls select{
  padding:2px 4px;
}
.phase18-frame-rail{
  grid-column:1 / -1;
  display:flex;
  gap:5px;
  align-items:center;
  overflow-x:auto;
  padding-top:4px;
  scrollbar-width:thin;
}
.phase18-frame-chip{
  flex:0 0 auto;
  min-width:68px;
  padding:5px 7px;
  border:1px solid rgba(75,91,104,.9);
  border-radius:6px;
  background:#12161c;
  color:#d7edf7;
  font-size:10px;
  text-align:left;
  cursor:pointer;
}
.phase18-frame-chip strong,
.phase18-frame-chip small{
  display:block;
  line-height:1.15;
}
.phase18-frame-chip small{
  color:#91a6b3;
  margin-top:2px;
}
.phase18-frame-chip.current{
  border-color:#39cfff;
  background:linear-gradient(180deg,rgba(57,207,255,.18),rgba(18,22,29,.98));
  box-shadow:0 0 0 1px rgba(57,207,255,.18),0 0 12px rgba(57,207,255,.12);
}
.phase18-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border:1px solid rgba(57,207,255,.32);
  border-radius:999px;
  color:#9defff;
  background:rgba(57,207,255,.08);
  font-size:10px;
}
.phase18-muted{
  color:#91a6b3;
  font-size:10px;
}
html.phase18-playback-active #phase18PlaybackCanvas{
  display:block;
}
html.phase18-onion-active #phase18OnionCanvas{
  display:block;
}
@media (max-width: 980px){
  .phase18-controls{
    grid-template-columns:1fr;
  }
  .phase18-row,
  .phase18-actions,
  .phase18-transform{
    justify-content:flex-start;
  }
}

/* Phase 18.1 - Photoshop-style timeline arrangement refinement */
.phase18-controls.phase18-photoshop-layout{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  margin-top:6px;
  padding:8px;
  border-top:1px solid rgba(57,207,255,.18);
  background:linear-gradient(180deg,rgba(17,21,27,.96),rgba(12,15,21,.98));
}
.phase18-toolbar{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.phase18-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.phase18-controls.phase18-photoshop-layout .phase18-transform{
  margin-left:auto;
}
.phase18-timeline-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:0;
  min-height:230px;
  border:1px solid rgba(95,108,123,.9);
  border-radius:8px;
  overflow:hidden;
  background:#181b20;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.phase18-track-column{
  display:grid;
  grid-template-rows:40px 56px 34px 34px 34px 34px;
  background:linear-gradient(180deg,#2a2d31,#22262a);
  border-right:1px solid rgba(104,115,128,.55);
}
.phase18-track-head,
.phase18-track-row{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:6px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.phase18-track-head strong{
  font-size:12px;
  color:#f2f6fb;
}
.phase18-track-head small,
.phase18-track-value{
  font-size:10px;
  color:#aeb9c6;
}
.phase18-track-title{
  font-size:11px;
  color:#f4f6f8;
}
.phase18-track-main{
  background:linear-gradient(180deg,rgba(117,89,184,.3),rgba(86,69,138,.12));
}
.phase18-track-audio{
  background:rgba(255,255,255,.02);
}
.phase18-scroll-column{
  min-width:0;
  background:#1f2227;
}
.phase18-scroll-area{
  overflow:auto;
  height:100%;
  scrollbar-width:thin;
}
.phase18-ruler{
  position:sticky;
  top:0;
  z-index:3;
  height:40px;
  background:linear-gradient(180deg,#43464b,#30343a);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.phase18-ruler-inner{
  position:relative;
  height:100%;
  background-image:repeating-linear-gradient(to right, rgba(255,255,255,.08) 0 1px, transparent 1px 24px);
}
.phase18-ruler-mark{
  position:absolute;
  top:4px;
  transform:translateX(-1px);
  padding-left:5px;
  border-left:1px solid rgba(255,255,255,.25);
  display:flex;
  flex-direction:column;
  gap:1px;
  min-height:28px;
}
.phase18-ruler-mark b{
  font-size:10px;
  line-height:1;
  color:#edf5ff;
  font-weight:700;
}
.phase18-ruler-mark small{
  font-size:9px;
  line-height:1;
  color:#adb9c8;
}
.phase18-ruler-mark.is-origin{
  padding-left:6px;
}
.phase18-lanes-wrap{
  position:relative;
}
.phase18-playhead{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#d84444;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 12px rgba(216,68,68,.38);
  z-index:4;
  pointer-events:none;
}
.phase18-playhead::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#d84444;
  box-shadow:0 0 0 2px rgba(22,27,34,.95);
}
.phase18-track-lane{
  position:relative;
  min-height:34px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 24px), linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.06));
}
.phase18-main-lane{
  min-height:56px;
  background:repeating-linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 24px), linear-gradient(180deg,rgba(117,89,184,.14),rgba(37,40,48,.96));
}
.phase18-lane-inner{
  position:relative;
  min-height:inherit;
}
.phase18-clip{
  position:absolute;
  top:7px;
  bottom:7px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:2px;
  padding:6px 10px;
  border:1px solid rgba(174,155,215,.85);
  border-radius:6px;
  background:linear-gradient(180deg,#7b65ba,#624d9b);
  color:#fbfcff;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.28);
  cursor:pointer;
}
.phase18-clip.current{
  border-color:#e5d9ff;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 0 2px rgba(137,111,205,.42), inset 0 1px 0 rgba(255,255,255,.2);
  background:linear-gradient(180deg,#8b75ca,#6d57ab);
}
.phase18-clip-title{
  font-size:11px;
  line-height:1.1;
  font-weight:700;
}
.phase18-clip-meta{
  font-size:9px;
  line-height:1;
  color:#e6def8;
}
.phase18-key-lane{
  background:repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 24px), linear-gradient(180deg,rgba(0,0,0,.06),rgba(255,255,255,.02));
}
.phase18-key{
  position:absolute;
  top:9px;
  width:14px;
  height:14px;
  border:1px solid rgba(225,231,240,.9);
  background:linear-gradient(180deg,#f2f4f7,#d0d5dc);
  transform:rotate(45deg);
  border-radius:2px;
  cursor:pointer;
}
.phase18-key.current{
  background:linear-gradient(180deg,#8ed4ff,#3bbdff);
  border-color:#d9f5ff;
  box-shadow:0 0 0 1px rgba(59,189,255,.2), 0 0 8px rgba(59,189,255,.22);
}
.phase18-audio-lane{
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.05));
}
.phase18-audio-inner{
  display:flex;
  align-items:center;
  padding:0 10px;
}
.phase18-audio-note{
  font-size:10px;
  color:#8793a2;
}
.phase18-frame-rail{
  display:flex;
  gap:5px;
  align-items:center;
  overflow-x:auto;
  padding-top:2px;
  scrollbar-width:thin;
}
.phase18-frame-chip{
  flex:0 0 auto;
  min-width:92px;
  padding:5px 7px;
  border:1px solid rgba(75,91,104,.9);
  border-radius:6px;
  background:#12161c;
  color:#d7edf7;
  font-size:10px;
  text-align:left;
  cursor:pointer;
}
.phase18-frame-chip strong,
.phase18-frame-chip small{
  display:block;
  line-height:1.15;
}
.phase18-frame-chip small{ color:#91a6b3; margin-top:2px; }
.phase18-frame-chip.current{
  border-color:#39cfff;
  background:linear-gradient(180deg,rgba(57,207,255,.18),rgba(18,22,29,.98));
  box-shadow:0 0 0 1px rgba(57,207,255,.18),0 0 12px rgba(57,207,255,.12);
}

@media (max-width: 1180px){
  .phase18-controls.phase18-photoshop-layout .phase18-transform{
    margin-left:0;
  }
}
@media (max-width: 980px){
  .phase18-timeline-shell{
    grid-template-columns:1fr;
  }
  .phase18-track-column{
    grid-template-rows:auto;
  }
}