@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('./fonts/dm-sans.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('./fonts/manrope.woff2') format('woff2')}
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;font-synthesis:none;color:#e8edf5;background:#111318;--bg:#111318;--surface:#191d24;--surface-raised:#202630;--border:#303744;--text:#e8edf5;--muted:#9aa6b9;--faint:#8994a8;--accent:#6da8ff;--accent-strong:#2c64cf;--accent-soft:#223651;--track:#343e50}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed}a{color:inherit}button,a,[role=button],select,input[type=range]{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[role=button]:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #8ab9ff;outline-offset:4px}button svg,span svg{display:block;width:20px;height:20px;flex-shrink:0}[hidden]{display:none!important}
.wrap{max-width:1120px;margin:auto;padding:0 36px}.header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #292f39}.brand{display:flex;align-items:center;text-decoration:none;font-family:Manrope,sans-serif;letter-spacing:-1.4px;font-size:27px;font-weight:800;color:#f3f6fc}.brand-icon{background:#72aaff;color:#122747;width:38px;height:38px;border-radius:11px;margin-right:11px;display:grid;place-items:center}.brand-icon svg{width:25px;height:25px}.brand-dot{color:var(--accent)}.header-right{display:flex;gap:22px;align-items:center}.privacy-pill{font-size:11px;display:flex;gap:7px;align-items:center;color:var(--muted)}.privacy-pill svg{width:13px;height:13px}.icon-button{display:grid;place-items:center;background:transparent;color:#9aa9c0;border-radius:6px;width:28px;height:28px;padding:4px}.icon-button svg{width:16px;height:16px}.icon-button:hover{color:#c8dcff;background:#293a55}.icon-button:disabled{opacity:.4}.text-button{background:none;color:#a8c8ff;font-size:12px;font-weight:550;display:inline-flex;align-items:center;gap:7px;padding:5px 0}.text-button:hover{color:#d4e4ff;text-decoration:underline}.text-button svg{width:15px;height:15px}.text-button:disabled{opacity:.4;text-decoration:none}
.mode-switch{display:flex;width:fit-content;padding:5px;gap:5px;border:1px solid var(--border);border-radius:12px;background:#191d24;margin:38px 0 24px}.mode-switch button{background:transparent;color:#a1adbf;display:flex;align-items:center;justify-content:center;gap:9px;width:128px;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:550}.mode-switch svg{width:17px;height:17px}.mode-switch button[aria-pressed=true]{background:#263c5b;color:#d3e5ff;box-shadow:0 1px 4px #0002}.mode-switch button:hover{color:#e5efff;background:#222c3b}.mode-switch button[aria-pressed=true]:hover{background:#2b4568}.mode-switch button:disabled{opacity:.65}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-bottom:60px}.main-column{display:flex;flex-direction:column;gap:18px}.dropzone{background:#181c23;border:1.5px dashed #424e63;border-radius:16px;min-height:316px;display:flex;align-items:center;flex-direction:column;text-align:center;cursor:pointer;padding:41px 25px 30px;transition:background .2s,border-color .2s,transform .2s}.dropzone:hover,.dropzone.drag-over{background:#1c2636;border-color:var(--accent)}.dropzone.drag-over{transform:scale(1.008);box-shadow:0 0 0 5px #6da8ff18}.upload-icon{display:grid;place-items:center;width:55px;height:62px;border:1px solid #425a7c;border-radius:13px;background:#25344b;box-shadow:0 5px 20px #0002;margin-bottom:15px;color:#93bfff}.upload-icon svg{width:29px;height:29px}.dropzone h2{font-family:Manrope,sans-serif;font-size:21px;letter-spacing:-.5px;font-weight:550;color:#e5ecf8;margin:0 0 21px}.browse-button{display:flex;align-items:center;gap:8px;background:#263b5a;border:1px solid #3d577d;color:#c6ddff;padding:11px 20px;border-radius:8px;font-size:12px;font-weight:600}.browse-button svg{width:16px;height:16px}.drop-hint{margin-top:16px;font-size:11px;color:var(--muted)}
.queue-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}.queue-heading{padding:17px 21px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2b3443}.queue-heading h2{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:600;color:#d5ddeb}.queue-heading h2 span{background:#2b3545;color:#acbdd7;border-radius:5px;padding:3px 6px;font-size:10px}.queue-heading button{font-size:11px;color:#a0b2cd}#queue-empty{display:flex;gap:12px;align-items:center;padding:23px 21px;color:var(--muted)}#queue-empty>span{background:#263142;border-radius:8px;width:31px;height:31px;display:grid;place-items:center;color:#91a7c9}#queue-empty>span svg{width:17px;height:17px}#queue-empty strong{font-size:11px;color:#9aaac2;font-weight:500}#file-list{list-style:none;padding:0;margin:0}.file-row{display:grid;grid-template-columns:39px minmax(0,1fr) 67px 28px 26px;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid #2b3443}.file-row:last-child{border-bottom:0}.file-thumb{height:39px;width:39px;border-radius:7px;background:#253a58;display:grid;place-items:center;color:#98bfff;overflow:hidden}.file-thumb.audio{background:#293953;color:#a5c6ff}.file-thumb img{width:100%;height:100%;object-fit:cover}.file-name{font-size:11px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d6e2f5}.file-meta{font-size:10px;color:#97a8c2;margin-top:5px;line-height:1.5;overflow-wrap:anywhere}.file-format{font-size:10px;border:1px solid #405272;border-radius:6px;background:#25344d;color:#c0d8ff;padding:6px 3px;width:67px}.download-file{background:#27446d;color:#b0d0ff}.file-row[data-status=error] .file-meta{color:#f0aa9d}.file-row[data-status=done] .file-meta{color:#8fbbff}.file-row[data-status=converting] .file-thumb{animation:pulse 1.5s infinite}.file-progress{height:3px;border-radius:2px;background:#2d3b52;margin-top:7px;overflow:hidden}.file-progress>span{display:block;height:100%;width:30%;background:#6da8ff;animation:indeterminate 1.4s infinite}.file-progress.measured>span{animation:none;transition:width .2s}.queue-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1c2635;border-top:1px solid #304057;padding:12px 21px;font-size:10px;color:#a0b5d4}.queue-footer button{font-size:10px;color:#b6d2ff}
.settings-card{background:#1c212a;border:1px solid var(--border);border-radius:14px;padding:25px 22px}fieldset{border:0;margin:0;padding:0;min-width:0}legend{display:flex;align-items:center;font-size:12px;font-weight:500;width:100%;padding:0;margin-bottom:17px;color:#c4d2e7}.format-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;background:#131923;border:1px solid #303c50;border-radius:9px}.format-picker button{background:transparent;color:#9aaac4;border-radius:5px;font-size:12px;padding:10px 0;font-weight:600}.format-picker button[aria-pressed=true]{background:#2b4a75;color:#deebff;box-shadow:0 1px 4px #0002}.format-picker button:hover{background:#26374f;color:#d2e3ff}.quality-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#b7c5dc;margin-top:25px}.quality-heading output{font-weight:600;color:#bdd7ff;font-size:11px}input[type=range]{appearance:none;width:100%;height:4px;background:linear-gradient(to right,var(--accent) 0 89%,var(--track) 89%);border-radius:5px;margin:17px 0 11px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:2px solid #202c40;border-radius:50%;background:#a1c5ff;box-shadow:0 0 0 1px #6c9fe9}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid #202c40;border-radius:50%;background:#a1c5ff}input[type=range]:disabled{opacity:.3;cursor:not-allowed}.depth-picker{grid-template-columns:repeat(2,1fr);margin:14px 0 4px}.depth-picker button{font-size:11px}.toggle-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:11px;color:#b7c5dc;cursor:pointer;user-select:none}.toggle-row input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.switch{position:relative;flex-shrink:0;width:34px;height:20px;border-radius:10px;background:var(--track);border:1px solid #435069;transition:background .15s,border-color .15s}.switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#9aa6b9;transition:transform .15s,background .15s}.toggle-row input:checked+.switch{background:var(--accent-strong);border-color:#4f86e6}.toggle-row input:checked+.switch::after{transform:translateX(14px);background:#fff}.toggle-row input:focus-visible+.switch{outline:2px solid #8ab9ff;outline-offset:3px}.toggle-row:hover .switch{border-color:var(--accent)}.toggle-row:has(input:disabled){cursor:not-allowed}.toggle-row input:disabled+.switch{opacity:.4}
.format-note{font-size:10px;color:#9aacc7;line-height:1.6;min-height:16px;margin:7px 0 0}.audio-quality{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:25px;color:#b7c5dc;font-size:11px;height:36px}.audio-quality select{font-size:11px;color:#c3daff;background:#26364e;border:1px solid #405472;border-radius:5px;padding:7px 10px;min-width:100px;max-width:163px}.audio-quality select:disabled{opacity:.4}#audio-note{margin-top:10px}.convert-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#2c64cf;color:#fff;border-radius:8px;padding:14px 13px;margin-top:27px;font-size:12px;font-weight:650;transition:background .15s}.convert-button>span:last-child{margin-left:auto}.convert-button>span:first-child{margin-right:auto}.convert-button svg{width:16px;height:16px}.convert-button:hover{background:#316cdc}.convert-button:disabled{background:#28364c;color:#8194b2}.cancel-button{display:block;margin:11px auto -3px;font-size:10px}
dialog{border:1px solid #3b4b65;border-radius:18px;padding:30px;width:min(560px,calc(100% - 32px));color:#c1d2ed;background:#1c2533;box-shadow:0 24px 80px #0008;max-height:85vh}dialog::backdrop{background:#090d15bb;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}dialog h2{font:600 25px Manrope,sans-serif;letter-spacing:-.6px;margin:12px 0 22px;color:#e0eaff}dialog p,dialog li{font-size:12px;color:#a8b8d1;line-height:1.7}dialog ul{padding-left:19px}dialog li{padding:3px 0}dialog b{color:#c9dcfb;font-weight:600}.credits{border-top:1px solid #35465e;padding-top:16px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#a9cbff;color:#102440;padding:13px 20px;border-radius:10px;box-shadow:0 8px 40px #0006;z-index:10;font-size:12px;max-width:min(520px,90vw);line-height:1.6;text-align:center}
@keyframes pulse{50%{opacity:.45}}@keyframes indeterminate{0%{transform:translateX(-110%)}100%{transform:translateX(440%)}}
@media(min-width:1400px){.wrap{max-width:1180px}.workspace{grid-template-columns:minmax(0,1fr) 320px}.dropzone{min-height:330px;padding-top:47px}.settings-card{padding:27px 24px}.mode-switch{margin-top:45px}}
@media(max-width:900px){.wrap{padding-left:24px;padding-right:24px}.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.settings-card{padding:23px 18px}.file-row{gap:8px;padding:14px 13px;grid-template-columns:32px minmax(0,1fr) 61px 25px 20px}.file-thumb{width:32px;height:36px}.file-format{width:61px}}
@media(max-width:720px){.header{height:80px}.brand{font-size:24px}.brand-icon{width:34px;height:34px}.privacy-pill{font-size:10px}.header-right{gap:10px}.mode-switch{margin:28px 0 20px;width:100%}.mode-switch button{flex:1;width:auto}.workspace{grid-template-columns:1fr;gap:18px}.dropzone{min-height:280px;padding-top:29px}.settings-card{padding:24px}.main-column{gap:18px}.format-picker button{padding:12px 0}.convert-button{padding:15px}.file-row{padding:15px 18px}.quality-heading{margin-top:22px}}
@media(max-width:390px){.wrap{padding-left:17px;padding-right:17px}.privacy-pill{font-size:9px}.header-right{gap:4px}.brand{font-size:22px}.file-row{padding:14px 12px;gap:6px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
