@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101114;--panel:#191a1f;--panel2:#202126;--line:#2c2d34;--text:#f4f3f1;--muted:#97979f;--accent:#d1f36a;--accent-ink:#171a0d;--danger:#ff8888;--radius:20px;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% -10%,#242824 0,transparent 44%),var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}.shell{width:min(100% - 32px,620px);margin:0 auto;padding:0 0 max(28px,env(safe-area-inset-bottom))}.topbar{height:70px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff0c}.brand{display:flex;gap:9px;align-items:center;color:var(--text);text-decoration:none;font:800 18px Manrope,sans-serif;letter-spacing:-.8px}.brand-light{font-weight:500;color:var(--muted)}.brand-mark{width:30px;height:30px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border-radius:10px;font-size:20px}.icon-button{width:42px;height:42px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:13px;font-size:18px}.hero{padding:43px 2px 30px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:9px;margin:0 0 14px}.pulse{width:7px;height:7px;border-radius:100%;background:var(--accent);box-shadow:0 0 14px #d1f36a88}.hero h1{font:700 clamp(38px,10vw,54px)/1.07 Manrope,sans-serif;letter-spacing:-2.5px;margin:0}.hero h1 span{color:var(--accent)}.lede{color:var(--muted);font-size:14px;line-height:1.6;max-width:430px;margin:14px 0 0}.panel{background:linear-gradient(145deg,#1b1c21,#17181c);border:1px solid #ffffff0d;border-radius:var(--radius);padding:21px;margin:0 0 14px;box-shadow:0 12px 35px #0002}.settings{margin-bottom:14px}.settings label,.field-label{display:block;font-size:12px;font-weight:600;margin:0 0 9px}.inline-field{display:flex;gap:8px}.inline-field input,.text-input{min-width:0;width:100%;height:46px;border:1px solid var(--line);background:#111216;color:var(--text);border-radius:12px;padding:0 13px;font:inherit;font-size:14px;outline:none}.inline-field input:focus,.text-input:focus{border-color:#d1f36a88}.hint{font-size:11px;color:var(--muted);margin:9px 0 0}.section-heading{display:flex;gap:13px;align-items:flex-start;margin-bottom:17px}.section-heading h2,.volume-heading h2{font:700 17px Manrope,sans-serif;margin:0 0 4px;letter-spacing:-.4px}.section-heading p,.volume-heading p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}.step{flex:none;width:27px;height:27px;border:1px solid #d1f36a50;color:var(--accent);border-radius:9px;display:grid;place-items:center;font:700 11px Manrope}.step.done{background:var(--accent);color:var(--accent-ink)}.file-drop{min-height:72px;border:1px dashed #51525b;border-radius:14px;display:flex;gap:12px;align-items:center;padding:12px;cursor:pointer;transition:.18s background,.18s border-color}.file-drop:hover,.file-drop:focus-within{border-color:var(--accent);background:#d1f36a08}.file-drop.compact{margin-bottom:17px}.file-icon{width:38px;height:38px;flex:none;border-radius:12px;background:#292a30;color:var(--accent);display:grid;place-items:center;font-size:18px}.file-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.file-copy strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-copy small{font-size:10px;color:var(--muted)}.file-action{color:var(--accent);font-weight:700;font-size:11px}.divider{height:1px;background:var(--line);margin:21px 0}.tabs{display:flex;gap:5px;background:#111216;padding:4px;border-radius:12px;margin:-1px 0 14px}.tab{flex:1;border:0;background:transparent;color:var(--muted);padding:10px 7px;border-radius:9px;font:600 12px 'DM Sans',sans-serif}.tab.active{background:#2b2c32;color:var(--text)}.library-list{display:grid;gap:8px}.track{display:flex;align-items:center;gap:10px;padding:11px;background:#202126;border:1px solid #ffffff09;border-radius:13px;min-width:0}.track.selected{border-color:#d1f36a88;background:#25291d}.track-play{width:36px;height:36px;border:0;border-radius:11px;background:#303138;color:var(--accent);font-size:13px;flex:none}.track-info{min-width:0;flex:1}.track-info strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-info small{color:var(--muted);font-size:10px}.track input{accent-color:var(--accent);width:17px;height:17px}.empty{font-size:12px;color:var(--muted);padding:12px;text-align:center}.text-button{margin:10px 0 0;border:0;padding:5px 0;background:transparent;color:var(--accent);font:600 11px 'DM Sans',sans-serif}.field-label{margin-top:5px}.optional{color:var(--muted);font-weight:400}.volume-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.volume-heading output{font:700 17px Manrope;color:var(--accent)}.range{appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--accent) 50%,#393a41 50%);outline:none;margin:0}.range::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:4px solid #1b1c21;box-shadow:0 0 0 1px var(--accent)}.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #1b1c21;box-shadow:0 0 0 1px var(--accent)}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#777983;margin:9px 1px 22px}.button{border:0;min-height:46px;border-radius:12px;padding:0 16px;font:700 12px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}.button:disabled{opacity:.55;cursor:wait}.button.primary{width:100%;height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:var(--accent);color:var(--accent-ink);font-size:13px;box-shadow:0 5px 20px #d1f36a14}.button.primary span:last-child{font-size:20px}.button.secondary{background:#2b2c32;color:var(--text);border:1px solid #ffffff10}.fine-print{font-size:10px;line-height:1.5;color:#85858e;text-align:center;margin:13px 0 0}.progress-panel{padding:17px 19px}.progress-head{display:flex;align-items:center;gap:12px}.progress-head strong{font-size:12px}.progress-head p{margin:4px 0 0;font-size:10px;color:var(--muted)}.spinner{width:19px;height:19px;border:2px solid #4b4d51;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.progress-track{height:3px;background:#303138;border-radius:5px;margin-top:15px;overflow:hidden}.progress-track span{display:block;width:36%;height:100%;background:var(--accent);border-radius:5px;animation:progress 1.8s ease-in-out infinite alternate}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress{to{width:87%}}.result-panel video{width:100%;max-height:65vh;aspect-ratio:16/9;background:#08090a;border-radius:14px;display:block;object-fit:contain}.download{display:grid;place-items:center;width:100%;margin-top:12px;text-decoration:none}.toast{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:5;margin:auto;max-width:590px;padding:14px 16px;background:#333037;border:1px solid #ffffff1c;border-radius:13px;font-size:12px;box-shadow:0 8px 30px #0008}.toast.error{border-color:#ff888866;color:#ffd0d0}footer{display:flex;justify-content:space-between;color:#65666e;font-size:9px;letter-spacing:.6px;padding:19px 4px 0}footer span:first-child{font-weight:700;color:#888a91}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(min-width:620px){.shell{padding-top:0}.hero{padding-top:54px}.panel{padding:25px}.form-panel{padding:27px}.topbar{height:76px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* YouTube-specific additions */
.step.yt{border-color:#ff2a2a88;color:#ff2a2a;background:#ff2a2a12}
.button.primary.yt-button{background:#ff2a2a;color:#fff;box-shadow:0 5px 20px #ff2a2a22}
#ytSaveAudioFields{padding:13px;background:#111216;border-radius:12px;border:1px solid var(--line);margin-top:10px}
#ytUrlAudioPane .field-label{margin-top:12px}