/* Preview-only real route timeline. Preserve the established liquid-glass
   container/toolbar, shot cards, selected-yellow palette and viewport layout. */
#lightShotTimeline .trajectory-timeline-tabs[hidden],
#lightShotTimeline #routeTimelineEditor[hidden]{display:none!important}
#lightShotTimeline .trajectory-timeline-tabs{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px;border:1px solid rgba(236,240,236,.14);border-radius:9px;
  background:rgba(255,255,255,.035);height:29px;box-sizing:border-box;
}
#lightShotTimeline .trajectory-timeline-tabs button{
  border:0!important;background:transparent!important;box-shadow:none!important;
  min-width:43px;padding:3px 10px!important;height:23px!important;
  border-radius:6px!important;color:var(--ds-studio-text-muted,#acb2af)!important;
  font-size:11px!important;font-weight:550!important;
}
#lightShotTimeline .trajectory-timeline-tabs button.active{
  color:#f6d790!important;border-color:rgba(238,201,127,.25)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.14),rgba(255,255,255,.025))!important;
  box-shadow:inset 2px 0 0 var(--ds-optical-accent,#eec97f)!important;
}
#lightShotTimeline[data-panel="route"]{
  display:grid!important;grid-template-rows:40px minmax(0,1fr)!important;
  min-height:235px!important;
}
#lightShotTimeline[data-panel="route"] .timeline-title{gap:10px;min-width:0}
#lightShotTimeline[data-panel="route"] #shotCount,
#lightShotTimeline[data-panel="route"] #cameraSaveActions,
#lightShotTimeline[data-panel="route"] .timeline-actions,
#lightShotTimeline[data-panel="route"] .shot-strip,
#lightShotTimeline[data-panel="route"] .track-area{display:none!important}
#lightShotTimeline .route-timeline-editor{
  display:flex;min-width:0;min-height:0;overflow:hidden;
  flex-direction:column;background:transparent;color:#dfe5e2;
}
#lightShotTimeline .route-timebar{
  height:29px;min-height:29px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:10px;color:#b9c3be;
}
#lightShotTimeline .route-time-zoom{display:flex;align-items:center;gap:5px}
#lightShotTimeline .route-time-zoom button:not(#toggleCameraPartBtn):not(#deleteRouteTrackBtn){
  height:23px!important;width:26px!important;min-width:26px;
  padding:0!important;border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;color:#d4dbd7!important;
  border:1px solid rgba(255,255,255,.12)!important;font-size:13px!important;
}
/* The segment toggle is a text action, not a 26px zoom icon. */
#lightShotTimeline .route-time-zoom{min-width:max-content;flex:0 0 auto;flex-wrap:nowrap}
#lightShotTimeline .route-time-zoom #toggleCameraPartBtn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-width:108px!important;max-width:none!important;
  height:25px!important;min-height:25px!important;padding:0 10px!important;margin:0!important;
  white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
  line-height:1!important;font-size:10px!important;font-weight:550!important;
  border:1px solid rgba(238,201,127,.28)!important;border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;color:#ddd6c7!important;
}
#lightShotTimeline .route-time-zoom #toggleCameraPartBtn:hover{
  color:#f5d590!important;border-color:rgba(238,201,127,.54)!important;
}
#lightShotTimeline .route-timebar{min-width:0;gap:10px}
#lightShotTimeline .route-timebar>span{
  min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;overflow-wrap:normal;line-height:1.35;
}
#lightShotTimeline .route-time-scroll{
  overflow:auto;flex:1 1 auto;min-height:50px;
  scrollbar-width:thin;scrollbar-color:rgba(238,201,127,.36) transparent;
}
#lightShotTimeline .route-time-grid{
  display:grid;grid-template-columns:142px var(--route-time-width);
  width:max-content;min-width:100%;
}
#lightShotTimeline .route-time-track-label{
  position:sticky;left:0;z-index:2;
  display:flex;align-items:center;box-sizing:border-box;
  padding:0 10px;width:142px;min-height:36px;
  background:rgba(16,19,21,.96);border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#dce0dc;font-size:10px;text-align:left;
}
#lightShotTimeline .route-time-ruler-label{
  min-height:24px;height:24px;color:#9daaa5;font-size:9px;
}
#lightShotTimeline .route-time-object{
  cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-weight:550;border-top:0!important;border-left:0!important;
}
#lightShotTimeline .route-time-object.active{
  color:#eec97f;border-left:2px solid var(--ds-optical-accent,#eec97f)!important;
}
#lightShotTimeline .route-time-ruler{
  position:relative;height:24px;border-bottom:1px solid rgba(255,255,255,.09);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 76px);
}
#lightShotTimeline .route-time-ruler span{
  position:absolute;top:5px;transform:translateX(3px);
  font-size:9px;color:#99a39e;white-space:nowrap;
}
#lightShotTimeline .route-time-lane{
  position:relative;min-height:36px;height:36px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 76px);
}
#lightShotTimeline .route-time-segment{
  position:absolute;top:12px;height:13px;min-width:6px;
  background:linear-gradient(90deg,rgba(55,135,217,.35),rgba(56,155,244,.24));
  border:1px solid rgba(92,171,243,.56);border-radius:3px;
  box-sizing:border-box;
}
#lightShotTimeline .route-time-segment input{
  position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  height:21px;width:47px;max-width:calc(100% - 3px);min-width:25px;
  padding:0 2px;border-radius:5px;text-align:center;
  background:#222a30;border:1px solid rgba(117,176,228,.64);
  color:#e2eafa;font-size:9px;outline-offset:1px;
}
#lightShotTimeline .route-time-node{
  position:absolute;top:8px;transform:translateX(-50%);
  z-index:2;display:grid;place-items:center;
  width:21px!important;height:21px!important;min-width:21px;
  padding:0!important;line-height:1!important;
  border-radius:50%!important;color:#d5eaff!important;
  background:#1c6fa9!important;border:2px solid #85c6f6!important;
  box-shadow:0 0 0 2px rgba(10,28,42,.85)!important;
  font-size:9px!important;font-weight:650!important;cursor:pointer;
}
#lightShotTimeline .route-time-node.active{
  color:#211e17!important;background:#efd08b!important;
  border-color:#fff0c1!important;box-shadow:0 0 0 2px rgba(238,201,127,.35)!important;
}
#lightShotTimeline .route-time-inspector{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;padding:7px 10px;min-height:45px;
  background:rgba(255,255,255,.028);border-top:1px solid rgba(255,255,255,.09);
}
#lightShotTimeline .route-time-inspector strong{font-size:10px;font-weight:550;color:#d9e3de;margin-right:6px}
#lightShotTimeline .route-time-field{display:flex;align-items:center;gap:4px;font-size:9px;color:#aabbb3}
#lightShotTimeline .route-time-field input{
  width:52px;height:25px;min-width:0;text-align:center;
  color:#e5eeeb;background:rgba(10,16,20,.55);
  border:1px solid rgba(255,255,255,.17);border-radius:6px;font-size:10px;
}
#lightShotTimeline .route-time-auto-angle{
  height:25px!important;padding:0 8px!important;border-radius:6px!important;
  color:#eec97f!important;border:1px solid rgba(238,201,127,.38)!important;
  background:rgba(238,201,127,.05)!important;font-size:10px!important;
}
#lightShotTimeline .route-time-empty{margin:auto;padding:18px;color:#9ba7a0;font-size:11px}
/* Route panel geometry is defined once in the anchored block below. */
@media(max-width:900px){
  #lightShotTimeline .route-time-grid{grid-template-columns:108px var(--route-time-width)}
  #lightShotTimeline .route-time-track-label{width:108px}
  #lightShotTimeline .route-time-inspector{gap:4px}
}


