/* Omniverto - Global Styles ("Rich Light") */

:root {
    /* ---- Accent (one hue, used sparingly) ---- */
    --accent:          #4f46e5;  /* 6.3:1 on white — AA with white text */
    --accent-hover:    #4338ca;
    --accent-active:   #3730a3;
    --accent-subtle:   #eef2ff;  /* tinted fills, selected states */
    --accent-border:   #c7d2fe;
    --accent-text:     #4338ca;  /* 7.6:1 — accent-colored text on white */

    /* ---- Brand gradient system (the ONLY gradients for brand moments) ---- */
    --grad-brand:       linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);   /* icon tiles, step numbers, logo */
    --grad-brand-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    --grad-btn:         linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);   /* primary buttons (vertical) */
    --grad-btn-hover:   linear-gradient(180deg, #5458ee 0%, #4338ca 100%);
    --grad-text:        linear-gradient(92deg, #4338ca 0%, #6d28d9 60%, #7c3aed 100%); /* hero keyword ONLY */
    --grad-hairline:    linear-gradient(90deg, transparent, rgba(124,58,237,0.40), transparent);

    /* ---- Neutrals (cool, pulled toward indigo) ---- */
    --bg:              #ffffff;
    --bg-subtle:       #f8f9fd;  /* section tints, panel headers, footer */
    --bg-inset:        #f1f2f9;  /* wells, chips, secondary fills */
    --border:          #e7e8f2;  /* hairline, the workhorse */
    --border-strong:   #d6d8e6;  /* inputs, dashed dropzones */
    --border-lifted:   rgba(30, 27, 75, 0.08);   /* hairline on shadow-carried cards */
    --bg-wash:         #fbfaff;                   /* faint violet-white section tint */
    --wash-panel:      linear-gradient(180deg, #fbfbfe 0%, #f6f7fc 100%);  /* panel headers/sidebars */
    --stage:           #16181d;  /* video stage + crop modal only */

    /* ---- Interaction micro-values (shared ghost/secondary control states) ---- */
    --border-hover:    #b9bdc7;  /* secondary/ghost hover border */
    --bg-pressed:      #e8eaee;  /* ghost active (pressed) fill */
    --text-ghost-disabled: #c2c6ce;  /* disabled ghost-button glyphs */

    /* ---- Text (all AA on #fff and #f8f9fd) ---- */
    --text-primary:    #17181c;  /* 16.6:1 */
    --text-secondary:  #5a616e;  /* 6.2:1 */
    --text-muted:      #6f7683;  /* 4.6:1 — captions, hints, labels */
    --text-disabled:   #a1a7b3;  /* disabled text + placeholders ONLY */

    /* ---- Semantic ---- */
    --success:         #027a48;
    --success-subtle:  #ecfdf3;
    --success-border:  #a6f4c5;
    --error:           #b42318;  /* text-safe */
    --error-strong:    #d92d20;  /* fills/edges only */
    --error-subtle:    #fef3f2;
    --error-border:    #fecdca;
    --warn-text:       #b54708;
    --warn-subtle:     #fffaeb;
    --warn-border:     #fedf89;

    /* ---- Spacing (4px scale) ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    /* ---- Radii ---- */
    --r-xs: 4px;   /* chips, checkboxes */
    --r-sm: 6px;   /* buttons, inputs, tool rows */
    --r-md: 10px;  /* cards, dropdowns, dropzones */
    --r-lg: 12px;  /* hero dropzone, step cards */
    --r-xl: 16px;  /* converter card, modals, upload cards, how-it-works band */
    --r-full: 999px;

    /* ---- Elevation scale — layered, indigo-tinted (ink = rgba(30,27,75,α), never neutral black) ---- */
    --e1: 0 1px 2px rgba(30,27,75,0.06), 0 2px 8px rgba(30,27,75,0.05);
    --e2: 0 2px 4px rgba(30,27,75,0.06), 0 8px 24px rgba(30,27,75,0.09);
    --e3: 0 2px 4px rgba(30,27,75,0.05), 0 12px 32px rgba(30,27,75,0.10),
          0 32px 64px -16px rgba(79,70,229,0.14);
    --e4: 0 8px 16px rgba(30,27,75,0.08), 0 24px 64px rgba(30,27,75,0.16),
          0 48px 96px -24px rgba(79,70,229,0.12);
    /* Legacy aliases REPOINTED — all existing var(--shadow-*) calls upgrade for free: */
    --shadow-xs: var(--e1);
    --shadow-sm: var(--e1);
    --shadow-md: var(--e2);
    --shadow-lg: var(--e4);
    /* Button glows: */
    --shadow-btn-brand: inset 0 1px 0 rgba(255,255,255,0.18),
                        0 1px 2px rgba(30,27,75,0.20), 0 2px 8px rgba(79,70,229,0.32);
    --shadow-btn-brand-hover: inset 0 1px 0 rgba(255,255,255,0.18),
                        0 2px 4px rgba(30,27,75,0.16), 0 6px 14px -2px rgba(79,70,229,0.45);

    /* ---- File-category color system ---- */
    --cat-image:        #7c3aed;  --cat-image-text:   #6d28d9;
    --cat-image-bg:     #f5f3ff;  --cat-image-border: #ddd6fe;
    --cat-image-grad:   linear-gradient(135deg, #a78bfa, #7c3aed);
    --cat-video:        #2563eb;  --cat-video-text:   #1d4ed8;
    --cat-video-bg:     #eff6ff;  --cat-video-border: #bfdbfe;
    --cat-video-grad:   linear-gradient(135deg, #60a5fa, #2563eb);
    --cat-audio:        #059669;  --cat-audio-text:   #047857;
    --cat-audio-bg:     #ecfdf5;  --cat-audio-border: #a7f3d0;
    --cat-audio-grad:   linear-gradient(135deg, #34d399, #059669);
    --cat-doc:          #d97706;  --cat-doc-text:     #b45309;
    --cat-doc-bg:       #fffbeb;  --cat-doc-border:   #fde68a;
    --cat-doc-grad:     linear-gradient(135deg, #fbbf24, #d97706);

    /* ---- Focus — softer, wider halo ---- */
    --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.18), 0 0 0 1.5px var(--accent);

    /* ---- Type ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --t-fast: 120ms var(--ease);
    --t-base: 160ms var(--ease);
    --t-lift: 200ms cubic-bezier(0.2, 0, 0, 1);   /* transform+shadow hovers */

    /* ---- Legacy aliases: every existing var() in all four CSS files keeps resolving ---- */
    --primary:        var(--accent);
    --primary-hover:  var(--accent-hover);
    --primary-light:  var(--accent-subtle);
    --primary-dark:   var(--text-primary);
    --background:            var(--bg);
    --background-secondary:  var(--bg-subtle);
    --shadow:        rgba(30, 27, 75, 0.05);
    --shadow-hover:  rgba(30, 27, 75, 0.08);
    /* BUG FIX: image-editor.css references these but they were never defined —
       define them so no rule silently falls back (gradients using them are deleted anyway): */
    --primary-color:   var(--accent);
    --secondary-color: var(--accent-hover);
}

::selection { background: rgba(99, 102, 241, 0.22); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: none; box-shadow: var(--focus-ring);
}
body { font-size: 0.9375rem; color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    border-bottom: 1px solid rgba(30, 27, 75, 0.07);
    box-shadow: 0 1px 2px rgba(30, 27, 75, 0.04);
    z-index: 100;
    height: 60px;
}

@supports not (backdrop-filter: blur(12px)) {
    .navbar { background: rgba(255, 255, 255, 0.97); }
}

.nav-container {
    max-width: 1720px;   /* use the full width on normal screens; logo hugs the left */
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    flex-shrink: 0;       /* logo never compresses */
}

.logo-icon {
    font-size: 1.125rem;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);  /* fallback if clip unsupported */
}

.logo-text {
    color: var(--text-primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;        /* fill the space to the right of the logo */
    min-width: 0;
    justify-content: flex-end;
    overflow-x: auto;      /* on a small screen the links scroll, never colliding */
    overflow-y: hidden;
    scrollbar-width: none; /* hide the scrollbar (Firefox) */
}
.nav-links::-webkit-scrollbar { height: 0; width: 0; }  /* hide (WebKit) */
.nav-links > * { flex-shrink: 0; }  /* items keep their size; the row scrolls */

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast);
}

.nav-links a:hover {
    color: var(--text-primary);
    background: var(--bg-inset);
}

.nav-links a.active {
    color: var(--accent-text);
    background: var(--accent-subtle);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.12);
}

/* Main Container */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 24px 0;
}

/* Section headings */
.how-it-works-section h2,
.formats-section h2 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 32px;
    color: var(--text-primary);
}

