:root{--cm-bg: #050509;--cm-bg-elevated: #111119;--cm-sidebar-bg: #080810;--cm-border-subtle: #262637;--cm-text-primary: #f7f7ff;--cm-text-muted: #9b9bb5;--cm-primary: #6e5dff;--cm-primary-soft: rgba(110, 93, 255, .15);--cm-danger: #ff4d6a;--cm-radius-lg: 18px;--cm-radius-pill: 999px;--cm-shadow-soft: 0 18px 40px rgba(0, 0, 0, .6);--cm-transition-fast: .12s ease-out;--cm-transition-med: .16s ease-out}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,sans-serif;background:radial-gradient(circle at top,#1b1630 0,#050509 55%);color:var(--cm-text-primary)}button{font:inherit}a{color:inherit;text-decoration:none}.cm-shell{display:flex;height:100vh;color:var(--cm-text-primary);background:radial-gradient(circle at top,#1b1630 0,#050509 55%)}.cm-sidebar{width:280px;background:var(--cm-sidebar-bg);border-right:1px solid var(--cm-border-subtle);display:flex;flex-direction:column;padding:16px 14px}.cm-sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.cm-logo{display:flex;align-items:center;gap:8px}.cm-logo-icon{width:30px;height:30px;border-radius:12px;background:radial-gradient(circle at 30% 30%,#fff,#6e5dff);box-shadow:var(--cm-shadow-soft)}.cm-logo-text{font-weight:600;letter-spacing:.02em}.cm-total-clips-pill{font-size:12px;padding:6px 10px;border-radius:var(--cm-radius-pill);border:1px solid var(--cm-border-subtle);color:var(--cm-text-muted);display:flex;gap:4px;align-items:baseline}.cm-total-clips-pill strong{color:var(--cm-text-primary)}.cm-sidebar-inner{flex:1;display:flex;flex-direction:column;gap:12px;overflow:hidden}.cm-drag-hint{font-size:12px;color:var(--cm-text-muted);padding:8px 0 4px;text-align:center}.cm-sidebar-footer{margin-top:12px;display:flex;justify-content:center}.cm-danger-link{border:none;background:transparent;color:var(--cm-danger);font-size:13px;cursor:pointer;opacity:.9}.cm-danger-link:disabled{opacity:.3;cursor:default}.cm-main{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.cm-empty-state,.cm-ready-state{max-width:540px;text-align:center;padding:40px 48px;background:radial-gradient(circle at top,#181328,#08060f);border-radius:24px;box-shadow:var(--cm-shadow-soft);border:1px solid rgba(255,255,255,.04)}.cm-empty-state h1,.cm-ready-state h1{margin:12px 0 6px}.cm-empty-state p,.cm-ready-state p{margin:0 0 24px;color:var(--cm-text-muted);font-size:14px}.cm-play-icon{width:72px;height:72px;margin:0 auto;border-radius:22px;background:radial-gradient(circle at 30% 20%,#fff,#6e5dff);display:flex;align-items:center;justify-content:center;color:#120f26;font-size:32px;box-shadow:var(--cm-shadow-soft)}.cm-primary-btn{border-radius:var(--cm-radius-pill);border:none;background:var(--cm-primary);padding:14px 30px;font-weight:600;cursor:pointer;box-shadow:0 14px 40px #6e5dff99;position:relative;overflow:hidden;transition:transform var(--cm-transition-fast),box-shadow var(--cm-transition-fast),background var(--cm-transition-fast)}.cm-primary-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 0 0,rgba(255,255,255,.25),transparent 55%);opacity:0;transition:opacity var(--cm-transition-med)}.cm-primary-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 40px #6e5dffe6}.cm-primary-btn:hover:before{opacity:1}.cm-primary-btn:disabled{opacity:.4;box-shadow:none;cursor:default}.cm-empty-btn{width:100%;margin-top:8px}.cm-controls-row{display:flex;gap:12px;justify-content:center;margin-top:10px}.cm-upload-zone{padding:10px 4px 4px}.cm-upload-btn{width:100%;border-radius:var(--cm-radius-pill);border:1px dashed rgba(255,255,255,.12);padding:10px 14px;background:#ffffff05;color:var(--cm-text-muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--cm-transition-med),border-color var(--cm-transition-med),color var(--cm-transition-med),transform 80ms ease-out}.cm-upload-btn:hover{background:#6e5dff14;border-color:#6e5dffa6;color:var(--cm-text-primary);transform:translateY(-1px)}.cm-clip-list{flex:1;overflow-y:auto;padding:6px 2px 4px}.cm-clip-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:linear-gradient(135deg,#ffffff05,#fff0);border:1px solid rgba(255,255,255,.03);margin-bottom:6px;cursor:grab;transition:transform var(--cm-transition-fast),box-shadow var(--cm-transition-fast),background var(--cm-transition-fast),border-color var(--cm-transition-fast)}.cm-clip-item:active{cursor:grabbing}.cm-clip-item.dragging{opacity:.5}.cm-clip-item.drag-over{border-color:var(--cm-primary);background:#6e5dff1f;transform:translateY(-2px)}.cm-clip-item:hover{transform:translateY(-1px);background:radial-gradient(circle at top left,#181328 0,#07060f 55%);box-shadow:0 10px 26px #0009;border-color:#ffffff0f}.cm-clip-drag-handle{color:var(--cm-text-muted);font-size:18px;line-height:1;cursor:grab;-webkit-user-select:none;user-select:none;padding:2px 4px}.cm-clip-drag-handle:active{cursor:grabbing}.cm-clip-thumb{width:60px;height:40px;border-radius:12px;overflow:hidden;background:#141321;flex-shrink:0}.cm-clip-thumb video{width:100%;height:100%;object-fit:cover}.cm-clip-body{flex:1;min-width:0}.cm-clip-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cm-clip-meta{font-size:11px;color:var(--cm-text-muted)}.cm-clip-remove{border:none;background:transparent;color:var(--cm-text-muted);font-size:16px;cursor:pointer;padding:4px;border-radius:999px;transition:background var(--cm-transition-fast),color var(--cm-transition-fast),transform 80ms ease-out}.cm-clip-remove:hover{background:#ff4d6a1f;color:var(--cm-danger);transform:scale(1.05)}.cm-clip-empty{font-size:13px;color:var(--cm-text-muted);text-align:center;padding:40px 20px;border-radius:12px;border:2px dashed rgba(255,255,255,.08);background:#6e5dff08;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px}.cm-clip-empty:before{content:"📹";font-size:32px;margin-bottom:8px;opacity:.4;display:block}.cm-format-select{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}.cm-format-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cm-text-muted)}.cm-format-select select{border-radius:var(--cm-radius-pill);border:1px solid rgba(255,255,255,.16);background:#05050ce6;color:var(--cm-text-primary);padding:8px 14px;font-size:13px}.cm-merge-btn{min-width:200px}.cm-progress{max-width:520px;text-align:center;padding:40px 48px;background:radial-gradient(circle at top,#181328,#08060f);border-radius:24px;box-shadow:var(--cm-shadow-soft);border:1px solid rgba(255,255,255,.04)}.cm-progress-circle{--pct: 0;width:140px;height:140px;border-radius:50%;margin:0 auto 18px;background:radial-gradient(circle at center,#050509 0,#050509 62%,transparent 63%),conic-gradient(from -90deg,var(--cm-primary) calc(var(--pct) * 1%),rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center}.cm-progress-circle span{font-size:26px;font-weight:600}.cm-progress h2{margin-top:8px;margin-bottom:4px}.cm-progress p{margin:0 0 20px;color:var(--cm-text-muted);font-size:14px}.cm-progress-bar{height:4px;border-radius:999px;background:#ffffff0f;overflow:hidden;margin-bottom:8px}.cm-progress-bar>div{height:100%;background:linear-gradient(90deg,var(--cm-primary),#9d7bff);width:0;transition:width var(--cm-transition-fast)}.cm-progress small{color:var(--cm-text-muted);font-size:11px}.cm-result{max-width:880px;width:100%;padding:32px 40px 30px;background:radial-gradient(circle at top,#181328,#050509);border-radius:26px;box-shadow:var(--cm-shadow-soft);border:1px solid rgba(255,255,255,.05)}.cm-result-video-frame{border-radius:18px;overflow:hidden;background:radial-gradient(circle at 10% 0,#2a233d,#020109);position:relative}.cm-result-video{width:100%;display:block}.cm-result-placeholder{width:100%;padding-top:56.25%;background:radial-gradient(circle at center,#272040,#050509)}.cm-result-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}.cm-download-btn{min-width:180px}.cm-ghost-btn{border-radius:var(--cm-radius-pill);border:1px solid rgba(255,255,255,.26);background:#05050ccc;padding:12px 22px;color:var(--cm-text-muted);font-size:13px;cursor:pointer;transition:background var(--cm-transition-fast),border-color var(--cm-transition-fast),color var(--cm-transition-fast)}.cm-ghost-btn:hover{background:#ffffff0f;border-color:#ffffffb3;color:var(--cm-text-primary)}