/* 2026-10-21 · minimal track and keyframe revision. The time ruler and
   existing glass container are intentionally unchanged. */
#lightShotTimeline .route-time-lane{
  height:36px!important;min-height:36px!important;
  background-color:transparent!important;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px calc(2 * 72px));
}
#lightShotTimeline .route-time-track-label.route-time-object{
  height:36px!important;min-height:36px!important;
}
#lightShotTimeline .route-time-clip{
  position:absolute;top:6px;height:18px;box-sizing:border-box;
  background:rgba(32,118,190,.92);border:1px solid rgba(126,191,238,.78);
  border-radius:4px;padding:2px 8px;color:#eef7ff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:600;
  pointer-events:none;min-width:0;
}
#lightShotTimeline .route-time-keyline{
  position:absolute;top:39px;height:1px;min-width:0;
  background:rgba(174,186,196,.49);pointer-events:none;
}
#lightShotTimeline .route-time-segment,
#lightShotTimeline .route-time-segment input{display:none!important}
#lightShotTimeline .route-time-node{
  top:27px!important;width:26px!important;height:26px!important;
  min-width:26px!important;min-height:26px!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  transform:translateX(-50%)!important;
  color:transparent!important;font-size:0!important;
  padding:0!important;display:grid!important;place-items:center!important;
  cursor:ew-resize;touch-action:none;z-index:5!important;
}
#lightShotTimeline .route-time-node::before{
  content:"";display:block;position:absolute;
  left:50%;top:50%;width:9px;height:9px;box-sizing:border-box;
  border:1px solid rgba(182,196,205,.90);
  background:#111519;
  transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.24);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
