:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.4;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-root: #09090d;--bg-panel: #0f0f14;--bg-surface: #16161d;--bg-elevated: #1c1c25;--border: #252530;--border-subtle: #1e1e2a;--accent: #5193e0;--accent-hover: #6aa3f0;--accent-muted: #2d5a8e;--accent-bg: rgba(81, 147, 224, .08);--accent-bg-hover: rgba(81, 147, 224, .14);--text-primary: #f2f4f7;--text-secondary: #b0b5c2;--text-muted: #6b7080;--danger: #d4505c;--danger-bg: rgba(212, 80, 92, .1);--success: #40a878;--success-bg: rgba(64, 168, 120, .1);--warning: #d0a040;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--transition-fast: .12s ease;--transition-normal: .2s ease;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100vh;overflow:hidden;background-color:var(--bg-root);color:var(--text-primary);font-size:13px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}button{font-family:inherit;cursor:pointer;transition:all var(--transition-fast)}button:active:not(:disabled){transform:scale(.97)}input,select{font-family:inherit;transition:border-color var(--transition-fast)}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;background:var(--border);border-radius:3px;outline:none;transition:background var(--transition-fast)}input[type=range]:hover{background:var(--border-subtle)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-panel);transition:all var(--transition-fast);box-shadow:0 0 #5193e000}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-hover);box-shadow:0 0 0 3px #5193e026}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-panel)}select{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none}select:focus{border-color:var(--accent-muted)}select option{background:var(--bg-elevated);color:var(--text-primary)}.app-layout{display:grid;grid-template-columns:270px 1fr 290px;grid-template-rows:1fr 5px 40%;width:100%;flex:1;min-height:0;gap:0;background:var(--border)}.left-column{grid-row:1 / -1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel);border-right:1px solid var(--border)}.panel-toggle-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg-panel);flex-shrink:0}.panel-toggle-btn{flex:1;padding:8px 0;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .15s}.panel-toggle-btn:hover{color:var(--text-secondary)}.panel-toggle-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-bg)}.center-column{grid-row:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-root)}.right-column{grid-row:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel);border-left:1px solid var(--border)}.timeline-divider{grid-column:2 / -1;grid-row:2;cursor:row-resize;background:var(--border);z-index:2}.timeline-row{grid-column:2 / -1;grid-row:3;overflow:hidden;min-height:0;background:var(--bg-panel);border-top:1px solid var(--border)}.panel{background:var(--bg-panel);overflow:auto;position:relative}.panel-header{padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);border-bottom:1px solid var(--border);background:var(--bg-panel);position:sticky;top:0;z-index:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.effect-library,.source-pattern{flex:1;min-height:0}.preview-panel{flex:1}.timeline-panel{height:100%}.properties-panel{flex:1;min-height:0}.effect-column::-webkit-scrollbar{width:0;height:0}.effect-column:hover::-webkit-scrollbar{width:5px;height:0}