*{box-sizing:border-box;margin:0;padding:0}:root{--primary: #6366f1;--primary-hover: #4f46e5;--success: #10b981;--error: #ef4444;--warning: #f59e0b;--bg: #0f172a;--bg-card: #1e293b;--bg-hover: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--border: #334155;--radius: 12px}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;background:var(--bg);color:var(--text);min-height:100vh}.app{max-width:900px;margin:0 auto;padding:2rem 1.5rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.header p{color:var(--text-muted);font-size:1.1rem}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--bg-card);margin-bottom:1.5rem}.dropzone:hover,.dropzone.active{border-color:var(--primary);background:#6366f11a}.dropzone-icon{width:48px;height:48px;margin:0 auto 1rem;color:var(--text-muted)}.dropzone h3{font-size:1.25rem;margin-bottom:.5rem}.dropzone p{color:var(--text-muted);font-size:.9rem}.controls{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center}.mode-toggle{display:flex;background:var(--bg-card);border-radius:8px;padding:4px;gap:4px}.mode-btn{padding:.5rem 1rem;border:none;background:transparent;color:var(--text-muted);border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s}.mode-btn.active{background:var(--primary);color:#fff}.mode-btn:hover:not(.active){color:var(--text)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover)}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){background:#059669}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-sm{padding:.5rem 1rem;font-size:.8rem}.status-bar{background:var(--bg-card);border-radius:var(--radius);padding:1rem 1.5rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.status-bar .status-text{color:var(--text-muted);font-size:.9rem}.status-bar .status-text strong{color:var(--text)}.file-list{display:flex;flex-direction:column;gap:1rem}.file-card{background:var(--bg-card);border-radius:var(--radius);padding:1.25rem;border:1px solid var(--border);transition:border-color .2s}.file-card.converting{border-color:var(--primary)}.file-card.completed{border-color:var(--success)}.file-card.error{border-color:var(--error)}.file-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem}.file-info{flex:1;min-width:0}.file-name{font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.25rem}.file-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted)}.file-actions{display:flex;gap:.5rem;flex-shrink:0}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;border-radius:20px;text-transform:uppercase;letter-spacing:.025em}.badge-pending{background:#94a3b833;color:var(--text-muted)}.badge-converting{background:#6366f133;color:#818cf8}.badge-completed{background:#10b98133;color:#34d399}.badge-error{background:#ef444433;color:#f87171}.progress-section{margin-top:.75rem}.progress-bar-container{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin-bottom:.5rem}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#a855f7);border-radius:3px;transition:width .3s ease}.progress-text{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}.result-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.video-preview{width:100%;max-height:300px;border-radius:8px;background:#000;margin-bottom:.75rem}.result-stats{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--text-muted);margin-bottom:.75rem}.result-stats span strong{color:var(--text)}.remove-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s}.remove-btn:hover{color:var(--error);background:#ef44441a}.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}.footer{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);font-size:.85rem}.footer-links{display:flex;gap:1rem}.footer-links a{color:var(--text-muted);transition:color .2s}.footer-links a:hover{color:var(--text)}.footer-links svg{width:20px;height:20px}.loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:640px){.app{padding:1rem}.header h1{font-size:1.75rem}.controls{flex-direction:column;align-items:stretch}.status-bar{flex-direction:column;align-items:flex-start}.file-header{flex-direction:column}.file-actions{width:100%}.file-actions .btn{flex:1;justify-content:center}}