#lightShotTimeline .route-time-node:hover::before,
#lightShotTimeline .route-time-node.active::before,
#lightShotTimeline .route-time-node.dragging::before{
  border-color:#eec97f;background:#d8b669;
  box-shadow:0 0 9px rgba(238,201,127,.28);
}
#lightShotTimeline .route-time-node.dragging::after{
  content:attr(data-time);position:absolute;bottom:28px;left:50%;
  transform:translateX(-50%);white-space:nowrap;
  padding:3px 7px;border-radius:5px;
  border:1px solid rgba(238,201,127,.37);
  background:rgba(18,22,26,.97);color:#f4d89d;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
  font-size:10px;line-height:16px;font-weight:600;
  pointer-events:none;z-index:12;
}
#lightShotTimeline .route-time-node[data-index="0"]{cursor:pointer}
#lightShotTimeline .route-time-inspector{min-height:43px}

/* Fixed-size track pane: never grow with more rows; scroll only the list.
   Keep the parent Shot glass boundary and align its bottom to neighboring panes. */
html body#daailokStudio #lightShotTimeline[data-panel="route"]{
  grid-template-rows:40px minmax(0,1fr)!important;
  overflow:hidden!important;
  background-clip:padding-box!important;
  border-radius:16px!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-timeline-editor{
  min-height:0!important;min-width:0!important;height:100%!important;
  flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden!important;
  box-sizing:border-box;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-scroll{
  flex:1 1 0!important;min-height:0!important;overflow-x:auto!important;
  overflow-y:auto!important;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:rgba(224,192,124,.48) transparent;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-inspector{
  flex:0 0 auto!important;min-height:37px!important;
  max-height:55px;overflow-x:auto;overflow-y:auto;
  box-sizing:border-box;background:rgba(255,255,255,.025)!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-timebar{
  flex:0 0 27px;box-sizing:border-box;min-width:0!important;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  min-width:0;flex:0 0 auto;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions button{
  display:grid!important;place-items:center!important;gap:0;
  height:29px!important;min-height:29px!important;
  border-radius:8px!important;padding:0 9px!important;
  border:1px solid rgba(231,234,234,.17)!important;
  color:#d9e0df!important;background:rgba(255,255,255,.045)!important;
  font:inherit!important;font-size:11px!important;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions button:hover,
html body#daailokStudio #lightShotTimeline .route-preview-actions button:focus-visible{
  color:#f2d493!important;
  border-color:rgba(238,201,127,.42)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.15),rgba(255,255,255,.02))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11)!important;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions button[aria-pressed="true"]{
  color:#f5d590!important;border-color:rgba(238,201,127,.48)!important;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions button svg{
  display:block;width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
}
html body#daailokStudio #lightShotTimeline .timeline-title>b{flex:0 0 auto}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .timeline-toolbar{
  min-width:0!important;justify-content:flex-start!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .timeline-title{
  min-width:0!important;flex:0 0 auto!important;
}

/* Author-level display rules must honor HTML hidden. */
html body#daailokStudio #lightShotTimeline .route-preview-actions[hidden]{display:none!important}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-timebar,
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-scroll{
  background:rgba(17,19,21,.13)!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-track-label{
  background:rgba(16,19,21,.95)!important;
}

/* Route mode controls use the resized viewport's own coordinates. */

/* 2026-10-21 scoped regression: the outer workspace is absolutely positioned
   in normal mode, NOT a grid. Changing its rows created a black horizontal
   shadow strip between the viewport and the timeline. */
html body#daailokStudio .studio[data-route-timeline-mode="route"] .main-workspace{
  background:transparent!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"]{
  min-height:0!important;
  grid-template-rows:40px minmax(0,1fr)!important;
  gap:0!important;row-gap:0!important;
  overflow:hidden!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .timeline-toolbar{
  grid-row:1!important;min-height:40px!important;height:40px!important;
  padding:0 12px!important;margin:0!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #routeTimelineEditor{
  grid-row:2!important;height:auto!important;max-height:100%!important;
  min-height:0!important;min-width:0!important;
  margin:0!important;padding:0!important;gap:0!important;
  align-self:stretch!important;background:transparent!important;
  border:0!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #routeTimelineEditor[hidden]{
  display:none!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-timebar{
  margin:0!important;background:transparent!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-scroll{
  background:transparent!important;border:0!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-inspector{
  background:transparent!important;border-top:1px solid rgba(255,255,255,.10)!important;
  margin:0!important;
}
/* Both tabs are permanent tool navigation, rather than a label.
   Keep their existing selected-yellow button styling. */
html body#daailokStudio #lightShotTimeline .timeline-title>b{
  display:none!important;
}
html body#daailokStudio #lightShotTimeline .trajectory-timeline-tabs{
  margin:0!important;flex:0 0 auto!important;
}

/* v3: shot count is an inline neighbor of the permanent nav pills.
   Both pills now keep exactly the same position in both tab modes. */
html body#daailokStudio #lightShotTimeline .timeline-title{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  flex:0 0 auto!important;min-width:0!important;gap:9px!important;
}
html body#daailokStudio #lightShotTimeline .timeline-title #trajectoryTimelineTabs{
  order:0!important;flex:0 0 auto!important;margin:0!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="shot"] .timeline-title #shotCount{
  display:inline-flex!important;order:1!important;align-items:center!important;
  flex:0 0 auto!important;position:static!important;
  height:25px!important;min-height:0!important;margin:0!important;
  padding:0!important;line-height:1!important;
  font-size:10px!important;font-weight:500!important;
  color:var(--ds-studio-text-muted,#abb0ae)!important;
  white-space:nowrap!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .timeline-title #shotCount{
  display:none!important;
}
/* The reference symbol is just two clean opposing L corners; never add
   a rectangular button border, glass capsule or enclosing box. */
html body#daailokStudio #lightShotTimeline .route-preview-actions #expandRouteTimelineBtn{
  border:0!important;border-radius:0!important;
  outline:none!important;background:transparent!important;background-image:none!important;
  box-shadow:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  width:31px!important;height:30px!important;min-width:31px!important;
  padding:0!important;margin:0!important;color:#cdd4d0!important;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions #expandRouteTimelineBtn:is(:hover,:focus-visible,[aria-pressed="true"]){
  border:0!important;background:transparent!important;box-shadow:none!important;
  color:#f2d081!important;
}
html body#daailokStudio #lightShotTimeline .route-preview-actions #expandRouteTimelineBtn svg{
  display:block!important;width:23px!important;height:23px!important;
  stroke:currentColor!important;stroke-width:2.4!important;
  stroke-linecap:square!important;stroke-linejoin:miter!important;
  fill:none!important;
}
/* 2026-10-21 · one geometric contract for the route editor.
   The Shot panel is the reference. Left/right/bottom are anchored to the
   stable adjacent panels by studio-layout.js. Route expansion changes only
   the editor height and the viewport's matching bottom inset. */