/* Hero atmosphere — two pseudo-layers, absolute (never fixed), zero blur, zero animation */
body.home { position: relative; }

body.home::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 760px;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(1100px 480px at 50% -120px, rgba(99,102,241,0.13), transparent 65%),
      radial-gradient(760px 420px at 88% 40px,  rgba(168,85,247,0.09), transparent 60%),
      radial-gradient(680px 380px at 8% 120px,  rgba(59,130,246,0.07), transparent 60%),
      linear-gradient(180deg, #fbfaff 0%, #ffffff 640px);
}

body.home::after {   /* dot grid, fades by mid-hero */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 440px;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(79,70,229,0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 85%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 85%);
}

/* Hero Section */
.hero {
    text-align: center;
    max-width: 720px;
    margin: 72px auto 40px;
}

.hero-title {
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.08;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.grad-keyword {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #6d28d9;  /* fallback if clip unsupported */
}

.hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 400;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Converter Section */
.converter-section {
    max-width: 720px;
    margin: 0 auto 112px;
}

.converter-card {
    background: #fff;
    border: 1px solid rgba(30, 27, 75, 0.06);
    border-radius: var(--r-xl);
    box-shadow: var(--e3);
    overflow: hidden;
}

/* Upload Area */
.upload-area {
    padding: 20px;
}

.dropzone {
    position: relative;
    background: linear-gradient(180deg, #fbfaff 0%, #f7f6fd 100%);
    border: 1.5px dashed #d8d5ee;
    border-radius: var(--r-lg);
    padding: 56px 40px;
    text-align: center;
    transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
    cursor: pointer;
}

.dropzone:hover {
    border-color: #b9b3ef;
    background: linear-gradient(180deg, #f8f7fe, #f3f1fc);
}

.dropzone.dragover {
    border: 1.5px solid var(--accent);
    background: linear-gradient(180deg, #f2f0ff, #ece9ff);
    box-shadow: 0 0 0 5px rgba(79,70,229,0.12), inset 0 0 0 1px rgba(79,70,229,0.20);
}

.dropzone:focus-within {
    box-shadow: var(--focus-ring);
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-content {
    pointer-events: none;
}

.upload-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-brand);
    border-radius: 15px;
    color: #fff;
    box-shadow: 0 8px 18px -4px rgba(99,102,241,0.40), inset 0 1px 0 rgba(255,255,255,0.25);
}

.upload-icon svg {
    width: 24px;
    height: 24px;
}

.upload-button-wrapper {
    pointer-events: auto;
    margin-bottom: 12px;
}

.upload-hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.supported-formats {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================
   Buttons — one system (shared across all four pages)
   ============================================================ */
.primary-button, .secondary-button, .toolbar-btn, .export-btn, .upload-button,
.apply-btn, .crop-modal-btn, .rotate-btn, .flip-btn, .set-time-btn,
.speed-btn, .export-format-btn, .icon-button, .zoom-btn, .control-btn,
.modal-close, .add-more-btn, .timeline-zoom-btn, .select-button, .convert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* Sizes: md default for shared buttons */
.primary-button, .secondary-button {
    height: 36px;
    padding: 0 16px;
    font-size: 0.875rem;
}

/* sm: toolbars and panels */
.toolbar-btn, .export-btn, .apply-btn, .set-time-btn, .select-button, .crop-modal-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

/* lg: dropzone CTA + convert (hero CTA size bump) */
.upload-button, .convert-btn {
    height: 44px;
    padding: 0 24px;
    font-size: 0.9375rem;
    border-radius: var(--r-md);
    font-weight: 600;
}

/* Icon sizing inside sm/md buttons */
.primary-button svg, .secondary-button svg, .toolbar-btn svg, .export-btn svg,
.apply-btn svg, .select-button svg, .icon-button svg, .modal-close svg,
.add-more-btn svg, .convert-btn svg, .upload-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Ghost variant */
.toolbar-btn, .icon-button, .zoom-btn, .control-btn,
.modal-close, .add-more-btn, .timeline-zoom-btn {
    background: transparent;
    color: var(--text-secondary);
    border: none;
}

.toolbar-btn:hover, .icon-button:hover, .zoom-btn:hover, .control-btn:hover,
.modal-close:hover, .timeline-zoom-btn:hover {
    background: rgba(99, 102, 241, 0.07);
    color: var(--text-primary);
}

.toolbar-btn:active, .icon-button:active, .zoom-btn:active, .control-btn:active,
.modal-close:active, .timeline-zoom-btn:active {
    background: rgba(99, 102, 241, 0.12);
}

.toolbar-btn:disabled, .icon-button:disabled, .zoom-btn:disabled, .control-btn:disabled,
.modal-close:disabled, .add-more-btn:disabled, .timeline-zoom-btn:disabled {
    color: var(--text-ghost-disabled);
    background: none;
    cursor: not-allowed;
}

/* Secondary variant */
.secondary-button, .rotate-btn, .flip-btn, .set-time-btn, .speed-btn,
.export-format-btn, .crop-modal-btn.secondary, .select-button {
    background: linear-gradient(180deg, #fff, #fafbff);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 2px rgba(30,27,75,0.06);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
                transform var(--t-lift), box-shadow var(--t-lift);
}

.secondary-button:hover, .rotate-btn:hover, .flip-btn:hover, .set-time-btn:hover,
.speed-btn:hover, .export-format-btn:hover, .crop-modal-btn.secondary:hover {
    border-color: #c3c7dd;
    box-shadow: var(--e1);
    transform: translateY(-1px);
}

.secondary-button:active, .rotate-btn:active, .flip-btn:active, .set-time-btn:active,
.speed-btn:active, .export-format-btn:active, .crop-modal-btn.secondary:active {
    background: var(--bg-inset);
    transform: translateY(0);
}

.secondary-button:disabled, .rotate-btn:disabled, .flip-btn:disabled, .set-time-btn:disabled,
.speed-btn:disabled, .export-format-btn:disabled, .crop-modal-btn.secondary:disabled,
.select-button:disabled {
    color: var(--text-disabled);
    border-color: var(--border);
    background: var(--bg-subtle);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Primary variant — gradient, lit */
.primary-button, .export-btn, .toolbar-btn.primary, .convert-btn,
.apply-btn, .crop-modal-btn.primary, .upload-button {
    background: var(--grad-btn);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-btn-brand);
    transition: background var(--t-fast), box-shadow var(--t-lift), transform var(--t-lift);
}

.primary-button:hover, .export-btn:hover, .toolbar-btn.primary:hover,
.convert-btn:hover, .apply-btn:hover, .crop-modal-btn.primary:hover, .upload-button:hover {
    background: var(--grad-btn-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn-brand-hover);
}

.primary-button:active, .export-btn:active, .toolbar-btn.primary:active,
.convert-btn:active, .apply-btn:active, .crop-modal-btn.primary:active, .upload-button:active {
    background: #4338ca;
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(30,27,75,0.20);
}

.primary-button:disabled, .export-btn:disabled, .toolbar-btn.primary:disabled,
.convert-btn:disabled, .apply-btn:disabled, .crop-modal-btn.primary:disabled,
.upload-button:disabled {
    background: var(--bg-inset);
    color: var(--text-disabled);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.primary-button:focus-visible, .export-btn:focus-visible, .toolbar-btn.primary:focus-visible,
.convert-btn:focus-visible, .apply-btn:focus-visible, .crop-modal-btn.primary:focus-visible,
.upload-button:focus-visible {
    box-shadow: 0 1px 2px rgba(30,27,75,0.20), var(--focus-ring);
}

/* Selected state — a tint, never a solid accent fill */
.speed-btn.active, .export-format-btn.active, .filter-btn.active, .format-option.active {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}

/* Icon button (file-list remove/settings) */
.icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text-muted);
}

.icon-button:hover {
    background: var(--bg-inset);
    color: var(--text-primary);
}

.remove-btn:hover, .op-remove:hover {
    background: var(--error-subtle);
    color: var(--error);
}

/* ============================================================
   File List (app.js-generated)
   ============================================================ */
.file-list {
    background: var(--bg);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
    animation: rise 200ms var(--ease);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #eef2ff, #f3e8ff);
    border: 1px solid #e6e2f8;
    color: var(--accent);
    border-radius: var(--r-md);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.file-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.file-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Format Selector */
.format-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.format-selector label {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.custom-select {
    position: relative;
}

.select-button {
    min-width: 104px;
    justify-content: space-between;
}

.select-button svg {
    color: var(--text-muted);
}

.select-button:hover {
    background: #fff;
    border-color: var(--accent);
}

.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-lifted);
    border-radius: var(--r-md);
    box-shadow: var(--e2);
    padding: 5px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
    max-height: 200px;
    overflow-y: auto;
}

.select-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.format-option {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--r-xs);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: background var(--t-fast), color var(--t-fast);
}

.format-option:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
}

.format-option.active {
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.15);
}

/* Add More Section */
.add-more-section {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.add-more-btn {
    width: 100%;
    height: 36px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.add-more-btn:hover {
    color: var(--accent-text);
    border-color: var(--accent);
    background: transparent;
}

/* File List Footer */
.file-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-wash);
    border-top: 1px solid var(--border);
}

.files-count {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Conversion Progress */
.conversion-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 40px;
}

.progress-container {
    text-align: center;
}

.progress-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.progress-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ---- Per-file batch progress ------------------------------------------- */
/* One row per file in the batch, each following its own /api/jobs/<id>
   stream. The container is centred by .conversion-progress, so it needs an
   explicit width to stop rows collapsing to their text. */

.conversion-progress .progress-container {
    width: 100%;
    max-width: 560px;
}

.batch-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.batch-progress-head .progress-text {
    margin: 0;
    text-align: left;
}

.batch-progress-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.batch-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-inset);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(30, 27, 75, 0.06);
}

