:root{--bg-primary: #0a0a0f;--bg-secondary: #151520;--bg-tertiary: #1e1e2e;--accent-primary: #6366f1;--accent-secondary: #8b5cf6;--accent-glow: rgba(99, 102, 241, .3);--text-primary: #e4e4e7;--text-secondary: #a1a1aa;--border-color: rgba(255, 255, 255, .1);--success: #10b981;--error: #ef4444;--warning: #f59e0b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow:hidden}#root{width:100vw;height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-secondary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.fade-in{animation:fadeIn .3s ease-out}.glsl-editor{display:flex;flex-direction:column;height:100%;background:var(--bg-secondary);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border-bottom:1px solid var(--border-color)}.editor-title{font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.editor-actions{display:flex;gap:12px}.btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;box-shadow:0 4px 12px var(--accent-glow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-primary);border-color:var(--accent-primary)}.icon{font-size:16px;line-height:1}.editor-container{flex:1;overflow:hidden}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.save-indicator{margin-left:4px;color:var(--success);animation:fadeIn .3s ease-out}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080;animation:fadeIn .3s ease-out}.modal-title{margin:0 0 12px;font-size:20px;font-weight:600;color:var(--text-primary)}.modal-message{margin:0 0 24px;font-size:14px;color:var(--text-secondary);line-height:1.5}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.modal-actions .btn{min-width:100px}.error-line{background:#ff323226!important;border-left:3px solid #ff3333!important}.error-glyph{background:#f33!important;width:3px!important;margin-left:3px}@media (max-width: 768px){.editor-header{padding:12px 16px}.editor-title{font-size:16px}.btn{padding:8px 16px;font-size:13px}.error-banner{padding:10px 16px;font-size:13px}.modal-content{padding:20px;max-width:90%}.modal-title{font-size:18px}}@media (max-width: 480px){.editor-header{padding:10px 12px}.editor-title{font-size:14px;gap:6px}.editor-actions{gap:8px}.btn{padding:6px 12px;font-size:12px;gap:4px}.icon{font-size:14px}.error-banner{padding:8px 12px;font-size:12px}.modal-content{padding:16px}.modal-title{font-size:16px}.modal-message{font-size:13px}.modal-actions .btn{min-width:80px}}.shader-preview{display:flex;flex-direction:column;height:100%;background:var(--bg-secondary);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border-bottom:1px solid var(--border-color)}.preview-title{font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:var(--bg-tertiary);color:var(--text-primary);font-size:18px;cursor:pointer;transition:all .2s ease;border:1px solid var(--border-color)}.btn-icon:hover{background:var(--bg-primary);border-color:var(--accent-primary);transform:scale(1.05)}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg-primary);position:relative;overflow:hidden;min-height:0}.preview-canvas{width:100%;height:100%;border-radius:8px;box-shadow:0 4px 20px #00000080;background:#000}.error-banner{display:flex;align-items:center;gap:10px;padding:12px 20px;background:#ef44441a;border-left:4px solid var(--error);color:var(--error);font-size:14px;animation:fadeIn .3s ease-out}.error-banner .icon{font-size:1.2rem;margin-right:.75rem}.header-controls{display:flex;gap:8px;align-items:center}.original-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;z-index:10;animation:fadeIn .2s ease}.original-media{max-width:100%;max-height:100%;object-fit:contain}.control-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.control-btn:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.preview-btn{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#ffffff4d}.preview-btn:hover{background:linear-gradient(135deg,#7c8ff0,#8a5ab8)}.remove-btn{background:#ef44444d;border-color:#ef444480;padding:8px 12px}.remove-btn:hover{background:#ef444480;border-color:#ef4444b3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.preview-header{padding:12px 16px}.preview-title{font-size:16px}.btn-icon{width:36px;height:36px;font-size:16px}.canvas-container{padding:12px}.error-banner{padding:10px 16px;font-size:13px}.control-btn{padding:6px 12px;font-size:.85rem}}@media (max-width: 480px){.preview-header{padding:10px 12px}.preview-title{font-size:14px;gap:6px}.header-controls{gap:6px}.btn-icon{width:32px;height:32px;font-size:14px}.canvas-container{padding:8px}.error-banner{padding:8px 12px;font-size:12px}.control-btn{padding:6px 10px;font-size:.8rem}}.media-input{background:var(--bg-secondary);border-radius:12px;padding:20px;box-shadow:0 4px 16px #0003}.media-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.media-title{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;margin:0;color:var(--text-primary)}.btn-clear{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-size:18px}.btn-clear:hover{background:var(--error);color:#fff}.upload-area{display:flex;flex-direction:column;gap:16px}.upload-label{display:block;cursor:pointer}.file-input{display:none}.upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;border:2px dashed var(--border-color);border-radius:8px;background:var(--bg-tertiary);transition:all .3s ease}.upload-label:hover .upload-content{border-color:var(--accent-primary);background:#6366f10d}.upload-icon{font-size:48px;margin-bottom:12px}.upload-text{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.upload-hint{font-size:14px;color:var(--text-secondary)}.divider{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:14px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.quick-select{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.quick-btn:hover{background:var(--bg-primary);border-color:var(--accent-primary);transform:translateY(-2px)}.media-preview{display:flex;flex-direction:column;gap:12px}.preview-img,.preview-video{width:100%;height:200px;object-fit:cover;border-radius:8px;background:var(--bg-primary)}.media-info{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-tertiary);border-radius:8px;font-size:14px}.media-type{padding:4px 12px;background:var(--accent-primary);color:#fff;border-radius:4px;font-weight:500;text-transform:uppercase;font-size:12px}.media-name{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}@media (max-width: 768px){.media-input{padding:16px}.media-title{font-size:14px}.upload-content{padding:32px 16px}.upload-icon{font-size:40px}.upload-text{font-size:14px}.upload-hint{font-size:13px}.preview-img,.preview-video{height:150px}.quick-btn{padding:10px;font-size:13px}}@media (max-width: 480px){.media-input{padding:12px}.media-header{margin-bottom:12px}.media-title{font-size:13px;gap:6px}.btn-clear{width:28px;height:28px;font-size:16px}.upload-area{gap:12px}.upload-content{padding:24px 12px}.upload-icon{font-size:32px;margin-bottom:8px}.upload-text{font-size:13px}.upload-hint{font-size:12px}.divider{font-size:12px;gap:8px}.quick-select{grid-template-columns:1fr;gap:8px}.quick-btn{padding:10px;font-size:12px;gap:6px}.preview-img,.preview-video{height:120px}.media-info{padding:10px;font-size:12px;flex-direction:column;gap:8px;align-items:flex-start}.media-name{max-width:100%}}.app{display:flex;flex-direction:column;height:100vh;background:var(--bg-primary)}.app-header{padding:24px 32px;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-bottom:1px solid var(--border-color);box-shadow:0 4px 20px #0000004d}.header-content{max-width:1600px;margin:0 auto}.app-title{font-size:32px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo{font-size:36px;filter:drop-shadow(0 0 10px var(--accent-glow))}.app-subtitle{margin:0;font-size:16px;color:var(--text-secondary);font-weight:400}.app-main{flex:1;display:flex;flex-direction:row;gap:24px;padding:24px 32px;max-width:1600px;width:100%;margin:0 auto;overflow:hidden}.editor-section{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}.preview-section{flex:1;display:flex;flex-direction:column;gap:24px;min-height:0;min-width:0}.media-wrapper{flex-shrink:0}@media (max-width: 1200px){.app-main{flex-direction:column}.preview-section{flex-direction:row}.media-wrapper{flex:1;min-width:300px}}@media (max-width: 768px){.app-header{padding:12px 16px}.app-title{font-size:20px}.logo{font-size:24px}.app-subtitle{font-size:13px}.app-main{padding:12px 16px;gap:12px}.preview-section{flex-direction:column}.media-wrapper{min-width:unset}}@media (max-width: 480px){.app-header{padding:10px 12px}.app-title{font-size:18px}.logo{font-size:20px}.app-subtitle{font-size:12px}.app-main{padding:8px 12px;gap:8px}}@media (max-width: 768px) and (orientation: portrait){.app-main{flex-direction:column}}