#clipModeViewport { display:flex; flex:1 1 auto; min-height:0; overflow:auto; align-items:stretch; background:rgba(0,0,0,.2); }
#btnClipSequence[hidden] { display:none; }
.clip-sequence-toggle.active { color:var(--accent); border-color:var(--accent); background:rgba(120,180,255,.14); }
.clip-look-duration { flex:0 0 auto; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.clip-settings-modal.clip-creation-modal:not(.project-browser-modal) { width:420px; }
.clip-settings-form { display:flex; flex-direction:column; gap:12px; }
.clip-settings-name { margin:0 0 8px; font-size:14px; color:var(--text); overflow-wrap:anywhere; }
.clip-settings-label { font-size:12px; font-weight:600; }
.clip-settings-modal input[type="number"] { box-sizing:border-box; width:100%; padding:10px 12px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; font:inherit; }
.clip-settings-duration:focus { outline:1px solid var(--accent); }
.clip-settings-hint { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.clip-settings-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.clip-settings-field { display:flex; flex-direction:column; gap:8px; }
.clip-settings-field[hidden] { display:none; }
.clip-settings-inherit { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); }
.clip-settings-inherit input { accent-color:var(--accent); }
.clip-settings-modal input:disabled { opacity:.5; }
.clip-settings-modal select { width:100%; padding:9px 10px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; }
.clip-settings-conversion { margin:0; color:var(--accent); font-size:12px; font-variant-numeric:tabular-nums; }
#clipModeViewport[hidden], #clipAnimationControls[hidden], #editorBar .zoom-control[hidden] { display:none; }
.clip-look-column,.clip-master-column { box-sizing:border-box; display:flex; flex-direction:column; flex:0 0 var(--clip-column-width,280px); min-width:0; min-height:0; border-right:1px solid var(--line); border-top:2px solid transparent; }
.clip-look-column.selected,.clip-master-column.selected { background:rgba(120,180,255,.025); border-top-color:var(--accent); }
.clip-look-header { position:relative; display:flex; flex:0 0 auto; align-items:center; gap:6px; padding:9px 10px; border-bottom:1px solid var(--line); }
.clip-look-progress { position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none; background:rgba(94,224,181,.15); }
.clip-look-progress[hidden] { display:none; }
.clip-look-progress-fill { display:block; width:100%; height:100%; background:#5ee0b5; transform:scaleX(0); transform-origin:left center; }
.clip-look-column.playing > .clip-look-header { background:rgba(120,180,255,.22); }
.clip-look-name { min-width:0; width:100%; border:1px solid transparent; background:transparent; color:var(--text); font:inherit; font-size:12px; font-weight:600; padding:5px 2px; }
.clip-look-name { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.clip-look-name:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.clip-look-name-input { box-sizing:border-box; cursor:text; background:var(--panel); border-color:var(--accent); }
.clip-look-name-input:focus-visible { outline:none; }
.clip-look-name-input[aria-invalid="true"] { border-color:#ff8181; }
.clip-launch,.clip-look-menu { background:transparent; border:1px solid var(--line); border-radius:5px; color:var(--muted); cursor:pointer; min-width:28px; height:28px; }
.clip-launch:disabled { opacity:.35; cursor:default; }
.clip-look-menu { border-color:transparent; min-width:20px; }
.clip-look-stack { display:flex; flex:1 1 0; min-height:0; overflow-y:auto; flex-direction:column; gap:7px; padding:10px; scrollbar-width:thin; }
.clip-look-stack > * { flex-shrink:0; }
.clip-look-footer { flex:0 0 auto; border-top:1px solid var(--line); padding:6px 10px; background:var(--panel); }
.clip-add-layer,.clip-new-clip { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:3px 2px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--muted); font:inherit; font-size:11px; font-weight:600; cursor:pointer; text-align:left; }
.clip-add-layer:hover,.clip-add-layer[aria-expanded="true"],.clip-new-clip:hover { color:var(--text); background:rgba(120,180,255,.08); }
.clip-add-layer:focus-visible,.clip-new-clip:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.clip-add-layer .timeline-layer-toolbar-plus,.clip-new-clip .timeline-layer-toolbar-plus { width:22px; height:22px; font-size:17px; }
.clip-add-layer-menu { --layer-rgb:145,160,184; min-width:196px; max-height:calc(100vh - 16px); overflow-y:auto; box-sizing:border-box; }
.clip-add-layer-menu .btn { display:flex; flex:0 0 auto; align-items:center; gap:10px; min-height:34px; font-size:12px; }
.clip-add-layer-menu img,.clip-add-layer-menu .timeline-layer-toolbar-mask-icon { width:24px; height:24px; flex:0 0 24px; object-fit:contain; }
.clip-add-layer-menu .btn:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; background:rgba(120,180,255,.12); }
.clip-add-layer-menu .btn[hidden],.clip-layer-search-empty[hidden] { display:none; }
.clip-add-layer-menu .btn.search-match { background:rgba(120,180,255,.12); }
.clip-add-layer-menu .editor-search-field { flex:0 0 auto; margin-bottom:5px; }
.clip-layer-search { box-sizing:border-box; width:100%; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--text); font:inherit; font-size:12px; }
.clip-layer-search:focus { outline:1px solid var(--accent); outline-offset:-1px; }
.clip-layer-search-empty { margin:0; padding:12px 10px; color:var(--muted); font-size:12px; }
.clip-context-menu.clip-preset-menu { flex-direction:row; align-items:stretch; overflow:hidden; max-width:calc(100vw - 16px); padding:0; }
.clip-preset-panel { box-sizing:border-box; width:250px; min-width:0; max-height:min(520px,calc(100vh - 16px)); overflow-y:auto; padding:5px; scrollbar-width:thin; }
.clip-preset-panel + .clip-preset-panel { border-left:1px solid var(--line); }
.clip-preset-menu > .clip-preset-panel:not(.clip-preset-root) { max-height:var(--clip-preset-height,520px); }
.clip-context-menu.clip-preset-menu.opens-left { flex-direction:row-reverse; }
.clip-preset-menu.opens-left > .clip-preset-panel { border-left:0; }
.clip-preset-menu.opens-left > .clip-preset-panel + .clip-preset-panel { border-right:1px solid var(--line); }
.clip-preset-menu .btn { width:100%; font-weight:400; }
.clip-preset-menu .btn[aria-expanded="true"] { background:rgba(120,180,255,.12); }
.clip-preset-chevron { flex:0 0 25px; align-self:stretch; display:flex; align-items:center; justify-content:center; margin-left:auto; color:var(--muted); font-size:20px; }
.clip-preset-menu .clip-preset-back { color:var(--muted); font-size:11px; min-height:32px; border-bottom:1px solid var(--line); border-radius:0; margin-bottom:4px; }
.clip-preset-name { white-space:normal; overflow-wrap:anywhere; }
.clip-preset-results .btn { flex-direction:column; align-items:flex-start; gap:3px; padding:9px 10px; }
.clip-preset-context { color:var(--muted); font-size:10px; }
.clip-preset-status:empty,.clip-preset-results:empty { display:none; }
@media (max-width:700px) {
  .clip-context-menu.clip-preset-menu { flex-direction:column; width:min(300px,calc(100vw - 16px)); }
  .clip-preset-panel { width:100%; max-height:calc(100vh - 80px); }
  .clip-preset-menu > .clip-preset-panel:not(.clip-preset-root) { max-height:calc(100vh - 80px); }
  .clip-preset-menu.has-categories .clip-preset-root { flex-shrink:0; }
  .clip-preset-menu.has-categories .clip-preset-root .clip-preset-items,
  .clip-preset-menu.has-categories .clip-preset-root .clip-preset-status,
  .clip-preset-menu.has-presets > .clip-preset-panel:nth-child(2) { display:none; }
  .clip-preset-panel + .clip-preset-panel { border-left:0; border-top:1px solid var(--line); }
}
.clip-layer-pill { box-sizing:border-box; display:flex; align-items:center; gap:2px; text-align:left; padding:0 5px 0 0; min-height:39px; min-width:0; width:100%; border:1px solid color-mix(in srgb,var(--clip-color,var(--muted)) 32%,transparent); border-radius:6px; background:color-mix(in srgb,var(--clip-color,var(--muted)) 5%,transparent); color:var(--text); font:inherit; cursor:pointer; }
.clip-layer-select { display:flex; align-items:center; gap:8px; flex:1; min-width:0; align-self:stretch; border:0; background:transparent; padding:10px; color:inherit; font:inherit; text-align:left; cursor:pointer; border-radius:5px; }
.clip-layer-actions { display:flex; gap:1px; flex:0 0 auto; }
.clip-layer-speed { flex:0 0 auto; margin-right:4px; padding:3px 5px; border:1px solid color-mix(in srgb,var(--clip-color,var(--accent)) 30%,transparent); border-radius:4px; background:transparent; color:var(--clip-color,var(--accent)); font:inherit; font-size:9px; font-weight:500; line-height:1.2; cursor:pointer; font-variant-numeric:tabular-nums; }
.clip-layer-speed:hover { background:rgba(120,180,255,.1); border-color:var(--accent); color:var(--text); }
.clip-layer-speed:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.clip-layer-action { display:flex; align-items:center; justify-content:center; width:24px; height:28px; padding:4px; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; }
.clip-layer-action .ui-icon { width:16px; height:16px; }
.clip-layer-action:hover { background:rgba(120,180,255,.12); color:var(--text); }
.clip-layer-delete:hover { color:#ff8181; background:rgba(255,100,100,.1); }
.clip-layer-select:focus-visible,.clip-layer-action:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.clip-layer-hidden .clip-layer-select { opacity:.45; }
.clip-layer-hidden .clip-layer-visibility { color:var(--accent); }
.clip-layer-visibility .ui-icon { opacity:var(--clip-eye-opacity,1); }
.clip-layer-pill.has-opacity-editor { flex-wrap:wrap; }
.clip-opacity-editor { display:grid; grid-template-columns:auto minmax(50px,1fr) 20px; align-items:center; gap:7px; flex:0 0 100%; box-sizing:border-box; padding:7px 5px 9px 10px; border-top:1px solid var(--line); font-size:10px; cursor:default; }
.clip-opacity-control { min-width:0; }
.clip-opacity-close { border:0; background:transparent; color:var(--muted); padding:0; font-size:17px; cursor:pointer; }
.clip-opacity-close:hover { color:var(--text); }
.clip-opacity-control.is-animated .slider-wrapper { opacity:.4; cursor:not-allowed; }
.clip-shortcut-blend { width:100%; min-width:0; grid-column:2 / -1; font-size:11px; }
.clip-opacity-note { grid-column:1 / -1; color:var(--muted); font-size:10px; }
.clip-layer-pill:hover { background:color-mix(in srgb,var(--clip-color,var(--muted)) 10%,transparent); }
.clip-layer-pill.selected { border:1px solid var(--accent); box-shadow:0 0 0 1px var(--accent); }
.clip-layer-pill.clip-drop-before { box-shadow:0 -3px 0 var(--accent); }
.clip-layer-pill.clip-drop-after { box-shadow:0 3px 0 var(--accent); }
.clip-look-column.clip-drop-column,.clip-master-column.clip-drop-column { background:rgba(120,180,255,.08); }
.clip-layer-type { font-size:10px; font-weight:700; color:var(--clip-color,var(--muted)); flex:0 0 auto; }
.clip-layer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.clip-empty-state { box-sizing:border-box; flex:1 1 0; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; color:var(--muted); text-align:center; }
.clip-empty-state h3 { margin:0; font-size:16px; font-weight:500; color:var(--text); }
.clip-empty-state p,.clip-empty-column { margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.clip-empty-column { display:flex; justify-content:center; align-items:flex-start; flex:1 0 auto; width:100%; padding:20px 12px; border:0; border-radius:5px; background:transparent; font-family:inherit; text-align:center; cursor:pointer; }
.clip-empty-column:hover { color:var(--text); background:rgba(120,180,255,.025); }
.clip-empty-column:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; }
.clip-creation-modal:not(.project-browser-modal) { width:600px; max-width:calc(100vw - 32px); max-height:85vh; }
.clip-creation-modal:not(.project-browser-modal) .demo-modal-body { overflow:auto; }
.clip-creation-modal .project-browser-search { flex-shrink:0; margin-bottom:14px; }
.clip-source-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.clip-source-choice { display:flex; flex-direction:column; text-align:left; gap:9px; padding:18px; background:rgba(255,255,255,.025); color:var(--text); border:1px solid var(--line); border-radius:8px; cursor:pointer; font:inherit; }
.clip-source-choice:hover { border-color:var(--accent); background:rgba(120,180,255,.05); }
.clip-source-choice strong { font-size:13px; } .clip-source-choice span { font-size:11px; color:var(--muted); line-height:1.5; }
.clip-source-preview { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:5px; }
.clip-moment-label { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin:20px 0; font-size:12px; }
.clip-moment-slider { width:100%; accent-color:var(--accent); }
.clip-moment-layers { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.clip-moment-preview { position:relative; display:grid; place-items:center; aspect-ratio:16/9; max-height:32vh; margin-top:16px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#090c12; }
.clip-moment-preview-image { width:100%; height:100%; min-height:0; object-fit:contain; }
.clip-moment-preview-status { position:absolute; padding:6px 10px; border-radius:5px; background:#101520dc; color:var(--muted); font-size:12px; }
.clip-moment-layer { padding-left:12px; }
.clip-moment-layer input { width:16px; height:16px; margin:0; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.clip-moment-layer.is-excluded .clip-layer-select { opacity:.45; }
.clip-moment-layer:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.clip-context-menu { position:fixed; z-index:100001; display:flex; flex-direction:column; padding:5px; background:#171c27; border:1px solid var(--line); border-radius:7px; box-shadow:0 12px 30px #0008; }
.clip-context-menu .btn { text-align:left; border:0; background:transparent; }
.clip-context-menu .btn:hover { background:rgba(120,180,255,.12); }
.clip-look-context-menu { min-width:210px; padding:6px; border-radius:10px; box-shadow:0 12px 32px #0006,0 2px 6px #0004; }
.clip-look-context-menu .btn { display:flex; align-items:center; gap:10px; min-height:34px; padding:7px 10px; border-radius:6px; color:#b2bac7; font-size:13px; font-weight:400; line-height:20px; white-space:nowrap; }
.clip-look-context-menu .btn .ui-icon { width:16px; height:16px; flex:0 0 16px; color:#8994a6; }
.clip-look-context-menu .btn:hover,.clip-look-context-menu .btn:focus-visible { background:rgba(120,180,255,.09); color:#d0d5df; }
.clip-look-context-menu .btn:hover .ui-icon,.clip-look-context-menu .btn:focus-visible .ui-icon { color:inherit; }
.clip-look-context-menu .btn:focus-visible { outline:1px solid rgba(120,180,255,.3); outline-offset:-1px; }
#clipAnimationControls { display:flex; align-items:center; gap:10px; margin-left:auto; }
#clipAnimationControls .clip-animation-readout { color:var(--muted); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
#clipAnimationControls select { background:rgba(0,0,0,.2); color:var(--text); border:1px solid var(--line); border-radius:4px; padding:4px 6px; font:inherit; font-size:11px; }
#clipAnimationControls .clip-animation-timing { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 26px; padding:4px; margin-left:-6px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; }
#clipAnimationControls .clip-animation-timing .ui-icon { width:16px; height:16px; }
#clipAnimationControls .clip-animation-timing:hover { color:var(--text); background:rgba(255,255,255,.06); border-color:var(--line); }
#clipAnimationControls .clip-animation-timing:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.clip-timing-modal:not(.project-browser-modal) { width:460px; }
.clip-timing-duration-row { display:flex; align-items:center; gap:10px; }
.clip-timing-duration-row input[type="number"] { width:90px; appearance:textfield; -moz-appearance:textfield; }
.clip-timing-duration-row input::-webkit-inner-spin-button,
.clip-timing-duration-row input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.clip-timing-choices { display:flex; flex-direction:column; gap:12px; margin:8px 0 0; padding:0; border:0; }
.clip-timing-choices legend { margin-bottom:10px; font-size:12px; color:var(--muted); }
.clip-timing-choice { display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.clip-timing-choice input { flex:0 0 auto; margin:3px 0 0; accent-color:var(--accent); }
.clip-timing-choice > span { display:flex; flex-direction:column; gap:4px; font-size:12px; line-height:1.5; }
.clip-timing-choice > span > span { color:var(--muted); }
/* Match the main timeline loop: orange range and inward-facing ruler flags. */
.clip-animation-range .keyframe-track-area {
  background:linear-gradient(90deg,
    rgba(0,0,0,.22) 0 var(--clip-animation-start),
    rgba(120,180,255,.07) var(--clip-animation-start) var(--clip-animation-end),
    rgba(0,0,0,.22) var(--clip-animation-end) 100%);
}
#clipAnimationRange { position:sticky; top:var(--keyframe-sticky-header-height); left:0; height:28px; margin-top:-28px; z-index:55; pointer-events:none; overflow:hidden; }
#clipAnimationRange[hidden] { display:none; }
.clip-animation-loop-fill { position:absolute; inset-block:0; background:rgba(255,150,80,.15); border-inline:2px solid rgba(255,150,80,.6); box-sizing:border-box; }
.clip-animation-loop-handle { position:absolute; top:0; width:18px; height:28px; padding:0; border:0; border-radius:0; background:transparent; color:rgba(255,150,80,.9); pointer-events:auto; cursor:ew-resize; touch-action:none; }
.clip-animation-loop-handle.start { transform:translateX(-2px); }
.clip-animation-loop-handle.end { transform:translateX(-16px); }
.clip-animation-loop-handle::before { content:''; position:absolute; top:0; width:0; height:0; border-top:10px solid currentColor; }
.clip-animation-loop-handle.start::before { left:2px; border-right:10px solid transparent; }
.clip-animation-loop-handle.end::before { right:2px; border-left:10px solid transparent; }
.clip-animation-loop-handle:hover,.clip-animation-loop-handle:focus-visible,#clipAnimationRange.dragging .clip-animation-loop-handle { color:#ffc38d; }
.clip-animation-loop-handle:focus { outline:none; }
.clip-animation-loop-handle:focus-visible::before { filter:drop-shadow(0 0 3px #ffc38d); }
.keyframe-diamond.clip-keyframe-outside { opacity:.3; }
@media(max-width:900px) { #editorBar { flex-wrap:wrap; } #clipAnimationControls { flex-wrap:wrap; gap:5px; } }
@media(max-width:500px) { .clip-source-choices { grid-template-columns:1fr; } }

.clip-playback-source { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; white-space:nowrap; }
.clip-playback-source[hidden] { display:none; }
.clip-playback-source::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.clip-playback-source.is-playing { color:var(--accent); }

/* The look bank extends beyond the screen; transport and layer tools stay fixed. */
#clipModeViewport { min-width:0; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(160,177,200,.4) rgba(0,0,0,.15); }
#clipModeViewport::-webkit-scrollbar { width:10px; height:10px; }
#clipModeViewport::-webkit-scrollbar-thumb { background:rgba(160,177,200,.4); border:2px solid #10141d; border-radius:6px; }
#clipModeViewport::-webkit-scrollbar-track { background:#10141d; }
#clipModeViewport.is-panning,#clipModeViewport.is-panning * { cursor:grabbing !important; }
.clip-add-column { display:flex; flex-direction:column; flex:1 0 144px; min-height:0; box-sizing:border-box; }
.clip-add-column > .clip-look-footer { margin-top:auto; }
.clip-new-clip { max-width:calc(var(--clip-column-width,280px) - 20px); }
.clip-add-column.clip-drop-column { background:rgba(120,180,255,.08); box-shadow:inset 0 0 0 1px var(--accent); }
.clip-add-column.clip-drop-column .clip-new-clip { border-color:var(--accent); color:var(--text); }

.clip-look-preview { display:flex; flex:0 0 100px; align-items:center; justify-content:center; width:100%; height:100px; padding:0; border:0; border-bottom:1px solid var(--line); background:#090c12; color:var(--muted); cursor:pointer; overflow:hidden; }
.clip-look-preview:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.clip-look-thumbnail { width:100%; height:100%; object-fit:contain; }
.clip-look-thumbnail[hidden],.clip-thumbnail-placeholder[hidden] { display:none; }
.clip-thumbnail-placeholder { font-size:11px; }

#clipModeViewport.clip-media-drop-active { box-shadow:inset 0 0 0 1px var(--accent); }
.clip-look-column.clip-media-drop-target,.clip-master-column.clip-media-drop-target { box-shadow:inset 0 0 0 2px var(--accent); background:rgba(120,180,255,.08); }
.clip-media-drop-hint { position:fixed; z-index:10000; transform:translateX(-50%); max-width:80vw; padding:8px 14px; border:1px solid var(--accent); border-radius:6px; background:var(--panel); color:var(--text); font-size:12px; pointer-events:none; box-shadow:0 5px 20px #0005; }
.clip-media-file-list { max-height:140px; overflow:auto; margin:0 0 18px; padding-left:20px; color:var(--muted); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.clip-media-choices { grid-template-columns:1fr; gap:9px; }
.clip-media-choices .clip-source-choice { padding:14px; gap:6px; }
.clip-media-choices .clip-source-choice:disabled { opacity:.4; cursor:default; }
.clip-media-status { color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.clip-media-progress { display:block; width:100%; height:10px; margin:18px 0 24px; accent-color:var(--accent); }

/* Master follows the clips and can stay pinned to the right edge. */
.clip-master-column,
.clip-master-column.selected { background:linear-gradient(155deg, #29283e 0%, #1b2433 48%, var(--panel) 100%); border-left:1px solid #655f82; border-right:0; }
.clip-master-column.clip-drop-column,
.clip-master-column.clip-media-drop-target { background:linear-gradient(155deg, #36334e 0%, #243247 48%, var(--panel) 100%); }
.clip-master-column .clip-look-footer { background:transparent; }
.clip-master-title { flex:1; font-size:13px; letter-spacing:.03em; }
.clip-master-column.is-pinned { position:sticky; right:0; z-index:5; }
.clip-master-pin[aria-pressed="true"] { color:var(--accent); background:rgba(120,180,255,.14); }
.clip-master-column:has(.clip-master-bypass[aria-pressed="false"]) .clip-look-stack { opacity:.5; }

/* Playlist shares the Master surface and the existing column/footer rhythm. */
.clip-playlist-column { box-sizing:border-box; display:flex; flex-direction:column; flex:0 0 var(--clip-column-width,280px); min-width:0; min-height:0; border-top:2px solid transparent; border-right:1px solid #655f82; background:linear-gradient(155deg,#29283e 0%,#1b2433 48%,var(--panel) 100%); }
.clip-playlist-column.is-pinned { position:sticky; left:0; z-index:6; }
.clip-playlist-title { flex:1; min-width:0; font-size:13px; }
.clip-playlist-total,.clip-playlist-duration { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.clip-playlist-play { display:flex; align-items:center; justify-content:center; padding:0 4px; }
.clip-playlist-play.active,.clip-playlist-pin[aria-pressed="true"] { color:var(--accent); background:rgba(120,180,255,.14); }
.clip-playlist-rows { flex:1 1 0; min-height:0; overflow-y:auto; margin:0; padding:0; list-style:none; scrollbar-width:thin; }
.clip-playlist-row { position:relative; display:flex; align-items:center; min-height:38px; border-bottom:1px solid rgba(255,255,255,.035); border-left:2px solid transparent; }
.clip-playlist-row.selected { background:rgba(120,180,255,.09); border-left-color:var(--accent); }
.clip-playlist-row.playing .clip-playlist-name { color:var(--accent); }
.clip-playlist-row.playing .clip-playlist-name::before { content:'▶'; font-size:9px; margin-right:6px; }
.clip-playlist-grip { flex:none; padding:0 3px 0 7px; color:var(--muted); opacity:.4; cursor:grab; }
.clip-playlist-entry { display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:10px 10px 10px 3px; border:0; background:transparent; color:var(--text); font:inherit; font-size:12px; cursor:pointer; text-align:left; }
.clip-playlist-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clip-playlist-entry:focus-visible { outline:1px solid var(--accent); outline-offset:-2px; }
.clip-playlist-footer { display:flex; align-items:center; gap:5px; background:transparent; min-height:45px; box-sizing:border-box; }
.clip-playlist-footer > .clip-layer-action { height:32px; }
.clip-playlist-add { flex:1; min-width:0; width:auto; }
.clip-camera-list { display:flex; flex-direction:column; gap:4px; margin-top:-3px; }
.clip-camera-row { --clip-color:#42bbe1; }
.clip-camera-row .clip-camera-use { flex:none; color:#42bbe1; }
.clip-camera-row .clip-camera-use[aria-pressed="true"] { background:rgba(66,187,225,.18); }
.clip-scene-link { display:inline-flex; margin-left:4px; color:var(--muted); }
.clip-scene-link svg { width:13px; height:13px; }