.batch-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--grad-btn);
    transition: width 220ms ease;
}

.progress-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    text-align: left;
}

.progress-row {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--shadow-xs);
    transition: border-color 160ms ease, background-color 160ms ease;
}

.progress-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.progress-row-name {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
    /* Long filenames must not push the status chip off the row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.progress-row-status {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.progress-row-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--bg-inset);
    overflow: hidden;
}

.progress-row-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent);
    transition: width 220ms ease;
}

.progress-row.is-done {
    border-color: var(--success-subtle);
    background: var(--success-subtle);
}

.progress-row.is-done .progress-row-fill {
    background: var(--success);
}

.progress-row.is-done .progress-row-status {
    color: var(--success);
}

.progress-row.is-error {
    border-color: var(--error-border);
    background: var(--error-subtle);
}

.progress-row.is-error .progress-row-fill {
    background: var(--error-strong);
}

.progress-row.is-error .progress-row-status {
    color: var(--error);
}

.progress-row-error {
    margin-top: 7px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--error);
    /* Server error text can be long and unbroken; keep it inside the card. */
    overflow-wrap: anywhere;
}

.progress-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .batch-progress-fill,
    .progress-row-fill {
        transition: none;
    }
}

/* Conversion Complete */
.conversion-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    text-align: center;
}

