:root{--bg-dark: #0a0a0a;--bg-panel: #171717;--bg-toolbar: #171717;--bg-timeline: #171717;--text-main: #9ca3af;--text-muted: #6b7280;--primary: #262626;--primary-hover: #404040;--border-color: #262626;--accent-white: #ffffff}.scanline{width:100%;height:100px;z-index:9999;background:linear-gradient(0deg,#0000,#ffffff05,#0000);opacity:.1;position:fixed;bottom:100%;left:0;pointer-events:none;animation:scanline 8s linear infinite}@keyframes scanline{0%{bottom:100%}to{bottom:-100px}}.block-cursor{display:inline-block;width:8px;height:14px;background-color:var(--accent-white);margin-left:4px;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.video-app-container{display:flex;flex-direction:column;flex:1;background-color:var(--bg-dark)}.toolbar{height:48px;background-color:var(--bg-toolbar);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 16px;justify-content:space-between;gap:12px}.brand{font-weight:600;font-size:16px;letter-spacing:.5px;color:#fff;width:150px;flex-shrink:0}.actions{display:flex;gap:8px}.video-app-container button{background-color:transparent;color:var(--text-main);border:1px solid var(--border-color);padding:6px 16px;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s ease;font-family:inherit}.video-app-container button:hover:not(:disabled){background-color:#ffffff1a;color:#fff}.video-app-container button:disabled{opacity:.4;cursor:not-allowed}.video-app-container button.primary{background-color:var(--primary);border-color:var(--primary);color:#fff}.video-app-container button.primary:hover:not(:disabled){background-color:var(--primary-hover)}.export-progress-wrap{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.export-progress-track{width:120px;height:4px;background-color:var(--border-color);border-radius:2px;overflow:hidden}.export-progress-fill{height:100%;width:0%;background-color:#fff;border-radius:2px;transition:width .2s ease}.export-progress-label{font-size:11px;color:var(--text-muted);min-width:32px;text-align:right}.app-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;background-color:#1c1c1c;border-bottom:1px solid var(--border-color);padding:10px 16px;font-size:12px;color:var(--text-main);animation:notice-slide-in .2s ease}@keyframes notice-slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.app-notice-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0 4px;line-height:1;flex-shrink:0;transition:color .15s ease}.app-notice-close:hover{color:#fff}.init-error{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:8px;padding:40px;text-align:center;color:var(--text-muted);font-size:14px}.init-error-detail{font-size:12px;color:#4b5563}.init-error button{margin-top:12px}.workspace{display:flex;flex:1;min-height:0}.media-panel{width:280px;background-color:var(--bg-panel);border-right:1px solid var(--border-color);display:flex;flex-direction:column}.panel-header{padding:12px 16px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-color)}.panel-actions{padding:12px 16px}.panel-actions button{width:100%}.media-list{flex:1;overflow-y:auto;padding:8px 16px}.media-session-note{font-size:11px;color:var(--text-main);text-align:center;padding:10px 16px;border-top:1px solid var(--border-color);margin-top:auto;line-height:1.4;opacity:.8;background-color:#0003}.empty-state{font-size:13px;color:var(--text-muted);text-align:center;margin-top:24px}.media-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;background-color:#ffffff0d;border-radius:4px;margin-bottom:8px;cursor:pointer;font-size:12px;transition:background-color .15s ease}.media-item:hover{background-color:#ffffff1a}.media-item:active{background-color:#ffffff26}.media-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.media-item-add{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:3px;background-color:#ffffff14;color:#9ca3af;font-size:14px;line-height:1;transition:background-color .15s ease,color .15s ease}.media-item:hover .media-item-add{background-color:#ffffff2e;color:#fff}.canvas-container{flex:1;background-color:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.shotstack-canvas{width:100%;height:100%}.timeline-container{height:250px;background-color:var(--bg-timeline);border-top:1px solid var(--border-color)}.shotstack-timeline{width:100%;height:100%}