:root {
    --accent: #4a9eff;
    --accent-hover: #5aaeff;
    --bg: #0a0a0a;
    --panel: #151515;
    --input: #1a1a1a;
    --border: #222;
    --border-hover: #444;
    --text: #e0e0e0;
    --dim: #999;
    --dimmer: #888;
    --danger: #ff4444;
    --glow-danger: rgba(255, 68, 68, 0.35);
    --scene: #30e050;

    /* Default desktop buffer: pad 20×2 + gap 20×2 + panels 320×2 = 720
       collapsed: pad 20×2 + gap 20×2 + left 40 + right 320 = 440
       vertical: top(container-pad 20 + panel-border 1 + panel-pad 20 + controls 40 + controls-margin 10)
         + bottom(panel-pad 20 + panel-border 1 + container-pad 20) = 132 */
    --buffer-h: 720px;
    --buffer-h-collapsed: 440px;
    /* expanded vertical:
       top: container-pad 20 + panel-border 1 + panel-pad 20 = 41 (toolbar is position:absolute)
       bottom: panel-pad 0 + panel-border 1 + container-pad 20 = 21 */
    --buffer-v-top: 91px;
    --buffer-v-bottom: 140px;
    /* collapsed vertical:
       top: same 41
       bottom: same 21 */
    --buffer-v-top-collapsed: 91px;
    --buffer-v-bottom-collapsed: 140px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    max-width: 100vw;
}

.container {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 320px calc(100vw - var(--buffer-h)) 320px;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;
}

.container.left-collapsed {
    grid-template-columns: 40px calc(100vw - var(--buffer-h-collapsed)) 320px;
}

.container .canvas-container {
    flex: 1;
    min-height: 0;
}

.container.left-collapsed .canvas-container {
    flex: 1;
    min-height: 0;
}

.container.left-collapsed .canvas-controls:not(.scene-mode) ~ div:last-of-type {
    display: none !important;
}

.container .canvas-controls:not(.scene-mode) ~ div:last-of-type {
    display: none !important;
}

.panel {
    background: var(--panel);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#canvasPanel .bottom-panel {
    flex-shrink: 0;
}

/* Strip flush at bottom and sides */
#canvasPanel {
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
#canvasPanel .canvas-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.panel.right-panel {
    position: relative;
    overflow: visible;
}

.panel.right-panel .panel-content {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel.right-panel.collapsed .panel-content {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.panel-toggle {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 16px;
    z-index: 100;
    transition: all 0.2s;
}

.panel-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #999;
}

.panel:first-child {
    overflow: visible;
}

.left-panel-toggle {
    display: flex;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 16px;
    z-index: 1000;
    transition: all 0.2s;
}

.left-panel-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #999;
}

.container.left-collapsed .panel:first-child {
    padding: 0;
    overflow: visible;
}

.container.left-collapsed .panel:first-child > *:not(.left-panel-toggle) {
    display: none !important;
}

.panel h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777;
    margin-bottom: 15px;
    font-weight: 800;
}

.upload-zone {
    border: 1.5px dashed rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.upload-zone:hover {
    border-color: rgba(74, 158, 255, 0.25);
    background: rgba(74, 158, 255, 0.02);
}

.upload-zone.active {
    border-color: rgba(74, 158, 255, 0.4);
    background: rgba(74, 158, 255, 0.04);
}

.upload-zone p {
    font-size: 12px;
    color: #444;
    margin-top: 8px;
}

.upload-zone svg {
    width: 28px;
    height: 28px;
    stroke: #333;
}

/* States stack animation - G4 Drop & Settle */
.states-stack {
    position: relative;
    width: 44px;
    height: 36px;
    margin: 0 auto;
}

.states-stack span {
    position: absolute;
    border: 2px solid;
    border-radius: 4px;
}

.states-stack span:nth-child(1) {
    width: 32px;
    height: 26px;
    bottom: 0;
    left: 0;
    animation: statesDrop1 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3;
    animation-fill-mode: forwards;
    border-color: #666;
}

.states-stack span:nth-child(2) {
    width: 32px;
    height: 26px;
    top: 0;
    right: 0;
    animation: statesDrop2 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3;
    animation-fill-mode: forwards;
    border-color: #666;
}

@keyframes statesDrop1 {
    0% { 
        transform: translateY(-25px) rotate(-5deg); 
        opacity: 0; 
        border-color: #22d3ee; 
        box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); 
    }
    20%, 70% { 
        transform: translateY(0) rotate(0deg); 
        opacity: 1; 
        border-color: var(--accent); 
        box-shadow: 0 0 12px rgba(74, 158, 255, 0.4); 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
        border-color: #666; 
        box-shadow: none; 
    }
}

@keyframes statesDrop2 {
    0%, 15% { 
        transform: translateY(-25px) rotate(5deg); 
        opacity: 0; 
        border-color: #a78bfa; 
        box-shadow: 0 0 15px rgba(167, 139, 250, 0.5); 
    }
    35%, 70% { 
        transform: translateY(0) rotate(0deg); 
        opacity: 1; 
        border-color: var(--accent); 
        box-shadow: 0 0 12px rgba(74, 158, 255, 0.4); 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
        border-color: #666; 
        box-shadow: none; 
    }
}

input[type="file"] {
    display: none;
}

.canvas-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: var(--bg);
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
    height: 40px;
    overflow: hidden;
}

.canvas-controls .control-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.canvas-controls label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dim);
    white-space: nowrap;
}

.canvas-controls input[type="range"] {
    width: 120px;
    height: 4px;
    background: #222;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.canvas-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.canvas-controls input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.canvas-controls .value {
    font-size: 11px;
    color: var(--dimmer);
    min-width: 35px;
}

.canvas-container {
    background: var(--bg);
    border-radius: 8px;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    overflow: hidden;
}

.canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.canvas-scroll-container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.canvas-content {
    position: relative;
    min-width: 100%;
    height: 100%;
}

.canvas-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.canvas-scroll-container::-webkit-scrollbar-track {
    background: var(--bg);
}

.canvas-scroll-container::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.canvas-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#downloadMenu::-webkit-scrollbar {
    width: 6px;
}

#downloadMenu::-webkit-scrollbar-track {
    background: var(--input);
}

#downloadMenu::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

#downloadMenu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#downloadMenu {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}
#recordBtn.recording {
    background: #2a1a1a;
    border-color: #e05030;
    color: #ff7755;
    box-shadow: 0 0 8px var(--glow-danger);
}
#recordBtn.recording .record-dot {
    animation: record-pulse 1s ease-in-out infinite alternate;
}
@keyframes record-pulse {
    from { opacity: 1; }
    to   { opacity: 0.3; }
}

#videoBtn.active {
    background: #1a2a3a;
    border-color: var(--accent);
    color: var(--accent);
}

#canvas, #canvasAlt {
    display: block;
    position: absolute;
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

#canvas.scene-stack-mode {
    width: auto;
    height: 100%;
}

/* Mode switch dissolve overlay */
.canvas-crossfade {
    position: absolute;
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    transition: opacity 200ms ease-out;
}

.scene-layer {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    border: 2px solid transparent;
    cursor: move;
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.scene-layer.scene-transitioning {
    transition: transform 200ms ease, width 200ms ease, height 200ms ease, opacity 200ms ease, border-color 0.2s, box-shadow 0.2s;
}

/* Layer display image — fills the layer div, CSS handles visual sizing.
   HTML width/height attributes preserve natural dimensions for drawImage callers.
   object-fit:fill stretches to match div (same as old canvas with style width:100%). */
.scene-layer .layer-display {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    background: transparent;
}

.scene-layer .layer-canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    background: transparent;
}

/* Legacy: scene layer canvas (transition period / undo restore) */
.scene-layer canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background: transparent;
}

/* Drop target highlight when dragging grid thumbnails onto canvas */
.canvas-scroll-container.scene-drop-target {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: rgba(74, 158, 255, 0.06);
    transition: background 0.15s, outline-color 0.15s;
}

.scene-layer:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
}

.scene-layer.selected {
    border-color: #ff4a4a;
    box-shadow: 0 0 15px rgba(255, 74, 74, 0.7);
}

.scene-layer.selected:hover {
    border-color: #ff4a4a;
    box-shadow: 0 0 15px rgba(255, 74, 74, 0.7);
}

.resize-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: block !important;
    z-index: 100;
    touch-action: none;
}

.resize-handle.nw { top: -12px; left: -12px; cursor: nw-resize; }
.resize-handle.ne { top: -12px; right: -12px; cursor: ne-resize; }
.resize-handle.sw { bottom: -12px; left: -12px; cursor: sw-resize; }
.resize-handle.se { bottom: -12px; right: -12px; cursor: se-resize; }
.resize-handle.n { top: -10px; left: 24px; right: 24px; width: auto; height: 20px; border-radius: 0; cursor: n-resize; }
.resize-handle.s { bottom: -10px; left: 24px; right: 24px; width: auto; height: 20px; border-radius: 0; cursor: s-resize; }
.resize-handle.e { right: -10px; top: 24px; bottom: 24px; width: 20px; height: auto; border-radius: 0; cursor: e-resize; }
.resize-handle.w { left: -10px; top: 24px; bottom: 24px; width: 20px; height: auto; border-radius: 0; cursor: w-resize; }

/* ── Rotation handle ─────────────────────────────────────── */
/* Circle above the layer, visible only when selected.        */
/* Stem connects it to the layer top edge.                    */
.rotation-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6c5ce7;
    border: 2px solid #fff;
    cursor: grab;
    top: -36px;
    left: calc(50% - 8px);
    display: none;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.rotation-handle:hover  { background: #a29bfe; }
.rotation-handle:active { cursor: grabbing; }
/* Stem */
.rotation-handle::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 20px;
    background: rgba(108,92,231,0.6);
    left: 5px;
    top: 14px;
}
/* Only show when parent is selected */
.scene-layer.selected .rotation-handle { display: block; }
/* Larger touch target on coarse devices */
@media (pointer: coarse) {
    .rotation-handle {
        width: 28px;
        height: 28px;
        top: -48px;
        left: calc(50% - 14px);
    }
    .rotation-handle::before { left: 12px; top: 26px; }
}

/* Larger touch targets on touch devices */
@media (pointer: coarse) {
    .resize-handle { width: 40px; height: 40px; }
    .resize-handle.nw { top: -20px; left: -20px; }
    .resize-handle.ne { top: -20px; right: -20px; }
    .resize-handle.sw { bottom: -20px; left: -20px; }
    .resize-handle.se { bottom: -20px; right: -20px; }
    .resize-handle.n { top: -16px; left: 40px; right: 40px; width: auto; height: 32px; }
    .resize-handle.s { bottom: -16px; left: 40px; right: 40px; width: auto; height: 32px; }
    .resize-handle.e { right: -16px; top: 40px; bottom: 40px; width: 32px; height: auto; }
    .resize-handle.w { left: -16px; top: 40px; bottom: 40px; width: 32px; height: auto; }
}

/* ── Ghost overlays ──────────────────────────────────────── */

/* Playing card pulse animation for strip */
.ssp-card.playing {
    border-color: rgba(108, 92, 231, 0.6);
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.3), 0 0 12px rgba(108, 92, 231, 0.2);
    animation: scene-card-pulse 1s ease-in-out infinite;
}
@keyframes scene-card-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.3), 0 0 8px rgba(108, 92, 231, 0.15); }
    50% { box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.5), 0 0 16px rgba(108, 92, 231, 0.3); }
}

.scene-stack-thumbnails {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
}

.scene-stack-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.scene-stack-thumbnails::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 3px;
}

.scene-stack-thumbnails::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.scene-stack-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.scene-stack-thumb {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    border-radius: 6px;
    cursor: grab;
    transition: border-color 0.2s, transform 0.2s, opacity 0.2s;
    overflow: hidden;
    position: relative;
    background: #000;
}

.scene-stack-thumb:active {
    cursor: grabbing;
}

.scene-stack-thumb.dragging {
    opacity: 0.5;
    transform: scale(0.9);
}

.scene-stack-thumb.drag-over {
    border-color: var(--accent);
    transform: scale(1.1);
}

.scene-stack-thumb:hover {
    border-color: var(--accent);
}

.scene-stack-thumb:hover:not(.dragging) {
    transform: scale(1.05);
}

.scene-stack-thumb.selected {
    border-color: #ff4a4a;
    box-shadow: 0 0 8px rgba(255, 74, 74, 0.6);
}

.scene-stack-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scene-stack-thumb .remove-layer {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(255, 68, 68, 0.9);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 12px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

.scene-stack-thumb:hover .remove-layer {
    opacity: 1;
}

.scene-stack-thumb .remove-layer:hover {
    background: rgba(255, 0, 0, 0.9);
}

.scene-stack-thumb .mark-checkbox {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--accent);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-stack-thumb .mark-checkbox:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #6ab7ff;
    transform: scale(1.1);
}

.scene-stack-thumb .mark-checkbox.marked {
    background: var(--accent);
    border-color: var(--accent);
}

.scene-stack-thumb .mark-checkbox.marked::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #333;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--text);
    font-size: 16px;
    text-align: center;
}

.loading-progress {
    color: var(--dim);
    font-size: 14px;
}

.loading-cancel-btn {
    margin-top: 8px;
    padding: 8px 28px;
    background: transparent;
    color: var(--dim);
    border: 1px solid var(--dim);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.loading-cancel-btn:hover {
    color: var(--text);
    border-color: var(--text);
}

.project-thumb {
    width: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #333;
    cursor: pointer;
    transition: border-color 0.2s;
    background: #000;
    display: flex;
    flex-direction: column;
}

.project-thumb:hover {
    border-color: var(--accent);
}

.project-thumb img {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    display: block;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    position: relative;
    z-index: 1;
}

.btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #555;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
    color: #999;
}

.btn:active {
    transform: scale(0.98);
}

.btn.primary {
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
    color: #4a9eff;
}

.btn.primary:hover {
    background: var(--accent-hover);
}

.btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ─── Save Confirmation Celebration (#5) ──────────────────── */
.btn.btn-save-success {
    border-color: rgba(0, 255, 136, 0.4) !important;
    color: rgba(0, 255, 136, 0.85) !important;
    background: linear-gradient(180deg, #0f1f18, #0a1a12) !important;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.12);
    opacity: 1 !important;
    animation: save-glow-melt 1.8s ease-out 0.3s both;
}
@keyframes save-glow-melt {
    0%   { box-shadow: 0 0 16px rgba(0, 255, 136, 0.12); border-color: rgba(0, 255, 136, 0.4); }
    100% { box-shadow: 0 0 0 rgba(0, 255, 136, 0); border-color: rgba(255, 255, 255, 0.1); }
}

/* Blink Button */
.blink-btn {
    padding: 3px 10px;
    font-size: 10px;
    flex-shrink: 0;
    width: 52px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    line-height: 1;
    background: transparent;
}
.blink-btn .blink-icon {
    font-size: 11px;
    transition: color 0.3s, opacity 0.3s;
}
.blink-btn:not(:disabled):hover {
    border-color: var(--accent);
    background: transparent !important;
}
.blink-btn:focus {
    background: transparent;
    outline: none;
}
/* Active / blinking state */
.blink-btn.active {
    background: #221a2a;
    border-color: #cc55ff;
    color: #dd88ff;
    box-shadow: 0 0 8px rgba(204, 85, 255, 0.35);
}
.blink-btn.active .blink-icon {
    animation: blink-pulse 0.6s ease-in-out infinite alternate;
    color: #cc55ff;
}
.blink-btn.active:hover {
    border-color: #dd66ff;
    box-shadow: 0 0 12px rgba(204, 85, 255, 0.5);
    background: #2a2035;
}
#sceneStackBtn.active {
    background: #1a2a1a;
    border-color: var(--scene);
    color: #55ff77;
    box-shadow: 0 0 8px rgba(48,224,80,0.35);
}
#sceneStackBtn.active .blink-icon {
    animation: none;
    color: #33ff55;
}
#sceneStackBtn.active:hover {
    background: #203a20;
    border-color: #44ff66;
    box-shadow: 0 0 12px rgba(48,224,80,0.5);
}


/* ─── MODE BUTTON HOVER ANIMATIONS ─────────────────────── */
.btn-text-anim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}
.btn-text-anim > span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* BLINK — eye blink animation (handled in button animations section below) */
.blink-text > span {
    transition: opacity 0.15s ease;
}

/* SPLIT — text splits apart from center */
.split-text {
    display: inline-flex;
    align-items: center;
}
.split-left, .split-divider, .split-right {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.split-divider {
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#splitWipeBtn:not(:disabled):hover .split-left {
    transform: translateX(-3px);
}
#splitWipeBtn:not(:disabled):hover .split-right {
    transform: translateX(3px);
}
#splitWipeBtn:not(:disabled):hover .split-divider {
    opacity: 0.3;
    transform: scaleY(1.4);
}