@keyframes pop {
    from {
        transform: scale(0.85);
        opacity: 0;
    }
}

.complete-icon {
    width: 56px;
    height: 56px;
    background: var(--cat-audio-grad);
    border: none;
    color: #fff;
    box-shadow: 0 8px 18px -4px rgba(5, 150, 105, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    animation: pop 240ms var(--ease);
}

.complete-icon svg {
    width: 24px;
    height: 24px;
}

.conversion-complete h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.complete-info {
    margin-bottom: 24px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.complete-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.download-button {
    text-decoration: none;
}

/* Download Links for multiple files */
.download-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.download-link {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--r-sm);
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent-text);
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}

.download-link:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Features Section */
.features-section {
    margin-bottom: 96px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    background: #fff;
    padding: 28px;
    border: 1px solid var(--border-lifted);
    border-radius: 14px;
    box-shadow: var(--e1);
    text-align: left;
    transition: box-shadow var(--t-lift), transform var(--t-lift), border-color var(--t-lift);
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--e2);
}

.feature-card:active {
    transform: translateY(0);
    box-shadow: var(--e1);
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
}

.feature-card:nth-child(1) .feature-icon {
    background: var(--accent-subtle);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px #dcd8f8;
}

.feature-card:nth-child(2) .feature-icon {
    background: var(--cat-video-bg);
    color: var(--cat-video);
    box-shadow: inset 0 0 0 1px var(--cat-video-border);
}