html body#daailokStudio .studio[data-route-timeline-mode="route"]{
  --route-open-height:var(--route-base-height,160px);
  --route-viewport-gap:var(--daailok-panel-gap,10px);
}
html body#daailokStudio .studio[data-route-timeline-mode="route"][data-route-expanded="true"]{
  --route-open-height:clamp(300px,34dvh,390px);
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"] #lightShotTimeline[data-panel="route"]{
  /* Critical real-browser regression: Normal's generic .timeline selector
     overrides Route's display:grid with display:block!important. As a result,
     the toolbar/editor grid-row definitions silently stop working while the
     outer panel rectangle remains correct (and past geometry audits pass).
     Reassert the Route-specific grid contract in both layouts. */
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:40px minmax(0,1fr)!important;
  position:absolute!important;
  top:auto!important;
  bottom:var(--route-dialog-bottom,10px)!important;
  height:var(--route-open-height)!important;
  max-height:calc(100dvh - 104px)!important;
  min-height:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.105)!important;
  border-radius:16px!important;
  outline:none!important;
  background:linear-gradient(145deg,rgba(21,27,31,.88),rgba(13,18,21,.80))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
  background-clip:padding-box!important;
  overflow:hidden!important;
  z-index:50!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"] .viewport{
  /* No negative top, no double deductions, no overlay behind the tracks. */
  bottom:calc(var(--route-open-height) + var(--route-dialog-bottom,10px) + var(--route-viewport-gap))!important;
  top:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"] .light-workspace-controls{
  bottom:20px!important;
}
/* Compact mode retains its own grid rows: only the expanded delta is
   deducted, rather than setting another absolute position for the panel. */