/* DIFF — RGB channel shift glitch */
.diff-text > span {
    position: relative;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
#diffMapBtn:not(:disabled):hover .diff-text > span:nth-child(1) { animation: diffGlitch1 0.6s ease infinite; }
#diffMapBtn:not(:disabled):hover .diff-text > span:nth-child(2) { animation: diffGlitch2 0.6s ease infinite 0.05s; }
#diffMapBtn:not(:disabled):hover .diff-text > span:nth-child(3) { animation: diffGlitch3 0.6s ease infinite 0.1s; }
#diffMapBtn:not(:disabled):hover .diff-text > span:nth-child(4) { animation: diffGlitch4 0.6s ease infinite 0.15s; }
@keyframes diffGlitch1 {
    0%, 100% { text-shadow: none; color: inherit; }
    25% { text-shadow: -1px 0 #ff0040, 1px 0 #00ff88; color: #ff4466; }
    50% { text-shadow: 1px 0 #ff0040, -1px 0 #00ff88; color: inherit; }
    75% { text-shadow: none; color: #44ffaa; }
}
@keyframes diffGlitch2 {
    0%, 100% { text-shadow: none; color: inherit; }
    20% { text-shadow: 1px 0 #00ff88, -1px 0 #ff0040; color: #44ffaa; }
    60% { text-shadow: -1px 0 #ff0040, 1px 0 #00ff88; color: #ff4466; }
}
@keyframes diffGlitch3 {
    0%, 100% { text-shadow: none; color: inherit; }
    30% { color: #ff4466; text-shadow: 1px 0 #00ff88; }
    70% { color: #44ffaa; text-shadow: -1px 0 #ff0040; }
}
@keyframes diffGlitch4 {
    0%, 100% { text-shadow: none; color: inherit; }
    40% { text-shadow: -1px 0 #00ff88, 1px 0 #ff0040; color: #ff4466; }
    80% { color: #44ffaa; text-shadow: 1px 0 #ff0040; }
}

/* SCENE — letters float up from below like layers stacking */
.scene-text > span {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#sceneStackBtn:not(:disabled):hover .scene-text > span:nth-child(1) { animation: sceneStack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0s; }
#sceneStackBtn:not(:disabled):hover .scene-text > span:nth-child(2) { animation: sceneStack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.06s; }
#sceneStackBtn:not(:disabled):hover .scene-text > span:nth-child(3) { animation: sceneStack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.12s; }
#sceneStackBtn:not(:disabled):hover .scene-text > span:nth-child(4) { animation: sceneStack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.18s; }
#sceneStackBtn:not(:disabled):hover .scene-text > span:nth-child(5) { animation: sceneStack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.24s; }
@keyframes sceneStack {
    0% { transform: translateY(6px); opacity: 0.2; }
    60% { transform: translateY(-2px); opacity: 1; }

/* SAVE/EXPORT/FOLDER — animations triggered by JS */
.save-icon, .save-word, .export-word, .export-arrow {
    display: inline-block;
}
@keyframes saveDisk {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(3px) scale(0.85); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes exportArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}
@keyframes folderOpen {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.3) rotate(-10deg); }
    70% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.anim-save { animation: saveDisk 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.anim-export { animation: exportArrow 0.6s ease infinite !important; }
.anim-folder { animation: folderOpen 0.4s ease !important; }


    100% { transform: translateY(0); opacity: 1; }
}

/* ─── Mode Hint Tooltip ─────────────────────────────── */
.mode-hint {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 12px;
    color: #ccc;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    animation: hintFadeIn 0.2s ease-out, hintFadeOut 0.3s ease-in 2.5s forwards;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    letter-spacing: 0.3px;
}
.mode-hint::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
.mode-hint .hint-icon {
    margin-right: 6px;
}
.mode-hint .hint-highlight {
    color: #fff;
    font-weight: 600;
}
@keyframes hintFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes hintFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes blink-pulse {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0.4; transform: scale(0.85); }
}

.slider-group {
    margin-bottom: 12px;
}

.slider-group label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dim);
    margin-bottom: 8px;
}

.slider-group input[type="range"] {
    width: 100%;
    height: 4px;
    background: #222;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.slider-group input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.thumbnail-container {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 5px 8px 9px;
    margin-right: 4px;
}

.thumbnail-container::-webkit-scrollbar {
    width: 3px;
}

.thumbnail-container::-webkit-scrollbar-track {
    background: transparent;
}

.thumbnail-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.thumbnail-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    grid-auto-rows: 75px;
    gap: 8px;
    justify-content: center;
}

.thumb {
    width: 75px;
    height: 75px;
    border-radius: 6px;
    cursor: grab;
    position: relative;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Shimmer placeholder while thumbnail generates */
.thumb:has(img:not([src])),
.thumb:has(img[src=""]) {
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: thumb-shimmer 1.5s ease-in-out infinite;
}

@keyframes thumb-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hide broken image icon when no src yet */
.thumb img:not([src]),
.thumb img[src=""] {
    visibility: hidden;
}

.thumb:active {
    cursor: grabbing;
}

.thumb.dragging {
    opacity: 0.4;
    transform: scale(0.92);
}

.thumb.drag-over {
    border-color: rgba(74, 158, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.15);
}

.thumb:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.thumb.active {
    border-color: rgba(74, 158, 255, 0.5);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.12);
}

.thumb.selected {
    border-color: rgba(74, 158, 255, 0.5);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.12), 0 0 0 3px rgba(74, 158, 255, 0.08);
}

/* ─── Thumbnail Selection Ring (#6) ───────────────────────── */
.thumb::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(74, 158, 255, 0.5);
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    z-index: 1;
    display: none;
}
.thumb.select-ring-pop::after {
    display: block;
    animation: thumb-ring-pop 0.3s ease-out both;
}
@keyframes thumb-ring-pop {
    0%   { opacity: 0.7; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.08); }
}

.thumb.anchor {
    border-color: rgba(255, 74, 74, 0.5) !important;
    box-shadow: 0 0 10px rgba(255, 74, 74, 0.12) !important;
}

.thumb.disabled {
    opacity: 0.4;
    border-color: rgba(255, 255, 255, 0.08);
}

.thumb.disabled:hover {
    opacity: 0.6;
}

/*
 * PREVIEW WINDOW RULE AT THUMBNAIL SCALE
 * The preview canvas uses max-width/max-height with a guard (calc 100% - 20px).
 * Thumbnails mirror this: inset 2px on every side = 2px breathing room.
 * object-fit: contain — ONE RULE, ALL CATEGORIES (image, scene, gallery, dismissed).
 * background: #000 on .thumb handles the letterbox area.
 * DO NOT change to cover. DO NOT remove the inset. DO NOT use width/height 100%.
 */
.thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 4px);
    max-height: calc(100% - 4px);
    width: auto;
    height: auto;
}

/* .thumb[data-category="scene"] img — inherits contain from .thumb img base rule */
/* .thumb[data-category="scene"] background — inherits #000 from .thumb base rule */

.thumb[data-category="scene"] {
    background: #000; /* explicit for clarity — same as base */
}

.thumb .remove {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 12px;
    color: #888;
    font-weight: bold;
    z-index: 10;
    cursor: pointer;
}

.thumb:hover .remove {
    opacity: 1;
}

.thumb[data-category="dismissed"] .remove {
    display: none !important;
}

.thumb .remove:hover {
    color: #fd4556;
    background: rgba(253, 69, 86, 0.25);
}

/* Restore button for archived thumbnails */
.thumb .restore-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 12px;
    color: #8cf;
    cursor: pointer;
    z-index: 10;
}
.thumb:hover .restore-btn {
    opacity: 1;
}
.thumb .restore-btn:hover {
    color: #4af;
    background: rgba(68, 170, 255, 0.25);
}

.thumb .mark-checkbox-main {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(74, 158, 255, 0.75);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    z-index: 10;
    display: flex; /* Always visible — marking controls what appears on strip */
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(74, 158, 255, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.thumb .mark-checkbox-main:hover {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(106, 183, 255, 0.8);
    transform: scale(1.1);
}

.thumb .mark-checkbox-main.marked {
    background: rgba(74, 158, 255, 0.75);
    border-color: rgba(74, 158, 255, 0.8);
}

.thumb .mark-checkbox-main.marked::after {
    content: '✓';
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ─── Anchor Badge (top-left red corner) ─── */
.thumb .anchor-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 0 0;
    border-color: #e53935 transparent transparent transparent;
    pointer-events: none;
    z-index: 3;
}

/* ─── Mark-All Checkbox (in section headings) ─── */
.mark-all-checkbox {
    display: none;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 6px;
    position: relative;
    top: -1px;
}

.mark-all-checkbox:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.85);
    transform: scale(1.1);
}

.mark-all-checkbox.marked {
    background: rgba(74, 158, 255, 0.45);
    border-color: rgba(74, 158, 255, 0.7);
}

.mark-all-checkbox.marked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 9px;
    font-weight: bold;
}

.mark-all-checkbox.partial::after {
    content: '–';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
}

.context-menu {
    position: fixed;
    background: var(--input);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 1px rgba(255,255,255,0.05);
    display: none;
    animation: ctxFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: var(--ctx-origin, top left);
}

@keyframes ctxFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    animation: ctxItemIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.context-menu-item:nth-child(1) { animation-delay: 0ms; }
.context-menu-item:nth-child(2) { animation-delay: 25ms; }
.context-menu-item:nth-child(3) { animation-delay: 45ms; }
.context-menu-item:nth-child(4) { animation-delay: 60ms; }
.context-menu-item:nth-child(5) { animation-delay: 75ms; }
.context-menu-item:nth-child(6) { animation-delay: 85ms; }
.context-menu-item:nth-child(7) { animation-delay: 95ms; }

@keyframes ctxItemIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.context-menu-item:hover {
    background: #2a3a4a;
    color: #fff;
}

.context-menu-item.destructive {
    color: #ff6b6b;
}

.context-menu-item.destructive:hover {
    background: rgba(253, 69, 86, 0.15);
    color: #ff8888;
}

.context-menu-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 3px 8px;
    pointer-events: none;
}


.action-btn {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 6px;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    vertical-align: middle;
}

.action-btn:hover {
    background: #3a3a3a;
    border-color: var(--border-hover);
}

.action-btn.delete-all {
    background: transparent;
    border-color: #555;
    margin-left: 4px;
    padding: 3px 7px;
    color: var(--dim);
    font-size: 11px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.action-btn.delete-all:hover {
    background: rgba(255, 68, 68, 0.12);
    border-color: #c44;
    color: #e66;
}

.categories-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.categories-scroll::-webkit-scrollbar {
    width: 3px;
}

.categories-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.categories-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.categories-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.status {
    font-size: 11px;
    color: var(--dimmer);
    margin-top: 8px;
    text-align: center;
}

.info-badge {
    display: inline-block;
    background: var(--input);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--dim);
    margin-top: 8px;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Easing select */
/* easing-select now styled via .tl-easing-select */

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--input);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 20px;
    color: var(--text);
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    pointer-events: auto;
    max-width: 90vw;
    text-align: center;
}

.toast.success {
    border-color: var(--scene);
    background: #1a2a1a;
}

.toast.error {
    border-color: #e05030;
    background: #2a1a1a;
}

.toast.warning {
    border-color: #e0a030;
    background: #2a2a1a;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

/* Collapsible upload sections (mobile only) */
.upload-collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 500px; /* generous default so it's open */
    opacity: 1;
}

.upload-collapsible.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.upload-collapse-bar {
    display: none; /* hidden on desktop */
}

@media (max-width: 900px) {
    .upload-collapse-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        background: var(--input);
        border: 1px solid #2a2a2a;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 8px;
        transition: background 0.2s, border-color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .upload-collapse-bar:active {
        background: #222;
    }

    .upload-collapse-bar .collapse-chevron {
        font-size: 12px;
        color: var(--dimmer);
        transition: transform 0.3s ease;
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }

    .upload-collapse-bar.collapsed .collapse-chevron {
        transform: rotate(-90deg);
    }

    .upload-collapse-bar .collapse-label {
        font-size: 11px;
        color: var(--dim);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
    }

    .upload-collapse-bar .collapse-status {
        font-size: 11px;
        color: var(--accent);
        margin-left: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .upload-collapse-bar .collapse-thumb {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        object-fit: contain;
        border: 1px solid #333;
        flex-shrink: 0;
    }

    /* Hide spacer between anchor and states on mobile */
    #anchorSpacer {
        display: none;
    }
}

/* Mobile Menu Toggle */
/* Mobile right content - hidden on desktop */
.mobile-right-content {
    display: none;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    :root {
        /* ≤1200: pad 15×2 + gap 15×2 + panels 280×2 = 620 
           collapsed: pad 15×2 + gap 15×2 + left 40 + right 280 = 380 */
        --buffer-h: 620px;
        --buffer-h-collapsed: 380px;
        --buffer-v-top: 86px;
        --buffer-v-bottom: 140px;
        --buffer-v-top-collapsed: 86px;
        --buffer-v-bottom-collapsed: 140px;
    }

    .container {
        grid-template-columns: 280px calc(100vw - var(--buffer-h)) 280px;
        gap: 15px;
        padding: 15px;
    }

    .container.left-collapsed {
        grid-template-columns: 40px calc(100vw - var(--buffer-h-collapsed)) 280px;
    }

    #canvas.normal-mode, #canvasAlt.normal-mode {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 65px);
        grid-auto-rows: 65px;
        gap: 8px;
    }

    .thumb {
        width: 65px;
        height: 65px;
    }
}

@media (max-width: 1024px) {
    :root {
        /* ≤1024: pad 12×2 + gap 12×2 + panels 160+250 = 458
           collapsed: pad 12×2 + gap 12×2 + left 40 + right 250 = 338 */
        --buffer-h: 458px;
        --buffer-h-collapsed: 338px;
        --buffer-v-top: 75px;
        --buffer-v-bottom: 140px;
        --buffer-v-top-collapsed: 75px;
        --buffer-v-bottom-collapsed: 140px;
    }

    .container {
        grid-template-columns: 160px calc(100vw - var(--buffer-h)) 250px;
        gap: 12px;
        padding: 12px;
        transition: grid-template-columns 0.3s ease;
    }

    .container.left-collapsed {
        grid-template-columns: 40px calc(100vw - var(--buffer-h-collapsed)) 250px;
    }

    #canvas.normal-mode, #canvasAlt.normal-mode {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .canvas-controls {
        flex-wrap: nowrap;
        height: 32px;
        min-height: 32px;
        padding: 4px 8px;
        gap: 4px;
        overflow: hidden;
    }

    .canvas-controls .btn {
        padding: 2px 6px;
        font-size: 9px;
        min-height: 22px;
        height: 22px;
    }

    .canvas-controls label {
        font-size: 9px;
    }

    .canvas-controls .value {
        font-size: 9px;
        min-width: 28px;
    }

    .canvas-controls input[type="range"] {
        width: 60px;
    }

    .canvas-controls #zoomControl {
        gap: 2px;
    }

    .canvas-controls #zoomControl .btn {
        padding: 2px 4px;
        min-width: auto;
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 55px);
        grid-auto-rows: 55px;
    }

    .thumb {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 900px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        max-width: 100vw;
    }

    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
        min-height: 100vh;
        gap: 15px;
        padding: 15px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .panel {
        max-height: none;
        overflow: visible;
        max-width: 100vw;
    }

    .left-panel-toggle {
        display: none !important;
    }

    .container.left-collapsed {
        grid-template-columns: 1fr;
    }

    .container.left-collapsed .panel:first-child {
        padding: 20px;
    }

    .container.left-collapsed .panel:first-child > *:not(.left-panel-toggle) {
        display: revert !important;
    }

    .panel:first-child {
        order: 1;
    }

    /* Hide the canvas as a separate panel on mobile portrait - it lives inside the left panel now */
    .panel:nth-child(2),
    #canvasPanel {
        order: 2;
    }
    
    .panel:nth-child(2).mobile-hidden {
        display: none !important;
    }

    /* Mobile canvas slot styling when active */
    #mobileCanvasSlot.active {
        display: block !important;
        background: var(--bg);
        border-radius: 8px;
        border: 1px solid var(--border);
        overflow: hidden;
        max-width: 100vw;
    }

    /* Compact controls inside the slot */
    #mobileCanvasSlot .canvas-controls {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
        row-gap: 4px;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 5px 8px;
        align-items: center;
        overflow: visible !important;
        position: relative;
    }

    #mobileCanvasSlot .canvas-controls .btn {
        height: 32px !important;
        min-height: 32px !important;
        padding: 2px 8px !important;
        font-size: 10px !important;
    }

    #mobileCanvasSlot .canvas-controls #blinkBtn {
        min-width: 60px;
        height: 32px !important;
        min-height: 32px !important;
    }

    #mobileCanvasSlot .canvas-controls #sceneStackBtn {
        margin-left: auto;
        min-width: 60px;
        height: 32px !important;
        min-height: 32px !important;
    }

    #mobileCanvasSlot .canvas-controls label {
        font-size: 9px !important;
    }

    #mobileCanvasSlot .canvas-controls #speedSlider {
        width: 50px;
    }

    #mobileCanvasSlot .canvas-controls #speedValue,
    #mobileCanvasSlot .canvas-controls #opacityValue,
    #mobileCanvasSlot .canvas-controls #zoomValue {
        font-size: 9px !important;
        min-width: 28px;
    }

    #mobileCanvasSlot .canvas-controls #zoomOutBtn,
    #mobileCanvasSlot .canvas-controls #zoomInBtn {
        min-width: 20px;
    }

    #mobileCanvasSlot .canvas-controls #zoomResetBtn {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    /* Canvas area - take as much space as possible */
    #mobileCanvasSlot .canvas-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    #mobileCanvasSlot .canvas-wrapper {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        max-width: 100%;
    }

    #mobileCanvasSlot .canvas-scroll-container {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
    }
    
    #mobileCanvasSlot #canvas.normal-mode {
        max-width: calc(100% - 4px);
        max-height: calc(100% - 4px);
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #mobileCanvasSlot #canvas.scene-stack-mode {
        height: 100%;
    }

    #mobileCanvasSlot .canvas-content {
        height: 100%;
        max-width: 100%;
    }

    /* Hide the scene stack wrapper inside mobile slot */
    #mobileCanvasSlot > div:last-child:has(#sceneStackContainer) {
        display: none !important;
    }
    
    #mobileCanvasSlot > div[style*="height: 64px"] {
        display: none !important;
    }

    .panel.right-panel {
        order: 3;
        display: none !important;
    }

    .panel.right-panel.collapsed .panel-content {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .panel-toggle {
        display: none;
    }

    /* Show mobile content section in left panel */
    .mobile-right-content {
        display: block !important;
    }

    .canvas-controls {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 10px;
        align-items: center;
        overflow: visible !important;
        position: relative;
    }

    .canvas-controls #blinkGroup {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
    }
    
    /* Make BLINK button same size/shape as SCENE */
    .canvas-controls #blinkBtn {
        width: auto;
        min-width: 70px;
        padding: 4px 10px;
        font-size: 10px;
        min-height: 28px;
        height: 28px;
    }
    
    .canvas-controls #zoomControl {
        display: flex !important;
        align-items: center;
        gap: 4px;
    }
    
    #opacityGroup {
        display: none;
        align-items: center;
        gap: 5px;
    }
    
    #opacityGroup[style*="display: flex"] {
        display: flex !important;
    }
    
    /* SCENE button pushed to right via auto margin */
    .canvas-controls #sceneStackBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        height: 32px;
        padding: 4px 10px;
        font-size: 10px;
        min-width: 70px;
        margin-left: auto;
    }
    
    /* Hide items that shouldn't show in blink mode (default) */
    .canvas-controls #captureSceneBtn,
    .canvas-controls #videoBtn,
    .canvas-controls #recordBtn,
    .canvas-controls #layerOpacityControl,
    .canvas-controls #undoRedoControl {
        display: none !important;
    }
    
    /* SCENE MODE: when .scene-mode is on the controls bar, show scene controls */
    .canvas-controls.scene-mode #captureSceneBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        height: 28px;
        padding: 4px 8px;
        font-size: 10px;
        white-space: nowrap;
    }
    
    .canvas-controls.scene-mode #shapesDropdown {
        display: inline-block !important;
    }
    
    .shape-option:hover {
        background: #333;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl {
        display: none !important;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl.visible {
        display: flex !important;
        align-items: center;
        gap: 4px;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl label {
        font-size: 9px;
    }
    
    .canvas-controls.scene-mode #layerOpacitySlider {
        width: 50px;
    }
    
    .canvas-controls.scene-mode #layerOpacityValue {
        font-size: 9px;
        min-width: 28px;
    }
    
    .canvas-controls.scene-mode #undoRedoControl {
        display: flex !important;
        align-items: center;
        gap: 2px;
    }
    
    .canvas-controls.scene-mode #undoBtn,
    .canvas-controls.scene-mode #redoBtn {
        min-height: 28px;
        height: 28px;
        min-width: 28px;
        padding: 4px 6px;
        font-size: 12px;
    }
    
    /* In scene mode, hide the blink group */
    .canvas-controls.scene-mode #blinkGroup {
        display: none !important;
    }
    
    /* In scene mode, show timeline button */
    .canvas-controls.scene-mode #videoBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        height: 28px;
        padding: 4px 8px;
        font-size: 10px;
    }
    
    /* In scene mode, show record button when timeline is active */
    .canvas-controls.scene-mode #recordBtn[style*="display: block"],
    .canvas-controls.scene-mode #recordBtn[style*="display:block"] {
        display: inline-flex !important;
        align-items: center;
        height: 28px;
        padding: 4px 8px;
        font-size: 10px;
    }
    
    /* In scene mode, controls flow naturally */
    .canvas-controls.scene-mode {
        padding-right: 10px;
    }
    
    /* Hide the spacer div on mobile */
    .canvas-controls > div:not([id]) {
        display: none !important;
    }
    
    .canvas-controls #zoomControl .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        min-width: 28px;
        padding: 4px 8px;
    }
    
    .canvas-controls #zoomValue {
        display: inline !important;
        min-width: 36px;
        text-align: center;
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 60px);
        grid-auto-rows: 60px;
    }

    .thumb {
        width: 60px;
        height: 60px;
        border: 1.5px solid rgba(255, 255, 255, 0.1);
    }

    .upload-zone {
        padding: 15px;
    }

    .upload-zone p {
        font-size: 12px;
    }

    #sceneStackContainer {
        height: 54px;
        display: none !important;
    }
    
    /* Hide the scene stack wrapper div on portrait mobile */
    .panel:nth-child(2) > div:last-of-type:has(#sceneStackContainer) {
        display: none !important;
    }
    
    .panel > div[style*="height: 64px"] {
        display: none !important;
    }

    .scene-stack-thumb {
        width: 50px;
        height: 50px;
    }

    #downloadMenu {
        width: 260px;
        max-height: 400px;
    }


    /* Help/Feedback/Info buttons (mobile) */
    .help-btn {
bottom: 70px;
right: 10px;
width: 28px;
height: 28px;
font-size: 13px;
    }
    .feedback-btn {
bottom: 70px;
right: 46px;
width: 28px;
height: 28px;
font-size: 12px;
    }
    .info-btn {
bottom: 70px;
right: 82px;
width: 28px;
height: 28px;
font-size: 13px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
        gap: 10px;
    }

    .panel {
        padding: 15px;
        border-radius: 10px;
    }

    .panel h2 {
        font-size: 12px;
    }

    .canvas-controls {
        padding: 8px;
        gap: 6px;
        row-gap: 8px;
    }
    
    /* Compact controls on small screens */
    #blinkGroup {
        gap: 6px;
    }
    
    #blinkGroup > div {
        gap: 4px;
    }

    .blink-btn {
        width: 48px;
        font-size: 9px;
        padding: 2px 6px;
        height: 28px;
    }
    
    #sceneStackBtn {
        width: 65px;
        font-size: 9px;
    }

    #speedSlider, #opacitySlider {
        width: 45px;
    }
    
    #speedValue, #opacityValue {
        min-width: 28px;
        font-size: 9px;
    }

    #zoomControl {
        gap: 2px;
    }
    
    #zoomOutBtn, #zoomInBtn {
        min-width: 24px;
        padding: 3px 5px;
    }
    
    #zoomResetBtn {
        padding: 3px 4px;
        font-size: 8px;
    }

    #zoomValue {
        min-width: 26px;
        font-size: 9px;
    }
    
    #captureSceneBtn, #videoBtn, #recordBtn {
        padding: 3px 6px;
        font-size: 9px;
    }
    
    #layerOpacityControl {
        gap: 4px;
    }
    
    #layerOpacityControl label {
        font-size: 9px;
    }
    
    #layerOpacitySlider {
        width: 50px;
    }
    
    #layerOpacityValue {
        font-size: 9px;
        min-width: 28px;
    }
    
    #undoRedoControl {
        gap: 2px;
    }
    
    #undoBtn, #redoBtn {
        min-width: 24px;
        padding: 3px 4px;
        font-size: 11px;
    }

    .btn {
        padding: 10px 15px;
        font-size: 12px;
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 55px);
        grid-auto-rows: 55px;
        gap: 6px;
    }

    .thumb {
        width: 55px;
        height: 55px;
    }

    .upload-zone svg {
        width: 28px;
        height: 28px;
    }

    .scene-stack-thumb {
        width: 45px;
        height: 45px;
    }

    #sceneStackContainer {
        height: 50px;
        display: none !important;
    }

    .mobile-bottom-sheet {
        padding: 15px;
        padding-bottom: 90px;
    }

    .mobile-menu-toggle {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 15px;
        right: 15px;
    }

    #downloadMenu {
        width: calc(100vw - 40px);
        left: 20px;
        transform: none;
    }

    .toast {
        font-size: 12px;
        padding: 10px 16px;
    }

    /* Tighter canvas slot on small phones */
    #mobileCanvasSlot .canvas-controls {
        padding: 4px 6px;
        gap: 3px;
        row-gap: 3px;
    }

    #mobileCanvasSlot .canvas-controls .btn {
        height: 28px !important;
        min-height: 28px !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
    }

    #mobileCanvasSlot .canvas-controls #blinkBtn,
    #mobileCanvasSlot .canvas-controls #sceneStackBtn {
        min-width: 54px;
        height: 28px !important;
        min-height: 28px !important;
    }

    #mobileCanvasSlot .canvas-controls #sceneStackBtn {
        margin-left: auto;
    }

    #mobileCanvasSlot .canvas-controls #speedSlider {
        width: 40px;
    }

    #mobileCanvasSlot .canvas-container {
        /* sized by sizeFrameToImage via canvasTruth */
    }
}

