/* File Converter v3 "Studio" — one glass console on a cinematic dark stage (sibling of file-compressor v5).
   Mobile-first (base = 360–719px; 720 / 960 breakpoints). Verified at 390×844 and 1280×800.
   Sections: tokens · base · buttons · hero · console · drop zone · picker (tiles) · options · results head ·
   queue rows · settings form · empty state · history · drag veil · overlays (preview / compare) · toasts ·
   learn strip (collapsed <details>) · breakpoints · touch · reduced motion */

:root {
    --bg: #07070b;
    --panel: rgba(255, 255, 255, .035); --panel-2: rgba(255, 255, 255, .05); --panel-3: rgba(255, 255, 255, .08);
    --solid: #0f0f17; --solid-2: #15151f; --solid-3: #1c1c28;
    --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .14); --line-3: rgba(255, 255, 255, .22);
    --blue: #60a5fa; --violet: #a78bfa; --ok: #34d399; --danger: #fb7185; --warn: #fbbf24;
    --grad: linear-gradient(90deg, #3b82f6, #8b5cf6);
    --grad-diag: linear-gradient(135deg, #3b82f6, #8b5cf6);
    --grad-btn: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); /* white text ≥ 5:1 on both stops */
    --blue-soft: rgba(96, 165, 250, .14); --violet-soft: rgba(167, 139, 250, .16);
    --ok-soft: rgba(52, 211, 153, .14); --danger-soft: rgba(251, 113, 133, .14); --warn-soft: rgba(251, 191, 36, .14);
    --accent-text: #bfdbfe; --violet-text: #ddd6fe;
    --ring: rgba(96, 165, 250, .35);
    --t-image: #c084fc; --t-video: #f472b6; --t-audio: #22d3ee; --t-document: #fb7185; --t-data: #34d399; --t-subtitle: #fbbf24; --t-other: #9ca3af;
    --text: #fff; --text-2: rgba(255, 255, 255, .72); --text-3: rgba(255, 255, 255, .48); --text-4: rgba(255, 255, 255, .3);
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 380ms; --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.34, 1.4, .64, 1);
    --console-w: 1160px; --left-w: 420px; --ab-h: 0px;
    --tt-topnav-h: 64px; /* seeded before tt-navbar.js measures the real bar */
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; } /* clip, not hidden — hidden breaks position:sticky */
body {
    font: 14px/1.45 var(--font); color: var(--text); min-height: 100dvh; -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 620px at 6% -8%, rgba(59, 130, 246, .2), transparent 62%),
        radial-gradient(900px 620px at 94% -4%, rgba(139, 92, 246, .22), transparent 62%),
        var(--bg);
}
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
select {
    appearance: none; -webkit-appearance: none;
    background: var(--solid-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bfdbfe' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    padding-right: 28px; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer;
}
/* Native <option>s do NOT inherit the dark theme — literal hex or the open list is white-on-white. */
select option, select optgroup { background-color: #1a1a24; color: #ffffff; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
a { color: var(--accent-text); }

.stage { position: relative; min-height: calc(100dvh - var(--tt-topnav-h)); padding: 28px 12px 48px; isolation: isolate; }
.stage::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 24px 24px;
    -webkit-mask: linear-gradient(#000 0, #000 640px, transparent 1100px); mask: linear-gradient(#000 0, #000 640px, transparent 1100px);
}
.wrap { max-width: var(--console-w); margin: 0 auto; }

/* ------------------------------------------------------------ buttons */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
    transition: filter var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform 60ms ease, box-shadow var(--dur-2) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px rgba(59, 130, 246, .18), 0 2px 6px rgba(0, 0, 0, .4); }
.btn-primary:hover { filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 28px rgba(99, 102, 241, .3), 0 2px 6px rgba(0, 0, 0, .4); }
.btn-secondary { background: rgba(255, 255, 255, .07); color: var(--text); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn-secondary:hover { background: rgba(255, 255, 255, .12); border-color: var(--line-3); }
.btn-soft { background: rgba(255, 255, 255, .1); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-soft:hover { background: rgba(255, 255, 255, .16); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.icon-btn {
    width: 36px; height: 36px; flex-shrink: 0; display: inline-grid; place-items: center;
    border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--text-2); font-size: 13px;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--text); border-color: var(--line-2); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn.quiet { border-color: transparent; color: var(--text-3); }
.icon-btn.quiet:hover { border-color: var(--line-2); color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); border-color: rgba(251, 113, 133, .35); }
.icon-btn.accent, .icon-btn[aria-expanded="true"] { color: var(--accent-text); background: var(--blue-soft); border-color: rgba(96, 165, 250, .4); }
.link-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border: none; border-radius: 8px; background: transparent;
    color: var(--text-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.link-btn i { color: var(--blue); font-size: 11px; }
.link-btn:hover, .link-btn:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); }
.link-btn.danger, .link-btn.danger i { color: var(--danger); }
.link-btn.danger:hover { background: var(--danger-soft); }
.count-badge { display: inline-block; background: var(--blue-soft); color: var(--accent-text); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); min-width: 20px; text-align: center; }
.phone-only { display: none !important; }