html[data-studio-layout="compact"] body#daailokStudio
  .studio[data-route-timeline-mode="route"] #lightShotTimeline[data-panel="route"]{
  height:var(--route-open-height)!important;
  min-height:0!important;
  max-height:calc(100dvh - 104px)!important;
}
html[data-studio-layout="compact"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-route-expanded="true"] .main-workspace{
  grid-template-rows:minmax(0,1fr) var(--route-open-height)!important;
}
/* Leave the existing liquid-glass canvas to paint bright-mode borders. */
html[data-studio-theme="light"][data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"] #lightShotTimeline[data-panel="route"][data-light-glass-ready]{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
}

html body#daailokStudio #lightShotTimeline .route-time-inspector{display:none!important;}
/* All time and position interaction belongs INSIDE the track lane now. */
html body#daailokStudio #lightShotTimeline .route-time-lane{
  touch-action:pan-y;cursor:grab;
}
html body#daailokStudio #lightShotTimeline .route-time-lane:active{cursor:grabbing}
html body#daailokStudio #lightShotTimeline .route-time-node{
  width:24px!important;height:29px!important;min-width:24px!important;
}
html body#daailokStudio #lightShotTimeline .route-time-node::before{
  width:10px!important;height:19px!important;
  border:1px solid rgba(139,191,233,.88)!important;
  border-radius:3px!important;transform:translate(-50%,-50%)!important;
  background:rgba(31,124,202,.92)!important;
}
html body#daailokStudio #lightShotTimeline .route-time-node.active::before,
html body#daailokStudio #lightShotTimeline .route-time-node.dragging::before{
  background:#e5bb6c!important;border-color:#fff0c9!important;
}
html body#daailokStudio #lightShotTimeline .route-time-split{
  position:absolute;top:4px;height:38px;transform:translateX(-50%);
  border-left:2px dashed rgba(243,200,114,.8);
  z-index:7;pointer-events:none;
}
html body#daailokStudio #lightShotTimeline .route-time-part{
  position:absolute;top:6px;height:18px;min-width:0;
  border:1px solid rgba(115,182,235,.72);border-radius:3px;
  background:rgba(30,108,178,.68);
  cursor:pointer;
}
html body#daailokStudio #lightShotTimeline .route-time-part.selected{
  background:rgba(235,195,105,.48);border-color:rgba(240,204,135,.9);
}
html body#daailokStudio #lightShotTimeline .route-time-track-label.route-time-object{
  cursor:ns-resize!important;
}
html body#daailokStudio #lightShotTimeline #splitRouteTrackBtn{
  border:1px solid rgba(233,198,127,.31)!important;
  border-radius:7px!important;background:transparent!important;
  color:#e8d5a5!important;font-size:11px!important;padding:0 9px!important;
  height:25px!important;cursor:pointer;
}

html body#daailokStudio #lightShotTimeline .route-time-part{
  pointer-events:none!important;
}
html body#daailokStudio #lightShotTimeline .route-time-part.disabled{
  opacity:.26!important;background:rgba(72,79,83,.25)!important;
  border-style:dashed!important;
}
html body#daailokStudio #lightShotTimeline .route-time-moving
  :is(.route-time-part,.route-time-node,.route-time-keyline,.route-time-split){
  translate:var(--route-preview-offset,0px) 0!important;
}
html body#daailokStudio #lightShotTimeline .route-time-cursor{
  position:absolute;top:0;bottom:0;
  display:block;width:1px;background:rgba(235,202,136,.88);
  pointer-events:none;z-index:10;
}
html body#daailokStudio #lightShotTimeline .route-time-object.active{
  border-left:2px solid rgba(238,201,127,.85)!important;
}