/* Landscape phone */
@media (max-width: 900px) and (orientation: landscape) {
    :root {
        /* Landscape phone: pad 10×2 + gap 10 + left panel 240 = 270 */
        --buffer-h: 270px;
        /* top: pad 10 + controls ~75 (2 rows) = 85
           bottom: pad 10 = 10 */
        --buffer-v-top: 85px;
        --buffer-v-bottom: 10px;
    }

    .container {
        grid-template-columns: 240px calc(100vw - var(--buffer-h));
        grid-template-rows: 1fr;
        gap: 10px;
        padding: 10px;
        height: 100vh;
        overflow: hidden;
    }

    #canvas.normal-mode, #canvasAlt.normal-mode {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* In landscape, use flex to put upload zones side by side */
    #uploadWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .upload-collapsible,
    .upload-collapsible.collapsed {
        max-height: 500px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    .upload-zone {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 90px !important;
        height: 60px !important;
        padding: 6px !important;
    }

    .upload-zone svg {
        width: 18px !important;
        height: 18px !important;
        margin-bottom: 4px !important;
    }

    .upload-zone p {
        font-size: 9px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .upload-zone p span {
        display: none !important;
    }

    /* Hide everything except the two collapsibles */
    #uploadWrapper .upload-collapse-bar,
    #uploadWrapper #anchorSpacer,
    #uploadWrapper #anchorStatus,
    #uploadWrapper #statesStatus,
    #uploadWrapper #anchorInput,
    #uploadWrapper #statesInput {
        display: none !important;
    }

    .panel:first-child {
        order: 1;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        padding: 10px;
        padding-bottom: 20px;
    }

    .panel:nth-child(2) {
        order: 2;
        min-height: auto;
        max-height: calc(100vh - 20px);
        overflow: hidden;
        display: flex !important;
        flex-direction: column;
        background: #000;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Ensure the canvas panel is visible in landscape */
    .panel:nth-child(2).mobile-hidden {
        display: flex !important;
    }
    
    /* Hide the inline canvas slot in landscape */
    #mobileCanvasSlot {
        display: none !important;
    }

    .panel.right-panel {
        display: none;
    }
    
    /* Show mobile content in left panel for landscape too */
    .mobile-right-content {
        display: block !important;
    }
    
    /* Save/Download buttons - minimal, fit the space */
    .mobile-right-content #mobileSaveProjectBtn,
    .mobile-right-content #mobileDownloadBtn {
        padding: 4px 12px;
        font-size: 10px;
        min-height: 24px;
        height: 24px;
        min-width: auto;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Compact upload zones */
    .upload-zone {
        padding: 10px;
    }
    
    .upload-zone svg {
        width: 24px;
        height: 24px;
    }
    
    .upload-zone p {
        font-size: 10px;
    }
    
    /* Touch-friendly thumbnails - 3 columns */
    .thumbnail-grid {
        grid-template-columns: repeat(3, 48px);
        grid-auto-rows: 48px;
        gap: 5px;
    }

    .thumb {
        width: 48px;
        height: 48px;
    }
    
    /* Canvas container - more space for image */
    .canvas-container {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        background: #000;
        border: none !important;
        border-radius: 0;
    }
    
    .canvas-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
    }
    
    .canvas-scroll-container {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
    }
    
    #canvas {
        max-width: calc(100% - 4px);
        max-height: calc(100% - 4px);
        width: 100%;
        height: 100%;
        object-fit: contain;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Canvas controls - compact single row */
    .canvas-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px;
        row-gap: 4px;
        min-height: 28px !important;
        max-height: none !important;
        height: auto !important;
        padding: 6px 8px;
        align-items: center;
        overflow: visible !important;
        position: relative;
        flex-shrink: 0;
        background: var(--panel) !important;
        border: 1px solid var(--border) !important;
        border-radius: 0;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .canvas-controls #blinkGroup {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 3px;
        align-items: center;
        height: 20px;
    }
    
    /* All buttons smaller */
    .canvas-controls .btn {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .canvas-controls #blinkBtn {
        min-width: 50px;
    }
    
    /* Zoom controls - move left with margin */
    .canvas-controls #zoomControl {
        display: flex !important;
        align-items: center;
        gap: 2px;
        height: 20px;
    }
    
    .canvas-controls #zoomControl .btn {
        min-width: 20px;
        width: 20px;
    }
    
    .canvas-controls #zoomValue {
        font-size: 9px;
        min-width: 28px;
    }
    
    #opacityGroup {
        display: none;
        align-items: center;
        gap: 2px;
        height: 20px;
    }
    
    #opacityGroup[style*="display: flex"] {
        display: flex !important;
    }
    
    #opacitySlider {
        width: 35px;
    }
    
    #opacityValue {
        font-size: 9px;
        min-width: 24px;
    }
    
    /* SCENE button */
    .canvas-controls #sceneStackBtn {
        min-width: auto;
        padding: 0 6px !important;
        font-size: 9px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        line-height: 20px !important;
        margin-left: auto;
        margin-top: -4px;
        width: 50px;
        max-width: 50px;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Opacity starts on second row when visible */
    .canvas-controls #opacityGroup {
        flex-basis: 100%;
        order: 10;
    }
    
    /* Speed slider compact */
    #speedSlider {
        width: 35px;
    }
    
    #speedValue {
        font-size: 9px;
        min-width: 24px;
    }
    
    /* Labels smaller */
    .canvas-controls label {
        font-size: 9px !important;
    }
    
    /* Hide scene stack mode buttons (default / blink mode) */
    .canvas-controls #captureSceneBtn,
    .canvas-controls #videoBtn,
    .canvas-controls #recordBtn,
    .canvas-controls #layerOpacityControl,
    .canvas-controls #undoRedoControl {
        display: none !important;
    }
    
    /* Hide flex spacer so buttons wrap naturally */
    .canvas-controls > div[style*="flex: 1"] {
        display: none !important;
    }
    
    /* Share button visible on second row */
    .canvas-controls #shareBtnDesktop {
        height: 20px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }
    
    /* SCENE MODE overrides for landscape */
    .canvas-controls.scene-mode #captureSceneBtn {
        display: inline-flex !important;
        align-items: center;
        height: 20px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }
    
    .canvas-controls.scene-mode #shapesDropdown {
        display: inline-block !important;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl {
        display: none !important;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl.visible {
        display: flex !important;
        align-items: center;
        gap: 2px;
        height: 20px;
    }
    
    .canvas-controls.scene-mode #undoRedoControl {
        display: flex !important;
        align-items: center;
        gap: 2px;
        height: 20px;
    }
    
    .canvas-controls.scene-mode #blinkGroup {
        display: none !important;
    }
    
    /* In scene mode, show timeline button */
    .canvas-controls.scene-mode #videoBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 20px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }
    
    /* In scene mode, show record button when timeline is active */
    .canvas-controls.scene-mode #recordBtn[style*="display: block"],
    .canvas-controls.scene-mode #recordBtn[style*="display:block"] {
        display: inline-flex !important;
        align-items: center;
        height: 20px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }
    
    /* Hide spacer */
    .canvas-controls > div:not([id]) {
        display: none !important;
    }
    
    /* Speed slider smaller */
    #speedSlider {
        width: 50px;
    }
    
    #speedValue {
        font-size: 9px;
        min-width: 30px;
    }
    
    /* Hide scene stack container AND its parent wrapper in landscape */
    #sceneStackContainer {
        display: none !important;
    }
    
    #sceneStackContainer.scene-stack-thumbnails {
        display: none !important;
    }
    
    /* Hide the wrapper div (parent of sceneStackContainer) */
    .panel:nth-child(2) > div:last-of-type:has(#sceneStackContainer) {
        display: none !important;
    }
    
    /* Fallback for browsers without :has() support */
    .panel > div[style*="height: 64px"] {
        display: none !important;
    }
}

/* Nest Hub and similar smart displays (landscape, short height) */
@media (min-width: 1024px) and (max-height: 800px) {
    :root {
        /* Nest Hub Max (1280×800) / Nest Hub (1024×600): short landscape screens
           pad 10×2 + gap 10×2 + panels 240×2 = 520
           collapsed: pad 10×2 + gap 10×2 + left 40 + right 240 = 320
           Every pixel of height matters here — panels are compact */
        --buffer-h: 520px;
        --buffer-h-collapsed: 320px;
        --buffer-v-top: 73px;
        --buffer-v-bottom: 140px;
        --buffer-v-top-collapsed: 73px;
        --buffer-v-bottom-collapsed: 140px;
    }

    .container {
        grid-template-columns: 240px calc(100vw - var(--buffer-h)) 240px;
        gap: 10px;
        padding: 10px;
    }

    .container.left-collapsed {
        grid-template-columns: 40px calc(100vw - var(--buffer-h-collapsed)) 240px;
    }

    /* Tight padding on short screens — every pixel of canvas height counts */
    #canvasPanel {
        padding: 8px 0 0 0;
    }

    .panel {
        padding: 10px;
    }

    .ssp-timeline {
        height: 64px;
    }

    .bp-thumb {
        height: 48px;
    }

    #canvas.normal-mode, #canvasAlt.normal-mode {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .panel {
        padding: 12px;
    }

    .panel h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .upload-zone {
        padding: 12px;
    }

    .upload-zone svg {
        width: 24px;
        height: 24px;
    }

    .upload-zone p {
        font-size: 11px;
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 55px);
        grid-auto-rows: 55px;
        gap: 6px;
    }

    .thumb {
        width: 55px;
        height: 55px;
    }

    .canvas-controls {
        padding: 6px 10px;
        gap: 6px;
    }

    .btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    .blink-btn {
        height: 26px;
        font-size: 9px;
    }

    #sceneStackContainer {
        height: 50px;
    }

    .scene-stack-thumb {
        width: 45px;
        height: 45px;
    }
}

/* JS-driven fallback for tablet portrait */
body.mobile-portrait .container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
}
body.mobile-portrait .panel:nth-child(2).mobile-hidden {
    display: none !important;
}
body.mobile-portrait .panel.right-panel {
    display: none;
}
body.mobile-portrait .panel-toggle {
    display: none;
}
body.mobile-portrait #mobileCanvasSlot.active {
    display: block !important;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
}
body.mobile-portrait #mobileCanvasSlot .canvas-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none;
    border-radius: 0;
}
body.mobile-portrait #mobileCanvasSlot .canvas-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.mobile-portrait #mobileCanvasSlot .canvas-scroll-container {
    width: 100%;
    height: 100%;
}
body.mobile-portrait #mobileCanvasSlot #canvas.normal-mode {
    max-width: calc(100% - 4px);
    max-height: calc(100% - 4px);
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 12px;
        padding: 12px;
    }

    .panel {
        max-height: none;
    }

    .panel:first-child {
        order: 1;
    }

    .panel:nth-child(2) {
        order: 2;
        min-height: 50vh;
        max-height: 65vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Canvas panel hidden in iPad portrait - lives in slot */
    .panel:nth-child(2).mobile-hidden {
        display: none !important;
    }

    /* Mobile canvas slot styling for iPad portrait */
    #mobileCanvasSlot.active {
        display: block !important;
    }

    #mobileCanvasSlot .canvas-container {
        /* sized by sizeFrameToImage via canvasTruth */
    }

    .panel.right-panel {
        order: 3;
    }

    .panel-toggle {
        display: none;
    }

    .panel.right-panel .panel-content {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
    }

    /* Show mobile content in left panel */
    .mobile-right-content {
        display: block !important;
    }

    /* Hide desktop right panel */
    .panel.right-panel {
        display: none;
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 70px);
        grid-auto-rows: 70px;
        gap: 10px;
    }

    /* Single row layout for canvas controls on wider tablets */
    .canvas-controls {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        padding: 8px 10px;
        align-items: center;
    }

    .canvas-controls #blinkGroup {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        align-items: center;
    }
    
    .canvas-controls #zoomControl {
        display: flex !important;
        align-items: center;
        gap: 4px;
    }

    #opacityGroup {
        display: none;
        align-items: center;
        gap: 5px;
    }
    
    #opacityGroup[style*="display: flex"] {
        display: flex !important;
    }

    .canvas-controls #sceneStackBtn {
        display: inline-flex !important;
        margin-left: auto;
    }
    
    /* Hide spacer */
    .canvas-controls > div:not([id]) {
        display: none !important;
    }
    
    /* Hide scene stack only buttons (default / blink mode) */
    .canvas-controls #captureSceneBtn,
    .canvas-controls #videoBtn,
    .canvas-controls #recordBtn,
    .canvas-controls #layerOpacityControl,
    .canvas-controls #undoRedoControl {
        display: none !important;
    }
    
    /* SCENE MODE overrides for iPad portrait */
    .canvas-controls.scene-mode #captureSceneBtn {
        display: inline-flex !important;
        align-items: center;
        height: 28px;
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .canvas-controls.scene-mode #shapesDropdown {
        display: inline-block !important;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl {
        display: none !important;
    }
    
    .canvas-controls.scene-mode #layerOpacityControl.visible {
        display: flex !important;
        align-items: center;
        gap: 4px;
    }
    
    .canvas-controls.scene-mode #undoRedoControl {
        display: flex !important;
        align-items: center;
        gap: 2px;
    }
    
    .canvas-controls.scene-mode #blinkGroup {
        display: none !important;
    }
    
    /* In scene mode, show timeline button */
    .canvas-controls.scene-mode #videoBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 28px;
        padding: 4px 8px;
        font-size: 10px;
    }
    
    /* In scene mode, show record button when timeline is active */
    .canvas-controls.scene-mode #recordBtn[style*="display: block"],
    .canvas-controls.scene-mode #recordBtn[style*="display:block"] {
        display: inline-flex !important;
        align-items: center;
        height: 28px;
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1366px) and (min-height: 768px) and (orientation: landscape) {
    :root {
        /* iPad Landscape expanded: pad 15×2 + gap 15×2 + panels 280×2 = 620
           collapsed: pad 15×2 + gap 15×2 + left 40 + right 280 = 380 */
        --buffer-h: 620px;
        --buffer-h-collapsed: 380px;
        --buffer-v-top: 86px;
        --buffer-v-bottom: 140px;
        --buffer-v-top-collapsed: 86px;
        --buffer-v-bottom-collapsed: 140px;
    }

    .container {
        grid-template-columns: 280px calc(100vw - var(--buffer-h)) 280px;
        gap: 15px;
        padding: 15px;
    }

    .container.left-collapsed {
        grid-template-columns: 40px calc(100vw - var(--buffer-h-collapsed)) 280px;
    }

    #canvas.normal-mode, #canvasAlt.normal-mode {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        width: auto;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .thumbnail-grid {
        grid-template-columns: repeat(3, 70px);
        grid-auto-rows: 70px;
        gap: 10px;
    }

    .thumb {
        width: 70px;
        height: 70px;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Show remove buttons on mobile - smaller in corner */
    .thumb .remove,
    .scene-stack-thumb .remove-layer {
        opacity: 0.9;
        width: 16px;
        height: 16px;
        font-size: 10px;
        top: 1px;
        right: 1px;
    }

    /* Boost thumb borders on touch — more visible at small sizes */
    .thumb {
        border: 1.5px solid rgba(255, 255, 255, 0.1);
    }

    .thumb.active {
        border-color: rgba(74, 158, 255, 0.6);
    }

    .btn {
        min-height: 44px;
    }

    .blink-btn {
        min-height: 36px;
    }

    input[type="range"] {
        height: 8px;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }
}