.feature-card:nth-child(3) .feature-icon {
    background: var(--cat-audio-bg);
    color: var(--cat-audio);
    box-shadow: inset 0 0 0 1px var(--cat-audio-border);
}

.feature-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* How It Works Section — rounded tinted band */
.how-it-works-section {
    background: linear-gradient(180deg, #f8f7fd 0%, #f4f2fb 100%);
    border: 1px solid #edeaf8;
    border-radius: 20px;
    padding: 48px;
    margin-bottom: 112px;
    text-align: left;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step-card {
    background: #fff;
    border: 1px solid var(--border-lifted);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--e1);
    text-align: left;
    transition: box-shadow var(--t-lift), transform var(--t-lift), border-color var(--t-lift);
}

.step-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--e2);
}

.step-card:active {
    transform: translateY(0);
    box-shadow: var(--e1);
}

.step-number {
    width: 34px;
    height: 34px;
    background: var(--grad-brand);
    border: none;
    color: #fff;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 10px -2px rgba(99,102,241,0.40), inset 0 1px 0 rgba(255,255,255,0.25);
    margin: 0 0 16px;
}

.step-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.step-card p {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Formats Section */
.formats-section {
    margin-bottom: 96px;
    text-align: left;
}

.formats-section h2 {
    margin-bottom: 8px;
}

.formats-subtitle {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 32px;
}

.formats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.format-category {
    background: #fff;
    padding: 24px;
    border: 1px solid var(--border-lifted);
    border-radius: 14px;
    box-shadow: var(--e1);
    text-align: left;
    transition: box-shadow var(--t-lift), transform var(--t-lift), border-color var(--t-lift);
}

.format-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--e2);
}

.format-category:active {
    transform: translateY(0);
    box-shadow: var(--e1);
}

.format-category h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.format-category h3 svg {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--text-muted);
}

/* Category icon squircles */
.cat-images h3 svg { background: var(--cat-image-bg); color: var(--cat-image); box-shadow: inset 0 0 0 1px var(--cat-image-border); }
.cat-docs   h3 svg { background: var(--cat-doc-bg);   color: var(--cat-doc);   box-shadow: inset 0 0 0 1px var(--cat-doc-border); }
.cat-audio  h3 svg { background: var(--cat-audio-bg); color: var(--cat-audio); box-shadow: inset 0 0 0 1px var(--cat-audio-border); }
.cat-video  h3 svg { background: var(--cat-video-bg); color: var(--cat-video); box-shadow: inset 0 0 0 1px var(--cat-video-border); }

