*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--bg-card:#12121a;--bg-hover:#1a1a2e;--border:#1e1e30;--border-hover:#2a2a45;--text:#e4e4ed;--text-muted:#6b6b80;--accent:#6c5ce7;--accent-glow:#6c5ce74d;--accent-hover:#7d6ff0;--success:#00cec9;--success-glow:#00cec94d;--danger:#ff6b6b;--radius:12px;--radius-lg:16px}body{background:var(--bg);color:var(--text);justify-content:center;min-height:100vh;padding:2rem 1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;display:flex}.container{width:100%;max-width:560px}header{text-align:center;margin-bottom:2rem}h1{letter-spacing:-.02em;background:linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:700}.subtitle{color:var(--text-muted);margin-top:.25rem;font-size:.9rem}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:var(--bg-card);padding:3rem 2rem;transition:all .3s;position:relative}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--bg-hover);box-shadow:0 0 30px var(--accent-glow)}.drop-zone.drag-over{transform:scale(1.02)}.drop-zone.has-file{border-color:var(--success);border-style:solid}.drop-icon{width:48px;height:48px;color:var(--text-muted);margin-bottom:1rem;transition:color .3s}.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon{color:var(--accent)}.drop-text{margin-bottom:.25rem;font-size:1.1rem;font-weight:600}.drop-subtext{color:var(--text-muted);font-size:.85rem}.drop-formats{color:var(--text-muted);opacity:.6;margin-top:.75rem;font-size:.75rem}.video-info{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-top:1rem;padding:1.25rem;animation:.3s slideIn}.info-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.info-item{flex-direction:column;gap:.15rem;display:flex}.info-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.7rem;font-weight:600}.info-value{word-break:break-all;font-size:.95rem;font-weight:500}.target-section{margin-top:1.5rem;animation:.3s slideIn}.target-section h2{margin-bottom:.75rem;font-size:1rem;font-weight:600}.preset-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.preset-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-width:80px;color:var(--text);cursor:pointer;flex-direction:column;flex:1;align-items:center;gap:.15rem;padding:.75rem .5rem;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.preset-btn span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.65rem;font-weight:400}.preset-btn:hover{border-color:var(--border-hover);background:var(--bg-hover)}.preset-btn.active{border-color:var(--accent);background:var(--bg-hover);box-shadow:0 0 15px var(--accent-glow)}.output-format-note{color:var(--text-muted);text-align:center;margin-top:1rem;font-size:.8rem}.custom-size-wrapper{margin-top:.75rem;animation:.2s slideIn}.custom-input-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);align-items:center;transition:border-color .2s;display:flex;overflow:hidden}.custom-input-group:focus-within{border-color:var(--accent)}.custom-input-group input{color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:.75rem 1rem;font-family:inherit;font-size:1rem}.custom-input-group input::placeholder{color:var(--text-muted)}.input-suffix{color:var(--text-muted);padding:.75rem 1rem;font-size:.9rem;font-weight:600}.compression-info{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);margin-top:.75rem;padding:.75rem 1rem;font-size:.85rem;animation:.2s slideIn}.compression-info p{margin-bottom:.25rem}.compression-info p:last-child{margin-bottom:0}.compression-info strong{color:var(--text)}.resolution-note{font-size:.8rem;color:var(--accent)!important}.start-btn{background:var(--accent);border-radius:var(--radius);color:#fff;cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;width:100%;margin-top:1rem;padding:.9rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.start-btn:hover{background:var(--accent-hover);box-shadow:0 0 20px var(--accent-glow)}.start-btn:disabled{opacity:.5;cursor:not-allowed}.progress-section{margin-top:1.5rem;animation:.3s slideIn}.progress-section h2{margin-bottom:.75rem;font-size:1rem;font-weight:600}.progress-bar-container{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--accent), var(--success));border-radius:4px;width:0%;height:100%;transition:width .3s}.progress-details{justify-content:space-between;margin-top:.5rem;font-size:.85rem;display:flex}#progressPercent{font-weight:600}#progressTime{color:var(--text-muted)}.progress-stage{color:var(--text-muted);margin-top:.5rem;font-size:.8rem}.log-container{background:var(--bg);border:1px solid var(--border);border-radius:8px;max-height:150px;margin-top:.75rem;padding:.5rem .75rem;overflow-y:auto}.log-container pre{color:var(--text-muted);white-space:pre-wrap;word-break:break-all;margin:0;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.7rem;line-height:1.5}.done-section{text-align:center;margin-top:1.5rem;animation:.4s slideIn}.done-icon{color:var(--success);margin-bottom:.5rem;animation:.5s popIn}.done-section h2{margin-bottom:1rem;font-size:1.25rem;font-weight:700}.done-stats{color:var(--text-muted);justify-content:center;align-items:center;gap:.75rem;margin-bottom:1.5rem;font-size:.95rem;display:flex}.done-saved{color:var(--success);font-weight:600}.download-btn{background:var(--success);border-radius:var(--radius);color:#0a0a0f;cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.9rem;font-family:inherit;font-size:1rem;font-weight:700;transition:all .2s;display:flex}.download-btn:hover{box-shadow:0 0 25px var(--success-glow);transform:translateY(-1px)}.reset-btn{border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-muted);cursor:pointer;background:0 0;margin-top:.75rem;padding:.75rem;font-family:inherit;font-size:.85rem;transition:all .2s}.reset-btn:hover{border-color:var(--border-hover);color:var(--text)}.hidden{display:none!important}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media (width<=480px){.preset-buttons{gap:.4rem}.preset-btn{min-width:60px;padding:.6rem .4rem;font-size:.85rem}.drop-zone{padding:2rem 1.5rem}.info-grid{grid-template-columns:1fr;gap:.75rem}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}