/* ─── Keyboard Shortcuts Modal ─────────────────────────────── */
.shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcuts-modal-content {
    background: var(--input);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.shortcuts-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.shortcuts-close {
    background: none;
    border: none;
    color: var(--dim);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.shortcuts-close:hover {
    color: #fff;
}

.shortcuts-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shortcut-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shortcut-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 2px;
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.shortcut-row span {
    color: #bbb;
    font-size: 13px;
}

.shortcut-row kbd {
    background: var(--bg);
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
    font-size: 12px;
    color: var(--text);
    min-width: 28px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ─── Help Button ──────────────────────────────────────────── */
.help-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #444;
    color: var(--dim);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0;
    line-height: 1;
}

.help-btn:hover {
    background: #2a2a2a;
    color: #fff;
    border-color: #666;
}

.feedback-btn {
    position: fixed;
    bottom: 16px;
    right: 56px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #444;
    color: var(--dim);
    font-size: 14px;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    padding: 0;
    line-height: 1;
}

.feedback-btn:hover {
    background: #2a2a2a;
    color: #fff;
    border-color: #666;
}

.import-fab {
    position: fixed;
    bottom: 16px;
    right: 136px;
    height: 32px;
    border-radius: 16px;
    background: #1a1a1a;
    border: 1px solid #444;
    color: var(--dim);
    font-size: 14px;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 9px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    width: 32px;
    transition: width 0.35s cubic-bezier(.4,0,.2,1),
                background 0.2s, color 0.2s, border-color 0.2s,
                opacity 0.3s, box-shadow 0.3s;
}
.import-fab .import-fab-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-left: 0;
    transition: max-width 0.35s cubic-bezier(.4,0,.2,1),
                opacity 0.25s ease,
                margin-left 0.35s cubic-bezier(.4,0,.2,1);
}
.import-fab:hover {
    width: 140px;
    background: #2a2a2a;
    color: #fff;
    border-color: #7c6ae8;
    box-shadow: 0 0 12px rgba(124,106,232,0.35);
}
.import-fab:hover .import-fab-label {
    max-width: 110px;
    opacity: 1;
    margin-left: 6px;
}
.import-fab.hidden {
    opacity: 0;
    pointer-events: none;
    width: 32px;
}

.feedback-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-content {
    background: var(--panel);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.feedback-type-btn {
    flex: 1;
    padding: 6px 10px;
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--dim);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.feedback-type-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.feedback-type-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(74, 158, 255, 0.1);
}

.feedback-disclosure {
    background: rgba(255, 180, 50, 0.08);
    border: 1px solid rgba(255, 180, 50, 0.25);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 16px 4px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #bbb;
}
.feedback-disclosure strong {
    color: #e8a830;
    font-size: 11.5px;
}

.feedback-submit-btn {
    width: 100%;
    padding: 10px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.feedback-submit-btn:hover {
    background: var(--accent-hover);
}

.feedback-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Share button: desktop version in canvas toolbar, mobile version in upload panel */
@media (min-width: 1025px) {
    .mobile-only-share {
display: none !important;
    }
}

@media (max-width: 1024px) {
    #shareBtnDesktop {
display: none !important;
    }
}

.mobile-only-share {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 2px 8px !important;
    font-size: 9px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    z-index: 10;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .mobile-only-share {
        top: 15px;
        right: 15px;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .mobile-only-share {
        top: 10px;
        right: 10px;
    }
}

/* ─── Extracted Inline Styles ──────────────────────────────── */

/* Section headings used in right panel and mobile panel */
.section-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-weight: 800;
    gap: 5px;
}

.section-heading span[id$="Count"],
.section-heading span[id$="ImageCount"],
.section-heading span[id$="SceneCount"],
.section-heading span[id$="GalleryCount"],
.section-heading span[id$="DismissedCount"] {
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
    color: #888;
    margin-left: 2px;
}

/* Panel dividers */
.divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
    margin: 15px 0;
}

.divider--strong {
    background: rgba(255, 255, 255, 0.08);
}

.divider--compact {
    margin: 10px 0;
}

/* Canvas toolbar labels, values, and control groups */
.toolbar-label {
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.toolbar-value {
    font-size: 10px;
    color: #fff;
    min-width: 32px;
}

.toolbar-slider {
    width: 70px;
    height: 3px;
    background: #222;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.toolbar-btn-sm {
    padding: 3px 8px;
    font-size: 10px;
    height: 24px;
    width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Right-side toolbar buttons - pushed 20px from main controls */
/* Right-side toolbar buttons spacing — desktop only */
@media (min-width: 1025px) {
    #cropBtn {
        margin-left: 20px;
    }
    #captureSceneBtn,
    #shareBtnDesktop {
        margin-left: 6px;
    }
}
/* ═══ CAPTURE Button - Camera Flash Animation ═══ */
#captureSceneBtn {
    font-size: 14px;
    min-width: 32px;
    width: 32px;
}

#captureSceneBtn:hover {
    animation: captureFlash 0.4s ease forwards;
}

#captureSceneBtn:hover .capture-icon {
    animation: captureSnap 0.4s ease;
}

@keyframes captureFlash {
    0% { background: #1a1a1a; }
    12% { background: rgba(255,255,255,0.75); box-shadow: 0 0 25px rgba(255,255,255,0.5); }
    100% { background: #2a3a2a; border-color: #5a5; box-shadow: 0 0 8px rgba(90,255,90,0.3); }
}

@keyframes captureSnap {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.2); }
}
/* ═══ Letter Wave Animation for CROP, CAPTURE, SHARE ═══ */

#cropBtn span,
#captureSceneBtn span,
#shareBtnDesktop span {
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
}

#cropBtn:hover,
#shareBtnDesktop:hover {
    background: #2a2a2a;
    border-color: #5a5;
    color: #5d5;
}

#cropBtn:hover span,
#shareBtnDesktop:hover span {
    animation: letterWave 0.6s ease forwards;
}

#cropBtn:hover span:nth-child(1),
#shareBtnDesktop:hover span:nth-child(1) { animation-delay: 0s; }

#cropBtn:hover span:nth-child(2),
#shareBtnDesktop:hover span:nth-child(2) { animation-delay: 0.05s; }

#cropBtn:hover span:nth-child(3),
#shareBtnDesktop:hover span:nth-child(3) { animation-delay: 0.1s; }

#cropBtn:hover span:nth-child(4),
#shareBtnDesktop:hover span:nth-child(4) { animation-delay: 0.15s; }

#cropBtn:hover span:nth-child(5),
#shareBtnDesktop:hover span:nth-child(5) { animation-delay: 0.2s; }

#cropBtn:hover span:nth-child(6),
#shareBtnDesktop:hover span:nth-child(6) { animation-delay: 0.25s; }

#cropBtn:hover span:nth-child(7),
#shareBtnDesktop:hover span:nth-child(7) { animation-delay: 0.3s; }

#cropBtn:hover span:nth-child(8),
#shareBtnDesktop:hover span:nth-child(8) { animation-delay: 0.35s; }

#cropBtn:hover span:nth-child(9),
#shareBtnDesktop:hover span:nth-child(9) { animation-delay: 0.4s; }

@keyframes letterWave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.ctrl-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ctrl-group--tight {
    gap: 5px;
}

.ctrl-group--small {
    gap: 3px;
}

/* Upload zone hint text */
.upload-hint {
    font-size: 10px;
    color: #444;
}

/* Upload panel layout */
.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-brand {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    opacity: 0.55;
}

/* Thumbnail/project grid containers */
.thumb-grid-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px;
}

/* Icon buttons inline in headings */
.icon-btn {
    cursor: pointer;
    margin-left: 5px;
    display: inline-block;
}

.icon-btn--tight {
    margin-left: 3px;
}

/* Bottom panel action bar */
.panel-actions {
    position: relative;
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.panel-actions__row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.panel-actions__btn {
    padding: 7px 16px;
    font-size: 10px;
    min-width: 90px;
}

/* Mobile bottom action row */
.mobile-actions__row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

/* Export / Download menu */
.export-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0;
    width: 288px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(74,158,255,0.04);
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    animation: exportSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom center;
}

