.format-converter-page{max-width:1320px;margin:0 auto;color:var(--text)}
.format-converter-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 24px}
.format-converter-eyebrow{margin:0 0 8px;color:var(--lime);font:600 10px/1.4 var(--mono);letter-spacing:.13em}
.format-converter-heading h1{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.045em}
.format-converter-heading p:not(.format-converter-eyebrow){margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.format-converter-privacy{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;white-space:nowrap}
.format-converter-privacy i{width:7px;height:7px;border-radius:50%;background:#3bc995;box-shadow:0 0 0 4px #3bc9951b}
.format-converter-dropzone{position:relative;display:flex;align-items:center;gap:16px;min-height:112px;padding:21px 24px;border:1px dashed #6679d4;background:linear-gradient(110deg,#4969df12,transparent 65%),var(--surface);border-radius:15px;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.format-converter-dropzone:hover,.format-converter-dropzone.upload-gesture-active{border-color:var(--lime);background-color:#4969df12;box-shadow:0 0 0 4px #4969df16}
.format-converter-dropzone:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.format-converter-upload-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:13px;background:#4969df1b;color:#86a0ff;font-size:27px;font-weight:500}
.format-converter-drop-copy{display:grid;gap:5px;min-width:0}
.format-converter-drop-copy strong{font-size:15px;font-weight:700}
.format-converter-drop-copy small{color:var(--muted);font-size:11px;line-height:1.5}
.format-converter-format-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:3px 0 1px}
.format-converter-format-category{display:grid;align-content:start;gap:6px;min-width:0;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.format-converter-format-category-heading{display:flex;align-items:center;gap:6px;color:var(--text);font-size:11px;line-height:1}
.format-converter-format-category-heading b{font-weight:700}
.format-converter-format-category-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#4969df1b;color:#86a0ff;font-size:13px;font-style:normal}
.format-converter-format-category[data-family="image"] .format-converter-format-category-icon{background:#35b9821b;color:#38b986}
.format-converter-format-category[data-family="audio"] .format-converter-format-category-icon{background:#ed9b351b;color:#e69b35}
.format-converter-format-category[data-family="video"] .format-converter-format-category-icon{background:#ac69e91b;color:#b77bed;font-size:10px}
.format-converter-format-category-list{display:flex;flex-wrap:wrap;gap:4px}
.format-converter-more-formats{color:var(--muted);font-size:9px;line-height:1.4}
.format-converter-more-formats summary{width:max-content;cursor:pointer;user-select:none}
.format-converter-more-formats summary:hover{color:var(--text)}
.format-converter-extra-formats{display:flex;flex-wrap:wrap;gap:4px;padding-top:5px}
.format-converter-format-badge{padding:3px 5px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--muted);font:500 9px/1.1 var(--mono);white-space:nowrap}
.format-converter-browse{margin-left:auto;padding:10px 15px;border-radius:8px;background:var(--lime);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.format-converter-layout{display:grid;grid-template-columns:minmax(0,1fr) 305px;align-items:start;gap:18px;margin-top:20px}
.format-converter-files-card,.format-converter-output-card,.format-converter-results{border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.format-converter-files-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.format-converter-files-card>header>div:first-child{display:grid;gap:3px}
.format-converter-files-card h2,.format-converter-output-card h2,.format-converter-results h2{margin:0;font-size:14px;letter-spacing:-.015em}
.format-converter-files-card header span{color:var(--muted);font-size:11px}
.format-converter-files-card header>div:last-child{display:flex;align-items:center;gap:16px}
.format-converter-files-card .text-btn{font-size:11px}
.format-converter-files-card .primary-btn.small{padding:8px 11px;font-size:11px}
.format-converter-groups{display:grid;gap:11px;padding:13px}
.format-converter-empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;text-align:center}
.format-converter-empty>b{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:#8ea4ff;font-size:21px}
.format-converter-empty strong{font-size:13px}
.format-converter-empty span{max-width:340px;color:var(--muted);font-size:11px;line-height:1.55}
.format-converter-group{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.format-converter-group>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,#4969df0b,transparent 70%)}
.format-converter-group>header>div:first-child{display:grid;gap:3px;min-width:0}
.format-converter-group h3{margin:0;font-size:12px;font-weight:700}
.format-converter-group header span{color:var(--muted);font-size:10px}
.format-converter-target{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;white-space:nowrap}
.format-converter-target select{min-width:150px;max-width:min(260px,52vw);height:34px;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font:600 11px var(--font);outline:0}
.format-converter-target select:focus{border-color:var(--lime);box-shadow:0 0 0 3px #4969df20}
.format-converter-file-list{margin:0;padding:0;list-style:none}
.format-converter-file{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border-bottom:1px solid var(--line)}
.format-converter-file:last-child{border-bottom:0}
.format-converter-file-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:7px;background:#4969df12;color:var(--lime);font:600 8px var(--mono)}
.format-converter-file-copy,.format-converter-result-copy{display:grid;gap:3px;min-width:0;flex:1}
.format-converter-file-copy strong,.format-converter-result-copy strong{overflow:hidden;color:var(--text);font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.format-converter-file-copy small,.format-converter-result-copy small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.format-converter-remove{width:26px;height:26px;flex:none;border:0;background:transparent;color:var(--muted);font-size:19px;line-height:1}
.format-converter-remove:hover{color:#ff8f8f}
.format-converter-output-card{position:sticky;top:96px;padding:17px}
.format-converter-output-card>p:not(.format-converter-status):not(.format-converter-note){margin:8px 0 16px;color:var(--muted);font-size:11px;line-height:1.55}
.format-converter-progress{margin:14px 0 12px}
.format-converter-progress>div{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;color:var(--muted);font-size:10px}
.format-converter-progress>div strong{color:var(--text);font:500 10px var(--mono)}
.format-converter-progress-track{display:block;height:5px;overflow:hidden;border-radius:99px;background:var(--line)}
.format-converter-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6785ff,#48d0c2);transition:width .2s ease}
.format-converter-status{min-height:18px;margin:0 0 9px;color:var(--muted);font-size:10px;line-height:1.5}
.format-converter-status.is-success{color:#16835d}.format-converter-status.is-error{color:#c83d43}.format-converter-status.is-working{color:var(--lime)}
.format-converter-run,.format-converter-download{display:flex;width:100%;justify-content:center;margin-top:8px}
.format-converter-run{padding:11px 14px;font-size:12px}
.format-converter-download{padding:10px 14px;font-size:11px}
.format-converter-note{margin:13px 0 0;color:var(--muted);font-size:10px;line-height:1.55}
.format-converter-results{margin-top:18px;padding:16px}
.format-converter-results h2{margin-bottom:12px}
.format-converter-result-list{display:grid;gap:7px}
.format-converter-result{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.format-converter-result-mark{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#e8f7f1;color:#16835d;font-size:13px;font-weight:700}
.format-converter-result.is-error .format-converter-result-mark{background:#fff0f0;color:#c83d43}
.format-converter-result.is-error .format-converter-result-copy small{color:#c83d43;white-space:normal}
.format-converter-result .ghost-btn{padding:6px 10px;font-size:10px}
@media(max-width:850px){.format-converter-layout{grid-template-columns:minmax(0,1fr) 270px;gap:12px}.format-converter-output-card{top:84px}}
@media(max-width:850px){.format-converter-format-categories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.format-converter-heading{align-items:flex-start;flex-direction:column;gap:12px}.format-converter-privacy{white-space:normal}.format-converter-layout{grid-template-columns:1fr}.format-converter-output-card{position:static;order:-1}.format-converter-files-card>header{align-items:flex-start}.format-converter-group>header{align-items:flex-start;flex-direction:column}.format-converter-target{width:100%;justify-content:space-between}.format-converter-target select{flex:1;max-width:none}.format-converter-dropzone{align-items:flex-start;padding:17px;gap:11px}.format-converter-browse{align-self:flex-start;padding:9px 11px;font-size:10px}.format-converter-upload-icon{width:40px;height:40px}.format-converter-drop-copy{flex:1}.format-converter-drop-copy strong{font-size:13px}.format-converter-drop-copy small{font-size:10px}}

/* Keep the empty state focused on upload and make every accepted family visible. */
#formatConverterLayout[hidden]{display:none}
body:has(#panel-format-converter.active) #toolGuide{display:none}
.format-converter-dropzone{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:14px;min-height:0;padding:28px 30px}
.format-converter-drop-copy{display:grid;grid-column:1;gap:10px;min-width:0}
.format-converter-drop-copy strong{font-size:17px}
.format-converter-drop-copy small{font-size:12px}
.format-converter-format-categories{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;margin:2px 0 0}
.format-converter-format-category{min-height:128px;gap:11px;padding:15px 16px;border-radius:11px}
.format-converter-format-category-heading{gap:9px;font-size:14px}
.format-converter-format-category-icon{width:27px;height:27px;font-size:16px}
.format-converter-format-category-list{gap:7px}
.format-converter-format-badge{padding:6px 8px;font-size:12px}
.format-converter-browse{display:flex;align-items:center;justify-content:center;justify-self:center;width:min(100%,360px);margin:4px 0 0;padding:13px 20px;border-radius:10px;font-size:14px}
@media(max-width:680px){.format-converter-dropzone{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px;padding:20px}.format-converter-drop-copy{grid-column:1;gap:9px}.format-converter-drop-copy strong{font-size:14px}.format-converter-drop-copy small{font-size:10px}.format-converter-format-categories{gap:7px}.format-converter-format-category{min-height:104px;padding:11px;gap:8px}.format-converter-format-category-heading{font-size:12px}.format-converter-format-badge{padding:5px 6px;font-size:10px}.format-converter-browse{width:min(100%,320px);padding:11px 16px;font-size:13px}}
@media(max-width:420px){.format-converter-dropzone{grid-template-columns:1fr;padding:16px}.format-converter-drop-copy{grid-column:1}.format-converter-format-categories{grid-template-columns:1fr}.format-converter-format-category{min-height:0;padding:12px}}