:root{--primary:#2563eb;--primary-hover:#1d4ed8;--bg:#f8fafc;--surface:#fff;--text:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--success:#16a34a;--error:#dc2626;--shadow:0 1px 3px #0000001a;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}*{box-sizing:border-box}body{min-height:100vh;margin:0}#app{flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:960px;margin:0 auto;padding:0 20px}.app-header{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}.app-header .container{justify-content:space-between;align-items:center;height:60px;display:flex}.logo{color:var(--text);font-size:1.25rem;font-weight:600;text-decoration:none}.nav{gap:1.5rem;display:flex}.nav a{color:var(--text-muted);font-size:.95rem;text-decoration:none;transition:color .2s}.nav a:hover,.nav a.router-link-active{color:var(--primary)}.app-main{flex:1;padding:40px 0}.app-footer{background:var(--surface);border-top:1px solid var(--border);text-align:center;color:var(--text-muted);padding:20px 0;font-size:.875rem}.home{text-align:center;padding:40px 0}.home h1{margin:0 0 12px;font-size:2.5rem}.subtitle{color:var(--text-muted);margin-bottom:40px;font-size:1.1rem}.tool-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:40px;display:grid}.tool-card{background:var(--surface);border:1px solid var(--border);color:inherit;border-radius:12px;padding:24px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:block}.tool-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000014}.tool-card h2{color:var(--primary);margin:0 0 8px;font-size:1.25rem}.tool-card p{color:var(--text-muted);margin:0;font-size:.95rem}.tool-page{max-width:640px;margin:0 auto}.tool-page h1{margin:0 0 8px;font-size:2rem}.hint{color:var(--text-muted);margin-bottom:24px}.file-input{border:2px dashed var(--border);background:var(--surface);cursor:pointer;border-radius:8px;width:100%;margin-bottom:24px;padding:12px;display:block}.file-list h3{margin-bottom:12px;font-size:1rem}.file-list ul{margin:0 0 20px;padding:0;list-style:none}.file-list li{background:var(--surface);border:1px solid var(--border);cursor:move;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 12px;display:flex}.btn-primary,.btn-small{cursor:pointer;border:none;border-radius:6px;font-size:.95rem;transition:background .2s}.btn-primary{background:var(--primary);color:#fff;padding:12px 24px}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-small{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);padding:6px 12px}.btn-small:hover{color:var(--error);border-color:var(--error)}.feedback-form .field{margin-bottom:16px}.feedback-form label{margin-bottom:6px;font-size:.95rem;font-weight:500;display:block}.feedback-form input,.feedback-form textarea{border:1px solid var(--border);border-radius:6px;width:100%;padding:10px 12px;font-family:inherit;font-size:1rem}.feedback-form textarea{resize:vertical}.message{border-radius:6px;margin-top:20px;padding:12px 16px;font-size:.95rem}.message.success{color:#166534;background:#dcfce7}.message.error{color:#991b1b;background:#fee2e2}.message.info{color:#1e40af;background:#dbeafe}.file-drop{margin-bottom:20px;position:relative}.file-drop--active .file-drop__label{border-color:var(--primary);background:#eff6ff}.file-drop__input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute}.file-drop__label{border:2px dashed var(--border);background:var(--surface);cursor:pointer;text-align:center;color:var(--text-muted);border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;transition:border-color .2s,background .2s;display:flex}.file-drop__label small{font-size:.8rem}.file-drop__label:hover{border-color:var(--primary)}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:28px;display:grid}.feature-card{background:var(--surface);border:1px solid var(--border);text-align:center;color:var(--text);border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;font-size:.9rem;font-weight:500;display:flex}.feature-card small{color:var(--text-muted);font-size:.78rem;line-height:1.4}.feature-icon{width:40px;height:40px;color:var(--primary);background:#eff6ff;border-radius:10px;justify-content:center;align-items:center;display:flex}.ffmpeg-status{margin-bottom:20px}.loading-block{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:8px;flex-direction:column;align-items:center;gap:10px;padding:16px;font-size:.95rem;display:flex}.video-info{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:8px;flex-wrap:wrap;gap:16px;margin-bottom:20px;padding:12px 16px;font-size:.9rem;display:flex}.preview-section{text-align:center;margin-bottom:20px}.preview-canvas{border:1px solid var(--border);background:#000;border-radius:8px;max-width:100%;height:auto}.params{margin-bottom:20px}.param-group{margin-bottom:16px}.param-label{margin-bottom:8px;font-size:.95rem;font-weight:500;display:block}.btn-group{flex-wrap:wrap;gap:8px;display:flex}.btn-option{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;padding:8px 16px;font-size:.9rem;transition:all .2s}.btn-option:hover{border-color:var(--primary);color:var(--primary)}.btn-option--active{background:var(--primary);border-color:var(--primary);color:#fff}.custom-res{color:var(--text-muted);align-items:center;gap:8px;margin-top:10px;font-size:.9rem;display:flex}.size-input{border:1px solid var(--border);text-align:center;border-radius:6px;width:80px;padding:6px 10px;font-size:.9rem}.size-input:focus{border-color:var(--primary);outline:none}.progress-section{align-items:center;gap:12px;margin-bottom:20px;display:flex}.progress-bar{background:var(--border);border-radius:5px;flex:1;height:10px;overflow:hidden}.progress-bar--ffmpeg{width:100%;max-width:300px}.progress-bar__fill{background:var(--primary);border-radius:5px;height:100%;transition:width .3s}.progress-text{color:var(--primary);font-size:.9rem;font-weight:500}.actions{gap:12px;margin-bottom:20px;display:flex}.btn-download{background:var(--success)!important}.btn-download:hover{background:#15803d!important}.toggle-label{cursor:pointer;user-select:none;align-items:center;gap:10px;display:inline-flex}.toggle-switch{background:var(--border);border-radius:11px;width:40px;height:22px;transition:background .2s;position:relative}.toggle-switch--on{background:var(--primary)}.toggle-knob{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000026}.toggle-switch--on .toggle-knob{transform:translate(18px)}.target-size-row{align-items:center;gap:8px;margin-top:10px;display:flex}.size-input--wide{width:100px}.unit-text{color:var(--text-muted);font-size:.9rem}.bitrate-hint{color:var(--text-muted);background:#f1f5f9;border-radius:6px;margin:8px 0 0;padding:6px 10px;font-size:.85rem;display:inline-block}.audio-extra{background:var(--bg);border:1px solid var(--border);border-radius:8px;margin-top:12px;padding:12px}.audio-file-row{margin-bottom:12px;position:relative}.audio-file-btn{background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--text-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;border-radius:6px;max-width:100%;padding:8px 16px;font-size:.9rem;display:inline-block;overflow:hidden}.audio-file-btn:hover{border-color:var(--primary);color:var(--primary)}.vol-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.vol-label{color:var(--text-muted);min-width:2em;font-size:.9rem}.vol-slider{height:4px;accent-color:var(--primary);flex:1}.vol-val{color:var(--text);text-align:right;min-width:3em;font-size:.85rem;font-weight:500}.fade-row{gap:20px;display:flex}.checkbox-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:4px;font-size:.9rem;display:inline-flex}.checkbox-label input[type=checkbox]{accent-color:var(--primary)}.fade-input{border:1px solid var(--border);text-align:center;border-radius:4px;width:48px;padding:3px 6px;font-size:.85rem}@media (width<=640px){.feature-grid{grid-template-columns:repeat(2,1fr)}.app-header .container{flex-direction:column;gap:10px;height:auto;padding:12px 20px}.nav{gap:1rem}.home h1{font-size:1.75rem}}