/* ─── Name bar ─── */
.xp-name-bar {
    padding: 10px 14px;
    background: #1a1a1a;
    border-bottom: 1px solid #222;
}
.xp-name-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    letter-spacing: 0.3px;
    font-family: inherit;
}
.xp-name-input:focus { color: #fff; }
.xp-name-input::placeholder { color: #444; }

/* ─── Sections ─── */
.xp-section { padding: 12px 14px; display: none; } /* Legacy — sections replaced by tab panels */
.xp-section--last { padding: 10px 14px 12px; display: none; }
.xp-divider { height: 1px; background: #222; display: none; } /* Hidden — tabs replace dividers */
.xp-label {
    font-size: 9px;
    font-weight: 800;
    color: #444;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

/* ─── Mode tabs ─── */
.xp-mode-tabs {
    display: flex;
    gap: 3px;
    background: #111;
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 10px;
}
.xp-mode-tab {
    flex: 1;
    padding: 5px 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #555;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    font-family: inherit;
}
.xp-mode-tab:hover { color: #999; }
.xp-mode-tab--active {
    background: #4a9eff;
    color: #fff;
}
.xp-mode-tab--active:hover { color: #fff; }

/* ─── Scene sub-mode buttons (Scene / All Scenes / Blink) ─── */
.xp-scene-sub {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #333;
    background: #0a0a16;
    color: #a29bfe;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
    flex: 1;
    text-align: center;
    transition: all 0.15s;
}
.xp-scene-sub:hover { border-color: #6c5ce7; color: #ccc; }
.xp-scene-sub--active {
    border-color: #6c5ce7;
    background: #6c5ce7;
    color: #fff;
}
.xp-scene-sub--active:hover { color: #fff; }

/* ─── Share grid ─── */
.xp-share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.xp-share-grid--single { grid-template-columns: 1fr; }

.xp-share-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #222;
    background: #111;
    color: #777;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.xp-share-btn:hover {
    border-color: #4a9eff;
    color: #6ab4ff;
    background: rgba(74,158,255,0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74,158,255,0.12);
}
.xp-share-btn--primary {
    border-color: rgba(74,158,255,0.35);
    background: rgba(74,158,255,0.08);
    color: #6ab4ff;
}
.xp-share-btn--primary:hover {
    border-color: #4a9eff;
    background: rgba(74,158,255,0.14);
    box-shadow: 0 2px 12px rgba(74,158,255,0.18);
}
.xp-share-btn--full { grid-column: 1 / -1; justify-content: center; }
.xp-share-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
.xp-share-tag {
    font-size: 9px;
    font-weight: 800;
    color: #444;
    margin-left: auto;
    letter-spacing: 0.5px;
}
.xp-share-btn--primary .xp-share-tag { color: rgba(74,158,255,0.4); }

/* ─── Speed row ─── */
.xp-speed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.xp-speed-icon { font-size: 9px; color: #444; min-width: 14px; }
.xp-speed-slider {
    flex: 1;
    accent-color: #4a9eff;
    height: 3px;
}
.xp-speed-chip {
    font-size: 11px;
    font-weight: 700;
    color: #4a9eff;
    min-width: 36px;
    text-align: center;
    background: #111;
    border-radius: 4px;
    padding: 2px 6px;
}

/* ─── Download categories ─── */
.xp-dl-category { margin-top: 10px; }
.xp-dl-category:first-child { margin-top: 0; }
.xp-dl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.xp-dl-left { display: flex; align-items: center; gap: 5px; }
.xp-dl-icon { font-size: 11px; }
.xp-dl-name { font-size: 11px; font-weight: 700; color: #999; }
.xp-dl-badge {
    font-size: 9px;
    font-weight: 700;
    color: #555;
    background: rgba(74,158,255,0.06);
    border: 1px solid #222;
    padding: 0 5px;
    border-radius: 8px;
    line-height: 16px;
}
.xp-dl-check {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: #444;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.xp-dl-check:hover { color: #777; }
.xp-dl-check input {
    accent-color: #4a9eff;
    width: 10px;
    height: 10px;
}

/* ─── Resolution grid ─── */
.xp-res-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.xp-res-btn {
    padding: 6px 0 !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: center;
    background: #111 !important;
    border: 1px solid #1e1e1e !important;
    color: #666 !important;
    cursor: pointer;
    transition: all 0.15s !important;
}
.xp-res-btn:hover {
    border-color: #4a9eff !important;
    color: #6ab4ff !important;
    background: rgba(74,158,255,0.05) !important;
    transform: translateY(-1px);
}
.xp-res-btn--full {
    grid-column: 1 / -1;
    width: 100%;
}

/* ─── Record button ─── */
.xp-record-btn {
    width: 100%;
    padding: 10px 0;
    border-radius: 6px;
    border: 1px solid rgba(224,80,48,0.25);
    background: rgba(224,80,48,0.08);
    color: #ff7755;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s;
    font-family: inherit;
}
.xp-record-btn:hover {
    background: rgba(224,80,48,0.15);
    border-color: rgba(224,80,48,0.5);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(224,80,48,0.15);
}
.xp-record-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e05030;
    animation: xp-pulse 1.5s ease infinite;
}
@keyframes xp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Project buttons ─── */
/* ─── Project gallery in export tab ─── */
.xp-project-gallery {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0 4px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.xp-project-gallery::-webkit-scrollbar { width: 4px; }
.xp-project-gallery::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.xp-proj-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: #0d0d1a;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    min-height: 42px;
}
.xp-proj-card:hover { background: #14142a; border-color: #333; }
.xp-proj-card--selected {
    background: #1a1a2e;
    border-color: #6c5ce7;
}

.xp-proj-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xp-proj-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.xp-proj-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xp-proj-name {
    font-size: 11px;
    font-weight: 700;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.xp-proj-card--selected .xp-proj-name { color: #fff; }

.xp-proj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.xp-proj-tag {
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(74, 158, 255, 0.12);
    color: #4a9eff;
    letter-spacing: 0.2px;
}
.xp-proj-tag--scene { background: rgba(108, 92, 231, 0.15); color: #a29bfe; }
.xp-proj-tag--gallery { background: rgba(0, 206, 209, 0.12); color: #00ced1; }
.xp-proj-tag--layer { background: rgba(253, 203, 110, 0.12); color: #fdcb6e; }

.xp-proj-date {
    font-size: 8px;
    color: #444;
    letter-spacing: 0.2px;
}

.xp-proj-loading, .xp-proj-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    color: #555;
    font-size: 11px;
}

.xp-flat-btn--primary {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #6c5ce7 !important;
    font-weight: 700;
}
.xp-flat-btn--primary:hover { background: #7d6ff0 !important; }
.xp-flat-btn--primary:disabled {
    background: #222 !important;
    color: #555 !important;
    border-color: #333 !important;
    cursor: not-allowed;
}

.xp-project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.xp-flat-btn {
    padding: 7px 0 !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: center;
    background: transparent !important;
    border: 1px solid #1e1e1e !important;
    color: #555 !important;
    cursor: pointer;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}
.xp-flat-btn:hover {
    border-color: #333 !important;
    color: #999 !important;
}
.xp-flat-icon { font-size: 10px; }

/* ═══ TAB BAR ═══ */
.xp-tabs {
    display: flex;
    background: #111;
    border-bottom: 1px solid #222;
    padding: 0 4px;
}
.xp-tab {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #555;
    letter-spacing: 0.3px;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.xp-tab:hover { color: #888; }
.xp-tab.active {
    color: #a29bfe;
    border-bottom-color: #6c5ce7;
}

/* ═══ TAB CONTENT PANELS ═══ */
.xp-tab-content {
    display: none;
    padding: 12px 14px;
}
.xp-tab-content.active { display: block; }

/* ═══ RECORD HINT ═══ */
.xp-record-hint {
    margin-top: 10px;
    font-size: 9px;
    color: #444;
    text-align: center;
    line-height: 1.5;
}

/* ═══ MOBILE BOTTOM SHEET ═══ */
.xp-sheet-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 9998;
    display: none;
}
.xp-sheet-scrim.open {
    opacity: 1;
    pointer-events: auto;
    display: block;
}
.xp-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 75vh;
    background: #161616;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
    border: 1px solid #2a2a2a;
    border-bottom: none;
}
.xp-bottom-sheet.open {
    display: flex;
    transform: translateY(0);
}
.xp-sheet-handle {
    padding: 10px 0 6px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.xp-sheet-handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #444;
}
.xp-bottom-sheet .xp-tabs {
    flex-shrink: 0;
}
.xp-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}
.xp-sheet-body .xp-tab-content {
    padding: 12px 16px 20px;
}

@keyframes exportSlideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.export-category {
    font-size: 10px;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
}

.export-section-title {
    font-size: 11px;
    color: #4a9eff;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.export-section-title--layers {
    color: #ff9f4a;
}

.export-checkbox-wrap {
    margin-bottom: 6px;
    padding: 6px 8px;
    background: #0a0a0a;
    border-radius: 4px;
}

.export-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 11px;
    color: #e0e0e0;
}

.export-checkbox {
    margin-right: 8px;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.export-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
}

.export-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
}

.export-grid-2--flush {
    margin-bottom: 0;
}

.export-btn {
    text-align: center;
    padding: 6px;
    font-size: 11px;
}

.export-layers-btn {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
    padding: 6px;
    font-size: 11px;
}

.export-name-row {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-name-label {
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
}

.export-name-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 6px 8px;
    color: #e0e0e0;
    font-size: 12px;
    font-family: inherit;
}

.export-name-input::placeholder {
    color: #555;
}

.export-speed-row {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-speed-label {
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
}

.export-speed-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 6px;
    color: #e0e0e0;
    font-size: 12px;
}

/* Shape dropdown menu */
.shapes-menu {
    display: none;
    position: fixed;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
    z-index: 99999;
    min-width: 120px;
}

.shape-option {
    padding: 6px 10px;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shape-icon {
    font-size: 14px;
}

/* Color swatches (layer context menu) */
.color-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
}

.swatch-grid {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.swatch-label {
    font-size: 10px;
    color: var(--dim);
    margin-bottom: 4px;
}

.swatch-container {
    padding: 6px 10px;
}

/* Context menu opacity */
.ctx-opacity-wrap {
    padding: 8px 12px;
}

.ctx-opacity-label {
    font-size: 10px;
    color: var(--dim);
    margin-bottom: 4px;
}

.ctx-opacity-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctx-opacity-slider {
    width: 100px;
    height: 3px;
    background: #222;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.ctx-opacity-value {
    font-size: 10px;
    color: #ccc;
    min-width: 28px;
}

/* Noscript fallback */
.noscript-wrap {
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #333;
}

/* Feedback modal form elements */
.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.feedback-title {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.feedback-close {
    cursor: pointer;
    color: var(--dim);
    font-size: 20px;
    line-height: 1;
}

.feedback-field {
    margin-bottom: 12px;
}

.feedback-field--wide {
    margin-bottom: 16px;
}

.feedback-label {
    font-size: 12px;
    color: var(--dim);
    display: block;
    margin-bottom: 4px;
}

.feedback-textarea {
    width: 100%;
    height: 100px;
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 8px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
}

.feedback-input {
    width: 100%;
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 8px;
    font-size: 13px;
    font-family: inherit;
}

.feedback-type-group {
    display: flex;
    gap: 8px;
}

/* Spacer */
.spacer {
    height: 20px;
}

/* Flex utility (used sparingly where no semantic class fits) */
.flex-1 {
    flex: 1;
}

/* Right panel layout */
.right-panel-flex {
    display: flex;
    flex-direction: column;
}

/* Zoom control layout */
.zoom-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.zoom-btn {
    padding: 3px 6px;
    font-size: 10px;
    min-width: 22px;
    height: 24px;
}

.zoom-value {
    font-size: 10px;
    color: #fff;
    min-width: 32px;
    text-align: center;
}

.zoom-reset {
    padding: 3px 5px;
    font-size: 9px;
    height: 24px;
}

/* Undo/redo layout */
.undo-redo-group {
    align-items: center;
    gap: 2px;
}

.undo-redo-btn {
    padding: 3px 5px;
    font-size: 12px;
    min-width: 22px;
    height: 24px;
    opacity: 0.4;
}

/* Shapes dropdown position */
.shapes-dropdown {
    position: relative;
}

/* Mobile canvas slot */
.mobile-canvas-slot {
    margin-top: 15px;
}

/* Mobile right content */
.mobile-right-content-spacing {
    margin-top: 20px;
}

/* Panel position (left panel) */
.panel--relative {
    position: relative;
}

/* Timeline strip */
/* ═══ TIMELINE STRIP — Clean, User-First ═══ */
.timeline-strip {
    width: 100%;
    height: 32px;
    background: #0d0d0f;
    border-top: 1px solid #1e1e22;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Play & Loop buttons ── */
.tl-play-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #8a8a8e;
    cursor: pointer;
    padding: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.tl-play-btn:hover {
    color: #e0e0e0;
    background: rgba(255,255,255,0.06);
}
.tl-play-btn.playing {
    color: #4a9eff;
}
.tl-loop-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #555;
    cursor: pointer;
    padding: 3px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.tl-loop-btn:hover {
    color: #999;
    background: rgba(255,255,255,0.04);
}
.tl-loop-btn.active {
    color: #4a9eff;
}
.tl-icon { display: block; }

/* ── Track area ── */
.tl-track-area {
    flex: 1;
    position: relative;
    padding: 0 4px;
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 80px;
}
.tl-ticks {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    height: 6px;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
}
.tl-tick {
    width: 1px;
    height: 100%;
    background: #1e1e22;
}

.timeline-track {
    flex: 1;
    height: 6px;
    background: #1a1a1e;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: visible;
    border: 1px solid #252528;
    z-index: 1;
}
.timeline-track:hover {
    border-color: #353538;
}

.timeline-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #2563eb 0%, #4a9eff 100%);
    border-radius: 3px;
    pointer-events: none;
    transition: none;
}

.timeline-playhead {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 3px;
    height: 16px;
    background: #fff;
    border-radius: 1.5px;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 0 4px rgba(74,158,255,0.4), 0 0 1px rgba(0,0,0,0.6);
    z-index: 2;
    transition: box-shadow 0.2s;
}
.timeline-playhead:hover,
.timeline-playhead.dragging {
    box-shadow: 0 0 8px rgba(74,158,255,0.7), 0 0 2px rgba(0,0,0,0.8);
}
.timeline-playhead.dragging {
    cursor: grabbing;
}

/* Playing glow */
.timeline-strip.playing .timeline-playhead {
    animation: playhead-glow 1.5s ease-in-out infinite alternate;
}
@keyframes playhead-glow {
    0%   { box-shadow: 0 0 4px rgba(74,158,255,0.4), 0 0 1px rgba(0,0,0,0.6); }
    100% { box-shadow: 0 0 10px rgba(74,158,255,0.8), 0 0 2px rgba(0,0,0,0.8); }
}

/* ── Hover tooltip ── */
.tl-tooltip {
    position: absolute;
    top: -20px;
    left: 0;
    background: #222228;
    color: #ccc;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #333;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    z-index: 10;
}
.tl-track-area:hover .tl-tooltip {
    opacity: 1;
}

/* ── Time display ── */
.tl-time-display {
    font-size: 10px;
    color: #ccc;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    min-width: 24px;
    text-align: right;
}
.tl-time-total {
    font-size: 10px;
    color: #666;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    min-width: 24px;
}
.tl-time-sep {
    font-size: 9px;
    color: #444;
    font-weight: 600;
    flex-shrink: 0;
    margin: 0 1px;
}

/* ── Speed area ── */
.tl-speed-area {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-left: 4px;
    border-left: 1px solid #1e1e22;
    margin-left: 2px;
}
.tl-speed-label {
    font-size: 8px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    user-select: none;
}
.tl-speed-slider {
    width: 50px;
    height: 3px;
    background: #222;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.tl-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8a8a8e;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.tl-speed-slider::-webkit-slider-thumb:hover {
    background: #ccc;
}

/* Record dot */
.record-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e05030;
    margin-right: 4px;
    vertical-align: middle;
}
@keyframes blink-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Scene stack empty text */
.scene-stack-empty-text {
    font-size: 14px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 64px;
}

/* ─── Snap Guide Lines ──────────────────────────────────────── */
.snap-guide {
    position: absolute;
    background: #4a9eff;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.7;
}
.snap-guide--h {
    height: 1px;
    left: 0;
    right: 0;
}
.snap-guide--v {
    width: 1px;
    top: 0;
    bottom: 0;
}

/* ─── Diff Map Button ───────────────────────────────────────── */
.diff-map-btn {
    background: #553 !important;
    border-color: #885 !important;
    color: #fd3 !important;
}
.diff-map-btn.active {
    background: #d44 !important;
    color: #fff !important;
    border-color: #d44 !important;
}

.split-wipe-btn {
    background: #2a4a4a !important;
    border-color: #4a7a7a !important;
    color: #6dd !important;
}
.split-wipe-btn.active {
    background: #1a8a8a !important;
    color: #fff !important;
    border-color: #1a8a8a !important;
}

/* SCENE button — green tones */
#sceneStackBtn {
    background: transparent !important;
    border-color: #3a7a3a !important;
    color: #5d5 !important;
}
#sceneStackBtn.active {
    background: rgba(42, 138, 42, 0.2) !important;
    color: #6f6 !important;
    border-color: #4a9a4a !important;
    box-shadow: inset 0 1px 0 rgba(42, 138, 42, 0.15), 0 1px 4px rgba(42, 138, 42, 0.15);
}

/* BLINK button — warm orange tones */
#blinkBtn {
    background: transparent !important;
    border-color: #9944cc !important;
    color: #cc55ff !important;
}
#blinkBtn.active {
    background: rgba(153, 68, 204, 0.2) !important;
    border-color: #bb66ee !important;
    color: #dd88ff !important;
    box-shadow: inset 0 1px 0 rgba(153, 68, 204, 0.15), 0 1px 4px rgba(153, 68, 204, 0.15);
}

/* STOP mode - stronger violet with background and glow */
#blinkBtn.stop-mode {
    background: #442266 !important;
    color: #ffccff !important;
    border-color: #dd66ff !important;
    box-shadow: 0 0 12px rgba(204, 85, 255, 0.5);
}

/* ─── Scene Onboarding Overlay ──────────────────────────────── */
#sceneOnboarding {
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.scene-onboarding-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.scene-onboarding-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 28px 32px 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.scene-onboarding-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}
.scene-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}
.scene-onboarding-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #ccc;
    font-size: 13.5px;
    line-height: 1.45;
}
.scene-onboarding-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4a9eff;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.scene-onboarding-step strong {
    color: #fff;
}
.scene-onboarding-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #4a9eff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.scene-onboarding-btn:hover {
    background: #3a8eef;
}

/* ─── Snap Ripple (#5 micro-interaction) ──────────────────── */
.snap-ripple {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(74, 158, 255, 0.6);
    pointer-events: none;
    z-index: 9999;
    animation: snap-ripple-pop 450ms ease-out both;
    transform: translate(-50%, -50%) scale(0);
}
@keyframes snap-ripple-pop {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* ─── Export Confetti (#5 micro-interaction) ───────────────── */
.export-confetti-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}
.export-confetti-dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}
.export-confetti-dot.pop {
    animation: export-confetti-burst 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes export-confetti-burst {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}

/* ─── Reduced Motion: respect OS-level accessibility setting ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.2s !important;
    }

    .blink-icon {
animation: none !important;
    }

    @keyframes record-pulse {
0%, 100% { opacity: 1; }
    }

    @keyframes blink-pulse {
0%, 100% { opacity: 1; }
    }

    @keyframes spin {
0%, 100% { transform: rotate(0deg); }
    }
}

/* ═══════════════════════════════════════════════════════════
   UX POLISH — Smoothness, Transitions, Visual Refinements
   Append this to the END of styles.css
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. GPU-ACCELERATED LAYOUT TRANSITIONS ─────────────── */
/* Grid transition is already on .container; child elements
   rely on normal compositing to avoid stacking-context side effects */

/* ─── 2. FOCUS-VISIBLE — Keyboard accessibility without
 cluttering mouse interactions ───────────────── */
.btn:focus-visible,
.blink-btn:focus-visible,
.panel-toggle:focus-visible,
.left-panel-toggle:focus-visible,
.context-menu-item:focus-visible,
.feedback-type-btn:focus-visible,
.feedback-submit-btn:focus-visible,
.export-btn:focus-visible,
.upload-zone:focus-visible,
.bp-tab:focus-visible,
.bp-tool:focus-visible,
.bp-rec:focus-visible,
.bp-export:focus-visible,
.ssp-btn:focus-visible,
.ssp-nav-arrow:focus-visible,
.slp-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Remove default outline for mouse users */
.btn:focus:not(:focus-visible),
.blink-btn:focus:not(:focus-visible),
.thumb:focus:not(:focus-visible),
.panel-toggle:focus:not(:focus-visible),
.left-panel-toggle:focus:not(:focus-visible),
.bp-tab:focus:not(:focus-visible),
.bp-tool:focus:not(:focus-visible),
.bp-rec:focus:not(:focus-visible),
.bp-export:focus:not(:focus-visible),
.ssp-btn:focus:not(:focus-visible),
.ssp-nav-arrow:focus:not(:focus-visible) {
    outline: none;
}

/* ─── 3. SLIDER FOCUS & TRACK FILL ──────────────────────── */
input[type="range"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Slider hover: slightly brighter thumb */
input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--accent-hover);
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb:hover {
    background: var(--accent-hover);
    transform: scale(1.15);
}

/* ─── 4. SMOOTHER THUMBNAIL INTERACTIONS ────────────────── */
.thumb {
    transition: border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.25s ease;
}

.thumb:hover {
    transform: scale(1.05) translateY(-1px);
}

.thumb:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Subtle ring glow when active */
.thumb.active {
    box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(74, 158, 255, 0.2);
}

.thumb.anchor {
    box-shadow: 0 0 0 2px #ff4a4a, 0 2px 8px rgba(255, 74, 74, 0.15) !important;
}

/* Scene stack thumbs — same polish */
.scene-stack-thumb {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.2s ease;
}

.scene-stack-thumb:hover:not(.dragging) {
    transform: scale(1.05) translateY(-1px);
}

/* ─── 5. (reserved) ─────────────────────────────────────── */

/* ─── 6. LOADING OVERLAY — (inlined into main rules above) ─ */

/* ─── 7. UPLOAD ZONE — Richer drag feedback ─────────────── */
.upload-zone {
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.upload-zone.active {
    border-color: var(--accent);
    background: #0f1a2e;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15), inset 0 0 20px rgba(74, 158, 255, 0.05);
}

.upload-zone svg {
    transition: stroke 0.2s;
}

.upload-zone:hover svg {
    stroke: var(--accent);
}

.upload-zone.active svg {
    stroke: var(--accent);
}

/* ─── 8. BUTTON HOVER — Subtle lift ─────────────────────── */
.btn {
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}


.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
    transition-duration: 0.1s;
}

.btn.primary:hover:not(:disabled) {
    box-shadow: 0 2px 10px rgba(74, 158, 255, 0.3);
}

/* Disabled state: ensure no pointer */
.btn:disabled,
.blink-btn:disabled {
    pointer-events: none;
}

/* ─── 9. PANEL TOGGLE TABS — Smooth color transitions ──── */
.panel-toggle,
.left-panel-toggle {
    transition: background 0.2s, color 0.2s;
}

/* ─── 10. TOAST — Smoother animation, consistent timing ── */
.toast {
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1),
       toastOut 0.4s cubic-bezier(0.4, 0, 1, 1) 2.6s forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* Toast type borders — subtle glow */
.toast.success {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(48, 224, 80, 0.08);
}

.toast.error {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 80, 48, 0.08);
}

.toast.warning {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 160, 48, 0.08);
}

/* ─── 11. MODAL CONSISTENCY — Uniform blur, fade-in ────── */
.shortcuts-modal,
.feedback-modal {
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.shortcuts-modal-content,
.feedback-content,
.scene-onboarding-card {
    animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* feedback-content doesn't use translate centering, fix: */
.feedback-content {
    animation: modalContentSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalContentSlideUp {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── 12. SMOOTH SCROLLING ON THUMBNAIL CONTAINERS ─────── */
.thumbnail-container,
.categories-scroll,
.scene-stack-thumbnails {
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}

/* Firefox scrollbar styling (was only webkit) */
.thumbnail-container,
.categories-scroll {
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

.scene-stack-thumbnails {
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

/* ─── 13. DIFF/SPLIT BUTTON COLOR TRANSITIONS ──────────── */
.diff-map-btn,
.split-wipe-btn {
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* ─── 14. BLINK BUTTON — Smoother glow pulse ────────────── */
.blink-btn.active {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ─── 15. DOWNLOAD MENU — Entry animation ───────────────── */
.export-menu {
    animation: menuSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menuSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── 16. EXPORT BUTTONS — Hover polish ─────────────────── */
.export-btn:hover:not(:disabled) {
    background: #2a2a2a;
    border-color: var(--accent);
    transform: translateY(-1px);
}

.export-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* ─── 17. SCENE LAYER SELECTION — Smoother outline ─────── */
.scene-layer {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ─── 18. (reserved) ────────────────────────────────────── */

/* ─── 19. PANEL BORDER — Subtle inner shadow for depth ──── */
.panel {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ─── 20. CANVAS CONTAINER — Subtle inner depth ─────────── */
.canvas-container {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── 21. SELECTION RING ANIMATION ──────────────────────── */
.thumb.selected {
    animation: selectionPulse 2s ease-in-out infinite;
}

@keyframes selectionPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(255, 255, 255, 0.15); }
    50%      { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(255, 255, 255, 0.08); }
}

/* ─── 22. CATEGORY HEADINGS — Subtle letter styling ─────── */
.section-heading {
    transition: color 0.2s;
}

/* ─── 23. TEXTAREA & INPUT FOCUS STATES ──────────────────── */
.feedback-textarea:focus,
.feedback-input:focus,
.export-name-input:focus,
.export-speed-input:focus,
.tl-speed-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.15);
    outline: none;
}

/* ─── 24. HELP & FEEDBACK & INFO BUTTONS — Unified ──────── */

/* ─── 25. UPLOAD COLLAPSE BAR — Smoother tap ─────────────── */
@media (max-width: 900px) {
    .upload-collapse-bar {
transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }

    .upload-collapse-bar:active {
transform: scale(0.99);
    }
}

/* ─── 26. TIMELINE PLAYHEAD — Smoother appearance ────────── */
/* Handled in main timeline-strip block */

/* ─── 27. SEO FOOTER — Now in-flow on mobile only ────────── */

/* ─── 28. BODY SCROLLBAR (mobile) — Styled ──────────────── */
@media (max-width: 900px) {
    body {
scrollbar-width: thin;
scrollbar-color: #333 transparent;
    }

    body::-webkit-scrollbar {
width: 4px;
    }

    body::-webkit-scrollbar-track {
background: transparent;
    }

    body::-webkit-scrollbar-thumb {
background: #333;
border-radius: 2px;
    }
}

/* ─── SEO FOOTER (mobile only, in-flow) ───────────────────── */
.seo-footer {
    display: none;
}

.seo-footer-toggle {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}
.seo-footer-toggle:hover { color: #999; }
.seo-chevron { margin-left: 6px; }
.seo-footer-content {
    padding: 12px 16px 16px;
    max-height: 40vh;
    overflow-y: auto;
    color: var(--dim);
    font-size: 13px;
    line-height: 1.5;
}
.seo-footer-content h2 {
    color: #aaa;
    font-size: 14px;
    margin: 12px 0 4px;
}
.seo-footer-content h2:first-child { margin-top: 0; }
.seo-footer-content p { margin: 0 0 8px; }

/* ─── INFO BUTTON (fixed, next to help & feedback) ─────── */
.info-btn {
    position: fixed;
    bottom: 16px;
    right: 96px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #444;
    background: #1a1a1a;
    color: var(--dim);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    padding: 0;
    line-height: 1;
}
.info-btn:hover {
    background: #2a2a2a;
    color: #fff;
    border-color: #666;
}

/* ─── BODY-LEVEL DRAG FEEDBACK ─────────────────────────────── */
body.file-dragging .upload-zone {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.25);
    transition: border-color 0.2s, box-shadow 0.2s;
}
body.file-dragging .upload-zone svg {
    color: var(--accent);
    transition: color 0.2s;
}
body.file-dragging .upload-zone p {
    color: var(--accent);
    transition: color 0.2s;
}

/* ─── 29. DISABLED STATE TRANSITIONS ─────────────────────── */
/* Buttons fade to disabled instead of snapping */
.btn,
.blink-btn,
.export-btn,
.export-layers-btn {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
}

/* Thumbs fade when toggled disabled */
.thumb.disabled {
    transition: opacity 0.25s ease, border-color 0.2s ease;
}

/* ─── 30. EXPORT MENU BUTTON HOVER ───────────────────────── */
.export-btn {
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.export-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.export-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.export-layers-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.export-layers-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.export-layers-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

/* ─── 31. UPLOAD ZONE TEXT TRANSITION ────────────────────── */
.upload-zone p {
    transition: color 0.2s ease;
}

/* ─── 32. BLINK / SCENE BUTTON STATE TRANSITIONS ─────────── */
.blink-btn {
    transition: border-color 0.2s, color 0.2s, box-shadow 0.3s, background 0.2s;
}

/* ─── 33. CONTEXT MENU ITEMS — Staggered entrance ────────── */
.context-menu-item {
    transition: background 0.12s ease, color 0.12s ease;
}

/* ─── 34. ACTION BUTTONS (delete-all, etc) — Smoother ───── */
.action-btn {
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.action-btn:active {
    transform: scale(0.95);
    transition-duration: 0.06s;
}

/* ─── 36. OVERSCROLL CONTAINMENT ─────────────────────────── */
.categories-scroll,
.scene-stack-thumbnails {
    overscroll-behavior: contain;
}

/* ─── 37. EASING SELECT — now styled via .tl-easing-select ── */

/* ─── 38. SCENE LAYER BORDER TRANSITION ─────────────────── */
.scene-layer {
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

/* ─── 39. CHECKBOX MARK TRANSITION ──────────────────────── */
.thumb .mark-checkbox-main,
.scene-stack-thumb .mark-checkbox {
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.15s ease;
}

.thumb .mark-checkbox-main.marked,
.scene-stack-thumb .mark-checkbox.marked {
    transform: scale(1.05);
}

/* ─── 40. PANEL BORDER SUBTLE HOVER ─────────────────────── */
.panel {
    transition: border-color 0.3s ease;
}

.panel:hover {
    border-color: #2a2a2a;
}

/* ─── 41. REMOVE BUTTON — Smooth appear + press ──────────── */
.thumb .remove {
    transition: opacity 0.15s ease, background 0.12s ease, transform 0.1s ease;
}

.thumb .remove:active {
    transform: scale(0.85);
}

.scene-stack-thumb .remove-layer {
    transition: opacity 0.15s ease, background 0.12s ease, transform 0.1s ease;
}

.scene-stack-thumb .remove-layer:active {
    transform: scale(0.85);
}

/* ─── 42. CANVAS CONTAINER — Subtle border glow on content ── */
.canvas-container {
    transition: border-color 0.3s ease;
}

/* ─── 43. LOADING SPINNER — Smoother entrance ────────────── */
.loading-overlay.active .loading-spinner {
    animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loading-overlay.active .loading-text {
    animation: fadeInUp 0.3s ease 0.1s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* ═══════════════════════════════════════════════════════════════════════
   MODE BUTTON HOVER ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ DIFF Button - RGB Split + Scanner Combo ═══ */
#diffMapBtn {
    overflow: hidden;
}

#diffMapBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,220,100,0.3), transparent);
    pointer-events: none;
}

#diffMapBtn:hover {
    animation: diffCombo 0.5s ease forwards;
}

#diffMapBtn:hover::after {
    animation: diffScanLine 0.5s ease;
}

#diffMapBtn:hover .btn-text-anim,
#diffMapBtn:hover .diff-text {
    animation: diffRgbShift 0.5s ease;
}

@keyframes diffCombo {
    0% { background: #553; }
    30% { box-shadow: -2px 0 6px rgba(255,0,0,0.3), 2px 0 6px rgba(0,255,255,0.3); }
    100% { background: #553; border-color: #aa6; box-shadow: 0 0 8px rgba(255,200,50,0.3); }
}

@keyframes diffScanLine {
    0% { left: -50%; }
    100% { left: 100%; }
}

@keyframes diffRgbShift {
    0%, 100% { text-shadow: none; }
    25% { text-shadow: -2px 0 #f00, 2px 0 #0ff; }
    75% { text-shadow: 1px 0 #f00, -1px 0 #0ff; }
}

/* ═══ BLINK Button - Eye Blink ═══ */
/* Only animate when NOT active (when showing BLINK, not STOP) */
/* ═══ SHAPES Button - Sparkle Spin ═══ */
#shapesBtn {
    font-size: 14px;
}

#shapesBtn:hover {
    background: #2a2a3a;
    border-color: #66a;
}

#shapesBtn:hover .shape-icon,
#shapesBtn:hover {
    animation: shapeSpin 0.5s ease;
}

@keyframes shapeSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}


/* ─── EXPORT CONFIRMATION DIALOG ──────────────────────────── */
.export-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.export-confirm-overlay.active {
    background: rgba(0, 0, 0, 0.8);
}
.export-confirm-dialog {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 32px 24px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    transform: scale(0.92) translateY(8px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.export-confirm-overlay.active .export-confirm-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.export-confirm-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818cf8;
}
.export-confirm-title {
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.export-confirm-desc {
    font-size: 12.5px;
    color: var(--dim);
    line-height: 1.5;
    margin-bottom: 22px;
}
.export-confirm-actions {
    display: flex;
    gap: 10px;
}
.export-confirm-cancel {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #aaa;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.export-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
}
.export-confirm-ok {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.export-confirm-ok:hover {
    background: linear-gradient(135deg, #7c7ff7, #6366f1);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}
.export-confirm-ok:active {
    transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .export-confirm-dialog {
        padding: 24px 20px 20px;
        max-width: 300px;
    }
}


/* ═══════════════════════════════════════════════════════════
   LANDING OVERLAY V2 — Drop zone IS the page
   ═══════════════════════════════════════════════════════════ */

.landing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease-out;
}

.landing-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.landing-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    animation: landingFadeUp 0.8s ease-out both;
}

.landing-brand {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    opacity: 0.7;
}

.landing-drop {
    width: 580px;
    max-width: 90vw;
    aspect-ratio: 4 / 3;
    max-height: 55vh;
    border: 2px dashed #333;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    padding: 32px;
}

.landing-drop:hover,
.landing-drop.drag-over {
    border-color: var(--accent, #4a9eff);
    background: rgba(74, 158, 255, 0.04);
}

.landing-drop-icon {
    color: #555;
    transition: color 0.2s;
}

.landing-drop:hover .landing-drop-icon,
.landing-drop.drag-over .landing-drop-icon {
    color: var(--accent, #4a9eff);
}

.landing-drop-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #ccc;
    text-align: center;
    margin: 0;
}

.landing-drop-hint {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}
.hint-touch { display: none; }
@media (pointer: coarse) {
    .hint-mouse { display: none; }
    .hint-touch { display: inline; }
}

.landing-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #444;
    animation: landingFadeUp 0.8s ease-out 0.3s both;
}

.landing-trust-dot {
    color: #333;
}

@keyframes landingFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .landing-drop {
        width: 100%;
        max-height: 60vh;
    }
    .landing-trust {
        flex-direction: column;
        gap: 4px;
    }
    .landing-trust-dot {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   BLINK PRIMARY — Hero button styling
   ═══════════════════════════════════════════════════════════ */

.blink-primary {
    background: var(--accent, #4a9eff) !important;
    color: #fff !important;
    border-color: var(--accent, #4a9eff) !important;
    padding: 6px 18px !important;
    font-size: 12px;
    box-shadow: 0 0 16px rgba(74, 158, 255, 0.2);
    position: relative;
}

.blink-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
}

.blink-primary.active {
    background: var(--accent, #4a9eff) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.35);
}

/* ─── First-visit nudge ─── */
.blink-nudge {
    font-size: 11px;
    color: rgba(74, 158, 255, 0.85);
    margin-left: 6px;
    margin-right: 12px;
    white-space: nowrap;
    animation: nudgePulse 2s ease-in-out infinite;
    pointer-events: none;
}

.blink-nudge.hidden {
    display: none;
}

@keyframes nudgePulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   MORE SECTIONS — Collapsible secondary panels
   ═══════════════════════════════════════════════════════════ */

.more-sections-toggle {
    font-size: 10px;
    padding: 8px 0 4px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.more-sections-toggle:hover {
    color: #666;
}

.more-sections-toggle.has-content {
    display: none;
}

.more-sections.collapsed {
    display: none;
}

.more-sections.expanded {
    display: block;
}

/* ─── SR-ONLY (screen reader) ─── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 6px 6px;
    z-index: 100000;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* ─── PROJECT NAME DISPLAY ─── */
#projectNameDisplay {
    color: #fff;
    font-weight: 500;
    margin-left: auto;
    font-size: 0.85em;
}

/* ─── PROJECT THUMB WITH NAME ─── */
.project-thumb .project-label {
    font-size: 10px;
    line-height: 1.3;
    padding: 3px 4px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.project-thumb .project-label-name {
    color: var(--text-bright, #fff);
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.project-thumb .project-label-date {
    color: var(--dim, #999);
    font-weight: 400;
    display: block;
}

/* ═══════════════════════════════════════════════════════
   SCENE STATES PANEL — Phase 1
   ═══════════════════════════════════════════════════════ */
.scene-states-panel {
    background: linear-gradient(180deg, #0c0c1c, #0a0a16);
    border-top: 1px solid #1e1e3a;
    position: relative;
    z-index: 2;
}

.scene-states-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, #6c5ce7 30%, #a29bfe 50%, #6c5ce7 70%, transparent 95%);
    opacity: 0.4;
    z-index: 5;
}


/* ═══════════════════════════════════════════════════════
   GLASS RAIL — Timeline Strip
   ═══════════════════════════════════════════════════════ */
.ssp-timeline {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
    height: 96px; /* fixed — cards are 80px tall + 8px padding each side */
}

.ssp-controls {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    padding-left: 4px;
}

/* Play / Loop buttons — glass (unified with bp-tool) */
.ssp-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(30, 30, 58, 0.5);
    background: rgba(17, 17, 37, 0.5);
    color: #5a5a7a;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ssp-btn:hover {
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.1);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.1), inset 0 1px 0 rgba(162, 155, 254, 0.08);
}
.ssp-btn.ssp-on {
    background: rgba(108, 92, 231, 0.15);
    color: #a29bfe;
    border-color: rgba(108, 92, 231, 0.35);
    box-shadow: 0 0 12px rgba(108, 92, 231, 0.15), inset 0 1px 0 rgba(162, 155, 254, 0.1);
}

/* Strip nav arrows — glass (unified with bp-tool / ssp-btn) */
.ssp-nav-arrow {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(30, 30, 58, 0.5);
    background: rgba(17, 17, 37, 0.5);
    color: #7a7a9a;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ssp-nav-arrow:hover {
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.1);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.1), inset 0 1px 0 rgba(162, 155, 254, 0.08);
}

/* Scrub track — thin bar above scene cards for drag-scrubbing */
.ssp-scrub-track {
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    margin: 0 4px 3px;
    flex-shrink: 0;
}
.ssp-scrub-track:hover {
    background: rgba(255,255,255,0.08);
}
.ssp-scrub-progress {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: rgba(108,92,231,0.4);
    border-radius: 3px;
    width: 0%;
    pointer-events: none;
    transition: width 0.05s linear;
}
.ssp-scrub-head {
    position: absolute;
    top: -3px;
    width: 12px; height: 12px;
    background: #a29bfe;
    border-radius: 50%;
    border: 2px solid #1a1a2e;
    left: 0%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.ssp-scrub-track:hover .ssp-scrub-head,
.ssp-scrub-track.scrubbing .ssp-scrub-head {
    opacity: 1;
}

/* Strip wrapper */
.ssp-strip-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 7px;
}

.ssp-strip {
    display: flex;
    gap: 5px;
    padding: 2px 4px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.ssp-strip::-webkit-scrollbar { display: none; }

.ssp-empty {
    color: #7a7a9a;
    font-size: 11px;
    padding: 14px 16px;
    white-space: nowrap;
}

/* Scene state card — glass */
.ssp-card {
    flex-shrink: 0;
    width: 88px;
    height: 54px;
    border-radius: 7px;
    border: 1.5px solid rgba(30, 30, 58, 0.5);
    background: rgba(17, 17, 37, 0.6);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ssp-card:hover {
    border-color: rgba(108, 92, 231, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(108, 92, 231, 0.12), inset 0 1px 0 rgba(162, 155, 254, 0.08);
    z-index: 4;
}

.ssp-card.active {
    border-color: rgba(108, 92, 231, 0.5);
    box-shadow: 0 4px 18px rgba(108, 92, 231, 0.18), inset 0 1px 0 rgba(162, 155, 254, 0.1);
    transform: translateY(-1px);
    z-index: 3;
}

.ssp-card.dragging { opacity: 0.4; transform: scale(0.92) !important; }
.ssp-card.drag-over { border-color: #feca57 !important; box-shadow: 0 0 14px rgba(254, 202, 87, 0.25) !important; }

.ssp-card-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ssp-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5, 5, 12, 0.8));
    pointer-events: none;
    z-index: 1;
}

.ssp-card-num {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    z-index: 2;
    font-family: monospace;
}
.ssp-card-kf-badge {
    position: absolute;
    top: 3px;
    left: 18px;
    font-size: 7px;
    color: #a29bfe;
    font-weight: 600;
    z-index: 2;
    font-family: monospace;
    opacity: 0.7;
}

.ssp-card-duration {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 8px;
    font-family: monospace;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
    z-index: 3;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 3px;
    text-align: center;
    transition: all 0.15s ease;
}
.ssp-card-duration:hover {
    background: rgba(108,92,231,0.25);
    color: rgba(255,255,255,0.7);
}
.ssp-card-duration-custom {
    color: #a29bfe;
    background: rgba(108,92,231,0.15);
}
.ssp-card.active .ssp-card-duration-custom { color: #d4cfff; }

/* Duration popover */
.ssp-duration-popover {
    position: fixed;
    z-index: 9999;
    background: rgba(20,20,40,0.97);
    border: 1px solid rgba(108,92,231,0.4);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 170px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(108,92,231,0.12);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.ssp-dur-header {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.ssp-dur-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.ssp-dur-preset {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-family: monospace;
    font-weight: 600;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.ssp-dur-preset:hover {
    background: rgba(108,92,231,0.2);
    border-color: rgba(108,92,231,0.4);
    color: #fff;
}
.ssp-dur-preset.active {
    background: rgba(108,92,231,0.3);
    border-color: #6c5ce7;
    color: #fff;
}
.ssp-dur-custom-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.ssp-dur-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-family: monospace;
    text-align: center;
    padding: 5px 6px;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.ssp-dur-input:focus {
    border-color: #6c5ce7;
}
.ssp-dur-input::-webkit-inner-spin-button,
.ssp-dur-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ssp-dur-input::placeholder {
    color: rgba(255,255,255,0.25);
}
.ssp-dur-apply {
    background: #6c5ce7;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.ssp-dur-apply:hover { background: #7c6ff7; }
.ssp-dur-reset {
    width: 100%;
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.12s;
}
.ssp-dur-reset:hover {
    border-color: rgba(255,100,100,0.3);
    color: rgba(255,100,100,0.7);
}

.ssp-card-remove {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    color: #888;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
    background: rgba(0, 0, 0, 0.6);
}
.ssp-card:hover .ssp-card-remove { display: flex; }
.ssp-card-remove:hover { color: #ff4a4a; background: rgba(255, 74, 74, 0.2); }

.ssp-card-play {
    position: absolute;
    bottom: 4px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 9px;
    color: #aaa;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
    background: rgba(0, 0, 0, 0.6);
}
.ssp-card:hover .ssp-card-play { display: flex; }
.ssp-card-play:hover { color: #6c5ce7; background: rgba(108, 92, 231, 0.25); }

.ssp-card-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    width: 0%;
    z-index: 3;
    box-shadow: 0 0 6px rgba(108, 92, 231, 0.3);
    border-radius: 0 0 0 6px;
}

/* Add button — glass */
.ssp-add {
    flex-shrink: 0;
    width: 36px;
    height: 54px;
    border-radius: 7px;
    border: 1.5px dashed rgba(108, 92, 231, 0.15);
    background: rgba(108, 92, 231, 0.02);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2a4a;
    font-size: 18px;
    transition: all 0.2s;
}
.ssp-add:hover {
    border-color: rgba(108, 92, 231, 0.4);
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.08);
}

/* Speed control */
.ssp-speed {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 8px;
    border-left: 1px solid rgba(108, 92, 231, 0.1);
}

.ssp-speed-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1e1e3a, #6c5ce7);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.ssp-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #6c5ce7;
    cursor: grab;
    box-shadow: 0 0 6px rgba(108, 92, 231, 0.25);
}

.ssp-speed-val {
    font-size: 10px;
    color: #a29bfe;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-family: monospace;
}

/* ═══════════════════════════════════════════════════════
   GLASS RAIL — Bottom Panel
   ═══════════════════════════════════════════════════════ */
.bottom-panel {
    background: linear-gradient(180deg, rgba(14, 14, 30, 0.95), rgba(10, 10, 22, 0.98));
    border-top: 1px solid rgba(108, 92, 231, 0.12);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 100%;
    border-radius: 0;
    overflow: visible;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(108, 92, 231, 0.08);
}

.bottom-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, #6c5ce7 30%, #a29bfe 50%, #6c5ce7 70%, transparent 95%);
    opacity: 0.4;
    z-index: 5;
}

/* Row 1: Mode pills + tools */
.bp-modes {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(108, 92, 231, 0.06);
    background: rgba(10, 10, 25, 0.4);
}

/* Mode pill container — glass capsule */
.bp-mode-pills {
    display: flex;
    gap: 3px;
    background: rgba(15, 15, 35, 0.7);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid rgba(108, 92, 231, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(108, 92, 231, 0.05);
}

.bp-tab {
    padding: 0 12px;
    height: 28px;
    font-size: 10px;
    font-weight: 700;
    color: #7a7a9a;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 6px;
}

.bp-tab:hover {
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.06);
}

.bp-tab.active {
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.2);
    box-shadow: inset 0 1px 0 rgba(162, 155, 254, 0.15), 0 1px 4px rgba(108, 92, 231, 0.1);
}

/* Kill the old underline completely */
.bp-tab.active::after {
    display: none;
    content: none;
}

.bp-tab-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
    /* No border — clean icon */
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.bp-tab.active .bp-tab-icon {
    color: #a29bfe;
    background: none;
    border: none;
    box-shadow: none;
}

/* Right side of modes row */
.bp-modes-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
}

/* Export button — glass ghost */
.bp-export {
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(30, 30, 58, 0.5);
    background: rgba(17, 17, 37, 0.5);
    color: #7a7a9a;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.bp-export:hover {
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.1);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.1), inset 0 1px 0 rgba(162, 155, 254, 0.08);
}

/* REC button — glass ghost red */
.bp-rec {
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(253, 69, 86, 0.2);
    background: rgba(253, 69, 86, 0.05);
    color: #fd4556;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.25s;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(253, 69, 86, 0.03);
}
.bp-rec:hover {
    background: rgba(253, 69, 86, 0.1);
    border-color: rgba(253, 69, 86, 0.35);
    box-shadow: 0 0 16px rgba(253, 69, 86, 0.1), inset 0 1px 0 rgba(253, 69, 86, 0.05);
}
.bp-rec.on {
    background: rgba(253, 69, 86, 0.15);
    border-color: rgba(253, 69, 86, 0.5);
    color: #ff7766;
    box-shadow: 0 0 24px rgba(253, 69, 86, 0.2), inset 0 1px 0 rgba(253, 69, 86, 0.08);
    animation: bp-rec-pulse 1.2s ease-in-out infinite;
}

.bp-rec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.bp-rec.on .bp-rec-dot {
    animation: bp-rec-blink 0.6s ease-in-out infinite;
}

@keyframes bp-rec-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(253, 69, 86, 0.15); }
    50% { box-shadow: 0 0 30px rgba(253, 69, 86, 0.25); }
}
@keyframes bp-rec-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Content area */
.bp-content { display: none; }
.bp-ctx { display: none; }

/* Strip row uses ssp-timeline classes */
.bp-strip-row { }

.bp-strip-empty {
    font-size: 11px;
    color: #7a7a9a;
    white-space: nowrap;
    padding: 0 12px;
}

/* Controls group in modes row */
.bp-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Strip thumbnail card — glass */
.bp-thumb {
    /* width set by JS per image ratio, height fixed at 80px */
    height: 80px;
    border-radius: 7px;
    border: 1.5px solid rgba(30, 30, 58, 0.5);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: rgba(17, 17, 37, 0.6);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.bp-thumb:hover {
    border-color: rgba(108, 92, 231, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(108, 92, 231, 0.12), inset 0 1px 0 rgba(162, 155, 254, 0.08);
}
.bp-thumb.active {
    border-color: rgba(108, 92, 231, 0.5);
    box-shadow: 0 4px 18px rgba(108, 92, 231, 0.18), inset 0 1px 0 rgba(162, 155, 254, 0.1);
    transform: translateY(-1px);
}
.bp-thumb.playing {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.15), inset 0 1px 0 rgba(0, 255, 136, 0.05);
}
.bp-thumb.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}
.bp-thumb.drag-over {
    border-color: #a29bfe;
    box-shadow: 0 0 14px rgba(162, 155, 254, 0.3);
}
.bp-thumb.anchor {
    border-color: rgba(243, 156, 18, 0.5);
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.15);
}
.bp-thumb.selected {
    border-color: rgba(108, 92, 231, 0.6);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.15);
}
/* Strip thumbnails — same preview window rule as .thumb img */
.bp-thumb {
    background: #000;
}
.bp-thumb canvas,
.bp-thumb img {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    display: block;
    object-fit: contain;
}
.bp-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1px 4px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    text-align: center;
    pointer-events: none;
}
.bp-thumb-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(108, 92, 231, 0.6);
    font-size: 7px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.bp-thumb .bp-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #888;
    font-size: 9px;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.bp-thumb:hover .bp-thumb-remove { display: flex; }
.bp-thumb .bp-thumb-remove:hover { color: #fd4556; background: rgba(253, 69, 86, 0.25); }
.diff-score-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  height: 15px;
  padding: 0 5px;
  border-radius: 3px;
  font-family: 'Space Mono', monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: none;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.diff-score-badge.dsb-visible {
  display: flex;
  opacity: 1;
}
.diff-score-badge.dsb-high { background: rgba(79,255,176,0.18); color: #4fffb0; }
.diff-score-badge.dsb-mid  { background: rgba(255,228,79,0.18); color: #ffe44f; }
.diff-score-badge.dsb-low  { background: rgba(255,79,122,0.18); color: #ff4f7a; }
.scene-stack-active .diff-score-badge { display: none !important; }

.bp-label {
    font-size: 10px;
    font-weight: 700;
    color: #7a7a9a;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.bp-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    max-width: 200px;
    height: 3px;
    background: linear-gradient(90deg, #1e1e3a, #6c5ce7);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.bp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #6c5ce7;
    cursor: grab;
    box-shadow: 0 0 6px rgba(108, 92, 231, 0.25);
}

.bp-val {
    font-size: 11px;
    color: #a29bfe;
    font-weight: 700;
    min-width: 40px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.bp-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

/* ═══════════════════════════════════════════════════════
   GLASS RAIL — Toolbar Tools
   ═══════════════════════════════════════════════════════ */
.bp-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bp-tool {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(30, 30, 58, 0.5);
    background: rgba(17, 17, 37, 0.5);
    color: #5a5a7a;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.bp-tool:hover {
    color: #a29bfe;
    background: rgba(108, 92, 231, 0.1);
    border-color: rgba(108, 92, 231, 0.4);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.1), inset 0 1px 0 rgba(162, 155, 254, 0.08);
}
.bp-tool:disabled {
    opacity: 0.25;
    cursor: default;
}

.bp-tool-sep {
    width: 1px;
    height: 16px;
    background: rgba(108, 92, 231, 0.1);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Bottom panel zoom */
.bp-zoom {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bp-zoom-val {
    font-size: 10px;
    color: #7a7a9a;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ─── Zoom Popover ─── */
.bp-zoom-wrap {
    position: relative;
}

.bp-zoom-trigger {
    display: flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 7px;
    cursor: pointer;
    transition: all 0.2s;
}
.bp-zoom-trigger:hover {
    background: rgba(108, 92, 231, 0.08);
    border-color: rgba(108, 92, 231, 0.3);
}
.bp-zoom-trigger:active,
.bp-zoom-trigger[aria-expanded="true"] {
    background: rgba(108, 92, 231, 0.12);
    border-color: rgba(108, 92, 231, 0.5);
}

.bp-zoom-label {
    font-size: 9px;
    font-weight: 700;
    color: #7a7a9a;
    letter-spacing: 0.5px;
}

.bp-zoom-caret {
    color: #5a5a7a;
    transition: transform 0.2s;
}
.bp-zoom-trigger[aria-expanded="true"] .bp-zoom-caret {
    transform: rotate(180deg);
}

.bp-zoom-popover {
    display: none;
    position: fixed;
    z-index: 10000;
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 10px;
    padding: 6px 8px;
    gap: 4px;
    align-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,92,231,0.06);
    white-space: nowrap;
    animation: zoomPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-zoom-popover.open {
    display: flex;
}

@keyframes zoomPopIn {
    from { opacity: 0; transform: translateY(4px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bp-zoom-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid #2a2a3e;
    background: #0e0e1a;
    color: #a29bfe;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bp-zoom-btn:hover {
    background: #1a1a2e;
    border-color: #6c5ce7;
    color: #fff;
}
.bp-zoom-btn:active {
    background: #6c5ce7;
    color: #fff;
}

.bp-zoom-fit {
    width: auto;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.bp-zoom-level {
    font-size: 11px;
    color: #a29bfe;
    font-weight: 700;
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bp-zoom-divider {
    width: 1px;
    height: 18px;
    background: #2a2a3e;
    margin: 0 2px;
}

.bp-tool-text {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    width: auto;
    padding: 0 6px;
}

/* Layer not in active scene state */
/* ═══════════════════════════════════════════════════════
   LAYER PANEL (slp- classes)
   ═══════════════════════════════════════════════════════ */
.scene-layers-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 12px;
    padding-top: 4px;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 400px);
}

.slp-header {
    padding: 8px 6px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.slp-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777;
}

.slp-count {
    font-size: 10px;
    font-weight: 700;
    background: none;
    color: #888;
    padding: 0;
    border-radius: 0;
    font-family: monospace;
}

.slp-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px;
}
.slp-list::-webkit-scrollbar { width: 3px; }
.slp-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }

.slp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
    margin-bottom: 2px;
    border: 1px solid transparent;
    position: relative;
}
.slp-item:hover { background: rgba(255, 255, 255, 0.03); }
.slp-item.selected {
    background: rgba(74, 158, 255, 0.06);
    border-color: rgba(74, 158, 255, 0.1);
}
.slp-item.dragging { opacity: 0.4; }
.slp-item.drag-over { border-color: #feca57; }

.slp-thumb {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    overflow: hidden;
    background: #0a0a0a;
}
.slp-item.selected .slp-thumb { border-color: rgba(74, 158, 255, 0.3); }
.slp-thumb canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.slp-info {
    flex: 1;
    min-width: 0;
}

.slp-name {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slp-dims {
    font-size: 8px;
    color: #555;
    font-family: monospace;
    margin-top: 1px;
}

.slp-eye {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #555;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.4;
    transition: all 0.12s;
}
.slp-item:hover .slp-eye { opacity: 1; }
.slp-eye:hover { color: #4a9eff; background: rgba(74, 158, 255, 0.08); }
.slp-eye.hidden { opacity: 0.15; }

.slp-empty {
    padding: 16px 8px;
    text-align: center;
    color: #444;
    font-size: 10px;
}

/* Layer not in active scene state */
.slp-hidden-layer {
    opacity: 0.25;
}
.slp-hidden-layer .slp-thumb {
    border-color: rgba(255,255,255,0.05);
}

/* Bottom panel: flush inside canvas-container, no overrides needed */

/* ═══════════════════════════════════════════════════════════════
   MOBILE UI/UX PATCH — February 2026
   Applied as overrides at end of file for clean separation.
   All fixes are scoped to mobile breakpoints or touch contexts.
   ═══════════════════════════════════════════════════════════════ */

/* ── #1  SAFE AREA INSETS ──────────────────────────────────────
   iPhone notch / Dynamic Island / home indicator bar.
   Requires viewport-fit=cover in <meta viewport>.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .container {
        padding-left: max(15px, env(safe-area-inset-left, 15px));
        padding-right: max(15px, env(safe-area-inset-right, 15px));
    }
    .help-btn {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    .feedback-btn {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    .info-btn {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: max(10px, env(safe-area-inset-left, 10px));
        padding-right: max(10px, env(safe-area-inset-right, 10px));
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .container {
        padding-left: max(10px, env(safe-area-inset-left, 10px));
        padding-right: max(10px, env(safe-area-inset-right, 10px));
    }
}


/* ── #2  TOUCH TARGETS — 44px minimum hit area ────────────────
   Visually keep buttons compact, but expand the tappable zone
   using padding so fingers don't miss on phone screens.
   Only applies to touch devices to avoid bloating desktop.
   ────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
    /* Canvas control buttons: expand hit zone with pseudo-element
       rather than inflating layout. This keeps visual size small
       but gives a 44×44 minimum touch target. */
    .canvas-controls .btn,
    #mobileCanvasSlot .canvas-controls .btn {
        position: relative;
    }
    .canvas-controls .btn::after,
    #mobileCanvasSlot .canvas-controls .btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    /* Floating help/feedback/info buttons — visual 28px, hit area 44px */
    .help-btn,
    .feedback-btn,
    .info-btn {
        position: fixed;
    }
    .help-btn::after,
    .feedback-btn::after,
    .info-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    /* Upload collapse bars — already decent but enforce minimum */
    .upload-collapse-bar {
        min-height: 44px;
    }

    /* More-sections toggle — tiny text, needs touch area */
    .more-sections-toggle {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Zoom +/- buttons */
    .canvas-controls #zoomOutBtn,
    .canvas-controls #zoomInBtn,
    .canvas-controls #zoomResetBtn {
        position: relative;
    }
    .canvas-controls #zoomOutBtn::after,
    .canvas-controls #zoomInBtn::after,
    .canvas-controls #zoomResetBtn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    /* Mark-all checkbox and delete-all button in section headings */
    .mark-all-checkbox,
    .action-btn.delete-all {
        position: relative;
    }
    /* mark-all-checkbox uses ::after for checkmark content (✓/–),
       so use ::before for touch target to avoid conflict */
    .mark-all-checkbox::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }
    .action-btn.delete-all::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    /* Scene strip thumbnail remove button */
    .ssp-card-remove {
        position: relative;
    }
    .ssp-card-remove::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    /* Bottom panel mode tabs — visual 28px tall, hit area 44px */
    .bp-tab {
        position: relative;
    }
    .bp-tab::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    /* Scene layer remove button (×) in scene stack thumbs */
    .remove-layer {
        position: relative;
    }
    .remove-layer::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }
}


/* ── #3  SCENE BUTTON — flexbox instead of absolute ───────────
   Replace position:absolute + padding-right hack with
   margin-left:auto which naturally pushes SCENE to the right
   while letting other controls flow without cramping.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .canvas-controls #sceneStackBtn {
        position: static !important;
        margin-left: auto;
    }
    .canvas-controls {
        padding-right: 10px !important;
    }
    .canvas-controls.scene-mode {
        padding-right: 10px !important;
    }
    #mobileCanvasSlot .canvas-controls #sceneStackBtn {
        position: static !important;
        margin-left: auto;
    }
    #mobileCanvasSlot .canvas-controls {
        padding-right: 8px !important;
    }
}


/* ── #5  OVERSCROLL — merged into #1 body block above ──────── */


/* ── #6  TOUCH-ACTION — kill 300ms delay on interactive ───────
   Prevents double-tap zoom on buttons/controls without
   blocking pinch-zoom on the canvas or page.
   ────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .blink-btn,
    .canvas-controls .btn,
    .canvas-controls label,
    .canvas-controls input[type="range"],
    .upload-zone,
    .upload-collapse-bar,
    .more-sections-toggle,
    .thumb,
    .scene-stack-thumb,
    .help-btn,
    .feedback-btn,
    .info-btn,
    .mobile-only-share,
    .bp-tool,
    .bp-thumb,
    .slp-item,
    .slp-eye,
    .tl-play-btn,
    .tl-loop-btn,
    .mark-all-checkbox,
    .section-heading {
        touch-action: manipulation;
    }
}


/* ── #8  MORE-SECTIONS TOGGLE — contrast fix ──────────────────
   Was #333 on #151515 = ~1.5:1 contrast ratio.
   Now #777 on #151515 = ~4.2:1, near WCAG AA.
   Also add underline hint so it reads as tappable.
   ────────────────────────────────────────────────────────────── */
.more-sections-toggle {
    color: #777;
    text-decoration: underline;
    text-decoration-color: rgba(119, 119, 119, 0.3);
    text-underline-offset: 3px;
}
.more-sections-toggle:hover {
    color: #aaa;
    text-decoration-color: rgba(170, 170, 170, 0.4);
}


/* ── #9  STICKY SAVE / EXPORT ROW ─────────────────────────────
   On mobile, the panel can get very long (many images/scenes).
   Save and Export stay pinned at bottom so users don't
   have to scroll to the very end to reach them.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mobile-actions__row {
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: var(--panel);
        padding: 12px 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        will-change: transform;
    }
}
@media (max-width: 480px) {
    .mobile-actions__row {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* ── #10  UPLOAD ZONES LANDSCAPE — visual separation ──────────
   When zones sit side-by-side in landscape, add clearer
   visual boundary so user knows which zone they're tapping.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
    .upload-zone {
        border: 1.5px dashed rgba(255, 255, 255, 0.1) !important;
    }
    .upload-zone:active {
        border-color: rgba(74, 158, 255, 0.4) !important;
        background: rgba(74, 158, 255, 0.04) !important;
    }
}


/* ── #11  FLOATING BUTTONS — positioning per layout ────────────
   Portrait: spaced along bottom right, above safe area.
   Landscape: anchored inside left panel column, above Save/Export.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .help-btn {
        right: 12px;
    }
    .feedback-btn {
        right: 52px;
    }
    .info-btn {
        right: 92px;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .help-btn,
    .feedback-btn,
    .info-btn {
        position: fixed;
        bottom: 14px;
        z-index: 1001;
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    /* Center of left panel: (10 + 250) / 2 = 130px */
    .feedback-btn {
        left: 118px;
        right: auto;
    }
    .info-btn {
        left: 72px;
        right: auto;
    }
    .help-btn {
        left: 164px;
        right: auto;
    }
}


/* ── #13  TAP HIGHLIGHT — suppress flash on all tappables ─────
   iOS/Android show a blue/gray flash on tap by default.
   Suppress it app-wide for interactive elements.
   ────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .blink-btn,
    .upload-zone,
    .upload-collapse-bar,
    .thumb,
    .scene-stack-thumb,
    .help-btn,
    .feedback-btn,
    .info-btn,
    .more-sections-toggle,
    .panel-toggle,
    .left-panel-toggle,
    .bp-tool,
    .bp-thumb,
    .slp-item,
    .slp-eye,
    .tl-play-btn,
    .tl-loop-btn,
    .mobile-only-share,
    .mark-all-checkbox,
    .shortcuts-close,
    .export-menu button,
    .export-menu a {
        -webkit-tap-highlight-color: transparent;
    }
}


/* ── #14  EXPORT MENU — safe anchoring on small screens ───────
   At ≤480px the menu is full-width which is good, but the
   transform:none + left:20px can misalign. Center it properly.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #downloadMenu {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}


/* ── #15  THUMBNAIL GRIDS — scroll containment ────────────────
   DISABLED: overscroll-behavior:contain on nested scrollable
   elements traps touch events on iOS Safari, blocking body scroll.
   Revisit with JS-based approach if panel gets too long.
   ────────────────────────────────────────────────────────────── */


/* ── #16  LOADING SKELETON — subtle shimmer for slow loads ────
   Shows a neutral pulsing placeholder in thumbnail slots
   while images decode. Applied via .thumb-loading class
   (needs JS to add/remove this class during image load).
   ────────────────────────────────────────────────────────────── */
@keyframes thumbShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.thumb-loading {
    background: linear-gradient(
        90deg,
        var(--input) 25%,
        rgba(255, 255, 255, 0.04) 50%,
        var(--input) 75%
    );
    background-size: 200% 100%;
    animation: thumbShimmer 1.5s ease-in-out infinite;
    border-color: transparent !important;
}
.thumb-loading img,
.thumb-loading canvas {
    visibility: hidden;
}


/* ── #17  MINIMUM FONT SIZE — raise 8px to 10px ──────────────
   8px is unreadable on most phones at arm's length.
   Selectively bump only the mobile-breakpoint instances
   that used 8px in controls and labels.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
    .canvas-controls label {
        font-size: 10px !important;
    }
    .canvas-controls .btn {
        font-size: 10px !important;
    }
    .canvas-controls #zoomValue {
        font-size: 10px;
    }
    #opacityValue {
        font-size: 10px;
    }
    #speedValue {
        font-size: 10px;
    }
    .canvas-controls #sceneStackBtn {
        font-size: 10px !important;
    }
    .canvas-controls #shareBtnDesktop {
        font-size: 10px !important;
    }
    .canvas-controls.scene-mode #captureSceneBtn,
    .canvas-controls.scene-mode #videoBtn,
    .canvas-controls.scene-mode #recordBtn {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    #mobileCanvasSlot .canvas-controls .btn {
        font-size: 10px !important;
    }
    #mobileCanvasSlot .canvas-controls #sceneStackBtn {
        font-size: 10px !important;
    }
    #zoomResetBtn {
        font-size: 10px;
    }
    #zoomValue {
        font-size: 10px;
    }
}


/* ── LANDSCAPE BOTTOM PANEL — fit within canvas panel width ───
   On landscape phones the canvas panel is ~574px.
   The modes row must fit within that. Compact everything
   and hide less critical tools behind overflow scroll.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
    .bottom-panel {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .bp-modes {
        padding: 5px 6px;
        gap: 4px;
        flex-wrap: nowrap;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Compact mode pills */
    .bp-mode-pills {
        flex-shrink: 0;
        gap: 1px;
        padding: 2px;
    }

    .bp-tab {
        padding: 0 6px;
        height: 22px;
        font-size: 10px;
    }

    .bp-tab-icon {
        font-size: 9px;
        margin-right: 2px;
    }

    /* Right tools: allow shrinking, scroll if needed */
    .bp-modes-right {
        flex-shrink: 1;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 2px;
        padding-right: 2px;
    }
    .bp-modes-right::-webkit-scrollbar {
        display: none;
    }

    /* Hide separators to save space */
    .bp-tool-sep {
        display: none;
    }

    /* Compact tools */
    .bp-tool {
        width: 22px;
        height: 22px;
        font-size: 10px;
        flex-shrink: 0;
    }

    .bp-export,
    .bp-rec {
        height: 22px;
        padding: 0 5px;
        font-size: 10px;
        flex-shrink: 0;
    }

    .bp-slider {
        max-width: 60px;
    }

    .bp-val {
        font-size: 9px;
        min-width: 28px;
    }

    .bp-zoom-val {
        font-size: 10px;
        min-width: 26px;
    }

    /* Compact strip row */
    .bp-thumb {
        /* width set by JS per image ratio */
        height: 40px;
    }

    .bp-strip-row,
    .ssp-timeline {
        max-width: 100%;
    }

    .ssp-speed-slider {
        width: 40px;
    }

    .ssp-speed-val {
        font-size: 9px;
    }
}

/* ── LANDSCAPE PANEL COLLAPSE ─────────────────────────────────   Re-enable the left panel toggle arrow in landscape.
   When collapsed: panel shrinks to 40px, canvas gets full width.
   Uses the existing .left-collapsed class + JS from desktop.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
    /* Toggle is fixed to viewport, aligned to panel right edge.
       Panel keeps overflow:auto for scrolling. */
    .left-panel-toggle {
        display: flex !important;
        position: fixed !important;
        /* Panel edge: 10px padding + 240px panel = 250px */
        left: 250px;
        top: 50%;
        transform: translateY(-50%);
        right: auto;
        width: 16px;
        height: 60px;
        font-size: 14px;
        z-index: 1001;
    }

    /* Collapsed state: thin strip, canvas expands.
       No grid transition — snap together as one unit ("glued"). */
    .container {
        transition: none !important;
    }

    .container.left-collapsed {
        grid-template-columns: 40px calc(100vw - 70px);
    }

    .container.left-collapsed .panel:first-child {
        padding: 0;
        overflow: visible;
    }

    .container.left-collapsed .panel:first-child > *:not(.left-panel-toggle) {
        display: none !important;
    }

    /* Move toggle to collapsed panel edge */
    .container.left-collapsed .left-panel-toggle {
        left: 50px !important;
    }

    /* Hide the floating buttons when panel is collapsed */
    .container.left-collapsed ~ .help-btn,
    .container.left-collapsed ~ .feedback-btn,
    .container.left-collapsed ~ .info-btn {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   END MOBILE UI/UX PATCH
   ═══════════════════════════════════════════════════════════════ */

/* ─── Undo / Redo instant tooltip ──────────────────────────────────────────
   The title attribute is already set dynamically by updateUndoRedoButtons()
   in scene-undo.js to values like "Undo: Move Layer" / "Redo: Add Shape".
   Browser native title tooltips have a ~1s OS delay — this CSS ::after
   override makes them appear instantly on hover. No JS needed.              */
#bpUndo, #bpRedo { position: relative; }
#bpUndo[title]:not([title=""])::after,
#bpRedo[title]:not([title=""])::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #a29bfe;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid rgba(108, 92, 231, 0.3);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 100;
}
#bpUndo[title]:not([title=""]):hover::after,
#bpRedo[title]:not([title=""]):hover::after {
    opacity: 1;
}

/* PORTRAIT FIX */
.fix-p .bp-modes { flex-wrap:wrap; padding:0; }
.fix-p .bp-mode-pills { width:100%; border-radius:0; padding:6px 8px; gap:2px; border:none; border-bottom:1px solid rgba(108,92,231,.1); background:rgba(10,10,25,.7); box-shadow:none; }
.fix-p .bp-tab { flex:1; justify-content:center; height:36px; font-size:11px; padding:0 2px; }
.fix-p .bp-modes-right { width:100%; margin-left:0; padding:4px 8px; gap:3px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; background:rgba(8,8,20,.5); -webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent 100%); mask-image:linear-gradient(to right,black calc(100% - 28px),transparent 100%); }
.fix-p .bp-modes-right::-webkit-scrollbar { display:none; }
.fix-p .bp-tool-sep { display:none; }
.fix-p .bp-label { display:none; }
.fix-p .bp-tool { width:30px; height:30px; }
.fix-p .bp-tool-text { height:30px; padding:0 7px; }
.fix-p .bp-slider { width:60px; }
.fix-p .bp-val { font-size:10px; min-width:26px; }
.fix-p .bp-rec { height:30px; padding:0 9px; }
.fix-p .ssp-btn { width:30px; height:30px; }
.fix-p .ssp-nav-arrow { width:30px; height:30px; }
.fix-p .ssp-timeline { height:84px; padding:6px 8px; }
.fix-p .bp-thumb { height:70px; }
.fix-p #zoomValue { display:none !important; }
.fix-p .bp-export { height:30px; width:30px; padding:0; justify-content:center; }
.fix-p .export-text { display:none; }
.fix-p #shareBtnDesktop { width:30px !important; padding:0 !important; justify-content:center; }
.fix-p .share-text { display:none; }

/* OPACITY COLLAPSE */
.opacity-icon { display:none; width:28px; height:28px; border-radius:6px; border:1px solid rgba(30,30,58,.5); background:rgba(17,17,37,.5); color:#5a5a7a; font-size:13px; cursor:pointer; align-items:center; justify-content:center; padding:0; flex-shrink:0; font-family:inherit; transition:all .2s; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.opacity-icon:hover { color:#a29bfe; border-color:rgba(108,92,231,.4); background:rgba(108,92,231,.1); box-shadow:0 0 10px rgba(108,92,231,.1), inset 0 1px 0 rgba(162,155,254,.08); }
#opacityGroup.opacity-collapsed .opacity-icon { display:flex; }
#opacityGroup.opacity-collapsed .bp-label { display:none; }
#opacityGroup.opacity-collapsed .bp-slider { display:none; }
#opacityGroup.opacity-collapsed .bp-val { display:none; }
#opacityGroup.opacity-collapsed.opacity-open .bp-slider { display:inline-block; width:60px; }

/* fix-l-text: iPad Mini + Nest Hub */
.fix-l-text .export-text { display:none; }
.fix-l-text .bp-export { width:26px; padding:0; justify-content:center; }
.fix-l-text #shareBtnDesktop { width:26px !important; padding:0 !important; justify-content:center; }
.fix-l-text .share-text { display:none; }
.fix-l-text .bp-val { display:none; }
.fix-l-text .bp-slider { width:60px; }
/* fix-l-text: opacity collapse specificity — mirrors mockup, ensures collapse
   wins over any class-level display rules on this layout */
.fix-l-text #opacityGroup.opacity-collapsed .opacity-icon { display:flex; }
.fix-l-text #opacityGroup.opacity-collapsed .bp-label { display:none; }
.fix-l-text #opacityGroup.opacity-collapsed .bp-slider { display:none; }
.fix-l-text #opacityGroup.opacity-collapsed .bp-val { display:none; }
.fix-l-text #opacityGroup.opacity-collapsed.opacity-open .bp-slider { display:inline-block; width:60px; }

/* LANDSCAPE FIX */
.fix-l .bp-modes { padding:4px 8px; }
.fix-l .bp-mode-pills { gap:1px; padding:2px; }
.fix-l .bp-tab { padding:0 7px; height:24px; font-size:10px; }
.fix-l .bp-modes-right { gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.fix-l .bp-modes-right::-webkit-scrollbar { display:none; }
.fix-l .bp-label { display:none; }
.fix-l .bp-slider { width:50px; }
.fix-l .bp-tool-sep { display:none; }
.fix-l #zoomValue { display:none !important; }
.fix-l .bp-tool { width:22px; height:22px; font-size:10px; }
.fix-l .bp-export { height:22px; width:22px; padding:0; justify-content:center; }
.fix-l .export-text { display:none; }
.fix-l #shareBtnDesktop { width:22px !important; padding:0 !important; justify-content:center; }
.fix-l .share-text { display:none; }
.fix-l .bp-rec { height:22px; padding:0 8px; font-size:9px; letter-spacing:1px; }
.fix-l .ssp-timeline { height:58px; padding:5px 8px; gap:5px; }
.fix-l .ssp-btn { width:22px; height:22px; font-size:10px; }
.fix-l .ssp-nav-arrow { width:22px; height:22px; }
.fix-l .bp-thumb { height:46px; }
.fix-l .ssp-speed-slider { width:44px; }

/* fix-l: force hide all separators even if JS shows them */
.fix-l .bp-tool-sep { display:none !important; }

/* show sepFit only on desktop — hidden by default on mobile */
@media (min-width: 1025px) {
  #sepFit { display:block !important; }
}

/* ── Inline name modal (replaces browser prompt()) ── */
.name-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.name-modal {
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 20px 24px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.name-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
    margin-bottom: 12px;
}
.name-modal-input {
    width: 100%;
    padding: 8px 10px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #eee;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.name-modal-input:focus {
    border-color: rgba(100,160,255,0.5);
}
.name-modal-hint {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}
.name-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
.name-modal-btn {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    background: #2a2a2a;
    color: #ccc;
}
.name-modal-btn:hover {
    background: #333;
}
.name-modal-btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.name-modal-btn-primary:hover {
    background: #1d4ed8;
}

/* Keyframe Ruler */
.kfr-row { padding: 4px 8px 2px; border-bottom: 1px solid #1a1a2e; }
.kfr-ruler { display: flex; align-items: center; gap: 8px; }
.kfr-track { flex: 1; min-width: 0; position: relative; height: 36px; }
.kfr-track-inner { position: relative; width: 100%; height: 100%; }
.kfr-baseline { position: absolute; top: 16px; left: 12px; right: 12px; height: 2px; background: #2a2a44; border-radius: 1px; }
.kfr-gap { position: absolute; top: 2px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kfr-seg-line { position: absolute; top: 14px; left: 6px; right: 6px; height: 2px; background: #6c5ce7; opacity: 0.4; border-radius: 1px; transition: opacity 0.15s; }
.kfr-gap.hovered .kfr-seg-line { opacity: 1; background: #a29bfe; }
.kfr-dur-label { font-size: 8px; font-weight: 700; color: #666; background: #0d0d1a; padding: 0 3px; position: relative; z-index: 1; transition: color 0.15s; font-family: monospace; }
.kfr-gap.hovered .kfr-dur-label { color: #a29bfe; }
.kfr-dur-input { width: 42px; height: 16px; background: #0a0a16; border: 1px solid #6c5ce7; border-radius: 3px; color: #a29bfe; font-size: 9px; font-weight: 700; text-align: center; outline: none; font-family: monospace; position: relative; z-index: 2; }
.kfr-dot { position: absolute; top: 7px; width: 18px; height: 22px; margin-left: -9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; z-index: 5; }
.kfr-diamond { width: 8px; height: 8px; background: #4a3fad; border: 2px solid #2a2a44; border-radius: 2px; transform: rotate(45deg); transition: all 0.12s; }
.kfr-dot.active .kfr-diamond, .kfr-dot.selected .kfr-diamond { width: 10px; height: 10px; background: #6c5ce7; border-color: #a29bfe; box-shadow: 0 0 6px #6c5ce7; }
.kfr-dot-num { font-size: 7px; font-weight: 700; color: #666; margin-top: 2px; font-family: monospace; }
.kfr-dot.active .kfr-dot-num, .kfr-dot.selected .kfr-dot-num { color: #a29bfe; }
.kfr-total { font-size: 10px; font-weight: 700; color: #a29bfe; min-width: 36px; text-align: right; font-family: monospace; }
.kfr-slider-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px 2px; border-top: 1px solid #1a1a2e; margin-top: 2px; }
.kfr-slider-label { font-size: 9px; color: #666; font-weight: 700; min-width: 40px; font-family: monospace; }
.kfr-slider { flex: 1; accent-color: #6c5ce7; height: 2px; }
.kfr-slider-val { font-size: 10px; font-weight: 700; color: #a29bfe; min-width: 40px; text-align: right; font-family: monospace; }

/* ── Layer lock badge ── */
.layer-lock-badge {
    position: absolute; top: 5px; right: 5px;
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
    cursor: pointer; z-index: 20;
    pointer-events: auto;
    transition: background 0.15s;
    user-select: none;
}
.layer-lock-badge:hover { background: rgba(255,255,255,0.18); }
.scene-layer.layer-locked {
    border-style: dashed !important;
    border-color: #555 !important;
    cursor: not-allowed;
}
.scene-layer.layer-locked > canvas,
.scene-layer.layer-locked > img.layer-display { opacity: 0.45; }
.scene-layer.layer-locked .resize-handle { display: none; }

/* ── Layer group dot ── */
.layer-group-dot {
    position: absolute; bottom: 5px; right: 5px;
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    z-index: 20; pointer-events: none;
}
/* ── Context menu group row ── */
.ctx-group-row {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px;
}
.ctx-group-label {
    font-size: 11px; color: #888; margin-right: 2px; flex-shrink: 0;
}
.ctx-group-btn {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer; flex-shrink: 0;
    transition: transform 0.1s, border-color 0.1s;
}
.ctx-group-btn:hover { transform: scale(1.2); border-color: rgba(255,255,255,0.5); }
.ctx-group-btn[data-group="g1"] { background: #7c6dfa; }
.ctx-group-btn[data-group="g2"] { background: #fd9644; }
.ctx-group-btn[data-group="g3"] { background: #20bf6b; }
.ctx-group-btn[data-group="g4"] { background: #fc5c65; }
.ctx-group-btn.ctx-group-none { background: #333; color: #888; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ctx-group-btn.ctx-group-active { border-color: #fff; box-shadow: 0 0 5px rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════
   CHANGE LAB — GENERATE
   ═══════════════════════════════════════ */

/* ── Generate toolbar button ── */
.cl-generate-btn {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: #f59e0b !important;
    border: 1px solid rgba(245,158,11,0.3) !important;
    background: rgba(245,158,11,0.08) !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 6px;
    height: 28px;
    display: flex;
    align-items: center;
    transition: background 0.15s, box-shadow 0.15s;
}
.cl-generate-btn:hover {
    background: rgba(245,158,11,0.15) !important;
    box-shadow: 0 0 10px rgba(245,158,11,0.15);
}

.cl-extract-btn {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: #34d399 !important;
    border: 1px solid rgba(52,211,153,0.3) !important;
    background: rgba(52,211,153,0.08) !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 4px;
    height: 28px;
    display: flex;
    align-items: center;
    transition: background 0.15s, box-shadow 0.15s;
}
.cl-extract-btn:hover {
    background: rgba(52,211,153,0.18) !important;
    box-shadow: 0 0 10px rgba(52,211,153,0.15);
}

/* ── Instructional message ── */
.cl-gen-message {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(12,12,18,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,220,100,0.2);
    border-radius: 10px;
    padding: 16px 24px;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: clGenMsgIn 0.4s ease-out;
    pointer-events: none;
}
@keyframes clGenMsgIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cl-gen-message-icon { font-size: 28px; margin-bottom: 8px; color: #ffd666; }
.cl-gen-message-text { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 6px; }
.cl-gen-message-sub  { font-size: 10px; color: rgba(255,255,255,0.35); line-height: 1.5; }
.cl-gen-hl        { color: #ffd666; font-weight: 700; }
.cl-gen-hl-action { color: #f59e0b; font-weight: 700; }
.cl-ext-hl-action { color: #34d399; font-weight: 700; }

/* ── Demo Guide Button ── */
.demo-guide {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: demoGuideIn 0.4s ease-out;
    pointer-events: auto;
}
.demo-guide-btn {
    padding: 11px 26px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #4a9eff, #3b82f6);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 4px 20px rgba(74,158,255,0.3), 0 8px 32px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}
.demo-guide-btn:hover {
    box-shadow: 0 6px 28px rgba(74,158,255,0.4), 0 8px 32px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}
.demo-guide-btn.final {
    padding: 9px 22px;
    background: rgba(12,12,18,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(74,158,255,0.2);
    color: rgba(74,158,255,0.8);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.demo-guide-btn.final:hover {
    border-color: rgba(74,158,255,0.35);
    color: rgba(74,158,255,1);
}
.demo-guide-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    max-width: 300px;
    line-height: 1.45;
    background: rgba(12,12,18,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 14px;
    border-radius: 6px;
}
.demo-guide-dots {
    display: flex;
    gap: 3px;
}
.demo-guide-dot {
    height: 3px;
    border-radius: 1.5px;
    background: rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}
.demo-guide-dot.done    { background: rgba(74,158,255,0.3); width: 4px; }
.demo-guide-dot.current { background: #4a9eff; width: 14px; }
.demo-guide-dot.future  { width: 4px; }

.demo-highlight {
    animation: demoHighlight 1.5s ease-in-out infinite !important;
    border-color: rgba(245,158,11,0.6) !important;
}
@keyframes demoHighlight {
    0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,0.2); }
    50%      { box-shadow: 0 0 20px rgba(245,158,11,0.5), 0 0 40px rgba(245,158,11,0.15); }
}
@keyframes demoGuideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Regenerate confirmation ── */
.cl-regen-confirm { pointer-events: auto; }
.cl-regen-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
}
.cl-regen-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    transition: background 0.15s, border-color 0.15s;
}
.cl-regen-btn-yes {
    background: rgba(255,220,100,0.15);
    color: #ffd666;
    border-color: rgba(255,220,100,0.3);
}
.cl-regen-btn-yes:hover {
    background: rgba(255,220,100,0.25);
    border-color: rgba(255,220,100,0.5);
}
.cl-regen-btn-no {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
}
.cl-regen-btn-no:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

/* ── Generated section — follows scene-layers-panel pattern ── */
.cl-gen-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 12px;
    padding-top: 4px;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 200px);
}

.cl-gen-header {
    padding: 8px 6px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cl-gen-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777;
}

/* ── Scrollable card area — only this scrolls ── */
.cl-gen-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.cl-gen-scroll::-webkit-scrollbar { width: 3px; }
.cl-gen-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }

/* ── Card ── */
.cl-gen-card {
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.04);
    background: #0c0c10;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    position: relative;
    flex-shrink: 0;
}
.cl-gen-card:hover {
    border-color: rgba(108,92,231,0.3);
}
.cl-gen-card.selected {
    border-color: rgba(108,92,231,0.9);
    box-shadow: 0 0 10px rgba(108,92,231,0.15);
}
.cl-gen-card.checked {
    opacity: 0.4;
}

.cl-gen-card-img {
    width: 100%;
    display: block;
    background: #0a0a0e;
    min-height: 150px;
}
.cl-gen-card-img[src] {
    min-height: 0;
}

.cl-gen-card-label {
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    color: rgba(255,255,255,0.2);
}
.cl-gen-card.selected .cl-gen-card-label {
    color: rgba(108,92,231,0.9);
    background: rgba(108,92,231,0.08);
}

/* ── Checkbox ── */
.cl-gen-check {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    font-size: 11px;
    line-height: 1;
    color: transparent;
}
.cl-gen-check.checked {
    border-color: #ef4444;
    background: rgba(239,68,68,0.2);
    color: #ef4444;
}

/* ── Footer — pinned at bottom ── */
.cl-gen-footer {
    flex-shrink: 0;
    padding: 6px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-gen-footer-row {
    display: flex;
    gap: 4px;
}
.cl-gen-footer-row .btn { flex: 1; }

.cl-gen-delete-btn {
    width: 100%;
    padding: 6px 0;
    border-radius: 4px;
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.08);
    color: #ef4444;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.cl-gen-delete-btn:hover {
    background: rgba(239,68,68,0.15);
}
.cl-gen-save-btn,
.cl-gen-export-btn {
    font-size: 10px !important;
    padding: 6px 0 !important;
}

/* ── Freeform shape button glow when active ── */
#freeformShapeBtn.active {
    color: #ffd666;
    background: rgba(255,220,100,0.12);
    border-color: rgba(255,220,100,0.4);
    box-shadow: 0 0 10px rgba(255,220,100,0.2), 0 0 20px rgba(255,220,100,0.1);
    animation: clFreeformGlow 2s ease-in-out infinite;
}
@keyframes clFreeformGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255,220,100,0.15), 0 0 16px rgba(255,220,100,0.05); }
    50%      { box-shadow: 0 0 12px rgba(255,220,100,0.3), 0 0 24px rgba(255,220,100,0.1); }
}

/* ── Generation spinner placeholder ── */
.cl-gen-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.1);
    font-size: 14px;
    letter-spacing: 4px;
    pointer-events: none;
}

/* ── Cancel button ── */
.cl-gen-cancel-btn {
    width: 100%;
    padding: 6px 0;
    border-radius: 4px;
    border: 1px solid rgba(251,191,36,0.3);
    background: rgba(251,191,36,0.08);
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.cl-gen-cancel-btn:hover {
    background: rgba(251,191,36,0.15);
}

/* ── Per-card Add to images button ── */
.cl-gen-add-btn {
    position: absolute;
    bottom: 24px;
    right: 6px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(74,222,128,0.3);
    background: rgba(74,222,128,0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #4ade80;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    pointer-events: none;
}
.cl-gen-card:hover .cl-gen-add-btn,
.cl-gen-card.selected .cl-gen-add-btn {
    opacity: 1;
    pointer-events: auto;
}
.cl-gen-add-btn:hover {
    background: rgba(74,222,128,0.2);
}

/* ── Promoted card indicator ── */
.cl-gen-card.promoted {
    border-color: rgba(74,222,128,0.4);
}
.cl-gen-card.promoted .cl-gen-add-btn {
    opacity: 1;
    pointer-events: none;
    color: rgba(74,222,128,0.5);
    border-color: rgba(74,222,128,0.15);
    background: rgba(74,222,128,0.05);
}
.cl-gen-card.promoted .cl-gen-card-label::after {
    content: ' ✓ added';
    color: rgba(74,222,128,0.5);
    font-weight: 400;
}