*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background-color:#fff;display:grid}a{text-decoration:none}.container{margin:0 auto;padding:0 20px}.hero{padding:80px 0;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.hero-content{display:grid;place-items:center;text-align:center;gap:28px}.hero-title{font-size:56px;font-weight:800;line-height:1.1;color:#1f2937}.highlight{color:#ef4444;display:block}.hero-subtitle{max-width:600px;font-size:20px;color:#6b7280;margin-bottom:18px;line-height:1.6}.primary-button{background:#ef4444;color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:48px}.primary-button:hover{background:#dc2626;transform:translateY(-2px)}.primary-button:disabled{opacity:.4;cursor:not-allowed;transform:none;background:#9ca3af}.primary-button.large{padding:20px 40px;font-size:18px}.secondary-button{background:transparent;color:#374151;border:2px solid #d1d5db;padding:14px 32px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.secondary-button:hover{border-color:#9ca3af;background:#f9fafb}.hero-visual{display:flex;justify-content:center;margin-top:48px}.recording-preview{background:#1f2937;border-radius:16px;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;width:100%;max-width:500px}.preview-header-global{background:#374151;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.preview-controls{display:flex;gap:8px}.control-dot{width:12px;height:12px;border-radius:50%}.control-dot.red{background:#ef4444}.control-dot.yellow{background:#f59e0b}.control-dot.green{background:#10b981}.recording-indicator{color:#ef4444;font-size:14px;font-weight:600;animation:pulse 2s infinite}.preview-content-global{padding:24px;height:300px;display:flex;align-items:center;justify-content:center}.mock-screen{background:#f3f4f6;border-radius:8px;width:100%;height:100%;padding:16px}.mock-window{background:#fff;border-radius:6px;height:100%;box-shadow:0 4px 6px -1px #0000001a}.mock-titlebar{background:#e5e7eb;height:32px;border-radius:6px 6px 0 0}.mock-content{padding:16px;height:calc(100% - 32px);background:linear-gradient(45deg,#f9fafb 25%,transparent 25%),linear-gradient(-45deg,#f9fafb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f9fafb 75%),linear-gradient(-45deg,transparent 75%,#f9fafb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.features{padding:100px 0}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-size:42px;font-weight:700;margin-bottom:16px;color:#1f2937}.section-header p{font-size:18px;color:#6b7280;max-width:600px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px}.feature-card{background:#fff;padding:32px;border-radius:16px;border:1px solid #e5e7eb;transition:all .3s}.feature-card:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a;border-color:#d1d5db}.feature-icon{font-size:48px;margin-bottom:20px}.feature-card h3{font-size:20px;font-weight:600;margin-bottom:12px;color:#1f2937}.feature-card p{color:#6b7280;line-height:1.6}.how-it-works{padding:100px 0;background:#f8fafc}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;margin-top:60px}.step{display:flex;align-items:flex-start;gap:20px}.step-number{background:#ef4444;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}.step-content h3{font-size:20px;font-weight:600;margin-bottom:8px;color:#1f2937}.step-content p{color:#6b7280;line-height:1.6}.cta-section{padding:100px 0;background:linear-gradient(135deg,#1f2937,#374151);color:#fff;text-align:center}.cta-content h2{font-size:42px;font-weight:700;margin-bottom:16px}.cta-content p{font-size:18px;opacity:.9;margin-bottom:40px}.cta-actions{display:flex;flex-direction:column;align-items:center;gap:16px}.cta-note{font-size:14px;opacity:.7;margin:0}.testimonials{padding:100px 0}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px;margin-top:60px}.testimonial{background:#fff;padding:32px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 6px -1px #0000001a}.testimonial-content{margin-bottom:20px}.testimonial-content p{font-size:16px;line-height:1.6;color:#374151;font-style:italic}.testimonial-author strong{color:#1f2937;font-weight:600}.testimonial-author span{color:#6b7280;font-size:14px;display:block;margin-top:4px}@media (max-width: 768px){.hero-title{font-size:42px}.nav-links{display:none}.features-grid,.steps,.testimonials-grid{grid-template-columns:1fr}.footer-content{grid-template-columns:1fr;gap:32px}.hero-actions{flex-direction:column;align-items:center}.hero-actions button{width:100%;max-width:300px}}@media (max-width: 480px){.container{padding:0 16px}.hero{padding:60px 0}.hero-title{font-size:36px}.section-header h2,.cta-content h2{font-size:32px}}.loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;gap:20px}.loading-indicator p{font-size:18px;color:#6b7280}.loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner.small{width:16px;height:16px;border-width:2px}.record-page{min-height:100vh;background:#f8fafc}.record-main{padding:60px 0;min-height:calc(100vh - 70px);display:flex;align-items:center}.record-content{max-width:900px;margin:0 auto;text-align:center}.record-title{font-size:48px;font-weight:700;color:#1f2937;margin-bottom:16px}.record-subtitle{font-size:18px;color:#6b7280;margin-bottom:40px}.start-button{margin:0 auto 40px;display:flex;align-items:center;justify-content:center;gap:8px;min-width:240px}.start-button:disabled{opacity:.7;cursor:not-allowed}.record-options{background:#fff;border-radius:16px;padding:32px;margin-bottom:40px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb;text-align:left}.option-group h3{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:20px}.option-list{display:flex;flex-wrap:wrap;gap:20px}.option-item{display:flex;align-items:center;gap:8px;cursor:pointer;padding:12px 20px;border-radius:8px;background:#f3f4f6;transition:all .2s}.option-item:hover{background:#e5e7eb}.option-item input{width:18px;height:18px}.option-item span{font-size:16px;color:#374151;font-weight:500}.webcam-options{margin-top:32px;padding-top:32px;border-top:1px solid #e5e7eb}.webcam-options h3{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:20px}.webcam-controls{display:flex;gap:24px;margin-bottom:24px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:14px;font-weight:500;color:#374151}.control-group select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:14px;color:#374151}.webcam-preview{margin-top:24px}.webcam-preview h4{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:12px}.preview-container{position:relative;display:inline-block;border-radius:12px;overflow:hidden;background:#000}.webcam-video{width:240px;height:180px;object-fit:cover}.webcam-video.circular{border-radius:50%;width:180px;height:180px}.preview-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);padding:12px;display:flex;justify-content:space-between;align-items:end}.webcam-video.circular+.preview-overlay{border-radius:0 0 50% 50%}.position-indicator,.size-indicator{font-size:12px;color:#fff;font-weight:500}.record-tips{background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;padding:24px;text-align:left;margin-top:36px}.record-tips h3{font-size:16px;font-weight:600;color:#0c4a6e;margin-bottom:16px}.record-tips ul{list-style:none;display:flex;flex-direction:column;gap:8px}.record-tips li{font-size:14px;color:#0369a1;position:relative;padding-left:16px}.record-tips li:before{content:"•";position:absolute;left:0;color:#0284c7;font-weight:700}.error-message{background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:16px;margin-bottom:24px}.error-message p{color:#b91c1c;font-size:16px}.recording-in-progress{background:#fff;border-radius:16px;padding:40px;box-shadow:0 10px 25px -5px #0000001a;border:1px solid #e5e7eb}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}.indicator-dot{width:24px;height:24px;border-radius:50%;background:#ef4444;animation:pulse 2s infinite}.indicator-dot.paused{animation:none;background:#f59e0b}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.indicator-text{font-size:24px;font-weight:700;color:#ef4444}.indicator-text.paused{color:#f59e0b}.indicator-time{font-size:32px;font-weight:700;color:#1f2937;font-family:monospace}.recording-info{margin-bottom:24px}.webcam-status{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;color:#0369a1;font-size:14px;font-weight:500}.webcam-icon{font-size:16px}.recording-controls{display:flex;justify-content:center;gap:24px;margin-bottom:40px}.control-button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border-radius:12px;border:none;background:#f3f4f6;cursor:pointer;transition:all .2s;min-width:120px}.control-button:hover{background:#e5e7eb}.control-button svg{width:32px;height:32px}.control-button span{font-size:16px;font-weight:500}.control-button.pause{color:#4b5563}.control-button.resume{color:#047857}.control-button.stop{color:#b91c1c}.recording-note{background:#f3f4f6;border-radius:8px;padding:16px}.recording-note p{color:#4b5563;font-size:16px}@media (max-width: 768px){.record-main{padding:40px 0}.record-title{font-size:36px}.record-options{padding:24px}@keyframes spin{to{transform:rotate(360deg)}}.option-list{flex-direction:column;align-items:stretch;gap:12px}.webcam-controls{flex-direction:column;gap:16px}.recording-in-progress{padding:24px}.recording-controls{flex-direction:column;gap:16px}.control-button{width:100%}}@media (max-width: 480px){.record-main{padding:20px 0}.record-title{font-size:28px}.record-subtitle{font-size:16px}.recording-indicator{flex-direction:column;gap:8px}.webcam-video{width:200px;height:150px}.webcam-video.circular{width:150px;height:150px}}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.preview-page{min-height:100vh;background:#f8fafc}.preview-main{padding:40px 0 80px}.preview-header{margin-bottom:60px}.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}.breadcrumb a{color:#6b7280;text-decoration:none;transition:color .2s}.breadcrumb a:hover{color:#374151}.breadcrumb-separator{color:#9ca3af}.breadcrumb-current{color:#374151;font-weight:500}.preview-title{font-size:48px;font-weight:700;color:#1f2937}.preview-subtitle{font-size:18px;color:#6b7280;margin:0 auto}.preview-content{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}.video-section{background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.video-container{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16 / 9;margin-bottom:50px}.preview-video{width:100%;height:100%;object-fit:cover}.details-section{display:flex;flex-direction:column;gap:24px}.recording-details{background:#fff;border-radius:16px;padding:32px 16px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.recording-details h2{font-size:24px;font-weight:700;color:#1f2937;margin-bottom:24px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #f3f4f6}.detail-item:last-child{border-bottom:none}.detail-item label{font-size:16px;font-weight:500;color:#374151}.detail-label{font-size:16px;font-weight:500;color:#6b7280}.detail-value{font-size:16px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:8px}.converted-badge{background:#dcfce7;color:#166534;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.filename-input-group{display:flex;align-items:center;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;transition:border-color .2s;max-width:300px}.filename-input-group:focus-within{border-color:#3b82f6}.filename-input{flex:1;padding:12px 16px;border:none;background:transparent;font-size:16px;color:#1f2937;outline:none}.filename-input:disabled{opacity:.6;cursor:not-allowed}.filename-input::placeholder{color:#9ca3af}.file-extension{padding:12px 16px;background:#e5e7eb;color:#6b7280;font-size:16px;font-weight:500}.recording-type{display:flex;align-items:center;gap:6px}.type-icon{font-size:14px}.format-section{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.format-section h3{font-size:20px;font-weight:700;color:#1f2937;margin-bottom:20px}.format-options{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.format-option{display:flex;align-items:center;justify-content:space-between;padding:16px;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .2s}.format-option:hover:not(.disabled){border-color:#d1d5db;background:#f9fafb}.format-option.selected{border-color:#ef4444;background:#fef2f2}.format-option.disabled{opacity:.5;cursor:not-allowed}.format-info{display:flex;align-items:center;gap:12px}.format-icon{font-size:20px}.format-details{display:flex;flex-direction:column;gap:2px}.format-name{font-weight:600;color:#1f2937;font-size:16px}.format-description{font-size:14px;color:#6b7280}.format-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.format-size{font-weight:600;color:#374151;font-size:14px}.format-converted{background:#dcfce7;color:#166534;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.format-original{background:#f0f9ff;color:#0369a1;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.conversion-section{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.conversion-section h3{font-size:20px;font-weight:700;color:#1f2937;margin-bottom:20px}.ffmpeg-status{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;margin-bottom:20px}.ffmpeg-status p{color:#0369a1;font-size:14px;margin:0}.error-message{background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:16px;margin-bottom:20px}.error-message p{color:#b91c1c;font-size:14px;margin:0}.conversion-status{display:flex;align-items:center;gap:16px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;padding:24px;margin-bottom:20px;animation:pulse-border 2s ease-in-out infinite}@keyframes pulse-border{0%,to{border-color:#bae6fd}50%{border-color:#7dd3fc}}.conversion-text{display:flex;flex-direction:column;gap:4px}.conversion-title{font-weight:600;color:#0284c7;font-size:16px}.conversion-subtitle{font-size:14px;color:#0369a1}.conversion-section.converting{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convert-button.converting{background:#6b7280;position:relative;overflow:hidden}.convert-button.converting:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);animation:button-pulse 2s ease-in-out infinite}@keyframes button-pulse{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.action-buttons{display:flex;gap:12px;margin-bottom:20px}.convert-button{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;background:#3b82f6;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.convert-button:hover:not(:disabled){background:#2563eb;transform:translateY(-2px)}.convert-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.download-button{flex:1;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;background:#ef4444;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.download-button:hover:not(:disabled){background:#dc2626;transform:translateY(-2px)}.download-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.button-spinner{width:20px;height:20px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.conversion-note{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:16px;text-align:center}.conversion-note p{color:#6b7280;font-size:14px;margin:0;line-height:1.5}.conversion-note strong{color:#374151}.converted-versions{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.converted-versions h3{font-size:20px;font-weight:700;color:#1f2937;margin-bottom:20px}.versions-list{display:flex;flex-direction:column;gap:12px}.version-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb;transition:all .2s}.version-item:hover{background:#f3f4f6;border-color:#d1d5db}.version-item.original{background:#f0f9ff;border-color:#bae6fd}.version-info{display:flex;flex-direction:column;gap:4px}.version-format{font-weight:600;color:#1f2937;font-size:16px}.version-size{font-size:14px;color:#6b7280}.version-date{font-size:12px;color:#9ca3af}.version-actions{display:flex;align-items:center;gap:8px}.version-download{padding:8px 16px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.version-download:hover{background:#2563eb}.version-delete{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#fef2f2;color:#dc2626;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.version-delete:hover{background:#fee2e2;color:#b91c1c}.action-bar{display:flex;align-items:center;justify-content:center;gap:20px;padding:24px 32px;background:#fff}.secondary-button{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.secondary-button:hover:not(:disabled){background:#e5e7eb;transform:translateY(-2px)}.secondary-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.edit-video-button{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#8b5cf6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.edit-video-button:hover:not(:disabled){background:#7c3aed;transform:translateY(-2px)}.edit-video-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.text-button{display:flex;align-items:center;gap:6px;padding:8px 12px;background:none;border:none;color:#6b7280;font-size:14px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s}.text-button:hover:not(:disabled){color:#374151;background:#f3f4f6;transform:translateY(-2px)}.text-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.delete-button:hover:not(:disabled){color:#dc2626;background:#fef2f2}.no-recording{background:#fff;border-radius:16px;padding:60px 40px;text-align:center;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb;border:2px solid red}.no-recording-icon{font-size:64px;margin-bottom:24px}.no-recording h2{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:16px}.no-recording p{color:#6b7280;font-size:18px;margin-bottom:32px}.modal-overlay{overflow-y:scroll;overflow-x:hidden;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;padding-block:20px;z-index:1000}.modal-content p{color:#6b7280;font-size:16px;line-height:1.5;margin:0 0 16px}.recording-info-modal{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}.recording-info-modal strong{color:#1f2937;font-size:16px}.recording-info-modal span{color:#6b7280;font-size:14px}@media (max-width: 1024px){.preview-content{grid-template-columns:1fr;gap:32px}}@media (max-width: 768px){.preview-title{font-size:36px}.video-section,.recording-details,.format-section,.conversion-section,.converted-versions{padding:24px}.action-bar{flex-direction:column;gap:16px;align-items:stretch}.filename-input-group{max-width:100%}.detail-item{flex-direction:column;align-items:flex-start;gap:8px}.action-buttons{flex-direction:column}.version-item{flex-direction:column;align-items:flex-start;gap:12px}.version-actions{align-self:stretch;justify-content:flex-end}}@media (max-width: 480px){.preview-main{padding:20px 0 40px}.preview-header{margin-bottom:40px}.preview-title{font-size:28px}.video-section,.recording-details,.format-section,.conversion-section,.converted-versions,.action-bar{padding:20px}.no-recording{padding:40px 20px}.no-recording-icon{font-size:48px}.format-option{padding:12px}.format-info{gap:8px}.format-icon{font-size:18px}}.video-editor{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb;width:100%;max-width:800px;margin:auto}.editor-header{text-align:center;margin-bottom:32px}.editor-header h3{font-size:24px;font-weight:700;color:#1f2937;margin-bottom:8px}.editor-header p{color:#6b7280;font-size:16px}.video-container{position:relative;background:#000;border-radius:12px;overflow:hidden;margin-bottom:32px}.editor-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);padding:16px;display:flex;align-items:center;gap:16px}.play-pause-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#ffffffe6;border:none;border-radius:50%;color:#1f2937;cursor:pointer;transition:all .2s}.play-pause-btn:hover{background:#fff;transform:scale(1.05)}.time-display{color:#fff;font-size:14px;font-weight:500;font-family:monospace}.preview-btn{padding:8px 16px;background:#3b82f6e6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-left:auto}.preview-btn:hover{background:#3b82f6}.preview-btn.active{background:#ef4444e6}.preview-btn.active:hover{background:#ef4444}.timeline-section{margin-bottom:32px}.timeline-container{margin-bottom:24px}.timeline{position:relative;height:60px;background:#f3f4f6;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.timeline-track{position:absolute;top:20px;left:0;right:0;height:20px;background:#e5e7eb;border-radius:4px}.timeline-selection{position:absolute;top:20px;height:20px;background:#3b82f6;border-radius:4px;opacity:.7}.timeline-cursor{position:absolute;top:15px;width:2px;height:30px;background:#ef4444;transform:translate(-50%);z-index:3}.timeline-handle{position:absolute;top:10px;width:20px;height:40px;background:#3b82f6;border-radius:4px;cursor:grab;transform:translate(-50%);z-index:2;display:flex;align-items:center;justify-content:center}.timeline-handle:active{cursor:grabbing}.timeline-handle.start-handle{background:#10b981}.timeline-handle.end-handle{background:#f59e0b}.handle-label{position:absolute;top:-24px;font-size:10px;font-weight:600;color:#374151;white-space:nowrap;transform:translate(-50%);left:50%}.start-handle .handle-label{color:#10b981}.end-handle .handle-label{color:#f59e0b}.time-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:end}.time-input-group{display:flex;flex-direction:column;gap:8px}.time-input-group label{font-size:14px;font-weight:500;color:#374151}.time-input-group input{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:monospace;background:#f9fafb;transition:border-color .2s}.time-input-group input:focus{outline:none;border-color:#3b82f6;background:#fff}.duration-display{display:flex;align-items:center;justify-content:center;padding:12px 16px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;color:#0369a1;font-weight:600;font-size:14px}.secondary-button{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.secondary-button:disabled{opacity:.5;cursor:not-allowed}.primary-button{margin-bottom:0}.trim-warning{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;margin-bottom:20px}.warning-icon{font-size:20px;flex-shrink:0}.warning-content{font-size:14px;color:#92400e;line-height:1.5}.warning-content strong{color:#78350f;font-weight:600}.action-buttons-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1001}.confirm-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:90%;box-shadow:0 25px 50px -12px #00000040}.confirm-header{padding:24px 24px 0;border-bottom:1px solid #e5e7eb}.confirm-header h4{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 16px}.confirm-content{padding:20px 24px}.confirm-content p{color:#6b7280;font-size:14px;line-height:1.5;margin:0 0 12px}.versions-to-delete{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.version-tag{background:#fef2f2;color:#dc2626;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}.confirm-actions{padding:0 24px 24px;display:flex;gap:12px;justify-content:flex-end}.cancel-confirm-button{padding:10px 16px;background:#f3f4f6;color:#374151;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.cancel-confirm-button:hover:not(:disabled){background:#e5e7eb}.cancel-confirm-button:disabled{opacity:.6;cursor:not-allowed}.proceed-confirm-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#dc2626;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.proceed-confirm-button:hover:not(:disabled){background:#b91c1c}.proceed-confirm-button:disabled{opacity:.6;cursor:not-allowed}.no-changes-message{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;font-size:14px;margin-bottom:16px}.no-changes-icon{font-size:16px}@media (max-width: 768px){.video-editor{padding:24px}.video-controls{padding:12px;gap:12px}.play-pause-btn{width:40px;height:40px}.time-display{font-size:12px}.preview-btn{padding:6px 12px;font-size:12px}.time-inputs{grid-template-columns:1fr;gap:16px}.editor-actions{flex-direction:column}.timeline{height:50px}.timeline-track{top:15px;height:20px}.timeline-selection{top:15px}.timeline-cursor{top:10px;height:30px}.timeline-handle{top:5px;width:16px;height:40px}.trim-warning{padding:12px}.warning-content{font-size:13px}.action-buttons-row{flex-direction:column}}@media (max-width: 480px){.video-editor{padding:20px}.editor-header h3{font-size:20px}.video-controls{flex-wrap:wrap;gap:8px}.timeline{height:40px}.timeline-track{top:10px;height:20px}.timeline-selection{top:10px}.timeline-cursor{top:5px;height:30px}.timeline-handle{top:0;width:14px;height:40px}.handle-label{font-size:8px;top:-20px}.trim-warning{flex-direction:column;gap:8px;text-align:center}.warning-icon{align-self:center}.confirm-dialog{margin:20px;width:calc(100% - 40px)}.confirm-actions{flex-direction:column}.versions-to-delete{justify-content:center}}.save-options{margin-bottom:24px;padding:20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}.save-options h4{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:16px}.save-option-buttons{display:flex;flex-direction:column;gap:12px}.save-option{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .2s}.save-option:hover{border-color:#d1d5db;background:#f9fafb}.save-option.selected{border-color:#3b82f6;background:#f0f9ff}.save-option input[type=radio]{width:18px;height:18px;margin-top:2px;flex-shrink:0}.option-content{display:flex;align-items:flex-start;gap:12px;flex:1}.option-icon{font-size:20px;flex-shrink:0}.option-details{display:flex;flex-direction:column;gap:4px}.option-title{font-size:16px;font-weight:600;color:#1f2937}.option-description{font-size:14px;color:#6b7280;line-height:1.4}@media (max-width: 768px){.save-options{padding:16px}.save-option{padding:12px}.option-content{gap:8px}.option-icon{font-size:18px}.option-title{font-size:15px}.option-description{font-size:13px}}@media (max-width: 480px){.save-option-buttons{gap:8px}.save-option{padding:10px}.option-details{gap:2px}}.recordings-page{min-height:100vh;background:#f8fafc}.recordings-main{padding:40px 0 80px}.recordings-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;gap:40px}.header-content{flex:1}.recordings-title{font-size:48px;font-weight:700;color:#1f2937;margin-bottom:16px}.recordings-subtitle{font-size:18px;color:#6b7280}.storage-info{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb;min-width:280px}.storage-stats{display:flex;gap:24px;margin-bottom:16px}.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-value{font-size:24px;font-weight:700;color:#1f2937;line-height:1}.stat-label{font-size:12px;color:#6b7280;font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}.storage-bar{display:flex;align-items:center;gap:12px}.storage-progress{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.storage-fill{height:100%;background:linear-gradient(90deg,#10b981,#f59e0b 70%,#ef4444);border-radius:4px;transition:width .3s ease}.storage-percentage{font-size:12px;font-weight:600;color:#6b7280;min-width:40px;text-align:right}.recordings-controls{background:#fff;border-radius:16px;padding:24px;margin-bottom:32px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.search-and-filters{display:flex;gap:20px;align-items:center;margin-bottom:16px}.search-box{position:relative;flex:1;max-width:400px}.search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af}.search-box input{width:100%;padding:12px 16px 12px 48px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;background:#f9fafb;transition:all .2s}.search-box input:focus{outline:none;border-color:#3b82f6;background:#fff}.filters{display:flex;gap:12px}.filters select{padding:12px 16px;border:2px solid #e5e7eb;border-radius:12px;background:#fff;font-size:14px;color:#374151;cursor:pointer;transition:border-color .2s}.filters select:focus{outline:none;border-color:#3b82f6}.bulk-actions{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px}.selection-count{font-size:14px;font-weight:600;color:#b91c1c}.delete-selected-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#dc2626;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.delete-selected-button:hover:not(:disabled){background:#b91c1c}.delete-selected-button:disabled{opacity:.6;cursor:not-allowed}.recordings-grid{margin-bottom:40px}.grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:0 4px}.select-all-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500;color:#374151}.select-all-checkbox input{width:18px;height:18px}.results-count{font-size:14px;color:#6b7280}.recordings-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.recording-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a;border:2px solid #e5e7eb;transition:all .2s;cursor:pointer}.recording-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px -5px #0000001a;border-color:#d1d5db}.recording-card.selected{border-color:#3b82f6;background:#f0f9ff}.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.card-checkbox{display:flex;align-items:center;cursor:pointer}.card-checkbox input{width:18px;height:18px}.card-actions{display:flex;gap:8px}.action-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.preview-button{background:#f0f9ff;color:#3b82f6}.preview-button:hover{background:#dbeafe;color:#2563eb}.delete-button{background:#fef2f2;color:#dc2626}.delete-button:hover{background:#fee2e2;color:#b91c1c}.card-thumbnail{position:relative;aspect-ratio:16 / 9;background:#000;overflow:hidden;cursor:pointer}.card-thumbnail img{width:100%;height:100%;object-fit:cover}.thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#374151;color:#9ca3af}.thumbnail-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0000004d;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.card-thumbnail:hover .thumbnail-overlay{opacity:1}.play-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#ffffffe6;border-radius:50%;color:#1f2937}.duration-badge{position:absolute;bottom:8px;right:8px;background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.card-content{padding:16px}.card-title{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px}.trimmed-badge{background:#f0f9ff;color:#0369a1;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;white-space:nowrap;flex-shrink:0}.trim-info{color:#0369a1;font-size:12px;font-style:italic}.trim-info svg{color:#0369a1}.card-meta{display:flex;flex-direction:column;gap:8px}.meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.meta-item{display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280}.meta-item svg{flex-shrink:0}.webcam-badge{background:#f0f9ff;color:#3b82f6;padding:2px 6px;border-radius:4px;font-weight:500}.empty-state{text-align:center;padding:80px 40px;background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.empty-icon{font-size:64px;margin-bottom:24px}.empty-state h2{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:16px}.empty-state p{color:#6b7280;font-size:18px;margin-bottom:32px}.no-results{text-align:center;padding:60px 40px;background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a;border:1px solid #e5e7eb}.no-results-icon{font-size:48px;margin-bottom:20px}.no-results h3{font-size:24px;font-weight:700;color:#1f2937;margin-bottom:12px}.no-results p{color:#6b7280;font-size:16px}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px}.pagination-button{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fff;border:2px solid #e5e7eb;border-radius:12px;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.pagination-button:hover:not(:disabled){border-color:#d1d5db;background:#f9fafb}.pagination-button:disabled{opacity:.5;cursor:not-allowed}.pagination-numbers{display:flex;align-items:center;gap:4px;margin:0 16px}.pagination-number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.pagination-number:hover{border-color:#d1d5db;background:#f9fafb}.pagination-number.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.pagination-dots{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#9ca3af;font-weight:600}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.pb{padding-block:500px}.modal{background:#fff;border-radius:16px;padding:0;max-width:400px;width:90%;box-shadow:0 25px 50px -12px #00000040}.modal-header{padding:24px 24px 0}.modal-header h3{font-size:20px;font-weight:700;color:#1f2937;margin:0}.modal-content{padding:16px 24px 24px}.modal-content p{color:#6b7280;font-size:16px;line-height:1.5}.modal-actions{padding:0 24px 24px;display:flex;gap:12px;justify-content:flex-end}.secondary-button{padding:12px 20px;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.secondary-button:hover:not(:disabled){background:#e5e7eb}.secondary-button:disabled{opacity:.6;cursor:not-allowed}.delete-button-confirm{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#dc2626;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.delete-button-confirm:hover:not(:disabled){background:#b91c1c}.delete-button-confirm:disabled{opacity:.6;cursor:not-allowed}.nav-links a.active{color:#ef4444;font-weight:600}@media (max-width: 1024px){.recordings-header{flex-direction:column;gap:24px}.storage-info{min-width:auto;width:100%}.recordings-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}}@media (max-width: 768px){.recordings-title{font-size:36px}.search-and-filters{flex-direction:column;gap:16px;align-items:stretch}.search-box{max-width:none}.filters{justify-content:space-between}.filters select{flex:1}.storage-stats{justify-content:space-around}.recordings-list{grid-template-columns:1fr}.pagination{flex-wrap:wrap;gap:12px}.pagination-numbers{margin:0 8px}}@media (max-width: 480px){.recordings-main{padding:20px 0 40px}.recordings-title{font-size:28px}.recordings-controls,.storage-info{padding:20px}.bulk-actions{flex-direction:column;gap:12px;align-items:stretch}.card-header,.card-content{padding:12px}.meta-row{flex-direction:column;align-items:flex-start;gap:6px}.pagination-button{padding:8px 12px;font-size:12px}.pagination-number{width:36px;height:36px;font-size:12px}}.layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;min-height:100vh}.header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}.nav{display:flex;align-items:center;justify-content:space-between;height:70px}.logo{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:700;color:#1f2937}.logo-icon{color:#ef4444;font-size:28px}.nav-links{display:flex;gap:32px}.nav-links a{text-decoration:none;color:#6b7280;font-weight:500;transition:color .2s}.nav-links a:hover{color:#1f2937}.cta-button{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s}.cta-button:hover{background:#2563eb}.footer{background:#1f2937;color:#fff;padding:20px 0}.footer .logo{justify-content:center;align-items:center;color:#fff}.footer-content{display:grid;grid-template-columns:1fr;text-align:center;gap:40px}.footer-section p{color:#9ca3af}.footer-bottom{border-top:1px solid #374151;padding-top:20px;text-align:center}.footer-bottom p{color:#9ca3af;font-size:14px}.footer-bottom p a{color:#3b82f6}