*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{flex-direction:column;width:100vw;height:100vh;display:flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#2a2a2a}::-webkit-scrollbar-thumb{background:#555;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#777}.top-nav{z-index:100;background:#1e1e1e;border-bottom:1px solid #333;flex-shrink:0;align-items:center;gap:8px;height:48px;padding:0 16px;display:flex}.top-nav .logo{color:#fff;white-space:nowrap;align-items:center;gap:8px;margin-right:16px;font-size:15px;font-weight:600;display:flex}.top-nav .logo svg{width:22px;height:22px}.top-nav .nav-btn{color:#ccc;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:5px;padding:6px 10px;font-size:13px;transition:all .15s;display:flex}.top-nav .nav-btn:hover{color:#fff;background:#333}.top-nav .nav-btn:disabled{opacity:.35;cursor:default}.top-nav .nav-btn:disabled:hover{color:#ccc;background:0 0}.top-nav .nav-separator{background:#444;width:1px;height:24px;margin:0 4px}.top-nav .new-btn-wrapper{position:relative}.top-nav .new-dropdown{z-index:200;background:#2a2a2a;border:1px solid #444;border-radius:8px;min-width:160px;margin-top:4px;padding:4px 0;position:absolute;top:100%;left:0;box-shadow:0 8px 24px #0006}.top-nav .new-dropdown button{color:#ddd;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;width:100%;padding:8px 14px;font-size:13px;transition:background .1s;display:flex}.top-nav .new-dropdown button:hover{color:#fff;background:#3a3a3a}.top-nav .new-dropdown button svg{width:16px;height:16px}.main-layout{flex:1;display:flex;overflow:hidden}.left-toolbar{background:#252525;border-right:1px solid #333;flex-direction:column;flex-shrink:0;align-items:center;gap:2px;width:48px;padding:8px 0;display:flex}.left-toolbar .tool-btn{color:#999;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .15s;display:flex}.left-toolbar .tool-btn:hover{color:#fff;background:#333}.left-toolbar .tool-btn.active{color:#4a9eff;background:#3a3a3a}.left-toolbar .tool-btn svg{width:20px;height:20px}.left-toolbar .tool-separator{background:#444;width:28px;height:1px;margin:4px 0}.canvas-container{background:#1a1a1a;flex:1;position:relative;overflow:hidden}.canvas-container canvas{display:block}.right-panel{background:#252525;border-left:1px solid #333;flex-shrink:0;width:260px;padding:16px;overflow-y:auto}.right-panel h3{color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:13px;font-weight:600}.right-panel .prop-row{align-items:center;gap:8px;margin-bottom:10px;display:flex}.right-panel .prop-label{color:#888;min-width:50px;font-size:12px}.right-panel .prop-value{color:#ddd;background:#1e1e1e;border:1px solid #444;border-radius:4px;flex:1;padding:4px 8px;font-size:12px}.right-panel .prop-input{color:#ddd;background:#1e1e1e;border:1px solid #444;border-radius:4px;outline:none;flex:1;padding:4px 8px;font-size:12px}.right-panel .prop-input:focus{border-color:#4a9eff}.right-panel .prop-color{cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;width:32px;height:24px;padding:0}.right-panel .prop-color::-webkit-color-swatch-wrapper{padding:0}.right-panel .prop-color::-webkit-color-swatch{border:none;border-radius:3px}.right-panel .empty-state{text-align:center;color:#666;margin-top:40px;font-size:13px}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#2a2a2a;border:1px solid #444;border-radius:12px;min-width:420px;max-width:500px;padding:24px;box-shadow:0 16px 48px #00000080}.modal h2{color:#fff;margin-bottom:20px;font-size:16px;font-weight:600}.modal .form-group{margin-bottom:14px}.modal .form-group label{color:#999;margin-bottom:4px;font-size:12px;display:block}.modal .form-group input,.modal .form-group select{color:#ddd;background:#1e1e1e;border:1px solid #444;border-radius:6px;outline:none;width:100%;padding:8px 10px;font-size:13px}.modal .form-group input:focus,.modal .form-group select:focus{border-color:#4a9eff}.modal .form-row{gap:12px;display:flex}.modal .form-row .form-group{flex:1}.modal .preset-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;display:grid}.modal .preset-btn{color:#ccc;cursor:pointer;background:#1e1e1e;border:1px solid #444;border-radius:6px;padding:6px 8px;font-size:12px;transition:all .15s}.modal .preset-btn:hover{color:#fff;border-color:#4a9eff}.modal .preset-btn.active{color:#4a9eff;background:#1a2a3a;border-color:#4a9eff}.modal .modal-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.modal .btn-cancel{color:#ccc;cursor:pointer;background:#333;border:none;border-radius:6px;padding:8px 16px;font-size:13px}.modal .btn-cancel:hover{background:#444}.modal .btn-primary{color:#fff;cursor:pointer;background:#4a9eff;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600}.modal .btn-primary:hover{background:#3a8eef}.video-timeline{z-index:50;background:#1e1e1e;border-top:1px solid #333;flex-direction:column;height:80px;padding:8px 16px;display:flex;position:absolute;bottom:0;left:48px;right:260px}.video-timeline .timeline-controls{align-items:center;gap:12px;margin-bottom:6px;display:flex}.video-timeline .play-btn{color:#fff;cursor:pointer;background:#4a9eff;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.video-timeline .play-btn:hover{background:#3a8eef}.video-timeline .play-btn svg{width:16px;height:16px}.video-timeline .time-display{color:#999;font-variant-numeric:tabular-nums;font-size:12px}.video-timeline .timeline-bar{cursor:pointer;background:#333;border-radius:3px;flex:1;height:6px;position:relative}.video-timeline .timeline-progress{background:#4a9eff;border-radius:3px;height:100%;transition:width 50ms linear}.video-timeline .frame-info{color:#666;text-align:right;font-size:11px}.frame-wrapper{cursor:move;-webkit-user-select:none;user-select:none;position:absolute}.frame-wrapper .frame-inner{border:2px solid #0000;border-radius:2px;width:100%;height:100%;position:relative;overflow:hidden}.frame-wrapper.selected .frame-inner{border-color:#4a9eff}.frame-wrapper .frame-label{color:#999;white-space:nowrap;pointer-events:none;font-size:11px;position:absolute;top:-22px;left:0}.frame-wrapper.selected .frame-label{color:#4a9eff}.frame-wrapper .frame-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.frame-wrapper .frame-content img,.frame-wrapper .frame-content video{object-fit:contain;pointer-events:none;max-width:100%;max-height:100%}.frame-wrapper .upload-hint{color:#666;flex-direction:column;align-items:center;gap:8px;font-size:13px;display:flex}.frame-wrapper .upload-hint svg{opacity:.5;width:40px;height:40px}.frame-wrapper .delete-btn{color:#f55;cursor:pointer;z-index:10;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;display:none;position:absolute;top:4px;right:4px}.frame-wrapper:hover .delete-btn,.frame-wrapper.selected .delete-btn{display:flex}.selection-box{pointer-events:none;z-index:50;background:#4a9eff14;border:1px solid #4a9eff;position:absolute}.frame-wrapper.drag-over .frame-inner{border-color:#4a9eff;box-shadow:inset 0 0 20px #4a9eff33}