.format-count {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding: 2px 9px;
    border-radius: var(--r-full);
}

/* Category count pills */
.cat-images .format-count { background: var(--cat-image-bg); color: var(--cat-image-text); }
.cat-docs   .format-count { background: var(--cat-doc-bg);   color: var(--cat-doc-text); }
.cat-audio  .format-count { background: var(--cat-audio-bg); color: var(--cat-audio-text); }
.cat-video  .format-count { background: var(--cat-video-bg); color: var(--cat-video-text); }

.format-group {
    margin-bottom: 16px;
}

.format-group:last-child {
    margin-bottom: 0;
}

.format-group h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.3;
}

.format-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.format-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    background: #fff;
    border: 1px solid #e6e3f2;
    color: var(--text-secondary);
    box-shadow: 0 1px 2px rgba(30,27,75,0.05);
}

.format-tag.highlight {
    background: var(--warn-subtle);
    border-color: var(--warn-border);
    color: var(--warn-text);
}

.format-tag.output {
    background: var(--accent-subtle);
    border-color: var(--accent-border);
    color: var(--accent-text);
}

/* Category-tinted output chips (.highlight stays amber globally) */
.cat-images .format-tag.output { background: var(--cat-image-bg); border-color: var(--cat-image-border); color: var(--cat-image-text); }
.cat-docs   .format-tag.output { background: var(--cat-doc-bg);   border-color: var(--cat-doc-border);   color: var(--cat-doc-text); }
.cat-audio  .format-tag.output { background: var(--cat-audio-bg); border-color: var(--cat-audio-border); color: var(--cat-audio-text); }
.cat-video  .format-tag.output { background: var(--cat-video-bg); border-color: var(--cat-video-border); color: var(--cat-video-text); }

/* Footer */
.footer {
    background: linear-gradient(180deg, #fafafd 0%, #f3f1fa 100%);
    border-top: none;
    padding: 48px 24px 36px;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--grad-hairline);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-brand .logo-icon {
    font-size: 1rem;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);  /* fallback if clip unsupported */
}

.footer-brand .logo-text {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
}

.footer-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: 0;
}

/* Toast Notifications — white cards with a colored edge, never solid slabs */
.toast, .status-message {
    background: #fff;
    border: 1px solid var(--border-lifted);
    border-left-width: 3px;
    border-radius: var(--r-md);
    box-shadow: var(--e3);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 12px 16px 12px 14px;
}

.error-toast,   .status-message.error   { border-left-color: var(--error-strong); }
.success-toast, .status-message.success { border-left-color: var(--success); }
.status-message.info                    { border-left-color: var(--accent); }

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 200ms var(--ease), opacity 200ms var(--ease);
    z-index: 1000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.error-toast svg { color: var(--error-strong); }
.success-toast svg { color: var(--success); }

/* Settings Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 27, 75, 0.45);
}

.modal-content {
    position: relative;
    background: #fff;
    border: 1px solid rgba(30, 27, 75, 0.05);
    border-radius: var(--r-xl);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: transform var(--t-base);
    display: flex;
    flex-direction: column;
}

.modal.show .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.modal-title svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
}

.modal-file-info {
    padding: 10px 20px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border);
}

.modal-file-info span {
    color: var(--text-primary);
    font-weight: 500;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.options-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.options-section + .options-section {
    margin-top: 16px;
}

.options-header {
    padding: 10px 16px;
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border);
}

.options-section .options-content {
    padding: 4px 0;
}

.option-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}

.option-row:last-child {
    border-bottom: none;
}

.option-label {
    flex: 0 0 170px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    padding-top: 8px;
}

.option-control {
    flex: 1;
}

/* ============================================================
   Inputs / selects / checkboxes / sliders — one system
   ============================================================ */
.option-input, .option-select, .filename-input, .time-input,
.size-input, .volume-input, .color-text-input {
    height: 36px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-primary);
    box-shadow: inset 0 1px 2px rgba(30,27,75,0.04), 0 1px 1px rgba(30,27,75,0.03);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.option-input:focus, .option-select:focus, .filename-input:focus, .time-input:focus,
.size-input:focus, .volume-input:focus, .color-text-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.option-input::placeholder, .option-select::placeholder, .filename-input::placeholder,
.time-input::placeholder, .size-input::placeholder, .volume-input::placeholder,
.color-text-input::placeholder {
    color: var(--text-disabled);
}