/* ---------------------------------------------------------------- hero */
.hero { text-align: center; padding: 0 8px; }
.tool-title { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
.tool-sub { margin: 8px auto 0; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tool-sub i { color: var(--ok); font-size: 11px; margin-right: 4px; }
.pair-badge { display: inline-flex; align-items: center; gap: 10px; margin: 12px auto 0; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); background: var(--panel-2); border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }
.pair-badge b { color: #fff; font-weight: 700; letter-spacing: .02em; }
.pair-badge i { color: var(--blue); font-size: 11px; }
.pair-badge .x { margin-left: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .08); color: var(--text-2); font-size: 11px; display: grid; place-items: center; }
.pair-badge .x:hover { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------- console */
.console {
    position: relative; margin-top: 22px; padding: 16px; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.console-left, .console-right { min-width: 0; }
.console-left { display: flex; flex-direction: column; gap: 10px; }
/* the left column is a flex column: its children must never be squeezed to their min-height when the
   column is taller than the viewport (that clipped the drop zone and cut the Options panel in half) */
.console-left > * { flex-shrink: 0; }
.step-head { display: flex; align-items: center; gap: 10px; min-height: 22px; padding: 0 2px; }
.step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 3px rgba(96, 165, 250, .12); flex-shrink: 0; }
.step-t { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.step-hint { font-size: 12px; color: var(--text-3); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.step-action { margin-left: auto; min-height: 28px; padding: 0 8px; font-size: 12.5px; }
.console-right .step-head { margin-bottom: 12px; }
@media (max-width: 559px) { .step-hint { display: none; } }

/* ----------------------------------------------------------- drop zone */
@property --fx-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.drop-zone {
    position: relative; isolation: isolate; flex-shrink: 0; min-height: 220px; padding: 22px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 1.5px dashed var(--line-3); border-radius: var(--r-lg); background: rgba(255, 255, 255, .02); text-align: center; cursor: pointer;
    transition: border-color 160ms var(--ease), background 160ms var(--ease), min-height var(--dur-2) var(--ease), padding var(--dur-2) var(--ease);
}
.drop-zone::before {
    content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 2px;
    background: conic-gradient(from var(--fx-angle), transparent 0 55%, #3b82f6 72%, #8b5cf6 86%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity var(--dur-2) var(--ease); animation: fx-spin 2.6s linear infinite; animation-play-state: paused;
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.dragover { border-color: transparent; background: rgba(96, 165, 250, .04); }
.drop-zone:hover::before, .drop-zone:focus-visible::before, .drop-zone.dragover::before { opacity: 1; animation-play-state: running; }
.drop-zone.dragover { background: rgba(96, 165, 250, .08); box-shadow: 0 0 0 6px rgba(96, 165, 250, .08), 0 0 40px rgba(96, 165, 250, .12); }
.drop-art { display: block; overflow: visible; margin-bottom: 6px; filter: drop-shadow(0 6px 18px rgba(96, 165, 250, .2)); }
.drop-art .art-arrow { transform-box: view-box; transform-origin: 48px 48px; animation: fx-bob 2.2s ease-in-out infinite; transition: transform var(--dur-2) var(--ease); }
.drop-zone.dragover .drop-art .art-arrow { animation: none; transform: translateX(6px); }
@keyframes fx-bob { 50% { transform: translateX(4px); } }
.drop-title { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text); }
.drop-sub { font-size: 13px; color: var(--text-2); }
.drop-sub kbd { font: 600 11px/1 var(--font); padding: 2px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; color: var(--text-2); }
.drop-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; max-width: 420px; }
.drop-cats span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 11.5px; color: var(--text-3); cursor: help; }
.drop-cats span i { font-size: 10px; }
.drop-cats [data-cat="image"] i { color: var(--t-image); } .drop-cats [data-cat="video"] i { color: var(--t-video); } .drop-cats [data-cat="audio"] i { color: var(--t-audio); }
.drop-cats [data-cat="document"] i { color: var(--t-document); } .drop-cats [data-cat="data"] i { color: var(--t-data); } .drop-cats [data-cat="subtitle"] i { color: var(--t-subtitle); }
.drop-lock { margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.drop-lock i { color: var(--ok); font-size: 10px; margin-right: 4px; }
.console.has-files .drop-zone .drop-lock, .console.has-files .drop-zone .drop-cats { display: none; }
.drop-compact { display: none; align-items: center; gap: 10px; text-align: left; }
.drop-compact i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-size: 12px; flex-shrink: 0; }
.drop-compact strong { font-size: 14px; font-weight: 600; color: var(--text); }

/* ------------------------------------------------------ picker (step 2) */
.picker { display: flex; flex-direction: column; gap: 10px; }
.picker-empty { padding: 18px 14px; border-radius: var(--r-lg); border: 1px dashed var(--line); text-align: center; font-size: 13px; color: var(--text-3); }
.picker-empty i { color: var(--blue); margin-right: 6px; }
.pg { padding: 12px 12px 10px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); animation: fx-rise var(--dur-3) var(--ease); }
.pg-head { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 2px 8px; }
.pg-head > i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; background: rgba(255, 255, 255, .06); color: var(--text-2); flex-shrink: 0; }
.pg[data-cat="image"] .pg-head > i { color: var(--t-image); background: rgba(192, 132, 252, .14); }
.pg[data-cat="video"] .pg-head > i { color: var(--t-video); background: rgba(244, 114, 182, .14); }
.pg[data-cat="audio"] .pg-head > i { color: var(--t-audio); background: rgba(34, 211, 238, .14); }
.pg[data-cat="document"] .pg-head > i { color: var(--t-document); background: rgba(251, 113, 133, .14); }
.pg[data-cat="data"] .pg-head > i { color: var(--t-data); background: rgba(52, 211, 153, .14); }
.pg[data-cat="subtitle"] .pg-head > i { color: var(--t-subtitle); background: rgba(251, 191, 36, .14); }
.pg-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-sel { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pg-sel b { color: var(--accent-text); font-weight: 700; }
.pg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pg-tab { height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--text-3); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.pg-tab i { font-size: 10px; }
.pg-tab:hover { color: var(--text); border-color: var(--line-2); }
.pg-tab[aria-selected="true"] { color: var(--accent-text); background: var(--blue-soft); border-color: rgba(96, 165, 250, .45); }
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 9px 7px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text-2); text-align: left;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform 60ms ease;
}
.tile b { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--text); line-height: 1.1; }
.tile small { font-size: 10.5px; line-height: 1.2; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.tile:active { transform: translateY(1px); }
.tile[aria-selected="true"] { border-color: rgba(96, 165, 250, .7); background: var(--blue-soft); box-shadow: 0 0 0 1px rgba(96, 165, 250, .35), 0 6px 18px rgba(59, 130, 246, .18); }
.tile[aria-selected="true"] b { color: #fff; }
.tile[aria-selected="true"] small { color: var(--accent-text); }
.tile .via { position: absolute; top: 5px; right: 6px; font-size: 9px; color: var(--text-4); }
.tile[aria-selected="true"] .via { color: var(--accent-text); }
.pg-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--text-3); min-height: 18px; }
.pg-foot i { color: var(--blue); font-size: 10px; }
.pg-foot .via-note { display: inline-flex; align-items: center; gap: 5px; }

