/* Upload and conversion states */
.converter-zone { min-width:0; }
.converter-zone.has-files > .text_wrapper { display:none !important; }
.uploader-wrapper.has-selection .upload-skeleton { display:none !important; }
.stage-header { display:none;align-items:center;gap:20px;text-align:left;margin:0 0 26px; }
.converter-zone.has-files .stage-header { display:flex; }
.stage-orbit { width:64px;height:64px;flex:0 0 64px;border:1px solid var(--primary-soft-2);border-radius:22px;background:var(--primary-soft);position:relative;display:grid;place-items:center;color:var(--primary-text); }
.stage-orbit::before { content:'';position:absolute;inset:-6px;border:2px solid transparent;border-top-color:var(--primary);border-right-color:var(--primary-soft-2);border-radius:26px;animation:stage-spin 2.4s linear infinite; }
.stage-symbol { font-size:29px;font-weight:600;line-height:1; }
.stage-copy { flex:1;min-width:0; }
.stage-eyebrow { display:block;font-size:10px;letter-spacing:1.7px;font-weight:800;color:var(--primary-text);margin-bottom:5px; }
.stage-title { font-size:clamp(19px,2vw,25px);letter-spacing:-.5px;line-height:1.25;font-weight:700;margin:0 0 6px;color:var(--text); }
.stage-caption { color:var(--text-muted);font-size:13px;line-height:1.6;margin:0; }
.stage-count { white-space:nowrap;font-size:11px;font-weight:700;color:var(--text-muted);border:1px solid var(--border);padding:7px 11px;border-radius:30px; }
.converter-zone[data-phase=ready] .stage-orbit::before,.converter-zone[data-phase=done] .stage-orbit::before,.converter-zone[data-phase=error] .stage-orbit::before { animation:none;border-color:var(--primary-soft-2); }
.drop_uploader.converter-zone ul.files { width:100%;margin:0 !important;padding:0 !important; }
.drop_uploader.converter-zone ul.files > li { flex-wrap:wrap !important;gap:12px 16px !important;padding:20px !important;border-radius:18px !important;min-width:0;position:relative;text-align:left;transition:border-color .25s,box-shadow .25s; }
.drop_uploader.converter-zone ul.files > li[data-phase=uploading],.drop_uploader.converter-zone ul.files > li[data-phase=processing] { border-color:var(--primary-soft-2) !important;box-shadow:0 0 0 1px var(--primary-soft),0 10px 30px rgba(0,0,0,.05); }
.drop_uploader.converter-zone ul.files > li .upload-file-info { display:flex !important;align-items:center;gap:12px;flex:1 1 220px;min-width:0;overflow:hidden; }
.file-emblem { width:44px;height:48px;flex:0 0 44px;display:grid;place-items:center;background:var(--primary-soft);border:1px solid var(--primary-soft-2);border-radius:12px;color:var(--primary-text); }
.file-copy { display:flex;min-width:0;flex:1;flex-direction:column;gap:4px; }
.upload-file-name { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px;color:var(--text); }
.file-copy .file-size { font-size:11px;margin:0;line-height:1.5; }
.converter-zone .m-options { flex:0 0 auto;margin-left:auto;max-width:100%; }
.converter-zone .du_progress { display:none !important; }
.converter-zone ul.files > li > .transfer-state { flex:1 0 100%;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:7px;line-height:1.6;order:2; }
.transfer-state::before { content:'';width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--primary); }
[data-phase=uploading] > .transfer-state::before,[data-phase=processing] > .transfer-state::before { animation:stage-pulse 1.4s ease-in-out infinite; }
[data-phase=error] > .transfer-state { color:#e57979 !important; }
[data-phase=error] > .transfer-state::before { background:#e57979; }
.converter-zone .conv-progress { flex:1 0 100% !important;min-width:0;order:3;display:flex;align-items:center;gap:14px;margin:0 !important; }
.converter-zone .conv-progress-track { height:7px;background:var(--surface);border:0;position:relative; }
.converter-zone .conv-progress-bar { position:relative;min-height:7px;background:linear-gradient(90deg,#00a66c,#25d49d);transition:width .35s ease; }
.converter-zone .conv-progress-bar::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:stage-shimmer 1.8s ease-in-out infinite; }
.converter-zone .conv-progress-text { min-width:40px;color:var(--primary-text);font-size:12px;font-variant-numeric:tabular-nums; }
.converter-zone [data-phase=queued] .conv-progress-bar,.converter-zone [data-phase=processing][data-progress-known=false] .conv-progress-bar { width:32% !important;animation:stage-wait 1.8s ease-in-out infinite; }
.converter-zone [data-phase=done] .conv-progress-bar::after { animation:none;display:none; }
.converter-zone .right-options.status::after { display:none !important; }
.converter-zone .right-options.status .badge { display:inline-block;max-width:100%;white-space:normal;line-height:1.5;font-size:11px;padding:6px 10px; }
.converter-zone .dl-result-item .dl-file-info { flex:1 1 220px;min-width:0; }
.converter-zone .dl-file-name { font-size:14px; }
.converter-zone .right-options.completed { align-items:center;gap:8px;flex-wrap:wrap; }
.converter-zone [data-phase=done] .right-options.completed { display:flex !important; }
.converter-zone .dl-main-btn { min-height:44px;justify-content:center; }
.converter-zone .dl-result-item .out-size { margin:0; }
.converter-zone .openSetting,.converter-zone .action-delete { min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer; }
.converter-zone .openSetting:focus-visible,.converter-zone .action-delete:focus-visible { outline:2px solid var(--primary);outline-offset:2px;border-radius:8px; }
.converter-zone .action-delete { position:static !important;flex:0 0 40px; }
.converter-zone .btn-format { min-height:42px; }
.converter-zone .select-format { max-width:calc(100vw - 48px);right:0;left:auto !important; }
.sound-wave { display:flex;align-items:center;gap:3px;height:24px; }
.sound-wave i { width:3px;height:9px;border-radius:4px;background:currentColor;animation:stage-wave 1s ease-in-out infinite; }
.sound-wave i:nth-child(2) { height:19px;animation-delay:-.2s; }
.sound-wave i:nth-child(3) { height:25px;animation-delay:-.4s; }
.sound-wave i:nth-child(4) { height:15px;animation-delay:-.6s; }
[data-phase=queued] .sound-wave i { animation-play-state:paused; }
[data-phase=done] .sound-wave { display:none; }
[data-phase=done] .file-emblem::after { content:'\2713';font-size:23px;font-weight:600; }
[data-phase=error] .sound-wave i { animation:none; }
@keyframes stage-spin { to { transform:rotate(360deg); } }
@keyframes stage-pulse { 50% { opacity:.35;box-shadow:0 0 0 4px var(--primary-soft); } }
@keyframes stage-shimmer { to { transform:translateX(300%); } }
@keyframes stage-wait { 0%,100% { transform:translateX(-10%); } 50% { transform:translateX(220%); } }
@keyframes stage-wave { 50% { transform:scaleY(.35); } }
@media(max-width:767px) {
 .uploader-wrapper { padding:24px 16px !important; }
 .drop_uploader.converter-zone { padding:0 !important;min-height:0 !important; }
 .stage-header { gap:14px;flex-wrap:wrap;margin-bottom:22px; }
 .stage-orbit { width:48px;height:48px;flex-basis:48px;border-radius:16px; }
 .stage-orbit::before { inset:-4px;border-radius:20px; }
 .stage-symbol { font-size:24px; }
 .stage-title { font-size:20px; }
 .stage-caption { font-size:12px; }
 .stage-count { margin-left:62px;margin-top:-7px;padding:4px 9px;font-size:10px; }
 .drop_uploader.converter-zone ul.files > li { padding:16px !important;gap:12px !important; }
 .drop_uploader.converter-zone ul.files > li .upload-file-info,.converter-zone .dl-result-item .dl-file-info { flex:1 1 calc(100% - 50px);width:auto !important; }
 .converter-zone .m-options { width:100%;flex:1 0 100%;margin-left:0;justify-content:space-between;order:1; }
 .converter-zone [data-phase=uploading] .m-options { display:none !important; }
 .converter-zone .right-options.completed,.converter-zone .dl-main-btn { width:100%; }
 .converter-zone .dl-result-item .out-size { display:block;text-align:center;width:100%; }
 .converter-zone .right-options.ready-to-upload { flex-wrap:wrap;max-width:100%; }
 .converter-zone .select-format { max-width:calc(100vw - 72px);width:320px !important; }
 .converter-zone .dl-result-item .right-options.status { margin-left:0; }
 .uploader-wrapper #submit_btn { width:100%;min-height:52px;white-space:normal; }
 .uploader-wrapper > p { font-size:12px;line-height:1.7;margin:18px 0 !important; }
 .top-header h1 { font-size:clamp(29px,8vw,44px) !important;line-height:1.15;overflow-wrap:break-word; }
 .top-header h2 { font-size:16px !important;line-height:1.6; }
 .aqp-pills { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
 .converter-zone *,.converter-zone *::before,.converter-zone *::after { animation:none !important;transition:none !important; }
}
/* Override legacy column rules so each file keeps its name and controls. */
.drop_uploader.converter-zone ul.files > li { flex-direction:row !important; }
.converter-zone .stage-caption { margin:0 !important;font-size:13px !important;line-height:1.6 !important; }
.converter-zone .dl-result-item .ready-to-upload { display:none !important; }
@media(max-width:767px) {
 .converter-zone.has-files .stage-header { display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 14px; }
 .stage-orbit { grid-column:1;grid-row:1 / span 2;align-self:start; }
 .stage-copy { grid-column:2; }
 .stage-count { grid-column:2;justify-self:start;margin:0; }
 .converter-zone .stage-caption { font-size:12px !important; }
 .drop_uploader.converter-zone ul.files > li .upload-file-info { flex:1 1 calc(100% - 56px) !important;width:auto !important; }
}
.converter-zone .action-delete { margin:0 !important; }
.drop_uploader.converter-zone ul.files > li > i.action-delete { position:static !important;top:auto !important;right:auto !important;transform:none !important;margin:0 !important; }
@media(max-width:767px) {
 .drop_uploader.converter-zone .select-format { left:0 !important;right:auto !important;transform:none !important; }
}
@media(max-width:767px) {
 .converter-zone .select-format .wrapper_format { flex-direction:column;gap:10px;max-height:300px !important; }
 .converter-zone .select-format .wrapper_format::before { display:none !important; }
 .converter-zone .select-format .wrapper_format .types { width:100% !important;flex-direction:row;flex-wrap:wrap;flex-shrink:0; }
 .converter-zone .select-format .wrapper_format .types li { flex:0 0 auto; }
 .converter-zone .select-format .wrapper_format .formats,.converter-zone .select-format .wrapper_format .scroll-wrapper { width:100% !important;flex:1 1 auto !important; }
 .converter-zone .select-format .formats-inner > ul { display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px !important; }
 .converter-zone .select-format .formats-inner > ul > li { width:100% !important;min-width:0 !important;margin:0 !important;min-height:40px;display:flex;align-items:center;justify-content:center; }
}
/* Keep all feedback inside the file card; no extra header or height. */
.converter-zone .stage-header,.converter-zone.has-files .stage-header { display:none !important; }
.drop_uploader.converter-zone ul.files > li { padding:16px !important;gap:8px 12px !important; }
.converter-zone .file-copy { gap:2px; }
.converter-zone .file-copy .transfer-state { display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.4;color:var(--text-muted); }
.converter-zone [data-phase=error] .transfer-state { color:#e57979 !important; }
.converter-zone .file-emblem { position:relative;width:38px;height:42px;flex-basis:38px; }
.converter-zone [data-phase=uploading] .file-emblem::before,.converter-zone [data-phase=processing] .file-emblem::before { content:'';position:absolute;inset:-4px;border:2px solid transparent;border-top-color:var(--primary);border-right-color:var(--primary-soft-2);border-radius:15px;animation:stage-spin 1.6s linear infinite;pointer-events:none; }
/* Center the compact cards and tighten vertical spacing. */
.drop_uploader.drop_zone.converter-zone ul.files { margin-left:auto !important;margin-right:auto !important; }
.drop_uploader.drop_zone.converter-zone ul.files > li { padding:10px 16px !important; }
.uploader-wrapper.has-selection { padding-top:24px !important;padding-bottom:24px !important; }
@media(max-width:767px) {
 .uploader-wrapper.has-selection { padding-top:16px !important;padding-bottom:16px !important; }
}