.time-input, .filename-input {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.option-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f7683' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

.option-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.size-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.size-input {
    width: 110px;
}

.size-separator {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.color-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-text-input {
    width: 110px;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.color-picker {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    background: #fff;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: var(--r-xs);
}

.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.option-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}

.option-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--grad-btn);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(79,70,229,0.40);
}

.option-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 1px 4px rgba(79,70,229,0.40), 0 0 0 4px rgba(99,102,241,0.16);
}

.option-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--grad-btn);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(79,70,229,0.40);
}

.option-slider::-moz-range-thumb:hover {
    box-shadow: 0 1px 4px rgba(79,70,229,0.40), 0 0 0 4px rgba(99,102,241,0.16);
}

.slider-value {
    min-width: 40px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.volume-input {
    width: 70px;
    text-align: center;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xs);
    background: #fff;
    position: relative;
    flex-shrink: 0;
    transition: background var(--t-fast), border-color var(--t-fast);
    margin-top: 3px;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom,
input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--grad-btn);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(79,70,229,0.35);
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom::after,
input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible + .checkbox-custom {
    box-shadow: var(--focus-ring);
}

.checkbox-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.apply-settings-btn {
    padding: 0 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* The nav is a horizontal scroller (see .nav-links: overflow-x auto,
       flex-shrink 0 on the items). On desktop justify-content:flex-end is
       right-alignment. On a phone the row overflows, and flex-end pins the
       VISIBLE window to the END of the list -- so the page opened showing
       "Recent | English" while Converter, Image Editor, Video Editor, LaTeX,
       PDF and CAD sat off-screen to the left with nothing to suggest they
       existed. Measured on an emulated iPhone 14: the page itself has no
       horizontal overflow at all, so this was never a layout break, only a
       scroll position that hid every primary destination.
       flex-start puts the row where a reader starts. */
    .nav-links {
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
        scroll-padding-inline: 8px;
    }
    /* NOTE: there is no hamburger. An earlier comment here claimed nav collapse
       was "handled by i18n.js (hamburger)" -- i18n.js contains only the nav
       LABEL translations, and no nav-toggle/hamburger class exists in any CSS
       or JS file in this repo. The mobile nav is the scrolling row above. Say
       what is true here, or the next person debugs the wrong file. */
    .hero-title {
        font-size: 2.125rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .converter-section {
        margin-bottom: 72px;
    }

    .features-section,
    .how-it-works-section,
    .formats-section {
        margin-bottom: 64px;
    }

    .how-it-works-section {
        padding: 28px 20px;
    }

    .features-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .formats-grid {
        grid-template-columns: 1fr;
    }

    .file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .file-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .format-selector {
        width: 100%;
    }

    .file-list-footer {
        flex-direction: column;
        gap: 16px;
    }

    .convert-btn {
        width: 100%;
        justify-content: center;
    }

    .complete-actions {
        flex-direction: column;
        width: 100%;
    }

    .complete-actions button,
    .complete-actions a {
        width: 100%;
        justify-content: center;
    }

    .dropzone {
        padding: 40px 20px;
    }

    .option-row {
        flex-direction: column;
        gap: 8px;
    }

    .option-label {
        flex: none;
        padding-top: 0;
    }

    .footer-text {
        display: none;
    }
}

@media (max-width: 375px) {
    .hero {
        margin-top: 48px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .dropzone {
        padding: 36px 16px;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-disabled);
}

/* ============================================================
   Converter add-ons (Tools, presets, history, share, previews)
   ============================================================ */

/* Nav buttons that look like nav links */
.nav-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.nav-link-btn:hover { color: var(--text-primary); background: var(--bg-inset); }
.nav-link-btn svg { width: 15px; height: 15px; }

/* Upload alternate actions */
.upload-alt-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.upload-alt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent-text);
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: var(--r-full);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.upload-alt-btn:hover { background: #e4e9ff; border-color: var(--accent); }
.upload-paste-hint { font-size: 0.8125rem; color: var(--text-muted); }

/* Editor link button matches other icon-buttons */
.editor-btn { text-decoration: none; color: var(--text-secondary); }

/* Combine-to-PDF toggle row */
.combine-pdf-row {
    margin: 12px 0 0;
    padding: 12px 16px;
    background: var(--cat-doc-bg);
    border: 1px solid var(--cat-doc-border);
    border-radius: var(--r-md);
}
.combine-pdf-row .checkbox-label { color: var(--cat-doc-text); }

/* Preset bar in the settings modal */
.preset-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: var(--wash-panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.preset-bar-left { display: flex; align-items: center; gap: 8px; }
.preset-bar-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.preset-picker { height: 32px; min-width: 160px; }
.preset-bar-actions { display: flex; gap: 6px; }
.preset-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.preset-mini-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-subtle); }
.preset-mini-btn svg { width: 15px; height: 15px; }

/* Modal footer with grouped left actions */
.modal-footer-left { display: flex; gap: 8px; }

/* Modal width variants */
.modal-narrow { max-width: 440px; }
.modal-wide { max-width: 760px; }

/* Completion extras */
.complete-extras {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
}
.output-preview {
    max-width: 340px;
    width: 100%;
    padding: 10px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex;
    justify-content: center;
}
.preview-media {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--r-sm);
    display: block;
}
.preview-audio { width: 100%; }
.size-delta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.8125rem;
}
.size-delta svg { width: 16px; height: 16px; color: var(--text-muted); }
.size-chip {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: 2px 8px;
}
.delta-badge {
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--r-full);
    border: 1px solid transparent;
}
.delta-smaller { color: var(--success); background: var(--success-subtle); border-color: var(--success-border); }
.delta-larger  { color: var(--warn-text); background: var(--warn-subtle); border-color: var(--warn-border); }
.delta-neutral { color: var(--text-muted); background: var(--bg-inset); border-color: var(--border); }
.extra-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Share + QR modal */
.share-filename {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    word-break: break-all;
    text-align: center;
    margin-bottom: 14px;
}
.qr-holder { display: flex; justify-content: center; }
.qr-holder img {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    padding: 8px;
}
.qr-caption { text-align: center; margin-top: 8px; }
.share-link-block { margin-top: 16px; }
.share-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-result { display: flex; gap: 8px; margin-top: 12px; }
.share-result .option-input { flex: 1; font-family: var(--font-mono); font-size: 0.75rem; }