/* ------------------------------------------------- options disclosure */
.more-btn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin-top: 6px; padding: 0 6px; border: none; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; text-align: left; transition: color var(--dur-1) var(--ease); }
.more-btn > i:first-child { width: 30px; flex-shrink: 0; text-align: center; font-size: 13px; color: var(--blue); }
.more-btn .chev { margin-left: auto; font-size: 11px; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.more-btn:hover { color: var(--accent-text); }
.more-btn[aria-expanded="true"] { color: var(--accent-text); }
.more-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.more-btn .dot { display: none; position: absolute; top: 9px; left: 26px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--solid); }
.more-btn.has-changes .dot { display: block; }
.opts-panel { margin: 2px 0 4px; padding: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: var(--r-md); display: grid; gap: 12px; }
.opt-grid { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
.opt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.opt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.opt-head label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.opt-head label small { color: var(--text-3); font-weight: 400; }
.opt-val { font-size: 12px; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.opt-hint { font-size: 11.5px; line-height: 15px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opt select, .opt input[type="number"], .opt input[type="text"] { width: 100%; height: 36px; font-size: 13px; background: var(--solid-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); padding: 0 10px; }
.opt select { padding-right: 28px; }
.opt select:focus, .opt input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }
.opt input[type="range"] { width: 100%; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.opt input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); }
.opt input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--grad-diag); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.opt input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); }
.opt input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; }
.opt input[type="range"]:focus-visible { outline: none; }
.opt input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0; border-radius: var(--r-sm); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); border: 1px solid var(--line-2); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); transition: transform var(--dur-1) var(--ease); }
.switch input:checked + .switch-track { background: var(--grad-btn); border-color: transparent; }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch-text { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.opt-adv summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-2); min-height: 32px; list-style: none; display: flex; align-items: center; gap: 6px; }
.opt-adv summary::-webkit-details-marker { display: none; }
.opt-adv summary i { font-size: 11px; color: var(--blue); }
.opt-adv summary::after { content: '+'; margin-left: auto; color: var(--blue); font-size: 16px; }
.opt-adv[open] summary::after { content: '−'; }
.opt-adv .opt-grid { margin-top: 10px; }
.opt-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.opt-note { margin-right: auto; font-size: 12px; color: var(--warn); }
.opt-note:empty { display: none; }
.opts-panel > .muted { font-size: 13px; color: var(--text-3); }
/* global toggles under the picker */
.global-opts { display: flex; flex-direction: column; gap: 0; padding: 4px 6px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.global-opts .switch { min-height: 40px; padding: 0 6px; }
.global-opts .switch:hover { background: rgba(255, 255, 255, .04); }

/* -------------------------------------------------- results head + ring */
.rhead {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring text clear" "actions actions actions";
    gap: 12px 14px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); animation: fx-rise var(--dur-3) var(--ease);
}
@keyframes fx-rise { from { opacity: 0; transform: translateY(8px); } }
.ring-wrap { grid-area: ring; position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.ring { width: 100%; height: 100%; display: block; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 9; }
.ring-fill { fill: none; stroke: url(#fxRingGrad); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 700ms var(--ease); filter: drop-shadow(0 0 6px rgba(96, 165, 250, .35)); }
.rhead.all-done .ring-fill { stroke: var(--ok); filter: drop-shadow(0 0 6px rgba(52, 211, 153, .45)); }
.rhead.no-anim .ring-fill { transition: none; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-val { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.rhead.all-done .ring-val { color: var(--ok); }
.ring-cap { margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rh-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rh-sizes { font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-sizes .arrow { color: var(--text-4); font-weight: 400; margin: 0 7px; }
.rh-sizes .out { color: var(--ok); }
.rh-count { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-actions .btn { flex: 1 1 auto; height: 44px; }
.rh-actions .icon-btn { width: 44px; height: 44px; }
.rh-actions #clearAllBtn, .rh-actions #addMoreBtn { grid-area: clear; }
#clearAllBtn { position: relative; }
#clearAllBtn.confirm { width: auto; padding: 0 12px; background: var(--danger-soft); border-color: rgba(251, 113, 133, .5); display: inline-flex; align-items: center; gap: 6px; color: var(--danger); }
#clearAllBtn.confirm .ab-confirm { display: inline !important; font-size: 12px; font-weight: 600; white-space: nowrap; }
#downloadAllBtn.glow { animation: fx-glow 700ms var(--ease); }
@keyframes fx-glow { 40% { box-shadow: 0 0 0 8px rgba(52, 211, 153, .28); } }

/* ---------------------------------------------------------------- queue */
.queue { display: flex; flex-direction: column; border-radius: var(--r-lg); background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.queue:empty { display: none; }
.jrow { position: relative; padding: 10px 12px; min-height: 60px; scroll-margin-top: calc(var(--tt-topnav-h) + 80px); transition: background var(--dur-1) var(--ease); animation: fx-row-in var(--dur-2) var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
.jrow:first-child { border-radius: 15px 15px 0 0; }
.jrow:last-child { border-radius: 0 0 15px 15px; }
.jrow + .jrow { border-top: 1px solid var(--line); }
.jrow:hover { background: rgba(255, 255, 255, .03); }
.jrow[data-status="running"] { background: rgba(96, 165, 250, .04); }
.jrow[data-status="error"], .jrow[data-status="unsupported"] { background: rgba(251, 113, 133, .04); box-shadow: inset 2px 0 0 var(--danger); }
.jrow.no-anim { animation: none; }
.jrow.leaving { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.jrow.done-flash { animation: fx-row-done 700ms var(--ease); }
@keyframes fx-row-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes fx-row-done { from { background: rgba(52, 211, 153, .16); } }
.jrow::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); width: calc((100% - 24px) * var(--p, 0)); opacity: 0; transition: width 200ms linear, opacity var(--dur-2) var(--ease); pointer-events: none; }
.jrow[data-status="running"]::after { opacity: 1; }
.jrow.indeterminate::after { width: 30%; animation: fx-indet 1.2s ease-in-out infinite alternate; }
@keyframes fx-indet { from { transform: translateX(0); } to { transform: translateX(233%); } }
.jrow-main { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb sub" "result result" "notes notes" "actions actions"; column-gap: 12px; row-gap: 4px; align-items: center; }
.jsub { grid-area: sub; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.jthumb { grid-area: thumb; position: relative; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; font-size: 15px; color: var(--t-other); align-self: start; }
.jthumb[data-type="image"] { color: var(--t-image); background: rgba(192, 132, 252, .12); }
.jthumb[data-type="video"] { color: var(--t-video); background: rgba(244, 114, 182, .12); }
.jthumb[data-type="audio"] { color: var(--t-audio); background: rgba(34, 211, 238, .12); }
.jthumb[data-type="document"] { color: var(--t-document); background: rgba(251, 113, 133, .12); }
.jthumb[data-type="data"] { color: var(--t-data); background: rgba(52, 211, 153, .12); }
.jthumb[data-type="subtitle"] { color: var(--t-subtitle); background: rgba(251, 191, 36, .12); }
.jthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jthumb::before {
    content: ''; position: absolute; inset: -4px; border-radius: 13px; z-index: 1; pointer-events: none;
    background: conic-gradient(#3b82f6, #8b5cf6 calc(var(--p, 0) * 1turn), rgba(255, 255, 255, .08) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.jrow[data-status="running"] .jthumb { overflow: visible; }
.jrow[data-status="running"] .jthumb img { border-radius: 9px; }
.jrow[data-status="running"] .jthumb::before { opacity: 1; }
.jrow.indeterminate .jthumb::before { background: conic-gradient(#60a5fa 0 .25turn, rgba(255, 255, 255, .08) 0); animation: fx-ring-spin 1s linear infinite; }
.jrow[data-status="done"] .jthumb::before { background: conic-gradient(var(--ok) 1turn, transparent 0); animation: fx-ring-out 1.2s forwards; }
@keyframes fx-ring-spin { to { transform: rotate(1turn); } }
@keyframes fx-ring-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@supports not (mask: radial-gradient(#000, #000)) { .jthumb::before { display: none; } .jrow[data-status="running"] .jthumb { border-color: var(--blue); } }
.jname { grid-area: name; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jmeta { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; font-size: 11.5px; line-height: 16px; color: var(--text-3); min-width: 0; }   /* wraps at the separators — never ellipsized */
.jmeta > span { white-space: nowrap; }
.jmeta > span:not([hidden]):not(:empty) ~ span:not([hidden]):not(:empty)::before { content: '·'; margin: 0 6px; color: var(--text-4); }
.jmeta .kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.jmeta .custom { color: var(--warn); }
.jto { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.jto .arrow { color: var(--text-4); font-size: 12px; flex-shrink: 0; }
.to-select { height: 36px; min-width: 0; flex: 1 1 auto; max-width: 240px; font-size: 13px; font-weight: 600; padding: 0 28px 0 10px; background-color: var(--solid-2); }
.to-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }
.jto .via { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.jto .via i { font-size: 10px; color: var(--violet); }
.jresult { grid-area: result; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; min-width: 0; line-height: 1.15; }
.jpct { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text-2); }
.jpct.good { color: var(--ok); } .jpct.accent { color: var(--accent-text); } .jpct.neutral { color: var(--text-3); } .jpct.warn { color: var(--warn); }
.jpct.pop { animation: fx-pop var(--dur-3) var(--spring); }
@keyframes fx-pop { from { transform: scale(.6); opacity: 0; } }
.jstate { font-size: 13px; font-weight: 600; color: var(--text-2); }
.jstate.muted { color: var(--text-3); font-weight: 500; }
.jstate.err { color: var(--danger); }
.jstate i { margin-right: 5px; font-size: 11px; }
.jsizes { margin-top: 3px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.jsizes .out { color: var(--ok); font-weight: 600; }
.jsizes .out.warn { color: var(--warn); }
.jnotes { grid-area: notes; display: none; font-size: 11.5px; line-height: 15px; color: var(--text-3); margin-top: 2px; }
.jrow[data-status="error"] .jnotes, .jrow[data-status="unsupported"] .jnotes { display: block; }
.jnotes.err { color: var(--danger); white-space: normal; line-height: 1.4; word-break: break-word; }
.jnotes.err a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.jactions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
/* phones: the icon buttons form one row, the labelled button (Download / Convert / Retry) takes a full row below */
.jactions .btn { height: 40px; flex: 1 1 100%; order: 2; }
.jactions .icon-btn { order: 1; }
.jactions .icon-btn { width: 40px; height: 40px; }
.jactions [data-act="download"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.jactions [data-act="download"]:hover { background: rgba(255, 255, 255, .16); }
.jactions [data-act="cancel"] { color: var(--danger); border-color: rgba(251, 113, 133, .3); }
.jactions [data-act="cancel"]:hover { background: var(--danger-soft); }
.jactions [data-act="reconvert"] { color: var(--accent-text); border-color: rgba(96, 165, 250, .45); background: var(--blue-soft); }
.icon-btn .lbl { display: none; }
.jactions .icon-btn[data-act="cancel"] { width: auto; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; }
.jactions .icon-btn[data-act="cancel"] .lbl { display: inline; font-size: 12.5px; font-weight: 600; }
.jsettings { margin-top: 12px; padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); display: grid; gap: 12px; }
.jsettings > .muted { font-size: 13px; color: var(--text-3); }

/* ---------------------------------------------------------- empty state */
.queue-empty { padding: 20px 12px 24px; text-align: center; border-radius: var(--r-lg); border: 1px dashed var(--line); }
.ghost-rows { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.ghost { display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px; gap: 12px; align-items: center; opacity: .5; }
.ghost:nth-child(2) { opacity: .34; } .ghost:nth-child(3) { opacity: .18; }
.g-thumb { height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .06); }
.g-lines { display: flex; flex-direction: column; gap: 6px; }
.g-lines span { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.g-lines span:first-child { width: 62%; } .g-lines span:last-child { width: 38%; height: 6px; }
.g-pct { height: 14px; border-radius: 4px; background: rgba(96, 165, 250, .2); }
.empty-title { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.empty-sub { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--text-3); max-width: 340px; margin-inline: auto; }

/* ------------------------------------------------------------- history */
.history-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 14px; padding: 0 8px; font-size: 12px; color: var(--text-3); }
.total-count { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
.total-count i { color: var(--blue); }
.total-count strong { color: var(--accent-text); font-weight: 600; }
.recent { flex: 1 1 100%; min-width: 0; }
.recent summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 500; color: var(--text-3); }
.recent summary::-webkit-details-marker { display: none; }
.recent summary i { color: var(--blue); font-size: 11px; }
.recent summary:hover { color: var(--text); }
.recent-note { font-size: 11.5px; color: var(--text-3); margin: 2px 0 6px; }
.recent-list { list-style: none; margin-bottom: 4px; }
.recent-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 28px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.recent-list li:last-child { border-bottom: 0; }
.recent-list .rname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.recent-list time { display: none; color: var(--text-3); font-size: 11.5px; }
.recent-list .muted { color: var(--text-3); grid-template-columns: 1fr; }
.pill { display: inline-block; padding: 2px 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.3; background: var(--blue-soft); color: var(--accent-text); }

/* ----------------------------------------------------------- drag veil */
.drag-veil { position: fixed; inset: 0; z-index: calc(var(--tt-z-modal, 1000) + 10); pointer-events: none; background: rgba(7, 7, 11, .74); display: grid; place-items: center; animation: fx-fade var(--dur-1) var(--ease); }
.veil-panel { width: calc(100vw - 32px); max-width: 480px; height: 220px; border-radius: 22px; background: rgba(15, 15, 23, .94); border: 2px dashed rgba(96, 165, 250, .8); box-shadow: 0 0 0 8px rgba(96, 165, 250, .1), 0 30px 80px rgba(0, 0, 0, .6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; animation: fx-scale-in var(--dur-2) var(--ease); }
.veil-panel i { font-size: 34px; background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }
.veil-title { font-size: 19px; font-weight: 600; color: var(--text); }
.veil-sub { font-size: 13px; color: var(--text-2); }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-scale-in { from { transform: scale(.96); } }

/* ------------------------------------------------------ overlays */
.ov {
    position: fixed; inset: 0; z-index: calc(var(--tt-z-modal, 1000) + 10); background: rgba(7, 7, 11, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; gap: 10px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    animation: fx-fade 160ms var(--ease);
}
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.ov-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-sub { font-size: 12px; color: var(--text-2); }
.ov-tools { display: flex; gap: 6px; flex-shrink: 0; }
.ov-tools .icon-btn { width: 44px; height: 44px; opacity: 1; }
.ov-tools .icon-btn[aria-pressed="true"] { color: var(--accent-text); background: var(--blue-soft); border-color: rgba(96, 165, 250, .5); }
.ov-hint { display: none; text-align: center; font-size: 12px; color: var(--text-3); }
.pv-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); overflow: hidden; padding: 12px; }
.pv-stage video { max-width: 100%; max-height: calc(100% - 68px); min-height: 0; outline: none; border-radius: 8px; background: #000; cursor: pointer; }
.pv-stage audio { display: none; }
.pv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#12121a 0 25%, #191924 0 50%) 50% / 24px 24px; }
.pv-stage iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.pv-stage pre { width: 100%; height: 100%; margin: 0; overflow: auto; padding: 16px; border-radius: 8px; background: var(--solid); color: var(--text-2); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; text-align: left; }
.pv-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: min(760px, 100%); min-height: 52px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.pv-btn { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; display: grid; place-items: center; transition: background var(--dur-1) var(--ease); }
.pv-btn:hover { background: rgba(255, 255, 255, .08); }
.pv-time { font-size: 12px; color: var(--text-2); min-width: 38px; text-align: center; }
.pv-seek, .pv-vol { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; margin: 0; }
.pv-seek { flex: 1 1 auto; min-width: 80px; }
.pv-vol { width: 84px; flex-shrink: 0; }
.pv-seek::-webkit-slider-runnable-track, .pv-vol::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); }
.pv-seek::-moz-range-track, .pv-vol::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); }
.pv-seek::-webkit-slider-thumb, .pv-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(96, 165, 250, .35); cursor: pointer; }
.pv-seek::-moz-range-thumb, .pv-vol::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(96, 165, 250, .35); cursor: pointer; }
@media (max-width: 559px) { .pv-vol { display: none; } .pv-bar { gap: 6px; padding: 6px; } }
.cmp-stage { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; background: repeating-conic-gradient(#12121a 0 25%, #191924 0 50%) 50% / 24px 24px; border: 1px solid var(--line); cursor: col-resize; touch-action: none; user-select: none; animation: fx-scale-in var(--dur-2) var(--ease); }
.cmp-layer { position: absolute; inset: 0; }
.cmp-layer img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 150ms var(--ease); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.cmp-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .12); }
.cmp-tag { position: absolute; top: 12px; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .62); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; backdrop-filter: blur(4px); }
.cmp-tag-left { left: 12px; } .cmp-tag-right { right: 12px; background: rgba(52, 211, 153, .3); }
.ov.zoomed .cmp-stage { cursor: zoom-out; }

/* -------------------------------------------------------------- toasts */
.toast-host { position: fixed; left: 16px; bottom: calc(var(--ab-h, 0px) + 16px); z-index: calc(var(--tt-z-toast, 1100) + 100); max-width: min(360px, 100vw - 32px); pointer-events: none; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: var(--solid-3); border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 12px; color: var(--text); font-size: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.toast.show { opacity: 1; transform: none; }
.toast i { font-size: 14px; }
.toast-info { border-left-color: var(--blue); } .toast-info i { color: var(--blue); }
.toast-success { border-left-color: var(--ok); } .toast-success i { color: var(--ok); }
.toast-error { border-left-color: var(--danger); } .toast-error i { color: var(--danger); }

/* --------------------------------------------------- learn strip (collapsed) */
.learn { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.learn > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto; width: fit-content; max-width: 100%; min-height: 48px; padding: 0 18px 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); font-size: 14px; font-weight: 600; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.learn > summary::-webkit-details-marker { display: none; }
.learn > summary:hover { color: var(--text); border-color: rgba(96, 165, 250, .5); background: var(--blue-soft); }
.learn > summary .sum-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-soft); color: var(--accent-text); display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.learn > summary .chev { font-size: 11px; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.learn[open] > summary .chev { transform: rotate(180deg); }
.learn > summary .sum-sub { display: none; font-weight: 400; color: var(--text-3); }
.learn-body { margin-top: 26px; display: flex; flex-direction: column; gap: 40px; animation: fx-rise var(--dur-3) var(--ease); }
.seo-section > h2 { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.02em; text-align: center; }
.section-lead { max-width: 720px; margin: 8px auto 18px; text-align: center; color: var(--text-2); font-size: 13.5px; line-height: 1.65; }
.section-lead strong, .section-note strong { color: var(--text); font-weight: 600; }
.section-note { max-width: 760px; margin: 14px auto 0; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; line-height: 1.6; }
.section-note i { color: var(--blue); margin-right: 6px; }
.features-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.feature-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.feature-card:hover { border-color: var(--line-2); background: var(--panel-2); }
.feature-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--accent-text); font-size: 14px; }
.feature-card h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 10px 0 4px; }
.feature-card p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.formats-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.format-category { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.format-category h3 { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.format-category h3 i { font-size: 12px; }
.format-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.format-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.format-category p { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.pairs-group { margin-top: 14px; }
.pairs-group h3 { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.pairs-group h3 i { color: var(--blue); font-size: 11px; }
.pair-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pair-chips a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 12.5px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.pair-chips a:hover { border-color: rgba(96, 165, 250, .5); color: var(--text); background: var(--blue-soft); }
.howto-steps { list-style: none; counter-reset: fx-step; display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.howto-steps li { counter-increment: fx-step; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 14px 54px; }
.howto-steps li::before { content: counter(fx-step); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-btn); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.howto-steps h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.howto-steps p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.howto-steps strong { color: var(--text); font-weight: 600; }
.choose-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; border-radius: 14px; border: 1px solid var(--line); }
.choose-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--panel); font-size: 13px; }
.choose-table th, .choose-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.choose-table thead th { background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 12px; white-space: nowrap; }
.choose-table tbody th { color: var(--text); font-weight: 600; }
.choose-table td { color: var(--text-2); line-height: 1.5; }
.choose-table td strong { color: var(--accent-text); font-weight: 700; }
.choose-table tbody tr:last-child th, .choose-table tbody tr:last-child td { border-bottom: 0; }
.faq-section { margin: 0 auto; max-width: 760px; width: 100%; }
.faq-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
.faq-item:hover { border-color: var(--line-2); background: var(--panel-2); }
.faq-item[open] { border-color: rgba(96, 165, 250, .35); box-shadow: 0 0 0 1px rgba(96, 165, 250, .12), 0 12px 32px rgba(0, 0, 0, .35); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px 14px 18px; min-height: 52px; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid rgba(96, 165, 250, .45); border-radius: 50%; color: var(--blue); font-size: 17px; font-weight: 500; line-height: 1; transition: transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.faq-item[open] summary { color: var(--accent-text); }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--blue); color: #07070b; border-color: transparent; }
.faq-answer { margin: 0 18px; padding: 12px 0 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--text-2); }
.faq-answer p { margin: 0; }
.faq-answer strong { color: var(--text); font-weight: 600; }
.related { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 32px auto 0; padding-bottom: 36px; }
.related-label { flex: 1 1 100%; text-align: center; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.related-link { flex: 1 1 calc(50% - 4px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.related-link i { color: var(--blue); font-size: 12px; }
.related-link:hover { border-color: rgba(96, 165, 250, .5); color: var(--text); background: var(--blue-soft); }

/* ======================================================= phones (base) */
.console-right #summaryCard { order: 3; position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 30; background: rgba(15, 15, 23, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line-2); box-shadow: 0 -10px 30px rgba(7, 7, 11, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.console-right .queue { order: 1; }
.console-right .queue-empty { order: 2; }
.console-right { display: flex; flex-direction: column; gap: 12px; }
.phone-only { display: inline-grid !important; }
.console.has-files .drop-zone { min-height: 56px; padding: 8px 14px; }
.console.has-files .drop-zone > :not(.drop-compact):not(input) { display: none; }
.console.has-files .drop-zone .drop-compact { display: flex; }
.console.has-files .drop-zone.dragover { min-height: 96px; }

@media (max-width: 380px) { .tool-title { font-size: 26px; } .pg-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 480px) { .related-label { flex: 0 0 auto; } .related-link { flex: 0 0 auto; } .learn > summary .sum-sub { display: inline; } }
@media (min-width: 560px) {
    .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .formats-grid { grid-template-columns: repeat(2, 1fr); }
    .howto-steps { grid-template-columns: repeat(2, 1fr); }
    .recent-list li { grid-template-columns: minmax(0, 1fr) auto auto auto; }
    .recent-list time { display: block; }
    .recent { flex: 0 1 auto; }
}
@media (min-width: 720px) {
    .stage { padding: 16px 20px 48px; }
    .tool-sub { font-size: 15px; max-width: 760px; }
    .console { padding: 16px; gap: 16px; }
    .drop-zone { min-height: 184px; }
    .phone-only { display: none !important; }
    .rhead { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring text actions"; gap: 18px; padding: 16px 18px; }
    .ring-wrap { width: 96px; height: 96px; }
    .ring-val { font-size: 24px; } .ring-cap { font-size: 10px; margin-top: 4px; }
    .rh-sizes { font-size: 21px; } .rh-count { font-size: 13px; }
    .rh-actions { justify-content: flex-end; max-width: 360px; }
    .rh-actions .btn { flex: 0 0 auto; height: 40px; }
    .rh-actions .icon-btn { width: 40px; height: 40px; }
    .rh-actions #clearAllBtn, .rh-actions #addMoreBtn { grid-area: auto; }
    .console-right #summaryCard { order: 0; position: static; background: rgba(255, 255, 255, .04); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
    .console-right .queue, .console-right .queue-empty { order: 0; }
    /* actions top-right, result bottom-right — the name line and the meta/format line keep the whole width left of them */
    .jrow-main { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "thumb name actions" "thumb sub result" "thumb notes notes"; column-gap: 14px; row-gap: 4px; align-items: start; }
    .jname { align-self: center; min-height: 32px; display: flex; align-items: center; }
    /* the format select wraps UNDER the meta line when the row is narrow (two-column layout at 960-1180px, or a wide
       progress column while running) instead of ellipsizing the size / dimensions / "own format" tag */
    .jsub { flex-wrap: wrap; gap: 6px 8px; min-height: 32px; }
    .jmeta { flex: 0 1 auto; max-width: 100%; }
    .jto { flex: 0 0 auto; justify-content: flex-start; }
    .to-select { width: 132px; height: 30px; font-size: 12.5px; }
    .jto .via { display: inline-flex; }
    .jresult { align-items: flex-end; text-align: right; min-width: 110px; align-self: center; }
    .jrow[data-status="running"] .jresult { min-width: 190px; }
    .jactions { margin-top: 0; gap: 6px; align-self: center; flex-wrap: nowrap; }
    .jactions .btn { flex: 0 0 auto; height: 32px; order: 0; }
    .jactions .icon-btn { order: 0; }
    .jactions .icon-btn { width: 32px; height: 32px; opacity: .65; }
    .jactions .icon-btn[data-act="cancel"] { opacity: 1; }
    .jrow:hover .jactions .icon-btn, .jrow:focus-within .jactions .icon-btn { opacity: 1; }
    .jrow[data-status="error"] .jresult, .jrow[data-status="unsupported"] .jresult { display: none; }
    .jsettings { padding: 16px; }
    .ov-hint { display: block; }
    .drag-veil { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .veil-panel { width: 480px; height: 250px; }
    .console.has-files .drop-zone { min-height: 184px; padding: 22px 16px; }
    .console.has-files .drop-zone > :not(.drop-compact):not(input) { display: block; }
    .console.has-files .drop-zone .drop-cats { display: flex; }
    .console.has-files .drop-zone .drop-compact { display: none; }
    .pg-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
/* two-column console but a narrow right column (laptops 960-1180px): the summary's buttons move under the text so
   "Ready to convert 5 files" / "0 of 5 done" are never ellipsized next to "Convert all" */
@media (min-width: 960px) and (max-width: 1179.98px) {
    .rhead { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ring text" "ring actions"; row-gap: 10px; }
    .rh-actions { justify-content: flex-start; max-width: none; }
    /* file rows: the done-state action cluster (up to 7 buttons) would squeeze the name to nothing in a ~430px column,
       so the actions get their own row under the content and the result sits under the format line */
    .jrow-main { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb sub" "thumb result" "thumb notes" "actions actions"; }
    .jresult { align-items: flex-start; text-align: left; min-width: 0; }
    .jrow[data-status="running"] .jresult { min-width: 0; }
    .jactions { justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
}
@media (min-width: 900px) { .features-grid { grid-template-columns: repeat(4, 1fr); } .formats-grid { grid-template-columns: repeat(3, 1fr); } .howto-steps { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) {
    .console { grid-template-columns: var(--left-w) minmax(0, 1fr); gap: 24px; padding: 24px; }
    /* sticky only while it fits in the viewport — script.js adds .is-tall when the picker + options outgrow it */
    .console-left { position: sticky; top: calc(var(--tt-topnav-h) + 16px); align-self: start; }
    .console-left.is-tall { position: static; }
    .drop-zone { min-height: 200px; }
    .console.has-files .drop-zone { min-height: 120px; padding: 14px 16px; }
    .console.has-files .drop-zone > .drop-art { display: none !important; }   /* beats the ≥720 "show every child" rule */
    .opt-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .pg-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
@supports not (backdrop-filter: blur(1px)) { .console-right #summaryCard { background: var(--solid-2); } }

@media (hover: none) and (pointer: coarse) {
    .icon-btn, .btn, .link-btn, .switch, .faq-item summary, .related-link, .recent summary, .tile, .pg-tab, .more-btn, .learn > summary { min-height: 44px; }
    .icon-btn { min-width: 44px; }
    .jactions .icon-btn, .jactions .btn { height: 44px; }
    .jactions .icon-btn { width: 44px; opacity: 1; }
    .rh-actions .btn, .rh-actions .icon-btn { height: 44px; }
    .to-select { height: 44px; font-size: 16px; }
    .opt select, .opt input[type="number"], .opt input[type="text"] { height: 44px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .drop-zone::before { animation: none !important; }
    .jrow.indeterminate::after { transform: none; }
}
@media print { .rhead, .picker, .step-head, .drag-veil, .ov, .toast-host, [data-tt-ad-slot] { display: none !important; } }