/* Rectangular handles are on the blue track itself, not on a second row. */
html body#daailokStudio #lightShotTimeline .route-time-part{
  top:13px!important;height:19px!important;
}
html body#daailokStudio #lightShotTimeline .route-time-node{
  top:9px!important;height:27px!important;
}
html body#daailokStudio #lightShotTimeline .route-time-node::before{
  width:9px!important;height:21px!important;
}
html body#daailokStudio #lightShotTimeline .route-time-keyline{
  top:17px!important;z-index:0!important;
}
html body#daailokStudio #lightShotTimeline .route-time-split{
  top:8px!important;height:30px!important;
}
html body#daailokStudio #lightShotTimeline .route-time-track-label.route-time-object,
html body#daailokStudio #lightShotTimeline .route-time-lane{
  height:36px!important;min-height:36px!important;
}

/* Split handles are draggable buttons, not decorative separators. */
html body#daailokStudio #lightShotTimeline .route-time-split{
  display:block!important;pointer-events:auto!important;
  width:15px!important;min-width:15px!important;height:29px!important;
  top:9px!important;padding:0!important;margin:0!important;
  border:0!important;border-left:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  cursor:ew-resize!important;touch-action:none!important;
}
html body#daailokStudio #lightShotTimeline .route-time-split::before{
  content:"";position:absolute;left:6px;top:0;bottom:0;
  border-left:2px dashed rgba(243,200,114,.92);pointer-events:none;
}
html body#daailokStudio #lightShotTimeline .route-time-part{
  pointer-events:none!important;
}

/* Route V2.2 · actual keyframe glyphs and independent camera clip surfaces.
   Interior keyframes are short vertical ticks. Both ends of every segment
   are blue rectangular grab handles with a narrow vertical center line. */