/* Side drawer (history) */
.side-drawer {
    position: fixed;
    inset: 0;
    z-index: 210;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-base), visibility var(--t-base);
}
.side-drawer.show { visibility: visible; opacity: 1; }
.side-drawer-backdrop { position: absolute; inset: 0; background: rgba(30, 27, 75, 0.45); }
.side-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 90vw;
    background: #fff;
    box-shadow: var(--e4);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-base);
}
.side-drawer.show .side-drawer-panel { transform: translateX(0); }
.side-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.side-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.side-drawer-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
.side-drawer-footer .secondary-button { width: 100%; justify-content: center; }
.drawer-empty { color: var(--text-muted); font-size: 0.875rem; text-align: center; padding: 32px 12px; }
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 8px;
}
.history-meta { display: flex; flex-direction: column; min-width: 0; }
.history-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-sub { font-size: 0.75rem; color: var(--text-muted); }
.history-redownload { flex-shrink: 0; }

/* Tools modal */
.tools-intro { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 16px; }
.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-lift), transform var(--t-lift);
}
.tool-card:hover { border-color: var(--accent-border); box-shadow: var(--e1); transform: translateY(-1px); }
.tool-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--grad-brand);
    color: #fff;
}
.tool-card-text { display: flex; flex-direction: column; min-width: 0; }
.tool-card-name { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
.tool-card-desc { font-size: 0.8125rem; color: var(--text-muted); }
.tool-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
}
.tool-back-btn:hover { color: var(--accent-text); }
.tool-note {
    font-size: 0.8125rem;
    color: var(--warn-text);
    background: var(--warn-subtle);
    border: 1px solid var(--warn-border);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
}
.tool-note-link {
    color: var(--accent, #4f46e5);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.tool-form { display: flex; flex-direction: column; }
.tool-file-input { font-size: 0.8125rem; color: var(--text-secondary); width: 100%; }
.tool-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.req { color: var(--error); }
.tool-result { margin-top: 16px; }
.tool-success {
    background: var(--success-subtle);
    border: 1px solid var(--success-border);
    border-radius: var(--r-md);
    padding: 16px;
    text-align: center;
}
.tool-success-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--success);
    margin-bottom: 12px;
}
.tool-success .primary-button { text-decoration: none; max-width: 100%; }
.tool-error {
    background: var(--error-subtle);
    border: 1px solid var(--error-border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    color: var(--error);
    font-size: 0.875rem;
}
.tool-running { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 0.875rem; }
.member-list { max-height: 200px; overflow-y: auto; text-align: left; margin-top: 8px; }
.member-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8125rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.member-size { color: var(--text-muted); font-family: var(--font-mono); }

.mini-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: mini-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes mini-spin { to { transform: rotate(360deg); } }
.is-loading { opacity: 0.7; cursor: progress; }

@media (max-width: 768px) {
    .tools-grid { grid-template-columns: 1fr; }
    .side-drawer-panel { width: 100%; }
    .preset-bar { flex-direction: column; align-items: stretch; }
    .preset-bar-actions { justify-content: flex-end; }
    .modal-footer-left { flex-direction: column; width: 100%; }
    .modal-footer-left .secondary-button { width: 100%; justify-content: center; }
}