:root{--bg-primary:#000;--bg-secondary:#0a0a0a;--bg-tertiary:#141414;--bg-elevated:rgba(28,28,30,.85);--bg-glass:hsla(0,0%,100%,.03);--bg-glass-hover:hsla(0,0%,100%,.06);--surface:hsla(0,0%,100%,.04);--surface-hover:hsla(0,0%,100%,.08);--surface-active:hsla(0,0%,100%,.12);--border:hsla(0,0%,100%,.08);--border-light:hsla(0,0%,100%,.12);--border-focus:rgba(59,130,246,.5);--text-primary:hsla(0,0%,100%,.95);--text-secondary:hsla(0,0%,100%,.7);--text-tertiary:hsla(0,0%,100%,.45);--accent:#3b82f6;--accent-hover:#60a5fa;--accent-glow:rgba(59,130,246,.25);--success:#22c55e;--success-bg:rgba(34,197,94,.12);--warning:#f59e0b;--danger:#ef4444;--danger-bg:rgba(239,68,68,.12);--gradient-accent:linear-gradient(135deg,#3b82f6,#8b5cf6);--gradient-surface:linear-gradient(180deg,hsla(0,0%,100%,.06),hsla(0,0%,100%,.02));--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 12px rgba(0,0,0,.4);--shadow-lg:0 8px 32px rgba(0,0,0,.5);--shadow-xl:0 24px 64px rgba(0,0,0,.6);--shadow-glow:0 0 40px var(--accent-glow);--sidebar-width:240px;--header-height:64px;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);--transition-spring:400ms cubic-bezier(0.34,1.56,0.64,1)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;background:var(--bg-primary);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}::selection{background:var(--accent);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.15);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.25)}.app{height:100dvh;display:flex;background:var(--bg-primary)}.sidebar{width:var(--sidebar-width);height:100%;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border);flex-shrink:0}.sidebarHeader{padding:24px 20px;border-bottom:1px solid var(--border)}.logo{gap:12px}.logo,.logoIcon{display:flex;align-items:center}.logoIcon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--gradient-accent);justify-content:center;box-shadow:var(--shadow-glow)}.logoIcon svg{width:20px;height:20px;color:#fff}.logoText{font-size:18px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,hsla(0,0%,100%,.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebarNav{flex:1 1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}.navItem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;background:transparent;width:100%;text-align:left}.navItem:hover{background:var(--surface-hover);color:var(--text-primary)}.navItem.active{background:var(--surface-active);color:var(--text-primary);border-color:var(--border-light)}.navItem svg{width:20px;height:20px;opacity:.7}.navItem.active svg{opacity:1;color:var(--accent)}.sidebarFooter{padding:16px;border-top:1px solid var(--border)}.statusPill{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-lg);background:var(--surface);font-size:12px;color:var(--text-tertiary)}.statusDot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}.mainContent{flex:1 1;display:flex;flex-direction:column;min-width:0;background:var(--bg-primary)}.contentHeader{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0}.contentTitle{font-size:22px;font-weight:600;letter-spacing:-.02em}.headerActions{display:flex;align-items:center;gap:12px}.contentBody{flex:1 1;overflow:auto;padding:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-lg);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn svg{width:18px;height:18px}.btnPrimary{background:var(--gradient-accent);color:#fff;border-color:hsla(0,0%,100%,.1);box-shadow:var(--shadow-glow),var(--shadow-md)}.btnPrimary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-glow),var(--shadow-lg)}.btnPrimary:active:not(:disabled){transform:translateY(0)}.btnSecondary{background:var(--surface);color:var(--text-primary);border-color:var(--border-light)}.btnSecondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-light)}.btnGhost{background:transparent;color:var(--text-secondary);border-color:transparent}.btnGhost:hover:not(:disabled){background:var(--surface);color:var(--text-primary)}.btnIcon{width:40px;height:40px;padding:0;border-radius:var(--radius-md)}.btnSm{padding:8px 14px;font-size:13px}.btnSm svg{width:16px;height:16px}.libraryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:24px;gap:24px}.videoCard{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-tertiary);border:1px solid var(--border);transition:all var(--transition-base);cursor:pointer}.videoCard:hover{border-color:var(--border-light);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.videoCard:hover .videoCardOverlay{opacity:1}.videoCardThumbnail{position:relative;aspect-ratio:16/9;background:var(--bg-primary)}.videoCardThumbnail video{width:100%;height:100%;object-fit:cover}.videoCardOverlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity var(--transition-fast)}.playButton,.videoCardOverlay{display:flex;align-items:center;justify-content:center}.playButton{width:56px;height:56px;border-radius:50%;background:hsla(0,0%,100%,.95);transition:transform var(--transition-spring)}.playButton svg{width:24px;height:24px;color:var(--bg-primary);margin-left:3px}.videoCard:hover .playButton{transform:scale(1.1)}.videoCardBadges{position:absolute;top:12px;left:12px;display:flex;gap:6px}.badge{padding:5px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.badgeVoiceover{background:rgba(59,130,246,.8);color:#fff}.badgeCaptions{background:rgba(139,92,246,.8);color:#fff}.badgeExtended{background:rgba(34,197,94,.8);color:#fff}.videoCardDuration{position:absolute;bottom:12px;right:12px;padding:4px 8px;border-radius:var(--radius-sm);background:rgba(0,0,0,.75);font-size:12px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.videoCardInfo{padding:16px}.videoCardTitle{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.videoCardMeta{font-size:12px;color:var(--text-tertiary)}.videoCardActions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}.videoCardActions .btn{flex:1 1;padding:8px 12px;font-size:12px}.emptyState{flex-direction:column;text-align:center;padding:80px 40px;height:100%}.emptyIcon,.emptyState{display:flex;align-items:center;justify-content:center}.emptyIcon{width:80px;height:80px;border-radius:var(--radius-2xl);background:var(--gradient-surface);border:1px solid var(--border);margin-bottom:24px}.emptyIcon svg{width:36px;height:36px;color:var(--text-tertiary)}.emptyTitle{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.emptyDescription{font-size:14px;color:var(--text-tertiary);max-width:360px;line-height:1.6;margin-bottom:24px}.createContainer{max-width:800px;margin:0 auto}.createCard{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}.createSection{padding:24px}.createSection+.createSection{border-top:1px solid var(--border)}.sectionHeader{gap:12px;margin-bottom:20px}.sectionHeader,.sectionIcon{display:flex;align-items:center}.sectionIcon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface);justify-content:center}.sectionIcon svg{width:20px;height:20px;color:var(--accent)}.sectionTitle{font-size:16px;font-weight:600}.sectionDescription{font-size:13px;color:var(--text-tertiary);margin-top:2px}.formGrid{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}.formGrid.single{grid-template-columns:1fr}@media (max-width:640px){.formGrid{grid-template-columns:1fr}}.formField{display:flex;flex-direction:column;gap:8px}.formLabel{font-size:13px;font-weight:500;color:var(--text-secondary)}.input,.select,.textarea{width:100%;padding:12px 16px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;outline:none;transition:all var(--transition-fast)}.input::placeholder,.textarea::placeholder{color:var(--text-tertiary)}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.textarea{resize:vertical;min-height:100px;line-height:1.5}.select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}.uploadZone{border:2px dashed var(--border-light);border-radius:var(--radius-lg);padding:32px;text-align:center;transition:all var(--transition-fast);cursor:pointer}.uploadZone:hover{border-color:var(--accent);background:var(--accent-glow)}.uploadIcon{width:48px;height:48px;margin:0 auto 16px;border-radius:var(--radius-lg);background:var(--surface);display:flex;align-items:center;justify-content:center}.uploadIcon svg{width:24px;height:24px;color:var(--text-secondary)}.uploadText{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.uploadHint{font-size:12px;color:var(--text-tertiary)}.imagePreview{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}.imagePreview img{width:100%;max-height:320px;object-fit:contain;background:var(--bg-tertiary)}.imagePreviewActions{position:absolute;top:12px;right:12px;display:flex;gap:8px}.checkbox{display:flex;align-items:center;gap:10px;cursor:pointer}.checkbox input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.checkbox span{font-size:13px;color:var(--text-secondary)}.inlineRow{display:flex;align-items:center;gap:12px}.inlineRow .input{flex:1 1}.progressBar{height:4px;background:var(--surface);border-radius:var(--radius-full);overflow:hidden}.progressFill{height:100%;background:var(--gradient-accent);transition:width var(--transition-base)}.statusMessage{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-lg);font-size:13px;font-weight:500}.statusMessage.info{background:var(--surface);color:var(--text-secondary)}.statusMessage.success{background:var(--success-bg);color:var(--success)}.statusMessage.error{background:var(--danger-bg);color:var(--danger)}.statusMessage svg{width:18px;height:18px;flex-shrink:0}.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:40px}.modal{width:100%;max-width:900px;max-height:calc(100vh - 80px);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)}.modalSmall{max-width:520px}.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}.modalTitle{font-size:18px;font-weight:600}.modalBody{flex:1 1;overflow:auto;padding:24px}.modalFooter{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid var(--border);background:var(--surface)}.playerContainer{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;aspect-ratio:16/9}.playerContainer video{width:100%;height:100%;object-fit:contain}.captionOverlay{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);max-width:80%;padding:10px 20px;background:rgba(0,0,0,.8);border-radius:var(--radius-md);font-size:16px;font-weight:500;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.playerControls{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.8));display:flex;align-items:center;gap:12px}.playerDetails{margin-top:20px}.playerTitle{font-size:16px;font-weight:600;margin-bottom:8px}.playerMeta{font-size:13px;color:var(--text-tertiary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeIn{animation:fadeIn var(--transition-base) ease-out}.animate-slideUp{animation:slideUp var(--transition-slow) ease-out}.animate-pulse{animation:pulse 2s infinite}.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hover) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:768px){.sidebar{display:none}.contentBody{padding:20px}.libraryGrid{grid-template-columns:1fr}.modalOverlay{padding:16px}}.flex{display:flex}.flexCol{flex-direction:column}.itemsCenter{align-items:center}.justifyCenter{justify-content:center}.justifyBetween{justify-content:space-between}.gap2{gap:8px}.gap3{gap:12px}.gap4{gap:16px}.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mb3{margin-bottom:12px}.textCenter{text-align:center}.textSecondary{color:var(--text-secondary)}.textTertiary{color:var(--text-tertiary)}.textSm{font-size:13px}.fontMedium{font-weight:500}