html body#daailokStudio #lightShotTimeline[data-panel="route"],
html body#daailokStudio #lightShotTimeline[data-panel="route"] :is(
  .route-time-scroll,.route-time-grid,.route-time-object,.route-time-ruler,
  .route-time-lane,.route-time-node,.route-time-part,.route-time-split,
  .route-timebar,button
){cursor:default!important;}
/* Reference endpoint: the blue track bar ITSELF is a rounded rectangle.
   The pale 2px line sits 7px INSET from each end inside the same bar.
   Do not render an independent blue grab box outside the track. */
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part{
  position:absolute!important;
  top:9px!important;height:18px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(154,207,244,.86)!important;
  border-radius:4px!important;
  background:rgba(35,121,195,.96)!important;
  box-shadow:inset 0 1px 0 rgba(222,244,255,.14)!important;
  z-index:2!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part.camera-clip{
  pointer-events:auto!important;
  touch-action:none!important;
}
/* Only the selected segment lights up; all neighbors retain normal blue.
   Keep the full pill shape and built-in endpoint ticks from the reference. */
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part.selected{
  opacity:1!important;
  background:#f5d179!important;
  border-color:#ffe3a4!important;
  box-shadow:inset 0 1px 0 rgba(255,249,220,.50),0 0 9px rgba(245,204,112,.40)!important;
}
/* Both segment edges use exactly the same integrated rounded-cap language.
   One stripe is INSIDE the start; one stripe is INSIDE the finish. */
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part::before,
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;bottom:auto!important;
  width:2px!important;height:11px!important;
  border:0!important;border-radius:1px!important;
  background:rgba(200,233,255,.96)!important;
  box-shadow:0 0 1px rgba(217,241,255,.45)!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;z-index:3!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part::before{
  left:7px!important;right:auto!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part::after{
  right:7px!important;left:auto!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part.selected::before,
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-part.selected::after{
  background:#fff6d8!important;
  box-shadow:0 0 3px rgba(255,244,191,.7)!important;
}
/* The absolute-positioned endpoint buttons keep their dragging/click hit area,
   but paint NOTHING over the integrated end caps. Interior points still
   render just a short pale vertical tick at the true waypoint position. */
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-node{
  top:9px!important;height:18px!important;min-height:18px!important;
  width:22px!important;min-width:22px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  z-index:8!important;cursor:default!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-node::before{
  content:"";position:absolute;top:50%;left:50%;
  width:2px!important;height:11px!important;
  border:0!important;border-radius:1px!important;
  background:#c3e3ff!important;
  box-shadow:0 0 0 1px rgba(9,29,44,.28)!important;
  transform:translate(-50%,-50%)!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-node:not([data-endpoint="true"]):is(.active,.dragging)::before{
  background:#f1ca7d!important;
  box-shadow:0 0 8px rgba(238,201,127,.48)!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-node[data-endpoint="true"]::before{
  content:none!important;display:none!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-split{
  z-index:9!important;cursor:default!important;
  top:3px!important;height:30px!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-time-split::before{
  top:7px!important;bottom:auto!important;height:15px!important;
  border-left:2px solid rgba(243,200,114,.92)!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #addRoutePositionNodeBtn{
  height:29px!important;min-height:29px!important;white-space:nowrap!important;
  font-size:11px!important;padding:0 9px!important;min-width:105px!important;
  color:#e0e5df!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #addRoutePositionNodeBtn:hover{
  color:#f3d793!important;
}

/* Same liquid-glass toolbar language for camera-lens recording/export. */
html body#daailokStudio #lightShotTimeline[data-panel="route"] #deleteRouteTrackBtn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-width:61px!important;
  height:25px!important;min-height:25px!important;
  padding:0 9px!important;white-space:nowrap!important;
  font-size:10px!important;font-weight:550!important;
  border:1px solid rgba(238,201,127,.25)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;
  color:#d5dad7!important;cursor:default!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #deleteRouteTrackBtn:disabled{
  opacity:.4!important;cursor:default!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #deleteRouteTrackBtn:not(:disabled):hover{
  color:#f2d18b!important;border-color:rgba(238,201,127,.7)!important;
  background:rgba(238,201,127,.08)!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #exportRouteLensVideoBtn{
  flex:0 0 auto!important;
  height:29px!important;min-height:29px!important;
  padding:0 10px!important;
  font-size:11px!important;white-space:nowrap!important;
  border-radius:8px!important;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] #exportRouteLensVideoBtn[aria-busy="true"]{
  color:#f5d590!important;
  border-color:rgba(238,201,127,.65)!important;
  background:rgba(238,201,127,.12)!important;
  cursor:wait!important;
}


/* Light appearance: the left sticky track-name column must share the
   route editor's grey translucent glass surface, not its dark-mode fill.
   Covers both the "对象 / 时间" heading and camera/character/object rows.
   Dark mode and the selected amber left stripe are intentionally unchanged. */
/* Give the entire scrolling timeline its own inner edge, matching
   the 12px toolbar inset. Insetting the SCROLLER (not just the sticky labels)
   keeps track labels, ruler, and draggable lanes on the same time origin and
   prevents the sticky label layer from painting over the outer glass rim. */
html[data-studio-theme="light"] body#daailokStudio
  #lightShotTimeline[data-panel="route"] #routeTimelineEditor > .route-time-scroll{
  align-self:stretch!important;
  margin-left:10px!important;
  margin-right:10px!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html[data-studio-theme="light"] body#daailokStudio
  #lightShotTimeline[data-panel="route"] .route-time-track-label{
  background:rgba(255,255,255,.035)!important;
  /* The parent already supplies a liquid-glass surface; local blur painted
     a second translucent layer across the border at the sticky edge. */
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-right-color:rgba(255,255,255,.13)!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
}


/* Regression 2026-10-21: NORMAL Route inspector is a TWO-card stack.
   The generic normal layout reserves a first grid row for Scene Layers,
   but Route uses the left tool drawer instead, hiding Layers. If the row
   remains allocated, Properties starts ~300px too low and the viewport
   looks like a broken compact layout after pressing Normal. Do not affect
   Shot mode, compact mode, or any scene-object state. */
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"] .right-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) var(--daailok-ai-panel-height,260px)!important;
  min-height:0!important;
  align-content:stretch!important;
  gap:var(--daailok-panel-gap,10px)!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"] .right-panel>#layersPanel{
  display:none!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"] .right-panel>#propertiesPanel{
  grid-column:1!important;
  grid-row:1!important;
  align-self:stretch!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"] .right-panel>.ai-panel{
  grid-column:1!important;
  grid-row:2!important;
  align-self:stretch!important;
  margin:0!important;
}


/* Normal Route geometry contract (2026-10-21).
   Use one set of design tokens for both light and dark themes, including the
   first frame after a Compact -> Normal switch. No transitional DOM rects.
   This changes neither normal Shots nor compact Route dimensions. */
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"]
  #leftDrawer{
  position:absolute!important;
  inset:var(--daailok-panel-gap) auto var(--daailok-panel-gap) var(--daailok-panel-gap)!important;
  width:calc(var(--light-sidebar) - 7px)!important;
  height:auto!important;
  max-height:none!important;
  transform:none!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"]
  #lightShotTimeline[data-panel="route"]{
  left:calc(var(--light-sidebar) + var(--daailok-panel-gap) + 3px)!important;
  right:calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
  bottom:var(--daailok-panel-gap)!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"] .right-panel{
  min-height:0!important;
  grid-template-rows:minmax(0,1fr) var(--daailok-ai-panel-height,260px)!important;
}


/* Atomic layout transaction: never display outdated liquid-glass captures
   above the destination panels while Compact geometry is being released. */
html body#daailokStudio .studio[data-layout-transitioning="true"]
  canvas.light-panel-optics{visibility:hidden!important;}

/* Self-healing geometry is enabled ONLY if a real post-transition audit detects
   overlapping panels. Normal Route is positioned against the already accepted
   viewport/sidebar/inspector tokens; other tools and Compact stay untouched. */
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] .body-grid{
  position:relative!important;display:block!important;overflow:visible!important;
  grid-template-columns:none!important;
}
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] .main-workspace{
  position:absolute!important;display:block!important;left:0!important;right:0!important;
  top:calc(-1 * var(--light-header))!important;bottom:0!important;
  min-width:0!important;min-height:0!important;
}
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] .right-panel{
  position:absolute!important;display:grid!important;
  top:var(--daailok-panel-gap)!important;right:var(--daailok-panel-gap)!important;
  bottom:var(--daailok-panel-gap)!important;left:auto!important;height:auto!important;
  width:var(--daailok-right-column-width)!important;
  grid-template-rows:minmax(0,1fr) var(--daailok-ai-panel-height,260px)!important;
  min-height:0!important;
}
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] .viewport{
  position:absolute!important;left:0!important;right:0!important;top:0!important;
  bottom:calc(var(--route-open-height) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
  height:auto!important;min-height:0!important;
}
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] .light-viewport-frame{
  position:absolute!important;top:var(--light-header)!important;left:0!important;
  right:calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
  bottom:0!important;height:auto!important;display:block!important;
}
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] #lightShotTimeline[data-panel="route"]{
  position:absolute!important;top:auto!important;
  bottom:var(--daailok-panel-gap)!important;
  left:calc(var(--light-sidebar) + var(--daailok-panel-gap) + 3px)!important;
  right:calc(var(--daailok-right-column-width) + var(--daailok-panel-gap) + var(--daailok-panel-gap))!important;
  height:var(--route-open-height)!important;min-height:0!important;
}

/* In verified recovery only, reveal the previously open Route drawer after
   Compact's opacity/transform animation has been cancelled. */
html[data-studio-layout="normal"] body#daailokStudio
 .studio[data-route-timeline-mode="route"][data-route-layout-recovery="true"] #leftDrawer{
  opacity:1!important;transform:none!important;pointer-events:auto!important;
}

/* Single geometry owner: Normal Route never inherits transient inspector
   offsets from a Compact layout. All Route panel coordinates live in CSS;
   the JS only changes the selected layout/mode state. */
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"] .right-panel{
  top:var(--daailok-panel-gap,10px)!important;
  right:var(--daailok-panel-gap,10px)!important;
  bottom:var(--daailok-panel-gap,10px)!important;
  left:auto!important;
  height:auto!important;
}
html[data-studio-layout="normal"] body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-light-shots="open"]
  #lightShotTimeline[data-panel="route"]{
  top:auto!important;
  bottom:var(--daailok-panel-gap,10px)!important;
}
html body#daailokStudio
  .studio[data-route-timeline-mode="route"][data-layout-transitioning="true"]
  :is(.body-grid,.main-workspace,.viewport,.light-viewport-frame,
      .right-panel,#leftDrawer,#lightShotTimeline){
  transition-property:none!important;
}